Как сделать контент html
Обновлено: 07.07.2024
Статья, посвящённая рассмотрению моделей контента, используемых в спецификации HTML 5 и категорий в которых может находиться каждая из этих моделей. Понимание этих моделей является ключевым шагом в понимании семантики языка HTML 5. Осмысление моделей контента позволит любым авторам, чья работа связана с созданием веб-страниц, сделать несколько шагов в направлении создания более структурированных HTML-страниц.
Модели контента до HTML 5
HTML-элементы до 5 версия языка HTML делились только на block-level elements (блочные элементы) и inline-level elements (строчные элементы). Блочные элементы (div, p, h1, h2 и др.) - это элементы, которые имеют своё собственное пространство в документе (прямоугольную область). Их основное назначение заключается в разметке веб-страницы на уровне блоков. Строчные элементы (inline-level elements) как правило находятся внутри блочных элементов. Они рассматриваются как текстовые элементы, и следовательно, отображаются как обычный поток текста. Назначение строчных элементов - это разметка веб-страницы на уровне строк.
Контентные модели HTML 5
В HTML 5 модели определения контента были расширены для того, чтобы с помощью них можно было более точно описать различные типы контента, с которыми могут столкнуться авторы при создании HTML-документа.
Эти модели позволяют пользовательским агентам (user agent) более точно определить, какой тип контента следует ожидать внутри элемента. Это позволит контролировать некоторые аспекты синтаксиса. Например, какие элементы могут быть вложены в некоторый элемент и др.
Изучение этих типов контента позволит лучшее понимать синтаксис технологии HTML5 и то как одни элементы связаны с другими. Каждый элемент согласно спецификации HTML 5 должен использоваться в соответствии с контентной моделью.
Контентная модель - это набор правил, которые определяют можно ли использовать некоторый HTML-элемент в некотором контенте или нет.
На следующем изображении показаны модели контента спецификации HTML 5.
Модели контента представлены с помощью различных категорий, а также показаны, как одни категории связаны с другими.
Контентные модели состоят из следующих категорий: flow content (контент потока), metadata content (контент метаданных), phrasing content (текстовый контент), embedded content (встроенный контент), interactive content (интерактивный контент), heading content (контент, содержащий заголовки), sectioning content (контент, который представляет собой секции страницы).
Каждая категория в HTML 5 определяет элементы, которые в ней можно использовать. Из рисунка видно, что некоторые области категорий пересекаются. Это означает что некоторые HTML-элементы можно использовать в различных контентах. Когда один контент является частью другого контента, это означает что они имеют общие элементы. Т.е. некоторые элементы можно использовать в нескольких контентах.
Кроме этого в HTML5 есть элементы, которые не попадают под эти категории. Исключения составляют элементы форм, которые находятся в их собственной модели контента. Кроме этого есть ещё другие специализированные элементы, которые тоже имеют свою собственную модель содержимого.
Но основная масса элементов в HTML 5, с которой может столкнуться автор при написании документа определяется в соответствии с вышеприведенной схемой.
Flow контент
Контент типа flow включает в себя большинство элементов HTML 5. В этой категории представлены элементы с которыми обычно приходиться сталкиваться при создании HTML-документа.
Flow контент должен находиться в элементе body, т.к. именно его содержимое определяет поток, который будет выводиться в рабочую область окна или вкладки браузера. Важно отметить ещё то, что если контент представлен как flow, то это ни каким образом не влияет на отображение элемента в браузере (пользовательском агенте).
HTML-элементы, принадлежащие к flow контенту: a, abbr, address, area (если он является потомком элемента map), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text.
Flow контент является основным, в некотором смысле родительским контентом, который может содержать более специализированное содержание.
Контент metadata (метаданных)
Metadata (метаданные) представляют из себя контент, который определяет внешний вид или поведение остального контента на веб-странице, а также используется для установления связи с другими документами. Элементы из этой категории в основном используются в элементе head документа. Обратите внимание на то, что область контента metadata частично перекрывает область контента flow. Это указывает на то, что определённый контент, например, script может быть использован как в секции metadata, так и в секции flow документа.
HTML-элементы, принадлежащие к этой категории: base, link, meta, noscript, script, style, template, title.
Phrasing (текстовый) контент
Phraising контент - это текст документа, а также элементы, которые используются для разметки этого текста. Во многих отношениях phraising контент является тем же элементом inline из спецификации HTML4.
HTML-элементы, принадлежащие к категории phrasing: a, abbr, area (если он является потомком элемента map), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, text.
Phrasing контент является частью контента flow. Большинство элементов из этой категории могут содержать в качестве своего контента только элементы из своей собственной категории. Т.е. в содержимое этих элементов нельзя включать любой элемент из контента flow.
Embedded контент
Embedded контент - это контент, который импортирован из других ресурсов в документ.
Embedded контент является частью контента Phrasing. В тоже время часть контента Embedded является частью контента Interactive.
HTML-элементы, принадлежащие к этой категории: audio, canvas, embed, iframe, img, math, object, picture, svg, video.
Interactive (интерактивный) контент
Interactive контент (интерактивный контент) - это контент, специально предназначенный для взаимодействия с пользователем. В модели контента часть области категории interactive пересекается с областями категорий embedded и phrasing. Это означает то, что некоторые HTML-элементы могут относится сразу к нескольким этим категориям.
HTML-элементы, принадлежащие к interactive контенту: a, audio (если присутствует атрибут controls), button, embed, iframe, img (если присутствует атрибут usemap), input (если значение атрибут type не hidden), keygen, label, object (если присутствует атрибут usemap), select, textarea, video (если присутствует атрибут controls).
Heading контент
В моделях контента есть 2 категории, которые стоят отдельно. Одна из этих категорий - это heading.
Категория heading определяет заголовки разделов, которые могут быть либо размечены явно с помощью элементов sectioning или просто подразумеватся ими.
HTML-элементы, принадлежащие к категории heading: h1, h2, h3, h4, h5, h6.
Sectioning (секционный) контент
Второй категорией контента, располагающейся отдельно от остальных является sectioning. Данный контент используется для создания разделов, которые определяют область заголовков и футеров.
HTML-элементы, принадлежащие к категории sectioning: article, aside, nav, section.
Контент – это полезная информация, размещенная на сайте, которую ищут люди, и если контент, который Вы будете размещать на своем сайте, будет интересен посетителям Вашего сайта, тогда Ваш ресурс будет востребован и соответственно станет посещаемым.
Наполнение сайта контентом – это часть работы, которую делает веб мастер перед запуском сайта. Дело в том, что на начальной стадии создания сайта очень много различной технической работы, которую приходится решать веб мастеру.
После размещения сайта в Интернет, наполнение сайта контентом, становится основной работой, которую делает Веб мастер.
Ну а теперь, давайте откроем блокнотом главную страницу сайта, и добавим в нее статью.
Открываем статью в Word, выделяем всю статью вместе с названием, копируем и переходим к редактированию главной страницы сайта, которая у нас открыта в блокноте.
В блокноте жмем кнопку сохранить и открываем главную страницу сайта в браузере, чтобы посмотреть изменения.
Мы видим, что текст добавился, но статья в окне браузера у нас идет сплошным массивом, то есть теперь, нам нужно добавленный текст, правильно форматировать, или другими словами разметить на странице, так как нам нужно.
Ну что же, для начала займемся названием или заголовком статьи.
Название (заголовок) статьи, давайте разместим по центру блока с контентом и зададим размер шрифта тегом h2, то есть, заголовком второго уровня:
Как самому создать сайт.
Обратите внимание, для выравнивания заголовка статьи по центру, мы использовали тег . Заголовок мы разместили в параграфе, который задан тегом
, размер текста заголовка статьи задан тегом
Сохраняем изменения в блокноте и обновляем страницу в браузере - на мой взгляд, получилось то, что надо! Переходим к разметке остального текста.
Теперь наша задача - разбить текст нашей статьи на параграфы, так же как он разбит в программе Word на абзацы.
То есть наша задача - поставить перед каждым абзацем тег
,и в конце абзаца (или в нашем случае парграфа), закрыть его тегом
Ну что же, смотрим, как наша статья разбита на параграфы в Word и делаем соответствующие изменения в тексте статьи главной страницы, в блокноте.
Работа эта достаточно простая, но требует некоторого внимания, и самое главное не забывайте корректно проставить открытие и закрытие тега параграфа
То есть каждое открытие параграфа тегом
, должно быть обязательно закрыто тегом
После окончания редактирования параграфов, вновь кликаем в блокноте на кнопку сохранить, и обновляем страницу браузера, чтобы посмотреть результаты редактирования.
Все нормально, текст разбит на абзацы и легко читается! Но бросается в глаза то, что текст статьи, очень близко прижался к рамке таблицы слева.
Теперь нас это не устраивает, давайте значение параметра cellpadding=0, заменим на 5 пикселей:
Сохраняем изменения в блокноте и вновь смотрим, как страница отображается в окне браузера, для этого вновь обновляем страницу.
Появился отступ в 5 пикселей и теперь, текст статьи на главной странице нашего сайта, смотрится нормально.
В связи с тем, что мы добавили достаточно много текста в ячейку таблицы, высота таблицы автоматически увеличилась, соответственно увеличилась и высота ячейки таблицы, где у нас находится меню.
Поэтому, меню нашего сайта оказалось посередине ячейки таблицы. Понятно, что меню должно находиться в верхней части сайта.
Параметром, отвечающим за вертикальное выравнивание содержимого в ячейки таблицы, является – valign.
С помощью параметра – valign, содержимое ячейки таблицы можно выровнять:
по верхнему краю: valign="top"
и по нижнему краю:valign="bottom"
значение выравнивания по умолчанию, как мы с Вами уже убедились – посередине (middle).
Ну что же, теперь давайте применим на практике полученную информацию из htmlсправочника.
Добавим в блокноте для ячейки таблицы меню, параметр выравнивания:
Обновляем страницу браузера, и смотрим результат – меню сайта теперь у нас находится в верхней части ячейки таблицы.
Просматриваем еще раз главную страницу, если все нормально, и подправлять ничего не надо, то можете себя поздравить! Работу над главной страницей сайта мы с Вами закончили!
CSS свойство content используется с псевдоэлементами :before и :after для вставки сгенерированного контента.
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| content | 1.0 | 1.0 | 4.0 | 1.0 | 8.0 * | 12.0 |
Значения свойства
| Значение | Описание |
|---|---|
| normal | Отсутствие контента (устанавливается как none для псевдоэлементов :before и :after). Это значение по умолчанию. |
| none | Отсутствие контента. |
| counter | Устанавливает контент в качестве счетчика (добавляет значение определённого счетчика). Используется совместно со свойствами counter-reset и counter-increment |
| attr(attribute) | Вывод значения атрибута элемента в виде строки (содержание как значение атрибута элемента). Например, вывод значения атрибута href после тега (a:after < content : " "attr(href)""; >. В результате между всеми тегами автоматически будет проставляться значение атрибута href ). |
| string | Текстовая строка. Содержимое строки обязательно заключается в кавычки. |
| open-quote | Устанавливает открывающиеся кавычки. Вид кавычек может быть изменён свойством quotes. |
| close-quote | Устанавливает закрывающиеся кавычки. Вид кавычек может быть изменён свойством quotes. |
| no-open-quote | Удаляет открывающую кавычку от содержимого элемента, если она установлена свойством open-quote . |
| no-close-quote | Удаляет закрывающую кавычку от содержимого элемента, если она установлена свойством close-quote . |
| url(url) | Производит добавление к контенту один из видов медиа-файлов(например, изображение, звук, видео и т.д.). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
Наследуется
Анимируемое
Пример использования
Изменение цвета маркера через использование CSS свойства content.
Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).
Выведем содержание, как значение атрибута элемента, использую псевдоэлемент :after и свойство content :
Пример добавления и изменения кавычек в тексте, используя CSS свойства content , quotes, а также псевдоэлементов :before и :after:
Пример добавления и изменения кавычек в тексте. CSS свойства
css -свойство content (от англ. content – содержимое) предназначено для вставки генерируемого контента, который первоначально в тексте веб-страницы отсутствует. Свойство используется совместно с псевдоэлементами ::after и ::before, которые, соответственно, указывают, куда следует вставлять контент – до или после указанного в селекторе элемента.
Характеристики
- Значение по умолчанию: normal .
- Применяется: к псевдоэлементам ::before и ::after .
- Наследуется: нет .
- Анимируется: нет .
- JavaScript: object.style.content="value" .
Синтаксис
content: " " | attr( ) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none
Значения
- attr(имя_атрибута) – значение переданного функции attr() атрибута будет добавлено в текст веб-страницы.
- "строка" – указанная в кавычках строка будет добавлена в текст веб-страницы.
- url("path") – указанный объект (видеофайл, аудиофайл и т.д.) будет добавлен на веб-страницу.
- open-quote – браузер установит открыващие кавычки.
- close-quote – браузер установит закрыващие кавычки.
- no-open-quote – браузер удалит открывающие кавычки, установленные при помощи open-quote .
- no-close-quote – браузер удалит закрывающие кавычки, установленные при помощи close-quote .
- normal – браузер отменит все вставки, которые были сделаны в элементе, т.е. вернет его в нормальное (первоначальное) состояние.
- none – браузер не добавит никакого контента.
- counter(id_счетчика) – браузер выведет нумерацию счетчика с указанным id (т.е. имя счетчика, установленное при помощи свойства counter-reset), при этом, если счетчик с таким id не был установлен, то браузер будет всегда выводить только нуль.
При использовании свойства content разрешается через пробел указывать сразу несколько значений свойства.
Читайте также: