Учебник HTML : структура web страницы) (стр. 2 )

Форматирование HTML документа. Теги P, DIV, BR, HR и другие.

Любые тексты, будь то школьное сочинение, заметка в газете или техническое описание устройства имеют определённую структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и т. д. HTML-документы не являются исключением из этого правила.

Простейшее форматирование HTML-документа можно разбить на два раздела :

"Форматирование HTML - документа" - т. е. представление всего текста на экране монитора. Сюда входит работа с абзацами, строками, центрирование текста; "Форматирование текста" - непосредственно работа с текстом, установление шрифта, цвета, размера, отображение текста наклонным, полужирным и т. д.;

Также будет раскрыта более сложная тема - логическое форматирование текста, т. е. выделение логически значимых частей текста.

<P> </p>
Элемент абзаца (paragraph) - один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент P обозначает конец предыдущего и начоло следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу удобно обозначить конец абзаца. В некоторых случаях удобно ставить стартовый тег в конце строки: он не только укажет конец абзаца, но и выполнит функцию элемента <BR> (разрыв строки). Например:

<P> Текст первого абзаца.

<P> Текст второго абзаца. </p>

Текст третьего абзаца. <P>

Вместе с элементом P можно использовать атрибут выравнивания align:

align="left" - выравнивание по левому краю;
align="center" - выравнивание по центру;
align="right" - выравнивание по правому краю;
align="justify" - выравнивание по ширине;

Абзацы форматируются броузером, и их вид зависит, в частности, от размера окна программы.

Два следующих элемента позволяют внести некоторую определённость в форматы абзацев.

<BR>
Элемент, обеспечивающий принудительный переход на новую строку. Он имеет только стартовый тег. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

<NORB> </norb>
Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключённый между его тегами, будет выведен в одну строку. Длинная строка не уместится на экране и для ее просмотра придётся использовать горизонтальную полосу прокрутки.

<BLOCKQUOTE></blockquote>
Обозначение цитаты. Этот элемент требует наличия конечного тега. Текст не претерпивает никаких изменений, но абзац распологается с отступом.
Пример:
Текст без отступа.

Текст с отступом.

<CENTER> </center>
Элемент для центрирования текста, а точнее, любого содержимого (рисунка, таблицы, списка и т. д.).

<DIV> </div>
Элемент, похожий на предыдущий. Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:

align="left" - выравнивание по левому краю;
align="center" - выравнивание по центру;
align="right" - выравнивание по правому краю;

<H1></h1>
Элемент заголовка. Существует шесть уровней заголовков, которые обозначаються H1...H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый мелкий заголовок. Представление об относительных размерах иожно увидеть на странице-примере. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align="left" - выравнивание по левому краю;
align="center" - выравнивание по центру;
align="right" - выравнивание по правому краю;

<HR>
Элемент создающий горизонтальную линию. Горизонтальная линия (horizontal rule) - очень часто используемый элемент. Во-первых, потому, что с его помощью очень удобно делить страницу на части. Во-вторых, выбор таких элементов страницы у автора очень небольшой. Действительно в HTML практичеки отсутствуют подобные конструкции, а вот для горизонтальной линии почему-то было сделано исключение. Правда, несмотря на некоторую скупость языка в этой области, можно придумать немало стандартных графических образов, которые разнообразили бы вид страниц.
Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

align="left"
align="center"
align="right"

Можно задать толщину линии:

size="Толщина в пикселях"

Можно управлять длиной линии:

width="Длина в пикселах"
width="Длина в процентах"

Можно выбирать цвет:

color="Цвет"

Вот образец выполнения кода <hr align="right" width="50" size="50" color="red">:

Создание гиперссылок. Тег A. Внутренние ссылки.

Одним из важнейших понятий в HTML документе являются ссылки. Значение ссылок в мире Интернет трудно переоценить.

Организация ссылок.

Ссылка состоит из двух частей. Первая из них это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адресс). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.

Указатели бывают двух типов - текстовые и графические. Проще говоря, ссылкой может быть слово, предложение, абзац или картинка.

Текстовые указатели по умолчанию выделяются подчёркиванием. Хотя данные настройки могут быть изменены. На этом сайте, например, ссылки становятся подчёркнутыми только при наведении на них указателя мыши.

Приведём пример записи текстового указателя ссылки:

<A href="html_04_01.php">Ссылка на эту же страницу</a>

В качестве ссылки можно использовать графическое изображение. По принципу действия графические ссылки ничем не отличаются от текстовых. Они не подчёркиваются и не выделяются цветом, а для их выделения браузер обычно вокруг такого изображения рисует рамку.

Пример графического указателя ссылки:

<A href="html_04_01.php"><IMG src="picture. gif"></a>

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определения местоположения файлов выполняется с учётом местоположения документа, в котором имеется такая ссылка.

Тэг <A>.

Этот тэг имеет параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо указывать закрывающий тэг </a>:

<A href="URL-адрес">текст ссылки</a>

Внутренние ссылки.

Кроме ссылок на другие документы, часто полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.

Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите создать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <A>. При этом параметр href не используется, и браузер не выделяет содержимое тэга <A>. Например:

<A name="chapter_5"> </A>

Обратите внимание, что в приведённом примере отсутствует содержимое тэга <A>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.

После того как место назначения определено, можно приступать к созданию ссылки на него. Для этого, вместо указания в параметре href адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка.

<A name="#chapter_5">Глава 5</A>

Теперь если пользователь щёлкнет кнопкой мыши на словах "Глава 5 ", браузер выведет соответствующую часть документа в окне просмотра. Такой механизм реализован на странице Создание списков, в меню "Быстрый переход по странице".

Маркированный список.

Иначе списки такого типа называют неупорядоченными (формальный перевод названия соответствующего тэга <UL> - Unordered List).
В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется броузером, причём при создании вложенных списков броуреры автоматически разнообразят вид маркеров различного уровня вложенности.

Тэги <UL> и <LI>.

Для создание маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которог располагаются все элементы списка. Каждый элемент списка должен начинаться тэгом <LI> (LI - List Item, элемент списка). Тэг <LI> не нуждается в соответствующем закрывающем тэге, хотя и наличие его в принципе не возбороняется.

В тэге <UL> могут быть указаны два параметра: compact и type.

Параметр compact записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде. Например, может быть уменьшен шрифт или растояние между строчками списка и т. д.

Параметр type может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого броузера. Типичными вариантами отображения являются следующие:

type = "disc" - маркеры отображаюктся закрашенными кружками;
type = "circle" - маркеры отображаюктся не закрашенными кружками;
type = "square" - маркеры отображаюктся закрашенными квадратиками;

Значением используемым по умолчанию, является type="disc".

Параметр type с теми же значеиями может употребляться для указания вида маркеров отдельных элементов списка.
Пример записи: <LI type="circle">.

Нумерованный список.

Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <OL> (Ordered List), с помощью которого и организуются списки такого типа. Отличием от маркированных списокв является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер.

Тэги <OL> и <LI>.

Для создание нумерованного списка необходимо использовать тэг-контейнер <OL> </OL>, внутри которог располагаются все элементы списка. Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тэгом <LI>. Тэг <LI> не нуждается в соответствующем закрывающем тэге, хотя и наличие его в принципе не возбороняется.