Виды тегов HTML. Атрибуты. Урок 4

Виды тегов Обучение html

В этом уроке мы разберем два вида html тегов. Парные и одиночные, а также, что такое атрибуты. Тема является одним из азов сайтостроения. Поэтому вчитывайтесь по внимательнее. Дадим совет, не зубрите все теги сразу. По ходу обучения, будут советы, какие теги лучше запомнить. 

Парные теги

Вся суть этого вида заключается в наличии пары, то есть у открывающего тега есть закрывающий. Тег начинается с открывающейся галочки – < – пишется название тега и закрываем обратной галкой – > -. Дальше пишем произвольный текст, который нужно отобразить внутри тега, и теперь закрываем тег с помощью той же конструкции, галка – < – далее указываем “слэш”  – / – (косая черта), который символизирует закрытие, снова название тега и вновь обратная галочка. Посмотрите на тег который является самым главным заголовком страницы, и оказывает серьезное влияние на ранжирование поисковых сетей:

<h1> Отображаемый текст </h1>
Виды тегов HTML. Атрибуты. Урок 4
Виды тегов HTML. Атрибуты. Урок 4

Примечание!

Для избежания дальнейшей путаницы, забежим немного вперед и расскажем, что у этого тега есть 7 уровней.
<h1> Этот заголовок первого уровня </h1>
<h2> Этот заголовок второго уровня </h2>
<h3> Этот заголовок третьего уровня </h3>
<h4> Этот заголовок четвертого уровня </h4>
<h5> Этот заголовок пятого уровня </h5>
<h6> Этот заголовок шестого уровня </h6>
<h7> Этот заголовок седьмого уровня </h7>

Знайте, h1 самый важный, h7 менее важный. 

Кстати, время попрактиковаться! Создайте веб документ со структурой которую изучили ранее, поместите все заголовки внутри тега

<body> вот сюда поместите заголовки </body>

Напишите в комментариях, чем они отличаются друг от друга.

Одиночные теги

Одиночные теги отличаются от парного окончанием, его нет. Другими словами, он сам по себе, и не нуждаются в напарнике. Если бы у парного тега параграф не было концовки </p>,  тогда это был бы одиночный тег. Вот несколько примеров одиночных тегов:

<br> – переносит текст на новую строку. Действие похоже на нажатие клавиши Enter в программе Word. Помните результат?

Тег <img> вставляет картинку в ваш HTML документ и тоже не нуждается в напарнике.

Про предыдущую версию HTML.

Напоминаем, что мы вам рассказываем про 5 версию HTML, она самая актуальная для изучения. В этой версии вы узнали, что одиночный тег пишется подобным образом <br>, без косой черты. Но в своей практике вы можете встретить такое написание </br>, с косой чертой. Знайте это не ошибка, а версия написания в HTML 4.

Виды тегов HTML. Атрибуты. Урок 4

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

Созданы для помощи, уточнения или обозначения каких-либо параметров. Представьте, тег – это босс, директор! Атрибут это помощник, выполняет задачи поставленные руководством. Чтобы легче разобраться, приведем пример с вставкой изображения на сайт. Для этого используем одиночный тег <img>. Если оставить как есть, без добавления атрибута, то ничего не произойдет. Никто не знает какую именно картинку вы хотите вставить. В этом нам поможет атрибут src = " " внутри которого мы напишем, какое изображение мы хотим показать посетителю нашего веб ресурса, указав путь. Полноценно код должен выглядеть так <img src="путь до файла" >

Виды тегов HTML. Атрибуты. Урок 4

Запомните, src = " " это универсальный атрибут. Применяется и пользуется спросом у других тегов. Прямое назначение – указать путь к изображению, картинке или документу. Могут быть и уникальные, когда атрибут подчиняется только одному тегу.

Итог урока

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

webm.tech