Следующее важное понятие, которое мы с вами должны изучить это понятие «атрибуты тега».
Что это за атрибуты?
Прежде чем изучать HTML атрибуты, давайте я приведу небольшой пример из жизни, и тогда вам станет все намного понятнее. Представьте себе город, в котором есть сеть общественного транспорта, например автобусы, маршрутки и т.д. Представьте, что со всех этих автобусов убрали таблички с их номерами маршрутов. Остались только автобусы, которые продолжают ездить по своему маршруту. Соответственно люди перестанут понимать, куда едет этот автобус, куда едет тот и садиться им в этот автобус или нет, если он остановился у них на остановке. Начнется полный хаос, потому что все автобусы будут выглядеть на одно лицо. Этого не происходит, потому что у каждого автобуса, у каждой маршрутки есть такой маленький атрибутик, который указывает его маршрут. На лобовом стекле или еще где-то обязательно написан номер маршрута. По этому атрибуту мы всегда можем отличить нужный нам автобус из всего потока, и уже соответственно можем знать, как он поедет и нужно ли нам в него садиться или нет. Атрибут – это некий указатель, который выделяет элемент из толпы. Также и с HTML тегами.
Атрибут выравнивания
Сейчас если вы заметили у нас все абзацы на одно лицо и браузер также их все на одно лицо отображает. Они у нас все как на подбор: выровнены по левому краю, черного цвета, обычного шрифта, т.е. ничего в них нет – они все одинаковые. Если мы хотим выделить какой-то из абзацев – мы должны дать ему атрибут. Допустим, у нас есть задача выровнять второй абзац по центру. Для этого мы можем воспользоваться специальными атрибутами, которые пишутся после названия тега. Мы ставим после названия пробел и пишем нужный атрибут. В данном случае нас интересует атрибут выравнивания, который пишется – align, но просто align написать не достаточно, сюда мы должны указать, как именно мы должны выровнять данный абзац, поэтому мы пишем значение присвоить – =, и пишем в кавычках как именно нам нужно его выровнять, в нашем случае пишем значение center. Данный атрибут скажет браузеру, что этот абзац нужно отображать не как обычно, а выровненным по центру. Это простейший пример атрибута, который мы добавили и на который браузер среагировал.
Атрибуты маркировки списка
Точно также у нас есть тег <ol> - нумерованный список. В данном случае он у нас начинается с единицы, но предположим, что мы захотели, чтобы у нас этот список начинался с нуля. В этом случае мы можем написать атрибут start – начало, и указать значение «0» - это скажет браузеру, что данный список нужно начинать не как обычно с единицы, а именно с нуля.
Вот еще один пример. Есть у нас список с круглыми черными маркерами, допустим, мы захотели сделать список с квадратными маркерами, допустим, у нас весь дизайн квадратный и нам больше подойдут квадратные маркеры. В этом случае есть выход: для тега <ul> мы можем прописать type и дать ему значение square – квадрат, это уже скажет браузеру, что данный тег нужно отображать с квадратными маркерами. Есть еще одно значение circle – пустой круг.
В данном случае атрибут start – это атрибут под конкретный тег <ol>, т.е. он применим только к нему. Мы не можем написать для абзаца start=”0” – это будет бред и браузер не поймет, как браузер может быть start=”0”, а здесь он сразу знает, что у него есть нумерованный список и его нужно начинать не с единицы как обычно, а с нуля. Точно также с тегом <ul>. У нас есть атрибут type в котором мы указываем значение круг или квадрат и браузер понимает, что у него есть маркированный список, и мы ему указали какой маркер ему нужно использовать. Если мы напишем сюда start=”0” или тегу <ol> напишем type=”square”, то опять-таки ничего не произойдет, браузер просто проигнорирует эти атрибуты, потому что они не относятся к этому тегу. Вообще это никак не повлияет на отображение страницы, потому что язык HTML достаточно либеральный, он не реагирует на такие ошибки и здесь вам главное самим понимать, что конкретные атрибуты создаются для конкретных тегов. Есть и общие атрибуты, например align, его мы можем применить к абзацу, к заголовку, к элементу таблицы и т.д.
Общие атрибуты
Плюс ко всему есть такие общие атрибуты как id и class, мы будем использовать такие атрибуты очень часто в курсе по CSS, т.е. когда нам нужно будет выделить какой-то элемент на странице, мы можем написать атрибут id и дать ему значение. Давайте дадим заголовку <h1> идентификатор header.
Потом с помощью CSS мы сможем работать с этим тегом отдельно. Вот в этом и состоит весь смысл атрибутов. Какие здесь особенности, что нужно знать? По сути, здесь нужно знать две вещи:
- Есть атрибуты, которые можно применить к любому тегу, есть атрибуты, которые можно дать некоторым тегам и есть атрибуты, которые можно дать определенному тегу. У вас может возникнуть вопрос: Какие атрибуты, какому можно давать, а какие нельзя? Для этого вы можете воспользоваться любой шпаргалкой по HTML.
- До появления CSS все оформление страниц возлагалась именно на HTML, т.е. мы с помощью HTML должны были указывать шрифты, жирность, цвет и т.д., т.е. все это делалось через атрибуты тега. Все что касалось оформления, делалось при помощи CSS и по большей части именно с помощью атрибутов. С появлением CSS, HTML используется в основном только для создания каркаса страницы, т.е. мы указываем с помощью HTML, где заголовок, где параграф, где список и т.д., а все остальное оформление мы делаем с помощью CSS. Поэтому многие атрибуты больше не используются, тот же align не используется, я привел его для примера, чтобы вы знали, что такой вообще есть, поэтому его желательно удалить, он может нам помешать в последующей верстке. На самом деле все, что касается оформления, делается с помощью CSS. Поэтому наша задача состоит в создании каркаса в HTML.
Здесь мы сильно углубляться не будем, наша задача не в том, чтобы изучить все атрибуты всех тегов, а понимать, что это такое. На практике вы увидите, какие атрибуты используются достаточно часто и которые нужно знать наизусть, а которые используются достаточно редко и которые можно посмотреть в шпаргалке на крайний случай. Здесь мы остановимся. Продолжим уже в следующем уроке, где займемся изучением вставки изображений на HTML странице, и там нам знания атрибутов помогут.