Відмінності між версіями «Завдання по мові HTML»
Матеріал з Вікі ЦДУ
3142017 (обговорення • внесок) (delete IE7) |
|||
| (не показана одна проміжна версія 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 === | ||
* Зробити точну копію "сторінки відвідування" журналу. | * Зробити точну копію "сторінки відвідування" журналу. | ||
| − | [[Файл: | + | [[Файл:Table_for_webdev.png|200px]] |
| − | [[Файл: | + | [[Файл:Table ps.png|200px]] |
| − | + | * В 2-5 комірках зправа розмістити текст за напрямком: вертикально (необов'язково) | |
---- | ---- | ||
=== h 4 === | === h 4 === | ||
| − | * | + | * '''Базовй рівень "stage I"''' |
| − | * | + | * оформити структуру сайту з "шапкою" сайту, трьома колонками та "підлогою". |
| − | * | + | ** "резинова" структура з трьох колонок. |
| − | + | * '''Високий рівень "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) |
| + | |||
---- | ---- | ||
| Рядок 54: | Рядок 60: | ||
** Після переходу по посиланню | ** Після переходу по посиланню | ||
* Створити таблицю 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 сторінку, на якій використати та описати | + | Зробити демонстраційну 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
Для того щоб відповідати на дані завдання, треба:
- Створити пошту на сайті Google
- Знайти відповіді в інтернеті та опрацювати їх. ( КЭП ! =) )
- Надіслати їх на пошту викладача даного предмету.
В темі листа необхідно вказати тему наступним чином : 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
- Зробити точну копію "сторінки відвідування" журналу.
- В 2-5 комірках зправа розмістити текст за напрямком: вертикально (необов'язково)
h 4
- Базовй рівень "stage I"
- оформити структуру сайту з "шапкою" сайту, трьома колонками та "підлогою".
- "резинова" структура з трьох колонок.
- Високий рівень "stage II"
- + правильний порядок колонок <main>..</main> блоку
- Найвищий рівень "stage III"
- + колонки мають бути однакової висоти незалежно від вмісту. (засобами html та css)
h 5
- створити текст, який буде відкидати тінь
- створити тінь від блоку (наприклад від блоку div../div)
h 6
- Створити три html документа зв'язаних між собою
- Посилання повинні змінювати свій зовнішній вигляд, наприклад:
- При наведені курсора на посилання
- Після переходу по посиланню
- Створити таблицю 10х10, та розфарбувати її як дошку для шахів.
- застосовуючи псевдокласи
h 7
- Базовий рівень:
- 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 препроцесори.
