Учим HTML - основу веб-разработки (ч.3)
@honey_and_moneyСегодня хочу поговорить об атрибутах 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 - Развивайся вместе с нами