Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 2:

Текстовые элементы HTML

Аннотация: Параграфы, заголовки, элементы логического и физического форматирования текста. Списки, гиперссылки.

Разобравшись со структурой HTML-документа, логично перейти к изучению того, как наполнять документ содержанием. В первую очередь, это текст. Как уже говорилось, текст в html-файл можно поместить и безо всякой структуры. Однако, если соблюдать правила, то следует выбрать для текста подходящий контейнер и разместить его в элементе body.

Рассмотрим наиболее важные текстовые контейнеры.

Заголовки и абзацы

Заголовок (h1..h6 - header 1...6)

Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц.

Элемент h1 определяет наиболее крупный заголовок; h6 - наименее крупный. Заголовки h1 должны использоваться как главные заголовки, сопровождаемые заголовками h2, затем менее важными заголовками h3, и так далее. Обычно авторы применяют h1 для названия документа, h2 для названий разделов и т.д.

<h1>
    Это заголовок 1</h1>
  <h2>
    Это заголовок 2</h2>
  <h3>
    Это заголовок 3</h3>
  <h4>
    Это заголовок 4</h4>
  <h5>
    Это заголовок 5</h5>
  <h6>
    Это заголовок 6</h6>
Листинг 2.1. Заголовки уровней 1-6
Заголовки уровней 1-6

Рис. 2.1. Заголовки уровней 1-6

Обратите внимание, что каждый заголовок располагается на новой строке и имеет вертикальный отступ от соседних элементов. Первое свидетельствует о том, что заголовок - элемент блочный, т.е. всегда вызывает разрыв строки до и после себя. Второе означает, что предопределённые значения отступов для этого элемента отличны от нуля (как их можно регулировать, далее будет рассматриваться).

Абзац (p - paragraph)

Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты.

p {
      text-indent: 2.5em;
      margin-top: 0.2em;
      margin-bottom: 0.2em;
    }
  ...
  <p>
    По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным
    отступом, что эквивалентно установке свойств margin-top и margin-bottom
    в некоторое отличное от нуля значение.
  </p>
  <p>
    В данном примере этим свойствам задано небольшое значение (0.2em, т.е.
    20% высоты символа M).
  </p>
  <p>
    Вместо этого абзацы разделены отступом первой строки, который задан CSS-свойством
    text-indent.
  </p>
Листинг 2.2. Разделение абзацев отступом первой строки
Разделение абзацев отступом первой строки

Рис. 2.2. Разделение абзацев отступом первой строки
p {
      text-indent: 2.5em;
      margin-top: 0.2em;
      margin-bottom: 0.2em;
    }
    p:first-letter {
      font-weight: bold;
      font-size: 2em;
      color: Red;
    }
  ...
  <p>
    Буквица - ещё один эффект, применяемый для визуального выделения начала
    абзаца. В CSS он может быть достигнут путём применения специфического
    стиля к первой букве абзаца.
  </p>
  <p>
    Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter.
    Для этого псевдоэлемента в данном примере назначена высота 2em и красный
    полужирный шрифт.
  </p>
Листинг 2.3. Разделение абзацев выделением первой буквы
Разделение абзацев выделением первой буквы

Рис. 2.3. Разделение абзацев выделением первой буквы
Упражнение.

Попробуйте переформатировать текст одного из абзацев путём вставки в него пробелов для увеличения отступа и разбивки на строки путём нажатия клавиши Enter. Убедитесь, что форматирование HTML-кода такими средствами никак не влияет на отображение документа браузером, т.е. для разбивки текста на абзацы необходим элемент p, а для их разделения - один из рассматриваемых в данном примере способов.

Как видно из примеров, в теле HTML-документа расположены несколько абзацев, и никакого форматирования. Однако форматирование к абзацам всё же применяется, поскольку к HTML-документу подключена таблица стилей. Это достигается путём включения в "шапку" HTML-документа следующей ссылки:

<link rel="Stylesheet" href="Style.css" />

Подробно эта директива и другие способы подключения таблиц стилей описаны в лекции "Каскадные стили". Пока достаточно понять, что таблица стилей "Style.css" учитывается браузером при форматировании HTML-документа.

В таблице стилей содержится определение стиля элемента p (т.е. абзаца). Об определениях стилей также речь пойдёт позже, однако на текущий момент вполне достаточно понимания того, что свойства, указанные в стиле для элемента p, будут применены ко всем абзацам документа.

Остановимся подробно на этих свойствах:

  • margin-top Верхнее поле, т.е. расстояние от верхней границы элемента (в данном случае, абзаца) до других элементов.
  • margin-bottom Нижнее поле, т.е. расстояние от нижней границы элемента до других элементов.

Единица измерения, использованная в данном примере для задания высоты поля - em, что означает "равна высоте шрифта" ( em - латинская буква m, напечатанная шрифтом Cicero - стандартная единица измерения в полиграфии) . Соответственно, 0.5em означает "равно половине высоты шрифта".

Упражнение.

Попробуйте уменьшать и увеличивать значения margin-top и margin-bottom, наблюдая за результатом.

Затем уберите совсем объявления полей. В результате поля увеличатся! Это происходит потому, что браузеры используют по умолчанию не нулевые значения полей, а такие, как вы увидели, проделав это упражнение.
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Галина Матрук
Галина Матрук
Молдова, Республика, Кишинев, UTM, 2010