HTML - это просто. Часть 1

Создание сайта – процесс несложный. Все, что для этого нужно, – свободное время, хотя бы немного художественных способностей и, само собой, знание языка, на котором пишутся Интернет странички, – HTML.

Немного теории
HTML1 – язык достаточно простой. Иногда его называют языком программирования, но это – не совсем верно. Да, процесс написания web-странички в чем-то сходен с созданием программы. Мы прописываем параметры, свойства и расположение объектов, определяем их значение, описываем различные алгоритмы. Но в результате мы получаем отнюдь не программу, а… особым образом структурированный текстовый файл, который и является нашей страничкой. Таким образом, HTML полностью оправдывает свое название – это язык разметки документа.

Тэги (Tags)
Тэги – это зарезервированные слова HTML, выполняющие функции разметки и форматирования содержимого нашей странички. Они всегда обрамляются символами «< » и «>». Встречая эти символы, браузер (Opera, Mozilla или IE) определяет, что слова, заключенные между ними, являются командами.
Тэги подразделяются на два типа – парные и одиночные.
Парные тэги ограничивают зону своего влияния. Например, для того, чтобы выделить участок текста жирным шрифтом, мы должны обрамить его тегами bold: текст. Первый тэг называется открывающим, второй — закрывающим. Обратите внимание, как пишется закрывающий тэг — после знака «< » всегда стоит знак «/». Парные тэги используются не только для форматирования текста и графики, но и для создания таблиц, ссылок, вставки картинок и многого другого.
Одиночные тэги являются независимыми, и прописываются один раз. Они используются реже, и их немного. Исключением, пожалуй, является <br> – тэг, сигнализирующий о необходимости начать новый абзац.

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

Первый шаг
Для того, чтобы понять принцип работы HTML, создадим текстовый файл и пропишем в нем следующие строки:
Теперь измените расширение вашего файла на «htm», и откройте его в вашем любимом браузере. Вот ваша первая страничка и готова. На ней — приветствие, выделенное жирным шрифтом, и некоторый текст. Как видно из примера, код странички состоит из непосредственно контента (текстового или графического наполнения) и тэгов.
Рассмотрим его содержание. Парные тэги <html> и <body> охватывает весь код вашей странички, и являются обязательными. Тэг <html> указывают браузеру, что документ необходимо воспринимать как htm-страницу, а в тэг <body> вписывается весь остальной код.
Следующий тэг, <title>, задает название страницы (оно будет отображаться в заголовке браузера). Он прописывается сразу же после открывающего тэга <body>. Если этот тэг отсутствует, в качестве названия страницы используется имя файла.
Переходим непосредственно к содержанию странички. Фраза «Доброго времени суток» заключена в тэги <b> и </b> – они отвечают за написание текста жирным шрифтом. После приветствия стоит уже знакомый нам тэг <br /> – текст «Это – моя первая страничка» начинается уже с новой строки.
Просто? Думаю, да.

Форматирование текста
Начнем с тэгов, отвечающих за стиль написания текста. К простым тэгам относятся:
<b> – написание жирным шрифтом;
<i> – написание курсивом;
<u> – подчеркивание текста;
<strike> – перечеркивание текста;
<small> – уменьшение текста на единицу;
<big> – увеличение текста на единицу;
<sup> – верхний индекс;
<sub> – нижний индекс.
Если необходимо применить дополнительные параметры шрифта, следует использовать составной тэг <font>. Параметры составного тэга прописываются внутри него через пробел. Тэг <font> может иметь следующие параметры:
face="Arial" – название шрифта;
size="2" – размер шрифта;
color="#008000" – цвет шрифта (в формате HEX).

Например, необходимо написать заголовок крупным шрифтом «Courier New» синего цвета. Прописываем:

<font face="Courier New" size="7" color="#3300FF">Заголовок</font>

Если вы хотите сделать текст жирным или курсивным, заключите слово «Заголовок» в соответствующие тэги.

Сделай паузу
На сегодня это всё. В следующей части мы рассмотрим работу с параграфами и научимся вставлять картинки.

Примечания
1 HTML (Hyper Text Markup Language) — язык разметки гипертекста.


Рекомендуем почитать: