Главная :: Рассылки :: Структура текста
Встречает один веб мастер другого и говорит: - Слушай, вчера был на твоем сайте. Здорово! Круто! - А, так это был ты.

Структура текста

Уважаемые подписчики!

Представляю Вашему вниманию очередной выпуск информационной рассылки сайта "Свободное и бесплатное ПО".

Вам срочно нужно решить задачу, но нет соответствующей программы? Мы собрали основные свободные и открытые программы вместе. Вы можете загрузить обновленный (от 29.03.2009) список всех бесплатных и свободных программ, представленных на нашем сайте.

Хотите получать полезную информацию каждую неделю прямо на почтовый ящик? Посмотрите все наши рассылки. Каждый найдет для себя что-то интересное и полезное. Выпуски выходят раз в неделю в воскресенье.

В текущем выпуске мы поговорим о структуре текста в HTML документе и посмотрим что нас ждет в стандарте HTML5. Ну и немного поговорим о CSS.

В этом выпуске мы рассмотрим структурирование текста в теле документа. Текст размещается внутри элемента body (т.е. между тегами <body> и </body>).

Основные команды для определения структуры текста - это заголовки разделов, обозначаемые элементами hn, где n - число от 1 до 6. Заголовок верхнего уровня (h1) обычно определяет название документа (не обязательно совпадающий с содержимым элемента title). Следующий заголовок (например, раздел) - h2, далее (подраздел и т.д.) - h3, h4, h5 и h6. Для этих элементов обязательно указание как открывающего, так и закрывающего тегов.

Заголовки по умолчанию имеют разный размер шрифта (от крупного для h1, до мелкого для h6), полужирное начертание текста, выравнивание по левому краю и отступы сверху и снизу.

Приведем пример использования заголовков для задания структуры текста.

<h1>Пользователи Интернет в Солнечной системе</h1>
<p>По данным социологических исследований в Солнечной системе насчитывается более 15 000 000 000 пользователей сети Интернет и их количество постоянно растет. Наибольшее число пользователей расположено на Марсе, в то время как на Меркурии к сети Интернет подключено менее 0,001% пользователей (т.е. 7 человек).
<h2>Пользователи Меркурия</h2>
<p>Из-за постоянных случаев расплавления оптоволокна на Меркурии до сих пор не удалось наладить стабильную связь. Жители предпочитают для общения использовать службу "Почта Меркурия" (их новый девиз которой - ваши письма не закоптятся).
<h2>Пользователи Марса</h2>
<p>На Марсе наблюдается лавинообразный рост рост пользователей сети Интернет. Чем вызван данный всплеск интереса до сих пор не удалось выяснить. Наиболее популярные запросы пользователей связаны с веб-технологиями. Как сказал представитель сообщества "За чистоту кода":
<br>- "Красоту XHTML кода не заменит даже красота женского тега"
<br>- "... то есть тела", поправился он.
<h3>Сообщества Марса</h3>
<p>На Марсе наблюдается активное становление сетевых сообществ. Наиболее крупные из них: "За чистоту кода" и "За независимость Марса от Венеры". Численность первого сообщества в последнее время начало сокращаться из-за его закрытости и практически нулевой репродуктивности среди его членов. Второе сообщество, наоборот, набирает новых сторонников, в основном, из молодежи.
<h4>Сообщество "За независимость Марса от Венеры"</h4>
<p>Сообщество появилось относительно недавно, однако, уже вышло на первые строчки по сетевому трафику. Рядовые члены восторженно рассказывают:
<br>- "Что здесь особенно классно, так это то, что можно говорить про венерианцев все, что захотим, а они ничего не ответят, т.к. весь траф оттуда мы блокируем".
<p>И еще один молодой представитель сказал:
<br>- "А чё, флажки раздают халявные, круто!!!".
<p>По последним данным, участились случаи рассылки членами сообщества нежелательной почты (спама) в сети Венеры. По опросам 95% венерианцев в ответ заявило:
<br>- "Да пускай отделяются, нам такие бяки не нужны. Пусть только кредиты отдадут."
<h5>Президент сообщества</h5>
<p>До сих пор точно не известно, кто возглавляет сообщество. Ходят слухи, что сообществом управляет вышедшая из под контроля программа искусственного интеллекта. Сам искусственный интеллект давать комментарии отказался.
<h6>Главный компьютер</h6>
<p>При любой попытке связаться с ним на предмет выяснения роли искусственного интеллекта, он перегружался и зависал.

В результате получим следующее оформление текста.

Пользователи Интернет в Солнечной системе

По данным социологических исследований в Солнечной системе насчитывается более 15 000 000 000 пользователей сети Интернет и их количество постоянно растет. Наибольшее число пользователей расположено на Марсе, в то время как на Меркурии к сети Интернет подключено менее 0,001% пользователей (т.е. 7 человек).

Пользователи Меркурия

Из-за постоянных случаев расплавления оптоволокна на Меркурии до сих пор не удалось наладить стабильную связь. Жители предпочитают для общения использовать службу "Почта Меркурия" (их новый девиз которой - ваши письма не закоптятся).

Пользователи Марса

На Марсе наблюдается лавинообразный рост рост пользователей сети Интернет. Чем вызван данный всплеск интереса до сих пор не удалось выяснить. Наиболее популярные запросы пользователей связаны с веб-технологиями. Как сказал представитель сообщества "За чистоту кода":
- "Красоту XHTML кода не заменит даже красота женского тега"
- "... то есть тела", поправился он.

Сообщества Марса

На Марсе наблюдается активное становление сетевых сообществ. Наиболее крупные из них: "За чистоту кода" и "За независимость Марса от Венеры". Численность первого сообщества в последнее время начало сокращаться из-за его закрытости и практически нулевой репродуктивности среди его членов. Второе сообщество, наоборот, набирает новых сторонников, в основном, из молодежи.

Сообщество "За независимость Марса от Венеры"

Сообщество появилось относительно недавно, однако, уже вышло на первые строчки по сетевому трафику. Рядовые члены восторженно рассказывают:
- "Что здесь особенно классно, так это то, что можно говорить про венерианцев все, что захотим, а они ничего не ответят, т.к. весь траф оттуда мы блокируем".

И еще один молодой представитель сказал:
- "А чё, флажки раздают халявные, круто!!!".

По последним данным, участились случаи рассылки членами сообщества нежелательной почты (спама) в сети Венеры. По опросам 95% венерианцев в ответ заявило:
- "Да пускай отделяются, нам такие бяки не нужны. Пусть только кредиты отдадут."

Президент сообщества

До сих пор точно не известно, кто возглавляет сообщество. Ходят слухи, что сообществом управляет вышедшая из под контроля программа искусственного интеллекта. Сам искусственный интеллект давать комментарии отказался.

Главный компьютер

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

Отметим некоторые элементы использованные в примере. Символ &nbsp; - nonbreaking space - неразрываемый пробел, т.е. пробел по которому не может быть переноса строки.

Внутри разделов мы разделяли текст на абзацы (<p>) и использовали перенос строки (<br>). Эти элементы мы рассмотрим более подробно в следующем выпуске.

HTML5...

Стандарт HTML 4.01 рассматривает страницу как один документ. В результате этого мы можем определить только одну структуру заголовков для всего текста. В стандарте HTML5 каждый из новых структурных тегов может содержать независимый полный набор заголовков h1-h6.

CSS...

Посмотрим теперь как переопределить стиль отображения тегов заголовков. Допустим, мы хотим изменить размер, ориентацию и добавить определенные украшения для заголовков. Все это можно сделать с помощью CSS.

<style>
h1 {
  font-size: 24pt;
  color: red;
  text-align: center;
  margin: 5px;
  padding: 5px;
  border: 1px solid blue;
  background-color: lightyellow;
}
</style>

Что делает приведенный пример? Первая строка указывает какой тег мы будем переопределять (в примере h1). Далее: font-size: 24pt; - размер шрифта 24 точки, font-color: red; - красный цвет шрифта, text-align: center; - выравнивание по центру, margin: 5px; и padding: 5px; - внешний и внутренний отступ равен 5 точек, border: 1px solid blue; - синяя рамка толщиной в 1 точку, background-color: lightyellow; - светло желный цвет фона. Вы можете аналогично задать свойства для других элементов (например, h2).

Остались вопросы по теме выпуска? Задавайте их на нашем форуме. Мы отвечаем на все вопросы.

До новых встречь! Оставайтесь с нами.