- Головна
- Уроки HTML
- Урок "Простий сайт - таблична верстка" - завдання 5
Урок "Простий сайт - таблична верстка" - завдання 5
Завдання 5 для уроку "Простий сайт - таблична верстка"
Завдання 5.
(щоб виконати, дивіться у статтю "Шпаргалка HTML" http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html )
1. Запустити HTML-редактор Notepad++
2. Створити новий документ, зберегти його з іменем index5.html
3. Створити основу html
4. Вказати мову сторінки - українська (підказка: <html lang="uk">)
5. Вказати кодування сторінки UTF-8 між тегами <head></head> (підказка: <meta charset="utf-8">)
6. Вказати заголовок сторінки і назву у комірці 3 - ЗА ВЛАСНИМ БАЖАННЯМ
7. Вказати фон сторінки DarkRed
8. Створити таблицю з такою будовою:
8. Створити таблицю з такою будовою:
9. Вказати налаштування таблиці:
1) ширина 80%;
2) вирівняти по центру сторінки;
3) колір фону таблиці - білий;
4) товщина рамки 0;
5) відстань між комірками 0
1) ширина 80%;
2) вирівняти по центру сторінки;
3) колір фону таблиці - білий;
4) товщина рамки 0;
5) відстань між комірками 0
10. Використовуючи код із Завдань 1-3 і власні знання, зробити сторінку за зразком.
При цьому:
- кожен текст про фільм має розміщуватись у окремих комірках таблиці - 4,5,6
- колір фону зафарбованих комірок - LightGray
- самостійно підібрати малюнок-логотип, малюнки - ілюстрації до фільмів (малюнки 1-3)
- самостійно назвати пункти меню - пункт 2 і пункт 3
- самостійно підібрати тексти-описи для фільмів (тексти 4-6)
- використати для посилань-кнопок зображення http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/b1-03.png і http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/b2-3.png
- посилання Про фільм має бути переходом на інший сайт з описом фільму (підібрати самостійно)
- посилання Трейлер - посилання на ролик Ютьюб (підібрати самостійно)
- усі посилання мають відкриватись у новій вкладці
При цьому:
- кожен текст про фільм має розміщуватись у окремих комірках таблиці - 4,5,6
- колір фону зафарбованих комірок - LightGray
- самостійно підібрати малюнок-логотип, малюнки - ілюстрації до фільмів (малюнки 1-3)
- самостійно назвати пункти меню - пункт 2 і пункт 3
- самостійно підібрати тексти-описи для фільмів (тексти 4-6)
- використати для посилань-кнопок зображення http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/b1-03.png і http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/b2-3.png
- посилання Про фільм має бути переходом на інший сайт з описом фільму (підібрати самостійно)
- посилання Трейлер - посилання на ролик Ютьюб (підібрати самостійно)
- усі посилання мають відкриватись у новій вкладці
