Учим HTML - основу веб-разработки (ч.3)

Сегодня хочу поговорить об атрибутах html-тегов

<p class="first-attribute">Первый параграф</p>

В примере сверху был использован тег <p>, ну а как вы поняли, атрибутом тут является class="...", прямо так и говорится: Тэг <p> имеет атрибут class

Обычно атрибуты применяются для создания ссылок, дизайна, присвоения имён тегам

Приведу примеры нескольких тегов с атрибутами:

<a href="yandex.ru">Ссылка, которая перенаправляет на сайт Яндекса</a>(вместо yandex.ru может быть любой другой адрес). href - атрибут

<p class="my_style">Параграф</p>

<p id="my_style_1">Еще один параграф</p

У двух тегов выше есть атрибуты class и id соответственно, они используются для дизайна страницы с помощью CSS (Об этом поговорим позже)

Забыл сказать, что у html-тегов может быть бесконечное количество атрибутов:

<a class="my_style" href="google.com"></a> - разные атрибуты разделяются пробелами.

В принципе это основная информация об атрибутах. Для знания основ большего не надо.

Предлагаю теперь перейти к еще нескольким html-тегам, которые будут нам полезны в дальнейшем:

<img src="/img/test.jpg" alt="Горы"> - используется для прикрепления изображения на сайт.

src - атрибут, в котором указывается путь к картинке (если вы создаете страницу на локальном компьютере, то корневой папкой для картинки будет та папка, в которой лежит ваш html-файл. Например ваша картинка называется test.jpg и вы положили её в ту же папку что и html файл, тогда src="/test.jpg")

alt - Текст, который будет отображаться в том случае, если по каким-то причинам картинка не отобразится

Тэги div и span:

Тэг div никак не влияет на то, что видит пользователь, но несмотря на это он выполняет важную функцию для дизайна сайта.

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

Тут на помощь приходят тэги div и span

Всё что вы заключите между тегами <div> и </div> будет выделено отдельным блоком, к которому вы можете применить стили. Таким образом можно выделить меню, блок с новостями и т.д. и применить к ним абсолютно разный дизайн. (Где-то сделать вытянутую полоску, где-то изменить цвет фона и так далее)

Тэг <span> несёт точно такую же функцию как и <div>, но отличается в отображении на странице:

<div>Первый блок</div>

<div>Второй блок</div>

<div>Третий блок</div> - если вы поместите на свою страницу такие три блока, то они будут располагаться один под другим.

<span>Первый блок</span>

<span>Второй блок</span>

<span>Третий блок</span> - такие три блока будут располагаться на одной строке.

Вот и всё отличие)

Тэги <br> и <hr> (не требуют закрывающего тега):

Допустим вы решили вставить на вашу страницу текст сплошняком и вам понадобилось где-то сделать перенос на новую строку. Именно в этом месте и надо поставить тэг <br>

Тэг <hr> также отвечает за переход на новую строку, но еще и рисует горизонтальную линию во всю ширину текущего блока между строками, которые вы перенесли.

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

@honey_and_money - Развивайся вместе с нами