здесь находится заголовок страницы

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> здесь находится заголовок страницы </title> </head> <body> . здесь находится содержимое страницы . </body> </html>

Листинг 2.1. Шаблон страницы Web

Закрыть окно

<p>текст</p>

Листинг 2.2. Общая форма тега <p>

Закрыть окно

Компоновка страницы Web

<p>Страница Web начинается с предварительных разделов кода, которые определяют документ XHTML. Также включается заголовок, который появляется в панели заголовка браузера.</p>

<p> Все содержимое, которое появляется в окне браузера, кодируется в разделе тела страницы. Текстовая информация, графические изображения, ссылки и другое содержимое страницы добавляются на страницу и ограничиваются тегами XHTML, чтобы упорядочить и структурировать их представления. </p>

<p>Важно отметить, что содержимое организовано на странице только с помощью тегов XHTML, закодированных в документе. Иначе все содержимое выводится как одна неформатированная строка текста. </p>

Листинг 2.3. Страница Web, форматированная тегами параграфов

Закрыть окно

<h2 align="center">Компоновка страницы Web</h2>

<p align="justify">Страница Web начинается с предварительных разделов кода, которые определяют документ XHTML. Также включается заголовок, который появляется в панели заголовка браузера.</p>

<p align="justify"> Все содержимое, которое появляется в окне браузера, кодируется в разделе тела страницы. Текстовая информация, графические изображения, ссылки и другое содержимое страницы добавляются на страницу и ограничиваются тегами XHTML, чтобы упорядочить и структурировать их представления. </p>

<p align="justify">Важно отметить, что содержимое организовано на странице только с помощью тегов XHTML, закодированных в документе. Иначе все содержимое выводится как одна неформатированная строка текста. </p>

Листинг 2.4. Страница Web, форматированная с помощью тегов параграфа с атрибутом align

Закрыть окно

<blockquote> <p>текст</p> </blockquote>

Листинг 2.5. Общая форма тега <blockquote>

Закрыть окно

<p> Здесь три параграфа. Первый параграф форматирован с помощью стандартного тега параграфа и выровнен относительно левого края страницы.</p>

<blockquote> <p>Второй параграф форматирован с помощью тега <blockquote>, чтобы сместить его левую и правую стороны примерно на 40 пикселей от краев страницы.</p> </blockquote>

<p>Последний параграф форматирован как первый. Он помещен в стандартный тег параграфа и прижат к левому краю страницы.</p>

Листинг 2.6. текста, форматированный с помощью тега <blockquote>

Закрыть окно

<p> Здесь пять параграфов. Первый параграф форматирован стандартным тегом параграфа и прижат к левому краю страницы.</p>

<blockquote> <p>Второй параграф форматирован с помощью тега blockquote, чтобы сместить его края слева и справа примерно на 40 пикселей от краев страницы. </p>

<blockquote> <p>Этот параграф также заключен в теги blockquote. Он еще дальше смещает границы параграфа, внутри границ, созданных внешним тегом blockquote.</p> </blockquote>

<p>Этот параграф выравнивается как второй параграф, так как он тоже находится внутри внешнего тега blockquote.</p> </blockquote>

<p>Пятый параграф кодируется как первый. Он помещен внутри стандартного тега параграфа и прижат к левому краю.</p>

Листинг 2.7. Блоки текста, форматированные с помощью вложенных тегов <blockquote>

Закрыть окно

<br/>

Листинг 2.8. Общая форма тега <br/>

Закрыть окно

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее преследовала.</p>

<blockquote> <p>Была у Мери овечка,<br/> Была ее шерсть снежно-белой;<br/> И куда бы ни шла Мери,<br/> Овечка бежала за ней.</p> </blockquote>

<p>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание, когда вокруг тебя все время скачет овечка.</p>

Листинг 2.9. Блок текста, форматированный с помощью переноса строк

Закрыть окно

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее преследовала.<br/><br/><br/></p>

<blockquote> <p>Была у Мери овечка,<br/> Была ее шерсть снежно-белой;<br/> И куда бы ни шла Мери,<br/> Овечка бежала за нею.</p> </blockquote>

<p><br/>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание, когда вокруг тебя все время скачет овечка.</p>

Листинг 2.10. Страница, форматированная с помощью нескольких переносов строк

Закрыть окно

<hn>Текст заголовка</hn>

Листинг 2.11. Общая форма тега <hn>

Закрыть окно

<h1>Заголовок уровня 1</h1> <h2>Заголовок уровня 2</h2> <h3>Заголовок уровня 3</h3> <h4>Заголовок уровня 4</h4> <h5>Заголовок уровня 5</h5> <h6>Заголовок уровня 6</h6>

<p>Обычный текстовый параграф.</p>

Листинг 2.12. Создание заголовков с помощью тега <hn>

Закрыть окно

<hr/>

Листинг 2.13. Общая форма тега <hr/>

Закрыть окно

<h2>Горизонтальная линейка</h2>

<p> Горизонтальная линейка используется для разделения отдельных частей содержимого страницы. Далее показана используемая по умолчанию линейка.</p>

<hr/>

<p>Линейка имеет толщину 2 пикселя и проходит по ширине через все окно браузера. Перед и после нее вставляется пустая строка.</p>

Листинг 2.14. Код для создания горизонтальной линейки между двумя параграфами

Закрыть окно

· Элемент списка 1 · Элемент списка 2 · Элемент списка 3

Листинг 2.15. Вывод в браузере неупорядоченного списка

Закрыть окно

<ul> <li>элемент списка</li> <li>элемент списка</li> ... </ul>

Листинг 2.16. Общая форма неупорядоченного списка

Закрыть окно

<ul> <li> Элемент списка 1</li> <li> Элемент списка 2</li> <li> Элемент списка 3</li> </ul>

Листинг 2.17. Код неупорядоченного списка

Закрыть окно

<ul> <li><p> Это первый элемент списка. Текст, идущий после символа маркера, переносится по словам внутри маркера. Теги параграфа используются для вставки пустых строк между элементами списка.</p></li>

<li><p>Это второй элемент списка. Текст, идущий после символа маркера, переносится по словам внутри маркера. Теги параграфа используются для вставки пустых строк между элементами списка.</p></li> </ul>

Листинг 2.18. Код неупорядоченного списка параграфов текста

Закрыть окно

· Это первый элемент списка. Текст, идущий после символа маркера, переносится по словам внутри маркера. Теги параграфа используются для вставки пустых строк между элементами списка.

· Это второй элемент списка. Текст, идущий после символа маркера, переносится по словам внутри маркера. Теги параграфа используются для вставки пустых строк между элементами списка.

Листинг 2.19. Вывод в браузере неупорядоченного списка параграфов текста

Закрыть окно

<ul> <li>Элемент списка 1</li> <li>Элемент списка 2 <ul> <li>Элемент списка 2a</li> <li> Элемент списка 2b <ul> <li>Элемент списка 2b1</li> <li>Элемент списка 2b2</li> </ul> </li> </ul> </li> <li>Элемент списка 3</li> </ul>

Листинг 2.20. Код вложенных неупорядоченных списков

Закрыть окно

· Элемент списка 1 · Элемент списка 2 · Элемент списка 2a · Элемент списка 2b · Элемент списка 2b1 · Элемент списка 2b2 · Элемент списка 3

Листинг 2.21. Вывод в браузере вложенных неупорядоченных списков

Закрыть окно

1. Элемент списка 1 2. Элемент списка 2 3. Элемент списка 3

Листинг 2.22. Вывод упорядоченного списка в браузере

Закрыть окно

<ol> <li>элемент списка </li> <li>элемент списка </li> ... </ol>

Листинг 2.23. Общая форма упорядоченного списка

Закрыть окно

<ol> <li> Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ol>

Листинг 2.24. Код упорядоченного списка

Закрыть окно

<ol> <li>Элемент списка 1</li> <li>Элемент списка 2 <ol> <li>Элемент списка 2.1</li> <li>Элемент списка 2.2</li> </ol> </li> <li>Элемент списка 3</li> </ol>

Листинг 2.25. Код вложенных упорядоченных списков

Закрыть окно

1. Элемент списка 1 2. Элемент списка 2 1. Элемент списка 2.1 2. Элемент списка 2.2 3. Элемент списка 3

Листинг 2.26. Вывод в браузере вложенных упорядоченных списков

Закрыть окно

Термин 1 Это определение Термина 1. Определяемый термин располагается на отдельной строке и за ним следует блок текста определения. Определение использует перенос слов и смещено от края. Термин 2 Это определение Термина 2. Определяемый термин располагается на отдельной строке и за ним следует блок текста определения. Определение использует перенос слов и смещено от края.

Листинг 2.27. Вывод в браузере списка определений

Закрыть окно

<dl> <dt>Термин 1</dt> <dd>Текст определения Термина 1</dd> <dt>Термин 2</dt> <dd>Текст определения Термина 2</dd> ... </dl>

Листинг 2.28. Общая форма тегов списка определений

Закрыть окно

<dl> <dt>Термин 1</dt> <dd> Это определение Термина 1. Определяемый термин располагается на отдельной строке и за ним следует блок текста определения. Определение использует перенос слов и смещено от края.</dd> <dt>Термин 2</dt> <dd>Это определение Термина 2. Определяемый термин располагается на отдельной строке и за ним следует блок текста определения. Определение использует перенос слов и смещено от края.</dd> </dl>

Листинг 2.29. Код списка определений

Закрыть окно

<a href="url">текст ссылки</a>

Листинг 2.30. Общая форма тега <a>

Закрыть окно

<h2>Соединение со страницами Web</h2>

<p> Перемещение между страницами сайта Web становится возможным с помощью гипертекстовых ссылок. Одно или несколько слов на странице "соединения" сделаны чувствительными к щелчкам мыши, что позволяет читателю переходить на различные "присоединенные" страницы. Существует две основные причины для разбиения темы на различные присоединенные страницы Web:</p>

<p> <a href="Organize.htm">Тематическая организация</a><br/> <a href="Supplement.htm">Дополнительная информация</a><br/> </p>

<p>При создании ссылок между страницами Web важно предоставить ссылки возврата на страницы соединения. Автор страницы не должен оставлять читателей зависшими в конце ряда ссылок, не имеющим простого способа вернуться на домашнюю страницу. </p>

Листинг 2.31. Код для соединения страниц

Закрыть окно

<h2>Тематическая организация</h2>

<p> Одной из причин разбиения рассматриваемого вопроса в Web на отдельные страницы является слишком большой объем информации для размещения на одной странице Web. По той же причине, почему книги делятся на главы, а главы делятся на разделы, а разделы на параграфы, рассматриваемый вопрос в Web может понадобиться разделить на логические единицы, которые представлены отдельно друг от друга. Вместо представления в виде одного непрерывного потока текста рассматриваемый вопрос организуется в связанные фрагменты информации, которые напоминают о своей общей структуре и предоставляют независимое чтение отдельного частичного вопроса.</p>

<p><a href="Home.htm">Вернуться на Home</a></p>

Листинг 2.32. Код для возврата на исходную страницу

Закрыть окно

<a href="http://www.google.com">Перейти на Google</a>

Перейти на Google

Листинг 2.33. Код и вид ссылки на внешний сайт Web

Закрыть окно

<a href="http://directory.google.com/Top/Business/">Business Sites</a>

Business Sites

Листинг 2.34. Код и вид ссылки на внешний сайт Web и структуру каталогов

Закрыть окно

Листинг 2.35. Общая форма тега <img>

Закрыть окно

Листинг 2.36. Код для доступа к изображению, расположенному в подкаталоге Media

Закрыть окно

Содержание раздела