Blog

Соловьева Вера Викторовна, к п. н., зав. Ииц колледжа дизайна кбгу учебно-методический комплекс

Вид материала

Учебно-методический комплекс

Содержание

P.Right {text-align: right;}
Информация о версии – !DOCTYPE
Элемент HEAD
Элемент TITLE
Элемент META
Элемент BODY
Группирующие элементы div и span

Подобный материал:

1 2 3 4

ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ

ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ

ВОТ ПРИМЕР ГИПЕРССЫЛКИ

КОНЕЦ

Таблицы стилей

Попробуем выровнять в предыдущем примере заголовки по центру. Для этого можно для каждого из них указать выравнивание, либо поместить их в единый блок.

В первом случае:

.0 Transitional/ / EN”>

ДОМАШНЯЯ СТРАНИЦА

ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ

ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ

ВОТ ПРИМЕР ГИПЕРССЫЛКИ

КОНЕЦ

Во втором случае определим выравнивание с помощью элемента DIV.

ДОМАШНЯЯ СТРАНИЦА

ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ

ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ

ВОТ ПРИМЕР ГИПЕРССЫЛКИ

КОНЕЦ

Помимо применения общего для всех одноименных тегов определения стиля, можно создавать классы элементов. Пример:

. . .

. . . текст, который будет центрироваться

. . . текст, который будет выравниваться по правому краю

Кроме задания классов элементов, можно ссылаться на элемент, заданный уникальным идентификатором – ID. Пример:

#prostostil {color: red}

. . .

этот текст красного цвета

СТРУКТУРА ДОКУМЕНТА: ЗАГОЛОВОК И ТЕЛО

Любой документ HTML состоит из трех частей:

1. Строки, содержащей информацию о версии HTML.

2. Блока заголовка документа.

3. Тела документа, содержащего либо непосредственно отображаемую информацию, либо определяющего набор фреймов.

Вторая и третья части документа должны быть вложены в контейнер HTML. При этом указывать явно контейнеры для документа, его заголовка и тела нет необходимости. Если они отсутствуют, подразумевается, что браузер сам определит, где что находится. Для всех остальных элементов HTML открывающий тег обязателен.

Информация о версии – !DOCTYPE

Любой документ HTML должен содержать информацию о версии языка HTML, используемого в документе. Существуют три типа документов:

1. HTML 4.0 Strict – такой документ не должен содержать отмененных элементов и атрибутов, и не должен быть контейнером для фреймов.

2. HTML 4.0 Transitional – может содержать все то, что и предыдущий, а также отмененные элементы и атрибуты.

PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/ / EN”>

3. HTML 4.0 Frameset – указывает на то, что данный документ является контейнером для набора фреймов.

Элемент HTML

После строки с информацией о версии, весь остальной документ должен быть заключен в контейнер HTML. Текст помещенный вне этого элемента может игнорироваться браузером. . . .

Элемент HEAD

Этот элемент содержит информацию о текущем документе, такую как заголовок, ключевые слова и прочую информацию, которая не должна отображаться в документе. Браузеры не отображают информацию, помещенную в контейнер HEAD, но используют ее для каких-либо целей. . . . .

Элемент TITLE

Каждый документ HTML должен иметь элемент TITLE в части HEAD. Этот элемент используется для определения содержания документа. Большинство браузеров отображают строку, размещенную внутри элемента TITLE в качестве заголовка окна. Строго заданных ограничений на длину текста нет. . . . .

Закрывающийся тег обязателен.

Элемент META

Элемент META используется для включения различной информации о документе, а также предоставляет возможность сообщать дополнительные инструкции, как браузеру, так и серверу. Элемент META используется в форме «свойство – значение». Например, для указания ключевых слов, можно использовать следующую конструкцию:

Можно определять любые свойства и присваивать им любые значения. Есть также общепринятые свойства:

Author – автор документа

Copyright – информация об авторском праве

Description – описание документа (для поисковых машин)

Generator – название программы, с помощью которой создавался документ

Keywords – ключевые слова (для поисковых машин)

Закрывающийся тег не нужен. Имеются собственные атрибуты:

NAME – определяет имя свойства

CONTENT – определяет значение для свойств

SCHEME – определяет схему для обработки CONTENT браузером

HTTP-EQUIV – может быть использован вместо NAME для указания инструкций серверу:

Приведенная выше строка указывает, что в документе содержится текст в формате HTML и указывается кодовая страница. Атрибут HTTP-EQUIV имеет несколько общепринятых свойств:

Refresh – заставляет браузер перегружать документ по истечении интервала времени, указанного в секундах.

Expires – указывает дату, после которой документ становится устаревшим и заставляет браузер явно загрузить документ из сети, а не из кэша.

Content-type – указывает на тип файла

Content-style-type – указывает на тип применяемых таблиц стилей.

Примеры:

Документ будет перезагружаться каждую минуту.

Через пять секунд после загрузки текущего документа будет загружен другой, расположенный по указанному адресу URL.

Элемент BODY

Контейнер BODY охватывает все содержимое документа, которое должно быть представлено пользователю. Если документ является контейнером для фреймов, то он не должен содержать элемента BODY. Если использовался открывающий тег, должен использоваться и закрывающий. Продолжают использовать атрибуты, которые были отменены:

BACKGROUND – указывает ссылку на графический объект, используемый как фон.

BGCOLOR – указывает цвет фона.

TEXT – указывает цвет текста.

LINK – указывает цвет ссылок.

ALINK – указывает цвет ссылок в момент щелчка по ним мышкой.

VLINK – указывает цвет посещенных ссылок.

Пример:

…

То же самое можно сделать без отмененных атрибутов, с помощью таблицы стилей.

ГРУППИРУЮЩИЕ ЭЛЕМЕНТЫ DIV И SPAN

Элементы, располагающиеся внутри BODY, подразделяются на элементы уровня блока и встроенные элементы (элементы уровня текста). Их различие сводится к следующему. Элементы уровня блока могут содержать внутри себя как встроенные элементы, так и другие элементы уровня блока. То есть элементы уровня блока образуют более крупную структуру, нежели встроенные. Элемент DIV относится к элементам уровня блока, а SPAN – к встроенным. Оба они применяются для формирования соответствующей части документа с использованием таблиц стилей. На практике DIV часто используют для объединения нескольких абзацев в одну группу. Требуется закрывающий тег.

Пример: