Опубликован: 19.03.2007 | Доступ: свободный | Студентов: 4633 / 1149 | Оценка: 4.23 / 3.94 | Длительность: 23:37:00
Лекция 1:

Создание WEB-страниц

Лекция 1: 1234567891011 || Лекция 2 >
Контейнерные и пустые теги

Теги 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 и элементы таблиц стилей.

Лекция 1: 1234567891011 || Лекция 2 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!