Урок 1. Тэги и их атрибуты
Тэг — это особая конструкция языка HTML. Можно сказать — буква алфавита. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру, тэг абзаца:
<р>Текст абзаца.</р> всегда обозначается буквой “p” .
Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш” / — косая черта, наклоненная вправо.
Не все тэги имеют закрывающую пару. Например, тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:
<img src= «images/ pic.jpg» alt= «» />
Тэг div
В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно, что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “шапка” (header), блок навигации, блок основного содержимого, “футер” (footer) или подвал по-нашему.
У данного тэга, как и у любого другого, имеются свои собственные атрибуты.
Атрибут — описательная характеристика тэга. То есть, что он может делать и каким образом. Например, опять же возьмём тэг изображения:
<img src= «images/pic.jpg» width= «200px» height= «50px» alt= «статистика интернета пользователей в 2011 году» />
В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Тэг указывает, что в данном месте страницы нужно вставить изображение pic.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей.
И еще добавлен альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например, маркер списка или стрелка), то у атрибута alt оставляют пустое место — alt= «» .
Атрибуты тэга div
Чаще все используют два вида:
id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие, и браузер верно распознает, что этот абзац, обозначенный тэгом <р> относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым.
class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например, всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.