Файл: Основы программирования на языке HTML (Язык разметки гипертекста. Основные принципы построения HTML-документов).pdf

<li>…</li> второй элемент списка

<li>…</li> n-ый элемент списка

</ul> конец маркированного списка

По умолчанию маркирование производится маркером •, для изменения стиля оформления списка можно использовать атрибут type=”…” тега <ul>. Допускается использовать следующие значения этого атрибута:

type=”disk” устанавливает маркер вида •

type=”circle” устанавливает маркер вида ◦

type=”square” устанавливает маркер вида ▪

Список определений позволяет перечислить не только пункты списка, но также и их описания. Структура списка определений следующая:

<dl> начало списка определений;

<dt>…</dt> первый пункт списка;

<dd>…</dd> описание первого пункта списка;

<dt>…</dt> последний пункт списка;

<dd>…</dd> описание последнего пункта списка;

</dl> конец списка определений.

Для создания списка директорий также применялся тег <DIR>…</DIR>, но его использование считается устаревшим.

Для создания многоуровневых списков позволяется использование тегов создания маркированных, нумерованных списков и списков определений, в этом случае вложенный список рассматривается как элемент списка.

1.4.5 Работа со ссылками средствами языка HTML

Очень важным понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <a>, структура которого следующая:

<a href=”filename”> текст ссылки </a>

Здесь filename – имя файла или адрес Internet, на который необходимо сослаться, а текст ссылки – текст гипертекстовой ссылки, который будет непосредственно показан в документе. Если документ, на который указывает ссылка, находится в том же каталоге, то подобная ссылка называется относительной. Если есть необходимость сослаться на ресурс Internet, расположенный на удаленном сервере, или указать в ссылке полное имя файла и путь к файлу, то используют абсолютные ссылки. Структура такого тега аналогична, однако она формируется на основе полного пути к ресурсу.

Очень удобно при создании больших страниц в начало документа вставить оглавление, а его заголовки оформить в виде гиперссылок на соответствующий раздел текста. Для этого необходимо присвоить заголовку раздела уникальный идентификатор, т.е. имя. Это можно сделать, используя тег <a> и атрибут name=”…”. Пункт оглавления необходимо оформить в виде ссылки на соответствующий раздел (такое оформление носит название закладки или якоря) при помощи следующей конструкции:

<a href=”#Раздел1”> Раздел 1. </a>

<a name=”Раздел1”> Раздел 1. </a>

В результате выполнения приведенного выше кода в окне браузера отобразиться страница, на которой отображается пункт содержания Раздел 1. , который является гиперссылкой на соответствующую часть документа. Такая организация страницы является очень удобной, поскольку позволяет пользователю перейти непосредственно к интересующему материалу, а не искать его по всему документу.

Кроме ссылок на текст, возможна также реализация ссылок на изображения и другие элементы документа. Кроме того, использование атрибута TITLE позволит добавить всплывающую подсказку к тексту ссылки.

В стандарте HTML5 введен контейнер <NAV>…</NAV>, внутри которого задаются ссылки, что позволяет задать навигацию по сайту, причем допустимо использовать несколько таких контейнеров в документе.

1.4.6 Работа с графическими изображениями средствами HTML

В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <img>. Допускается использование файлов в формате GIF или JPG/JPEG/PNG, поскольку большинство браузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается также использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла:

<img src=”pic.jpg” width=600 height=300 alt=”Рисунок”>

Здесь атрибут scr=”…” определяет адрес графического файла. В приведенном примере файл будет размещен в области шириной 600 и высотой 300 пикселей соответственно. Если размеры, указанные атрибутами height=”…” (высота) и width=”…” (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.

Атрибут alt=”…” указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или вследствие медленной скорости соединения файл не был получен.

При вставке рисунка в документ, браузер размещает следующий за ним текст внизу. Используя атрибут align=”…”, можно разместить последующий текст вверху (top), внизу (bottom) или по центру (middle) относительно картинки.

Картинка может быть средством задания и управления выбором гиперссылок в документе, для чего на тег <img> должна указывать гиперссылка, определяемая командой <a>. Например:

<a href=”index.html”><img border=”0” src=”mailmov.gif” width=”43” height=”35”></a>

По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того, чтобы убрать прорисовку рамки, используют атрибут border=”…” в теге <img> с нулевым значением. Помимо этого имеется возможность создания активного рисунка с гиперссылками, в которой разные части картинки имеют разные ссылки – такое средство принято называть активными картами. Это можно сделать путем включения информации об изображении в документ.

Для задания информации о гиперссылках в рисунке, которая включается в документ, используется атрибут usemap=”…” в теге <img>. Сама информация о гиперссылках определяется тегами <map> и <area>, как показано ниже:

<map name=”map1”>

<area shape=”rect” coords=”0,0,20,20” href=”h1.htm”>

<area shape=default href=”other.htm”>

</map>

<img border=0 src=”map1.gif” usemap=”#map1”>

В данном примере на рисунке map1.gif был выделен прямоугольник, при этом одна область не используется, а выделенная является гиперссылкой к документу h1.htm. Тег <area> позволяет также помечать области кругами, если используется параметр shape=”…” со значением circle, или ломанными – тогда применяют параметр poly. Каждый из этих параметров имеет дополнительный параметр coords=”…”, который указывает координаты ключевых точек и для каждой из фигур имеет следующий формат:

shape=”rect” coords=”x1,y1,x2,y2”

shape=”circle” coords=”x,y,R”

shape=”poly” coords=”x1,y1,x2,y2,…,xn,yn”

Следует иметь ввиду, что если две или более областей пересекаются, то браузер выбирает первую из тех, что описаны в теге <map>, а неотмеченные области никак не отвечают на действия пользователя.

1.4.7 Работа с таблицами средствами HTML

В web-дизайне таблицы часто используются для позиционирования графических и текстовых объектов на страницах. Для создаания таблиц используются следующие теги:

<TABLE>...</TABLE> создание таблицы;

<CAPTION>…</CAPTION> создание заголовка таблицы;

<TR> … </TR> формирование строки;

<TH>…</TH> формирование ячейки с заголовком строки или столбца;

<TD>…</TD> формирование содержимого ячейки;

<COL>…</COL> задается ширина и другие характеристики столбцов;

<COLGROUP>…</COLGROUP> задается ширина и стиль столбцов;

<TBODY>…</TBODY> структурный блок для хранения нескольких строк;

<TFOOT>…</TFOOT> структурный блок для хранения нескольких нижних строк;

<THEAD>…</THEAD> структурный блок для хранения нескольких нижних строк.

Атрибуты тега <TABLE>:

ALIGN=”…” определяет выравнивание таблицы;

BACKGROUND=”…” задает фоновый рисунок в таблице;

BGCOLOR=”…” задает цвет фона в таблице;

BORDER=”…” толщина рамки в пикселях;

BORDERCOLOR=”…” задает цвет рамки;

CELLPADDING=”…” отступ от рамки до содержимого ячейки;

COLS=”…” число колонок в таблице;

FRAME=”…” сообщает браузеру, как отображать границы вокруг рамки;

HEIGHT=”…” высота таблицы;

RULES=”…” сообщает браузеру, как отображать границы между ячейками;

SUMMARY=”…” краткое описание таблицы;

WIDTH=”…” ширина таблицы.

Для объединения в строке нескольких последовательных ячеек, например двух в одну, в соответствующем первом теге <TH> или <TD> записывается параметр ROWSPAN=2. А для объединения в столбце двух ячеек в одну используется параметр COLSPAN=2.

1.4.8 Блоки и фреймы

Элемент <div>…</div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

Фреймы позволяют разделить страницу на несколько кадров, каждый из которых по факту является также страницей (каждому из них соответствует свой HTML-файл, основной файл содержит описание размещения фреймов в окне браузера, остальные файлы содержат описание содержимого фреймов). При создании фреймов используют теги <frameset>...</frameset> используется для определения разделения окна на фреймы с параметрами COLS (вертикальные области) и ROWS (горизонтальные области), SRC адресом стартового html-файла, NAME – именем фрейма и др. Согласно стандарту HTML5 использование фреймов считается устаревшим.

Контейнер <ASIDE>…</ASIDE>, введенный в стандарте HTML5, позволяет выделить блок сбоку от контента для размещения рубрикатора, ссылок или меток (по принципу боковой панели).

Контейнер <CANVAS>…</CANVAS>, введенный в стандарте HTML5, позволяет создать область, в которой можно создавать и трансформировать рисунки, анимацию, игры и т.п.

Контейнер <SECTION>…</SECTION>, введенный в стандарте HTML5, позволяет задать раздел страницы и может применяться для создания новостных блоков, контактных данных, разделов текста и пр.

1.4.9 Формы

Формы предназначены для обмена данными между пользователями и сервером в Интернет.  Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. При этом документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. Формы создаются с применением тега <FORM ACTION=”URL”>…</FORM>, где его атрибут ACTION указывает программу, которой передается управление при отправке формы на сервер. Внутрь контейнера <FORM> можно помещать другие теги, при этом сама форма никак не отображается на web-странице, видны только ее элементы.

Используемые теги:

<BUTTON>…</BUTTON> создание кнопки;

<textarea>…</textarea> создание области ввода текста;

<SELECT>…</SELECT> позволяет создать элемент интерфейса в виде выпадающего списка, элементы которого определяются тегом <OPTION>…</OPTION>;

<PARAM>…</PARAM> передача значения параметров другим объектам страницы (например, апплетам);

<OBJECT>…</OBJECT> определяет принципы загрузки и отображения объектов страницы;

<INPUT>…</INPUT> создание различных элементов интерфейса формы и обеспечение их взаимодействия с пользователем;

<FIELDSET>…</FIELDSET> группировка элементов формы;

<LEGEND>…</LEGEND> создание заголовка группы элементов формы;

<LABEL>…</LABEL> создание метки и связывание ее с элементом формы;

<MENU>…</MENU> создает команду в виде переключателя, флажка или обычной кнопки (введен в стандарте HTML5);

<DATALIST>…</DATALIST> создает список вариантов, которые можно выбирать при наборе в текстовом поле, его элементы определяются тегом <OPTION>…</OPTION> (введен в стандарте HTML5);

<AUDIO>…</AUDIO> добавляет, воспроизводит и управляет настройками аудиозаписи на странице либо форме (введен в стандарте HTML5);

<VIDEO>…</VIDEO> добавляет, воспроизводит и управляет настройками видеоролика на странице либо форме (введен в стандарте HTML5);

<SOURCE>…</SOURCE> вставляет звуковой или видеофайл для тегов <AUDIO> и <VIDEO> (введен в стандарте HTML5);