HTML разметка для чайников
Для начала давайте определимся, что такое разметка? Как следует из самого термина, разметка – это расстановка меток, в нашем случае в коде хтмл документа, т.е. веб-страницы. В качестве меток здесь выступают теги, что позволяют определить границы действия разметки или создать элемент хтмл документа. Всё ещё непонятно? Тогда читайте дальше, и всё станет на свои места.
Основы разметки хтмал или что такое тег
Тег представляет собой конструкцию, начинающуюся знаком меньше (<) и заканчивающуюся знаком больше (>). Большинство тегов состоят из открывающегося и закрывающегося тегов. Отличие между ними состоит в том, что в открывающемся теге вы можете (если нужно) указать ряд дополнительных его свойств, используя так называемые атрибуты, а в начале названия закрывающегося тега указывается символ сэлш (/), например:
<p align=»right»>Текст параграфа, выровненный по правому краю.</p>.
В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.
Следует отметить, что в хтмл, теги бывают двух видов: блочными и строковыми. Блочные теги создают блочный элемент, зачастую имеющий отступы и ниже следующие элементы идут уже «с новой строки». Строчные теги предназначены для разметки фрагмента кода и не создают переноса строки.
Как говорится: в любом правиле есть исключения
– это же верно и для тегов. Существуют теги, которые не имеют закрывающего тега и предназначены они для создания меток и элементов хтмл документа, например:
<img alt=»альтернативный текст» src=»/2013/11/path/to/imagefile.jpg» border=»0″>
В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src. Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.
Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:
Краткий справочник по хтмл тегам
И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?
Как сделать ссылку? Для этого вам нужно использовать строковый тег A, который размечает содержащийся в нём текст как ссылку – активный элемент веб-страницы при клике на который пользователь может перейти на другую веб-страницу, адрес которой указан в атрибуте
| Пример | текст, со <a href=»http://www.wmascat.ru/»>ссылкой</a> на другую веб страницу. |
|---|---|
| Результат | текст, со ссылкой на другую веб страницу. |
Как выделить текст жирным? Для этого вам нужно использовать строковый тег B, который устанавливает для содержащегося в нём текста жирное начертание шрифта.
| Пример | текст, выделенный <b>жирным</b> шрифтом. |
|---|---|
| ЦСС аналог | текст, выделенный <span>жирным</span> шрифтом. |
| Результат | текст, выделенный жирным шрифтом. |
Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I, который устанавливает для содержащегося в нём текста курсивное начертание шрифта.
| Пример | текст, выделенный <i>курсивом</i>, т.е. с наклоном. |
|---|---|
| ЦСС аналог | текст, выделенный <span>курсивом</span>, т.е. с наклоном. |
| Результат | текст, выделенный курсивом, т.е. с наклоном. |
Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U, который добавляет подчеркивание для содержащегося в нём текста.
| Пример | текст, с добавлением <u>подчеркивания</u>. |
|---|---|
| ЦСС аналог | текст, с добавлением <span>подчеркивания</span>. |
| Результат | текст, с добавлением подчеркивания. |
Как зачеркнуть текст? Для этого вам нужно использовать строковой тег S, который отображает текст как перечеркнутый.
| Пример | текст, содержащий <s>зачеркнутое</s> слово. |
|---|---|
| ЦСС аналог | текст, содержащий <span>зачеркнутое</span> слово. |
| Результат | текст, содержащий зачеркнутое слово. |
Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE, который обычно отображается браузером моноширинным шрифтом, например Courier New.
| Пример | текст, выделенный как <code>программный код</code>. |
|---|---|
| ЦСС аналог | текст, выделенный как <span>программный код</span>. |
| Результат | текст, выделенный как программный код. |
Как оформить код в тексте? Для этого вам нужно использовать блочный тег PRE, который определяет блок программного кода, обычно отображается браузером моноширинным шрифтом. В отличие от строкового тега CODE, тег PRE сохраняет пробелы и переносы строк.
| Пример | <pre>форматированный текст и ещё один форматированный текст</pre> |
|---|---|
| Результат | форматированный текст и ещё один форматированный текст |
Как сделать текст больше?
Для этого вам нужно использовать строковой тег BIG, который увеличивает размер шрифта на единицу по сравнению с обычным текстом.| Пример | текст, выделенный <big>большим</big> шрифтом. |
|---|---|
| ЦСС аналог | текст, выделенный <span>большим</span> шрифтом. |
| Результат | текст, выделенный большим шрифтом. |
Как сделать текст меньше? Для этого вам нужно использовать строковой тег SMALL, который уменьшает размер шрифта на единицу по сравнению с обычным текстом.
| Пример | текст, выделенный <small>маленьким</small> шрифтом. |
|---|---|
| ЦСС аналог | текст, выделенный <span>маленьким</span> шрифтом. |
| Результат | текст, выделенный маленьким шрифтом. |
Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT. Атрибут color – цвет шрифта, а size – его размер в условных единицах (от -7 до 7).
| Пример | текст, выделенный другим <font face=»Arial» color=»#008000″ size=»5″>шрифтом и цветом</font>. |
|---|---|
| ЦСС аналог | текст, выделенный другим <span>шрифтом, цветом и размером</span>. |
| Результат | текст, выделенный другим шрифтом, цветом и размером. |
Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького), что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.
| Пример | <h2>Заголовок</h2> |
|---|---|
| Результат: | Заголовок |
Как сделать подстрочный шрифт? Для этого вам нужно использовать строковой тег SUB, который отображает шрифт в виде нижнего индекса, т.е. текст будет располагаться ниже базовой линии остальных символов строки и уменьшенного размера.
| Пример | текст, выделенный шрифтом в <sub>нижнем</sub> индексе. |
|---|---|
| ЦСС аналог | текст, выделенный шрифтом в <span>нижнем</span> индексе. |
| Результат | текст, выделенный шрифтом в нижнем индексе. |
Как сделать надстрочный шрифт? Для этого вам нужно использовать строковой тег SUP, который отображает шрифт в виде верхнего индекса, т.е. текст будет располагаться выше базовой линии остальных символов строки и уменьшенного размера.
| Пример | текст, выделенный шрифтом в <sup>верхнем</sup> индексе. |
|---|---|
| ЦСС аналог | текст, выделенный шрифтом в <span>верхнем</span> индексе. |
| Результат | текст, выделенный шрифтом в верхнем индексе. |
Как вставить цитату в текст? Для этого вам нужно использовать строчный тег Q, который используется для выделения в тексте цитат, которые автоматически отображаются браузером в кавычках.
| Пример | текст, содержащий: <q>цитату</q>. |
|---|---|
| ЦСС аналог | текст, содержащий: <span>цитату</span>. |
| Результат | текст, содержащий: цитату. |
Как оформить цитату в тексте? Для этого вам нужно использовать блочный тег BLOCKQUOTE, который предназначен для выделения длинных цитат в хтмл документе. Обычно такой текст отображается с отступами в 40 пикселей слева и справа, а также отбивкой сверху и снизу.
| Пример | <blockquote>Цитата</blockquote> |
|---|---|
| Результат | Цитата |
Как сделать перенос строки в тексте?
Для этого вам нужно использовать блочный тег BR, который устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца p, использование тега br не добавляет пустой отступ перед строкой.Как выделить фрагмент? Строковый тег SPAN не производит какого-либо преобразования со своим содержанием, что позволяет использовать его для задания цсс стилей заданной области. В данном случае указано цсс свойство text-decoration, которое добавляет оформление для текста, например: line-through – зачеркивание.
| Пример | текст, выделенный <span>спаном</span>. |
|---|---|
| Результат | текст, выделенный спаном. |
Как сделать слой в хтмл? Для этого вам нужно использовать блочный тег DIV, который создаёт слой без отступов.
| Пример | <div align=»right»>Блок.</div> |
|---|---|
| ЦСС аналог | <span>Блок.</div> |
| Результат | Блок. |
Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR, который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size – размер, а noshade – отключает трехмерный эффект.
| Пример | <hr color=»#008000″ size=»1″ noshade> |
|---|---|
| Результат |
Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL) и маркированный (UL). В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL. По умолчанию, в качестве маркера окружность (закрашенный кружочек), которая отображается в начале первой строки элемента списка, заданного тегом LI.
| Пример | <ul> <li>Элемент списка 1.</li> <li>Элемент списка 2.</li> </ul> |
|---|---|
| Результат |
|
Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!
Короткая ссылка: http://goo.gl/3tUuon
Учебник HTML 5. Статья «Теги разметки страницы»
Данная статья учебника посвящена такой теме как разметка страницы, рекомендую Вам максимально внимательно, а лучше несколько раз перечитать ее. Это связано с тем, что если вы поймете эту тему, то вы сможете без проблем создать каркас будущего сайта, что по большому счету и является главной целью этого учебника и языка гипертекстовой разметки.
Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.
Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный, но об этом чуть позднее.
В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег <span> вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Пример использования:
<!DOCTYPE html> <html> <head> <title>Теги <div> и <span></title> </head> <body> <div style = "color:green"> <p>Абзацы мы объединили тегом &lt;div&gt;, а это <span style = "color:red">слово</span> мы заключили тегом &lt;span&gt;.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег &lt;div&gt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &lt;span&gt;).</p> </div> </body> </html>
В этом примере мы:
- Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
- Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
- Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.
Результат нашего примера:
Рис. 42 Использование тегов разметки в HTML.Теги разметки страницы в HTML 5
Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.
Рис. 43 Человек, который использует только тег <div>.HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, давайте их детально рассмотрим.
Тег <header>
Тег <header> (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header> в одном документе.
<header> <img src = "logo.png" alt = "logo"> <!-- изображение с логотипом --> <h2>Заголовок первого уровня</h2> <!-- заголовок первого уровня --> </header>Рис. 43а Пример размещения тега <header> на странице.
Обращаю Ваше внимание, что запрещается помещать элемент <header> внутрь таких элементов, как <footer> (нижний колонтитул), <address> (определяет контактную информацию) или внутрь другого элемента <header>.
Тег <nav>
Тег <nav> (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>, например, один для навигации по сайту, а второй для навигации по странице.
<nav> <!-- начало навигации --> <ul> <!-- маркированный список --> <li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка --> <li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка --> <li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка --> </ul> <!--конец списка--> </nav> <!-- конец навигации -->Рис. 43б Пример размещения тега <nav> на странице.
Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav> внутри тега <footer> (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.
Тег <aside>
Тег <aside> (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому. Элемент <aside> представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.
<article> <!-- начало статьи --> <p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p> <aside> <!-- отступление (выносим информацию, например, на поля) --> <p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p> </aside> </article> <!-- конец статьи -->Рис. 43в Пример размещения тега <aside> на странице.
Тег <article>
Тег <article> (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение). Внутри тега <article> могут содержаться другие одноименные элементы с близким по смыслу содержимым.
<article> <!-- начало основной статьи --> <h2>Статьи о птицах</h2><!-- заголовок первого уровня (если был использован в документе, то h3, а во вложенных h4) --> <p>Вводная информация о птицах...</p> <article> <!-- начало первой вложенной статьи --> <h3>Статья о воробье</h3> <p>Информация про воробьев...</p> </article> <!-- конец первой вложенной статьи --> <article> <!-- начало второй вложенной статьи --> <h3>Статья о синице</h3> <p>Информация про синиц...</p> </article><!-- конец второй вложенной статьи --> </article> <!-- конец основной статьи -->Рис. 43г Пример размещения тега <article> на странице.
Тег <section>
Тег <section> (раздел) служит для группировки взаимосвязанного содержимого.
Не используйте элемент <section> в качестве универсального контейнера, для этих целей подходит элемент <div>. Раздел должен логически отображать структуру документа, например, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.
Данный тег часто используется при верстке целевых страниц (англ. landing page, «посадочная страница») для логического разделения страницы на разделы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение).
<section> <!-- начало первой вложенной статьи --> <h3>Первый раздел</h3> <p>Информация внутри раздела</p> </section> <!-- конец первой вложенной статьи --> <section> <!-- начало второй вложенной статьи --> <h3>Второй раздел</h3> <p>Информация внутри раздела</p> </section><!-- конец второй вложенной статьи -->Рис. 43д Пример размещения тега <section> на странице.
Совместное использование тегов <section> и <article>
Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article> использовать тег <section> (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article> и вложенные элементы <section> имели в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение внутри <article>).
Рис. 43е Пример размещения тега <section> внутри <article>.По аналогии с вышерассмотренным примером допускается помещать элементы <article> внутрь элементов <section>, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:
Рис. 43ж Пример размещения тега <article> внутри <section>.Допускается помещать элементы <section> (раздел) в другие элементы <section>, но при этом рекомендуется учитывать следующую структуру документа:
<body> <h2>Заголовок первого уровня</h2> <section> <h3>Заголовок второго уровня</h3> <section> <h4>Заголовок третьего уровня</h4> </section> </section>
Тег <footer>
Тег <footer> (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.
Обращаю Ваше внимание, что на количество тегов <footer> на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article>, чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.
<body> <h2>Важный заголовок</h2> <article> <!-- начало первой статьи --> <h3>Статья о бытие</h3> <p>Информация про бытие...</p> <footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи --> <address>Информация об авторе статьи</address> </footer> </article><!-- конец первой статьи --> <article> <!-- начало второй статьи --> <h3>Статья о бытие 2</h3> <p>Информация про бытие 2...</p> <footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи --> <address>Информация об авторе статьи</address> </footer> </article> <!-- конец второй статьи --> <footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта --> <address>Контактные данные автора сайта</address> </footer> </body>Рис. 43з Пример размещения тега <footer> на странице.
Тег <main>
Тег <main> предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.
Рис. 43и Пример размещения тега <main> на странице.Обращаю Ваше внимание, что тег <main> не должен быть потомком таких блоков как (не должен быть вложен в них):
Разметка для сайта на HTML 5
Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.
Хочу сразу оговориться, что в этом примере будет использовано CSS свойство, которое позволяет сделать элемент плавающим — содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать этот плавающий элемент. Не переживайте если вы сейчас не поймете работу этого свойства, так как нас сейчас больше интересует правильная разметка документа, а подробное изучение плавающих элементов будет рассмотрено в учебнике CSS в статье «Плавающие элементы».
<!DOCTYPE html> <html> <head> <title>Разметка страницы</title> </head> <body> <header style = "background-color:khaki; height:100px"> <p>Верхний колонтитул (тег <header>)</p> </header> <nav style = "background-color:coral; height:75px"> <a href = "#">Ссылка 1</a> | <a href = "#">Ссылка 2</a> | <a href = "#">Ссылка 3</a> | <p>Панель навигации (тег <nav>)</p> </nav> <aside style = "float:right; width:200px; height:250px; background-color:tan"> <p>Справа мы разместили тег <aside></p> </aside> <main style = "height:250px"> <h2>Главный заголовок сайта</h2> <p>Основное содержимое (тег <main>)</p> <section style = "background-color:grey; height:75px"> <h3>Заголовок второго уровня</h3> <p>Раздел 1 (тег <section>)</p> </section> <section style = "background-color:grey; height:75px"> <h3>Заголовок второго уровня</h3> <p>Раздел 2 (тег <section>)</p> </section> </main> <footer style = "background-color:khaki; height:80px"> <p>Нижний колонтитул (подвал) тег <footer></p> <address>Пример с сайта basicweb.ru</address> </footer> </body> </html>
Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.
И так по порядку, что мы сделали в этом документе:
- Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
- Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
- Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
- Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
- Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
- После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.
Результат нашего примера:
Рис. 44 Разметка страницы на HTML 5.
Разметка иллюстраций в HTML 5
Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.
Благодаря тегу <figcaption> вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>. Тег <figcaption> должен размещаться как первый, или последний элемент внутри тега <figure>.
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <figure></title> </head> <body> <main> <figure> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <figcaption>Ничоси 1</figcaption> </figure> <figure> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <figcaption>Ничоси 2</figcaption> </figure> </main> </body> </html>
В этом примере основное содержимое документа поместили внутри тега <main>, в который мы поместили два элемента <figure>, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> мы вывели текстовое пояснение к содержимому каждого элемента <figure>. Элемент <figcaption> мы разместитили перед закрывающим тегом </figure>.
Результат нашего примера:
Рис. 45 Разметка изображений в HTML 5.Обратите внимание, что если вы разместите элемент <figcaption> первым вложенным элементом тега <figure>, то пояснение будет отображаться сверху изображения:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <figcaption></title> </head> <body> <main> <figure> <figcaption>Ничоси 1</figcaption> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </figure> <figure> <figcaption>Ничоси 2</figcaption> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </figure> </main> </body> </html>
Результат нашего примера:
Рис. 46 Пример использования тега <figcaption>Скрытие содержимого в HTML 5
В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.
Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details> отображается для пользователя только если логический атрибут open установлен.
Тег <summary> определяет видимый заголовок для тега <details>. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).
Пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <details> и <summary></title> </head> <body> <details> <summary>Показать ? </summary> Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <details> <summary>Ещё? </summary> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </details> </details> </body> </html>
В этом примере мы использовали два элемента <details>, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>.
Результат нашего примера:
Рис. 47 Пример использование тегов <details> и <summary>.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующий одностраничный сайт посвященный енотам:
Практическое задание № 25.
Перед тем как приступать, внимательно изучите страницу, которую Вам необходимо будет повторить, открыв пример в отдельном окне.
Подсказка: в примере используются цвета coral и aliceblue.
После того, как вы выполните упражнение, пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.
Конспект «Разметка текста» — Разметка текста — HTML Academy
Списки
Неупорядоченный список
Тег <ul> (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.
Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка:
<ul>
<li>Я пункт списка, могу быть на любом месте</li>
<li>И я пункт списка, и мне тоже не важен порядок</li>
</ul>По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста.
Упорядоченный список
Тег <ol> (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.
Пункты упорядоченного списка тоже размечаются с помощью тега <li>. Пример кода:
<ol>
<li>Я первый и только первый пункт</li>
<li>Я не я, если я не второй пункт</li>
<li>Третий после стольких лет? Всегда!</li>
</ol>По умолчанию перед элементами <ol> ставится их порядковый номер. У <ol> может быть несколько атрибутов: start, reversed и type.
Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.
Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.
С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.
Список описаний
Тег <dl> (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:
<dl>обозначает сам список описаний;<dt>(сокращение от «description term») обозначает термин;<dd>(сокращение от «description definition») обозначает описание или определение.
Теги <dt> и <dd> пишутся внутри <dl>. Каждый список <dl> может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
<dd>Язык для оформления HTML-документов</dd>
</dl>По умолчанию браузер добавляет небольшой отступ слева от определений.
Преформатированный текст и код
Тег <pre> (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.
<pre>Пример
преформатированного
текста с сохранёнными пробелами
и переносами строк</pre>Тег <code>. Используется для обозначения фрагментов кода.
С его помощью размечается любой фрагмент текста, который распознается компьютером: код программы, разметки, название файла и так далее. Обычно браузеры отображают текст в теге <code> моноширинным шрифтом.
Тег <code>ul</code> — это неупорядоченный список.Тег <code> можно вкладывать внутрь тега <pre>.
Цитаты
Небольшие цитаты
Тег <q> (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.
Источник цитат
Тег <cite>. В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое <cite> в браузере выделяется курсивом.
<p>По словам <cite>Чарльза Буковски</cite> — <q>Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.</q></p>Тег <cite> может быть самостоятельным и не привязываться к цитате:
<p>Какой доктор ваш любимый (в сериале <cite>Доктор Кто</cite>)?</p>Длинные цитаты
Тег <blockquote>. Предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату не как фрагмент текста в предложении, а как отдельный блок текста с отступами.
<blockquote>
<p>Ум ценится дорого, когда дешевеет сила.</p>
<cite>Джейсон Стэтхэм</cite>
</blockquote>В браузере контенту тега <blockquote> обычно добавляется дополнительный отступ слева и справа.
Разметка фрагментов текста
Символы-мнемоники
Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):
Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом. Например, любой текст после знака меньше (<) браузер будет пытаться интерпретировать как тег и на странице не отобразит. Чтобы использовать специальные символы в тексте страницы как обычные символы их нужно заменить на символы-мнемоники.
<ul>
</ul>Перенос строк
Тег <br> (сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Верхний и нижний индексы
Теги <sup> и <sub>. Названия образованы от слов «superscript» и «subscript».
Тег <sup> отображает текст в виде верхнего индекса, а <sub> отображает текст в виде нижнего индекса.
Их используют для указания единиц измерения или для написания простых формул:
20м<sup>2</sup>
H<sub>2</sub>O
X<sup>3</sup>+X<sup>2</sup>=1Для создания более сложных формул, эти теги можно использовать внутри друг друга.
Дата и время
Тег <time>. С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:
<time datetime="2016-11-18T09:54">09:54 утра</time>
<time datetime="2015-11-18">18 ноября 2015</time>
<time datetime="2018-09-23">в прошлую субботу</time>
<time datetime="2017-04-20">вчера</time>Браузер отображает только содержимое тега, а содержимое datetime не отображается.
Акцентирование внимания
Теги <em> и <i>. Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.
Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Я <em>просто обожаю</em> холодные зимние дни!Тег <i> применяется для обозначения текста, который отличается от окружающего текста, но не является более важным. Например, в <i> можно заключать названия, термины, иностранные слова. Также в этот тег можно обернуть мысли героя. В речи такой текст обычно выделяется интонационно:
Он взглянул в окно и подумал — <i>такого просто не может быть</i>!Выделение и придание важности
Теги <strong> и <b>. Название <b> образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.
Тег <strong> указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом <strong> не должно изменять смысла предложения.
<strong>Внимание!</strong> Это место опасно. <strong>Вы можете упасть в пропасть</strong>, если подойдёте близко к краю.Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.
Вы входите в небольшую комнату. Ваш <b>меч</b> загорается ярче. <b>Крыса</b> стремительно пробегает вдоль стены.Описание изменений
Теги <del> и <ins>. Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.
Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.
Тег <ins> выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.
<ul>
<li>Почистить посудомоечную машину</li>
<li><del datetime="2009-10-11T01:25-07:00">Погулять</del></li>
<li><del datetime="2009-10-10T23:38-07:00">Поспать</del></li>
<li><ins>Купить принтер</ins></li>
</ul>Разделение контента
Теги <div> и <span>. Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Тег <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
Тег <span> используется для группировки текстовых элементов, выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее.
<article>
<div>
<p>…</p>
<p>…</p>
</div>
<p>Текст, в котором <span>выделена фраза</span></p>
</article>Продолжить
HTML для копирайтера или язык разметки текста
HTML и семантическая структура текста
За семантическую структуру отвечает язык текстовой разметки HTML (расшифровывается как Hyper Text Markup Language – язык разметки гипертекста, или текста, размещенного в интернете). С помощью HTML поисковые машины понимают, какие слова и фразы в статье важны, и по каким запросам показывать ваш материал.
Что такое тег?
Язык разметки HTML построен вокруг одного понятия – тег. Тег указывает поисковой системе, какие элементы Вашего текста важны, а какие — второстепенны.
Заголовок и подзаголовки ТЕГИ <h2-h6>
<h2> </h2> — заголовок. (в тексте только один)
<h3> </h3> — подзаголовок в статье. (в тексте сколько угодно)
<h4> </h4> — подзаголовки подразделов. (в тексте сколько угодно)
<h5> </h5> — ниже h5 на практике не используются подзаголовки.
Горизонтальная линия ТЕГ <hr />
<hr /> — тег не имеет закрывающей части, (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.
Абзац ТЕГИ <p> <br /> <div> <samp>
<p> </p> — тег оформляет абзац.
C помощью этого тега Вы задаете отступы сверху и снизу на странице.
<br /> — тег не имеет закрывающей части и используется, чтобы перейти на новую строку.
Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:
<div align=»center»>REDANTS HTML!</div>
<div align=»left»>REDANTS HTML!</div>
<div align=»right»>REDANTS HTML!</div>
<div align=»justify»>REDANTS HTML!</div>
Чтобы не переносить текст на следующую строку и в него нужно вставлять тег <p> по примеру:
<div>
<samp><p align=»left»>REDANTS пишем слева</p></samp>
<samp><p align=»right»>REDANTS пишем справа</p></samp>
<div>
<div> </div> — тег многофункциональный. Он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги. Работа с текстом это не основная задача тега <div>.
<samp> </samp> — тег используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление. Пример использования <samp> выше/ниже.
Важный полужирный текст и полужирный текст ТЕГИ <strong> <b>
<strong> </strong> — тег устанавливает важный полужирный текст.
Тег <strong> не используется в заголовках h2-h6.
<b> </b> — тег устанавливает полужирный текст.
Тег <b> можно использовать в заголовках h2-h6.
Стиль текста ТЕГИ <…>
<i> </i> — тегом физической разметки и устанавливает курсивный текст.
<em> </em> — тегом логической разметки и определяет важность помеченного текста.
Важно отметить, что теги <i> и <em>, также как <b> и <strong>, несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег <i> — является тегом физической разметки и устанавливает курсивный текст, а тег <em> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
<u> </u> — Подчеркнутый текст
<strike> </strike> — Перечеркнутый
<s> </s> — Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt> — моноширинный шрифт
<small> </small> — Малый
<big> </big> — Большой
<sup> </sup> — Верхний индекс
<sub> </sub> — Нижний индекс
Цвет текста и блока с текстом ТЕГИ <…>
Тег span — этот тег ничего не значит для SEO. Для SEO, если Вы в него заключите текст, ничего не произойдет. Смысл использования тега для придания фрагменту текста каких-то дополнительных свойств. Например цвета.
Пример палитры красок:
#000000
black
#ffffff
white
#ff0000
red
#ffa500
orange
#ffff00
yellow
#008000
green
#00ffff
cyan
#0000ff
blue
#800080
purple
Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — #ff0000 зелёный цвет, либо используя константы цвета — red.
Мы уже знакомы с тегом <span> у него есть еще один атрибут — color.
Так вот, если к примеру написать так:
<span>Красный REDANTS</span> — То цвет шрифта станет красным.
А можно так:
<span>Красный REDANTS</span> — Будет тоже самое.
Лучше писать всё шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых не все браузеры знают названия всех красок.
Тег типа шрифта <font>
Для SEO тип шрифтов лучше подгружать стилями на страницу и тегом <font> лучше не пользоваться.
<span>Эта строчка будет написана с помощью шрифта Arial</span>
А можно так:
<font face=»arial»>Эта строчка будет написана с помощью шрифта Arial</font>
Цитата ТЕГИ <blockquote> <q> <cite>
<blockquote> </blockquote> — этот тег цитаты. Для выделения длинных цитат, которые состоят из нескольких абзацев.
| ЦИТАТА
Еще
<q> </q> — этот тег предназначен для выделения коротких цитат в предложениях. Текст автоматически обрамляется кавычками.
<cite> </cite> — этот тег используется для того, чтобы выделить источник цитаты.
Изображение ТЕГ <img>
Тег <img> является одиночным и не имеет закрывающего аналога. У изображения есть два скрытых атрибута, которые влияют на SEO. Это alt (альтернативный текст, который показывается в ситуациях, когда изображения отключены) и title (заголовок изображения, показывается при наведении на изображение курсором мыши).
<img src=»http://redants.ru/images/page/2_12.jpg» alt=»Редантс ребрендинг 2016″ title=»Редантс ребрендинг 2016″ />
Вот как выглядит изображение в интерпретации браузера.
Нумерованные и ненумерованные списки ТЕГИ <ol> <ul>
<ol> </ol> — нумерованный список
Выглядит вот так нумерованный список:
- 1. Иванов
- 2. Петров
- 3. Сидоров
<ol>
<li>Иванов</li>
<li>Петров</li>
<li>Сидоров</li>
</ol>
<ul> </ul> — ненумерованный список
Выглядит вот так ненумерованный список:
- — Иванов
- — Петров
- — Сидоров
<ul>
<li>Иванов</li>
<li>Петров</li>
<li>Сидоров</li>
</ul>
Красные муравьи ⊙..⊙
To be continued…
HTML-разметка
<<Назад | Содержание | Далее>>
HTML (HyperText Markup Language) не является языком программирования, он является языком форматирования, т.е. придания внешнего вида web-странице, при ее присмотре в браузере. Для разметки документа используются теги. Теги заключаются в угловые скобки, и, за редким исключением, являются парными, т.е. существует открывающий и закрывающий тег. Например, чтобы отметить начало нового абзаца в документе ставится тег <p> (от paragraph). Тогда в конце абзаца обязательно должен ставиться закрывающий тег </p>.
При расстановке тегов соблюдается правило: закрываются теги в порядке обратном их появлению. Например, если слово в тексте должно быть выделено жирностью (тег <b> от bold) и одновременно курсивом (тег <i> от italic), то это может быть сделано одним из следующих способов: <b><i>слово</i></b>, или <i><b>слово</b></i>.
Ниже приводится текст некоторого html-документа и результат его отображения в браузере:
<html>
<body bgcolor=#ffffff text=#0000cc>
<h2>Доброе время суток, уважаемый посетитель!</h2>
<p><img src=»pic1.gif» align=»left»>Надеюсь, вы попали как раз туда, куда хотели. </p>
<p>Здесь вы найдете <a href=»verse.html»>стихи</a> , <a href=»song.html»>песни</a> и <a href=»scen.html»>сценарии</a> для организации любых праздников. </p>
<p>А теперь специальный подарок к <font color=#ff0000><b>1 сентября</b></font></p>
<p>Он к «пятерочкам» привык — <br>
Русский пять и пение. <br>
Мне всегда его дневник <br>
Портит настроение. </p>
</body>
|
Рис. 74. Отображение приведенной в примере html-страницы в окне браузера. |
В приведенном примере использованы следующие теги:
<html> … </html> — указывает на то, что заключенный между этими тегами текст должен восприниматься как html.
<body> … </body> — тело html-документа. Параметр bgcolor (background color) задает цвет фона, text – цвет текста. Цвета задаются в шестнадцатеричной системе счисления по модели RGB. Например, #ffffff означает, R=#ff, G=#ff, B=#ff, т.е. по максимуму каждого из трех цветов. Мы знаем, что смешение трех основных цветов в системе RGB в равных долях с максимальной интенсивностью дает чистый белый цвет.
<h2> … </h2> — заголовок первого уровня, задает определенное для данного стиля форматирование: размер шрифта, отступы до и после заголовка, выравнивание и т.п.
<p> … </p> — абзац текста.
<img src=»pic1.gif» align=»left»> — непарный тег img (от image), управляющий вставкой в гипертекстовый документ графических иллюстраций. В данном случае, вставляется графический файл с именем pic1.gif, находящийся в том же каталоге, что и данный html-документ. Если вы обратите внимание на URL-документа, отображенный на рисунке в строке “адрес”, то сможете определить, что данный документ был сохранен под именем “index.html” в папке “Мои документы” на диске C. Параметр align управляет выравниванием иллюстрации относительно текста html-страницы. В данном случае значение параметра = “left”, задает выравнивание по левому краю и разрешает обтекание текстом.
<a href=»verse.html»> … </a> — тег вставки гиперссылки. При активации данной ссылки в окне браузера загрузится уже другой документ, который в данном случае также должен быть сохранен в той же папке и должен именоваться verse.html.
<font color=#ff0000> … </font> — выделение цветом. В данном случае цвет будет красным (R=#ff, G=#00, B=#00).
<b> … </b> — выделение жирностью.
<br> — непарный тег – принудительный разрыв строки (break) внутри текущего абзаца.
Существуют свои теги и для форматирования таблиц, и для организации списков. Освоить язык гипертекстовой разметки достаточно просто, и достаточно просто, при желании, создать и опубликовать в сети Интернет собственный web-сайт.
<<Назад | Содержание | Далее>>
НОУ ИНТУИТ | Лекция | Разметка текста в HTML
Аннотация: В лекции рассматриваются основные блочные и строковые элементы HTML, используемые для структурирования и форматирования текста.
Структурирование текста
Как было отмечено в «Введение в HTML» , все элементы HTML делятся на блочные и строковые. Блочный элемент обычно информирует о структуре документа, начинается с новой строки и отделяется от предыдущего и последующего блока пустой строкой определенной ширины. Блочные элементы могут содержать строковые элементы. В данном разделе будут рассмотрены основные блочные элементы, предназначенные для структурирования текста.
Заголовки разделов страниц: элементы h2…H6
HTML предлагает шесть заголовков разного уровня, для задания которых используются элементы h2, h3, …, H6. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент h2 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент H6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:
<h2>Заголовок 1-го уровня</h2> <h3>Заголовок 2-го уровня</h3> <h4>Заголовок 3-го уровня</h4> <h5>Заголовок 4-го уровня</h5> <H5>Заголовок 5-го уровня</H5> <H6>Заголовок 6-го уровня</H6>
А на рисунке 6.1 представлен вид заголовков различного уровня в браузере.
Рис. 6.1. Вид различных заголовков в браузере
Стандартные параграфы: элемент P
Неприятной особенность браузеров является то, что они не обрабатывают символы перевода строки. Т.е. текст, который разработчик набрал на своем компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, удалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент P. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот, приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:
<P>Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.</P>
Предварительно форматированный текст: элемент PRE
Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского «Блек энд Уайт» с помощью элементов P и SAMP. Результат представлен на рисунке 6.2.
Если
Гаванну
окинуть мигом -
рай-страна,
страна что надо.
<PRE>
Если
Гаванну
окинуть мигом -
рай-страна,
страна что надо.
</PRE>Рис. 6.2. Пример использования элементов P и SAMP
Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB и SUP.