Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
<LI>Я— второй пункт вложенного списка.</LI>
<LI>Я— третий пункт вложенного списка.</LI>
</UL>
</LI>
<LI>Я — третий пункт внешнего списка.</LI>
</UL>
HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.
Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).
Листинг 2.6
<DL>
<DT>Содержимое</DT>
<DD>Информация, отображаемая на Web-странице</DD>
<DT>Представление</DT>
<DD>Набор правил, определяющих формат отображения содержимого</DD>
<DT>Поведение</DT>
<DD>Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя</DD>
</DL>
Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.
На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).
Листинг 2.7
<UL>
<LI>абзацы;</LI>
<LI>заголовки;</LI>
<LI>цитаты;</LI>
<LI>списки;</LI>
<LI>таблицы;</LI>
<LI>графические изображения;</LI>
<LI>аудио- и видеоролики.</LI>
</UL>
Теперь наша Web-страничка стала выглядеть симпатичнее.
Цитаты
В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.
HTML уже приготовил для нас выход из положения — парный тег <BLOCKQUOTE>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.
Листинг 2.8
<BLOCKQUOTE>
<P>Я — начало большой цитаты.</P>
<P>Я — продолжение большой цитаты.</P>
</BLOCKQUOTE>
Как видим, в тег <BLOCKQUOTE> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.
Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).
Листинг 2.9
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>
</BLOCKQUOTE>
Текст фиксированного формата
Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.
Листинг 2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег TITLE</TITLE>
</HEAD>
<BODY>
<H1>Тег TITLE</H1>
<P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>
<H6>Пример:</H6>
<P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:
!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!/HEAD!
Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.
Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?
Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера
Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?
Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.
Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.
Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег <PRE>. Выводимый текст помещают внутри этого тега (листинг 2.11).
Листинг 2.11
<PRE>Я — текст, который будет выведен на Web-страницу
со всеми
отступами и
переносами строк.</PRE>
Такой текст называется текстом фиксированного формата.
Правила отображения текста фиксированного формата:
— для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна);
— все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);
— если строка текста фиксированного формата не помещается в окне Web- обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за этого может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна…);
— возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее о них будет рассказано в главах 3 и 5).
Текст фиксированного формата также является блочным элементом.
Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).
Листинг 2.12
<!DOCTYPE html>
<HTML>
.
<H6>Пример:</H6>
<PRE>!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно (рис. 2.2).
Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова (http://www.lib.ru), в которой все книги опубликованы как раз в виде текста фиксированного формата.
Горизонтальные линии
Что бы нам еще такое сделать с Web-страницами… Давайте дополнительно выделим на главной Web-странице index.htm цитату из Википедии, описывающую HTML. Только как?
Для любителей все выделять HTML припас подарок — горизонтальную линию, создаваемую с помощью одинарного тега <HR>:
<P>Я буду отделен от следующего абзаца горизонтальной линией.</P>
<HR>
<P>Я отделен от предыдущего абзаца горизонтальной линией.</P>
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web- страницы, имеет один-два пиксела в толщину и выпуклый или вдавленный вид (конкретные параметры зависят от Web-обозревателя). Она применяется для отделения одной части содержимого Web-страницы от другой и просто "для красоты". Однако нужно помнить, что слишком большое число горизонтальных линий — дурной тон Web-дизайна.
Больше о горизонтальных линиях рассказывать нечего. Так что внесем в HTML-код страницы index.htm необходимые исправления (листинг 2.13).
Листинг 2.13
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.</P>
<HR>
<P>Русская Википедия определяет термин HTML так:</P>
.
<P>Пожалуй, ни убавить ни прибавить…</P>
<HR>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
Результат показан на рис. 2.3. Симпатично вышло, не так ли?
Рис. 2.3. Web-страница index.htm с горизонтальными линиями
Откройте для себя мир чтения на siteknig.com - месте, где каждая книга оживает прямо в браузере. Здесь вас уже ждёт произведение Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, относящееся к жанру Прочая справочная литература. Никаких регистраций, никаких преград - только вы и история, доступная в полном формате. Наш литературный портал создан для тех, кто любит комфорт: хотите читать с телефона - пожалуйста; предпочитаете ноутбук - идеально! Все книги открываются моментально и представлены полностью, без сокращений и скрытых страниц. Каталог жанров поможет вам быстро найти что-то по настроению: увлекательный роман, динамичное фэнтези, глубокую классику или лёгкое чтение перед сном. Мы ежедневно расширяем библиотеку, добавляя новые произведения, чтобы вам всегда было что открыть "на потом". Сегодня на siteknig.com доступно более 200000 книг - и каждая готова стать вашей новой любимой. Просто выбирайте, открывайте и наслаждайтесь чтением там, где вам удобно.
