- Головна
- Уроки HTML
- Урок "Простий сайт - таблична верстка" - завдання 3, 4
Урок "Простий сайт - таблична верстка" - завдання 3, 4
Завдання 3 і 4 для уроку "Простий сайт - таблична верстка"
Завдання 3.
(щоб виконати, дивіться у статтю "Шпаргалка HTML" http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html )
1. Запустити HTML-редактор Notepad++
2. Створити новий документ, зберегти його з іменем index3.html
3. Створити основу html
4. Вказати мову сторінки - українська (підказка: <html lang="uk">)
5. Вказати кодування сторінки UTF-8 між тегами <head></head> (підказка: <meta charset="utf-8">)
6. Вказати заголовок сторінки Кінотеатр онлайн
7. Вказати фон сторінки Navy
8. Створити таблицю з такою будовою:
8. Створити таблицю з такою будовою:
9. Вказати налаштування таблиці:
1) ширина 80%;
2) вирівняти по центру сторінки;
3) колір фону таблиці - білий;
4) товщина рамки 0;
5) відстань між комірками 0 (підказка: cellspacing="0")
1) ширина 80%;
2) вирівняти по центру сторінки;
3) колір фону таблиці - білий;
4) товщина рамки 0;
5) відстань між комірками 0 (підказка: cellspacing="0")
10. Редагувати комірку "1":
1) висота рядка 80px;
2) стовбчик вирівняти по центру і вказати колір фону Gold
3) вставити три посилання:
- на сторінку Головна - адреса index.html
- на сторінку Фільми - film.html
- на сторінку Про нас - адреса about.html
4) після першого і другого посилання вставити по три "пробіли" (підказка: код "пробіла" - )
11. Редагувати комірку "2":
1) ширина комірки 30%, вирівнювання по центру;
2) замість "2" вставити малюнок http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/cinema.png
3) вказати ширину малюнку 30%.12. Вказати шрифт для усієї сторінки Comic Sans MS
1) висота рядка 80px;
2) стовбчик вирівняти по центру і вказати колір фону Gold
3) вставити три посилання:
- на сторінку Головна - адреса index.html
- на сторінку Фільми - film.html
- на сторінку Про нас - адреса about.html
4) після першого і другого посилання вставити по три "пробіли" (підказка: код "пробіла" - )
11. Редагувати комірку "2":
1) ширина комірки 30%, вирівнювання по центру;
2) замість "2" вставити малюнок http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/cinema.png
3) вказати ширину малюнку 30%.12. Вказати шрифт для усієї сторінки Comic Sans MS
13. Редагувати комірку "3":
1) вирівняти комірку по центру
2) вставити текст Кінотеатр онлайн
3) для шрифта тексту вказати розмір +5 , накреслення Arial
1) вирівняти комірку по центру
2) вставити текст Кінотеатр онлайн
3) для шрифта тексту вказати розмір +5 , накреслення Arial
14. Редагувати комірку "4":
1) вставити абзац і у ньому написати текст Головна
2) вставити ще один абзац і у ньому вказати:
- вставити малюнок http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/1.jpg
- вказати ширину малюнку 150px
- вказатиі стиль обтікання малюнка таким кодом style="float:left;"
3) вставити дату 01.04.18, після дати вставити рядок
4) вставити назву фільма Шерлок Гномс, після тексту вставити рядок
5) вставити текст:
Гномео та Джульєтта переїжджають до Лондона. По місту проходить серія викрадень їхніх побратимів: викрали всіх друзів Гномео і Джульєтти. Шукати зниклих гномів готовий найкращий сищик на Землі – Шерлок Гномс. Він разом з Ватсоном зробить усе можливе, щоб урятувати садових гномів.
6) вставити заборну обтікання з обох боків (підказка: код <br clear="all">)
1) вставити абзац і у ньому написати текст Головна
2) вставити ще один абзац і у ньому вказати:
- вставити малюнок http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/1.jpg
- вказати ширину малюнку 150px
- вказатиі стиль обтікання малюнка таким кодом style="float:left;"
3) вставити дату 01.04.18, після дати вставити рядок
4) вставити назву фільма Шерлок Гномс, після тексту вставити рядок
5) вставити текст:
Гномео та Джульєтта переїжджають до Лондона. По місту проходить серія викрадень їхніх побратимів: викрали всіх друзів Гномео і Джульєтти. Шукати зниклих гномів готовий найкращий сищик на Землі – Шерлок Гномс. Він разом з Ватсоном зробить усе можливе, щоб урятувати садових гномів.
6) вставити заборну обтікання з обох боків (підказка: код <br clear="all">)
15. Редагувати комірку "5":
1) висота комірка 80px, вирівнювання по центру
2) фон комірка Gold
3) замість "5" набрати текст by My name © 2018
3) вказати колір текст - білий
1) висота комірка 80px, вирівнювання по центру
2) фон комірка Gold
3) замість "5" набрати текст by My name © 2018
3) вказати колір текст - білий
16. Зберегти код і подивитись результат у Хром.
Результат:
Результат:
Завдання 4.
(щоб виконати, дивіться у статтю "Шпаргалка HTML" http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html )
1. Запустити HTML-редактор Notepad++
2. Створити новий документ, зберегти його з іменем index4.html
3. Створити основу html
4. Вказати мову сторінки - українська (підказка: <html lang="uk">)
5. Вказати кодування сторінки UTF-8 між тегами <head></head> (підказка: <meta charset="utf-8">)
6. Вказати заголовок сторінки Кінотеатр онлайн
7. Вказати фон сторінки Navy
8. Скачати логотип http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/cinema.png
8. Скачати логотип http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/cinema.png
9. Скачати малюнок для фільму 1 http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/1.jpg
10. Скачати малюнок для фільму 2 http://it-shkola.in.ua/images/html_lessons/01-04-18-verstka-tabl/2.jpg
11. Використати тексти:
1)
Гномео та Джульєтта переїжджають до Лондона. По місту проходить серія викрадень їхніх побратимів: викрали всіх друзів Гномео і Джульєтти. Шукати зниклих гномів готовий найкращий сищик на Землі – Шерлок Гномс. Він разом з Ватсоном зробить усе можливе, щоб урятувати садових гномів.
2)
11. Використати тексти:
1)
Гномео та Джульєтта переїжджають до Лондона. По місту проходить серія викрадень їхніх побратимів: викрали всіх друзів Гномео і Джульєтти. Шукати зниклих гномів готовий найкращий сищик на Землі – Шерлок Гномс. Він разом з Ватсоном зробить усе можливе, щоб урятувати садових гномів.
2)
Кролик Пітер постійно шукає якісь пригоди на свій маленький хвостик. Одного разу Пітер організував у будинку фермера грандіозну вечірку. Фермер зовсім не радий тому, що його урожай збирають якісь кролі і просто мріє про пиріг з кролятиною. Війна буде жорстокою.
12. Використовуючи код для таблиці із Завдання 3, зробити сторінку за зразком:
