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

Обновлено: 07.07.2024

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

Шаг 1 – Разметка веб страницы с помощью тегов HTML

Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.

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

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

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

Обращаю Ваше внимание на то, что элементы

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

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

В отличии от блочного элемента

inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег вы можете использовать для таких задач как:

Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.

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

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

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

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

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

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

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

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

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

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

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

Fictive Company Blog

a blog showcasing the übercoolness of HTML5 & CSS3

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h2 и h3.

Элемент hgroup используется для группирования набора элементов h2-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h2).

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Таблица содержания (TOC) в длинном документе;

Согласно спецификации, это могут быть подходящие или неподходящие случаи употребления элемента nav. Спецификация не очень четкая, а приводимые примеры не слишком помогают. Так что пока спецификация не окончательная и более конкретная, для выбора правильного метода использования элемента nav можно полагаться только на сообщество разработчиков.

Элемент Article

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

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Элемент Footer

Как я уже говорил, нижний колонтитул footer можно использовать на одной странице столько раз, сколько нужно, и он представляет собой сегмент нижнего колонтитула страницы документа или часть документа.

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

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

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

Последнее слово

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

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

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Краткий курс HTML 5. Разметка веб-страницы — Exlab

11. Разметка веб-страницы

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

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного

), но позволяют использовать глобальные атрибуты class и id . А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

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

Но сначала следует упомянуть, что теги

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

Для разметки веб-страницы HTML 5 предлагает несколько тегов с различным лексическим значением. В них можно помещать главы, колонтитулы и прочие структурные единицы.

Верхний и нижний колонтитулы обозначаются тегами и соответственно. Верхний (шапка) может содержать заголовок, вводную информацию о документе, навигационные ссылки (см. элемент ниже), форму поиска, логотип и т п. Аналогичным образом нижний колонтитул включает информацию, размещаемую в конце документа. Например, данные об авторе, дату составления и прочее. Если вы хотите добавить контактную информацию, то не забудьте поместить ее в элемент .

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

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

Обратите внимание на заголовок документа, который вы сейчас читаете. Он состоит из названия курса (более крупным шрифтом) и главы (более мелким). Для подобного группирования тегов

, являющихся частями одного заголовка, предназначен тег .

Еще одним группирующим элементом является . Обычно в него помещается самодостаточная информация, отсутствие или перенос которой в другое место не исказит смысл документа. Чаще всего это иллюстрации, диаграммы, фотографии с кратким комментарием или без него. Такой информационный блок можно озаглавить с помощью тега , который должен располагаться внутри в качестве первого или последнего дочернего элемента.

Необязательные теги HTML5-разметки

В спецификации HTML5 некоторые правила разметки были ослаблены. В частности, использование элементов , и уже не является обязательным для разметки HTML5. Тем не менее браузер все равно считает, что они существуют, в чем можно убедиться, просмотрев разметку веб-страницы в Mоzilla Firebug или в Google Chrome Inspector.

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

1. Элемент

Начальный тег может быть опущен, если сразу за тегом не идет комментарий:

Закрывающий тег также может быть опущен, если перед ним нет комментария.

2. Элемент

Начальный тег может быть опущен, если элемент пуст, или если сразу после него идет другой HTML-элемент.
Закрывающий тег может быть опущен, если он не следует сразу за пробелом или за комментарием.

Как следует из предыдущей главы, HTML является языком разметки задача которого — просто "размечать" текстовый документ используя теги, которые, в свою очередь, говорят веб - браузеру, как именно нужно отобразить данный документ.

Создание HTML документов

Для того, чтобы создать HTML документ необходимо:

Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
Набрать произвольный текст и разметить его HTML тегами;
Cохранить файл с расширением .htm или .html.

Базовый документ HTML

Ниже приведен в своей простейшей форме пример HTML-документа:

Пример HTML:

Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML - кода, или сохраните код в HTML - файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб - браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

HTML теги

Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег

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

Введение в HTML

HTML – это язык гипертекстовой разметки

Гипертекст – это текст, в который включена ссылка.
Язык разметки определяет расположение информации макета в документе.

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

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

HTML – это исходный язык разметки для сети. Однако, он используется, чтобы создать статичные веб страницы без интерактивности и анимации. HTML5, последняя версия HTML, добавляет улучшенную поддержку для добавления таких медиа файлов, как видео и аудио.

HTML5

HTML5 – это улучшенная версия, с помощью которой можно пользоваться большими возможностями. Если вы привыкли к прошлым версиям, и не хотите пользоваться этой, то вы наверняка не знаете, что теперь HTML может определять, каким образом выглядят видео, изображения и текст на экране браузера.

HTML5 является пятым выпуском HTML. Синтаксис HTML5 согласован с основным синтаксисом HTML4 и XHTML1. Но в чем же различия? HTML5 осуществляет поддержку видео и аудио. HTML5 стал одним из мощных инструментов для дизайна веб-страницы. В HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. Среди прочего, HTML5 поддерживает хранение информации на стороне клиента. Пользователь может пользоваться этой функцией offline для поддержки веб-приложений.

Сеть и HTML

Сеть включает в себя взаимосвязанные веб-страницы и приложения, а также изображения, видео, анимацию и интерактивный контент. Язык разметки формирует основу сети. Такие языки применялись еще тогда, когда вебсайты были очень простыми. Языки разметки и в дальнейшем будут частью Интернета, его развития и будущего.

HTML – это основная разметка для всех веб-страниц, поэтому он все еще являются основным навыком веб-разработчиков и дизайнеров. HTML является наиболее часто используемой разметкой, и большинство документов в Интернете хранятся и передаются в формате HTML.

Согласно исследованию W3Techs, HTML язык используется на 74.3% вебсайтах.

Читайте также: