Відмінності між версіями «Завдання по мові HTML»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(→‎h 6)
(delete IE7)
 
(не показані 26 проміжних версій 6 учасників)
Рядок 1: Рядок 1:
−
== Загальні питання роботи мережі Інтернет. Завдання. ==
+
== Завдання по мові HTML ==
 
Для того щоб відповідати на дані завдання, треба:
 
Для того щоб відповідати на дані завдання, треба:
 
# Створити пошту на сайті Google
 
# Створити пошту на сайті Google
Рядок 6: Рядок 6:
  
 
В темі листа '''необхідно''' вказати тему наступним чином : 36 hN <Прізвище та ім'я>, де N - номер завдання. <br>
 
В темі листа '''необхідно''' вказати тему наступним чином : 36 hN <Прізвище та ім'я>, де N - номер завдання. <br>
−
Приклад : 36 h1 Біндовський Антон  
+
Приклад : 36 h1 Біндовський Антон. Лист відсилається на почту [email protected].
 
   
 
   
  
Рядок 30: Рядок 30:
 
=== h 3 ===
 
=== h 3 ===
 
* Зробити точну копію "сторінки відвідування" журналу.
 
* Зробити точну копію "сторінки відвідування" журналу.
−
[[Файл:36gr_journal.jpg|100px]]
+
[[Файл:Table_for_webdev.png|200px]]
−
[[Файл:36gr_journal2.jpg|100px]]
+
[[Файл:Table ps.png|200px]]
−
[[Файл:36gr_journal3.jpg|100px]]
+
* В 2-5 комірках зправа розмістити текст за напрямком: вертикально (необов'язково)
−
[[Файл:36gr_journal4.jpg|100px]]
+
 
----
 
----
  
 
=== h 4 ===
 
=== h 4 ===
−
* красиво оформити структуру сайту з трьома колонками (колір, фон, розмір...).
+
* '''Базовй рівень "stage I"'''
−
* зробити колонки однакової висоти (CSS).   
+
* оформити структуру сайту з "шапкою" сайту, трьома колонками та "підлогою".
−
 
+
** "резинова" структура з трьох колонок.
 +
* '''Високий рівень "stage II"'''
 +
** + правильний порядок колонок <main>..</main> блоку
 +
* '''Найвищий рівень "stage III"'''
 +
** + колонки мають бути однакової висоти незалежно від вмісту. (засобами html та css)
 +
[[Файл:H4 stage1.png|200px]] [[Файл:H4 stage2.png|200px]] [[Файл:H4 stage3.png|200px]]
 
----
 
----
  
 
=== h 5 ===
 
=== h 5 ===
 +
[[Файл:ppvz_h5.png|міні]]
 
* створити текст, який буде відкидати тінь  
 
* створити текст, який буде відкидати тінь  
−
* створити колонку яка матиме фіксовані координати відносно вікна браузера
+
* створити тінь від блоку (наприклад від блоку div../div)
 +
 
  
 
----
 
----
Рядок 53: Рядок 59:
 
** При наведені курсора на посилання
 
** При наведені курсора на посилання
 
** Після переходу по посиланню
 
** Після переходу по посиланню
−
* * Створити таблицю 10х10, та розфарбувати її як дошку для шахів.  
+
* Створити таблицю 10х10, та розфарбувати її як дошку для шахів.  
 +
** застосовуючи '''псевдокласи'''
  
 
----
 
----
  
−
=== h 7 (Верстка)===
+
=== h 7 ===
−
* створити блок з заокругленими кутами ( звичайно ж з динамічною висотою та шириною )  
+
[[Файл:H7 example.png|міні|200px]]
−
* зробити фонову картинку так щоб вона підлаштовувалась під розміри вікна браузера.  
+
* '''Базовий рівень:'''
 +
** 1.1 Створити блок з заокругленими кутами ( з динамічною висотою та шириною ) (див. малюнок);
 +
** 1.2 Обов'язкове обтікання текстом заокруглених кутів.
 +
** 2.1 Зробити фонову картинку так щоб вона підлаштовувалась під розміри вікна браузера (background-size).
 +
* '''Високий рівень:'''
 +
** Запропонувати свій варіант блока з заокругленими кутами (три div'и);
 +
** ознайомитись із селекторами before та after.
 +
 
 +
 
 +
 
 +
 
  
 
----
 
----
Рядок 66: Рядок 83:
 
* CSS3+HTML5
 
* CSS3+HTML5
  
−
Зробити демонстраційну HTML сторінку, на якій використати та описати не менше 4 нових тегів (з HTML5) та 7 нових властивостей (з CSS3).
+
Зробити демонстраційну HTML сторінку, на якій використати та описати структурні теги HTML5 (header, main, aside, footer, article, menu, nav, section), описати як змусити ІЕ(7-8) "розуміти" нові теги.
 +
 
 +
На сторінці [[Css селектори]] зробити переклад призначення селекторів (колективно).
 +
 
 +
'''Базовий рівень:'''
 +
 
 +
Знати призначення та вміти використовувати селектори 1 та 2 рівнів
 +
 
 +
'''Високий рівень:'''
 +
 
 +
Зробити демонстраційні приклади використання всіх селекторів.
 +
 
 +
 
 +
----
 +
 
 +
=== h 9 ===
 +
* CSS та HTML препроцесори
 +
Зробити одне з попередніх завдань використовуючи CSS та HTML препроцесори.
  
 
----
 
----

Поточна версія на 11:58, 3 березня 2020

Завдання по мові HTML

Для того щоб відповідати на дані завдання, треба:

  1. Створити пошту на сайті Google
  2. Знайти відповіді в інтернеті та опрацювати їх. ( КЭП ! =) )
  3. Надіслати їх на пошту викладача даного предмету.

В темі листа необхідно вказати тему наступним чином : 36 hN <Прізвище та ім'я>, де N - номер завдання.
Приклад : 36 h1 Біндовський Антон. Лист відсилається на почту [email protected].


h 1

  • Порівняти такі версії HTML:
    • HTML 3,2
    • HTML 4
    • HTML 5
    • ХHTML 1

h 2

  • Знайти різницю у відображені тегів для роботи з текстом, при використанні різних браузерів:
    • Chrome
    • Mozilla Firefox
    • Safari

h 3

  • Зробити точну копію "сторінки відвідування" журналу.

Table for webdev.png Table ps.png

  • В 2-5 комірках зправа розмістити текст за напрямком: вертикально (необов'язково)

h 4

  • Базовй рівень "stage I"
  • оформити структуру сайту з "шапкою" сайту, трьома колонками та "підлогою".
    • "резинова" структура з трьох колонок.
  • Високий рівень "stage II"
    • + правильний порядок колонок <main>..</main> блоку
  • Найвищий рівень "stage III"
    • + колонки мають бути однакової висоти незалежно від вмісту. (засобами html та css)

H4 stage1.png H4 stage2.png H4 stage3.png

h 5

Ppvz h5.png
  • створити текст, який буде відкидати тінь
  • створити тінь від блоку (наприклад від блоку div../div)


h 6

  • Створити три html документа зв'язаних між собою
  • Посилання повинні змінювати свій зовнішній вигляд, наприклад:
    • При наведені курсора на посилання
    • Після переходу по посиланню
  • Створити таблицю 10х10, та розфарбувати її як дошку для шахів.
    • застосовуючи псевдокласи

h 7

H7 example.png
  • Базовий рівень:
    • 1.1 Створити блок з заокругленими кутами ( з динамічною висотою та шириною ) (див. малюнок);
    • 1.2 Обов'язкове обтікання текстом заокруглених кутів.
    • 2.1 Зробити фонову картинку так щоб вона підлаштовувалась під розміри вікна браузера (background-size).
  • Високий рівень:
    • Запропонувати свій варіант блока з заокругленими кутами (три div'и);
    • ознайомитись із селекторами before та after.



h 8

  • CSS3+HTML5

Зробити демонстраційну HTML сторінку, на якій використати та описати структурні теги HTML5 (header, main, aside, footer, article, menu, nav, section), описати як змусити ІЕ(7-8) "розуміти" нові теги.

На сторінці Css селектори зробити переклад призначення селекторів (колективно).

Базовий рівень:

Знати призначення та вміти використовувати селектори 1 та 2 рівнів

Високий рівень:

Зробити демонстраційні приклади використання всіх селекторів.


h 9

  • CSS та HTML препроцесори

Зробити одне з попередніх завдань використовуючи CSS та HTML препроцесори.

Отримано з https://wiki.cusu.edu.ua/index.php?title=Завдання_по_мові_HTML&oldid=363596