Материал: Лабораторна робота №4

Лабораторна робота №4.

Тема: Створення списків та гіперпосилань у HTML-документі.

Мета роботи:

• навчитися зв’язувати веб-сторінки за допомогою гіперпосилань, додавати гіперпосилання на фрагмент тексту на поточній сторінці;

• вміти створювати списки різтих типів на мові HTML;

• навчитися виконувати вставку малюнків в HTML-документ та використовувати їх як гіперпосилання.|

1. Виконати оформлення списків:

• Створити новий документ 3_name|.htm, зберегти його в тому ж робочому каталозі жорсткого диска, що і документи з попередньої лабораторної роботи.

• Ввести текст:

<HTML|>

<НЕАD|> <TІТLE|> Прізвище </TITLE>

</HEAD>

<BODY|>

Вітаю Вас на моїй третій web-сторінці|!

</BODY>

</HTML>

• Доповнити текст документа (між тегами| <BODY|>.</BODY>) наступним текстом: Я знаю як оформляти: Шрифти, Заголовки, Абзаци

• Оформити три останні рядки як список нумерований. Для цього використовувати наступну конструкцію тегів|:

• Поміняти оформлення списку на список маркерований. Використовувати теги| <UL|>, </UL>

• Створити «змішаний» список:

Я знаю як оформляти:

1. Шрифти

• Розмір

• Колір

• Гарнітуру

• Індекси

1. Заголовки

• Від 1-го до 6-го рівня

1. Абзаци

• Вирівнювання

• Розрив рядків усередині абзацу

• З використанням переформатування.

2. Створення гіперпосилань і закладок.

• У документі 3_name|.html закріпити гіперпосилання за наступними елементами списку:

За словом Шрифт – гіперпосилання на документ 1_name|.html.

За словом Заголовки – на документ 1_name|.html.

За словом Абзаци - на документ 2_name|.html.

• Встановити кольори для гіперпосилань за власним бажанням.

• Створити закладку в документі 1_name|.html перед фразою «Машинобудівний коледж СумДУ». Дати їй ім'я «Osvita|».

• Змінити перше гіперпосилання (слово Шрифт) так, щоб вона указувала на закладку «Osvita|» в документі 1_name|.html.

• Створити закладку на початку поточного документа 3_name|.html. Привласнити їй ім'я «Hello|».

• Змінити друге гіперпосилання (на слові Заголовки), визначивши для неї перехід в початок поточного документа на встановлену закладку «Hello|».

• Створити закладку в документі 2_name|.html перед фрагментом тексту. Привласнити їй ім'я «Text|».

• Встановити на слово переформатування гіперпосилання на закладку «Text|».

• Перевірити правильність переходів по всіх гіперпосиланнях.

3. Закріпити гіперпосилання за графічними файлами:

• Скопіювати в особисту папку три графічні файли (наприклад, Arrows1|.wmf, Arrows2|.wmf, Arrows3|.wmf).

Переконатися, що створені раніше документи 1_name|.html, 2_name|.html і 3_name|.html також знаходяться у вашому каталозі на жорсткому диску.

• Вставка малюнків в документ.

• Відкрити в Блокноті документ 2_name|.html.

• Вставити малюнок Arrows1|.wmf у початок документа 2_name|.html. Для вставки використовувати тег| IMG| з параметрами WIDTH| і HEIGHT| для установки розмірів малюнка 50 пікселів по горизонталі і по вертикалі.

• Зберегти документ під ім'ям 4_name|.html.

• Проглянути в браузері| отриманий результат.

• Ввести в тег| малюнка параметр ALIGN| для вирівнювання малюнка по правому краю. Проглянути результат в браузері|.

• Вставити малюнок Arrows2|.wmf у кінець документа 4_name|.html перед, підібрати тип вирівнювання малюнка на свій розсуд. Встановити розмір малюнка 100 пікселів по горизонталі і по вертикалі. За допомогою параметра ALT| створити спливаючу підказку «Малюнок 2», що з'являється при наведенні курсора миші на малюнок.

• Проглянути в браузері| отриманий результат.

• Відредагувати тег| вставки малюнка Arrows1|.wmf, ввести в тег| атрибут ALT| для відображення тексту підказки «Повернутися». Проглянути в браузері| як реагує малюнок на наведення курсора миші.

• Закріпити за малюнком Arrows1|.wmf у документі 4_name|.html гіперпосилання на документ 3_name|.html. Виконати перехід між документами.

4. Пред'явити результат викладачеві та оформити звіт.

5. Знати відповіді на контрольні запитання:

1. Що назвається гіперпосиланням?

2. Який елемент мови HTML відповідає за створення гіперпосилань?

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

4. За допомогою яких атрибутів можна призначити колір посилання у різних станах?

5. Що таке мітка (або закладка)?

6. В яких випадках використовують мітки?

7. Як додати зображення на веб-сторінку?

Основні теги| вставки малюнків, закладок і гіперпосилань