Как сделать заголовок в HTML
Когда речь идет об удобстве чтения длинных текстов, то их, как правило, делят на логические части с помощью заголовков и подзаголовков. Если вы набираете код в специальном текстовом редакторе, то функция формирования заголовка из определенной части текста, в нем уже встроена. Достаточно выделить текст и нажать на опцию.
Но если говорить о языке HTML, то в нем заголовки принято создавать с помощью тегов, которые, между прочим, представлены целым семейством.
Первый тег данного семейства – <h2>, последний –
Хотя, если говорить с практической точки зрения, не очень часто можно встретить тексты, где есть подзаголовки ниже третьего уровня. И выделяются все три заголовка тегами <h2>, <h3> и <h4>.
Давайте добавим на нашу страничку заголовки:
...
<body>
<h2>Книги для программистов</h2>
<h3>Название книги 1</h3>
<p>
Текст про книгу 1
</p>
<h3>Название книги 2</h3>
<p>
Текст про книгу 2
</p>
</body>
...Результат в браузере:
Что касается поисковых систем, то для них заголовки играют большую роль. Поэтому, есть смысл научиться их грамотно писать и применять. Есть 2 главных правила при создании заголовков в HTML. Готовы узнать секреты? Держите:
- Заголовок h2 должен быть на странице только один
- Вложенность заголовков не должна нарушаться. То есть после h2 не должно быть сразу h4. Нормальная вложенность это когда заголовки идут, например, в таком порядке: h2-h3-h4-h4-h5-h3-h4-h5
Зная эти секреты Вам будет проще продвинуться в поисковых системах. И если про первый ещё кто-то знает, то со вторым всё печально. Люди используют их в разных порядках просто потому что им нравится размер шрифта. Так делать не стоит.
Как правильно писать HTML заголовки для сайта. Заголовки h2, h3, h4
Учимся понимать иерархию HTML заголовков
Чтобы визуализировать для себя суть структуры заголовков, представим, что у нас есть книга. Она разделена на 2 раздела, каждый раздел имеет по 3 главы.
Получается такая структура:
Книга
— Раздел 1
— — Глава 1
— — Глава 2
— — Глава 3
— Раздел 2
— — Глава 4
— — Глава 5
— — Глава 6
Представление такой структуры в виде иерархии HTML заголовков будет выглядеть следующим образом:
<h2>Книга</h2>
<h3>Раздел 1</h3>
<h4>Глава 1</h4>
<h4>Глава 2</h4>
<h4>Глава 3</h4>
<h3>Раздел 2</h3>
<h4>Глава 4</h4>
<h4>Глава 5</h4>
<h4>Глава 6</h4>Как вы видите, глава имеет меньший охват, чем раздел, соответственно имеет меньший по значимости уровень заголовка. Однако, «Раздел 1» и «Раздел 2» — это две последовательные структуры (Раздел 2 не является подразделом Раздела 1) — соответственно они имеют одинаковый уровень HTML заголовка.
Обратите внимание, что разделов и глав в книге может быть сколько угодно, но ни один из них не будет по значимости равен или выше названию книги. Равносильной книге может быть только другая книга, а соответственно уровня главного заголовка веб-страницы может быть только заголовок другой веб-страницы (который находится в другом HTML документе).
На одной HTML странице должен быть один заголовок <h2>
Правильная структура HTML заголовков страницы
Структура заголовков должна отражать смысл контента в них. Подзаголовки <h4> должны конкретизировать суть обозначенную в HTML заголовке <h3>, а два заголовка одного уровня — продолжать друг друга либо раскрывать другую грань содержимого страницы.
И помните: указание заголовка <h3> после <h4> укажет что предыдущий раздел <h3> закончен и начат новый, а не подчеркнет значимость подраздела.
В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок <h2>, меньше него <h3>, наименьший <h6>. Таким образом, названия разделов имеют больший вес, чем названия подразделов.
Сколько уровней заголовков использовать
Основное, на что нужно ориентироваться — заголовки должны отражать структуру содержимого.
На сколько частей разбивать материал и на сколько подразделов его дробить — решать вам, и во многом это зависит от специфики вашей ниши.
Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков <h2>, <h3>, <h4> вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.
Не следует пытаться намеренно увеличить количество подзаголовков в статье. Слишком большое количество выделенных элементов может негативно сказаться на позициях вашего сайта в поисковых системах.
В любом случае, рекомендую посмотреть как расставляют заголовки авторитетные сайты в вашей нише. Возможно, вы подчеркнете для себя несколько полезных пунктов.
Заголовки дополнительных блоков сайта
Практически все блоги имеют блок ссылок на похожие статьи, блок опроса, подписки; интернет-магазины — блок фильтров, похожих товаров, популярных, ранее просмотренных, хитов продаж… Все это не является основным контентом страницы, но структура у этих блоков также есть. Так что, стоит озаглавливать такие блоки заголовком <h3>, <h4> или каким-то другим?
Я бы не рекомендовал. Для поисковых систем важна та уникальная информация, которую несет ваша страница, либо не уникальная, но преподнесенная удобнее всего среди конкурентов.
Структурируйте заголовками основной контент страницы, для всех дополнительных элементов достаточно выделения названия блоков стилями CSS.
Заголовки на сайте интернет-магазина
Со статейными страницами все просто — есть основная статья, у нее есть структура. Но как писать HTML заголовки на сайте интернет-магазина?
Стоит выделить 2 типа страниц: страница каталога и страница товара.
Страница каталога
Что действительно стоит сделать — так это вынести в заголовок <h2> название подборки: «Холодильники SAMSUNG», «Горные велосипеды Ardis», «Все для отдыха», «Женские платья и сарафаны» — это все может быть заголовком <h2>.
Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.
В некоторых магазинах есть общие страницы, показывающие названия категорий и несколько товаров этих категорий. Тогда вы можете сделать названия категорий заголовками. HTML допускает использование заголовков — ссылок.
Смысла в добавлении заголовков на каждый товар из каталога скорее нет. Однако, если вы используете текст — описание страницы каталога и оно достаточно длинное, чтобы разделить его на подзаголовки — сделайте это.
Страница товара
Думаю, ни кого не возникнет сомнений, что заголовок <h2> должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.
У магазина одежды, мало шансов попасть в топ по запросу «Белая футболка», но куда больше по запросу «Белая футболка Trussardi». Если вы продаете телефоны, вместо указания в названии «iPhone 8» и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них <h2>: «iPhone 8 256Gb Белый», «Apple iPhone 8 64Gb Space Gray» и так далее.
Перейдем к подзаголовкам. Большинство страниц товаров имеют похожую структуру и одинаковые элементы: фото, описание, характеристики, отзывы. Сами же блоки могут быть показаны на странице все сразу, либо страница имеет вкладки, по клику на названия которых открывается нужный блок.
И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно <h3>). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.
Также, достойным решением является конкретизация таких заголовков. В пример приведу один популярный магазин электроники.
Обратите внимание, вкладка имеет короткое название «Характеристики», при нажатии открывается блок с заголовком <h3>: «Технические характеристики Apple iPhone X 256GB Silver».
Пожалуй, на этом все. Я надеюсь эта статья была для вас полезной. Ниже оставляю несколько рекомендаций, на которые следует ориентироваться при составлении заголовков.
Выводы. Рекомендации по использованию заголовков HTML
1) На странице должен быть только один заголовок уровня <h2>.
2) Строго сохраняем иерархию: <h3> внутри <h2>, <h4> внутри <h3> и т.д. Никаких <h5> сразу после <h3> и т.п.
3) Заголовки должны передавать смысл содержимого.
4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.
Заголовок HTML-страницы | HTML/xHTML
Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.
Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.
К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.
Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.
Элемент <title>:
- Задаёт заголовок вкладки в браузере;
- Задаёт заголовок страницы, добавленной в «Избранное»;
- Выводит заголовок страницы в выдаче поисковой системы.
Пример:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> Содержимое документа… </body> </html>
Посмотреть демо
Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:
Пример:
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>Посмотреть демо
Элемент <link> предназначен для указания ссылок на внешние файлы CSS.
Пример:
<link rel="stylesheet" href="mystyle.css">
Посмотреть демо
Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.
Метаданные используются браузерами как инструкция по выводу данных, поисковыми системами (ключевые слова), а также другими веб-сервисами.
Определяем используемую кодировку:
Вносим описание веб-страницы:
<meta name="description" content="Free Web tutorials">
Указываем ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Указываем автора материала:
<meta name="author" content="John Doe">
С помощью шапки сайта и ее HTML кода устанавливаем обновление страницы каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Пример метатегов:
Пример:
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe">
Посмотреть демо
В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.
Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.
Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.
Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.
Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.
Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:
Пример без метатега viewport
Пример с метатегом viewport
Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через id=»demo»:
Пример:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>Посмотреть демо
Элемент определяет базовый URL и цель для всех ссылок на странице:
Пример:
<base href="https://www.w3schools.com/images/" target="_blank">
Посмотреть демо
Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.
<!DOCTYPE html> <title>Page Title</title> <h2>This is a heading</h2> <p>This is a paragraph.</p>
Посмотреть демо
Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).
Тег Описание
<head> Предоставляет информацию о документе.
<title> Задаёт заголовок документа.
<base> Определяет основной адрес и цель для всех ссылок на странице.
<link> Отвечает за связь между документом и внешними ресурсами.
<meta> Определяет метаданные документа.
<script> Позволяет использовать скрипты на стороне клиента.
<style> Определяет стилизацию документа.
Данная публикация представляет собой перевод статьи «HTML Head» , подготовленной дружной командой проекта Интернет-технологии.ру
Заголовки в HTML: назначение HTML заголовков и их использование в документах
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Эта запись поможет вам разобраться с делением страниц сайта на разделы при помощи HTML заголовков. Если вы заботитесь о том, чтобы информация на вашем сайте была доступна для посетителей и была представлена удобно, то вам просто необходимо делить большие документы на разделы при помощи специальных HTML тэгов, которые создают заголовки. Кроме того, использование заголовков помогает продвигать сайта, так как поисковые системы считают текст внутри заголовка более важным, чем текст абзаца.
Заголовки в HTML: назначение HTML заголовков и их использование в документах
В этой записи мы поговорим о применение и назначение HTML заголовков. Рассмотрим виды HTML заголовков и их отличия, разберемся с техническими особенностями заголовков и в завершении публикации попробуем самостоятельно разбить HTML документ на разделы при помощи заголовков.
Для чего нужны HTML заголовки
Содержание статьи:
HTML документ в общем случае представляет собой каким-либо образом отформатированный и структурированный текст. Любой документ, каким бы он ни был имеет заголовки (не путать с названием документа). Заголовки в HTML, как и в любом другом документе, делят текст на разделы, а разделы в свою очередь состоят из абзацев (ранее мы уже говорили про параграфы и абзацы в HTML).
Чтобы было проще понять для чего нужны заголовки в HTML, давайте сравним HTML страницу с книгой. Книга может состоять из частей, название той или иной части – это заголовок. Части в свою очередь делятся на главы, название главы – это тоже заголовок, но уже не такой значимый. Главное назначение частей и глав в книги – разделить ее на крупные разделы, в которых есть какая-то логическая связь.
Так и в HTML документе: заголовки используются, чтобы разделить его на большие фрагменты, в которых рассказывается о той или иной части темы, описываемой в данном документе. SEO оптимизаторы используют заголовки для продвижения сайтов, комбинируя тем или иным образом ключевые слова, по которым идет продвижение, в тексте HTML заголовка, так как поисковые системы считают текст внутри заголовка более важным, чем текст внутри абзацев, даже если слова выделены специальными HTML тэгами или HTML тэгами непосредственного форматирования текста.
Итак, подведем итог всему вышесказанному. HTML заголовки используются для того, чтобы разбить HTML документ на части, а также HTML заголовки используются SEO оптимизаторами для того, чтобы акцентировать внимание поисковой системы на тех или иных словах, по которым продвигается сайт.
Виды HTML заголовков
Аналогия HTML заголовков с главами и частями в книге довольно неплохо демонстрирует деление HTML заголовков на виды или уровни. Всего насчитывается шесть уровней HTML заголовков: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Заголовок первого уровня считается самым важным в HTML, поэтому браузер отображает его самым крупным и жирным шрифтом, соответственно, заголовок <h6> будет отображен, как самый маленький.
Правда, стили отображение HTML заголовков можно изменить при помощи CSS или HTML атрибутов и сделать так, что заголовок <h2> будет отображаться шрифтом, размер которого меньше, чем размер шрифта <h6>.
SEO оптимизаторы рекомендуют использовать один единственный заголовок <h2> в документе, и не более четырех HTML заголовков второго уровня, а дальше уже вам придется исходить из объема текста и необходимости его деления на разделы (ни разу не видел ни одного сайта, где бы использовались HTML заголовки пятого и шестого уровней).
В принципе, утверждение сверху логично: заголовок первого уровня на странице должен быть один (вы же никогда не встречали книгу, на первой странице которой написано название, а потом, где-нибудь посреди повествование автор берет и переименовывает книгу, ведь нет?). Часто HTML заголовок первого уровня совпадает с названием HTML документа, которое указывается в тэге <title>. Заголовков второго уровня может быть несколько, так как ими мы делим документ на части, а заголовков третьего уровня может быть еще больше, так как ими мы делим HTML документ на главы.
Когда вы используете HTML заголовки, не исходи из чужих рекомендаций. Просто оцените текст HTML документа, подумайте, как вы его можете разбить на части и сколько частей будет в документе, каждая часть – это заголовок второго уровня. А затем оцените каждую часть в отдельности, разбив ее на логические разделы, каждому разделу дайте имя при помощи HTML заголовка третьего уровня.
Такой подход обеспечить вам две вещи: вы будете задумываться о логической структуре текста и, соответственно, будете писать его последовательно, а посетителям вашего сайта будет проще ориентироваться и понимать, о чем ваш текст, благодаря продуманной структуре, которая выделяется при помощи HTML заголовков.
Технические особенности заголовков в HTML
Давайте теперь перечислим особенности HTML заголовков. Первое, что стоит отметить – заголовки относятся к блочными HTML элементам. Второе – все заголовки представляют собой парные HTML тэги. Для HTML заголовков доступны универсальные HTML атрибуты и атрибуты событий.
Так же у HTML заголовков есть уникальный атрибут align. Браузер всегда добавляет пустое пространство над и под HTML заголовками, если, конечно, данное правило не отменить при помощи CSS стилей. Пожалуй, это всё, что нужно знать про HTML заголовки и о том, как их отображают браузеры.
Пример использования HTML заголовков
Мы довольно подробно описали как работают HTML заголовки, их назначение и особенности. Теперь давайте посмотрим примеры HTML заголовков и того, как их обработает браузер. Пример будет сразу с использование выравнивания текста внутри HTML заголовков (более подробно про выравнивание может прочитать в статье HTML абзацы, ссылку на которую я давал ранее). Откройте любой редактор, можно даже Блокнот (но есть множество бесплатных альтернатив: HTML редактор Notepad++, CSS редактор Brackets, PHP редактор IDE NetBeans, позволю порекомендовать один платный JavaScript редактор Sublime Text 3, все они имеют гораздо более широкий функционал и намного удобнее, чем Блокнот), и сохраните код ниже, назвав файл index.html:
<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>HTML заголовки и примеры их использования</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>HTML заголовок первого уровня</h2> <p>Для сравнения добавим текст внутри HTML параграфа, чтобы было заметно, как браузер выделяет HTML заголовки разного уровня. А также для того, чтобы были видны вертикальные отступы, которые создает браузер, встречая HTML заголовок</p> <h3>HTML заголовок второго уровня</h3> <h4>HTML заголовок третьего уровня</h4> <h5 align=»center»>HTML заголовок четвертого уровня</h5> <p>Для сравнения добавим текст внутри HTML параграфа, чтобы было заметно, как браузер выделяет HTML заголовки разного уровня. А также для того, чтобы были видны вертикальные отступы, которые создает браузер, встречая HTML заголовок</p> <h5 align=»right»>HTML заголовок пятого уровня</h5> <h6 align=»left»>HTML заголовок шестго уровня</h6> <p>Для сравнения добавим текст внутри HTML параграфа, чтобы было заметно, как браузер выделяет HTML заголовки разного уровня. А также для того, чтобы были видны вертикальные отступы, которые создает браузер, встречая HTML заголовок</p> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html>
<html lang=»ru-RU»>
<head>
<meta charset=»UTF-8″>
<title>HTML заголовки и примеры их использования</title>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
<h2>HTML заголовок первого уровня</h2>
<p>Для сравнения добавим текст внутри HTML параграфа, чтобы
было заметно, как браузер выделяет HTML заголовки разного уровня.
А также для того, чтобы были видны вертикальные отступы, которые
создает браузер, встречая HTML заголовок</p>
<h3>HTML заголовок второго уровня</h3>
<h4>HTML заголовок третьего уровня</h4>
<h5 align=»center»>HTML заголовок четвертого уровня</h5>
<p>Для сравнения добавим текст внутри HTML параграфа, чтобы
было заметно, как браузер выделяет HTML заголовки разного уровня.
А также для того, чтобы были видны вертикальные отступы, которые
создает браузер, встречая HTML заголовок</p>
<h5 align=»right»>HTML заголовок пятого уровня</h5>
<h6 align=»left»>HTML заголовок шестго уровня</h6>
<p>Для сравнения добавим текст внутри HTML параграфа, чтобы
было заметно, как браузер выделяет HTML заголовки разного уровня.
А также для того, чтобы были видны вертикальные отступы, которые
создает браузер, встречая HTML заголовок</p>
</body>
</html> |
Не забывайте использовать пробельные символы для форматирования HTML кода. Откройте получившийся файл в браузере, если вы сделали всё, как в примере, то увидите примерно следующую HTML страницу, созданную браузером:
Пример отображения HTML заголовков на странице в браузере
Здесь мы специально подсветили элемент HTML заголовка h5: светло-жёлтая область – это как раз те самые отступы, которые создает браузер, когда встречает HTML заголовки. На рисунке также видно, как изменяется способ отображения HTML заголовков в зависимости от уровня. И вы можете увидеть, как браузер выравнивает текст внутри HTML заголовка в зависимости от значения атрибута align.
Подведем итого всему, что было сказано про HTML заголовки:
- HTML заголовки используются для деления документа на разделы.
- В HTML шесть уровней заголовков, которые отображаются в соответствии их значимости.
- HTML заголовки – это блочные элементы.
- Тэги HTML заголовков парные.
- Для HTML заголовков доступны все универсальные атрибуты и атрибуты событий.
- Браузер создает вертикальные отступы от HTML заголовков.
- HTML заголовки очень любят использовать SEO оптимизаторы для продвижения сайтов.
Заголовок HTML-страницы | WebShake.RU
Заголовком страницы называют текст, расположенный в браузере под панелью меню на вкладке сайта. Еще этот текст называют title (тайтл), поскольку именно данный тег используется для его создания.
Чтобы заголовок страницы отображался, тег <title> необходимо поставить внутрь тега <head>.
На примере это будет выглядеть следующим образом.
<head>
<title>Блог о веб-разработке - WebShake.RU</title>
</head>А вот так вот отображается заголовок непосредственно в браузере:
Данный тег очень важен для страницы, так как именно из него берётся название страницы в поисковой выдаче. Например, вот так выглядит WebShake в выдаче Гугла:
В свою очередь люди (в том числе и вы), когда что-то ищут в поисковике, читают в первую очередь название страницы. А оно-то и формируется этим тегом <title>. Он должен содержать в себе основную суть страницы в нескольких словах. Также он не должен быть больше 80 символов — иначе остальные символы поисковики обрубят и заменят многоточием. Надеюсь, я смог донести до вас, насколько этот тег важен. Ну а теперь давайте сделаем домашнее задание по данному тегу.
Атрибуты и заголовки в HTML
Данный урок посвящен атрибутам и заголовкам в HTML, которые являются незаменимыми элементами любого HTML документа. Вот почему так важно владеть данным вопросом. В данном уроке разъясняется, что такое атрибут, приводятся примеры работы с атрибутами. Также в уроке рассматриваются заголовки, используемые в HTML, приводятся примеры заголовков.
Атрибуты в HTML
Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть очень много. К примеру, с помощью атрибутов мы можем выровнять текст абзаца по ширине, задать стиль и размер шрифта, задать нужные отступы и т.д. Атрибуты прописываются внутри тегов, после них идет знак равенства, затем в двойных кавычках указываются значения атрибута. Разделяются атрибуты друг от друга точкой с запятой.
Примеры работы с атрибутами
Рассмотрим работу с атрибутами на примерах. Самый простой пример — возьмем тег абзаца <p> с атрибутом «align». Напишем:
<p align="left">Пример выравнивания абзаца по левому краю</p>
Атрибут «align» сообщает браузеру, что данный абзац нужно выровнять по левому краю экрана.
Для тега абзаца также могут быть применены атрибуты:
- align=»center» – выравнивание по центру экрана;
- align=»right» – выравнивание по правому краю;
- align=»justify» — выравнивание текста по ширине экрана.
Теперь усложним задачу — создадим HTML страницу с использованием нескольких разных атрибутов. Пример такой страницы будет иметь следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами в HTML</title> </head> <body bgcolor="#dadef9"> <p align="center">Атрибуты в HTML</p> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> </body> </html>
Атрибут цвета «bgcolor» позволяет нам задать цвет фона страницы. Атрибуты «center» и «justify» выравнивают текст внутри себя, соответственно, по центру и по ширине.
Заголовки в HTML
Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть — от 1 до 6, они указывают на размер заголовка (<h2> является самым большим заголовком, <h6> — самым маленьким). Для примера создадим веб-страницу, имеющую несколько заголовков. Код этой страницы будет иметь вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами и заголовками в HTML</title> </head> <body bgcolor="#dadef9"> <h2>Атрибуты в HTML</h2> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> <h3 align="center">Заголовки в HTML</h3> <p align="justify">Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть - от 1 до 6, они указывают на размер заголовка...</p> </body> </html>
В данном примере у нас имеется два заголовка — заголовок первого уровня здесь не имеет атрибутов, заголовок второго уровня — имеет атрибут выравнивания по центру. После заголовков идут абзацы, которые также имеют свои атрибуты.
Вот по такому принципу работают с атрибутами и заголовками в HTML. Ничего сложного здесь нет. Обязательно следует потренироваться на собственных примерах для того, чтобы закрепить полученную в данном уроке информацию.
Понравилось? Поделитесь с друзьями!
Типы заголовков в html
Доброго времени суток дорогие читатели! Сегодня я хочу Вам рассказать о том, какие типы заголовков существуют в HTML. Они часто используются на сайте, поэтому Вы должны знать их обязательно.
В HTML есть 6 видов заголовков, а точнее 6 уровней. Заголовок имеет следующий синтаксис:
<hх>Текст заголовка </hx>
Где x указывает на уровень заголовка и может принять значение от 1 до 6.
Самый крупный заголовок это заголовок первого уровня <h2></h2>, а самый маленький это заголовок шестого уровня <h6></h6>. С этого можно сделать такой вывод, что чем выше уровень, тем крупнее заголовок. Для того чтобы Вы хорошо поняли эту тему, давайте создадим страницу с заголовками.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Описание страницы. Не менее 160 символов. " />
<meta name="keywords" content="Здесь указываем список ключевых слов, разделенные запятой." />
<title>Заголовки</title>
</head>
<body>
<div align="center" >
<h2>Заголовок 1-го уровня </h2>
<h3>Заголовок 2-го уровня </h3>
<h4>Заголовок 3-го уровня </h4>
<h5>Заголовок 4-го уровня </h5>
<h5>Заголовок 5-го уровня </h5>
<h6>Заголовок 6-го уровня </h6>
</div>
</body>
</html>
А теперь посмотрим, как все эти заголовки отображаются в браузере.
Обычно заголовок первого уровня <h2></h2> на странице используется один раз. Например, для выделения названья статьи на странице. Остальные заголовки уже идут как подзаголовки, они используются чаше, соответственно для выделения подзаголовков статьи.
Вот собственно и все что касается заголовков в HTML. Вы должны знать эти заголовки на изусть, так как они часто используются при создании сайта. Всем удачи!
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
<< Предыдущая статьяСледующая статья >>Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2014-10-31 17:22:11