 |
Структура ссылок в HTML-документе
|
|
|
|
Выше был рассмотрен формат URL. Для того, чтобы браузер отобразил ссылку на URL в HTML-документе, необходимо отметить URL специальными тегами. Синтаксис HTML, позволяющий это сделать следующий:
<A HREF="URL"> текст-который-будет-ссылкой</A>
Тег <A HREF="URL">открывает описание ссылки, а тег </A> - закрывает его. Любой текст, находящийся между данными двумя тегами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделяется синим (или другим заданным пользователем) цветом. Непосредственно сам URL, не отображается браузером в документе (может отображаться в строке статуса браузера), а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример ссылки:
<A HREF=" www . is . sevntu . sebastopol . ua / webprogramming / first . html "> Ваша первая Web-страница </A>
Ссылки на разделы внутри документа
Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер(якорь) для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит якорь данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).
Для якоря, как и для ссылки, используется тег <A>, но без атрибута HREF, a с атрибутом NAME:
<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке-браузера </A>
|
|
|
Для создания ссылки на этот якорь из этой же страницы в атрибуте HREF ссылки укажем имя якоря после символа #:
<A HREF="#named_anchor"> Текст </A>
Якорь может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае в ссылке на этот якорь необходимо перед “#” указать полный URL документа. Тогда браузер осуществит загрузку указанного документа и перейдет к указанному якорем разделу. Например:
<A HREF="www.is.sevntu.sebastopol.ua/webprogramming/second.html#anchor">
Списки в HTML
Существует три основных вида списков в HTML-документе:
· нумерованный;
· ненумерованный;
· список определений .
Используя различные теги списков или повторяя одни внутри других, возможно создание вложенных списков. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой.
Нумерованные списки
В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
Нумерованный список начинается стартовым тегом <OL> и завершается тегом </OL>. Каждый элемент списка начинается с тега <LI>. Например:
<OL>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</OL>
Тег <OL> может иметь атрибуты:
< OL TYPE=A|a|I|i|1 START=n>,
где:
TYPE - вид счетчика:
A - большие латинские буквы (A,B,C...)
a - маленькие латинские буквы (a,b,c...)
I - большие римские цифры (I,II,III...)
i - маленькие римские цифры (i,ii,iii...)
1 - обычные цифры (1,2,3...)
START=n - число, с которого начинается отсчет.
Например:
<OL TYPE=I START=15>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</OL>
Ненумерованные списки
Для непронумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
|
|
|
Пронумерованный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI>. Например:
<UL>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</UL>
Тег <UL> может иметь атрибут:
< UL TYPE=disc|circle|square>
Атрибут TYPE тега <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:
<UL TYPE=square>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</UL>
Вложенные списки
Ниже представлен пример вложенных списков:
<OL>
<LI> Нумерованный
<UL>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</UL>
<LI> Ненумерованный
<UL TYPE=square>
<LI> Нумерованный
<LI> Ненумерованный
<LI> Список определений
</UL>
<LI> Вложенный
</OL>
Тег элемента списка <LI> может иметь атрибуты:
< LI TYPE=disc|circle|squade> или < LI TYPE=A|a|I|i|1 VALUE=n>
в зависимости от того, в списке какого вида находится данный элемент.
Например:
<OL TYPE=I START=15>
<LI> Нумерованный
<LI TYPE=i VALUE=25> Ненумерованный
<LI> Список определений
</OL>
Список определений
Список определений начинается с тега <DL> и завершается тегом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тегом <DT>, а описание - тегом <DD>. Например:
<DL>
<DT> <B> Отдел маркетинга </B>
<DD> Данный отдел занимается продвижением продуктов и услуг
<DT> <B> Финансовый отдел </B>
<DD> Данный отдел занимается всеми финансовыми операциями
<DT> <B> Отдел кадров </B>
<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д.
</DL >
Графика в HTML-документах
Внедрение графических образов в документ позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее часто используемая техника при проектировании документов, называемая иногда "inline image".
2.6.1. Тег <IMG>
|
|
|
Для внедрения изображения в HTML-документ используется тег <IMG>. Синтаксис тега:
<IMG SRC=" URL " ALT=" text " HEIGHT=n1 WIDTH=n2 ALIGN= top|middle|bottom|texttop ISMAP>
Опишем атрибуты тега:
URL -обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером(например, GIF или JPG).
ALT="text" - данный необязательный атрибут задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенным отображением изображений. Обычно, это короткое описание изображения, которое пользователь сможет увидеть на экране в виде всплывающей подсказки.
HEIGTH=n1 - данный необязательный атрибут используется для указания высоты рисунка в пикселях. Если данный атрибут не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный атрибут.
WIDTH=n2 - атрибут также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.
ALIGN - данный атрибут используется, чтобы сообщить браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный атрибут не используется, то большинство браузеров располагает изображение в левой части экрана, а текст справа от него.
ISMAP – этот атрибут сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения.
BORDER - данный атрибут позволяет автору определить ширину рамки вокруг рисунка.
VSPACE - позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
HSPACE - то же самое, что и VSPACE, но только по горизонтали.
Фоновые рисунки
|
|
|
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет отображаться на фоне всего документа. Описание фонового рисунка включается в тег BODY и выглядит следующим образом:
< BODY BACKGROUND=" picture.gif ">
|
|
|
