Базовые теги HTML
Продолжаем знакомиться с языком разметки HTML, основой основ большинства сайтов в интернете. Раньше мы уже рассказывали об этом языке, а теперь изучим самые простые и самые необходимые теги и их атрибуты в HTML.
Напомним, что теги и атрибуты — это инструменты, с помощью которых контент на странице сайта организовывается тем или иным образом. Атрибуты прописываются внутри тегов и имеют рядом с собой знак «=», а сами теги всегда заключаются в угловые скобки. Почти все теги в HTML являются парными и окружают с двух сторон ту часть контента, к которой они должны быть применены. Первый, открывающий, тег пишется без дополнительных символов, а во втором, закрывающем, теге после первой скобки появляется знак «/».
Основное
<html></html> Сигнализирует браузеру, что он имеет дело с HTML-документом.
<head></head> Очерчивает часть документа, которая не видна на странице. Предназначен для тега названия, для размещения счётчиков веб-аналитики и не только.
<title></title> Тот самый тег названия документа, его содержимое отображается в ярлыке вкладки браузера.
<body></body> Ограничивает часть документа, которая видна на странице. О том, какие теги здесь могут использоваться, мы покажем далее.
Оформление текста
<i></i> Выделяет текст курсивом.
<b></b> Делает текст полужирным.
<u></u> Подчёркивает текст.
<s></s> Зачёркивает текст.
<cite></cite> Предназначается для оформления цитат.
<tt></tt> Имитирует шрифт печатной машинки.
<code></code> Выделяет текст шрифтом Monospace, который используется для оформления фрагментов кода.
<font size=?></font> Определяет размер текста с помощью значений от 1 до 7, которые нужно подставлять вместо вопросительного знака.
<font color=?></font> Определяет цвет текста с помощью формата RRGGBB. Шестизначный код цвета так же вставляется вместо вопросительного знака.
Организация текста
<h1></h1> Оформляет текст в виде самого большого заголовка.
Заголовок h1
<h6></h6> Оформляет текст в виде самого маленького заголовка. Также можно использовать промежуточные значения 2, 3, 4, 5: чем больше цифра, тем меньше значимость заголовка в структуре текста.
Заголовок h6
<p></p> Оформляет абзац.
<p align=?> Выравнивает абзац нужным образом. Вместо вопросительного знака здесь можно поставить одно из четырёх значений: left (по левому краю), right (по правому краю), justify (по ширине) или center (по центру).
<br> Добавляет перенос
строки.
<blockquote></blockquote> Вставляет отступы с обеих сторон текста.
<ol></ol>
- Предназначается
- для
- нумерованных
- списков.
<ul></ul>
- Оформляет
- ненумерованный
- список.
<li> Сопровождает каждый пункт в списке, обозначая его цифрой или маркером — в зависимости от типа списка.
Работа со ссылками
<a href="URL">ТЕКСТ</a> «Зашивает» ссылку в нужный фрагмент текста. Адрес ссылки вставляется вместо «URL», а текст по умолчанию окрашивается в синий цвет и подчёркивается.
<a href="URL">
<img src="imgURL"></a> Добавляет ссылку, которая открывается при нажатии на картинку. Адрес картинки ставится вместо «imgURL».
<a href="#якорь">ТЕКСТ</a> С помощью этого тега можно сослаться на «якорь» — определённый фрагмент внутри просматриваемой страницы. К примеру, якоря используется для быстрого перехода из оглавления к соответствующей части статьи. Вместо «ТЕКСТ» в первом теге необходимо поместить слово или фразу, нажав на которую, можно будет перейти в нужный участок страницы. А там, куда нужно привести читателя, необходимо добавить атрибут id="якорь" в любой тег. Например, по этой ссылке можно перейти в раздел «Основное» в начале статьи.
Работа с графикой
<img src="URL"> Добавляет изображение. Вместо «URL» нужна ссылка на необходимый файл.
<img src="URL" align=?> Как и в <p align=?>, этот параметр выравнивает изображение нужным образом, однако здесь применяется уже шесть значений: left (слева), right (справа) и center (по центру), а также bottom (внизу), top (вверху) и middle (посередине)
<img src="URL" border=?> Создаёт рамку в виде сплошной линии вокруг изображения. Вместо вопросительного знака можно указать любое целое положительное число. Чем больше число, тем толще рамка.
<body background="URL"> Атрибут background в теге <body> позволяет установить картинку в качестве фона страницы.
<hr> Создаёт сплошную горизонтальную линию.
Вы можете проверить работу всех перечисленных выше тегов, создавая свои собственные HTML-документы. Для этого подойдёт даже Microsoft Office Word или другой текстовый редактор. Необходимо лишь сохранить файл с кодом в формате .html. Но также существуют и HTML-редакторы, которые предназначены для работы с этим языком — о них мы расскажем в одной из наших следующих статей.