~~~ KOCI.INUMO.RU ~~~
Атрибуты тега. Урок 05. Атрибуты есть характеристики, параметры тега. Различают два типа атрибутов: Универсальные и Специфические. Примеры универсальных атрибутов: id, class, style. id - должен иметь уникальное значение, т.к. данный атрибут служит для точной идентификации объекта. В виде примера специфического атрибута можно привести атрибут для списков start.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
Атрибуты тега
Атрибуты есть характеристики, параметры тега.
Различают два типа атрибутов:
class - один и тот же класс может быть у многих объектов. Один объект может иметь несколько классов. Аналоги из реальной жизни - национальность, пол, профессия и т.д.
style - задает стили отображения данного объекта (в виде параметр: значение параметра;). В данном атрибуте можно задавать несколько стилей, разделяя их знаком ; (точка с запятой).
Теперь дополним нашу тестовую страничку некоторыми атрибутами так, чтобы заголовки выровнялись по центру, фон заголовков слегка выделял их контент и немного по разному на английском и русском языках.
В виде примера специфического атрибута можно отнести атрибут для списков start.
Атрибуты могут иметь пустые значения (например: class="" style="" и т.п.) Но надо заметить, что иногда такой в общем-то правильный и удобный прием может проявить побочные свойства. Например, некорректно использовать id="", т.к. id иметь уникальное значение для конкретного элемента и длина значения должна быть ненулевой.
Попробуем полученные знания использовать в нашем тестовом примере. Например, мы хотим, чтобы список по-русски начинался с 11 и выделялся фоном.
После внедрения указанных выше атрибутов наша тестовая страничка имеет вот такой вид:
article_005.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_005.zip ← скачайте пример, чтобы установить на свой сайт...
Различают два типа атрибутов:
- Универсальные
- Специфические
- id
- class
- style
class - один и тот же класс может быть у многих объектов. Один объект может иметь несколько классов. Аналоги из реальной жизни - национальность, пол, профессия и т.д.
style - задает стили отображения данного объекта (в виде параметр: значение параметра;). В данном атрибуте можно задавать несколько стилей, разделяя их знаком ; (точка с запятой).
Теперь дополним нашу тестовую страничку некоторыми атрибутами так, чтобы заголовки выровнялись по центру, фон заголовков слегка выделял их контент и немного по разному на английском и русском языках.
В виде примера специфического атрибута можно отнести атрибут для списков start.
Атрибуты могут иметь пустые значения (например: class="" style="" и т.п.) Но надо заметить, что иногда такой в общем-то правильный и удобный прием может проявить побочные свойства. Например, некорректно использовать id="", т.к. id иметь уникальное значение для конкретного элемента и длина значения должна быть ненулевой.
- Параметра list-style-type нет вообще...
- Вид списка дефолтный (по умолчанию)...
- style="list-style-type:;"
- наш список неупорядоченный (ненумированный) <ul> ...
- пустой параметр style="list-style-type:;"
- имеет тот же эффект...
- style="list-style-type:square;"
- Параметр list-style-type=square;, т.е. квадрат.
- style="list-style-type:circle;"
- Параметр list-style-type=circle;, т.е. круг.
Попробуем полученные знания использовать в нашем тестовом примере. Например, мы хотим, чтобы список по-русски начинался с 11 и выделялся фоном.
<h1 class="" style="text-align: center; background-color: #F0FFFF;">How To Avoid Wasting Your Most Valuable Online Asset - TIME!</h1> <h2 class="" style="text-align: center; background-color: #FFF0FF;">Как Перестать Тратить Наиболее Важный и Ценный Ресурс в Интернете - ВРЕМЯ!</h2> <ol start="11" style="background-color: #FFF0FF;"> <li>Перепечатывать одно и тоже много-много раз, снова и снова.</li> <li>Неумение эффективно управлять своей электронной почтой.</li> <li>Вовлекаться в бесцельные дискуссии на форумах.</li> <li>Неумение ставить себе цель еще до включения компьютера.</li> </ol>
После внедрения указанных выше атрибутов наша тестовая страничка имеет вот такой вид:
article_005.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_005.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок 05
Следующие странички, рекомендуемые для посещения и изучения:
Урок 06
Страничка сделана на основе контента курса HTML сайта kocby.ru