Coding-space.ru
menu

Работа с атрибутами

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

Итак, атрибуты.

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

Атрибут align

align имеет четыре значения:
1) left - значение по умолчанию: это означает, что у элементов с самого создания установлен align="left"
2) center - выравнивание по центру.
3) right - выравнивание по правому краю.
4) justify - выравнивание по правому краю и левому краю.

Давайте запишем уже известный нам тег параграфа <p> с использованием атрибута align:

<p align="right">Текст справа</p>

Результат:

atribute example
Атрибуты имеют структуру name="value"

Атрибут class и id

Сейчас мы познакомимся с одним из самых полезных атрибутов в HTML - атрибутом класса. Итак, class - стилевой класс, который служит для связывания определённого элемента с его оформлением, зачастую с CSS.

Class можно считать именем для определенного элемента, которое задается чтобы обращаться именно к этому элементу и изменять его оформление.

<body>
<p class="red-text">Красный параграф</p>
<p class="text-centered">А этот параграф по центру</p>
<p class="red-text">Еще один красный параграф</p>
<style>
.red-text {
color: red;
}
.text-centered {
text-align: center;
}
</style>
</body>
class atr
Использование class

Как Вы уже заметили, один и тот же class можно указывать разным элементам и им присвоятся указанные в CSS значения.

То, что находится между <style> - CSS стили. О них мы поговорим чуть позже в курсе по CSS.

Id - точно такой же атрибут как class, только за исключением того, что он может быть только один. Правило такое - 1 элемент = 1 id, или же id может вообще не быть.

Мы будем очень часто использовать данные атрибуты при работе с CSS.

Атрибуты - это просто! Сейчас мы заложили фундамент на будущее. В следующей главе мы познакомимся с тегами, которые не могут обходиться без атрибутов. И также изучим другие атрибуты. А пока предлагаю пройти задачи для закрепления материала.

Задачи

Управляй атрибутами!

Предлагаем Вам попробовать повторить следующую структуру, используя атрибуты:

atribute example

Итак, а вот и решение:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1 align="center">Заголовок h1 по центру</h1>
<p align="right">Параграф справа</p>
<p align="justify">А этот текст обтекается и справа и слева. Текст большой... </p>
<br>
<p>Это текст без атрибутов. Но, там какая-то невидимая линия сверху.</p>
</body>
</html>

Помогайте другим!

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