Как сделать 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, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.



Источник: http://basicweb.ru/html/razmetka.php


Как сделать html разметку

Как сделать html разметку

Как сделать html разметку

Как сделать html разметку

Как сделать html разметку

Как сделать html разметку

Как сделать html разметку