Команды для робота
Пример:
<meta name="robots" content="Index,follow">
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
Index - индексировать страницу
Noindex - не индексировать страницу
Follow - прослеживать гиперссылки на странице
Nofollow - не прослеживать гиперссылки на странице
All - индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
None - не индексировать страницу и не прослеживать гиперссылки на странице
Эффекты при переходе по ссылке
Пример:
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)"> <meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
Page-Enter - Эффект появления страницы
Page- Exit - Эффект исчезновения страницы
В которых:
Duration - время действия эффекта в секундах
Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер |
Описание эффекта |
Номер |
Описание эффекта |
0 |
Прямоугольники внутрь |
12 |
Растворение |
1 |
Прямоугольники наружу |
13 |
Вертикальная панорама внутрь |
2 |
Круг внутрь |
14 |
Вертикальная панорама наружу |
3 |
Круг наружу |
15 |
Горизонтальная панорама внутрь |
4 |
Наплыв наверх |
16 |
Горизонтальная панорама наружу |
5 |
Наплыв вниз |
17 |
Уголки влево - вниз |
Заголовок <!DOCTYPE> в HTML. Назначение. Основные варианты. Примеры.
ык разметки гипертекстовых документов, точно также как и русский язык живёт во времени и тоже меняется.. появляются новые слова - теги например <footer>, <header>, <video>.., какие-то наоборот умирают, забывается и осуждаются в использовании, например теги: <center>, <font>,<frameset>.., тоже самое происходит с атрибутами, меняются правила синтаксиса..
Так вот чтобы различные браузеры например: "старовер" - Internet Explorer 6.0, "учительница советской закалки" - Opera 8.0, "тинэйджер" - Chrome 5.0 ... не разругались на Ваш документ - отобразили его правильно, не запутались в чтении Вашей страницы, необходимо указать в соответствии с какими стандартами он был написан.
Теперь немного о самих стандартах.
Разработкой стандартов HTML языка (и не только HTML), иначе спецификаций, занимается организация World Wide Web Consortium, W3C - Консорциум Всемирной паутины, официальный сайт: www.w3.org. С историй возникновения данной организации её целями и задачами, Вы можете ознакомиться здесь, моя же задача доложить Вам о том, что эта организация разработала несколько спецификаций HTML, по которым, собственно, мы и учимся.
Вот официальные спецификации:
HTML 3.2- 14 января 1997 года; www.w3.org/TR/REC-html32
HTML 4.0 - 18 декабря 1997 года; www.w3.org/TR/REC-html40-971218
HTML 4.01 - 24 декабря 1999 года; www.w3.org/TR/html401
HTML 5 - в разработке. (официально ещё не объявлена, но уже используется) www.w3.org/TR/html5
Именно этими документами должны руководствоваться как веб-мастера при создании сайтов, так и разработчики браузеров. Эти стандарты созданы для того чтобы не вышло как в Библейской истории про Вавилонскую башню, где все вдруг начали говорить на разных языках и окончательно перестали понимать друг друга.. а такой момент назревал в своё время, да сейчас не всё так уж гладко, впрочем это уже совсем другая история.. вернемся к <!DOCTYPE>.
Итак, заголовок <!DOCTYPE> указывает на тип документа - DTD (document type definition - описание типа документа) для правильной его интерпретации браузерами, другими словами указывал браузерам, согласно каким стандартам следует обрабатывать ту или иную страницу.
Ниже перечислены основные варианты <!DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Строгий DTD. Используя такой заголовок, веб-страница должна в точности следовать спецификации HTML 4.01 не использовать теги и атрибуты, обозначенные спецификацией как "нежелательные", а также не должна использовать фреймы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Переходный синтаксис HTML. При таком заголовке допускаются "вольности" при составлении документа, страница может содержать теги и атрибуты, помеченные спецификацией HTML 4.01 как "нежелательные".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- Указывает, что в HTML-документе используются фреймы.
<!DOCTYPE html>
- А такой заголовок обозначает, что используется спецификация HTML 5.
Существуют и другие варианты заголовков <!DOCTYPE>, например для XHTML, выше перечислены основные для HTML.
Заголовок <!DOCTYPE> принято располагать в самом начале документа перед тегом <html>
Таблицы каскадных стилей (CSS): определение, актуальность, возможности, особенность механизма каскадирования. Синтаксис описания стиля (правила – rule).
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.
CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.
Преимущества CSS:
Разграничение кода и оформления
Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задаётся через стили. При подобном разделении работа над дизайном и версткой сайта может вестись параллельно.
Разное оформление для разных устройств
С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. Например, на экране монитора отображать страницу в одном оформлении, а при её печати — в другом. Эта возможность также позволяет скрывать или показывать некоторые элементы документа при отображении на разных устройствах.
Расширенные по сравнению с HTML способы оформления элементов
В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.
Ускорение загрузки сайта
При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.
Правило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.
Правило может содержать несколько объявлений, отделенных точкой с запятой. После последнего объявления точку с запятой можно не ставить.
Для удобства чтения и редактирования таблиц стилей ее правила обычно записывают таким образом, чтобы каждое объявление располагалось на отдельной строке. Например:
H2 { color: purple; font: bold 16pt Verdana, sans-serif; } |
Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для оформления документов.
Автор-разработчик Web-страницы. Он может написать таблицы стилей и использовать их согласно правилам, т.е. помещать внутрь документа или подключать из внешнего файла.
Пользователь или посетитель Web-страницы. Он может самостоятельно создать таблицу стилей для конкретного документа, и если браузер поддерживает такую возможность, для просмотра документа пользователь может использовать собственную таблицу стилей.
Браузер. В соответствии со спецификацией, браузеры должны сначала применить к HTML-документу собственную таблицу стилей, используемую по умолчанию, и только потом применять остальные таблицы стилей.
Области действия таблиц, созданных любым из трех субъектов, могут пересекаться, например в каждой таблице может существовать правило, определяющее внешний вид текста для абзаца. В этом случае выбор приоритетного CSS-правила осуществляется в соответствии с принципами каскадирования. При наличии нескольких правил для одного и того же элемента преимущество имеет правило с наибольшим приоритетом.
По умолчанию правила в таблицах стилей, созданных разработчиками страницы, имеют больший приоритет, чем правила, созданные пользователем. И все правила разработчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузера, используемой по умолчанию. Таким образом, наименее приоритетна - таблица стилей браузера, затем идет таблица стилей пользователя, и самой приоритетной является таблица стилей, созданная разработчиком.
Этот порядок можно просто изменить или же, не меняя его, указать директиву ! important для какого-то отдельного правила - тогда правило с такой директивой становится более приоритетным. Если, например, в таблице пользователя написано:
Р { color: blue !important } а в таблице разработчика написано P { color: red } |
то более приоритетным будет первое правило, т.е. цвет текста абзацев будет синим. Если же правило с директивой ! important будет существовать и в таблице пользователя, и в таблице разработчика, то приоритетнее будет таблица разработчика.
Таблицы стилей, подключаемые из внешних источников, также каскадируются, и их приоритетность определяется порядком подключения таблиц. Сначала применяется таблица стилей по умолчанию, затем ее правила переопределяются первой подключенной таблицей, потом подключается следующая, которая переопределяет правила предыдущей, и т.д. Поэтому подключайте таблицы стилей в порядке возрастания их важности, поскольку этот порядок здесь имеет значение.
Рассмотрим пример использования в документе трех внешних таблиц стилей, содержимое которых представлено в таблице
Три внешние таблицы стилей |
||
Style1.css |
Style2.css |
Style3.css |
P { color: red } |
P { color: green !important } |
P { color: blue } |
Если сначала подключить таблицу style1, а затем style3:
<LINK href ="style1.css" rel="stylesheet" type="text/css"> <LINK href ="style3.css" rel="stylesheet" type="text/css"> |
то цвет текста в абзацах будет синим, так как последней подключена третья таблица. Если же поменять их местами, то цвет будет красным.
В случае подключения всех трех таблиц по порядку:
<LINK href="stylel.css" rel="stylesheet" type="text/css"> <LINK href="style2.css" rel="stylesheet" type="text/css"> <LINK href="style3.css" rel="stylesheet" type="text/css"> |
цвет текста в абзацах будет зеленым, поскольку это свойство помечено директивой important и, следовательно, имеет больший приоритет.
То же относится и к правилам, записанным внутри одной таблицы стилей. Каждое следующее правило переопределяет предыдущее, естественно, если эти правила написаны дя одного селектора:
<STYLE> Р{ color: red } Р{ color: green ! important } P{ color: blue } </STYLE> |
В этом случае текст абзацев также будет зеленым. Третье правило для P не будет применено, так как во втором присутствует пометка ! important. Если эту пометку убрать, то цвет текста абзацев станет синим.
Способы подключения CSS стилей к HTML-документу: внедренные стили (Inline), внутренние стили (в теге <style>), внешние (посредством тега <link>). Комментарии: цель, синтаксис, примеры.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.