3.1 Тег html
Если ты читаешь этот текст, то предполагается, что в будущем ты будешь работать Java Developer, ну или Full Stack Java Developer. Писать HTML-документы ты будешь вряд ли, но вот читать их тебе придется частенько. Так уж устроен мир, так что придется разобраться как устроены HTML-документы.
С чего же начинается любой HTML-документ? Каждый HTML-документ имеет структуру, состоящую из трех вложенных тегов: html
, head
и body
. Это стандарт, пример:
<!DOCTYPE html>
<html>
<head>
Служебные теги
</head>
<body>
Основной документ
</body>
</html>
Все, что отображает браузер, находится внутри парного тега body
(тело документа). Внутри тега head
находятся теги со служебной/вспомогательной информацией для браузера.
Также в начале документа принято (не обязательно) писать тип документа – DOCTYPE
, чтобы парсер лучше понимал, как ему интерпретировать ошибки. Многие браузеры умеют корректно отображать документы с поломанной версткой.
Или же наоборот есть стандарт XHTML = XML+HTML
, в котором более жесткие правила, чем в обычном HTML
. Но такая информация будет тебе полезна, когда ты решишь написать свой браузер, ну или хотя бы свой HTML-парсер
.
3.2 Тег head
Внутри тега head
обычно располагаются такие теги: title
, meta
, style
, …
Тег <title>
задает название документа, которое отображается во вкладке браузера.
Тег <meta>
используется для задания разнообразной служебной информации. Например, можно помочь браузеру понять кодировку HTML-документа (он ведь содержит обычный текст, если ты помнишь).
<html>
<head>
<title> Escape character</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
3.3 Теги body, p, b
В теге <body>
содержится весь html-текст, который будет отображаться браузером. Самые простые теги для отображения документа это: <h1>
, <p>
, <b>
, <br>
<h1>
— это парный тэг, он позволяет задать заголовок твоей страницы/статьи. Если твоя статья большая и тебе нужны подзаголовки, то для этого дела ты можешь использовать тег <h2>
, <h3>
и так далее до <h6>
Пример:
<body>
<h1> Коты </h1>
<h2> Описание котов</h2>
подробное описание котов
<h2> Происхождение котов</h2>
Информация про происхождение котов.
<h2> Лапки котов</h2>
Громадная статья про лапки котов
</body>
Если твоя статья большая и ты хочешь упростить ее чтение, разделив ее на абзацы, то для этого понадобится парный тег <p>
(от слова paragraph). Просто оберни текст в теги <p>
и </p>
и браузер отобразит его как отдельный абзац.
Внимание! Браузер будет игнорировать переносы строк и/или лишние пробелы в вашем тексте. Если ты хочешь добавить перенос строки, то вставь в текст одиночный тег <br>
(от break line).
Ну и самое приятное – это выделение текста жирным цветом. Если хочешь сделать текст жирным, оберни его в теги <b>
</b>
(от bold).
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
b
и/b
(от bold). А в коде сайта для "b" использовали strong, хотя визуально результат одинаковый (b и b). Грустно как то(