Спользование стилей в HTML ⇐ ПредыдущаяСтр 9 из 12Следующая ⇒ В HTML 4.0 все форматирование можно переместить из документа HTML в отдельную таблицу стилей. < html> < head> < style type=" text/css" > h1 {color: red}h3 {color: blue}< /style> < /head> < body> < h1> Это заголовок 1< /h1> < h3> Это заголовок 3< /h3> < /body> < /html> Пример выполнения данного HTML-кода Этот пример показывает, как форматировать документ HTML с помощью информации о стилях, добавленной в раздел заголовка < head>. < html> < body> < a href=" lastpage.htm" style=" text-decoration: none" > ЭТО НЕПОДЧЕРКНУТАЯ ССЫЛКА! < /a> < /body> < /html> Пример выполнения данного HTML-кода Этот пример показывает, как с помощью атрибута style сделать ссылку, которая не подчеркивается. < html> < head> < link rel=" stylesheet" type=" text/css" href=" styles.css" > < /head> < body> < h1> Я отформатирован с помощью присоединенной таблицы стилей< /h1> < p> Я тоже! < /p> < /body> < /html> Пример выполнения данного HTML-кода Этот пример показывает, как использовать тег < link> для соединения с внешней таблицей стилей. Как использовать стили Когда браузер считывает таблицу стилей, он форматирует документ согласно этой таблице. Существует три способа использования таблицы стилей. Внешняя таблица стилей Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С помощью внешней таблицы стилей можно изменить внешний вид всего Web-сайта, изменяя один файл. Каждая страница должна соединяться с таблицей стилей с помощью тега < link>. Тег < link> находится в разделе заголовка < head>. < html> < head> < link rel=" stylesheet" type=" text/css" href=" mystyle.css" > < /head> < /html> Пример выполнения данного HTML-кода Внутренняя таблица стилей Внутренняя таблица стилей должна использоваться, когда один документ использует единый стиль. Внутренние стили определяют в разделе заголовка с помощью тега < style>. < html> < head> < style type=" text/css" > body {background-color: red}p {margin-left: 20px}< /style> < /head> < /html> Пример выполнения данного HTML-кода Встроенные стили Встроенный стиль должен использоваться, когда особый стиль должен быть применен к единственному появлению элемента. Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа: < html> < body> < p style=" color: red; margin-left: 20px" > Это параграф < /p> < /body> < /html> Пример выполнения данного HTML-кода Чтобы больше узнать о стилях, почитайте учебник о CSS. Теги стилей
Тег	Описание
< style>	Задает определение стиля
< link>	Задает ссылку на ресурс
< div>	Определяет раздел в документе
< span>	Определяет раздел в документе
< font>	Не рекомендуется. Используйте вместо этого стили.
< basefont>	Не рекомендуется. Используйте вместо этого стили.
< center>	Не рекомендуется. Используйте вместо этого стили.

 

 

 

 Раздел заголовка HTML Заглавие документа < html> < head> < title> Название документа не выводится< /title> < /head> < body> < p> Выводится этот текст< /p> < /body> < /html> Пример выполнения данного HTML-кода Информация о названии документа в элементе заголовка не выводится в окне браузера. Одно место назначения для всех ссылок < html> < head> < base target=" _blank" > < /head> < body> < p> < a href=" http: //www.intuit.ru" target=" _blank" > Эта ссылка < /a> будет загружаться в новом окне, так как атрибут target задан как " _blank".< /p> < p> < a href=" http: //www.osp.ru" > Эта ссылка< /a> также будет загружаться в новом окне, даже без атрибута target.< /p> < /body> < /html> Пример выполнения данного HTML-кода Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне. Элемент head Элемент head содержит общую информацию, называемую также мета-информацией, о документе. Мета означает " информация о чем-то". Можно сказать, что мета-данные означают информацию о данных, или мета-информация означает информацию об информации. Элементы внутри элемента head не выводятся браузером. Согласно стандарту HTML, внутри раздела head допустимы только несколько тегов. Это теги < base>, < link>, < meta>, < title>, < style>, и < script>. Посмотрите на следующую незаконную конструкцию: < head> < p> Это какой-то текст< /p> < /head> В этом случае у браузера есть две возможности:

• Вывести текст, потому что он находится внутри элемента параграфа
• Скрыть текст, потому что он находится внутри элемента заголовка

Если поместить элемент HTML, такой как < h1> или < p>, внутрь элемента head, как в этом случае, большинство браузеров его выведут, даже если это незаконно. Должны ли браузеры прощать подобные ошибки? Наверно, это неправильно.

Теги заголовка
Тег	Описание
< head>	Определяет информацию о документе
< title>	Определяет заглавие документа
< base>	Определяет базовый URL для всех ссылок на странице
< link>	Определяет ссылку на ресурс
< meta>	Определяет мета-информацию
<! DOCTYPE>	Определяет тип документа. Этот тег идет перед начальным тегом < html>.

 

 

 Мета-информация в HTML

Описание документа

< html> < head> < meta name=" author" content=" Иван Петров" > < meta name=" revised" content=" Иван Петров, 16/10/05" > < meta name=" generator" content=" Microsoft FrontPage 4.0" > < /head> < body> < p> Атрибуты meta этого документа определяют автора и использованную программу редактора.< /p> < /body> < /html>

Пример выполнения данного HTML-кода

Информация внутри элемента meta описывает документ.

Ключевые слова документа

< html> < head> < meta name=" description" content=" примеры HTML" > < meta name=" keywords" content=" HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" > < /head> < body> < p> Атрибуты meta этого документа описывают документ и его ключевые слова.< /p> < /body> < /html>

Пример выполнения данного HTML-кода

Информация внутри элемента meta описывает ключевые слова документа.

Перенаправление пользователя

< html> < head> < meta http-equiv=" Refresh" content=" 5; url=http: //www.intuit.ru" > < /head> < body> < p> Извините! Мы переехали! Новый URL: < a href=" http: //www.intuit.ru" > http: //www.osp.ru< /a> < /p> < p> Вы будете перенаправлены на новый адрес через пять секунд.< /p> < p> Если вы видите это сообщение более 5 секунд, щелкните, пожалуйста, на приведенной выше ссылке! < /p> < /body> < /html>

Пример выполнения данного HTML-кода

Этот пример показывает, как перенаправить пользователя, если адрес сайта изменился.

Элемент meta

Как было показано в предыдущей лекции, элемент head содержит общую информацию (мета-информацию) о документе.

HTML имеет также элемент meta, который помещается внутри элемента head. Элемент meta предназначен для предоставления мета-информации о документе.

Наиболее часто элемент meta используется для предоставления информации, которая имеет отношение к браузерам или поисковым машинам, описывающая содержание документа.

Примечание: Консорциум W3C заявляет в документе http: //www.w3.org/TR/html4/struct/global.html#adef-http-equiv, что " Некоторые агенты пользователей поддерживают использование META для обновления текущей страницы после указанного количества секунд, с возможностью заменить ее другим URL. Авторы не должны использовать эту технику для пересылки пользователей на другие страницы, так как это делает страницу недоступной для некоторых пользователей. Вместо этого автоматическое перенаправление страницы должно делаться с помощью перенаправления на сервере".

Ключевые слова для поисковых машин

Некоторые поисковые машины в WWW будут использовать атрибуты name и content тега meta для индексации страницы.

Этот элемент meta определяет описание страницы:

< meta name=" description" content=" Бесплатные Web-учебники по HTML, CSS, XML, и XHTML" >

Этот элемент meta определяет ключевые слова для страницы:

< meta name=" keywords" content=" HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" >

Назначение атрибутов name и content состоит в описании содержимого страницы.

Однако, так как многие вебмастера использовали теги meta для недобросовестной рекламы, увеличивая количество повторений ключевых слов, чтобы страница получила более высокое положение, некоторые машины поиска полностью перестали использовать этот тег.

О машинах поиска можно почитать в учебнике по созданию Web-сайтов.

Неизвестные атрибуты meta

Иногда можно встретить атрибуты meta, которые могут оказаться совершенно незнакомыми, например:

< meta name=" security" content=" low" >

Тогда необходимо просто принять для себя, что это является чем-то уникальным для сайта или для автора сайта и не имеет, вероятно, к вам никакого отношения.

Весь список атрибутов элемента meta можно найти в Полном справочнике тегов HTML 4.01 в конце книги.

⇐ Предыдущая3456789101112Следующая ⇒

Поделиться: