Что такое атрибуты тегов html и как ими пользоваться?
И снова я всех приветствую, мои дорогие друзья. Спешу поделиться с вами радостной новостью! С сегодняшнего дня я в отпуске до 1 июля. В общем круто, теперь можно пару недель передохнуть, хотя и отдыхать особо некогда. Ну да ладно. У нас с вами другие задачи. Нам нужно изучать дальше основы сайтостроения.
В прошлой статье я вам рассказывал про теги в html, как ими пользоваться и т.д. А сегодня я вам расскажу о еще одной неотъемлемой части в сайтостроении, а именно про атрибуты тегов html. И конечно же по традиции мы рассмотрим их на живых примерах и испробуем это на нашем сайте с Лукоморьем, который мы заманьячили в прошлой статье.
Атрибут — это специальное дополнение к тегу, которое расширяет его возможности и может менять свойства содержимого. И если тег всегда фиксированный, то атрибут может иметь множество значений. Например, в теге <font> мы можем поставить атрибуты цвета текста, его размера, шрифта и т.д. Но фонт мы подробнее рассмотрим в другой статье.
Различают универсальные и неуниверсальные атрибуты. Универсальные подходят практически для любых тегов, а неуниверсальные подходят для одного или нескольких, но далеко не для всех...
Атрибут записывается внутри тега после его значения, но до закрывающей угловой скобки. Сначала ставится сам атрибут, затем знак равенства, а потом само значение в кавычках. Выглядит это так:
<h1 align="center">Текст</p>
Что следует из этого примера? Мы открыли абзац, и внутри тега поставили атрибут align, который отвечает за выравнивание текста. Далее мы проставили знак «=», который означает, что мы присваиваем значение этому атрибуту. Далее в кавычках мы пишем это самое значение. В данном случае это «center». Это означает, что текст в данном (и только в данном!) абзаце мы выровняем по центру. Попробуйте сами.
Но не забывайте заглядывать на сайт htmlbook. Там вы точно найдете что чему соответствует. Это просто настольный справочник для любого веб-разработчика, а тем более для начинающего.
Align
Как вы уже поняли, этот атрибут означает выравнивание текста. Ставится он обычно в тех тегах, которые отвечают за сам контент (текст, картинки и т.д.). В общем его можете ставить в заголовках (<H1>,...,<H6>), в абзацах (<p>), картинках <img>, блочный элемент (<div>).
Возможные значения атрибутов:
- left — выравнивание по левому краю (стоит по умолчанию)
- right — выравнивание по правому краю
- center — выравнивание по центру
- justify — выравнивание по всей ширине
Попробуйте попрактиковаться и посмотрите как будет меняться расположение ваших элементов.
Title
Знакомое название, правда? Действительно. Есть такой тег, и мы его ставим между <head> и </head>. Но сейчас я говорю именно об атрибуте, и подходит он практически к любому тегу, так как является универсальным. А нужен он в качестве подсказки при наведении. И суть состоит в том, что вы сами пишите эту подсказку. Выглядит это примерно так:
<p title="Ну что ты тупишь? Будет 2">Сколько будет 5-3?</p>
Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег </p>.
Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.
Несколько значений
В одном теге может находиться сколько угодно атрибутов. Главное, чтобы они соответствовали данной метке. Вот вам пример:
<p align="right" title="Подсказка">Содержимое</p>
Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?
Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.
Живой пример
Задание:
- Выровнять весь текст в документе с «Лукоморьем» по центру (вместе с заголовками),
- В заголовке первого уровня поставить подсказку «Автор произведения — А.С. Пушкин»
Если у вас нету выполненного файла из предыдущего занятия, то возьмите его здесь и проставьте все нужные атрибуты, чтобы получилось всё по заданию.
И по традиции в начале всё сделайте сами. А если не получится, то смотрите действия, которые я написал ниже.
- Откройте документ с лукоморьем и внутри кажодого тега (<p>, <h1>, <h2>) поставьте атрибут align="center".
- Внутри <h1> поставьте title="Автор произведения — А.С. Пушкин".
После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.
Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег <div></div>. DIV — это просто пустой блочный элемент, который служит некоторым контейнером для объединения. Сюда можно запихнуть различные атрибуты с цель применения к общему фрагменту. А уж если вы вообще хотите применить атрибут ко всему документу, то его вообще можно прописать в основной тег <body>.
В общем в этом случае вам можно не ставить в каждый тег атрибут align="center". Вам лишь нужно нужно поставить <div> перед заголовком, и закрыть его с помощью </div> в конце всего текста. Ну а внутри <div> ставим align="center", но уже всего один раз. По моему это гораздо быстрее и удобнее и в итоге получается то же самое.
Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.
Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс "HTML5 и CSS3 с нуля до профи". Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.
Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!
С уважением, Дмитрий Костин.
Дима классная статья!
Правильно делаешь, что изучаешь программирование, я сам давно хочу начать, да все некогда, как всегда отговорки).
Ты пока изучай, а я буду потом учиться по твоим статьям;)
Отлично рассказали Дмитрий! Сам по себе HTML великолепная штука, такие выкрутасы с ним можно создавать. До бесконечности. Поздравляю Вас с отпуском! желаю хорошего отдыха, хотя про какой отдых речь веду. Но все равно отпуск — замечательная вещь, хотя он и пролетит — не успеешь оглянуться. Курсы Жени Попова и Андрея Бернацкого есть у меня, потихоньку вникаю. Самое банальное — времени нет лишнего, но все равно каждый день понемногу — получается много. Спасибо Вам за статью!