Реферат Тема: "Создание web сайта, Синтаксис html, Объекты и формы, Создание графики."
| Вид материала | Реферат |
- Тема урока: Создание Web страниц с помощью html, 39.83kb.
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
- Создание Web-страниц. Изучение языка html, 186.84kb.
- Создание собственной web-страницы в Internet, 927.61kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
- Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
- План лабораторных работ Введение в Web-программирование; создание html-страниц, работа, 6.6kb.
- Содержание программы: Web -дизайн Основы Web -дизайна. Дизайн в Internet: задачи, подходы,, 13.59kb.
Элемент STYLE тоже должен располагаться внутри элемента HEAD. Если вы хотите
разобраться, какие нестандартные форматы используются на странице, надо про-
смотреть содержимое этого элемента. В нем будут указаны необходимые форма-
ты. Если таких форматов нет, значит стили страницы записаны в отдельном фай-
ле. Ссылка на такой файл должна находиться в элементе LINK. Подробнее о стилях
рассказывается ниже в разделе ≪Таблицы стилей≫.
Стандартные атрибуты S3
<МЕТА>
Секция заголовка может содержать несколько элементов МЕТА, каждый из кото-
рых отвечает за определенный набор параметров. Использование элементов МЕТА
н. является обязательным, но некоторые настройки могут быть весьма важны.
Так, например, известно, что броузер в некоторых случаях способен автоматиче-
ски определить вид кодировки страницы. Пользователь, работая с броузером,
может выбрать в меню определенную кодировку. Чтобы исключить неопределен-
ность при просмотре конкретной страницы, на ней целесообразно разместить
указание на кодовую страницу. Для документов в кодировке Windows оно долж-
но быть таким:
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
Информация, сосредоточенная в элементах МЕТА, определяет общие настройки
Web-страницы и называется профилем. Профили можно хранить в отдельных
файлах и присоединять к определенной странице при помощи специального ат-
рибута элемента HEAD:
элементах содержания, которые пришли из предыдущих версий языка и вроде бь
бесполезны: задачи, для которых они предназначались, кажутся сейчас архаичны
ми. Действительно, зачем предусматривать отдельные элементы для таких объек
тов, как ≪текст телетайпа≫ или ≪символы, введенные с клавиатуры≫? Стили даю'
таким элементам вторую жизнь. Вложения двух элементов позволяют создан
любое количество комбинаций форматов.
Обратите внимание, что в последней строке приведенного выше примера элемен
ты Р и CODE разделены пробелом. Когда элементы отделены друг от друга пробела
ми, это означает, что ряду элементов присваивается один и тот же стиль.
ПРИМЕЧАНИЕ -
Как это все выглядит на практике, можно увидеть в файле Style.php на прилагаемой дискете
Использование элемента STYLE не исключает возможность указания атрибута style
Все элементы, которые будут модифицированы при помощи атрибута style, по
лучат форматирование, отличное от того, которое может быть задано при помошд
элемента STYLE. Иными словами, атрибут style имеет более высокий приоритет.
Элемент STYLE может использовать стандартные атрибуты: type, lang, dir, title.
Классы
Ограничения по использованию стилей в последнем примере очевидны. Одному
элементу можно присвоить только один стиль. Гораздо удобнее назначать для
стилей имена и указывать последние вместе с элементами. Такие универсальные
стили называются классами. Вот простой пример. Создадим, используя элемент
STYLE, стиль заголовка с буквами красивого красного цвета:
Цвет задан с помощью функции RGB(). Ее аргументами являются десятичные числа,
Теперь, если надо использовать заголовок, его конструкция должна выглядеть так:
<Н1 > Текст заголовка
При желании можно создать класс red2, red3 и т. д. Очевидно, что такой подход
более удобен: можно иметь сколько угодно вариантов форматирования для одно-
го элемента.
Универсальные классы: атрибут id
Следующим шагом, расширяющим возможности разработчика, является исполь-
зование универсальных классов, то есть таких, которые не связаны с конкретны-
ми элементами. Вот простой пример. Допустим, надо создать формат, который
позволял бы придать буквам серо-стальной цвет. Назовем этот формат ≪steel≫.
Для него (внутри элемента STYLE) можно ввести таблицу стиля:
#steel {color: RGB(155,180,190): font-weight: bold}
Таблицы стилей ___ 67
Поскольку оттенок надо подбирать очень точно, без функции RGB() опять не обой-
тись. Учитывая, что буквы получатся достаточно светлыми, можно добавить в
стиль полужирное начертание. Обратите внимание, что о размере символов в
формате данных нет. Поэтому такой формат (стиль) можно применять для раз-
личных элементов: заголовков и обычного текста. Но для указания стиля надо ис-
пользовать атрибут id, например:
<Н2> Заголовок формата "steel"
<Р> Абзац, отформатированный универсальным стилем "steel"
В результате размер букв будет определяться другими настройками: значениями
по умолчанию или стилями элементов. Это очень удобно: таким способом легко
выдержать стилевую целостность текста: известно, что текстовые документы
смотрятся лучше, когда для них используется один шрифт и один цвет шрифта.
Обилие различных шрифтов и эффектов форматирования может только повре-
дить восприятию.
Каскадные таблицы стилей: элемент
Таблицы стилей могут сохраняться в отдельном файле и использоваться для раз-
ных Web-страниц. Такие таблицы называются каскадными (CSS). Они названы
так потому, что несколько CSS-файлов (стили автора страницы, сервера, пользова-
теля) могут использоваться одновременно. В этом случае стили ≪накладываются≫
друг на друга, и более поздние определения отменяют принятые ранее установки.
Чтобы подключить к странице файл с таблицами стилей, надо использовать эле-
мент LINK в секции HEAD:
="имя_файла.ess" rel="stylesheet" type="text/css">
В этом случае стили используются так же, как и в предыдущих примерах этого
раздела. Например, CSS-файл может содержать следующие определения:
P.sped {color : green; font-variant: small-caps;}
P.newl {color : maroon;font-style: italic;}
P.new2 {color : maroon;font-style: italic;letter-spacing: 2pt;}
В результате на странице могут оказаться три стиля абзацев, показанные на рис. 3.4.
ТЕКСТ АБЗАЦА (CI.ASS-"SPEC1") - ЭФФЕКТ ≪МАЛЫЕ ПРОПИСНЫЕ≫
Текст абзаца (с!а.чх= "newl") - курсив и цвет букв.
Текст абзаца (class = "new2 ") - добавлена р а з р я д к а .
Рис. 3.4. Стили абзацев
ПРИМЕЧАНИЕ
Примеры использования классов и стилей находятся в файлах Class.php и Formats.ess на при-
лагаемой дискете.
68 _ Глава 3. Основные элементы HTML версии 4
и
Существует два элемента, которые специально предназначены для применения
стилей. Вы уже знаете, что таблицы стилей универсальны: их можно использовать
со многими элементами. Разберем особенности данных элементов.
Для определения стилей допустимы все синтаксические правила, о которых рас-
сказывалось в этом разделе. Особенностью элемента DIV является то, что он пред-
назначен для указания в качестве контейнера элементов, то есть его собственный
стиль должен влиять на стили элементов, находящихся внутри. Вот шаблон для
использования элемента DIV: