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

Про матеріал

Практичні завдання з веб-дизайну на тему "Таблиці, списки та гіперпосилання на 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

 

 

Варіант

Горизонтальне вирівнювання власної фотографії

Вертикальне вирівнювання зображення

улюбленого місця відпочинку

Відступ між зображенням улюбленого місця відпочинку та текстом

 

Вид відступу

 

Розмір

1, 17

по лівому краю

top

горизонтальний

10 пікселів

2,18

по правому краю

middle

вертикальний

10 пікселів

3, 19

по центру

bottom

вертикальний

15 пікселів

4, 20

по лівому краю

top

горизонтальний

15 пікселів

5, 21

по правому краю

middle

вертикальний

5 пікселів

6, 22

по центру

bottom

горизонтальний

5 пікселів

7, 23

по лівому краю

top

горизонтальний

20 пікселів

8, 24

по правому краю

middle

вертикальний

20 пікселів

9, 25

по центру

bottom

горизонтальний

6 пікселів

10, 26

по лівому краю

top

вертикальний

6 пікселів

11, 27

по правому краю

middle

горизонтальний

9 пікселів

12, 28

по центру

bottom

вертикальний

9 пікселів

13, 29

по лівому краю

top

горизонтальний

12 пікселів

14, 30

по правому краю

middle

вертикальний

12 пікселів

15, 31

по центру

bottom

горизонтальний

16 пікселів

16, 32

по лівому краю

top

вертикальний

16 пікселів

 

 

pdf
Додано
25 липня 2018
Переглядів
1521
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку