SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Основы форматирования документа

В предыдущих главах мы вкратце ознакомились со структурой документа, узнали о том, что такое ссылки и как их делать. Теперь настало время поговорить о том, как форматировать документы. Следует отметить, что форматирование и оформление - не одно и то же. Форматирование задает структуру, а оформление - внешний вид. И если в ранних версиях 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) несколько мельче. После каждого заголовка строка обрывается и создается отступ перед следующей строкой.

Структурированная HTML-страница при просмотре в браузере

Рис. 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 документ все-таки будет построен правильно, но это ни в коем случае не снимает данную проблему.

Результат вывода HTML-документа с пропущенной кавычкой

Рис. 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.

Таблица 1.2. Основные типы значений атрибутов HTML
ТипПример
Адреса (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.

Таблица 1.3. Основные цвета HTML
НазваниеЦветКод
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

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru