Элемент title
Начальный тег: обязателен, Конечный тег: обязателен Каждый документ HTML должен иметь элемент TITLE в разделе HEAD. Авторы должны использовать элемент TITLE он необходим, чтобы дать документу название, оно отражается в заголовке окна браузера. Поскольку пользователи часто обращаются к документам за пределами контекста, авторам следует обеспечивать заголовки в широком контексте. Элемент Base Одиночный тег служит для указания полного URL-адреса документа. Представьте, что блуждая по интернету, вы сохранили какую-нибудь html-страницу себе на компьютер, с тем, чтобы просмотреть ее позже. Все картинки на этой страницы превратятся в красные крестики. Но если вы не отключены от сети, а на странице присутствует тег, то браузер будет знать, где искать необходимый файл, найдет его и загрузит картинки. У этого тега один атрибут href, значением которого является адрес страницы. Элемент Link Одиночный тег необходим для подключения внешних файлов. Например, если вы будете использовать каскадную таблицу стилей, то ее удобнее хранить в отдельном файле и подключать этот файл ко всем страницам сайта. У тега несколько атрибутов: href — указывает URL-адрес подключаемого файла. rel — указывает на тип отношения данного документа к внешнему (например: rel=»stylesheet» указывает, что внешний файл определяет стиль текущего документа). type — указывает тип и параметры присоединенной таблицы стилей.
Метаданные
HTML позволяет авторам указывать метаданные – информацию о документе вместо содержимого документа — множеством способов.
Элемент meta
Начальный тег: обязателен, Конечный тег: запрещен Определения атрибутов Для следующих атрибутов допустимые значения и их интерпретация зависят от профиля: name — определяет имя свойства. content — определяет значение свойства. scheme — дает имя схеме, используемой для интерпретации значения свойства. http-equiv — может использоваться вместо атрибута name. Серверы HTTP используют этот атрибут для сбора информации для заголовков сообщений ответов HTTP. Атрибут http-equiv может использоваться вместо атрибута name; он особенно важен, если документы загружаются по протоколу передачи гипертекста (HTTP). Серверы HTTP могут использовать имя свойства, указанное в атрибуте http-equiv для создания заголовка в ответе http Атрибут lang может использоваться с элементом META для указания языка значения атрибута content. Это позволяет синтезаторам речи использовать правила произношения для разных языков. Элемент META может использоваться для идентификации свойств документа (например, автора, срок истечения, список ключевых слов и т.д.) и назначения им значений. В этом примере имя автора объявляется на французском языке:
HTML Атрибуты
Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href является именем, а http://www.wm-school.ru/ значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Атрибут title
Рассмотрим следующий пример:
Пример HTML:
В этом примере используется тег , который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки .
Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.
Атрибут alt
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera
и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Пример HTML:
Атрибут href
Вы можете добавить сразу несколько атрибутов к элементу.
Пример HTML:
Атрибут href определяет расположение веб — страницы, на которую ведет ссылка.
Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).
W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Пример HTML:
| Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки. |
Одинарные или двойные кавычки?
Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
Общие атрибуты
Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
| Атрибут | Значение | Описание |
|---|---|---|
| align | right, left, center | Горизонтальное выравнивание тегов |
| valign | top, middle, bottom | Вертикальное вырвнивание тегов внутри HTML-элемента. |
| background | URL | Расположение фонового изображения |
| id | Уникальное имя | Уникальное имя для использования с каскадными таблицами стилей. |
| class | правило класса или стиль класса | Классифицирует элемент для использования с каскадными таблицами стилей. |
| width | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
| height | Числовое значение | Определяет высотуу таблиц, изображений или ячеек таблицы. |
| title | Текст подсказки | Текст, отображаемый во всплывающей подсказке. |
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Задачи
Первое итоговое задание 2
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка
Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
title="Хороший сайт">wm-school.ru — сайт для разработчиков.
Размеры изображения
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.