22.02.2017   2622

Теги как основа HTML-страницы

Теги в HTML

Привет! Ну что, сделали свою первую страничку? Молодцы! Теперь давайте поговорим о тегах: что это такое и зачем они нужны.

Создание web страницы с помощью HTML осуществляется с использованием тегов. Каждый тег содержит в себе определенный элемент. А все вместе они образуют именно ту страницу, которая отображается в окнах браузеров. Это и есть те самые основы HTML. Давайте поговорим о них более подробно.

Любой тег, вне зависимости от его назначения и месторасположения, размещается между символами < и >, расположенными в начале и конце тега, соответственно.

Пример: <p>.

Парные теги

Теги бывают двух видов. К первому относятся парные, включающие в себя две составляющие, от чего и получили свое название. Эти составляющие называются открывающимися и закрывающимися тегами. Закрывающийся тег отличается от своей пары наличием символа /, который ставится сразу после <.

Пример:

<p>Абзац</p>

Ко второму типу тегов относятся одиночные. И, как следует из названия, они не имеют пары в виде второго, закрывающего тега.

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

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

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

К числу таких тегов относятся: <br>, <hr>, <img>.

Пример:

Строка<br>
Следующая строка

Если вы где-то увидите вот такой формат записи одиночного тега <br/>, то знайте, что так они выставлялись в более ранних версиях HTML. Но сейчас, когда появился HTML 5, слэш использовать не обязательно.

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

Также в разговоре об основах HTML нельзя не упомянуть об атрибутах тегов. Для определенных тегов использование атрибутов не являются обязательным, но вполне допустимо. А в некоторых случаях – они нужны однозначно.

Примером такого случая может быть тег <img>, который предназначен для того, чтобы вставлять на страницу изображение. Обязательным атрибутом для данного тега является src, с помощью которого можно указать, а где же именно находится картинка. Это делается для того, чтобы браузер смог открыть изображение. Если адрес картинки будет указан без атрибута, изображение на странице не отобразится.

Как правило, в большинстве случаев теги и атрибуты прописываются в HTML вот так:

<имя-тега атрибут1="значение1" атрибут2="значение2" …>

У тега может быть как один, так и несколько атрибутов. Ниже вы можете видеть примеры.

<p class="text">...</p>

<a class="main-link" href="https://webshake.ru/">...</a>

<img class="logo" src="logo.jpg" width="200px">

Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу. В следующих уроках мы будем разбирать различные теги и изучать, для чего каждый из них предназначен. Там всё будет более конкретно. Идём дальше.

Следующий урок Предыдущий урок

Комментарии

 AnnaVyushkova 2017-03-19 06:14:39
+1

Добрый день, если я не ошибаюсь(а если да, то сорян), то в домашнем задании Вы написали <img src="logo.jpg>, а как же закрывающая кавычка?

Ответить
  •  cr3at0r 2017-03-19 07:51:19
    +1

    Добрый день! Конечно же это ошибка! Спасибо большое, исправил.

    Ответить
 adianon 2017-05-26 12:44:04
+1

Не знал о нововведениях, раньше в сообщениях использовал тег <img>, где он был парный и меду ними вставлял адрес, где непосредственно хранится изображение.

Ответить
 Freeman 2017-06-11 19:10:22
+1

Классный сайтец, Артём красава.

Ответить
 Freeman 2017-06-11 19:47:29
+1

Артём, подскажите, я делаю себе конспект, в формате html, как мне корректно отобразить в браузере такую запись: <h2>Tags:</h2>
<p> "<p>Абзац</p>" </p>, и пр.?

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности