Основные команды HTML

1. Общее введение

Команды языка HTML служат для разметки текста на логические элементы и называются тэгами (от англ. tag). Они пишутся маленькими латинскими буквами в угловых скобках "<" и ">".

Логические элементы, с точки зрения визуального представления, делятся на блочные и строчные. К блочным относятся, например, абзацы (параграфы), заголовки, списки и пункты списков, таблицы. Начало и конец блочного элемента визуально обозначены разрывами строк. К строчным из приведенных в нашем списке относятся только логические ударения (эмфазисы), гипертекстовые ссылки и вставляемые в документ объекты-картинки. При визуальном представлении на границах строчных элементов разрыв строк не производится.

Тэги делятся на тэги-контейнеры (их большинство) и пустые тэги (их относительно немного).

Тэг-контейнер состоит из пары команд, одна из которых указывает начало логического блока, а другая—конец. Обе команды выглядят одинаково, но у команды, обозначающей конец элемента, перед именем команды ставится косая черта "/". Например, тэг-контейнер <p>…</p> обозначает начало и конец параграфа.

Пустой тэг состоит только из одной команды. Например, пустой тэг <br> обозначает, что в данном месте надо сделать разрыв строки.

В тэге различают его имя, параметры (attributes) и значения параметров.

Например, в <a href="path/filename.ext">Текст ссылки</a>

a—имя тэга (от англ. anchor—якорь),

href—параметр, указывающий на то, что текст, содержащийся между <a> и </a> будет служить гипертекстовой ссылкой (hypertext reference),

path/filename.ext—значение параметра—имя файла filename.ext, расположенного по адресу path/, на который дана гипертекстовая ссылка.

2. Тэги, необходимый минимум

2.1. Определение типа документа:

<!doctype> указывается в самом начале, еще перед тэгом <html>…</html>. В нашем случае (HTML 4.01 в "строгом" варианте, т.е., соблюдая полное разделение логической разметки и графического дизайна) следует писать:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2.2. Три контейнера, задающих основные области документа:

<html>…</html> Начало и конец гипертекстового документа в целом.

<head>…</head> Начало и конец области заголовка документа (в этой области содержится информация, нужная машинам для правильной интерпретации документа)

<body>…</body> Начало и конец тела документа.

2.3. Тэги области <head>…</head>:

<title>…</title> Подробное название файла, оно видно в заголовке окна браузера.

2.4. Тэги области <body>…</body>:

2.4.1. Текстовые блоки: заголовки, абзацы, списки, таблицы и блочные цитаты:

<h1>…</h1>, <h2>…</h2>, …, <h6>…</h6> Заголовки, от первого до шестого уровней.

<p>…</p> Параграфы (абзацы) текста.

<ol>…</ol>, <ul>…</ul> Начало и конец списка с автоматической нумерацией пунктов (ordered list) и без нее (unordered list).

<li>…</li> Пункт списка.

<dl>…</dl> Начало и конец списка определений.

<dt>…</dt>, <dd>…</dd> Каждый пункт списка определений состоит из двух следующих друг за другом компонентов: определяемого термина (<dt>…</dt>) и определения (<dd>…</dd>).

<table>…</table> Начало и конец таблицы, таблица состоит из горизонтальных рядов.

<tr>…</tr> Начало и конец ряда данных, каждый ряд состоит из ячеек с данными (ячеек может быть одна или много).

<td>…</td> Начало и конец ячейки с данными.

<blockquote>…</blockquote> Начало и конец блочной цитаты (внутри этого тэга может располагаться один или более параграфов цитируемого текста). Визуально отображается как текст, напечатанный с отступом от левого края.

2.4.2. Эмфазис (логическое ударение)

<em>…</em> текст, содержащийся в этом тэге будет отображаться курсивом или в наклонном начертании.

<strong>…</strong> текст, содержащийся в этом тэге будет отображаться жирным шрифтом.

2.4.3. Гипертекстовая ссылка

<a href="path/filename.ext">…</a> начало и конец гипертекстовой ссылки на файл filename.ext, расположенный по адресу path/

2.4.4. Пустые тэги области <body>…</body>:

<br> жесткий разрыв строки. Он нужен, когда строку надо разорвать именно в этом месте, например, в стихах.

<hr> горизонталный разделитель. Отображается как горизонтальная черта на экране. Удобно использовать как дополнительный логический эмфазис на границах смысловых разделов в длинных документах.

<img src="path/filename.ext" alt="…" title="…"> вставка картинки filename.ext, расположенной по адресу path/. Если картинка не загружается, то на ее месте появится рамка с замещающим текстом—значением параметра alt. При наведении мыши на картинку будет всплывать подсказка с названием картинки, значение которой берется из параметра title.

<!-- текст комментария --> комментарий. Не отображается при просмотре браузером, но виден при просмотре html-кода страницы, обычно в нем пишут всякие важные примечания для тех, кто пишет код.

3. Пример простейшего гипертекстового документа

Документ находится в файле example2.html. В нем есть кое-какие тэги из тех, что мы только что рассмотрели. В коде обратите внимание на взаимное расположение <!doctype>, областей <html>…</html>, <head>…</head> и <body>…</body>, а также <ul>…</ul> и <li>…</li>. На картинке (копии окна браузера) обратите внимание на то, где оказался текст из <title>…</title>, как отображаются пункты списка, <blockquote>…</blockquote>, <em>…</em>, <strong>…</strong> и <hr>, каково действие <br>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head><title>Пробный файл для демонстрации основных тэгов HTML</title></head>

<body>

<h1>Заголовок первого уровня</h1>

<p>Задача этого параграфа, среди прочего,--показать, как выглядят <em>эмфазис</em> и

<strong>сильный эмфазис</strong>. Следующий же параграф (после горизонтального разделителя)

будет посвящен жестким разрывам строк. Для этого процитируем известное стихотворение</p>

<hr>

<blockquote>

<p>Жил-был у бабушки серенький козлик.<br>Вот как, вот как, серенький козлик.<br>Бабушка козлика

очень любила.<br>Вот как, вот как, очень любила.</p>

</blockquote>

<p><a href="http://dhhse.narod.ru/index.html">Пример гипертекстовой ссылки</a>. Она ведет на сайт

кафедры гуманитарных наук СПбФ ГУ ВШЭ.</p>

<!-- Как видите, этот текст отображаться не будет. Это комментарий. Его пишут с разными целями,

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

пойдет список -->

<ul>

<li>Один пункт ненумерованного списка</li>

<li>Другой пункт ненумерованного списка</li>

</ul>

</body>

</html>

Здесь дан только необходимый минимум команд. Полное описание HTML см. на http://www.w3.org/MarkUp/

Разработка домашних страниц (Основы HTML и CSS для неспециалистов). © А. В. Куприянов, 2004

Основные команды HTML

Куприянов Алексей Валерьевич

2003-12-30T16:43:00