HTML - Учебники - Учебник по HTML верстке

HTML-вёрстка
1. Вместо вступления. Этапы традиционной вёрстки
2. Эскиз
3. Материал
  - Подготовка текста
  - Подготовка изображений
4. Создание нового документа
  - Выбор программы
  - Новый документ
  - Проблема "модульной сетки"
5. Вёрстка
  - Размещение текста
  - Размещение изображений
  - Форматирование текста
  - Модульная сетка с помощью таблицы
Приложения
1. Приложение 1. Обозначение цвета
2. Приложение 2. Путь в гипертекстовых ссылках (URL)
3. Приложение 3. Единицы измерения
4. Приложение 4. Специальные символы
5. Приложение 5. Ссылки

HTML-вёрстка

Вместо вступления. Этапы традиционной вёрстки

Начнём с основных этапов обычной вёрстки - от эскиза до печати. Вот они, предельно схематично:

Эскиз.
1. Идея.
2. Карандашный набросок.
3. Пробная вёрстка, создание "рыбы", шаблона.
Материал.
1. Подготовка текста.
  Если текста мало и он вторичен, он набирается сразу в вёрстке. Если текста много или он сложен, он готовится в одной или нескольких сторонних программах.
2. Подготовка изображений.
  Как правило, готовятся вне программы вёрстки, с учетом окончательного размера, цветовой модели и др. условий.
Создание нового документа.
1. Выбор программы.
2. Новый документ, чистый или на основе шаблона.
3. Модульная сетка (формат, поля, структура...) на основе эскиза.
Вёрстка.
1. Текст и изображения помещаются в документ. Порядок размещения, скорее всего, будет зависеть от первичности того либо другого для данного дизайна.
2. Текст оформляется с помощью стилей, создаваемых тут же или созданных ранее, или применяется локальное форматирование.
3. Уточняется положение, размер, количество изображений и других элементов оформления.
Техническая подготовка.
1. Пробные распечатки, сборка оригинал-макета.
2. Корректура, исправления, утверждения.
3. Проверка на соответствие техническим требованиям.
4. Печать/сохранение в требуемый формат и/или сборка для удаленной печати.
Изделие.
1. Печать, послепечатная отделка, доставка.
  Вы контролируете процесс или полагаетесь на других специалистов.

В схеме всё выглядит ясно и логично. Но мы знаем, каким сложным может оказаться любой этап. Об этом в Сети написаны гигабайты. И всё-таки в сравнении будет легче оценить различие и общее в подходах.

1. Эскиз

Разница в подходе возникает на этапе создания эскиза. Не карандашного, конечно, а эскиза как первой попытки воплощения "в материале". Если в вёрстке для этого используют "окончательную" программу (т.е. ту, где и будет свёрстана публикация), то эскиз HTML-документа делается в программе, которая может не иметь ничего общего с HTML. Почему?

Потому что, чтобы создать HTML-документ графическими средствами, нужен инструмент, который преобразовывал бы графические данные в корректный и компактный HTML-код, т.е работал бы по принципу WYSIWYG. (Приблизительно так происходило, например, с PostScript-кодом в Adobe Illustrator до 8-й версии включительно, который был фактически визуальным редактором PostScript.) Подобные программы существуют(*), но либо они пока далеки от полной реализации этого принципа, либо задача полного перехода на графические средства по каким-либо причинам производителем не ставится. Однако спрос на визуальные редакторы есть, и, видимо, будет только расти, значит в ближайшем будущем всё больше страниц будет создаваться именно в графических редакторах средствами WYSIWYG.

(*) Самый высококлассный среди них - Macromedia DreamWeaver. Но вы не сможете оценить его по достоинству и использовать в полной мере, не владея основами HTML. А потому оставим его за пределами статьи.

Создать же эскиз веб-страницы средствами простого текстового редактора - задача мало реальная. Ведь HTML - это текст, где каждая буква кода, каждый тег имеют значение и могут повлиять на результат. Чтобы изменить цвет элемента, обычно достаточно изменить несколько цифр в его описании или в описании стиля (*), и это еще довольно легко. С изменением положения объекта относительно страницы или других объектов уже могут возникнуть сложности: от замены параметра "left" на "right" или "center" - до расчёта новых размеров "модульной сетки", абсолютных или относительных, или до вычисления новых координат в описании стиля. Даже поиск места, которое надо исправить в коде HTML-документа, отнимает время и требует внимательности. Очевидно, что для создания эскиза такие средства не годятся.

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

Тогда какую программу использовать для наброска? В принципе, любой графический редактор, в котором можно задать пикселы в качестве единиц измерения и из которого можно при необходимости получить растровое изображение. Я бы предложил связку AI+PhSh (*). Кто-то предпочитает CDR+PhSh, кто-то - только PhSh.

(*) Почему Illustrator? Потому, например, что он позволяет просматривать результат при заданном разрешении - как весь документ или отдельные слои, так и текст. Достаточно выставить разрешение 72 ppi - и вы увидите, как будут выглядеть ваши векторные элементы в растре с экранным разрешением. Другой плюс - высокий уровень совместимости с Photoshop, вторым звеном "связки".

2. Материал

1. Подготовка текста

Текст вы можете набрать в любом текстовом процессоре. Надо только понимать, что вы набираете "болванку", всё его форматирование надо будет заново повторить в HTML. Вы можете сколько угодно ставить абзацы нажатием Enter, создавать списки, выделение полужирным и курсивом - они никак не отобразяться в браузере.

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

Безусловно, набирая текст, вы будете ставить абзацы, обозначать списки и т.п. - но только для того, чтобы легче было ориентироваться в текстовом процессоре на этапе HTML-разметки.

2. Подготовка изображений

Источником изображений может быть что угодно: снимок, скан, скриншот, отрастрированная векторная графика и т.д. Цветовые модели - RGB или Index color. Форматы файла - JPG, GIF, PNG (*). Разрешение - обычно 72 ppi. Размер изображений желательно сразу задавать в пикселах и привыкать ориентироваться именно в этих единицах измерения.

(*) Оставим в стороне Flash-графику, звук, видео и т.п. Понять, как создается Animated GIF, вы можете, открыв любой такой файл, например, в Adobe ImageReady.

HTML позволяет указать, что изображение в браузере должно иметь размер больший или меньший (в т.ч. без сохранения пропорций), чем в самом файле, но на объем файла и скорость загрузки это никак не влияет.

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

GIF. Индексированный цвет наилучшим образом подходит для изображений с ограниченной палитрой (скриншоты, миниатюры, иконки, пиксельная графика...), а выбор количества цветов в палитре (2, 4, 8, 16... 256) лучше делать методом пробы, сравнивая результаты преобразований. Особое качество GIF - один из цветов его палитры может быть назначен в качестве прозрачного (только 100% прозрачности).
RGB JPG - лучший выбор для изображений с большим количеством полутонов и широким цветовым диапазоном (фото, цветные рисунки...). Дает больший объем, чем GIF, но лучше сохраняет оттенки изображений.
PNG - формат, пока не получивший (не без старания Microsoft) такого же широкого распространения, как первые два формата, но имеющий свои сильные стороны. Особо надо выделить возможность сохранять полупрозрачные области в изображении. Достаточно компактен.

3. Создание нового документа

Выбор программы

Наилучшим выбором для работы с HTML-кодом будет текстовый процессор, имеющий хорошие возможности поиска/замены и умеющий "подсвечивать" HTML-разметку. "Минималисты" восклицают: "Notepad forever!", я рекомендую коммерческий UltraEdit на PC или бесплатный (но и гораздо более простой) SubEthaEdit на Mac. (*)

(*) Замечу, что в DreamWeaver также есть текстовый режим работы с HTML-документом с подсветкой кода. К сожалению, функция поиска/замены немного тяжеловесна.

Второй программой, необходимой для HTML-вёрстки, является, конечно, браузер. Скорее всего, вы будете использовать Internet Explorer, поскольку вероятность того, что его будет использовать читатель вашей веб-страницы, близка к 90%. Для создания простых страниц этого достаточно, но тем не менее я бы рекомендовал сравнивать отображение страницы в IE с отображением в других популярных браузерах, иначе в случае неверного форматирования вы рискуете потерять каждого десятого потенциального посетителя.

Третья программа, которая вам понадобиться - это редактор растровых изображений. Но если в традиционной вёрстке вопрос выбора обычно не стоит (Adobe Photoshop - безусловный лидер), то при подготовке изображений для веб-страниц присмотритесь также к другим редакторам. Не исключено, что в них вы обнаружите гораздо большую функциональность даже в плане подготовки простой веб-графики.

Новый документ

Вариант создания документа на основе шаблона рассматривать не будем. В нашем случае шаблон - это документ, в котором текст и изображения надо заменить на новые.(*) Поэтому переходим сразу к чистому документу.

(*) В DreamWeaver имеются собственные средства для полноценной работы с шаблонами. При изменении шаблона основанные на нём страницы могут автоматически обновляться.

Чтобы создать новый HTML-документ, нам придётся ближе познакомится с его структурой и попутно с некоторыми правилами HTML-кодирования.

Некоторые основные правила записи HTML-кода

Как мы уже выяснили, html-документ - это текстовый файл с расширением или .htm. Разметка данных осуществляется в нем при помощи специальных меток-тегов, заключенных в треугольные скобки. Большая часть тегов - двойные, состоят из открывающего и закрывающего тега. Первый даёт интерпретатору команду начать форматирование, второй - завершить форматирование. Закрывающий тег отличается от открывающего обратной косой чертой и отсутствием параметров (англ. attribute).

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

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

Синтаксис перечисления параметров:
<тег параметр1="значение" параметр2="значение" параметр3="значение">...</тег>. Параметры следуют в произвольном порядке, отделяются друг от друга и от тега пробелом, значение параметров заключается в кавычки.(*)

(*) Отсутствие кавычек, как правило, не вызывает ошибки отображения в браузере, но если хотите 100%-ной надёжности - ставьте их всегда.

Пример тега с параметром:
<p align="right">Текст абзаца будет выключен вправо.</p> HTML не чувствителен к регистру, но часто встречается код, в котором теги и названия параметров пишутся прописными, а значения параметров - строчными, или наоборот. Делается это исключительно для удобства восприятия. (*)

(*) В редких случаях имеет значение регистр значения параметра. Тег <p align="right"> и <P ALIGN="RIGHT"> - это одно и то же, а тег нумерованного списка в вариантах <ol type="A"> и <ol type="a"> - нет: здесь "А" в верхнем регистре означает нумерацию прописными буквами, "а" в нижнем регистре - нумерацию строчными. Случаев, когда регистр имеет значение, мало, и обычно их можно предугадать.

Тегов в HTML довольно довольно большое число, однако для создания несложных документов достаточно знать всего пару десятков тегов и их основные параметры. Некоторые параметры, к тому же, могут употребляться с разными тегами (так, параметр выравнивания align может использоваться с тегами <p>, <table>, <img> и др.), хотя их значения для разных тегов могут не совпадать. Допустимо или нет использовать определённый параметр с тегом, часто можно понять по смыслу тега, а точную информация можно узнать в официальных документах (*). Если использование параметра недопустимо или он имеет недопустимое значение, он будет проигнорирован интерпретатором.

(*) См. Приложение 6. Ссылки.

Тому, кто знаком с английским, задача запоминания тегов покажется еще проще, потому что почти любой тег, параметр или значение параметра является английским словом или его сокращением (как <p> - от "paragraph", <img> - от "image", align - "выравнивать" и т.п.).

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

Пример:
<html>
<head>...</head>
<body>...</body>
</html> Чтобы браузер распознал в документе с расширением правильный HTML, документ должен начинаться тегом <html> и заканчиваться закрывающим </html>, а его структура должна содержать два раздела - Head и Body. Это и будет простейший пустой HTML-документ.

Уточним один момент. Запись кода в несколько строк здесь и в подобных примерах - определённая условность. Браузеру всё равно, напишете ли вы весь код страницы с одну строку, каждый тег с новой строки или через три строки. При отображении страницы всё это будет проигнорировано. Поэтому разбиение кода на строки делается из соображений удобства чтения. Впрочем, обычно с новой строки пишут теги уровня блока, а в строке - теги уровня текста. Подробнее об этом ниже.

Раздел Head содержит различную техническую информацию о веб-странице, которая не отображается в браузере. Исключение - содержимое тега <title>...</title>, это название веб-страницы, которое появляется в заголовке окна браузера и заносится в закладки. Прочая информация - это кодовая страница документа, автор, копирайт, дата создания, базовый URL документа (он позволяет относительным ссылкам работать при переносе документа в другой каталог), ключевые слова (они обрабатываются поисковыми системами), и др. В этот же раздел может быть включено описание скриптов (тег <script>...</script>) и описание стилей CSS (тег <style>...</style>; о разметке документа с использованием стилей - во второй части статьи).

В принципе, раздел Head может быть опущен. Браузер всё равно отобразит страницу и, как правило, верно определит кодировку, только страница будет без заголовка. Но всё-таки причин создавать технически правильные документы куда больше, чем не делать этого.

Возможно, теги в разделе Head и их параметры покажутся вам сложными на первый взгляд, но беспокоится не о чем: вы создадите их один раз (можно для начала скопировать их из любого добротно сделанного HTML-документа), а затем будете только редактировать включённый в них текст - менять название документа, ключевые слова и некоторые другие данные.

Cодержательная часть HTML-документа, всё наполнение вашей веб-страницы, предназначенное для читателя, располагается во втором разделе - Body.

В параметрах тега <body> могут быть заданы некоторые основные настройки отображения документа (в терминах традиционной вёрстки - параметры по умолчанию), такие как цвет текста, цвет фона, фоновое изображение, цвет ссылок.

Пример тега <body> с параметрами:
<body background="mygray.gif" bgcolor="gray" link="blue" alink="red" vlink="black"> По умолчанию веб-страница отображается как чёрный текст на белом фоне; текстовые ссылки выглядят как подчёркнутый текст синего цвета, который не изменяется при наведении на него мыши, а цвет просмотренной ссылки изменяется (точный цвет зависит от браузера). Это оформление можно изменить через параметры тега <body>.

Параметры тега <body>:

Параметр	Описание	Значение
bgcolor	цвет фона	Синтаксис см. в Приложении 1.
background	Фоновое изображение	Синтаксис см. в Приложении 2. URL-адрес графического файла (изображение повторяется до полного заполнения страницы).
text	цвет текста	Синтаксис см. в Приложении 1.
link	цвет текста ссылки	Синтаксис см. в Приложении 1.
alink	цвет активной ссылки (active link)	Синтаксис см. в Приложении 1.
vlink	цвет посещенной ссылки (visited link)	Синтаксис см. в Приложении 1.

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

Проблема "модульной сетки"

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

(*) Однако, в CSS есть возможность указывать, где и как произойдет разрыв страницы при печати HTML-документа на принтер. Можно даже указать, на какой формат следует сформировать страницу. Подробнее об этом см. в Спецификации CSS (Приложение 6 урока по CSS.).

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

Таблицы - мощнейший инструмент HTML-вёрстки. Без них подавляющее большинство веб-страниц имело бы совершенно другой вид. Перефразируя известное выражение, если бы таблиц в HTML не существовало, их стоило бы придумать.

Конечно, таблицы используются и по прямому назначению - чтобы верстать табличные данные. Именно для этого они и были введены в HTML (только в версии HTML 3.2). Но сегодня их основная роль - служить модульной сеткой веб-страницы.

Здесь нам придётся отступить от плана, изложенного в начале, и отложить рассмотрение модульной сетки на основе таблиц. Сначала надо разобраться с более базовыми вещами - с разметкой текста и размещением изображений.

4. Вёрстка

Размещение текста

Для простого размещения текста достаточно двух тегов: <p>...</p> и <br>.

Тег <p>...</p>

Тег <p> соответствует невидимому символу, который в программах вёрстки вставляется нажатием Enter, но поскольку закрывающая часть этого тега обычно опускается (*), то обратите внимание: тег <p> начинает новый абзац, а символ конца абзаца в вёрстке - завершает абзац. В остальном у них много общего.

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

Тег <p> имеет один основной параметр:

Параметр	Описание	Значение
align	Выключка абзаца	"left", "right", "center", "justify" (*)

(*) О чём вспоминает верстальщик, когда речь заходит о полной выключке? Автоматическая расстановка переносов в словах. Такая возможность пока не реализована в HTML, хотя параметр lang со значениями "ru", "en" и т.д. уже существует.

По умолчанию, новый абзац отделяется от предыдущего пустой строкой (*) и, если не определено иное, отображается шрифтом, размером и цветом, указанным в соответствующих параметрах документа (в тегах <body> и <basefont> или в стилях). Если для тега <p> не определено ничего, браузер использует собственные параметры отображения по умолчанию.

(*) Пустая строка, в этом и подобных случаях, - это не то же самое, что в привычной вёрстке пустой абзац. В HTML-документе эта пустая строка не редактируема, она больше соответствует принятому в вёрстке понятию "отступ" до или после абзаца. Однако, оформление абзаца с помощью межабзацных отступов не соответствует русской типографической традиции, где абзац оформляется без отступов и с красной строки. Выход есть - переопределить настройки параграфа можно с помощью CSS.

Тег <br>

Второй тег - <br> (от англ. break) не имеет закрывающей пары, что следует из его назначения: он образует новую строку без образования абзаца (соответствует Shift+Enter в вёрстке). Обычно используется без параметров. Одно исключение: параметр clear.

Параметр	Описание	Значение
clear	Служит для прерывания обтекания текстом изображения или таблицы. Текст, следующий за тегом <br clear="...">, продолжается под обтекаемым элементом с новой строки.	"left", "right" или "all"

Размещение изображений

Пример помещения изображения:
<img src="image_name.gif" width="50" height="30" alt="Пример изображения" border="0"> Изображения помещаются тегом <img> (от англ. image). Этот тег не имеет закрывающей пары, т.к. вся необходимая информация содержится в его параметрах.

Параметры тега <img>:

Параметры	Значения
src	(от англ. source - "источник") - единственный обязательный параметр, значением которого является имя файла изображения и путь к нему.(*)
align	"left", "right" (и нескольких других, которые пока для нас неактуальны), выравнивает изображение относительно других элементов
border	числовое значение, задаёт рамку вокруг изображения и ее толщину (значение "0" - отсутствие рамки)
alt	произвольное текстовое значение, задаёт описание изображение, который выводится браузером при наведении мыши, при не загруженном или отсутствующем изображении
width, height	числовое значение, задаёт размер изображения; определение только одного из них масштабирует изображение пропорционально
vspace, hspace	числовое значение, задаёт вертикальный и горизонтальный отступы изображения от других элементов, например текстовых

(*) В этом и во всех аналогичных случаях путь к файлу может быть опущен, если документ и изображение находятся в одной директории.

Форматирование текста

В HTML имеется свой аналог локального форматирования - для выделения отдельных знаков, слов или фрагментов текста полужирным, курсивом, другим шрифтом, цветом, для назначения регистра, индекса и т.д. В терминологии HTML такие теги называются последовательными (inline) или тегами уровня текста (text level), в отличие от тегов уровня блока (block level). Такое разделение несколько условно, но его следует иметь в виду для соблюдения правила разметки: теги уровня блока могут содержать другие теги уровня блока и теги уровня текста, тогда как теги уровня текста могут содержать только данные и другие теги уровня текста. Нарушение этого правила может выразится в неверном отображении форматирования, а в худшем случае - вызвать существенные нарушения отображения всей HTML-страницы. Это легко понять: курсив (тег <i>...</i>, тег уровня текста) может быть одновременно отформатирован как полужирный (тег <b>...</b>, также тег уровня текста), но не может (не должен) включать тег параграфа или таблицы (теги уровня блока). (*)

(*) Еще одно правило записи разметки, оно достаточно очевидно: <b><i>...</i></b> - так верно, а так - <b><i>...</b></i> - неверно. Один тег не должен разрывать другой, он может быть только включён в него.

Принципы логического и физического форматирования

Одна из основных тенденций в HTML - отделять физическое форматирование от логического. Такой подход значительно повышает гибкость и простоту форматирования и способствует продвижению использования стилей в разметке, поэтому любой грамотный верстальщик может это только приветствовать. Пояснить разницу между физическим и логическим форматированием лучше примером. Предположим, вам нужно использовать в тексте два типа выделения: обычное и сильное. Для логического форматирования в HTML рекомендуется использовать, соответственно, теги <em>...</em> (от англ. emphasis) и <strong>...</strong>. По умолчанию, браузеры отображают первый тег как курсив, а второй - как полужирный. Того же отображения можно добиться, если применить теги физического форматирования: соответственно, <i>...</i> и <b>...</b>. Другой пример: логический тег <del>...</del> (от англ. delete) - и физический <s>...</s> (от англ. strike) по умолчанию отображаются одинаково - как перечёркнутый текст. В чём же разница?

Теги <em>, <strong>, <del> указывают на логическую, смысловую, структурную значимость фрагментов текста, а как именно интерпретировать эти указания - зависит от возможностей браузера, определения стиля или даже, в перспективе, от возможностей программы, читающей текст при помощи синтезатора голоса.

Иногда использовать логическую разметру просто удобнее. Например, небольшую цитату можно заключить в тег <q>...</q> - и она отобразится курсивом или в кавычках, а большую - в тег <blockquote>...</blockquote> - она отобразится как отдельный блок текста с отступом слева.

Тенденция к использованию логического форматирования выражается также в том, что теги физического форматирования постепенно вытесняются из рекомендательных документов HTML. И если в текущей спецификации HTML теги <b>, <i>, <s> определены как нежелательные, то это значит, что их поддержка вскоре может быть признана производителями браузеров необязательной или вовсе будет исключена.

Несколько употребительных тегов форматирования текста

В основном эти теги используются без параметров (исключая разве что параметр назначения им стиля СSS - style). Использование этих тегов не требует особых комментариев, поэтому вкратце:

Тег	Значение	Примечание
<em>...</em>	Курсивное начертание (англ. emphasis)	Рекомендован вместо <i>...</i> (англ. italic)
<strong>...</strong>	Полужирное начертание (англ. strong)	Рекомендован вместо <b>...</b> (англ. bold)
<u>...</u>	Подчеркнутый текст (англ. underline)	-
<sup>...</sup>	Верхний индекс (англ. superscript)	-
<sub>...</sub>	Нижний индекс (англ. subscript)	-
<del>...</del>	Удалённый текст, отображается перечёркнутым (англ. delete)	Рекомендован вместо <s>...</s> (англ. strike)
<big>...</big>	Отображение текста большим размером, чем окружающий	-
<small>...</small>	Отображение текста меньшим размером, чем окружающий	-
<q>...</q>	Цитата в составе текста. Отображается курсивом или в кавычках	-
<blockquote>...</blockquote>	Цитата как самостоятельный блок. Отображается отдельным параграфом с левым отступом	-
<kbd>...</kbd>	Предназначен для обозначения текста, вводимого с клавиатуры (англ. keyboard). Отображается моноширинным шрифтом	Рекомендуется использовать вместо <tt>...</tt>

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

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

Тег параметров шрифта

В число наиболее активно используемых входит тег <font>...</font>. Хотя он не рекомендуется текущей спецификацией HTML как тег физического форматирования, знать его всё-таки надо.

Параметры тега <font>:

Параметры	Значения
face	В качестве значений использует названия шрифта, при этом соблюдаются следующие правила: шрифтов может быть указано несколько, через запятую; браузер использует для вывода первый шрифт из списка; если он не наден, то второй, третий и т.д., если не найден ни один - используется шрифт по умолчанию (*) либо шрифт, назначенный для более крупного фрагмента, включающего данный.
size	Может принимать числовые значения от 1 до 7 - это стандартный набор размеров; за нормальный размер принимается 3, но абсолютная величина шрифта зависит от браузера; можно указывать также размер относительно нормального, т.е. значение "-1" равно "2", значение "+3" равно "6".
color	Задаёт цвет текста.

(*) Шрифтом по умолчанию может быть шрифт, назначенный браузером, параметром font тега <body> или иным способом.

Такие же параметры используются в другом теге, который стоит запомнить: <basefont> (без закрывающего тега). Он задаёт "базовые" параметры текста и может использоваться для определения вида текста для всего документа или его крупных фрагментов (*). Появление в тексте тега <font> переопределяет вид шрифта до закрывающего </font>, после чего "базовые" настройки восстанавливаются. Поскольку <basefont>, как и <font>, является средством физического форматирования, его использование не рекомендуется. Предпочтение отдаётся средствам CSS.

(*) Таблицы обычно не попадают под действие тега <basefont>.

Тег <pre>

Это единственный тег, который позволяет отобразить текст так, как он выглядит в текстовом процессоре (без учёта большинства тегов), в том числе с сохранением лишнего пробельного материала. Текст, заключённый в тег-конетейнер <pre>...</pre> (англ. preformatted?), отображается моноширинным шрифтом. Он имеет единственный и необязательный параметр width, но чаще используется без него.

Параметры	Значения
width	числовое значение (натуральное число), обозначает количество знаков в строке (поддерживается не всеми браузерами)

Заголовки

Принципу логического форматирования полностью соответствуют специальные теги заголовков. В HTML предзаданы шесть уровней заголовков: <h1>, <h2>,...<h6> (от англ. header). Это теги уровня блока, они требуют закрывающей пары. по умолчанию, заголовки всех уровней выровнены влево, заголовок первого уровня отображается как самый крупный, шестого - как самый мелкий. Все шесть отделяются от текста сверху и снизу пустой строкой.

Списки

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

Первые два типа обозначаются тегами <ol>...</ol> (от англ. ordered list) и <ul>...</ul> (unordered list). Они форматируют текст с левым отступом. Каждый пункт списка обозначается тегом <li> (list item) без обязательной закрывающей пары. Пункт списка автоматически ставится на новую строку и обозначается, в зависимости от типа списка, маркером или номером.

Тег <ul> имеет единственный параметр:

Параметры	Значения
type	"disc", "circle", "square" (разные виды маркеров списка), значение по умолчанию - "disc"

Тег <ol> имеет 2 параметра:

Параметры	Значения
type	"1", "A", "a", "I", "i" (разные виды нумерации), по умолчанию - "1" (арабские цифры)
start	числовое значение (натуральное число), указывает принудительное начало нумерации

В нумерованном списке тег <li> может иметь один параметр:

Параметры	Значения
value	числовое значение (натуральное число), используется для принудительного указания номера элемента списка, удобен для форматирования списка с пропусками

В ненумерованном списке тег <li> может использовать параметр type с теми же значениями, что и тег <ul>.

Списки в HTML могут быть сложноструктурированными за счёт вложенности одного списка в другой, в третий и т.д.

Пример списка определений:
<dl>
<dt>Термин. Новый абзац, с отступом сверху.
<dd>Определение. С новой строки с левым отступом.
</dl> Список определений имеет немного другую структуру: он состоит из тега-контейнера <dl>...</dl> (definition list), содержащего <dt> (definition term) и <dd> (definition description), не требующие закрытия.

Горизонтальная линия

Логически разделять документ на части помогает еще одни тег, хотя он не затрагивает собственно текста. Это тег <hr> (от англ. horizontal), создающий горизонтальную линию. Он, естественно, не является контейнером и поэтому не имеет закрывающей пары.

По умолчанию, линия (линейка, в терминологии вёрстки) отображается на новой строке в виде выпуклой линии, занимая всю доступную ширину; сверху и снизу она отделена от других элементов пустыми строками.

Параметры тега <hr>:

Параметры	Значения
align	"left", "right", "center" (имеет смысл, если линейка не занимает всю ширину)
size	числовое значение (px)
width	числовое значение (px, mm, %,...) задаёт длину
color	указывает цвет (о форматах задания цвета см. ниже)
noshade	(без значения) отменяет рельефность

Контейнеры

Очень важные теги, с помощью которых в документе можно выделять различные структуры - это теги-контейнеры <div>...</div> и <span>...</span>(*).

(*) Строго говоря, любой тег, состоящий из открывающей и закрывающей частей, может быть назван контейнером. Но в данном случае это особо подчёркивается, т.к. быть контейнером некоего содержимого - основная, если не единственная функция этих двух тегов.

Первый является тегом уровня блока (т.е. всегда образует элемент структуры), второй - уровня текста (выделяет фрагмент без образования новой строки или абзаца). Они служат для того, чтобы выделить и отформатировать любой фрагмент документа, когда другие способы не предпочтительны или не дают нужного результата. Особенную гибкость - и большое распространение - эти теги получили благодаря возможности использовать в качестве их параметра указание на стиль оформления (собственно, без этого из ценность невелика). Например, они позволяют выделить и оформить особым образом несколько абзацев (подойдёт <div> или <span>), несколько слов содержимого ячейки в таблице (<div> или <span>), слово или символ (<span>), одну или несколько таблиц (<div>), часть документа, включающую различные элементы (<div>). Возможности <div> со стилевым оформлением позволяют даже использовать его вместо таблицы для создания "модульной сетки" или свободно позиционировать элементы на веб-странице, почти как это делается в программах вёрстки! Но рассматривать эти возможности нет смысла, пока мы не добрались до стилей.

Ссылки

Важнейшая черта HTML-документа - возможность связи внутри и между множеством документов. Она не имеет практически ничего общего с традиционной вёрсткой, но без неё невозможно представить Сеть. Реализуется эта возможность с помощью специального вида разметки - гипертекстовых ссылок. За функцию связи отвечает единственный тег: <a>...</a> (anchor) с единственным обязательным параметром href (hyper reference).

Параметры	Значения
href	URL-адрес

Пример:
<a href="http://mysite.ru">Текстовая ссылка на MySite.ru</a> и изображение mylogo.gif <a href="http://mysite.ru"><img src="http://mysite.ru/mylogo.gif"></a>, использованное в качестве такой же ссылки. Тег <a> - это контейнер, содержимым которого могут быть различные элементы документа, обычно текст и изображения, которые являются в этом случае указателем ссылки. Соответственно, в тег-контейнер <a>...</a> помещается либо текст, либо изображение.

Пример: (*)
<a name="TOC">Оглавление документа.</a>
...[Текст веб-страницы]...
<a href="#TOC">Вернуться к оглавлению</a> Особенным случаем ссылок являются внутренние ссылки, ведущие из одной части документа в другую. Они имеют специфическую запись. Во-первых, необходимо обозначить место в документе, к которому будет отправлять ссылка. Для этого используется тот же тег <a>...</a>, но с параметром name, в качестве значения которого пишется произвольное имя (из допустимых символов), которое не отображается и никак не выделяется браузером. Во-вторых, создаётся собственно ссылка, запись которой отличается тем, что вместо URL-адреса указывается заданное имя со знаком "#".

(*) Контейнер первой части ссылки может быть пустым: <a name="TOC"></a>Оглавление документа.

Пример:
<a href="http://mysite.ru#TOC">Вернуться к оглавлению на первой странице</a>. Также можно создать ссылку на определенное место другого документа, если оно там обозначено. Тогда "#имя" дописывается к URL-адресу.

Пример:
<a href="mailto:info@mysite.ru">Пишите мне</a>. У ссылок на адрес электронной почты также есть небольшая особенность. Значением параметра href вместо URL-адреса является адрес почты со словом "mailto:".

Модульная сетка с помощью таблицы

Вернёмся к таблицам как средству формирования "модульной сетки" веб-страницы.

Простейшая структура таблицы:
<table>
<tr>
<td>...</td>
</tr>
</table> Пример показывает, как может выглядеть структура простейшей таблицы в HTML. Наличие всех трёх тегов - <table>, <tr> и <td> - является обязательным.

В этой таблице одна строка - <tr>...</tr> ( от англ. table row), содержащая одну ячейку - <td>...</td> (от англ. table data) (*). Тег <td> не может существовать без <tr> (если в таблице есть хоть одна ячейка, она должна быть частью строки.) Завершающие части </tr> и </td> могут опускаться, </table> опускать нельзя.

(*) Таблица из единственной ячейки иногда используется как аналог конструкции с тегом <div>.

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

Пример:
<table>
<tr>
<th>...</th><th>...</th><th>...</th>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table> Еще один пример - чуть более сложной таблицы. В ней две строки, в каждой по три ячейки. Иначе говоря, 2 строки, 3 колонки. Обратите внимание, что в первой строке таблицы вместо тегов ячеек <td>...</td> использованы другие, о которых пока не упоминалось: <th>...</th> (table header). Это специальный вид ячеек, которые используются для заголовков колонок. Текст в такой ячейке автоматически отображается полужирным с выключкой по центру. Разумеется, можно использовать обычный тег ячейки и самостоятельно отформатировать заголовки нужным образом, но... помните, что мы говорили о роли логического форматирования?

О некоторых особенностях HTML-таблиц

HTML-таблицы и ее части ведут себя как "резиновые". Ячейка не может быть переполнена содержимым - текстом или изображением, она растягивается, чтобы вместить всё целиком, превышая размеры, заданные в параметрах в абсолютных единицах (относительные размеры, в процентах, соблюдаются).
Разумеется, если одна ячейка расширяется, то расширяется вся содеражщая её колонка; если она увеличивается в высоту, увеличивается высота всей строки.
Когда колонка или строка пуста (ячейки в ней ничего не содержат), она стремится занять минимальный размер. Минимум включает в себя толщину границ и сумму отступов внутри ячейки и между ячейками. Если вся таблица не имеет содержимого, отступы и границы равны нулю, то на ее месте в HTML-документе вы увидите только пустую строку. Размер пустой таблицы (колонки, строки) стремится к минимуму, даже если ей (колонке, строке, ячейкам) назначены вертикальные или горизонтальные размеры, отличные от нуля. Чтобы жестко задать размер таблице и ее частям, мы воспользуемся особенностью, указанной в предыдущем пункте.
Еще одна неприятная новость для верстальщика: ячейки не могут быть связаны между собой так, чтобы текст из одной автоматически переходил в другую. Т.е. о полноценной многоколоночной вёрстке можно забыть, текст придётся разбивать вручную.
Приятная новость: в ячейку таблицы можно помесить не только текст или изображение, но и другие элементы, в том числе другую таблицу! А в ячейки той - еще таблицу! Обычно не рекомендуется делать несколько вложений, что может вызывать проблемы у некоторых браузеров (особенно старых версий), но на деле нередко встречается по множеству вложений, что позволяет создавать очень сложные структуры.
Еще одна приятная новость: можно не только задавать цвет фона для всей таблицы и отдельных ячеек, но и назначать им в качестве фона изображение. Ячейка, имеющая фон, разумеется, продолжает считаться пустой, а это значит, что в нее можно как бы поместить 2 изображения: фоновое и обычное. Причем фоновое изображение может быть одиночным либо мозаичным - повторяться по высоте и ширине заданное число раз или просто до заполнения элемента. Уже чувствуете, какие возможности?
И, наконец, такая немаловажная вещь, как нерегулярная структура таблиц. Иными словами, одна ячейка может занимать 2 или больше строк или колонок. Подробнее об этом см. ниже.

Таблицы с нерегулярной структурой

В HTML-таблице можно объединить две и более ячеек - по горизонтали, по вертикали или в обоих направлениях. Делается это при помощи специальных параметров тега <td> (или <th>): colspan и rowspan (column, row span).

Объединение ячеек в строке:
<table>
<tr>
<th colspan="2">...</th><th>...</th>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table> Например, для объединения двух соседних ячеек в строке, в теге <td> указывается параметр colspan="2" (т.е. указание "занять ширину двух колонок"), при этом общее количество тегов <td> в строке надо уменьшить на одну. На последнее правило надо обратить особое внимание, несмотря на его очевидность, потому что именно его нарушение является обычной ошибкой.

Объединение ячеек в колонке:
<table>
<tr>
<th rowspan="2">...</th><th>...</th><th>...</th>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
</table> Для объединения двух ячеек из соседних строк, в первой из них указывается параметр rowspan="2", а из второй строки удаляется одна ячейка.

Для объединённых ячеек доступны те же параметры форматирования, что и для обычных.

Продолжаем строить таблицы

Пример:
<table width="500" border="1" bordercolor="blue" bgcolor="yellow">

<tr>
<td width="50%"> </td><td width="10%"> </td><td width="40%"> </td>

</tr>
<tr>
<td> </td><td> </td><td> </td>

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

В этом же примере показано использование и некоторых других параметров: bgcolor (от англ. background color), border color, border. А также специальный тег комментария - заключенный в него текст игнорируется интерпретатором и не отображается в браузере (*). Запись этого тега отличается от других: .

(*) Этим же способом можно временно "отключать" часть кода в HTML: надо окружить выбранный фрагмент документа этими символами. Но, разумеется, "отключать" надо только логически самостоятельную или независимую часть документа: часть текста в абзаце, одну строку в таблице, всю таблицу; но нельзя скрыть одну ячейку, иначе таблица не будет правильно отображаться.

Как же задать "жесткие" размеры "модульной сетке"?

Как вы помните, ячейки "растягиваются" таким образом, чтобы полностью вместить своё содержимое. Значит, если заполнить ячеейки изображениями, размер которых точно задан, то размер ячеек станет таким же. Но как тогда разместить в эти ячейки другую, значимую информацию, если это не изображения, а текст или вложенные таблицы?

Пример:
<table>
<tr>
<td><img src="1px.gif" height="1" width="1"></td>
<td><img src="1px.gif" height="1" width="150"></td>
<td><img src="1px.gif" height="1" width="300"></td>
</tr>
<tr>
<td><img src="1px.gif" height="40" width="1"></td>
<td>Содержимое</td>
<td>Содержимое</td>
</tr>
<tr>
<td><img src="1px.gif" height="80" width="1"></td>
<td>Содержимое</td>
<td>Содержимое</td>
</tr>
</table> Первое очевидное решение: поставить "распорки" только в какую-то одну ячейку каждой строки и каждой колонки.

Предлагаю в примере следующий вариант этого решения: использовать ячейки только одной строки (верхней, нижней или другой, которая подойдет по дизайну) и только одной колонки (левой, правой или другой). НО! задавая ширину, надо поставить минимальную высоту (1 px), а задавая высоту, дать минимальную ширину. Получатся узкие горизонтальные и вертикальные изображения-линии и такие же ячеейки, которые будут выполнять исключительно техническую роль. Помня о возможности HTML к непропорциональной деформации изображений, в качестве изображения-заполнителя используем прозрачный GIF размером 1x1 px!

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

Внимательный человек может заметить, что ситуация не совсем такова, как я её описал. Общий размер таблицы в приведённом выше примере не будет равен 451x121 px (1+150+300 и 1+40+80). Дело в том, что в размере таблицы и ячеек учитываются ещё 3 параметра, которые мы пока не рассмотрели. А именно:

Параметры	Значения
border	числовое значение, задаёт границу вокруг ячеек и толщину внешней границы таблицы; даже если она не отображается (не задан цвет), она всё равно принимается равной 1 px
cellspacing	числовое значение, задаёт расстояние между ячейками; параметр, не свойственный таблицам, с которыми привык работать верстальщик; по умолчанию, равен 2 px
cellpadding	числовое значение, задаёт отступ внутри ячейки от её границы до её содержимого; значение по умолчанию 1 px.(*)

(*) В разных браузерах умолчания для параметров border, cellspacing, cellpadding могут немного отличаться.

Пример:
<table border="0" cellspacing="0" cellpadding="0"> Таким образом, чтобы получить действительно требуемые размеры, тег <table> в приведённом выше примере надо записать со следующими параметрами (см. пример).

Пример:
<table width="450" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="1px.gif" height="1" width="1"></td>
<td width="150"><img src="1px.gif" height="1" width="150"></td>
<td width="200"><img src="1px.gif" height="1" width="300"></td>
</tr>
<tr>
<td><img src="1px.gif" height="40" width="1"></td>
<td>Five orifices</td>
<td>Five speedy Jabberwockies towed one Klingon, yet two bureaux perused umpteen silly Jabberwockies, and umpteen putrid trailers comfortably kisses one speedy mat.</td>
</tr>
<tr>
<td><img src="1px.gif" height="80" width="1"></td>
<td>Umpteen lampstands marries two cats</td>
<td>Kermit bought mats. One Macintosh ran away, and the mostly progressive subway tickled bureaux.</td>
</tr>
</table> Но это еще не всё. Нельзя пренебрегать способом стандартного назначения размера, т.е. через параметры width и height тегов <table> и <td>. Прежде всего - width, т.к. свойство HTML-таблицы таково, что она стремится сначала использовать доступный размер по горизонтали, а затем уже, при его недостатке - по вертикали. Настоятельно рекомендую пользоваться параметрами width и height, даже параллельно с заданием размера через помещенное изображение. При этом не обязательно указывать размер для всех ячеек, достаточно, как в случае в "распорками", указать его для ячеек одной строки и, если надо, для ячеек одной колонки.

1. Чтобы оценить работу параметров таблицы, мы поместили в ячейки более крупный текст. Еще лучше увидеть результат поможет временное изменение значения border на "1".
2. Высота строк (40 и 80) не играет роли, если содержимое заставляет строки принимать большую высоту.

Приблизительно отображение примера в браузере (*):


	Five orifices	Five speedy Jabberwockies towed one Klingon, yet two bureaux perused umpteen silly Jabberwockies, and umpteen putrid trailers comfortably kisses one speedy mat.
	Umpteen lampstands marries two cats	Kermit bought mats. One Macintosh ran away, and the mostly progressive subway tickled bureaux.

(*) Для границ таблицы задана величина 1px, чтобы оценить результат. Границы внутри таблицы кажутся толще, потому что их толщина складывается из границ соседних ячеек. Это будет заметно, если изменить значение параметра cellspacing.
Параметры шрифта в нашем примере берутся из общего определения шрифта для документа; если вы скопируете код таблицы-примера в другой HTML-документ, то, скорее всего, текст в ней будет выведен другим шрифтом.

Мы разобрались со способом жестко задавать размеры всех строк и колонок, но всегда ли это надо для модульной сетки? Конечно, нет. Не будем подходить к дизайну веб-страницы с привычными мерками верстальщика. Нам не известен заранее размер окна браузера, в котором будет посматриваться страница, как бывает известен формат набора при традиционной вёрстке. Поэтому часто нужно придать таблице, выполняющей роль "модульной сетки", определённую гибкость. Например, задать неизменный размер для тех частей документа, изменение размеров которых критично или нежелательно (меню, шапка страницы, небольшие колонки новостей и т.п.), и сохранить гибкость размера для основной содержательной части, за счёт которой в основном документ и будет подстраиваться по размер окна. Добиться этого просто: надо задать размер в процентах.

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

Часто используется и "гибридный" вариант: через изображение задается минимальная ширина для колонки, а в параметре тега <td> - максимальная (например, 100% или 500px). Тогда, если содержимое ни одной из ячеек колонки не требует большой ширины, колонка "стягивается" до минимального размера, а если содержимое не умещается, она растягивается до максимально разрешённого размера (с сохранением пропорций, если размер указан в процентах).

Приложения

Приложение 1. Обозначение цвета

Пример	Описание
<table bgcolor="#ff0000">	Шестнадцатиричное значение цвета. Маска: #rrggbb
<hr color="R255G0B0">	Значение цвета в RGB. Числа в диапазоне 0—255, записанные без пробела.
<font color="red">	Зарезервированные имена (*). Спецификацией предусмотрено 140 стандартных названий цветов (в числе которых black, white, red, green, blue, cyan, magenta, yellow, gray и др.), из которых 16 поддерживаются с первых версий HTML.

Приложение 2. Путь в гипертекстовых ссылках (URL)

В HTML-документе постоянно используются указания на различные файлы - другие страницы или места документа, на изображения, на файлы, которые можно загрузить, на скрипты и т.д. Как правильно указать адрес файла? Прежде всего, во всех случаях можно указать полный, или абсолютный, адрес, например: http://www.mysite.ru/docs/manuals/my_manual.html или http://www.mysite.ru//images/my_photo.jpg.

Однако можно использовать также сокращённый вариант записи. В этом случае интерпретатор браузера сам дополнит первую часть адреса в зависимости от расположения документа, содержащего ссылку. Например, из файла, расположенного по адресу http://www.mysite.ru/docs/001.html, можно сослаться на изображение http://www.mysite.ru//images/001.gif следующим образом: <img src="/images/001.gif">. Если в сокращённом пути не указать имени папки images, браузер будет искать изображение в папке текущего документа, т.е. в папке docs.

Приложение 3. Единицы измерения

Размеры в HTML могут задаваться в самых разных единицах измерения. Наиболее часто используются пикселы, миллиметры и пункты (px, mm, pt), для некоторых элементов, таких как таблицы или линейки, часто используются проценты (%), а для текста - относительные единицы em. По умолчанию в HTML используется пиксел, его обозначение после числа можно опускать.

Приложение 4. Специальные символы

В HTML многие специальные символы обозначаются кодами, чтобы их однозначно воспринимали все браузеры в любых кодировках. Все эти коды начинаются символом амперсанда (&) и завершаются точкой с запятой (;).

Некоторые распространенные символы имеют буквенное сокращение: © - знак копирайта,   - неразрывный пробел (nobreakable space). Другие обозначаются числами, и в этом случае перед числом дополнительно ставится знак "решетка" (#):  - длинное тире (вариант с буквенным сокращением - —),  (или –) - тире. Список спецсимволов можно найти в любом учебнике или справочнике по HTML.

Приложение 5. Ссылки

HTML 4.01 Specification

Спецификация HTML 4.01 (русский перевод)

Учебник по Html для чайников

Справочник по HTML на русском языке. Автор - Владимир Городулин

HTML Elements List

Welikeit.Ru