Лабораторная работа 9.2

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009

ВЕРСТКА С ПОМОЩЬЮ СЛОЕВ. ВСТРОЕННЫЕ ЭЛЕМЕНТЫ

Лабораторная работа 9.2.

Встроенные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов.

Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги < SPAN >, < A >, < Q >, < CODE > и др. В основном они используются для изменения вида текста или его логического выделения.

Для этой цели обычно применяется универсальный тег < SPAN >, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счет чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Разница между блочными и встроенными элементами следующая:

- встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.

- блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.

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

Для верстки встроенные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь встроенных элементов не допускается вкладывать контейнеры < DIV >, < P > и подобные широко распространенные теги. Тем не менее, блочные и встроенные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.

1.1. В следующем примере показано использование тега < SPAN > для выделения отдельных слов (файл sloi_6.html).

Результат примера показан ниже (рис. 1).

Рис. 1. Текст, оформленный с помощью стилей

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

1.2. Встроенные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через аргумент inline (файл sloi_7.html).

Результат примера приведен на рис. 2.

Рис. 2. Замена блочного элемента на встроенный

В данном примере блочный тег < P > отображается на веб-странице как встроенный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег < P > в виде встроенного элемента. В принципе, аналогичным решением будет использовать вместо < P > тег < SPAN >.

1.3. Встроенные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. Ниже показано, как рисунок накладывать поверх блока с текстом.

Результат примера представлен на рис. 3.

Рис. 3. Положение рисунка относительно текста

В данном примере изменение положения слоя происходит за счет установки относительного позиционирования (параметр position со значением relative) с последующим сдвигом относительно исходного расположения. Для чего применяются параметры left и top. Заметьте, что первоначальное место, где была картинка, резервируется, поэтому ниже текста и рисунка имеется достаточно большой отступ.

1.4. Можно отказаться от добавления тега < DIV >, заменив его тегом < SPAN > и таким образом, полностью перейти на встроенные элементы. Полученный результат, естественно, будет отличаться своим видом, также придется несколько подкорректировать и стили (файл sloi_8.html).

Результат примера показан ниже (рис. 4).

Рис. 4. Положение рисунка относительно текста

За счет того, что тег < SPAN > не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.