HTML первые шаги — урок 1 — Теги h2-h6, p, strong
О том как создавать HTML-документы читайте в HTML-первые шаги.
Прошлом уроке мы создали наш первый HTML-документ.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
HTML мои первые шаги
</body>
</html>В этом уроке мы будем заполнять наш документ текстом. Добавим самый распространенный тег в HTML, тег <p></p>. Не забывайте, что теги пишутся на латинице и это не русская эр. Тег <p> — это сокращение от слова paragraph (параграф) и означает абзац текста, параграф.
Весь текст в HTML должен быть заключен в тот или иной тег, поэтому давайте в нашем документе текст обернем в тег <p>:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<p>HTML мои первые шаги</p>
</body>
</html>Визуально наш документ ничем не изменился, но все же структура html-документа стала более правильной. Мы также можем добавить еще несколько абзацов текста:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<p>HTML мои первые шаги</p>
<p>Каждый охотник желает</p>
<p>знать где</p>
<p>сидит фазан</p>
</body>
</html>Как видите все довольно просто. Теги p размещаются на одном уровне.
Давайте добавим в наш документ заголовок. Зачем нужны заголовки в HTML? В первую очередь чтобы структурировать текст, структурированный текст проще и быстрее читать и понимать. Во вторую очередь заголовки очень важны для продвижения сайта в поисковых системах. Так что не стоит пренебрегать заголовками в тексте.
Для заголовков мы будем использовать теги h2, h3, h4, h5, h5, h6. Цифра после h (header — заголовок) обозначает важность этого заголовка. Причем заголовк h2 должен быть только один на странице и он обозначает о чем эта HTML-страница. Вслед за h2 можно использовать h3 и h4, потом h5 и так далее.
Как правило шести уровней вложенности заголовков вполне хватает.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h2>Мой первый HTML-документ</h2><br> <h3>Мои первые шаги</h3>
<p>HTML мои первые шаги</p>
<h4>Еще один шаг</h4><br> <h3>А так говорят</h3>
<p>Каждый охотник желает</p>
<p>знать где</p>
<p>сидит фазан</p>
</body>
</html>Наверно вы заметили, что размер тега h, зависит от цифры после буквы. Таким образом браузер показывает, что этот заголовок старше, чем следующий.
Еще одна особенность тегов h2-h6, в том что они выделяются жирным. Выделять тексть жирным можно и с помощью тега <strong>:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body> <h2>Мой первый HTML-документ</h2>
<h3>Мои первые шаги</h3>
<p>HTML мои первые шаги</p>
<h4>Еще один шаг</h4>
<h3>А так говорят</h3>
<p>Каждый <strong>охотник</strong> желает</p>
<p>знать где</p>
<p>сидит фазан</p>
</body>
</html>Заметьте, чтобы выделить текст жирным, мы используем именно тег strong.
Нельзя использовать h2-h6 внутри тега p! Запомните это, использование тегов h2-h6 в теге p может серьезно подпортить позиции сайта в поисковике Google.
Запомним, так правильно:
<p>Очень <strong>жирный</strong> текст</p>
А вот это очень плохо:
<p><h4>не делайте</h4> так!</p>
Я думаю вы уже можете добавлять столько текста на страницу, сколько захотите и выделять это жирным. А главное делать это правильно.
Обязательные элементы и тэги в HTML.
Задание Добавьте обязательные тэги, о которых говорится в видео в свой HTML-файл.
Код, который можно скопировать.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Документ без названия</title> </head> <body> </body> </html>
После того, как мы с вами создали первый HTML — документ, он у нас был совершенно пустой.
Для того, чтобы этот HTML-документ начал полноценно восприниматься браузером как новый HTML-документ и чтобы поисковые системы могли взаимодействовать с этим HTML-документом, нужно добавить туда несколько HTML-тэгов.
Чисто визуально, при добавлении этих обязательных тэгов, на веб-странице вы ничего не увидите, за исключением тэга title. Этот тэг немного повлияет на внешний вид документа. По сути, эти тэги являются просто обязательными тэгами, которые несут в себе некую служебную информацию для тех программ, которые будут взаимодействовать с этим HTML — документом.
Итак, что же это за обязательные тэги, которые должны присутствовать на любой HTML-странице?
В первую очередь — это тэг doctype.
Пишется он следующим образом:
<!doctype html>
Это служебный тэг, который нужен для того, чтобы сообщить браузеру, либо какой-то другой программе, которая будет взаимодействовать с этим HTML документом о том, что данный файл является именно HTML страницей, а не каким-то другим типом документа.
Кроме HTML-документов, браузеры могут взаимодействовать и с другими видами документов. Поэтому нужно именно уточнить, что тип документа, с которым он будет взаимодействовать, является именно HTML.
Далее идет парный тэг:
<html> </html>
Это главный тэг, который содержит в себе все остальные тэги. Это самый главный родительский элемент, в котором хранятся все остальные тэги.
Далее, внутри этого парного тэга html, у нас находится тэг:
<head> </head>
Он тоже является парным тэгом и содержит в себе различную служебную информацию, так называемые служебные заголовки. Здесь может располагаться информация о названии документа, о кодировке, как правило, в этой области подключаются различные скрипты, внешние стили оформления и внутренние стили оформления, которые будут отвечать за внешний вид документа. По сути, этот элемент head, отвечает за то, что он содержит некую служебную информацию, которая у нас не отображается на странице, но несет важную смысловую нагрузку о документе.
Внутри элемента head есть важный парный элемент title, который отвечает за заголовок веб-страницы, который будет отображаться в открытой вкладке браузера. Также элемент title выводится в результатах выдачи сайта в поисковых системах, например, Яндекс и Google.
Далее идет еще один очень важный элемент — элемент:
<body> </body>
Это тоже парный тэг и в нем нужно располагать ту информацию, которая должна будет выводиться на самой веб-странице. Если посмотреть на веб-страницу, то это будет белая область экрана просмотра браузера.
Ну и последний важный и обязательный элемент, который нужно указать на веб-странице — это элемент:
<meta charset="UTF-8">
Этот тэг отвечает за то, какая кодировка текстовых символов будет у документа. Если указать неверную кодировку, то у вас могут возникнуть проблемы с отображением символов текста в различных браузерах и операционных системах. Если этот тег не указать, символы могут отображаться не правильно.
Как правило, здесь указывается кодировка UTF-8. Это универсальная кодировка, которая стала вроде стандарта и с ее помощью вы можете использовать как латинские символы, так и кириллицу и все у вас будет отображаться хорошо.
Это основные тэги, которые обязательно должны присутствовать на веб-странице, на внешний вид страницы они мало влияют, но, тем не менее, они обязательно должны присутствовать на веб-странице, чтобы все работало правильно и хорошо.
Поэтому, можете прямо сейчас открыть свой HTML-документ и добавить все эти тэги в него и после этого мы можем переходить к дальнейшим работам.
Создайте свой первый html-документ с обязательными HTML-элементами и поделитесь ссылкой на него в комментариях.
Для многих эта задача может быть простой. Но, если вы этого никогда не делали, это простое задание может оказаться очень полезным.
Поверьте, что в будущем навык создания html-документов вам может очень пригодиться.
Документация JDK 19 — Главная
- Главная
- Ява
- Java SE
- 19
Обзор
- Прочтите меня
- Примечания к выпуску
- Что нового
- Руководство по миграции
- Загрузить JDK
- Руководство по установке
- Формат строки версии
Инструменты
- Технические характеристики инструментов JDK
- Руководство пользователя JShell
- Руководство по JavaDoc
- Руководство пользователя средства упаковки
Язык и библиотеки
- Обновления языка
- Основные библиотеки
- HTTP-клиент JDK
- Учебники по Java
- Модульный JDK
- Руководство программиста API бортового регистратора
- Руководство по интернационализации
Технические характеристики
- Документация API
- Язык и ВМ
- Имена стандартных алгоритмов безопасности Java
- банок
- Собственный интерфейс Java (JNI)
- Инструментальный интерфейс JVM (JVM TI)
- Сериализация
- Проводной протокол отладки Java (JDWP)
- Спецификация комментариев к документации для стандартного доклета
- Прочие характеристики
Безопасность
- Руководство по безопасному кодированию
- Руководство по безопасности
Виртуальная машина HotSpot
- Руководство по виртуальной машине Java
- Настройка сборки мусора
Управление и устранение неполадок
- Руководство по устранению неполадок
- Руководство по мониторингу и управлению
- Руководство по JMX
Client Technologies
- Руководство по специальным возможностям Java
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.
Описание
Тег HTML является контейнером для всех других элементов HTML. Этот тег также часто называют элементом .
Синтаксис
В HTML синтаксис тега :
Атрибуты
Помимо глобальных атрибутов, ниже приведен список атрибутов, характерных для тега :
| Атрибут | Описание | HTML-совместимость |
|---|---|---|
| манифест | URI манифеста ресурса | HTML5 (Геккон 1.9) |
| версия | Версия определения типа документа HTML | Устарело в HTML 4.01, устарело в HTML5 |
Примечание
- HTML-элемент содержит два раздела: раздел и раздел .
- Тег не включает тег .
Совместимость с браузером
Тег имеет базовую поддержку в следующих браузерах:
- Chrome
- Андроид
- Firefox (Геккон)
- Firefox Mobile (Геккон)
- Internet Explorer (IE)
- Пограничный мобильный
- Опера
- Опера Мобайл
- Сафари (веб-кит)
- Сафари Мобильный
Пример
Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.
01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
- HTML5
- HTML4
- XHTML
Документ HTML5
Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом:
<голова> <мета-кодировка="UTF-8">Пример HTML5 от www.techonthenet.com <тело>Заголовок
Это содержимое.
В этом примере документа HTML5 в первой строке есть тег , который не содержится в теге .
Далее следует тег , который является контейнером для остальных тегов HTML. Тег содержит 2 раздела — тег
и тег . Тег содержит тег и тегЗаголовок
Это содержимое.
В этом примере переходного документа HTML 4.01 в первой строке есть тег , который не содержится в теге .
Далее следует тег , который является контейнером для остальных тегов HTML. Тег содержит 2 раздела — тег
и тег . Тег содержит тег и тегЗаголовок
Это содержимое.
В этом примере переходного документа XHTML 1.0 в первой строке есть тег , который не содержится в теге .
Далее следует тег , который является контейнером для остальных тегов HTML. Тег содержит 2 раздела — тег
и тег . Тег содержит тег и тегЗаголовок
Это содержимое.
В этом примере XHTML 1.