Робота на тему: "Таблиці, списки та гіперпосилання на Web-сторінках"

Лабораторна робота №6

Таблиці, списки та гіперпосилання на Web-сторінках

Мета: Отримати навички з використання таблиць, списків та гіперпосилань при створенні web-сторінок мовою розмітки гіпертексту HTML.

Завдання:

1.      Файл lab_5_NV.html, який створений під час виконання попередньої роботи, скопіювати у папку LAB_6_NV (де NV – номер варіанту) та перейменувати на index.html. У папці LAB_6_NV для одного з членів родини створити окрему сторінку з ім'ям family_1.html. На головній сторінці (index.html) створити гіперпосилання на сторінку члена родини. Аналогічно на сторінці члена родини створити гіперпосилання на головну сторінку.

2.      На сторінці члена родини задати фонове зображення, фонову музику та вставити відео. 

3.      На головній сторінці детальніше розписати один з підрозділів (наприклад, навчання в технікумі та успішність), подавши його у вигляді складної таблиці (тег <table>).

4.      Створити закладки на початку кожного підрозділу. Для кожного пункту змісту створити гіперпосилання на відповідні закладки. Для створення закладок використовувати тег <a> з атрибутом name. Для створення гіперпосилання використовувати тег: <a> з атрибутом href.

5.      Список, який створений на головній сторінці, модифікувати та доповнити, щоб він набув вигляду багаторівневого списку. 

6.      Створити список визначень згідно варіанту з Додатку №2.

7.      У папку LAB_6_NV помістити файл з власною фотографією. На головну  сторінку (index.html) вставити зображення з цього файлу. Задати вирівнювання фотографії відповідно до варіанта Додатку №1.

8.      Доповнити головну сторінку інформацією про улюблене місце відпочинку (декілька рядків тексту). У мережі Інтернет знайти детальний опис даного місця та відповідне зображення. У параграф з введеним текстом вставити знайдене зображення використовуючи URL зображення.

9.      Розмістити та відформатувати вставлене зображення згідно варіанту в Додатку №1.

10.  Вставлене зображення зробити гіперпосиланням на сторінку в Інтернеті з описом зображеного місця. Перевірити роботу гіперпосилання-зображення у різних браузерах. 

11.  Для вставлених зображень задати атрибути alt, width, height.

12.  На головну сторінку вставити зображення власної родини, використовуючи відповідні теги, створити на основі зображення родини карту-зображення для переходу на відповідні сторінки для кожного члена родини.

Контрольні питання:

1.      З якою метою використовуються атрибути compact та start для нумерованого списку (тег <ol>)?

2.      З якою метою використовується гіперпосилання на файл з малюнком (на архівний файл)? Що відбувається при виборі таких гіперпосилань?

3.      Який елемент використовується для створення заголовку таблиці?

4.      З якого метою використовується атрибут align у елементі TABLE, у елементі TR?

5.      Як задати колір фону таблиці, колір певної комірки таблиці, колір меж комірок?

6.      Яким чином задається висота та ширина таблиці (рядків та стовпців таблиці)?

7.      Які елементи використовуються для створення списку визначень?

9.      Яким чином створити гіперпосилання на FTP-ресурс, e-mail адресу? Як реагує браузер при натисканні по такому гіперпосиланні?

10.  З якою метою в таблицях використовується елемент TH?

11.  З якою метою використовуються теги <thead>, <tbody> та <tfoot> при створенні таблиці?

12.  З якою метою використовуються теги <col>, <colgroup> при створенні таблиці?

13.  Яке призначення атрибутів cellpadding та cellspacing тегу <table>?

14.  Які формати растрових графічних файлів можна вставити на html-сторінку за допомогою елемента img? Які особливості цих форматів?

15.  Яким чином можна задати абсолютний та відносний шлях до файлу у елементі img?

16.  З якою метою використовується ".."?

17.  З якою метою використовуються атрибути width, height елементу img? Яких правил потрібно дотримуватись при використанні цих атрибутів?

18.  З якою метою використовуються атрибут alt елементу img? Яких правил потрібно дотримуватись при використанні цього атрибуту?

19.  Як для веб-сторінки встановити фонове зображення, фоновий колір?

20.  Які особливості створення гіперпосилання у вигляді зображення?

21.  Які формати векторних графічних файлів можна вставити на html-сторінку за допомогою елемента img? Які особливості цих форматів?

22.  У чому полягають особливості графічних форматів apng та mng?

23.  У чому полягають відмінності при створенні карти зображення, яка оброблюється браузером, та карти зображення, яка оброблюється на сервері?

24.  Які об'єкти, крім графічних зображень, можна вставляти до html-сторінки?

25.  Яким чином можна вставити фоновий звук до html-сторінки? Які недоліки фонового звуку?

26.  Які є способи вставки відео до html-сторінки? Які особливості кожного способу?

Рекомендована література:

1.          Артанов Б. Web-мастеринг без посторонней помощи: учебн. пособие. – М.: 100 книг. 2006. – 336 с.

2.          Чиртик А. А. HTML. Популярный самоучитель. – СПб.: Питер, 2006. – 224 с.: ил.

3.          Гаевский А. Ю., Романовский В.А. Самоучитель по созданию Web-сайтов: HTML, JavaScript и DHTML. - 2-е изд. - К.: А.С.К., 2006. - 480 c. 4. Ломов А. Ю. HTML, CSS, скрипты: практика создания сайтов. – СПб.: БХВ- Петербург, 2006.

– 416 с. Інформаційні ресурси:

1.  Довідник з веб-дизайну. – Режим доступу: http://htmlbook.ru/

2.  HTML довідник. – Режим доступу: http://html.manual.ru/

3.  Довідник з веб-дизайну та програмування. – Режим доступу: http://htmlka.com/

4.  HTML коди кольорів. – http://site-konstruktor.com.ua/html/tablycya_html_kodiv_koloriv

5.  Довідник спецсимволів HTML. – http://htmlbook.ru/samhtml/tekst/spetssimvoly

Додаток №1