Основы HTML и CSS

Атрибуты

Давайте теперь разберёмся, что такое атрибуты? Атрибуты – это, по сути, параметры наших тегов. То есть мы можем по мимо того, чтобы написать какой-то тег, можем дать какие-то ему свойства, параметры.

Давайте для примера напишем обычный «div» и дадим ему атрибут, который называется class.

<div class="button"></div>

Для того, чтобы задать атрибут, необходимо внутри открывающего тега, после названия сделать пробел и написать название атрибута, в данном случае «class», потом «=» и в кавычках написать значение этого атрибута, допустим сделаем «button», то есть кнопка.

Атрибут «class», по сути, даёт название нашему тегу, то есть по классу мы можем к нему обращаться. То есть говорить: «Эй, тег с названием «button», давай, у тебя будет ширина 250 px, высота 50 px и цвет красный.» Вот таким образом определённому тегу мы можем давать разные свойства, которые он будет принимать.

Так же помимо класса мы можем давать имя нашему тегу с помощью «id».

<div id="button-1"></div>

Только здесь мы напишем «button-1». В чём разница? «id» – это уникальный идентификатор нашего тега, то есть это имя даётся только один раз на странице. Нельзя ни в коем случае писать код вот так вот:

<div id="button-1"></div>

<div id="button-1"></div>

Это неправильно. Это в принципе сейчас никаких ошибок не создаст на странице, но, во-первых, по правилам так нельзя делать, во-вторых, когда вы будете использовать JavaScript в будущем, возможно, это создаст ряд некоторых проблем в связи с тем, что вы так написали.

Поэтому правило: «id» на странице пишется один раз, классы вы можете использовать на странице сколько угодно, то есть вы можете написать вот так:

<div class="button" id="button-1"></div>

<div class="button" id="button-2"></div>

<div class="button" id="button-3"></div>

<div class="button" id="button-4"></div>

Получается, у всех этих «div’ов» есть общее имя «button», то есть мы можем всем этим кнопкам задать одни и те же свойства и задать какие-то уникальные свойства именно для этой кнопки по id. Мы можем обратиться ко всем «div’ам» на странице, у которых есть «button» или к какому-то «div’у», у которого «id=”button-1”» или «button-2», или «button-3», или «button-4». Возможно, это сейчас немного сложновато понять, но в процессе вёрстки, в процессе дальнейшего изучения это всё приживётся и всё будет понятнее. 

Давайте немножечко ещё вернёмся к атрибутам, к написанию атрибутов, к правилам. Как видите, у нас стоят двойные кавычки, и, как правило, всегда возникает вопрос, а можно ли написать одинарные кавычки? Конечно же, можно, но для этого, если вы пишете одинарные кавычки, то обязательно нужно закрыть одинарными. Если открываете двойными, то нужно закрыть двойными. Ни в коем случае нельзя писать вот так: «id=’button-1”»; или вот так: «id=”button-1’».  Это создаст ошибку на странице и ничего работать не будет.

Для чего вообще нужно использовать одинарные или двойные кавычки? (На будущее.) Допустим, вы пишете какой-то текст, и вы его пишете в кавычках:

'Какой-то текст.'

Если вам нужно сделать внутри этого какого-то текста, допустим, какое-то слово в кавычках, то если вы напишите так:

'Какой-то 'какое-то слово' текст.'

То CSS создаст ошибку. Для этого нужно писать это слово в двойных кавычках. То есть, если текст в одинарных кавычках, то слова внутри должны быть в двойных кавычках. И наоборот: если здесь двойные, то здесь должны быть одинарные.

В общем должно быть так: 

'Какой-то "какое-то слово" текст.'

Или так:

"Какой-то 'какое-то слово' текст."

В любом случае, если вы с такой проблемой столкнётесь и сделаете ошибку, то эта ошибка даст о себе знать, и вы исправите её в любом случае.

Изначально атрибуты вы можете писать даже без кавычек, но в этом случае у вас не должно быть в значении никаких пробелов.

Так же в какой-то мере все атрибуты можно классифицировать на две такие большие подкатегории: пользовательские и стандартные.

Стандартные атрибуты – это атрибуты, которые заданы системой. Есть, например, атрибут «class». Html знает, что «class» - это название нашего тега. 

Так же вы можете нашим тегам давать какие-то собственные атрибуты, например, вот такой так:

<div my_tag='my_value'></div>

Возможно, по ситуации, мне нужно дать какой-то особенный собственный атрибут и как-то его в дальнейшем использовать. Это не запрещено, это возможно. Вы можете писать абсолютно любые атрибуты, какие только захотите. Это по большей части вам понадобится, когда вы будете изучать JavaScript, то есть при обычной вёрстке нестандартные теги практически не используются и это не очень-то и нужно.

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