Основы разработки веб – приложений. HTML – язык разметки гипертекста
Форматирование HTML-документа
Разделение на абзацы
Любые тексты, будь то школьное сочинение, заметка в газете или техническое описание устройства имеют определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.
Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Избежать этой неприятности позволяет применение специального тэга разделения на абзацы <р>. Перед началом каждого абзаца текста следует поместить тэг <Р>.
Браузеры обычно интерпретируют несколько стоящих подряд тэгов абзаца <Р> как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тэгов не удается.
Перевод строки
При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тэг принудительного перевода строки <BR>. Включение тэга <BR> В текст документа обеспечит размещение последующего текста с начала новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тэгов разметки списка. Или, например, без данного тэга не обойтись для отображения стихотворений и т. п.
Тэги <NOBR> и <WBR>
Бывают ситуации, когда требуется выполнить операцию противоположного назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
Размечая текст с помощью тэга неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тэг <WBR> (Word BReak), который так же, как и тэг <BR>, не нуждается в закрывающем тэге.
Включение комментариев в документ
В HTML-документ можно включать комментарии, которые не будут видны читателю. Они могут состоять из произвольного числа строк и должны начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы не будет отображаться на экране.
Комментарии обычно используются авторами документа для заметок, предназначенных только для собственного использования. Заметим, что текст комментариев не отображается на экране браузера, однако передается вместе с документом и вполне может быть просмотрен читателями. Большинство браузеров предоставляют возможность просмотра исходного кода документа. Поэтому не следует включать в комментарии информацию, не предназначенную для чужих глаз. Это замечание может оказаться важным для разработчиков-программистов, привыкших писать комментарии в своих программах. Дело в том, что комментарии в программах, написанных на большинстве языков программирования, не попадают в результирующий код программы, получаемый в результате ее компиляции. Исходные же коды программ обычно хранятся только у авторов. Для языка же HTML нет понятия компиляции.
Комментарии в HTML применяются также для того, чтобы "спрятать" от браузера скрипты в случае, если он не в состоянии распознать их. Этот вопрос освещается во второй части книги.
Существует еще один тэг-контейнер для записи комментариев - <COMMENT>. Этот тэг используется редко.
Ссылки на другие документы и файлы
Одним из важнейших понятий для HTML-документов являются ссылки. Само название - HTML, язык разметки гипертекста, указывает на принцип организации таких документов. Вы, наверное, уже обратили внимание на ссылки, часто использующиеся в этой книге. Они выполняют ту же роль, что и ссылки на Web-странице, хотя и далеки от последних с точки зрения технического совершенства. Они относят вас к разделу книги, который может быть полезен именно в данный момент. Без этих ссылок вам бы пришлось долго перелистывать книгу в поисках нужной информации.
Значение ссылок в мире Интернета трудно переоценить. Читая книгу, вы имеете ее всегда под рукой. Работая в Web-пространстве, вы часто понятия не имеете, где находится та или иная нужная вам страница. Поэтому ссылки здесь являются единственной возможностью перейти от одного документа к другому.
Гипертекстовый документ — это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Часто подобные ссылки можно увидеть и в файлах помощи современных программных продуктов. За основу гипертекста взят принцип организации энциклопедических словарей, в которых многие статьи содержат ссылки на другие.
Организация ссылок
Ссылка состоит из двух частей. Первая из них — это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Ниже рассмотрены правила построения отдельных элементов ссылок.
Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя.
Указатели в виде текста обычно представляют собой слово или несколько слов, выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.
<А HREF="example .html"> указатель ссылки </А>
В качестве ссылки можно использовать графическое изображение. По принципу действия графические ссылки ничем не отличаются от текстовых. Они не подчеркиваются и не выделяются цветом, а для их выделения браузеры обычно вокруг такого изображения рисуют рамку.
<А HREF="example.html"> <IMG SRC="picture.gif "> </A>
Второй частью ссылки является URL-адрес. Это не что иное, как адрес Web-страницы, которая будет загружена при щелчке мышью на указателе. Указание адреса может быть относительным или абсолютным.
Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу ,то относительный указатель подразумевает подкаталог, расположенный на той же машине.
Относительные указатели удобны в использовании. Намного проще вставить только имя файла, а не весь длинный URL-адрес. Они также позволяют вам перемещать файлы в пределах вашего сервера без больших изменений в межстраничной адресации.
URL-адрес, полностью определяющий компьютер, каталог и файл, называется абсолютным. В отличие от относительных, абсолютные указатели могут ссылаться на файлы, расположенные на других компьютерах.
Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь. Оба действия выполняются при помощи тэга <А>.
Тэг <А>
Тэг <А> имеет атрибут HREF, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </А>.
Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тэг <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <BASE> отсутствует, то адресация строится относительно адреса текущего документа.
Внутренние ссылки
Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.
Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра NAME тэга <А>. При этом параметр HREF не используется, и браузер не выделяет содержимое тэга <А>.
<A NAME=chapter_5> </A>
Обратите внимание, что в приведенном примере отсутствует содержимое тэга <A>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.
После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре HREF адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.
<А HREF="#chapter_5">chapter 5</A>
Теперь, если пользователь щелкнет кнопкой мыши на словах "chapter 5", браузер выведет соответствующую часть документа в окне просмотра.
Кроме того, ссылаться можно на любые тэги, имеющие атрибут id.
Ссылки на документы различных типов
Когда пользователь щелкает мышью на ссылке, указывающей на другую Web-страницу, она выводится непосредственно в окне браузера. Если же ссылка указывает на документ иного типа, программа просмотра принимает документ и затем решает, что с ним делать дальше. Следующими действиями браузера могут быть:
- Браузер знает этот тип документа и умеет с ним обращаться. Например, если вы создали ссылку на графический файл формата GIF и пользователь щелкнул мышью на этой ссылке, его программа просмотра очистит окно и загрузит указанное изображение. В некоторых случаях браузер может дополнительно использовать подключаемый программный модуль (plug-in), без которого задача не была бы решена.
- Браузер не распознает тип принятого документа и не знает, что с ним делать дальше. В этом случае он обратится к вспомогательным программам, имеющимся на машине пользователя. Если подходящая программа найдется, браузер запустит ее и передаст ей полученный документ для обработки.
Списки
В языке HTML предусмотрен специальный набор тэгов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных как в электронных документах, так и в печатных. Со списками мы встречаемся практически ежедневно, — это может быть список необходимых покупок в магазине, учеников в классе или просто дел, которые необходимо выполнить. Возможность организации списковых структур имеется во многих текстовых редакторах, в частности, мощный текстовый процессор Microsoft Word обладает удобными средствами форматирования списков различного вида. Приведем ряд случаев, для которых использование списков довольно удобно:
- объединение фрагментов информации в единую структуру для придания удобочитаемого вида;
- описание сложных пошаговых процессов;
- расположение информации в стиле оглавления, пункты которого указывают на соответствующие разделы документа.
В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений. Для реализации списков различных типов используются следующие тэги: <UL>, <OL>, <DL>. С помощью различных типов встроенных в документ списков могут быть реализованы самые разные возможности, описанию которых и посвящена данная глава. Рассматриваются особенности построения списков различных типов, а также применения вложенных друг в друга списков.
Маркированный список
Одним из типов списков, реализованных в языке HTML,является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <ul>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).
В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка.
Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.
Тэг <LI>
Для создания маркированного списка необходимо использовать тэг-контейнер, к примеру <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <р> или принудительного перевода строки <BR>.
Каждый элемент списка должен начинаться тэгом <li> (LI — List Item, элемент списка). Тэг <li> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
Пример маркированного списка:
<p> Самые кассовые фильмы: <UL> <li> Аватар </li> <li> Титаник </li> <li> Властелин колец: Возвращение короля</li> <li> Пираты Карибского моря: Сундук мертвеца</li> </UL> </p>
Тэг <OL>
Тег <OL> (Ordered List) служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида.
Пример:
<p> Самые кассовые фильмы: <OL> <li> Аватар </li> <li> Титаник </li> <li> Властелин колец: Возвращение короля</li> <li> Пираты Карибского моря: Сундук мертвеца</li> </OL> </p>
В данной лекции указан далеко не полный перечень HTML - тэгов. Более подробную информацию, а также примеры можно по адресу http://www.htmlbook.ru/html/