Основы форматирования документа
В предыдущих главах мы вкратце ознакомились со структурой документа, узнали о том, что такое ссылки и как их делать. Теперь настало время поговорить о том, как форматировать документы. Следует отметить, что форматирование и оформление - не одно и то же. Форматирование задает структуру, а оформление - внешний вид. И если в ранних версиях HTML все это было перемешано, то современные требования к создаваемым страницам подразумевают использование каскадных таблиц стилей, или CSS. О том, что это такое и как их использовать вы узнаете уже очень скоро, а к рассмотрению структуры мы приступим прямо сейчас.
К элементам структурной разбивки в первую очередь относятся абзацы и заголовки. В HTML для обозначения абзаца используется элемент P, а для заголовков - H1, H2, H3, H4, H5 и H6. Кроме того, существуют так называемые элементы уровня блока, предназначенные для форматирования части, или блока страницы. Например, для выделения группы абзацев используют элемент DIV.
Рассмотрим применение этих элементов на практике. Откройте файл index.html и измените его так, как показано в листинге 1.5 (файл index2.html).
Листинг 1.5. Структурированный документ HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Главная страница </title>
</head>
<body>
<H1>Приветствую вас на своей страничке!</H1>
<H2>Это - главная страница</H2>
<p><a href="hello/hello.html">Вот мое приветствие</a></p>
<p><a href="secondfile.html">Вторая страница</a></p>
<p><a href="secondfile.html#ANCHOR1">Конец второй страницы</a></p>
</body>
</html>
Как видно (см. рис. 1.5), текст, заключенный в H1, выделен жирным шрифтом и имеет крупный размер. Текст, находящийся в заголовке 2-го уровня (H2) несколько мельче. После каждого заголовка строка обрывается и создается отступ перед следующей строкой.
Рис. 1.5. Структурированная страница при просмотре в браузере
Абзац, формируемый элементом P, также заставляет браузер создать отступ величиной приблизительно в одну строку до и после текста. Однако, если поставить несколько тегов P подряд, то эффект будет таким же, как и от одного. Поэтому для задания более значительного отступа в простейшем случае применяют несколько элементов BR.
Элемент DIV, напротив, не создает интервалов между абзацами, а, подобно BR, просто обрывает текст. Однако область применения этого элемента находится за пределами простого форматирования: как правило, в DIV объединяют блоки документа в одно логическое целое для выделения оформлением при помощи CSS.
Правила синтаксиса
Прежде чем продолжить знакомство с технологиями создания страниц, следует сделать отступление насчет синтаксиса в HTML-документах. Прежде всего, это касается правил использования кавычек для строковых ресурсов. Они сводятся к следующему:
1. Вы можете использовать как одинарные - ', так и двойные - " кавычки, но при этом строка должна быть заключена в кавычки одного типа:
<a href= "http://www.snkey.net" > - верно;
<a href= 'http://www.snkey.net' > - тоже верно;
<a href= "http://www.snkey.net' > - неверно!
2. В языке HTML рекомендуется все значения атрибутов элементов заключать в кавычки, даже если они не содержат пробелов:
<img src="5.gif" alt="Рисунок номер 5" > - верно;
<img src=5.gif alt='Рисунок номер 5' > - тоже верно, хотя значение атрибута src все же желательно взять в кавычки;
<img src=5.gif alt=Рисунок номер 5 > - неверно! Атрибуту ALT будет присвоено значение "Рисунок", а "номер" и "5" будут нераспознанными атрибутами.
ПРИМЕЧАНИЕ
Здесь в примерах использован элемент IMG, предназначенный для вывода изображения. Атрибут SRC определяет расположение и имя файла рисунка, а в ALT указывают надпись, которая должна быть показана, если рисунок не загрузился.
3. Если требуется указать кавычки внутри строки, то используйте кавычки разного типа:
<img src="5.gif" alt="Рис. 5 - 'Цветочки' " > - верно;
<img src=5.gif alt='Рис. 5 - "Цветочки" ' > - тоже верно;
<img src=5.gif alt="Рис. 5 - "Цветочки" " > - неверно! Атрибуту ALT будет присвоено значение "Рис. 5 - ".
Будьте предельно внимательны при расстановке кавычек, поскольку их отсутствие, или неправильное использование может привести к непредсказуемым результатам. Например, если вы не закроете кавычку, как в приведенном в листинге 1.6 примере, то почти весь текст HTML-документа будет воспринят как содержание атрибута CONTENT элемента META:
Листинг 1.6. Неверная расстановка кавычек
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Заголовок</title>
<meta name="Description" content="Мой документ >
</head>
<body>
Содержимое тела документа, которое никто не увидит.
<a href="foo.htm">Ссылка, которая не будет работать</a>
</body>
</html>
Что же здесь произойдет? Когда интерпретатор браузера дойдет до атрибута CONTENT элемента META, он все следующие за знаком равенства и открывающей кавычкой символы, вплоть до первой встретившийся кавычки, присвоит этому самому атрибуту CONTENT. Далее foo.htm" (именно так, вместе с примыкающей кавычкой) будет принят за нераспознаваемый атрибут элемента META. Затем знак > будет распознан как завершение элемента META, и все дальнейшее будет показано в качестве тела документа.
Если же закрывающей кавычки так и не найдется (в нашем случае - если убрать кавычки в элементе A вокруг foo.htm), то все содержимое HTML-документа, начиная с "проблемного" элемента, будет выведено в окно браузера, даже вместе с самим тегом в случае с MSIE (рис. 1.6). При этом содержимое документа, так или иначе, будет показано, и даже ссылка будет работать, но это будет слабым утешением. Правда, в более современных браузерах - Opera или Mozilla документ все-таки будет построен правильно, но это ни в коем случае не снимает данную проблему.
Рис. 1.6. Результат вывода документа с пропущенной кавычкой
Еще одна часто встречающаяся ошибка - это использование обратного слеша - "\" - вместо обычного - "/". Если для работы в Windows используется обратный слеш (наследство DOS), то в UNIX-системах и в интернете вообще - только обычный. Исключение составляет лишь тот случай, если сайт работает полностью под управлением программ от Microsoft, включая браузер и web-сервер: в таком случае допустимо использовать обратный слеш в адресах внутренних ссылок и в тексте сценариев.
Продолжая тему синтаксиса HTML, невозможно не упомянуть о такой замечательной возможности, как комментарии. Комментарии предназначены для автора (или авторов) страниц, и используются, в основном, целях добавления собственных примечаний к документу или для скрытия части HTML-кода от браузера.
Листинг 1.7. Использование комментариев
<body>
<h1>Тема дня</h1>
<p>Сегодня в Москве <!-- не забыть добавить картинку --> произошла...
</p>
<h2>Другие новости</h2>
<h3>Встерча</h3>
<p>На завтра запланирована встреча... </p>
<!-
<h3>Пожар</h3>
<p>Продолжающаяся засуха... </p>
-->
<h3>Потоп</h3>
<p>Из-за проливных дождей... </p>
...
</body>
Начинается комментарий с сочетания символов <!--, а заканчивается - -->. Так, как видно в приведенном в листинге 1.7 примере, первый комментарий (на второй строке сверху) напоминает автору о том, что надо вставить иллюстрацию. Другой комментарий (строки 7-8) не дает браузеру вывести заголовок и следующий за ним абзац про пожар. Необходимо только помнить, что комментарии не могут быть вложенными.
Атрибуты и их значения
Мы не раз уже упоминали параметры элементов HTML - атрибуты. Практически для каждого элемента предусмотрено некоторое количество атрибутов. Одни из них, например, ID (идентификатор элемента) являются общими для большинства элементов, другие, например, HREF встречаются только у одного или нескольких.
Для разных атрибутов допустимы разные типы значений. Так, если для HREF или SRC это будет тот или иной тип адреса (URI), то для ALT это будет произвольное строковое значение, а для атрибута WIDTH элемента (ширина изображения) в качестве значения должно быть указано число.
Итак, типы значений в HTML могут быть тех типов, что перечислены в таблице 1.2.
| Тип | Пример |
|---|---|
| Адреса (URI) | href="http://www.snkey.net" |
| Произвольные строковые | alt="Название рисунка" |
| Последовательности символов | id="link_01", class="type1" |
| Размеры | width="200", height="50%" |
| Цвета | color="red" |
| Типы данных | type="text/javascript" |
| Коды языков | lang="en" |
| Данные таблиц стилей | style="color: green" |
| Данные сценариев | onclick="alert('Hello!');" |
| Ключевые слова | align="center", rel="next" |
Обратите внимание на ключевые слова: со многими из них вы познакомитесь по ходу изучения второй части книги, посвященной языку HTML. А пока что отметим, что они могут определять выравнивание, тип ссылок, представление отображения и некоторые иные значения. Так же неплохо ознакомиться с цветами: они могут задаваться двумя значениями - кодом цвета в шестнадцатеричной форме и в виде названия. Шестнадцатеричное представление цвета указывается в форме #RRGGBB, где RR - интенсивность красной, GG - зеленой и BB - синей составляющих, указанных в шестнадцатеричной форме. Интенсивность цвета задается с шагом в 1/256 (от 00 до FF), что в сумме дает 16,7 млн. оттенков. Что касается названий, то в HTML 4 они предусмотрены для 16 цветов, приведенных в таблице 1.3.
| Название | Цвет | Код |
|---|---|---|
| Black | Черный | #000000 |
| Silver | Серебристый | #C0C0C0 |
| Gray | Серый | #808080 |
| White | Белый | #FFFFFF |
| Maroon | Красно-коричневый | #800000 |
| Red | Красный | #FF0000 |
| Purple | Пурпурный (фиолетовый) | #800080 |
| Fuchsia | Фуксин | #FF00FF |
| Green | Зеленый | #008000 |
| Lime | Лайма | #00FF00 |
| Olive | Оливковый | #808000 |
| Yellow | Желтый | #FFFF00 |
| Navy | Темно-синий | #000080 |
| Blue | Ярко-синий | #0000FF |
| Teal | Темно-циановый | #008080 |
| Aqua | Морской волны | #00FFFF |
Помимо перечисленных цветов, современные браузеры поддерживают целый ряд дополнительных цветов. С их списком вы сможете ознакомиться в полной таблице цветов HTML и CSS.
ПРИМЕЧАНИЕ
Хотя определение цвета в самом HTML на практике уже почти не используются (и является признаком дурного тона), аналогичные значения поддерживаются таблицами стилей, так что знание названий цветов будет полезным в любом случае.
2011-05-01
