Если вы решите создать сайт, то без языка гипертекстовой разметки html вы далеко не уйдете. Конечно, существует еще CSS, PHP и другие скриптовые языки, без которых полноценный сайт, каким вы привыкли его видеть, не получится. Однако именно основные теги html позволят вам заложить базу для вашего сайта.
Главные теги, без которых никуда
Когда вы открываете какой-либо html документ или веб-страницу, вы видите огромное количество различных тегов. Однако, если вы приглядитесь, то большинство из них повторяются, поскольку описывают одни и те же элементы. Например, к основным тегам html относятся такие теги, как тип документа <!DOCTYPE html>, <html>, <head>, <body>, <title>, <img>, <p> и другие.
Тип документа и объявление html документа
Для указания типа текущего документа используется элемент <!DOCTYPE>. Он необходим браузеру, чтобы распознать, как интерпретировать конкретную веб-страницу. В зависимости от того, какую версию html вы используете, выглядеть этот элемент будет по-разному. В HTML5 он примет следующее значение: <!DOCTYPE html>
После того, как вы указали, к какому типу относится ваш документ, следует использовать тег <html>. Как и большинство других тегов, он является парным, то есть имеет открывающие и закрывающие теги. Разница между ними в том, что перед закрывающим тегом расположена косая черта "/". Таким образом, самый основной тег html для создания сайта будет выглядеть так:
<html>
...
</html>
Между открывающим и закрывающим тегом в данном случае будет располагаться остальной код, который будет заключать все содержимое веб-страницы.
Тег <head>
Такой тег также является основным тегом html. Он пишется после <html>, а также является парным и содержит в себе, в основном, метаданные веб-страницы. Эти данные не отображаются в видимой части html страницы (за исключением тега <title>, который содержит в себе название страницы), но используются браузером для правильного отображения документа. Также информация, расположенная в этом теге, используется различными поисковыми системами. Пример:
<head>
Метаданные
<title>Заголовок страницы</title>
</head>
Тег <body>
Основной тег для сайта html, поскольку именно он содержит в себе все видимые элементы страницы - весь текст, все картинки и прочую информацию. По сути, как и тег <html>, он является контейнером для других тегов. Пример:
<body>
Видимое содержимое веб-страницы
</body>
Заголовки и параграфы
Все вышеперечисленные теги являются основными тегами языка html. Однако в языке гипертекстовой разметки существует еще огромное количество других элементов. Например, теги параграфов и заголовков. Они позволяют структурировать текст, разбивать его на отдельные абзацы и выделять. Так, для параграфов используется тег <p>, он является парным тегом, между открывающим и закрывающим элементом которого располагается какой-либо текст. Пример:
<p>
Текст параграфа
</p>
Помимо параграфов, содержать в себе текст могут и заголовки. Однако они также меняют вид текста, содержащегося внутри, увеличивая его в размере и выделяя жирным шрифтом. Существует 6 видов заголовков, которые отличаются в размере. Например, заголовок <h1> является самым большим, а заголовок <h6> - самым маленьким.
Использование изображений
Никакой сайт не обходится без изображений, картинок и фотографий. Ведь без этого веб-страницы представляли бы собой сухой текст, неинтересный для изучения. Чтобы вставить на сайт любое изображение, в языке гипертекстовой разметки используется тег <img>. Важно отметить, что данный тег не является парным, поэтому в коде он будет писаться как <img />.
Гиперссылки в тексте
Зачастую, помимо текста и различных изображений, на сайтах используются ссылки. Они могут перенаправлять на сторонний ресурс или на другую страницу вашего сайта. Для того чтобы обозначить наличие ссылки, используется тег <a>.
Что такое атрибуты?
Мы немного разобрались с основными тегами. Однако у большинства тегов существуют еще и атрибуты. Они прописываются в открывающем элементе и состоят из двух частей. Первая - название самого атрибута, вторая - значение данного атрибута, которое прописывается после знака "=" и заключается в кавычки.
Основные атрибуты html тегов
У многих тегов есть атрибуты. Однако для некоторых тегов их наличие необязательно, если вы не хотите как-либо видоизменять элементы. Для других же тегов присутствие атрибутов обязательно, к таким относятся, например, тег <a> (для создания гиперссылок) и тег <img /> (для добавления на страницу изображений). Все дело в том, что если мы не укажем у этих основных тегов html атрибуты и их значения, то мы не увидим их на странице сайта.
Атрибуты для тега <a>
Если вы укажете в коде текст, заключенный в тег <a>, то кроме этого текста на веб-странице вы ничего не увидите. Сам тег, по сути, говорит лишь о намерении создать гиперссылку, а для того чтобы ее действительно создать понадобится атрибут. Этим атрибутом будет являться href, а значением этого атрибута будет конкретная ссылка на ресурс. Таким образом, если мы хотим создать ссылку на сайт fb.ru, это будет выглядеть следующим образом:
<a href="fb.ru"> Ссылка на fb.ru </a>
Так весь текст, что находится между тегами <a>, является гиперссылкой, а значение атрибута href, заключенное в двойные кавычки, будет являться адресом, по которому мы перейдем, кликнув на тексте.
Атрибуты src для <img />
Похожая ситуация и с тегом <img />. Если мы не укажем вместе с ним атрибут и его значение, то изображения на веб-странице не появятся. Как в случае с тегом <a>, наличие тега <img /> говорит только о том, что мы собираемся вставить фото в наш код. Однако для того, чтобы это изображение появилось необходимо указать адрес данного изображения. Для этих целей необходимо будет использовать атрибут src, значением которого будет являться адрес изображения, расположенного на стороннем ресурсе, либо на вашем компьютере.
<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg />
Атрибут alt для тега <img />
Кроме того, у тега <img /> существует еще один атрибут. Он не считается обязательным, но признан рекомендуемым к использованию. Этим атрибутом является атрибут альтернативного текста alt. Значением этого атрибута будет являться текст, соответствующий описанию фотографии или изображения. Этот текст будет отображаться в случае, если по какой-либо причине изображение не получится загрузить. Кроме того, использование этого атрибута поможет слабовидящим людям, которые пользуются экранными читалками. Таким образом, тег <img /> вместе с двумя представленными атрибутами будет выглядеть следующим образом:
<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg
alt="описание изображения"/>
Какие еще атрибуты существуют?
Атрибутов существует огромное количество, их список так же огромен, как и список основных тегов html. Однако существует атрибут, который присущ сразу ряду тегов. Это align. Он может использоваться вместе с тегом <img />, а также вместе с тегом <p>. Его суть в том, что он задает положение изображения или текста на странице. Самыми основными значениями этого атрибута являются right и left, которые обозначают выравнивание по правому и левому краю (соответственно). Если применить его к изображению, то выглядеть код будет так:
<img src=https://img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg
alt="описание изображения"
align="right"/>
Использование стилей
Однако стоит отметить, что последнее время некоторые подобные атрибуты не используются, а вместо них применяются каскадные таблицы стилей (CSS). Для того чтобы использовать стили в html прописывается тег <link>, который предназначен для подключения стилей и располагается в теге <body>.
