Основы HTML

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

Наверняка вы обращали внимание, что адрес сайта начинается с непонятных букв HTTP://. Это указание протокола, по которому передаются данные в сети интернет. HTTP - Hypertext Transfer Protocol - как видно из его названия, оптимизирован для передачи гипер-текста, текста с указаниями правил его форматирования. А сам текст должен добыть оформлен по определенным правилам, чтобы любой интернет-браузер мог его понять и правильно отобразить, другими словами написан на языке HTML - HyperText Markup Language.

Я не буду перепечатывать полные описания HTML, они свободно доступны в интернет: сделать самое хорошее описание языка вряд ли получится, а делать хуже не хочется. Это занятие бессмысленное и бесполезное. Я дам лишь кратное описание основных моментов, которые, тем не менее, дадут вам начальное представление о языке разметки и позволят начать создавать сайты.

Как видно из названия HTML является языком разметки текста и состоит из непосредственно самого текста и правил его форматирования. Правила форматирования, оформляются с помощью специальных элементов разметки (тегов), которые можно разделить управляющие (полные или неполные) и символьные.

Полные элементы разметки состоят из открывающего и закрывающего тегов, обрамляющих фрагмент текста, к которым они применяются.

Неполные элементы разметки состоят из одного тега, к ним относятся, например, перевод строки, горизонтальная линия.

Символьные элементы разметки служат для вставки в текст некоторых специальных символов. Например, управляющие теги заключаются в угловые скобки, чтобы не возникало путаницы, для вставки в текст непосредственно угловых спобок используются символьные теги "<" и ">". Наиболее часто встречаемые символьные элементы приведены в таблице:

&quot	"
&amp	&
&lt	<
&gt	>
&nbsp	пробел
&copy	©
&reg	®
&plusmn	±
&laquo	<
&raquo	>

Неполные элементы разметки - теги не требующие завершающего тега, используются для вставки в текст каких-либо элементов. Хоть это и не требуется, рекомендуется явно указывать, что тег не требует закрывающего элемента, например, <br />". Наиболее часто встречаемые элементы приведены в таблице:

img	вставка рисунка
br	перевод строки
hr	горизонтальная линия

Полные элементы разметки - теги, обрамляющие фрагмент текста, к которому применяется форматирование. Такие элементы разметки формируются двумя тегами, открывающим и закрывающим: <тег>...</тег>. Наиболее часто встречаемые элементы приведены в таблице:

p	абзац
h1, h2...	заголовки
table	таблица
tr	строка таблицы
td	ячейка таблицы
ul, ol	список
li	элемент списка
font	шрифт
span	строчный элемент
div	блочный элемент

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

Программы для написания HTML

Поскольку HTML - это обычный текст, то писать его можно в совершенно любой программе.

Кто-то пишет в редакторе Dreamweaver. Безусловно, он удобен из-за подсветки синтаксиса.

Лично я предпочитаю простенький бесплатный FrontPage Express, в котором пишу основу документа, заготовку, которую потом "довожу до ума" в блокноте. Почему? Ну вот так. Как и любой редактор, FrontPage Express оставляет в документе много лишнего, без чего страница будет только быстрее загружаться, не потеряв ни в качестве, ни в информативности.

Но упаси вас Бог делать HTML-документы в MS Word! Он сохранит в документе все форматирование, что-то поменять потом будет очень проблематично.

Структура HTML-документа

<html>

</html>

Файл HTML состоит из двух основных блоков - заголовок и содержимое. В блоке <head></head> располагаются служебные комманды, которые не выводятся на экран, зато дают браузеру и поисковым машинам служебную информацию о документе, которая помогает правильно отобразить и индексировать его. Внутри контейнера <body></body> расположенна вся информация, которую необходимо вывести на экран.

Я приведу описание лишь основных тегов разметки и их наиболее часто используемые дополнительные атрибуты. Полное описание всех тегов HTML займет слишком много времени и, по сути, бессмысленно.

Блок заголовка

Внутри контейнера <HEAD> могут располагаться:

TITLE (заголовок страницы)
BASE (каталог для сайта по умолчанию)
LINK (ссылки страницы)
SCRIPT (скрипты)
STYLE (внутренние стили)
META (служебные теги)

Title - заголовок страницы. Он играет огромную роль в индексировании страницы поисковыми машинами. Именно заголовок страницы используется в качестве ссылки в строке выдачи результата поиска. Никогда не забывайте придумывать для каждой страницы уникальный тег заголовка.

Base - задание базового каталога. Как правило, базовый каталог - это корневая папка сайта. При необходимости его можно переопределить <BASE HREF="/html">, что будет означать, что базовый каталог - не когневой, а папка HTML.

Link. Служит для построения дополнительных, постоянных внешних связей документа, например, с таблицами стилей:

В приведенном примере REL определяет тип связи между документами, а TYPE определяет тип подключаемого документа. Для разных типов документов существуют разние методы интерпретации, поэтому следите за правильностью ввода. кроме того, в ряде случаев, например, при подключении таблиц стилей для чужих файлов скриптов может понадобиться указать кодировку для правильного отображения русских букв.

Script служит для использования и загрузки скриптов:

В примере TYPE определяет тип подключаемого документа, SRC - расположения файла скрипта, CHARSET - кодировку для правильного отображения русских букв. Второй скрипт позволяет написать некоторый код, если он используется только на этой странице. Это может понадобиться, например, для выполнения каких-либо действий после загрузки страницы - начала загрузки файла и т.п.

Style позволяет задать внутреннюю таблицу стилей внутри тела html документа. Этот метод уже мало где используется, как правило, стили сохраняются в файлах и полключаются в теге LINK.

<STYLE TYPE=text/css>
..описание стилей..
</STYLE>

Meta. Мета-теги содержат служебную информацию о документе.

Данный мета-тег указывает тип и кодировку документа: content="text/html" указывает, что текущий документ содержит текстовую информацию на языке HTML, charset="windows-1251" указывает кодировку документа. Данный мета тег позволяет браузерам отображать документ максимально корректно. Данный мета тег по праву можно считать наиболее важным тегом описания документа.

Мета тег перезагрузки страницы, content="5" задает время задержки перед перезагрузкой равным 5 секундам, url="url.htm" указывает адрес страницы, которая будет загруженна.

Краткое описание (аннотация) страницы. Используемое поисковыми машинами для составления краткого описания страницы, расположенного под заголовком.

Список используемых на странице ключевых слов. Используется поисковыми системами для классификации страниц, хотя в настоящее время актуальность данного тега сведена к минимуму.

Этот мета тег указывает на статичность или динамичность страницы. В данном случае указывает на динамичность страницы.

В тегах указываются автор и авторские права.

Блок содержимого

В блоке <BODY></BODY> расположенна вся информация, которую необходимо вывести на экран.

С помощью атрибутов background и bgcolor вы можете задать для страницы фоновое изображение или цвет фона.

Для форматирования текста используются теги

<STRONG>важный<STRONG>
<B>жирный</B>
<EM>значимый</EM>
<I>наклонный</I>
<U>подчеркнутый</U>
<S>~~зачеркнутый~~</S>
<FONT> - задание шрифта

При отображении на странице форматирование тегами STRONG и B, EM и I не различаются, но имеют значение для поисковых машин.

Дополнительные параметры тега FONT могут принимать значения size="1" (размер), color="red" (цвет). Цвет может задаваться либо символьным значение (например, red - красный, blue - синий), либо шестнадцатиричным значением (например, #FF0000 - красный, #0000FF - синий, #000000 - черный, #FFFFFF - белый), где первые 2 знака указывают насыщенность красной, вторые - зеленой, третьи - синей составляющих цвета.

Основные элементы, из которых состоит страницы

H - заголовки
P - абзацы
TABLE - таблицы
UL, OL - списки
IMG - рисунки
SPAN, DIV - блоки
FRAME, IFRAME - фреймы

Разделители

Тег <HR /> используется для построения горизонтальной разделительной линии. С помощью атрибутов align, size и width вы можете задать привязку линии, ее размер и толщину, а параметром color - цвет.

Заголовки

Заголовки - это, по сути, абзацы, используемые для более наглядного форматирования текста. Может быть несколько уровней заголовков H1 - заголовой первого уровня, H2 - заголовой второго уровня, H3 - заголовой третьего уровня... Например, заголовок главы, раздела, параграфа.

<H1>Заголовок</H1>

Абзацы

Абзацы служат для разделения фрагментов текста. Если текст не вмещается по ширине области вывода, он будет автоматически перенесен на новую строку. При этом встречаемые в тексте переводы строк не учитываются. Для вставки текста "как есть" используйте теги <PRE></PRE>, переводы строк в тексте будут сохранены.

Если вы не хотите, чтобы текст переносился на новую строку, заключите его в теги <NOBR></NOBR>, в этом случае, текст не будет переноситься, даже если он не вмещается по ширине.

<P ALIGN="center">абзац с выравниванием по центру</P>

Для вставки в текст принудительного перевода строки без завершения абзаца используется тег <BR />.

Для форматирования абзаца вы можете использовать дополнительные атрибуты, например, align с возможными значениями left - выравнивание по левому краю, right - по правому краю, center - по центру, justify - по ширине.

Здесь я сделаю ремарку, относящуюся ко всем в дальнейшем описываемым дополнительным параметрам тегов. Использование дополнительных параметров считается устаревшим и не рекомендуется к использованию. Для задания параметров следует использовать форматирование с использованием стилей.

<P CLASS="center">абзац с выравниванием по центру</P>
<P STYLE="text-align: justify;">абзац с выравниванием по центру</P>

Списки

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

"A"- большие заглавные буквы (A, B, C ...)
"a" - малые буквы (a, b, c ...)
"I" - большие числа римского алфавита (I, II, III ...)
"i" - малые числа римского алфавита (i, ii, iii ...)
"1" - простые числа арабского алфавита (1, 2, 3 ...)

Элементы списка обрамляются тегами <LI></LI>

<OL type="I" start="2">
<LI>элемент 1</LI>
<LI>элемент 2</LI>
<LI>элемент 3</LI>
</OL>

элемент 1
элемент 2
элемент 3

Изображения

Для вставки на страницу файла с изображением используется тег <IMG>, с обязательным атрибутом src, который будет указывать на файл с изображением. Обратите внимание, что расположение файла задается отнисительно корневой папки сайта, поэтому написание src="с:\images\cat.jpg" недопустимо!

Дополнительные параметры тега <IMG> могут задавать размеры, sотступы от обтекающего текста (hspace и vspace) и размещение текста вокруг рисунка (align, может принимать значение right, left, top, bottom, middle).

<IMG src="images/cat.jpg" width="67" height="57" align="left" border="10" />текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Гиперссылоки

Гиперссылки в HTML необходимы для связи различных документов, как в пределах одного сайта, так и в пределах всей сети интернет. Для создания гипертекстовых связей (гиперссылок) используется тег <A></A>:

<A href="адрес_документа">текст ссылки</A>

При помощи атрибута href передается адрес документа, на который указывает ссылка.

В качестве гиперссылок могут выступать самые разнообразные объекты, в том числе изображения:

Стоит обратить внимание, что при оформлении изображения в виде гиперссылки вокруг него отображается некрасивая рамка, убрать которую можно, задав для изображения параметр border="0".

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

Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход просто произойдет на начало документа, при этом не возникнет никаких ошибок.

Гипертекстовые связи могут осуществляться по множеству протоколов. Наиболее часто используемые представленны ниже:

HTTP - стандартный протокол гипертекстовых связей, предназначенный для разовой передачи блоков информации
HTTPS - защищенный протокол, предназначенный для передачи защифорованной информации
FTP - универсальный протокол передачи файлов
MAILTO - стандартный протокол передачи почты

Атрибут target, тега <A> определяет как откроется новая страница и принимает следующие значения:

_self - документ откроется в текущем окне
_parent - во фрейме - родителе текущего фрейма
_top - в главном окне всей фреймовой структуры
_blank - документ откроется в новом окне

Таблицы

Таблицы формируются тегами <TABLE></TABLE>, строки таблицы - тегами <TR></TR>, ячейки - тегами <TD></TD>.

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR align="center">
<TD>ячейка 1</TD> <TD>ячейка 2</TD>
</TR>
<TR>
<TD>ячейка 1</TD> <TD>ячейка 2</TD>
</TR>
<TABLE>

Дополнительные атрибуты тега <TABLE>: align (выравнивание, может принимать значения left, right, center), border (ширина рамки), width (ширина, может задаваться в пикселях или процентах от ширины области вывода), cellpadding (отступ текста от границ ячейки), cellspacing (расстояние между ячейками), bgcolor (цвет фона), background (фоновое изображение).

Дополнительные параметры тега <TR>: align (выравнивание, может принимать значения left, right, center), valign (выравнивание по вертикали, может принимать значения top, bottom, middle, baseline), height (высота строки), bgcolor (цвет фона), background (фоновое изображение)

Дополнительные параметры тега <TD>:

align (выравнивание, может принимать значения left, right, center), valign (выравнивание по вертикали, может принимать значения top, bottom, middle, baseline), bgcolor (цвет фона), background (фоновое изображение), bordercolor (цвет рамки), colspan (объединяет горизонтальные ячейки), rowspan (объединяет вертикальные ячейки), height (высота ячейки, влияет на высоту строки), width (ширина ячейки, может задаваться в пикселях или процентах от ширины таблицы), nowrap (запрещает перенос строк).

Блоки

Теги <SPAN></SPAN> и <DIV></DIV> задают строковые и блочные фрагменты.

С помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца можно изменить цвет и размер первой буквы.

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

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

Фреймы

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

Для тега <FRAMESET> могут быть заданы параметры border (ширина границы между фреймами), bordercolor (цвет границы), cols (ширина или пропорции фреймов в виде колонок), rows (размер или пропорции фреймов в виде строк).

Для тега <FRAME> задаются параметры src (путь к файлу для занрузки во фрейм), bordercolor (цвет линии границы), frameborder (отображать ли рамку вокруг фрейма), name (уникальное имя фрейма для доступа к его содержимому из других элементов страницы), noresize (запрещает изменение размера фрейма), scrolling (задает отображение полосы прокрутки во фрейме, может принимать значения "auto", "no" или "yes".

Если фреймы в блоке <FRAMESET> образуют одну страницу, то тег <IFRAME></IFRAME> позволяет загружать в область страницы независимые страницы.

Параметры тега <IFRAME>: src (путь к файлу для занрузки во фрейм), align (определяет как фрейм будет выравниваться на странице, а также способ обтекания его текстом), allowtransparency (устанавливает прозрачный фон фрейма, через который виден фон страницы), height, width (задают размены фрейма), hspace, vspace (отступы от фрейма до окружающего контента), marginheight, marginwidth (отступы сверху/снизу и слева/справа от содержания до границы фрейма), scrolling (способ отображения полосы прокрутки во фрейме), name (уникальное имя фрейма)

Использование фреймов не рекомендуется, так как они плохо обрабатываются поисковыми системами. По возможности, если это не необходимо, постарайтесь не использовать фреймы.

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

В следующей статье пойдет речь об использовании форм для обеспечения взаимодействия пользователя и сайта.