| Есть ли практическая часть у курса повышения квалификации «web-дизайн»? |
Преподаватель
Вы можете этот курс.
Опубликован: 19.03.2007 | Уровень: для всех | Доступ: свободно
Лекция 1:
Создание WEB-страниц
Контейнерные и пустые теги
Теги XHTML являются специальными ключевыми словами, окруженными угловыми скобками "<" и ">". "Имена" этих элементов указывают на назначение тега и предписывают браузеру интерпретировать вложенный контент специальным образом. В примере страницы, показанной на листинге 1.6, тег <html> окружает все содержимое страницы и говорит о том, что оно является документом HTML и должно соответствующим образом интерпретироваться браузером. То есть, браузер должен искать теги XHTML и использовать вложенные спецификации разметки для оформления информации, окруженной тегами. Аналогично теги <body> окружают весь контент страницы, которая выводится в окне браузера. В соответствии со стандартами XHTML все ключевые слова записываются символами нижнего регистра. Большинство тегов XHTML кодируются парами из открывающего и закрывающего тегов, называемых контейнерными тегами. Открывающий тег является самим ключевым словом, появляющимся между символами < и > ; закрывающий тег имеет такой же формат, в котором перед ключевым словом стоит прямая косая черта ( / ). Эта пара контейнерных тегов охватывает данные, к которым применяется форматирование. Следовательно, пара контейнерных тегов <html>...</html> окружает весь документ HTML, чтобы указать, что все находящееся между ними кодируется на языке HTML. Таким же образом пара контейнерных тегов <body>...</body> охватывает все содержимое страницы, которое выводится в окне браузера.
Не все теги являются контейнерными, то есть они не "окружают" данные, которые будут форматироваться, а кодируются единственным, автономным тегом. Такие пустые теги кодируются специальным образом, чтобы соответствовать стандартам XHTML. Они должны содержать символ наклонной черты ( / ) непосредственно перед закрывающей угловой скобкой. Например, одиночный тег для вывода горизонтальной линии на странице кодируется как <hr/>, а одиночный тег для создания разрыва строки в текстовом параграфе - как <br/>. Такое специальное кодирование указывает, что тег служит одновременно открывающим и закрывающим.
Каскадные таблицы стилей
Теги XHTML являются идентификаторами и контейнерами текстовой и графической информации, выводимой на странице Web. Их основное применение состоит в описании структуры этого содержимого, в упаковке его для размещения на этой странице. Однако большинство страниц Web содержат больше, чем обычный текст и размещенные в нем с помощью тегов XHTML встроенные изображения. Информация на странице имеет дополнительное оформление, делающее ее более привлекательной и легко читаемой. Различные виды шрифта, размер текста, цвет и другие характеристики форматирования делают страницу более удобной для чтения и, при благоразумном использовании, могут сделать информацию более понятной.
В предыдущих версиях HTML большая часть оформления контента страницы происходила с помощью атрибутов, задаваемых как часть ее тегов. Атрибуты определяли дополнительные спецификации форматирования помимо тех, которые подразумевает само имя тега. Например, начертание шрифта можно задавать для текстовой информации, окружая ее тегом <font>, содержащим атрибуты для задания вида шрифта, размера и цвета: <font face="arial", size="4", color="red">. Различные теги содержали различные атрибуты для форматирования своего содержимого различным образом.
В текущих версиях XHTML атрибуты тегов почти исчезли, будучи исключены (исключены в использовании) в пользу каскадных таблиц стилей (CSS - Cascading Style Sheets), или просто кратко "таблиц стилей". Таблица стилей является набором характеристик оформления, связанных с тегами XHTML. Эти характеристики оформления состоят из свойств оформления и значений, записанных с помощью специального синтаксиса таблиц стилей и присвоенных тегам, которые будут наследовать эти стили оформления. Например, одним из способов присвоить таблицу стилей тегу является включение ее в тег в качестве атрибута style.
<p style="font-family:arial; font-size:14pt; color:red; font-weight:bold"> Это текстовый параграф. </p>Листинг 1.8. Присвоение таблицы стилей параграфу
В этом примере параграфу текста, окруженному тегом <p> (paragraph), задается тип шрифта Arial размером 14pt (14 пунктов), красного цвета ( red ), с жирной насыщенностью ( bold ). Четыре спецификации свойство:значение (например, font-family:arial ) задают эти стили оформления.
Любому тегу XHTML можно присвоить одну или несколько характеристик оформления, и существуют сотни различных свойств оформления и значений, которые могут использоваться. Большая часть изучения XHTML состоит из изучения этого множества возможностей оформления. Категории стилей оформления включают:
стили шрифта - для задания типа шрифта, размера и насыщенности.;
стили текста - для задания интервала между буквами и словами, высоты строк, горизонтального и вертикального интервала и абзацных отступов;
стили цвета - для задания цвета фона и переднего плана;
стили рамок - для вывода различных рамок, окружающих текстовые и графические элементы;
стили отступов - для задания ширины различных отступов, окружающих текстовые и графические элементы;
стили фильтрации - для применения специальных эффектов к текстовым и графическим элементам;
стили задания размера - для задания высоты и ширины текстовых и графических контейнеров;
стили позиционирования - для позиционирования элементов страницы в фиксированных пиксельных координатах на странице.
Консорциум WWW поддерживает стандарты языка каскадных таблиц стилей, так же, как это делается для языка разметки XHTML. Текущей версией стандартов, рассматриваемой в данном учебнике, является CSS Level 2 (CSS2).
Основная задача при освоении XHTML - изучение тегов и особенностей их стилей оформления, которые применяют форматирование браузера к содержимому страницы, которое они охватывают. Обычно в этом учебнике представлены только те теги и параметры таблицы стилей, которые являются существенными для рассматриваемого вопроса. Дополнительные теги и возможности оформления вводятся по мере изучения материала учебника.
Не имеет значения, что показанные в этом учебнике примеры являются достаточно простыми иллюстрациями тегов и стилей. Цель состоит в том, чтобы продемонстрировать код XHTML и основные подходы к оформлению, а не создать тщательно разработанные демонстрации. В этом случае читатель будет сосредоточен на коде и не будет перегружен большим объемом информационного содержимого. Помните, однако, что можно создавать страницы достаточно сложной структуры, объединяя представленные здесь основные понятия XHTML и элементы таблиц стилей.
