Отримання знань
дистанційна підтримка освіти школярів
ПРАКТИЧНА РОБОТА
Тема уроку. Зображення у HTML-документі. Використання посилань між документами. Робота з різними типами списків. Внутрішні посилання у Web-сторінках
Навчальна мета. Закріплення розуміння використання найпростіших тегів; ознайомлення з можливостями тегів рухомого рядка, зафарбованої лінії, нумерованого та маркованого списків, посилань на іншу Web-сторінку та внутрішніх посилання; вдосконалення навичок створення html-сторінок
Тип уроку. Практична робота
Обладнання. Блокнот, завдання для роботи, архів малюнків
ХІД РОБОТИ
1. Завантажте архів фонів “HTML_background.rar” та архів малюнків до практичних робіт “HTML_PR_2-5.rar” собі в папку, розархівуйте.
2. Відкрийте текстовий редактор Блокнот.
3. Наберіть наступний текст:
4. Задайте фонову картинку, використавши будь-який із завантажених у пункті 1 фонових малюнків на власний смак.
5. Збережіть під назвою “Osnova.htm” у своїй папці. Відкрийте та перегляньте Web-сторінку.
Примітка. Прослідкуйте, щоб фоновий малюнок та Web-сторінка були в одній і тій же папці.
6. Додайте рухомий рядок “Усім привіт!”.
7. Додайте суцільно зафарбовану лінію (довжина, ширина та колір на вибір) за зразком:
8. Збережіть та перегляньте зміни, які відбулись із Web-сторінкою.
9. Створіть файл “Avtor.htm”, який буде містити інформацію про автора програми і викликатиметься з файлу “Osnova.htm”:
9.1. Створіть шаблон Web-сторінки за зразком пункту 3.
9.2. Встановіть колір фону та тексту.
9.3. Заповніть Web-сторінку інформацією за зразком:
9.4. Перегляньте створену Web-сторінку
10. Створіть малюнок-посилання у файлі “Osnova.htm”, при натисканні на яке буде здійснюватись перехід до файлу “Avtor.htm”.
10.1. Додайте малюнок-посилання “HTML_avtor_Х.jpg” на свій смак із завантаженого архіву малюнків:
10.2. Встановіть вирівнювання надпису по центру відносно зображення та відсутність рамки навколо картинки (при Border=0 рамка відсутня), дописавши до <Img src="назва_малюнка"> додатково характеристики Align="middle" Border=0:
10.3. Вкажіть назву, величину та колір шрифту, додавши перед фразою “Відомості про авторів” запис за зразком:
10.4. Перегляньте зміни, які відбулись із Web-сторінкою.
11. Додайте до Web-сторінки файлу “Avtor.htm” посилання для повернення до основної сторінки із надписом “Назад”:
11.1. Відкрийте Web-сторінку “Avtor.htm” в режимі текстового редактора.
11.2. Допишіть:
12. Відкрийте Web-сторінку “Osnova.htm” в режимі текстового редактора.
13. Створіть пронумерований список за зразком:
14. Пункт “Дані про учнів” розширте маркованим списком (тип списку на власний смак) за зразком:
15. Збережіть зміни, обновіть та перегляньте Web-сторінку.
16. Відкрийте Web-сторінку “Osnova.htm” в режимі текстового редактора.
17. Зробіть прізвища учнів у списку внутрішніми посиланнями (перехід здійснюватиметься всередині документа) за зразком:
18. Вкажіть інформацію про кожного учня, на яку робиться посилання, дописавши далі по тексту документа щось на зразок:
19. Аналогічний чином оформіть посилання для інших учнів.
20. Перевірте правильність роботи посилань.
21. Встановіть колір для посилання (link), пройденого (vlink) та активного (alink) посилань:
22. Перевірте правильність роботи всіх посилань та оформлення документу.
Додаткова література
1. HTML