3 Гіперпосилання

 

Фундаментальна властивість гіпертексту полягає в тому, що він дозволяє зв'язувати документи гіперпосиланнями. Завдяки ним документи перетворюються на точки перетину ниток інформаційної павутини. Документ, на який націлене гіперпосилання, зазвичай має пряме відношення до джерела посилання і збагачує його зміст. Гіперпосилання, або, як їх зазвичай називають, якорі, виділяються тегом <a>.

 

3.1 Тег <a>

Найчастіше тег <a> буде застосовуватися з атрибутом href для створення гіперпосилань на інші місця в тому ж документі, або на інші документи. У таких випадках документ, в якому поміщена гіперпосилання, - це джерело посилання, а значення атрибуту href, URL, - це ціль.

 

3.1.1    Допустимий вміст

Між тегом <a> і його обов'язковим закриваючим тегом </a> можна поміщати тільки звичайний текст, вбудовані елементи, переходи на новий рядок і зображення. Браузер відтворює всі ці елементи звичайним чином, але додає при цьому який-небудь спеціальний ефект, даючи читачеві зрозуміти, що він має справу з гіперпосиланням на інший документ. Зокрема, популярні браузери зазвичай підкреслюють і виділяють кольором текст, що знаходиться всередині тега <a>, а навколо зображень, що містяться в цьому тегу, малюють кольорову рамку.

 

3.1.2    Атрибут href

Застосовуйте атрибут href для визначення URL цілі гіперпосилання. Простий тег <a>, що посилається на інший документ, може виглядати так:

 

Найкращі <a href="http://football.ua">футбольні матчі</a> та аналітика.

 

При відображенні в браузері, якщо клікнути по словах «футбольні матчі», які стануть виділені спеціальним чином, браузер переадресує нас на ресурс http://football.ua.

 

3.1.3    Атрибути class и style

Використовуйте атрибути class і style з тегом <a> для управління стилем відображення вмісту тега і для форматування його вмісту у відповідності із заздалегідь визначеним стильовим класом для тега <a>.

 

3.1.4    Атрибут target

Атрибут target дозволяє вказати, куди відображати вміст документа - цілі гіперпосилання. Розглянемо наступні найбільш використовувані із зарезервованих значень атрибуту target для спеціальних видів перенаправлення документів:

_blank

Браузер завжди завантажує документ, на який вказує гіперпосилання з target="_blank", у нове вікно.

_self

Це значення приймається за замовчуванням для тегів <a>, в яких атрибуту target немає, і означає, що документ, на який вказує гіперпосилання, повинен бути завантажений і відображений в тому ж вікні або фреймі, що і документ, що містить гіперпосилання.

 

 

 

 

 

 

 

 

4 Форматовані списки

 

Крім можливості прикрасити текст за допомогою спеціалізованих текстових тегів, HTML і XHTML також дозволяють упорядкувати вміст документа у вигляді форматованих списків. Вони є зручними способами організації інформації і допомагають краще засвоїти її при побіжному перегляді, а також знайти і витягти з веб-сторінки потрібні відомості.

 

4.1 Невпорядковані списки

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

 

4.1.1 Тег <ul>

Тег <ul> сигналізує браузеру, що вся інформація, що слідує після нього, аж до закриваючого тега </ul>, являється неупорядкованим списком елементів. Усередині неупорядкованого списку кожний його елемент подзначається тегом <li>. Крім того, список може включати в себе інші списки, текст і мультимедійні елементи.

При відображенні в браузері будь-який елемент списку попереду помічається спеціальним маркером. Наприклад, наступний текст буде відображатись таким чином:

 

Popular Kumquat recipes:

<ul>

<li>Pickled Kumquats</li>

<li>'Quats and' Kraut (a holiday favorite!)</li>

<li>'Quatshakes</li>

</ul>

There are so many more to please every palate!

 

Рисунок 4.1 – Простий невпорядкований список

 

4.1.1.1 Атрибут type

Атрибут type призначений для визначення того, який символ маркера буде відзначати елементи невпорядкованого списку. Цей атрибут може приймати наступні значення: disc (диск), circle (коло), square (квадрат). Всі елементи в списку будуть позначатись вибраним маркером, якщо тільки окремий елемент не скасує його специфікацію.

 

4.1.1.2 Атрибути class и style

Атрибути class і style дають можливість управління відображенням списків за допомогою каскадних таблиць стилів (CSS), що дозволяє здійснювати більш досконалий контроль, ніж той, якого можна досягти із застосуванням окремих атрибутів, подібних type. Включивши атрибут style у тег <ul>, можна встановити в якості маркерів свої власні піктограми, замість стандартних. Атрибут class дозволяє застосовувати до вмісту тега стиль, заздалегідь визначений для даного класу списків. Значення атрибута class - це ім'я стилю, визначеного у таблиці стилів на рівні документа або зовнішнім чином.

 

4.1.1.3 Атрибут id

Застосування атрибута id в тегу <ul> аналогічне його застосуванню в будь-якому іншому тегу.

4.2 Впорядковані списки

Використовуйте впорядковані списки, коли порядок елементів в них має істотне значення. Інструкція по роботі пральної машини, зміст книги або список виносок і приміток - все це хороші приклади впорядкованих списків.

 

4.2.1 Тег <ol>

Типовий браузер форматує вміст впорядкованого списку точно так само, як і невпорядкованого, за тим лише винятком, що елементи списку позначаються номерами замість маркерів. Нумерація починається з одиниці і кожен наступний зазначений тегом <li> елемент списку отримує номер на одиницю більше, ніж попередній. Наприклад, наступний текст буде відображатись таким чином:

 

<h3>Pickled Kumquats</h3>

Here's an easy way to make a delicious batch of pickled 'quats:

<ol>

<li>Rinse 50 pounds of fresh kumquats</li>

<li>Bring eight gallons white vinegar to rolling boil</li>

<li>Add kumquats gradually, keeping vinegar boiling</li>

<li>Boil for one hour, or until kumquats are tender</li>

<li>Place in sealed jars and enjoy!</ li>

</ol>

 

Рисунок 4.2 – Простий впорядкований список

 

4.2.1.1 Атрибут start

Як правило, браузери автоматично нумерують елементи впорядкованого списку, починаючи з арабської цифри «1». Атрибут start тега <ol> дозволяє змінити початкове значення. Щоб почати нумерацію в списку, наприклад, з цифри 5, можна написати:

 

<ol start=5>

<li>Це пункт номер 5.</li>

<li> Це номер 6.</li>

<li> І так далі ... </li>

</ol>

 

4.2.1.2 Атрибут type

За замовчуванням браузери нумерують елементи впорядкованого списку арабськими цифрами. Крім вибору іншого початкового номера, відмінного від одиниці, можна також використовувати атрибут type тега <ol>, щоб змінити сам стиль нумерації. Значеннями атрибута type в тегу <ol> можуть бути: А - для нумерації великими літерами; а - малими літерами; I - римськими цифрами у верхньому регістрі; i - римськими цифрами в нижньому регістрі; а також 1 - для звичайних арабських цифр.

 

4.2.1.3 Атрибути id, class и style

Дані атрибути можуть бути застосовані також і до впорядкованих списків, при цьому мають той же ефект, що і у випадку застосування до невпорядкованих.

 

4.3 Тег <li>

Тег <li> визначає елемент списку. Цей універсальний тег застосовується як в розглянутих впорядкованих (<ol>), так і в невпорядкованих (<ul>) списках. За тегом <li> може слідувати практично все що завгодно, включаючи інші списки і послідовності абзаців.

 

4.3.1    Зміна стилю і порядкового номера окремого елементу списку

Крім зміни стилю маркування і нумерації всіх елементів, в невпорядкованих і впорядкованому списках також можна змінити стиль окремого елемента.

 

4.3.1.1 Атрибут type

Можливими значеннями атрибута type в тегу <li> є ті ж значення, що використовуються для цього атрибута в тегах відповідних списків: елементи неупорядкованого списку можуть мати типи circle (коло), square (квадрат) або disc (диск); елементи впорядкованого списку можуть бути: А - для нумерації великими літерами; а - малими літерами; I - римськими цифрами у верхньому регістрі; i - римськими цифрами в нижньому регістрі; а також 1 - для звичайних арабських цифр.

 

4.3.1.2 Атрибут value

Атрибут value змінює номер певного елемента списку і тих, що за ним слідують. Оскільки елементи послідовно нумеруються тільки в упорядкованих списках, атрибут value дійсний лише в тегу <li>, що міститься в упорядкованому списку.

Щоб змінити номер поточного елемента (і відповідно наступних за ним) в упорядкованому списку, необхідно присвоїти value певне ціле значення. Наприклад, наступний текст буде відображатись таким чином:

 

<ol>

<li>Item number 1</li>

     <li>And the second</li>

      <li value=9>Jump to number 9</li>

      <li>And continue with 10...</li>

</ol>

Рисунок 4.3 – Атрибут value

 

4.3.1.3 Атрибути id, class и style

Застосування даних атрибутів є ідентичним до того, що було описане в попередніх розділах.