Лабораторна робота №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. Як додати зображення на веб-сторінку?

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

Вставка зображень
Вставка графічного файлу		<IMG| SRC=”файл|” WIDTH=”ширина|” HEIGHT=”висота|” >					Приклад: <IMG| SRC=”grafica|.gif” WIDTH=”550|” HEIGHT=”240|” ALIGN=|” right|” ALT=”Графічний| файл”>
Вирівнювання картинки щодо тексту		<IMG| SRC=”файл|” ALIGN=”left|right|top|bottom|”>
Виведення тексту спливаючої підказки при наведенні курсора миші на малюнок		<IMG| SRC=”файл|” ALT=”текст|”>
Вставка посилань
Посилання на іншу сторінку			<A HREF=|” сторінка”> текст </A>				<A HREF=”str2|.htm”> Ссилка1</a>
Посилання на закладку в іншому документі			<A HREF=|” сторінка # ім'я закладки”|> текст</A>				<A HREF=|” index|.htm #met1”|> На головну сторінку </A>”
Посилання на закладку в тому ж документі			<A HREF=”#ім'я закладки ”> текст </A>				<A HREF=|” #metka1|”> Ссилка2</a>
Визначити закладку			<A NAME=”ім’я закладки”>текст</A>				<A NAME=”metka1”></A>
Колір фону, тексту і посилань
Фонова картинка			<BODY| BACKGROUND=”файл| малюнка”>				<BODY| BACKGROUND| =”grafica.gif” TEXT=”black|” (чорний) LINK=”#FF0000|” (червоний) VLINK=”#FFFF00|” (жовтий) ALINK=”#FFFFFF|” (білий) </BODY>
Колір фону			<BODY| BGCOLOR=”#$$$$$$|”>
Колір тексту			<BODY| TEXT=”#$$$$$$|”>
Колір посилання			<BODY| LINK=”#$$$$$$|”>
Колір пройденого посилання			<BODY| VLINK=”#$$$$$$|”>
Колір активного посилання			<BODY| ALINK=”#$$$$$$|”>