Файл: Основы программирования на языке HTML.pdf

В примере 12 продемонстрированы 4 вида гипертекстовых ссылок: первый, который содержит абсолютный URL, второй, который содержит относительный URL, третий, который указывает на позицию внутри данного документа, а кроме того четвертый, который указывает на позицию в документе с указанным URL.

Пример 12. Гипертекстовые ссылки

The official HTML specifications are available from

<А HRЕF="http://www.w3.оrg/MаrkUp/"> the World Wide Web Consortium (W3C)</A>, with some examples given in

<A HRЕF="HTML-Examples.html">my example page</А>.

The Java programming language is discussed in

<A НREF="#Section-3">Section 3</A>. For a discussion of COBOL, see

<А HREF="johndoe.html#COBOL">my friend's home page</А>.

Кроме ссылок http:, большая часть браузеров кроме того поддерживают ссылки mailto: (для адресов электронной почты), file: (для локальной файловой системы на клиентской машине) и ftp: (для FTP-узлов).

2.7 Изображения

Элемент IMG дает возможность добавлять изображения в содержание документа. Большая часть браузеров может обрабатывать форматы GIF (Graphic Interchange Format), JPEG (Joint Photographic Expert Group) и PNG (Portable Network Graphic). Так как период загрузки изображения устанавливает время загрузки всей страницы, требуется представлять изображение в таком формате, каковой гарантирует наименьший размер файла.

Элемент IMG содержит изображение в текущей позиции документа. IMG является элементом текстового уровня и не создает новый абзац. IMG не является контейнером, поэтому закрывающий дескриптор не указан. SRC является обязательным атрибутом. Он указывает расположение файла, который содержит изображение, каковое должно быть включено в документ. Атрибут ALT указывает строку, каковая отображается вместо изображения в браузерах, не поддерживающих графические файлы [14].

В примере 13 указаны разные вариации выравнивания картинок относительно текстовой строки. Результаты продемонстрированы на рисунке 9.

Рисунок 9 – Несколько видов выравнивания изображений

Пример 13. Варианты выравнивания изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>Выравнивание изображения</TITLE>

</HЕАD>

<BODY>

<Н1 align=center>Выравнивание изображения</H1>

<TR><ТН>Выравнивание

<TН>Результат

This positions the image at the left side, with text flowing around

it on the right.

<TR><TH><CODE>RIGHT</CODE>

This positions the image at the right side, with text flowing around

it on the left.

Here, the image runs into the paragraph and the line containing the

image is aligned with the image top.

<TR><TH><CODE>BOTTOM</СОDE>

<ТD><IМG src="rude-pc.gif" align="BOTTOM" alt="Rude PC" width=54 height=77>

Here, the image runs into the paragraph and the line containing the

image is aligned with the image bottom.

<TR><TH><CODE>MIDDLE</CODE>

<ТD><IMG src="rude-pc.gif" align="MIDDLE" alt="Rude PC" width=54 height=77>

Here, the image runs into the paragraph and the line containing the

image is aligned with the image center.

</TАВLE>

</BОDY>

</HTML>

Рисунок может являться ссылкой, для этого элемент <img> должен быть расположен в контейнере <а href=...>...</a> [4]. Еще более впечатляющим является сайт, где части изображения являются ссылками на разные страницы. Это изображение называется графической картой.

В примере 14 показано изображение, которое разделено на 3 прямоугольных области, с каждой из каковых связан HTML-документ. Картинка карты ссылок показана на рисунке 10.

Рисунок 10 – Карта ссылок

Пример 14. Организация карты ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Карта ссылок</TITLE >

</HEAD>

<BODY>

<MАP NAME="arrows">

<ARЕА SHAPE="RECT" COОRDS="0,0,100,190" HREF="left.html" АLT="Налево">

</МАР>

</BODY>

</HTML>

Строка 7: код данной строки показывает изображение и ссылается на элемент с названием #arrows, в каковом описана карта.

Контейнер <MAP> включает строки 8-12: описание карты.

Строки 9-11 характеризуют некоторые области и указывают, какую ссылку они будут вызывать.

Проведя указателем мыши по подобному изображению, можно запросто выяснить, где располагается такая ссылка, а где она отсутствует (рисунок 10). Справа и слева карты изображения ссылки присутствуют, а в центре - нет. Адрес ссылки можно найти в статусной строке 6pаузера. Анализируя пример, можно обратить внимание, как адрес ссылки изменяется при перемещении маркера с левой стрелки поворота на правую.

2.8 Формы

2.8.1 Формирование элементов управления

Гиперссылки не дают возможности организовать обратную связь с пользователями. Для данных целей HTML предоставляет другие формы интерактивного общения. Одна из них - это формы, каковые включают в себя набор простых элементов управления, таких как кнопки, переключатели, поля ввода, и тому подобное. Данные из форм отправляются на сервер либо обрабатываются с помощью Java-скриптов на самой странице. Форма - не единственный способ организации интерактивного взаимодействия, однако один из наиболее простых.

Элемент <input> используется для создания большого числа элементов управления в формах [13, 15]. Это включает в себя текстовые поля, поля пароля, флажки, переключатели, скрытые элементы. Все они обычно используются при вводе данных в форму. Форматирование элементов формы (выравнивание, шрифты, цвет и прочие) происходит только путем изменения стиля.

В примере 15 показано применение элемента <input> с разными атрибутами (рис. 11).

Пример 15. Элементы ввода информации

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<TIТLE>Элементы ввода информации &lt input &gt</TITLE>

</hЕАd>

<body>

<fОrm>

ввод текста&nbsp&nbsp&nbsp<inРut type="text" value="текст по

умолчанию" name="my_text">

<Вr>

ввод пароля &nbsp<input type="password" value="enter" name="my_pass"

style="background: #aaaaaa; text-align: center;">

<br>

флажок (checkbox)&nbsp&nbsp <inРuТ type="checkbox" name= "check1"

vаlue="первый">

<inРut type="checkbox" name="check2" value="второй" checked>

<br><br> проголосуй за

<Вr>

<input type="radio" name="radio1" value="Бендер">&nbsp&nbspБендера

<br>

&nbsp&nbspПаниковского

<br>

<input type="radio" name="rаdio1" value="Балаганов">&nbsp&nbspБалаганова

<Вr><br>

<br>

<inРut type="hidden" name="spy" value="донос">

<br>

<inpuТ type="button" value="кнопка">

<inpuТ type="submit" name="submit1" value="отправить">

<inРut type="reset" name="reset1" value="очистить">

</fОrm>

</body>

</html>

Рисунок 11 – Элементы ввода информации <INPUT>

Строка 7. Отображается текст «Ввод текста», а после него поле ввода текста, в каковом показывается текст, который задан по умолчанию в атрибуте value. Именно данный текст будет подвергаться редактированию.

Строка 9. Наподобие организуется поле для ввода пароля. Слово «enter», заданное по умолчанию, выводится звездочками.

Стандартные атрибуты HTML не дают возможности управлять отображением элементов форм (фоном, выравниванием, шрифтом и т.д.). Это может быть при применении стилей.

К примеру, в строке 7 в поле ввода сразу после отображения показывается текст «текст по умолчанию», который выравнивается по левому краю.

В строке 9 показано, что текст можно выводить, выравнивая его по центру.

Строки 11, 12. Выводятся флажки, второй из которых по умолчанию отмечен. Могут быть выбраны оба флажка.

Строки 15, 17, 19. Выводятся похожие радиокнопки, из которых по умолчанию выбрана вторая (в строке 17 в элементе <input> установлен флажок - атрибут checked). Кнопки объединены общим именем name="radio1" и из них может быть выбрана только одна.

Строка 21. Организуется поле для ввода имени файла, рядом с которым - кнопка для вызова стандартного диалога.

Строка 23. «Подпольный» элемент не выводится, но при отправке данных значения его параметров могут передаваться.

Строка 25. Выводится простая кнопка, надпись на которой легко изменить.

Строка 27. Выводится кнопка «отправить» (определяются данные).

Строка 28. Выводится кнопка «очистить». Ее нажатие вернет форму в начальное состояние.

2.8.2 Организация списков

Элемент <select> нужен для организации меню, разных списков и выбора из них. Пункты списка формируются элементами <option> [12]. При отправке данных на сервер отсылается имя списка вместе со значением, которое по умолчанию является выбранной строкой. Передаваемое значение может быть изменено. Ниже показан пример применения элемента <option> с разными атрибутами. Результат продемонстрирован на рисунке 12.

Рисунок 12 – Использование элемента <OPTION> с различными атрибутами

Пример 16. Списки выбора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Элемент &ltoption&gt</TITLE>

</HEAD>

<BODY>

<SELЕСT name="select1">

<ОРТION>Москва

<OPTION selected>Жмеринка

<OPTION>Большие Васюки

</SELECT>

<SELЕСТ name="select2" size=5 multiple>

<OPTION selected>Полыхаев

<OPTIОN value="бухгалтер">Берлага

<OРТION label="васис" selected>Васисуалий Андреевич Лоханкин

<OPTION style="color: red;">Гигиенишвили

<OPTION>Пряхин

<OPTION>Дуня

<OPТION>Люция Францевна Пферд

</SELЕCT>

</BODY>

</HTML>

Таким образом происходит использование элемента <OPTION> с различными атрибутами.

2.8.3 Связывание элементов формы

Элементы для связывания разных форм весьма полезны в ситуации автоматической обработки содержимого страницы и при применении альтернативных браузеров. Они дают возможность задать логическую связь между разными элементами. Например, связать надпись на экране с каким-то элементом формы, таким как ее название. Для связывания текстовой информации и элемента управления, т.е. организации подписи, используют элемент <LABEL> [1, 6]. Каждый конкретный элемент <LABEL> может связываться только с одним элементом формы, но с одним элементом формы может быть связано несколько элементов <label>.

Использование элементов <LABEL>, <fieldset>, <legend> продемонстрировано в примере 17 и на рисунке 13.

Рисунок 13 – Связывание элементов формы

Пример 17. Связывание элементов формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Элемент &ltfieldset&gt</TITLE>

</HEAD>

<BODY>

<FIELDSЕТ>

<LEGEND style="font-family:'arial';">анкета</lеgend>

<LABЕL for="имя">имя:</label>

пол<br>

<LАВЕL for="пол">м</LABEL><INPUT type="radio" name="пол" value="м">

</FОRM>

</FIЕLDSET>

</ВОDY>

</HTML>

В определенных случаях требуется организовать подпись не к одному, а к нескольким элементам и организовать их в группу. Для организации подписи ко многим элементам выступают элементы <fieldset> и <legend>.

2.9 Фреймы

2.9.1 Разбиение окна браузера на фреймы

Фреймы дают возможность разделить окно браузера на несколько областей прямоугольной формы и показать в каждой из них отдельный HTML-документ. Описание фреймовой структуры выстраивается в отдельном файле. В обычном HTML-документе за разделом HEAD непосредственно идет раздел BODY, в каковом содержится информация, предназначенная для отображения. В документе с фреймами элемент BODY либо отсутствует, либо находится в разделе NOFRAMES, предназначенном для браузеров, которые не поддерживают фреймы. Вместо элемента BODY используется элемент FRAMESET, с помощью которого задается разбиение окна браузера на столбцы или строки. В содержание FRAMESET входят другие элементы FRAMESET, реализующие дальнейшее разбиение окна, либо элементы FRAME, определяющие URL документов, которые должны отображаться внутри фреймов [12].

В примерах 18 и 19 показаны исходные коды двух документов с фреймами. Эти документы почти идентичны и различны лишь применением атрибута FRAMEBORDER, определяющим, должны ли отображаться разделительные линии между фреймами. Результаты показаны на рисунке 14.

Пример 18. Фреймы с разделителями

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HEAD>

<TITLE>Frames with Borders</TITLE>

</HEAD>

<FRАМЕSET ROWS="40%,60%">

<FRАMESET COLS="*,*">

<FRАМE SRC="Frame-Cеll.html">

</FRAMЕSET>

<BODY>

Your browser does not support frames. Please see