Тема 7. Основи web-дизайну Лекція 10: основи web-дизайну. Створення та форматування web-сайту

Анотація

Звернення до певних розділів інших документів. Створення внутрішніх та зовнішніх гіперпосилань. Додаткові можливості форматування: списки, нумеровані та марковані списки, списки визначень, вкладені списки. Створення авторського стилю редагування: цитати, адреси, стилі, переривання рядка, горизонтальні лінії, внутрішні та зовнішні малюнки, звуки та мультиплікація, накладення різних стилів.

7.7. Звернення до певних розділів інших документів

Гіперпосилання можуть також використовуватися для з’єднання з певними розділами документів. Припустимо, ми хочемо з’єднати документ А з першим розділом документа В, для чого нам необхідно створити іменоване гіперпосилання в документі B.

Тут ви можете побачити <A NAME = "Розділ 1">Главу 1</a>

Текст першого розділу.

Тепер, описуючи посилання в документі A, треба включити не тільки ім’я файлу "documentB.html" але також і ім’я гіперпосилання, відокремлюване символом (#):

Тут ви можете побачити текст<A HREF = "documentB.html#Глава1"> Глави 1 </A> документа B.

Тепер "кликнувши" в слово "Глава 1" в документі А, ви переходите безпосередньо в Розділ 1 в документі B.

З’єднання з розділами поточного документа

Техніка з’єднання аналогічна описаною вище, тільки опускається ім’я файлу. Ось, наприклад, зв’язок з Розділом 1 усередині того ж самого файлу (Документ B)

Це <A HREF = "#Глава1">Глава 1</A> поточного документа.

7.8. Додаткові можливості форматування

Вище було описано, як створювати прості HTML-документи. Для складніших документів, HTML має деякі додаткові можливості форматування.

7.8.1. Списки

HTML підтримує ненумеровані, нумеровані списки і списки визначень.

7.8.2 Ненумеровані списки

Ненумерований список: <UL><LI>список пунктів </UL>, наприклад:

<UL>

<LI> яблука

<LI> банани

</UL>

що дає на екрані:

• яблука

• банани

7.8.3. Нумеровані списки

Нумерований список ідентичний ненумерованому списку, тільки замість < UL> використовується < OL>.

<OL>

<LI> апельсини

<LI> персики

<LI> виноград

</OL>

що дає на екрані:

1. апельсини

2. персики

3. виноград

Browser автоматично нумерує елементи такого списку.

7.8.4. Списки визначень

Список визначень зазвичай складається з чергування терміну ( DT ) і визначення ( DD ). Зазвичай Web browsers визначення розташовує на новому рядку. Приведемо приклад списку визначень:

<DL>

<DT> NCSA

<DD> NCSA (National Center for Supercomputing Applications).

<DT> CTC

<DD> CTC (Cornell Theory Center).

</DL>

що дає:

NCSA

NCSA (the National Center for Supercomputing Applications)

CTC

CTC (Cornell Theory Center).

7.8.5. Вкладені списки

Списки можуть бути довільно вкладені, хоча розумніше було б практично обмежитися трьома рівнями вкладених списків.

Приведемо приклад вкладених списків:

<UL>

<LI> Крупні міста Росії:

<UL>

<LI> Москва

<LI> Санкт-Петербург

</UL>

<LI> Великі міста України:

<UL>

<LI> Київ

</UL>

</UL>

що дає на екрані:

• Крупні міста Росії:

  • Москва

  • Санкт-Петербург

• Крупні міста України:

  • Київ