Тело страницы и основные теги

То, что мы видим в браузере это и есть тело страницы, или тег <body></body>, именно в него помещается весь контент.

Текст (контент) — основа страницы. Но если просто добавить много текста в теге
<body></body>, это будет большая куча без абзацев, отступов, вообще без какого-либо форматирования. Для того, чтобы придать тексту читаемый вид, первыми вступают в дело теги html. Тегов для форматирования текста не так много, все многообразие, которые вы могли видеть на сайтах, создают стили и дополнительные параметры для тегов. Сегодня мы рассмотрим простые теги.

Новый сайт для Frontendchallenge: frontendchallenge.codemonkey.press/2.html

Базовый тег — это строка. Пишется как <p>. По идее данный тег можно не закрывать, но работает это только в самых последних версиях html с тегом <DOCTYPE html>. Так же в некоторых редакторах закрытые блоки подсвечиваются, что многим удобно. Закрывать или нет тег <p> решать вам, но в рамках одного проекта лучше делать все одинаково.
Текст, отображаемый при наведении мышки: <p title=»текст при наведении»>обычный текст </p>


Ссылка на страницу: <a href=»ссылка на сайт или директорию на сервере»> отображаемый текст</a>
Аббревиатура <abbr title=»отображаемый текст при наведении мышкой»> сама аббревиатура </abbr>

Заголовки. Существует 6 уровней заголовка, служат для форматирования текста, выделения важной информации и продвижения сайта. Выглядят как <h1></h1>…<h6></h6>

Теги различного отображения текста:
<b> Жирный шрифт </b>
<em> Курсив </em>
<u> Подчеркнутый текст </u>
<s> Перечеркнутый текст </s>
<big>Большой текст </big>
<small> Маленький текст </small>
<sub>Подстрочный знак</sub>
<sup>Надстрочный знак</sup>

Дополнительные теги форматирования текста.
<pre></pre> Сохраняет форматирование (пробелы, отступы) исходного текста
<hr> проводит горизонтальную черту
<br> перенос текста на новую строку
<mark></mark> Выделение текста
<code></code> тег для выделения кода в тексте
<var></var> тег для создания переменной в тексте. Это не просто выделение в тексте, а возможность в дальнейшем работать с этой переменной.

С этим набором тегов уже можно создать примитивную страницу. Красоты, разумеется, там не будет и в помине. Как все это выглядит можно увидеть тут:
frontendchallenge.codemonkey.press/2.html

Добавить комментарий

Ваш e-mail не будет опубликован.