Как сделать разметку страниц в html

Как сделать разметку страниц в html
Как сделать разметку страниц в html
Как сделать разметку страниц в html
Как сделать разметку страниц в html
Как сделать разметку страниц в html

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

Теги <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>Абзацы мы объединили тегом &amplt;div&ampgt;, а это <span style = "color:red">слово</span> мы заключили тегом &amplt;span&ampgt;.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег &amplt;div&ampgt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &amplt;span&ampgt;).</p> </div> </body> </html>

В этом примере мы:

  • Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
  • Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
  • Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Рис. 42 Использование тегов разметки в HTML. Рис. 42 Использование тегов разметки в HTML.

Теги разметки страницы в HTML 5

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>. Рис. 43 Человек, который использует только тег .

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

Тег <header>html5

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

<header> <img src = "logo.png" alt = "logo"> <!-- изображение с логотипом --> <h1>Заголовок первого уровня</h1> <!-- заголовок первого уровня --> </header> Рис. 43а Пример размещения тега <header> на странице. Рис. 43а Пример размещения тега на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header>html5 внутрь таких элементов, как <footer>html5 (нижний колонтитул), <address>html5 (определяет контактную информацию) или внутрь другого элемента <header>html5.

Тег <nav>html5

Тег <nav>html5 (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>html5, например, один для навигации по сайту, а второй для навигации по странице.

<nav> <!-- начало навигации --> <ul> <!-- маркированный список --> <li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка --> <li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка --> <li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка --> </ul> <!--конец списка--> </nav> <!-- конец навигации --> Рис. 43б Пример размещения тега <nav> на странице. Рис. 43б Пример размещения тега на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>html5, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav>html5 внутри тега <footer>html5 (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.

Тег <aside>html5

Тег <aside>html5 (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому. Элемент <aside>html5 представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.

<article> <!-- начало статьи --> <p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p> <aside> <!-- отступление (выносим информацию, например, на поля) --> <p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p> </aside> </article> <!-- конец статьи --> Рис. 43в Пример размещения тега <aside> на странице. Рис. 43в Пример размещения тега на странице.

Тег <article>html5

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

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение). Внутри тега <article>html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

<article> <!-- начало основной статьи --> <h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) --> <p>Вводная информация о птицах...</p> <article> <!-- начало первой вложенной статьи --> <h2>Статья о воробье</h2> <p>Информация про воробьев...</p> </article> <!-- конец первой вложенной статьи --> <article> <!-- начало второй вложенной статьи --> <h2>Статья о синице</h2> <p>Информация про синиц...</p> </article><!-- конец второй вложенной статьи --> </article> <!-- конец основной статьи --> Рис. 43г Пример размещения тега <article> на странице. Рис. 43г Пример размещения тега на странице.

Тег <section>html5

Тег <section>html5 (раздел) служит для группировки взаимосвязанного содержимого.

Не используйте элемент <section>html5 в качестве универсального контейнера, для этих целей подходит элемент <div>. Раздел должен логически отображать структуру документа, например, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.

Данный тег часто используется при верстке целевых страниц (англ. landing page, "посадочная страница") для логического разделения страницы на разделы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение).

<section> <!-- начало первой вложенной статьи --> <h2>Первый раздел</h2> <p>Информация внутри раздела</p> </section> <!-- конец первой вложенной статьи --> <section> <!-- начало второй вложенной статьи --> <h2>Второй раздел</h2> <p>Информация внутри раздела</p> </section><!-- конец второй вложенной статьи --> Рис. 43д Пример размещения тега <section> на странице. Рис. 43д Пример размещения тега на странице.

Совместное использование тегов <section>html5 и <article>html5

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article>html5 использовать тег <section>html5 (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article>html5 и вложенные элементы <section>html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article>html5).

Рис. 43е Пример размещения тега <section> внутри <article>. Рис. 43е Пример размещения тега внутри .

По аналогии с вышерассмотренным примером допускается помещать элементы <article>html5 внутрь элементов <section>html5, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Рис. 43ж Пример размещения тега <article> внутри <section>. Рис. 43ж Пример размещения тега внутри .

Допускается помещать элементы <section>html5 (раздел) в другие элементы <section>html5, но при этом рекомендуется учитывать следующую структуру документа:

<body> <h1>Заголовок первого уровня</h1> <section> <h2>Заголовок второго уровня</h2> <section> <h3>Заголовок третьего уровня</h3> </section> </section>

Тег <footer>html5

Тег <footer>html5 (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

Обращаю Ваше внимание, что на количество тегов <footer>html5 на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article>html5, чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.

<body> <h1>Важный заголовок</h1> <article> <!-- начало первой статьи --> <h2>Статья о бытие</h2> <p>Информация про бытие...</p> <footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи --> <address>Информация об авторе статьи</address> </footer> </article><!-- конец первой статьи --> <article> <!-- начало второй статьи --> <h2>Статья о бытие 2</h2> <p>Информация про бытие 2...</p> <footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи --> <address>Информация об авторе статьи</address> </footer> </article> <!-- конец второй статьи --> <footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта --> <address>Контактные данные автора сайта</address> </footer> </body> Рис. 43з Пример размещения тега <footer> на странице. Рис. 43з Пример размещения тега на странице.

Тег <main>html5

Тег <main>html5 предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.

Рис. 43и Пример размещения тега <main> на странице. Рис. 43и Пример размещения тега на странице.

Обращаю Ваше внимание, что тег <main>html5 не должен быть потомком таких блоков как (не должен быть вложен в них):

  • Тег <nav>html5 (навигация).
  • Тег <header>html5 (верхний колонтитул).
  • Тег <footer>html5 (нижний колонтитул).
  • Тег <aside>html5 (отступление).
  • Тег <article>html5 (статья).

Разметка для сайта на 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"> <h1>Главный заголовок сайта</h1> <p>Основное содержимое (тег <main>)</p> <section style = "background-color:grey; height:75px"> <h2>Заголовок второго уровня</h2> <p>Раздел 1 (тег <section>)</p> </section> <section style = "background-color:grey; height:75px"> <h2>Заголовок второго уровня</h2> <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>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5

Рис. 44 Разметка страницы на HTML 5.

Разметка иллюстраций в HTML 5

Тег <figure>html5 применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure>html5 может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption>html5 вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>html5. Тег <figcaption>html5 должен размещаться как первый, или последний элемент внутри тега <figure>html5.

Давайте рассмотрим пример использования:

<!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>html5, в который мы поместили два элемента <figure>html5, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption>html5 мы вывели текстовое пояснение к содержимому каждого элемента <figure>html5. Элемент <figcaption>html5 мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Рис. 45 Разметка изображений в HTML 5. Рис. 45 Разметка изображений в HTML 5.

Обратите внимание, что если вы разместите элемент <figcaption>html5 первым вложенным элементом тега <figure>html5, то пояснение будет отображаться сверху изображения:

<!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>. Рис. 46 Пример использования тега

Скрытие содержимого в HTML 5

В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.

Тег <details>html5 определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details>html5 отображается для пользователя только если логический атрибут openhtml5 установлен.

Тег <summary>html5 определяет видимый заголовок для тега <details>html5. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

Пример использования:

<!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>html5, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>html5.

Результат нашего примера:

Рис. 46 Использование тега <details>. Рис. 47 Пример использование тегов и .

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий одностраничный сайт посвященный енотам:

Практическое задание № 25.

Практическое задание № 25.

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

Подсказка: в примере используются цвета coral и aliceblue.

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


© 2016-2018 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу

Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html Как сделать разметку страниц в html

Изучаем далее:



Как сделать цветок мака на голову

Как сделать ушко на ключ

Схемы овальных ковриков крючком из пакетов

Hyundai getz 2008 схема электрооборудования

Бампер уаз 469 своими руками чертежи