Основы HTML

Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.

Именно с помощью HTML-тегов браузеру отдается информация о том, что именно на странице будет заголовком первого уровня, что абзацем, что подзаголовком, где будет расположена ссылка, куда ссылка будет вести и т.д. 

К примеру:

  • Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег <h1> и в конце закрывающий тег </h1> (об открывающих и закрывающих тегам мы поговорим чуть ниже). 
  • Подобным же образом можно выделять подзаголовки других уровней (от <h2> до <h6>).
  • Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги <p> и </p> соответственно (открывающий и закрывающий теги).
  • Чтобы сделать перенос строки, достаточно просто поставить тег <br> там, где он необходим.

Подобным образом, зная необходимые Вам теги и правила их использования, Вы сможете формировать HTML-документы с описанием содержимого страниц.

Теперь перейдем к более детальному описанию нюансов работы с HTML.

Структура страницы

Любая страница на сайте - это текстовый файл с расширением .html.

Именно внутри этого файла лежит все содержимое страницы - тексты, теги и т.д.

Внутри любого такого файла должны обязательно присутствовать несколько обязательных тегов, таких как:

  • <!DOCTYPE html> в начале документа.
  • <html> в начале и </html> в конце документа - между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
  • <head> в начале и </head> в конце перечисления служебных тегов.
    • <title> - служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
    • <meta> - служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
  • <body> в начале и </body> в конце содержимого страницы - между этими двумя тегами уже приводится контент страницы, тексты, теги абзацев, заголовков и т.д.

Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это служебный заголовок</title>
</head>
<body>
Тут должно быть содержимое страницы 
</body>
</html>

Атрибуты и теги

Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как <html>, <head> и <body>.

Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега <body>).

Для начала расскажем, что такое теги и что такое атрибуты.

  • Тег - это именно то, что заключено в угловые скобки, например <b>. Чаще всего теги существуют в паре - открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег <b>, а в конце </b> - весь текст между <b> и </b> будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег <br> для переноса строки - его достаточно просто вставить в нужное место).
  • Атрибут - дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: <a href="https://megagroup.ru">Наш сайт</a>. Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги <a> и </a> - именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href="тут вставляется ссылка". Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.

Основные теги

Теперь, когда мы разобрались, что такое теги и что такое атрибуты, приведем для примера наиболее популярные и часто используемые теги.

Предполагают работу с открывающим и закрывающим тегами:

  • <p> - тег для обозначения абзаца в тексте. Весь абзац обрамляется в <p> и </p>
  • <h1><h2><h3><h4><h5><h6> - теги для создания заголовков разного уровня в тексте. В заголовке h1 рекомендуется прописывать основной заголовок всей страницы,  в h2 - название блоков страницы, в h3 - название подблоков и т.д. 
  • <b> - тег для выделения текста жирным шрифтом.
  • <i> - тег для выделения текста курсивом.
  • <a> - тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: <a href="http://site.ru">наш сайт</a>

Самозакрывающиеся теги (не требуют закрывающегося тега):

  • <br> - перенос строки.
  • <hr> - тег для вставки горизонтальной линии в текст.
  • <img> - тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как <img src="URL картинки" alt="альтернативный текст">.

Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между <!-- и -->, у Вас должно получиться следующее:

<!-- 
Тут текст комментария
-->

Это лишь некоторые из возможных тегов.

С более полным перечнем Вы можете ознакомиться в подробном справочнике по ссылке.

Списки в HTML

Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.

Для создания нумерованного списка Вам понадобятся теги <ol> (в начале и закрывающий </ol> в конце списка) и <li> (в начале и закрывающий </li> в конце каждого пункта). Таким образом у Вас должен получиться список примерно следующего вида.

<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>

Для создания же маркированного списка Вам понадобятся теги <ul> и <li> соответственно.

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>

Таблицы в HTML

Основным тегом в таблице будет <table>. Именно между <table> и </table> будет заключена вся информация о ячейках.

Следующим тегом, будет тег <tr>. Между <tr> и </tr> будет лежать информация о рядах таблицы.

Внутри каждого ряда должны быть теги <td>. Соответственно, между <td> и </td> необходимо указывать содержимое ячеек ряда.

Таким образом, в итоге таблица в HTML будет выглядеть примерно так:

<table border="1">
<tr>
<td>Ячейка 1 из ряда 1</td>
<td>Ячейка 2 из ряда 1</td>
</tr>
<tr>
<td>Ячейка 1 из ряда 2</td>
<td>Ячейка 2 из ряда 2</td>
</tr>
</table>

Как можно заметить, в самом начале у тега <table> есть атрибут border - в нем указывается толщина рамки в пикселах.

Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т.д.

С более подробной информацией по работе с таблицами и их атрибутами, Вы можете ознакомиться по ссылке.

Дополнительная информация

В данной инструкции мы привели лишь основную информацию о том, как работает HTML, что он из себя представляет, как с ним работать.

Само собой, для того чтобы создавать полноценные шаблоны страниц, наполнять их контентом и т.д. Вам понадобятся более обширные познания в этом языке разметки.

Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий