Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером,
даже если вы впервые слышите это слово



Что такое атрибуты тегов 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>

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

Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.

Живой пример

Задание:

  • Выровнять весь текст в документе с «Лукоморьем» по центру (вместе с заголовками),
  • В заголовке первого уровня поставить подсказку «Автор произведения — А.С. Пушкин»

Если у вас нету выполненного файла из предыдущего занятия, то возьмите его здесь и проставьте все нужные атрибуты, чтобы получилось всё по заданию.

И по традиции в начале всё сделайте сами. А если не получится, то смотрите действия, которые я написал ниже.

  1. Откройте документ с лукоморьем и внутри кажодого тега (<p>, <h1>, <h2>) поставьте атрибут align="center".
  2. Внутри <h1> поставьте title="Автор произведения — А.С. Пушкин"

После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.

Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег <div></div>. DIV — это просто пустой блочный элемент, который служит некоторым контейнером для объединения. Сюда можно запихнуть различные атрибуты с цель применения к общему фрагменту. А уж если вы вообще хотите применить атрибут ко всему документу, то его вообще можно прописать в основной тег <body>.

В общем в этом случае вам можно не ставить в каждый тег атрибут align="center". Вам лишь нужно нужно поставить <div> перед заголовком, и закрыть его с помощью </div> в конце всего текста. Ну а внутри <div> ставим align="center", но уже всего один раз. По моему это гораздо быстрее и удобнее и в итоге получается то же самое.

Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.

Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс "HTML5 и CSS3 с нуля до профи". Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.

Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!

С уважением, Дмитрий Костин.

 

 



Этот блог читают уже более 4000 человек, которые решили покончить с компьютерной неграмотностью. Присоединяйся
Комментариев 2
  • Дима классная статья!

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

    Ты пока изучай, а я буду потом учиться по твоим статьям;)

    Артем
    11 июня 2016 в 15:42
  • Отлично рассказали Дмитрий! Сам по себе HTML великолепная штука, такие выкрутасы с ним можно создавать. До бесконечности. Поздравляю Вас с отпуском! желаю хорошего отдыха, хотя про какой отдых речь веду. Но все равно отпуск — замечательная вещь, хотя он и пролетит — не успеешь оглянуться. Курсы Жени Попова и Андрея Бернацкого есть у меня, потихоньку вникаю. Самое банальное — времени нет лишнего, но все равно каждый день понемногу — получается много. Спасибо Вам за статью!

    Надежда
    12 июня 2016 в 20:40
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:


Блог Дмитрия Костина
© 2015-2017 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово
Политика конфиденциальности