Разметка текста средствами HTML

Для разметки текста используются специальные сочетания символов - "тэги" (tag - ярлычок, этикетка). Тэг - это последовательность букв латинского алфавита, заключенная между символами

< и > (открывающий тэг) или </ и > (закрывающий тэг).

Например, <html> - открывающий тэг, </html> - закрывающий тэг.

При использовании тэгов необходимо соблюдать следующие правила:

тэги записываются в скобках < >
прописные и строчные буквы не различаются;
тэги используются парами (открывающий, закрывающий) или поодиночке;
пара "открывающий - закрывающий" тэги называется контейнером;
если тэг используется в паре, то его действие распространяется от начального тэга до конечного или до конца документа;
конечный тэг после левой скобки "<" содержит / (слэш );
тэги могут иметь атрибуты (свойства), которые используются по оговоренным правилам;
одиночный тэг действует до следующего тэга или до конца документа.

Активный пример:

Первый HTML-документ

Примечание к использованию активного примера.

Методы создания Web-документов описываются с помощью Web-документов. Поэтому, в дальнейшем, мы будем использовать активные примеры, в которых будут работать описанные методы. С непосредственным применением методов можно познакомится, просмотрев текст документа через "Блокнот".

Основные тэги

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

<a>...</a>

(англ.: anchor - якорь) для создания гиперссылки.

Атрибуты	Назначения	Примеры
name	Задает имя элемента	<a name="имя" >
href (hyper+ reference)	Задает имя ссылки: URL-адрес документа; значение name на который должен перейти пользователь внутри документа; значение name на которое должен перейти пользователь внутри документа по некоторому URL-адресу; почтовый адрес.	<a href="http://WWW.csu.ac.ru/~rusear/"> <a href="#имя"> <a href="http://WWW.csu.ru/Main.htm#имя"> <a href="mailto:rudakov@csu.ru">
title	Всплывающая подсказка	<a title="Что это?">
target	Окно , в которое будет загружен указанный документ.	Если этот атрибут опущен или target="_self" , новый документ будет открыт в том же окне, что и текущий. Значение атрибута target="_blank" приведет к открытию нового документа в новом окне.

Замечание 1.

Значение атрибута href можно указать как абсолютный путь или как относительный путь. Указание в гиперссылке абсолютного пути создает трудности переноса документов из одной папки в другую. Указание относительного пути предпочтительнее, т.к. облегчает перенос набора документов из одной папки в другую. Например, не понадобиться изменение ссылок при переносе подготовленных на домашнем компьютере страниц сайта на сервер. Формирование относительных ссылок происходит по правилам, действующим в операционной системе, перехода к документам.

Примеры указания относительных путей в значении атрибута href.

Ссылка на файл, который находится в той же папке, что и текущий:
<a href="Imya.htm">Ссылка на файл Imya.htm в этой же папке </a> .
Ссылка на файл Imya.htm, который находится в папке с именем Folder, вложенной в папку с текущим файлом:
<a href="Folder/Imya.htm">Ссылка на файл Imya.htm в папке Folder</a>.
Ссылка на файл Imya.htm, который находится в папке, которая содержит "текущую" :
<a href="../Imya.htm">Ссылка на файл Imya.htm, который находится в папке, которая содержит "текущую"</a>.
Ссылка на файл Imya.htm, который находится в папке Folder, вложенной в папку, содержащую "текущую" :
<a href="../Folder/Imya.htm">Ссылка на файл Imya.htm, который находится в папке Folder, вложенной в папку, содержащую "текущую" </a>.
Чтобы подняться на уровень выше используем "../", чтобы поднятся на два уровня выше используем "../../" и т.д.

Замечание 2.

В HTML-редакторах есть "мастера", которые автоматически определяют относительный путь к выбранному файлу с помощью кнопки "Обзор".

Активный пример: свойства атрибута name.

<IMG>

Тэг <img> служит для вставки рисунка на странице и поддерживает форматы файлов GIF, JPG, JPEG, PNG.

Атрибуты	Назначения	Примеры	Код примера
src	Обязательный атрибут, указывающий URL рисунка		<img src="pictures/0.GIF" width="37" height="38">
align	Выравнивание: left по левому краю; right по правому краю; center по центру; bottom по нижнему краю; middle по середине; top по верхнему краю.		<img src="pictures/1.GIF" width="37" height="38" align="left"> <img src="pictures/2.GIF" width="37" height="38" align="right"> <img src="pictures/3.GIF" width="37" height="38" align="center"> <img src="pictures/4.GIF" width="37" height="38" align="bottom"> <img src="pictures/5.GIF" width="37" height="38" align="middle"> <img src="pictures/6.GIF" width="37" height="38" align="top">



alt	Выводит текст к картинке. Полезно, если браузер не отображает графику на странице		<img src="pictures/7.GIF" width="37" height="38" alt="Цифра семь (так пишут чехи)">
bolder	Толщина рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения		<img src="pictures/8.GIF" width="37" height="38" border="0"> <img src="pictures/9.GIF" width="37" height="38" border="10">
height	Высота картинки в пикселах или процентах. Желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером		<img src="pictures/AKULA.GIF" width="162" height="133" border="1"> <img src="pictures/AKULA.GIF" width="162" height="53" align="top" border="1">
width	Ширина картинки в пикселах или процентах. Желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером		<img src="pictures/AKULA.GIF" width="416" height="77" border="1">
hspace	Размер свободного места в пикселах слева и справа от изображения.		<img src="pictures/DANCFROG.GIF" width="144" height="96" hspace="20" border="1">
vspace	Размер свободного места в пикселах сверху и снизу от изображения.		<img src="pictures/DANCFROG.GIF" width="144" height="96" vspace="30" border="2">