1. 3. 3. Створення гіперпосилань і графіки на Web-cторінках

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

Структура гіпертекстової мережі задається гіпертекстовими посиланнями. Гіпертекстове посилання - це покажчик на адресу іншого чи HTML-документа іншого інформаційного ресурсу мережі, що логічно або тематично зв'язаний з вихідним документом. Для вказівки гіпертекстових посилань у системі WWW була розроблена спеціальна форма, яка називається Universe Resourse Locator. Типовим прикладом гіпертекстового посилання може служити наступний код:

<А HREF="http://www.fizmat.tnpu.edu.ua/index.html"> </А>

У приведеному прикладі тег "А", що у HTML називають якорем (anchor), використовує атрибут "HREF", який указує URL призначуваного гіперпосиланням ресурсу Також тег "А" можна використовувати для гіпертекстових посилань усередині одного документа (закладок). Така можливість демонструється прикладом

<А HREF="#info">. Посилання на інформацію </А>.

У тексті документа, у такому випадку, повинний бути присутнім фрагмент:

<А NAME="info"> Інформація </А>

Нескладно зрозуміти, що атрибут "NAME" використовується для вказівки імені закладки.

Вставка зображення . Вставка зображення на Web-сторінку виконується тегом <IMG>. Усередині цього тегу обов'язково записується атрибут src, що містить URL зображення. Назва цього атрибута походить вiд слова source – джерело.

Наприклад, якщо потрібно розмicтити на сторiнцi картинку з файла Max. jpg. Для цього необхідно зберегти файл iз зображенням у певній папці (наприклад, у тій самій папці, що i НТМL-документ), а у документ ввести тег <IMG src=”max.jpg”>.

За замовчуванням браузер використовуватиме реальні розміри зображення, яке зберігається в графічному файлі. Якщо потрібно змінити ці розміри, застосовують атрибути width (ширина) i height (висота). Значення розмірів зображення задаються звичайно у пiкселах, наприклад, width=”133” height=”33”.

Можна також задавати ширину i висоту у відсотках розмірів зовнішнього елемента (сторiнки). Наприклад, зображення, що задається тегом <IMG src=”max.jpg” width=”30%”>, займе по ширині 30% сторінки, а висота буде розрахована браузером із зберіганням пропорцій. Користувач бажає скласти уявлення про зміст сторiнки, коли вона тiльки почала завантажуватися. Тоді він зможе вирішити, чи варто чекати повного завантаження сторiнки. У цьому йому допоможуть написи на мiсцi малюнків, що не завантажилися. Їх задають атрибутами alt. Наприклад, така інструкція <IMG src="photo.jpg" width="50%" аlt="…"> замість малюнка, що не завантажився, виведе рамку iз межами малюнка i помістить у неї текст “…”. [2]

1. 3. 4. Робота з таблицями

Таблиці використовуються в web-дизайні не тільки, як засіб представлення даних, але і як інструмент розташування елементів на сторінці. Чого можна домогтися за допомогою таблиць? Як відомо, сторінка може проглядатися с різним дозволом. В даний час основними є дозволи 640х480, 800х600 і 1024х768. Для того, щоб сторінка однаково дивилась в усіх дозволах необхідно обмежити ширину змісту мінімальним дозволом. Зробити це простіше всього за допомогою таблиць.

Кожна таблиця починається тегом <TABLE> i закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE>...</TABLE> можуть вставлятися такі елементи:

TR – елемент створення рядка;

TD – елемент, що визначає вміст комірки даних;

TH – елемент, що визначає комірку заголовка.

Наприклад, для створення таблицi 3х2 використовується такий шаблон:

<TABLE>

<TR><TD>. . .</TD><TD>. . .</TD></TR>

<TR><TD>. . .</TD><TD>. . .</TD></TR>

<TR><TD>. . .</TD><TD>. . .</TD></TR>

</TABLE>,

де крапками позначений вміст кожної комiрки. Усерединi тегів першого рядка <TR>. . . </TR> замiсть елементів TD можуть розміщуватися заголовки кожного стовпця – елементи ТН.

Тег <TABLE> використовує наступні основні атрибути:

Атрибути тэга <TABLE>

Найменування	Опис
WIDTH="[ширина]"	Ширина таблиці. Задає мінімальну ширину таблиці. Якщо який-небудь елемент (дуже часто це стається з елементами <PRE></PRE> і <IMG>) не може бути відображений у цій ширині, то ширина таблиці збільшується, щоб вмістити цей елемент. Задається в одиницях довжини (пікселі, пункти і т.п.) чи у відсотках доступного простору.
HEIGHT="[висота]"	Висота таблиці. Так само задає мінімальну висоту таблиці.
VALIGN="TOP|BOTTOM"	Задає вирівнювання вмісту осередків. Якщо цей атрибут опущений, то вміст вирівнюється по центрі
ALIGN="LEFT|RIGHT"	Задає вирівнювання таблиці
CELLPADDING="[відступ]"	Відступ від границі до її вмісту.
BACKGROUND="[шлях до картинки]"	Задає зображення фону таблиці. У деяких випадках некоректно обробляється Netscape Navigator.
BGCOLOR="#rrggbb|назва кольору"	Задає колір фону таблиці .