Файл: Языки разметки гипертекста.pdf

Указанные теги задают способ выделения фрагмента текста явным образом. Наряду с ними можно использовать теги, которые лишь указывают, что текст должен быть выделен, не обозначая способа выделения. В этом случае выбор способа выделения определяется браузером:

<EM> … </EM> — выделенному тексту должно уделяться внимание;

<STRONG> … </STRONG> — выделенному тексту должно уделяться особое внимание;

<KBD> … </KBD> — обозначение клавиши клавиатуры;

<VAR> … </VAR> — обозначение переменной;

<CITE> … </CITE> — цитата.

Рассмотрим пример HTML-документа, в котором используется большинство из рассмотренных тегов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"

"http://www.w3.org/TR/HTML4.01/loose.dtd">

<HTML>

<HEAD> <TITLE> Пример HTML-документа </TITLE> </HEAD>

<BODY>

<H2 ALIGN=CENTER> Пример использования списков </H2>

<P> Вложенный список:

<OL>

<LI><U>Элемент 1</U></LI>

<UL>

<LI><I>Элемент</I> 1.1</LI>

<LI><I>Элемент</I> 1.2</LI>

</UL>

<LI><U>Элемент 2</U></LI>

<UL>

<LI><I>Элемент</I> 2.1</LI>

<LI><I>Элемент</I> 2.2</LI>

</UL>

<LI><U>Элемент 3</U></LI>

</OL>

</P>

</BODY>

</HTML>^[43]

Вид данного документа в окне браузера Mozilla Firefox показан на рис. 2.1. В приведенном выше HTML-коде указан один параметр заголовка — заголовок окна браузера, задан один заголовок текста с выравниванием по центру и создан вложенный список. Элементы первого уровня в списке представляют собой нумерованный список, а элементы второго уровня — маркированный список.

Рис. 2.1. Пример HTML-документа, содержащего списки

Гиперссылки. Гиперссылки обеспечивают связь между различными HTML-документами. Гиперссылка представляет собой фрагмент HTML-документа (текст или изображение), щелчок на котором приводит к загрузке другого документа.^[44]

Для создания гиперссылки используется пара тегов <A> и </A>. Заключенный между ними фрагмент HTML-документа при просмотре будет отображаться как гиперссылка. Тег <A> обязательно должен использоваться совместно с атрибутом HREF. С помощью него задается ссылка на документ, к которому должен быть произведен переход при щелчке на гиперссылке.

Таким образом, фрагмент HTML-документа, задающий гиперссылку, в общем виде выглядит так:

<A HREF=URL_ресурса> фрагмент документа </A>

Здесь URL-адрес, задаваемый атрибутом HREF, может быть двух видов: абсолютным и относительным:

абсолютный URL-адрес содержит полную информацию о местоположении ресурса и протоколе обращения к ресурсу;
относительный URL-адрес указывает расположение ресурса относительно местоположения текущего HTML-документа. Например, строка

<A HREF=doc1.html> Переход к документу 1 </A>

создает гиперссылку, указывающую на гипертекстовый документ doc1.html, который размещен в том же каталоге, что и текущий документ.

Если абсолютный адрес документа, содержащего приведенную гиперссылку, выглядит, например, как http://www.domen.ru/information/main.html, то абсолютным адресом, на который эта гиперссылка ссылается, будет http://www.domen. ru/information/doc1.html.

Тег <A> имеет еще одно назначение — кроме создания гиперссылок он позволяет устанавливать маркеры для организации переходов по гиперссылкам в пределах одного документа HTML. Для задания маркера тег <A> используется совместно с атрибутом NAME:

<A NAME="имя_маркера"> текст </A>

В этом случае текст, заключенный между тегами <A> и </A>, при отображении никак не выделяется, но к помеченному таким образом фрагменту HTML-документа можно перейти с помощью гиперссылки следующего вида:

<A HREF="#имя_маркера"> текст </A>

Гиперссылки такого вида удобно использовать в документах большого объема.

Формы. Формы предназначены для организации интерактивного режима работы пользователя, обеспечивая взаимодействие между пользователем, работающим на клиентской машине, и веб-приложениями, выполняющимися на стороне сервера. Для создания формы используется пара тегов <FORM> и </FORM>. Между ними располагаются строки, описывающие различные элементы управления: кнопки, поля ввода, флажки и т. п.:^[45]

<FORM> описание элементов управления </FORM>

Совместно с тегом <FORM> практически всегда используются атрибуты ACTION и METHOD:

атрибут ACTION предназначен для указания URL-адреса программы (сценария), которая будет выполнять обработку данных, введенных пользователем;
атрибут METHOD определяет метод, с помощью которого данные, введенные пользователем, будут передаваться на сервер. Он может принимать одно из двух значений: GET или POST. Основные элементы управления создаются с помощью тега <INPUT>, который используется без закрывающего тега. Тип управляющего элемента задается с помощью атрибута TYPE данного тега. Кроме атрибута TYPE, тег <INPUT> содержит ряд других атрибутов, определяющих параметры элемента управления.

Поля ввода. Для создания полей ввода атрибуту TYPE следует присвоить значение ”TEXT”. Параметры поля ввода задаются следующими атрибутами тега <INPUT>:^[46]

NAME — идентификатор элемента управления;

VALUE — начальное значение, отображаемое в поле ввода сразу после загрузки документа;

SIZE — максимальное количество отображаемых символов;

MAXLENGTH — максимальное количество символов, которые могут быть введены с помощью данного поля ввода. Например, приведенный ниже фрагмент кода создает форму, содержащую текстовое поле txt1 длиной 19 символов:

<FORM METHOD="POST"

ACTION="http://domen.ru/scripts/test.cgi">

Имя: <INPUT TYPE="TEXT" SIZE=19 NAME="txt1">

</FORM>

Имеется еще одна разновидность полей ввода — поля, предназначенные для ввода пароля. Для создания такого поля ввода атрибуту TYPE следует задать значение ”PASSWORD”. Все символы, вводимые в этом поле ввода, будут отображаться на экране в виде звездочек (*). В остальном этот элемент управления ничем не отличается от обычного поля ввода.

Флажки. Для создания флажка атрибуту TYPE тега <INPUT> задается значение ”CHECKBOX”. Параметры флажка определяются следующими атрибутами:

NAME — идентификатор элемента управления;

VALUE — атрибут, определяющий значение, которое передается на сервер в случае, если флажок установлен;

CHECKED — атрибут, указывающий, что после загрузки документа флажок должен быть установлен. Данному атрибуту не задается никакого значения. Например, следующий код создает флажок, передающий на сервер значение ”YES” и по умолчанию являющийся установленным:

<FORM METHOD="POST"

ACTION="http://domen.ru/scripts/test.cgi">

Запомнить

</FORM>

Переключатели. Переключатель представляет собой группу элементов управления, подобных флажкам. Однако в отличие от последних в установленном состоянии может находиться только один из элементов управления, входящих в группу. Для создания переключателей атрибуту TYPE задается значение ”RADIO”. Параметры переключателей определяются следующими атрибутами:^[47]

NAME — идентификатор переключателя. Он должен быть одинаковым для всех элементов управления, входящих в одну группу;

VALUE — значение, передаваемое серверу при установленном значении элемента управления;

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

Следующий фрагмент HTML-кода содержит описание переключателя с тремя положениями:

<FORM METHOD="POST"

ACTION="http://domen.ru/scripts/test.cgi">

Сегодня <BR>

за последнюю неделю <BR>

за последний месяц <BR>

</FORM>

Кнопки. Различают два вида кнопок:^[48]

кнопка SUBMIT производит передачу введенных пользователем данных на сервер;
кнопка RESET сбрасывает все элементы управления в исходные состояния.

Для создания кнопок атрибуту TYPE задается значение либо ”SUBMIT”, либо ”RESET” — в зависимости от того, какую кнопку требуется создать. Надпись на кнопке задается с помощью атрибута VALUE. Приведенный ниже фрагмент кода создает пару кнопок, одна из которых имеет тип SUBMIT, а вторая — RESET:

<FORM METHOD="POST"

ACTION="http://domen.ru/scripts/test.cgi">

</FORM>

Приведем пример формы, содержащей основные элементы управления:

<HTML>

<HEAD> <TITLE> Пример HTML-формы </TITLE>

</HEAD>

<BODY>

<H2 ALIGN=CENTER> Пример создания форм </H2>

<FORM METHOD="POST"

ACTION="http://domen.ru/scripts/test.cgi">

Имя: <INPUT TYPE="TEXT" SIZE=19 NAME="txt1"> <BR><BR>

Запомнить <BR><BR>

сегодня <BR>

за последнюю неделю <BR>

за последний месяц <BR><BR>

</FORM>

</BODY>

</HTML>^[49]

Вид приведенного HTML-документа в окне браузера Mozilla Firefox показан на рис. 2.2.

Рис. 2.2. Пример HTML-формы.

Таблицы. Для создания таблиц в HTML 4 применяется тег <TABLE>, форма записи которого в общем виде следующая:^[50]

CELLSPACING=”ЦЕЛОЕ ЧИСЛО” CELLPADDING=”ЦЕЛОЕ ЧИСЛО”

<CAPTION> ЗАГОЛОВОК ТАБЛИЦЫ </CAPTION>

<TD ALIGN=”ЗНАЧЕНИЕ” VALIGN=”ЗНАЧЕНИЕ”

COLSPAN =”ЦЕЛОЕ ЧИСЛО” ROWSPAN =”ЦЕЛОЕ ЧИСЛО”

HEIGHT=”ЗНАЧЕНИЕ” WIDTH=”ЗНАЧЕНИЕ”>

Содержимое ячеек</TD>

</TR>

</TABLE>

Основополагающим тегом в блоке описания таблицы является директива <TABLE>, в нее вкладываются все остальные команды блока. Данный тег может использовать следующие атрибуты:^[51]

ALIGN — задает горизонтальное выравнивание всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER;

WIDTH — определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселах, либо числа от 1 до 100 с символом «%» (например «60%»), если ширина таблицы задается в процентах от ширины экрана пользователя;

BORDER — указывает на толщину обрамления столбцов и ячеек таблицы в пикселах. Если значение данного атрибута равно нулю, сетка таблицы становится невидимой;

CELLSPACING — задает промежуток между ячейками в пикселах;

CELLPADDING — задает промежуток между содержимым ячейки и рамкой вокруг ячеки в пикселах.

Тег <CAPTION> задает заголовок всей таблицы.

В теги <TABLE> и </TABLE> вкладываются теги <TR> и </TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк. Команда <TR> может использовать атрибут ALIGN, определяющий горизонтальное выравнивание содержимого ячейки внутри самой ячейки, а также атрибут VALIGN, задающий вертикальное выравнивание содержимого ячеки. Первый из них может принимать значения LEFT, RIGHT и CENTER , второй —значения TOP, MIDDLE, BOTTOM и BASELINE.

В контейнер, образуемый тегами <TR> и </TR>, вкладываются команды <TD> и </TD>, описывающие сами ячейки. Тег <TD> оперирует атрибутами ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега <TR>. Кроме того, тег <TD> оперирует следующими необязательными атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN — число строк, перекрываемых ячейкой. HEIGHT и WIDTH — соответсвенно высота и ширина ячейки в пикселах, либо в процентах от высоты таблицы.^[52]

Приведем пример верстки простой таблицы, состоящей из четырех строк и двух столбцов, включающей объединенные ячеки:^[53]

<HTML>

<HEAD>

<TITLE>ТАБЛИЦА С ОБЪЕДИНЕНИЕМ ЯЧЕЕК</TITLE>

</HEAD>

<BODY>

<TABLE WIDTH="200" BORDER="1" ALIGN="CENTER"

CELLPADDING="4" CELLSPACING="0">

<CAPTION> <H2> ПРИМЕР ТАБЛИЦЫ </H2> </CAPTION>

<TR>

<TD COLSPAN="2" ALIGN="CENTER">ЯЧЕЙКА 1</TD>

</TR>

<TR>

<TD>ЯЧЕЙКА 2</TD>

<TD>ЯЧЕЙКА 3</TD>

</TR>

<TR>

<TD ROWSPAN="2">ЯЧЕЙКА 4</TD>

<TD>ЯЧЕЙКА 5</TD>

</TR>

<TR>

<TD>ЯЧЕЙКА 6</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Вид приведенного HTML-документа в окне браузера Mozilla Firefox показан на рис. 2.3.

Рис. 2.3. Пример таблицы в HTML.

Фреймы. Фреймы разбивают видимое на экране изображение на несколько частей (окон, рамок, ячеек). В каждом окне может быть размещен документ с собственным доменным адресом. Фреймы дают возможность в одном окне размещать текущую информацию, а в другом окне отображать меню. Это позволяет легко перемещаться по сайту, благодаря тому, что при прокрутке просматриваемой страницы элементы навигации остаются постоянно перед глазами.^[54]

Смотрите также файлы

Теория мотивации на малом предприятии.pdf

Учетная политика для целей налогообложения: цели, задачи, формирование, применение.pdf

Социальное страхование, его функции.pdf

Государственная социальная помощь (Законодательство о государственной социальной помощи в РФ).pdf

Анализ характеристик системного программного обеспечения(КЛАССИФИКАЦИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ).pdf

Файл: Языки разметки гипертекста.pdf

Смотрите также файлы

Информация

Списки файлов

Дополнительно