Руководство по программированию на HTML )
HTML
1. Web-страницы. Основные понятия
Web-страница является элементарной частью
Всемирной Паутины (World Wide Web, www). WWW, в свою очередь, — одна из
возможностей компьютерной сети Internet, связывающей компьютеры по всему миру.
Вся информация www хранится в виде отдельных
документов. В основе каждого такого документа лежит текст, который может быть
оформлен различными шрифтами, стилями и т. п. В тексте могут быть помещены
иллюстрации, таблицы, видео-клипы, также возможно добавление фоновой звуковой дорожки.
Основное свойство документов во Всемирной Паутине — наличие ссылок на другие
документы, находящиеся в Сети. Такие ссылки называются гиперссылками
(hyperlink), они позволяют при просмотре быстро переходить от одного документа
к другому, и тем самым связывают все документы в единое целое. Документы, о
которых идёт речь, называются web-страницами. Содержимое web-страниц
часто называют гипертекстом.
Набор страниц, объединённых общей тематикой,
называется сайтом (web site). Обычно весь сайт целиком хранится на одном
компьютере сети, называемом web-сервером. Довольно часто серверы содержат
несколько сайтов.
У каждого объекта, к которому можно получить
доступ через Internet (в частности, у сайтов и отдельных web-страниц) имеется
свой адрес в сети, который называется иначе унифицированным адресом ресурса (Uniform
Resource Locator, URL).
Рассмотрим пример адреса для web-сайта:
#"Lists/OL1.html">Lists\OL1.html.
Для нумерованных списков возможна настройка
способа нумерации элементов. Кроме арабских цифр можно использовать римские, а
также большие или малые латинские буквы. Для указания способа нумерации
используется атрибут TYPE тега <OL>. Этот атрибут может принимать одно из четырёх значений: 1 — арабские
цифры, i или I — римские цифры, a — малые латинские буквы, A — большие латинские буквы. Пример использования атрибута TYPE имеется
в файле Lists\OL2.html.
При необходимости можно начинать нумерацию
элементов списка не с 1, а с произвольного номера. Чтобы указать начальный
номер в списке, используют атрибут START тега <OL>, например: <OL TYPE=1 START=5> (первый номер — 5). Этот атрибут работает только в случае
нумерации арабскими цифрами.
2. Маркированный список. Иногда
нумерация бывает не важна, но выделить для читателя отдельные элементы списка
необходимо. В этом случае перед каждым элементом списка ставится небольшой
значок (маркер), обычно это круг, квадрат и т. п. Такие списки создаются с
помощью контейнера UL (unordered list — ненумерованный список), внутри
которого также как для нумерованных списков перечисляются элементы с помощью
тегов <LI>.
Тип маркера указывается в атрибуте TYPE тега <UL>.
Возможно 3 вида маркеров: DISC — круг, CIRCLE — окружность, SQUARE — квадрат. При
необходимости можно заказать для отдельного элемента списка маркер,
отличающийся от других. Для этого атрибут TYPE нужно
применять в теге <LI> перед соответствующим
элементом списка.
Примеры маркированных списков находятся в
файле Lists\UL.html.
3. Списки определений. Этот вариант
применяется в том случае, когда каждый элемент списка состоит из двух частей:
термина (понятия и т. п.) и его определения (расшифровки). Для вставки списка
определений используется контейнер DL (definition list — список определений). Каждый элемент записывается с использованием
двух тегов: <DT>Термин<DD>Его определение. Пример списка определений можно найти в файле Lists\DL.html.
6. Гипертекстовые ссылки
Главная особенность web-страниц состоит в том,
что любая из них может позволить перейти к другой странице, находящейся на том
же компьютере или в Интернет. Выглядит это следующим образом: фрагмент
документа (текст, картинка или другой объект) выделяется особым образом; при
просмотре страницы можно, щёлкнув мышью по этому фрагменту заставить браузер
загрузить другую страницу, адрес которой записывается в тексте HTML-документа.
По этой причине содержимое страниц называется гипертекстом.
Для выделения фрагмента, являющегося ссылкой,
используется контейнер <A> (от слова anchor
— якорь). Наиболее важный атрибут тега <A> — это HREF, в качестве
значения которого записывается адрес страницы, на которую нужно перейти. Ниже
приведён пример вставки гиперссылки:
<A HREF="#"Graphics/Graphics.html">Graphics\Graphics.html
и Graphics\Graphics2.html).
8. Управление видом документа в целом
Здесь мы рассмотрим возможности тега <BODY> для настройки цветов, используемых в документе, а также фоновых
изображений. Всё это задаётся с помощью различных атрибутов тега.
1.
Атрибут TEXT задаёт цвет для всего текста документа, используемый по умолчанию. Цвет,
как уже говорилось, может задаваться как названием (red, yellow, teal и т. п.), так и числовым кодом «#RRGGBB».
2.
Атрибут LINK позволяет установить цвет для текстовых гиперссылок.
3.
VLINK — цвет просмотренных текстовых гиперссылок.
4.
BGCOLOR — цвет фона всей страницы.
5.
В атрибуте BACKGROUND указывается URL графического файла, который будет
использован в качестве фонового изображения. Если размеры рисунка меньше
размеров страницы, то он будет автоматически размножен браузером.
Рассмотрим подробнее содержимое контейнера TABLE:
1. У таблицы может быть название, которое
располагается ниже или выше самой таблицы. Для вставки названия сразу после тега
<TABLE> записывают контейнер <CAPTION>, внутри которого пишут название таблицы. Расположение названия (выше
или ниже таблицы) указывается с помощью атрибута ALIGN тега CAPTION, значениями которого могут быть TOP (сверху) или BOTTOM (снизу). Пример:
<TABLE>
<CAPTION
ALIGN=BOTTOM>Таблица 1</caption>
. . . . . . . . . . . . . . .
</table>
2. Данные для самой таблицы записываются после
<CAPTION>, если таковой имеется. Таблица состоит
из строк, а каждая строка состоит из отдельных ячеек, поэтому данные записываются
в следующем виде:
<TR> {Содержимое первой строки} </tr>
<TR> {Содержимое второй строки} </tr>
<TR> {Содержимое третьей строки} </tr>
. . .
Контейнер TR (table row — строка
таблицы) содержит данные для одной строки, а именно:
<TD> Ячейка 1 </td><TD> Ячейка 2 </td><TD> Ячейка 3 </td> . . .
Контейнер TD (table data —
данные таблицы) содержит тест, графику или другие объекты, которые нужно
поместить в конкретную ячейку. Если ячейка содержит текст, который является
заголовком столбцы, то его можно выделить особо, используя вместо TD контейнер TH (table header — заголовок таблицы). Если какая-то ячейка должна выглядеть пустой, то
в неё нужно записать хотя бы пробел, в противном случае браузер автоматически
удалит её со страницы.
Простейший пример таблицы можно найти в файле Tables\T1.html.
9.2. Настройка размеров таблицы
В примере T1.html, как
нетрудно заметить, таблица выглядит непривычно, поскольку у неё отсутствуют
линии сетки. Для того чтобы их добавить, нужно указать атрибут BORDER в теге <TABLE>. Если дать этому атрибуту значение (натуральное число), то таким
способом будет установлена толщина внешней границы в точках, например: <TABLE BORDER=12>.
Для установки ширины таблицы имеется атрибут WIDTH тега <TABLE>, в котором можно указать ширину двумя
способами:
1.
Абсолютный — в точках, размер таблицы не зависит от
размеров окна браузера или настроек экрана. Пример: <TABLE>.
2.
Относительный — в процентах от ширины окна,
например: <TABLE
>.
Кроме ширины всей таблицы можно настраивать
ширину отдельных ячеек, используя атрибут WIDTH тегов <TD> и <TH>. Ширина указывается либо в точках,
либо в процентах (от ширины таблицы).
Пример таблицы с настройками различных
размеров находится в файле Tables\T2.html.
9.3. Настройка цвета фона для таблицы
В HTML
имеется возможность использовать в качестве цвета фона для ячеек
таблицы цвет, отличающийся от фонового цвета всего документа. Для этого
используется атрибут BGCOLOR, который можно использовать в теге <TABLE>
(фон для всей таблицы), <TR> (для одной строки), <TD> и <TH> (для
отдельной ячейки). Значение цвета задаётся в уже известном нам виде:
указывается либо одно из стандартных названий, либо интенсивности трёх
составляющих цвета в виде #RRGGBB. Пример таблицы с настройками цветов фона имеется в файле Tables\T3.html.
9.4. Настройка вида содержимого ячеек таблицы
В примерах T1.html — T3.html текст внутри ячеек всегда выровнен по левому краю. Изменить
горизонтальное выравнивание можно при помощи атрибута ALIGN в тегах <TR>, <TH> и <TD> (для строки или отдельной
ячейки, соответственно). Значениями этого атрибута могут
быть LEFT, RIGHT и CENTER.
Кроме горизонтального выравнивания можно
указать вертикальное выравнивание содержимого отдельных ячеек. Для этого в теге
<TD> или
<TH> указывается
атрибут VALIGN, значениями которого могут являться TOP, MIDDLE
и BOTTOM.
Пример использования атрибутов ALIGN и VALIGN можно найти в
файле Tables\T4.html.
При помещении текста в ячейки таблицы
происходит автоматический переход на новую строку. Если текст в какой-либо
ячейке разрывать нельзя, то в соответствующем теге <TH> или <TD> следует
указывать атрибут NOWRAP
(не требует значения). Очевидно, что засчет этого возможно
увеличение ширины соответствующего столбца.
9.5. Слияние нескольких ячеек
Иногда соседние ячейки таблицы содержат
одинаковые данные, в этом случае имеет смысл объединить их. Для того чтобы
слить несколько соседних ячеек строки в одну, используют атрибут COLSPAN тега <TD> (или <TH>), значением которого
является число ячеек, подлежащих слиянию. После такого контейнера пропускают
несколько контейнеров <TD>
(или <TH>),
поскольку данные объединённой ячейки уже записаны. В файле Tables\T5.html приведён
пример слияния двух ячеек с фамилией и именем в одну.
Аналогичным образом можно объединить смежные
ячейки в одном столбце. Для этого в теге <TD>
(или <TH>),
соответствующем самой верхней из объединяемых ячеек, записывается атрибут ROWSPAN, значением
которого является количество объединяемых ячеек. В последующих строках теги <TD> (или <TH>), соответствующие
объединённой ячейке, не пишутся. Пример такого объединения ячеек приведён в
файле Tables\T6.html.
При необходимости можно объединить
прямоугольную область, состоящую из ячеек нескольких соседних строк и столбцов.
Для этого потребуется одновременно использовать атрибуты COLSPAN и ROWSPAN в одном теге <TD> (или <TH>). Пример
находится в Tables\T7.html.
10. Фреймы
10.1. Основные сведения
В этой части мы рассмотрим такую возможность
языка HTML, как разбиение окна браузера на несколько частей, в которых
отображаются разные HTML-документы.
Окно браузера всегда разбиваются на
прямоугольные кадры (традиионно, они называются по-английски, фреймами).
Внешне разбиение напоминает таблицу: кадры выстраиваются в несколько «строк», каждая
из которых содержит несколько прямоугольных ячеек, содержащих отдельные HTML-документы. Пример, который содержит 6 различных фреймов, можно увидеть
в Frames\F1.html.
Для того чтобы разбить документ на несколько
прямоугольников, вместо контейнера BODY нам потребуется записать контейнер FRAMESET (набор фреймов). В теге <FRAMESET> нужно
указать на сколько «строк» и «столбцов» разбивается всё окно браузера. Это
делается с помощью атрибутов ROWS
(строки) и COLS (столбцы). Заметим, что в этих атрибутах
недостаточно указать количество строк и столбцов, требуются также их размеры,
например в процентах от размеров окна. В примере Frames\F1.html это сделано так: <FRAMESET ROWS="50%,50%"
COLS="33%,33%,34%"> (всё окно разбивается на две одинаковые
“строки” и на три почти одинаковых столбца).
Внутри контейнера FRAMESET
перечисляются HTML-документы, которые нужно поместить в кадры
(слева направо, сверху вниз). Это делается с помощью последовательных тегов <FRAME>. Самый
важный атрибут тега <FRAME>
— это SRC, значением которого является URL документа,
помещаемого в этот фрейм, например: <FRAME
SRC=”1.html”>.
Размеры фреймов в теге <FRAMESET> можно
указывать не только в процентах. Можно также указать из в частях, например <FRAMESET ROWS="*, 2*"
COLS="2*, *, 3*"> (по высоте окно условно разбито на 3
части, первая “строка” кадров занимает две из них, вторая — одну, по ширине
имеется 6 условных частей, “столбцы” занимают, соответственно, 2, 1 и 3
части).
Другой вариант — указание размеров в точках, например: COLS=”300,100,400”.
Возможно и смешанное указание размеров (точки — проценты, точки — части, части
— проценты). Можно, например, записать: COLS=”200,30%,70%”, что означает: первый «столбец» всегда имеет ширину 200 точек,
независимо от размеров окна, второй занимает 30% от оставшейся части ширины
окна, а третий — 70% от этого остатка. Примеры документов, использующих
различные способы указания размеров, находятся в файлах Frames\F2.html и Frames\F3.html.
10.2. Управление внешним видом фреймов
Внешний вид фреймов настраивается с помощью
атрибутов тегов <FRAME>
и <FRAMESET>. Ниже перечисляются эти атрибуты и объясняется их назначение:
1.
BORDERCOLOR (для <FRAME>
и <FRAMESET>).
Управляет цветом границы одного фрейма или всего набора фреймов.
Значением является либо название стандартного цвета, либо числовой код (#RRGGBB).
2.
BORDER (для <FRAMESET>). Задаёт ширину всех границ, отделяющих фреймы друг от друга. Значение
нужно указывать в точках.
3.
NORESIZE (для <FRAME>). Этот атрибут не требует значения. Если он присутствует, то
пользователь не может перемещать мышью границу соответствующего фрейма.
4.
MARGINHEIGHT и MARGINWIDTH (для <FRAME>). Позволяют указать (в точках) размеры отступов от горизонтальной (и
вертикальной) границы фрейма до содержимого HTML-документа,
лежащего внутри этого фрейма.
Примеры использования этих атрибутов есть в файлах
Frames\F4.html, Frames\F5.html
и Frames\F6.html.
10.3. Вложенные фреймы
При желании можно добиться того, чтобы
какой-либо фрейм вместо обычного HTML-документа содержал
бы, в свою очередь, набор фреймов. Для этого достаточно вместо тега <FRAME> поместить
контейнер <FRAMESET>, в который вложены теги <FRAME>. Пример такой раскладки фреймов можно увидеть в файле Frames\F7.html.
10.3. Гиперссылки и фреймы
HTML позволяет управлять работой гиперссылок
так, чтобы документ, на который указывает ссылка открывался не в целом окне, а
только в одном фрейме (см. пример Frames\F8.html).
Для того чтобы ссылки работали именно так,
нужно выполнить два действия:
1.
Фрейму, в который в дальнейшем нужно помещать
документ, найденный по ссылке, дают имя. Для этого используют атрибут NAME тега <FRAME>, например: <FRAME
NAME=”right”>.
2.
При вставке ссылки в HTML-документ
другого фрейма в теге <A> указывают атрибут TARGET
(цель), значением его является имя фрейма, в который нужно
поместить HTML-документ, указанный в HREF,
например: <A HREF=”1.html”
TARGET=”right”> 1.html </a>.
Кроме имён, которые можно давать собственным
фреймам, существуют и стандартные имена, заранее известные браузеру, а именно:
«_self» —
позволяет открывать документ по ссылке в том же фрейме, где находилась ссылка
«_top» — открывает документ во всё окно, где находилась ссылка, разрушая при
этом всю структуру фреймов
«_parent» — в родительском фрейме; это не совсем то же самое, что _top, поскольку фреймы бывают вложенными; вся структура родительского
фрейма разрушается
«_blank» — в новом окне браузера; старое окно (содержащее ссылку) при этом не
уничтожается.