Блочные и линейные элементы
Все элементы страницы можно разделить на два типа: блочные и линейные.
Содержание
Блочные элементы
Блочные элементы занимают всю доступную ширину и располагаются один под другим. Перенос слов осуществляется в границах блочного элемента.
Как пример блочных элементов можно привести абзацы. Абзацы выстраиваются один под другим, занимают всю ширину страницы. Текст в абзацах переносится по словам.
Абзацы <p>
Абзацы — основной структурный элемент Web-страницы.
Абзацы создаются с помощью элемента <p>. Его имя происходит от английского слова «paragraph» — «абзац».
Между тегами <p> и </p>распологается текст абзаца.
|
1 2 3 4 5 6 |
<p> Тут находится текст первого абзаца. </p> <p> Тут находится текст второго абзаца. </p> |
Текст в абзацах переносится автоматически. Абзацы являются блочными элементами. В абзацы нельзя включать другие блочные элементы. Элементы <p> включаются в элемент <body>.
Заголовки
Заголовки бывают шести уровней.
Заголовок первого уровня является названием страницы. Он создаётся с помощью элемента <h1>. Заголовок второго уровня разбивает страницу на логические разделы. Он создаётся с помощью элемента <h2>. Заголовок третьего уровня разбивает разделы на смысловые части. Он создаётся с помощью элемента <h3> и т.д.
Первым элементом на странице всегда должен быть элемент <h1>.
Заголовки являются блочными элементами.
Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> включаются в элемент <body>.
Размеченный текст <pre>
В XHTML пробелы и начала строк игнорируются. Если нужно обойти такое стандартное поведение обозревателя, применяют элемент <pre>. Текст внутри элемента <pre> выводится в том же виде, в каком он был сохранён, с соблюдением всех пробелов и новых строк.
|
1 2 3 4 5 6 |
<pre> Тут будут сохранены все пробелы и строки. </pre> |
Элемент <pre> удобен для листингов — исходных кодов программ. Он позволяет сохранить все отступы. Элементы <pre> включаются в элемент <body>.
Линейные элементы
Линейные элементы занимают ровно столько места, сколько им необходимо. При необходимости, линейный элемент может разорваться и продолжиться на следующей строке. Линейные элементы располагаются слева направо и могут свободно включаться в текст.
К линейным элементам относятся элементы логического форматирования: <strong> и <em> и ссылки — элемент <a>.
Элементы «усиление» и «эмфазис»
Линейные элементы <strong> и <em> используются для расстановки логических ударений в тексте. Поскольку эти элементы линейны, они позволяют выделить букву, слово или фразу.
Обычно <strong> отображается полужирным, а <em> — курсивом. Но это стандартное поведение легко может быть переопределено в стилях.
Сосуществование блочных и линейных элементов
Линейные элементы могут включаться как в блочные, так и в линейные элементы. Блочные элементы включаются только в блочные элементы. В абзацы никакие блочные элементы включаться не могут.
В линейные элементы нельзя включать блочные, так как при этом нарушаются сами определения блочности и линейности.
Ссылки
С помощью элемента <a> создаются ссылки с Web-страницы на различные ресурсы.
Для элемента <a> определён обязательный атрибут href, задающий подключаемый ресурс.
|
1 |
<a href="ресурс">текст ссылки</a> |
Ссылки являются линейными элементами. Элементы <a> включаются в элемент <body> и в другие блочные и линейные элементы.
<a> нельзя включать другие элементы <a>.Атрибут href
Атрибут href задаёт ресурс, на который указывает ссылка.
Если файл, на который производится ссылка, находится в той же папке, что Web-страница, как значение атрибута href указывается просто имя этого файла (обязательно с расширением) с соблюдением регистра. Например, в этой папке есть файл archive.zip. Ссылку на него можно создать таким образом:
|
1 2 3 4 5 6 |
<body> <h1>ЗАКАЧКА ФАЙЛА</h1> <p> Здесь находится <a href="archive.zip">архив</a> программы. </p> </body> |
А если определить для ссылки и атрибут title, код изменится следующим образом:
|
1 2 3 4 5 6 |
<body> <h1>ЗАКАЧКА ФАЙЛА</h1> <p> Здесь находится <a href="archive.zip" title="Для закачки щелкнуть">архив</a> программы. </p> </body> |
Если подвести указатель к ссылке, появится всплывающая подсказка.
Атрибут title
Атрибут title позволяет определить всплывающую подсказку. Значение атрибута title и будет её текстом.
Атрибут title определён для всех элементов, то есть любому элементу может быть назначена всплывающая подсказка.
|
1 |
<body title="Всплывающая подсказка."></body> |
|
1 |
<p title="Всплывающая подсказка."></p> |
|
1 |
<strong title="Всплывающая подсказка."></strong> |
|
1 |
<a href="имя-файла" title="Всплывающая подсказка."></a> |
Старайтесь пояснять все непонятные фрагменты документа. Это облегчит его восприятие конечными посетителями и, значит, будет способствовать успеху Вашего проекта.