Створення посилань на інші сторінки

Найважливішим поняттям в HTML є гіперпосилання, яке дозволяє зв’язати текст або будь-який об’єкт з іншими гіпертекстовими документами. Посилання позначаються тегом <a>. Загальний вигляд посилання:

<a href="filename">Текст_посилання</a>

Текст між <a> і </a> використовується як опис посилання, і позначається, як правило, синім кольором, і підкреслюється лінією.

Наприклад посилання на сторінку, визначену у файлі “advanced.htm” (тобто посилання на файл “advanced.htm”) має вигляд:

<a href="advanced.htm">Просунутий HTML</a>

Можна використовувати в посиланні малюнок. Наступний приклад дозволяє кликанням на логотипі компанії перейти на її домашню сторінку:

<a href="/"><img src="logo.gif" alt="home page"></a>

Списки

HTML пропонує три види списків:

1. Маркірований (невпорядкований) список відкривається тегом <ul> і закінчується </ul>, а кожен його пункт починається стандартним тегом <li>. Наприклад:

<ul>

<li>перший пункт списку</li>

<li>другий пункт списку</li>

<li>третій пункт списку</li>

</ul>

Результат:

• перший пункт списку

• другий пункт списку

• третій пункт списку

2. Нумерований (впорядкований) список використовує теги <ol> і </ol>, а кожен його пункт починається стандартним тегом <li>.

Наприклад:

<ol>

<li>перший пункт списку</li>

<li>другий пункт списку</li>

<li>третій пункт списку</li>

</ol>

Результат:

1. перший пункт списку

2. другий пункт списку

3. третій пункт списку

4. Список визначень (глосарій) представляє текст у формі словникової статті, що складається з обумовленого терміна й абзацу, що розкриває його значення й відкривається тегом <dl>. Кожен термін відкривається тегом <dt>, а визначення тегом <dd>.

Наприклад:

<dl>

<dt>перший термін</dt>

<dd>його визначення</dd>

<dt>другий термін</dt>

<dd>його визначення</dd>

</dl>

Результат:

перший термін

його визначення

другий термін

його визначення

Списки можуть бути вкладеними один в іншій. Наприклад:

<ol>

<li>перший пункт списку</li>

<li>другий пункт списку</li>

<ul>

<li>перший пункт вкладеного списку</li>

<li>другий пункт вкладеного списку</li>

</ul>

<li>третій пункт списку</li>

</ol>

Результат:

1. перший пункт списку

2. другий пункт списку

• перший пункт вкладеного списку

• другий пункт вкладеного списку

3. третій пункт списку .

Завдання для лабораторної роботи

1. Запустити браузер Internet Explorer, ознайомитися з меню браузера і Довідкою, а також із структурою поточної (домашньої) Web-сторінки. Виконати Пуск/ Все программы/ Internet Explorer.

2. Налаштувати програму для перемикання кодування символів. Виконати команду меню Вид/Вид кодировки і обрати один із пропонованих варіантів: кирилиця (Windows), кирилиця (Dos), кирилиця (ISO) чи кирилиця (KOI8-P).

3. Відкрити Митний кодекс, який розташований на Mainserver\Common_doc\Митний кодекс та переглянути його розділи, ознайомитися з використанням кнопок Вперед, Назад та Оновити сторінку.

4. У власній робочій папці створити папку MY_STORY.

5. Відкрити стандартну програму Блокнот (Пуск/Все программы/ Стандартные/ Блокнот). Зберегти порожній файл, який створили у Блокноті, під назвою First.htm у папці MY_STORY. Для цього при збереженні слід обрати Тип файлу/Всі файли. Закрити Блокнот і знайти свій файл. Зверніть увагу на його піктограму (е). Клацніть на піктограмі файла First.htm. Завантажиться браузер Internet Explorer, але його вікно буде порожнім. Зверніть увагу на рядок адреси. Щоб отримати доступ до вмісту файла First.htm, обрати меню Вид/У виді HTML (джерело). У вікні Блокнота, що відкриється, набрати тексти HTML-документу, наведеного у прикладі №1 лабораторної роботи, в якому вказати коротку інформацію про розробника: ПІБ, група, дата народження, хобі та ін (всього п’ять рядків). Зберегти змінений файл і натиснути кнопку Обновить в Internet Explorer. Аналізуємо результати виконання створеного HTML-коду і виправляємо можливі помилки.

6. За допомогою Блокнота створити порожній файл Second.htm.

7. Відкрити файл Second.htm, створити структуру web-сторінки.

В розділі заголовків увести текст “Основні теги HTML”. Виконати всі приклади, наведені в теоретичній частині лабораторної роботи (додавання заголовків і абзаців, виділення тексту курсивом, зміну кольорів і розміру тексту, використання різних видів списків).

8. Знайти на своєму або іншому мережному ПК довільний графічний файл формату JPG і скопіювати його в папку MY_STORY.

9. Виконати вставку малюнка формату JPG, скопійованого раніше в папку MY_STORY.

Завдання для самостійної роботи

1. Створити файл My_Site.htm в папці MY_STORY за темою у відповідності з номером варіанту. Використати всі теги наведені в лабораторній роботі: додавання заголовків і абзаців, виділення тексту курсивом, використання різних видів списків, додавання малюнків. Рядки тексту задати різним кольором та розміром.

2. Створити в My_Site.htm посилання на сторінки First.htm та Second.htm, що також знаходиться в папці MY_STORY.

3. Продивитися результати своєї роботи у браузері.