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

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

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

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Атрибуты HTML можно использовать для изменения цвета, размера и других характеристик элементов HTML. Например, атрибуты могут изменить цвет или размер шрифта текстового элемента или ширину и высоту изображения. В этом мануале мы расскажем, как использовать атрибуты HTML для определения размера и цвета текстовых элементов HTML.

Атрибут HTML помещается в открывающий тег следующим образом:

<element attribute=”свойство:значение;”>

Одним из самых распространенных атрибутов является style, он позволяет определять свойства стиля элемента HTML. Как правило, для определения стиля HTML-документа чаще всего используется отдельная таблица стилей, но в этом руководстве мы будем использовать атрибут style.

Использование атрибута style

Для примера мы можем изменить с помощью атрибута style несколько свойств элемента <h1>. Очистите файл index.html и вставьте приведенный ниже код в свой браузер.

<h2 style=”font-size:40px;color:green;”> This text is 40 pixels and green.</h2>

Примечание: Если вы не работали с этой серией мануалов последовательно, рекомендуем обратиться к статье Подготовка HTML-проекта.

Давайте рассмотрим каждую часть этого HTML-элемента по отдельности:

• h2 – это тег, который устанавливает второй по величине заголовок.
• style – это атрибут. Он может принимать множество различных свойств.
• font-size – это первое свойство, которое мы устанавливаем для атрибута style.
• 40px; – это значение свойства font-size, которое устанавливает размер текста на 40 пикселей.
• color – второе свойство, которое мы устанавливаем для атрибута style.
• green – значение свойства color, которое задает зеленый цвет для текстового элемента.

Обратите внимание: свойства и значения берутся в кавычки, а каждая пара свойство:значение заканчивается точкой с запятой (;):

<element attribute=”свойство:значение;”>

Сохраните файл и перезагрузите его в браузере.

Примечание: Инструкции по загрузке файла в ваш браузер вы найдете в мануале Основы работы с HTML-элементами.

Вы должны получить такую строку:

This text is 40 pixels and green.

Теперь вы знаете, как с помощью атрибута style можно изменить размер и цвет шрифта текстового элемента. Обратите внимание: для определенных элементов атрибуты необходимы. Среди таких элементов, например, <a>, который позволяет добавлять ссылку к тексту или изображению, и <img>, который позволяет вставить изображение в документ. В следующих руководствах этой серии мы подробнее рассмотрим эти два элемента и расскажем об использовании дополнительных атрибутов для <div> и других элементов HTML.