HTML от А до Я / Введение в HTML

В первую очередь необходимо создать страницу (сайт) поэтому с этого и начнем. О содержании и оформлении сайта я говорить не буду, здесь каждый смотрит на это по своему. Поговорим о самой технологии простейшего HTML (аббревиатура Hyper Text Markup Language).

В самом теле HTML ничего кроме команд (в HTML они разделяются на понятия "Тэг" и "Параметры") и текста нет. Все рисунки, фотографии и прочую графику, которую вы можете видеть на сайтах, HTML-документ не содержит. Он содержит лишь ссылки на графические объекты. Сам HTML-документ это простой текстовый файл с расширением (типом) .htm или .html, который может редактироваться в обычном текстовом редакторе (например Notepad для Windows). Не забывайте, что в операционной системе UNIX, установленной на большинстве интернет-серверов, в названиях файлов важен регистр букв, в отличии от Windows. Например index.htm, Index.htm, index.HTM три разных файла.

Язык HTML создавался для интернет, как простейшее средство интерактивного общения. Основным его преимуществом перед обычными текстами является наличие ссылок. Они отличаются от основного текста например цветом. При клике на эту ссылку вы попадете на другую страницу.

Вот так и реализован основной принцип гипертекста.

HTML-документы могут иметь различную кодировку. Вы наверное уже сталкивались с подобной проблемой пытаясь открыть текстовый файл написанный в DOS простым редактором Windows. Появлялись нечитабельные символы вместо русских букв (кириллицы). С латинскими символами все в порядке в любой кодировке, они всегда стоят в определенном постоянном месте любой кодовой таблицы (от 0 до кода 127 все символьные таблицы одинаковы (в них знаки препинания и латинский алфавит, область от 128 до 255 отведена под национальные алфавиты), а кириллица в разных кодовых таблицах имеет разное положение. В интернет существуют 4 основных типа кодовых таблиц для русской кириллицы:

• DOS - использует кодовую таблицу DOS ASCII. В настоящее время почти не используется, как и сама DOS в чистом виде.
• Windows (win-cp1251) - использует кодовую таблицу Windows ANSI. В настоящее время наиболее распространена в интернет.
• KOI (koi8-r) - специальная кодовая таблица, разработанная для интернет. Она используется довольно широко, но работать с ней в Windows можно только в HTML-редакторах умеющих работать с различными кодировками (например FrontPage Express).
• ISO - многоязыковая кодовая таблица. Широкого распространения в России не получила.

Есть и другие кодировки, использующиеся не так часто (например UTF (Unix Text Format) почти как Windows, Mac (Macintosh)). Так или иначе, если вы будете писать HTML-документ в обычном текстовом редакторе, то его кодировка будет такая же, какую и использует этот редактор. Впоследствии готовые документы можно преобразовать в любой формат при помощи специальных программ-перекодировщиков.

Как уже говорилось выше HTML-документы могут содержать в себе только текст. Текст в специальной конструкции, которая и отличает HTML от обычного текста, называется тэгом. Вот конструкция тэга:

Рассмотрим эту конструкцию подробнее.

• < - символ начала описания
• tag - название тега берется не с потолка, а существует определенный список (нечто вроде команд в программе) воспринимаемый броузером (программой просмотра HTML). Если броузеру не известно название тега, то он проигнорирует его и на разметку станицы он не повлияет (все что внутри неизвестного тега будет отображено на экране, разумеется если там тоже не неизвестные теги). Название тега может состоять только из одного слова, так как после пробела начинается область параметров
• param= - параметр определяющий дополнительные условия. Совсем необязательно, что он есть в каждом описании. В некоторых его нет вообще, а в некоторых их несколько, разделенных пробелами
• value - значение параметра. Если оно состоит из одного слова или символа, то кавычки ставить необязательно. Кавычки могут быть заменены прямым апострофом '
• > - символ конца описания
• /tag - конец тега с соответствующим названием

Как видно из вышеописанного тело HTML-документа использует только определенный набор специальных символов. Конструкция тега может "ломаться" enter`ом, любым количеством пробелов (разумеется не в середине слова, броузер удалит все пробелы в серии кроме одного, так что выравнивать текст пробелами не получится) и табуляцией. Вид документа в броузере от этого не зависит. Для него символом перевода строки служит тег <br> (этот тег "неполноценный", у него нет окончания, а значит внутри него ничего не может быть), конец тега абзаца </p> или конец окна броузера (либо конец таблицы). Табуляции в HTML вообще нет, есть только отступ. А с лишними пробелами броузер поступает как я уже сказал. Существует специальный тег предварительного форматирования <pre>. Все, что внутри этого тега, будет отображено именно так как введено.

Существует способ отображения в HTML-документах спецсимволов. Просто они заменяются набором литер в конструкции "&;". Вот они:

• < - &lt;
• > - &gt;
• " - &quot;
• & - &amp;
• пустая строка - &nbsp;

Остальные символы пишутся в своем естественном виде. Хотя можно все символы писать ввиде их цифрового кода, например: &#59; означает символ ";" (или %59 если используется кодировка UTF-8), так же как например chr$(59) в бейсике. Но это важно в основном для HTML-документов выдаваемых программами.

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

Второй обязательный тег это <head> - "головка" документа. Внутри него описываются стартовые установки для броузера, но может не быть ничего, тогда используются установки по умолчанию. Например название <title>Название документа</title> вынудит броузер вставить в название окна текст "Название документа". Здесь же описываются мета-переменные. Например <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> указывает броузеру кодировку HTML-документа. В нашем примере это Win-1251. Тег <meta> тоже не имеет конца, как и <br>, все ограничивается его параметрами.

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

После окончания тега </head> начинается то, что должно быть отражено на экране. Все это находится в теге <body>. Данный тег может иметь параметры, цвет фона (и)или фоновую картинку, стандартный цвет текста, стандартные цвета ссылок (цвет ссылки, цвет просмотренной ссылки, цвет активной ссылки) и т.п. Какие параметры не указаны, те устанавливаются по умолчанию из настроек броузера. Например в большинстве случаев цвет фона - белый, цвет текста - черный, цвет ссылки - синий, цвет просмотренной ссылки - фиолетовый, цвет текущей ссылки - красный. Вообще большинство неуказанных параметров заменяются броузерами на свои установки по умолчанию.

Кстати цвета в HTML удобнее указывать шестнадцатеричными числами. Перед числом цвета ставится символ "#". Например #FFFFFF - белый, а #000000 - черный.

Теперь мы с вами можем создать простейшую интернет-страницу. Например:

Данный документ будет выглядеть приблизительно так:

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

Начинающие могут использовать в качестве редактора Word начиная с 97, но он не очень удобен. Неплохой HTML-редактор FrontPage Express входящий в стандартную поставку Windows 95 последних изданий и выше. Вы можете скачать профессиональный HTML-редактор FrontPage.

Если используете в качестве редактора Notepad или Write, то вам может потребоваться перекодировщик текста.

Вы можете создавать страницы разделенные на фреймы. Фреймы - это разделенное на подокна окно броузера. Каждое такое подокно это отдельный HTML-документ. Об этом вы можете почитать здесь.