Вы находитесь на странице: 1из 241

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Введение в современные

Введение в современные веб-технологии Авторы: А.В. Кудряшев, П.А. Светашков

2010 г.

Информация о курсе

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Базовый курс веб-технологий предназначен для освоения основ HTML, CSS и Javascript. Не описывая всех возможностей, заложенных в эти языки, курс охватывает необходимый и достаточный базис для построения эффективных HTML-документов в соответствии с действующими стандартами. Курс состоит из набора лекций и лабораторных работ. Лекции содержат как теоретические сведения, так и описания конкретных приёмов, сопровождаемые примерами и упражнениями.

Предварительные знания Базовые навыки работы с текстовым редактором и веб-браузером, знакомство с Интернет. Для разделов, касающихся Javascript, необходимо представления о языках программирования, желательно - об объектно-ориентированном программировании.

Лекции

1. Обзор HTML и CSS

Назначение языка HTML. Стандарт HTML и спецификация XHTML. Структура документа HTML. Назначение языка CSS.

2. Текстовые элементы HTML

Параграфы, заголовки, элементы логического и физического форматирования текста.

Списки, гиперссылки.

3. Знакомство с HTML и CSS

Цель. Практически изучить структуру HTML-документа, научиться подключать таблицы

стилей и настраивать внешний вид страницы при их помощи.

4. Атрибуты стиля (CSS attributes)

5. Механизмы CSS

6. Позиционирование средствами CSS

Типы позиционирования элементов в CSS и их особенности. Позиционирование на

основе плавающих элементов. Приёмы центрирования и наложения элементов.

7. Создание динамического меню навигации при помощи списков и правил CSS

Цель. Научиться применять элементы HTML (списки и гиперссылки), а также свойства

CSS (модель отображения, псевдоклассы гиперссылок) для формирования системы навигации на веб-странице.

8. Изображения 9. Таблицы Табличная и бестабличная вёрстка

Макет страницы. Колонки, колонтитул, подвал. Формирование макета средствами HTML-

таблиц и правил CSS

10.

11. Создание макета страницы средствами правил CSS

Цель. Практическое освоение основных приемов верстки HTML-страницы с несколькими разделами.

12. Сценарии Javascript

13. Обработка событий при помощи сценариев Javascript

Цель. Изучение пользователя.

14. Динамический HTML и Объектная Модель Документа

15. Динамический HTML

Цель. Изучение приёмов динамического формирования HTML-документа.

16. События. Объект event 17. HTML-формы 18. Создание формы с динамической проверкой

19. Внедрение объектов в документ HTML

Возможности и недостатки динамических HTML-страниц. Применение технологий Java,

Flash, SVG, AJAX, Silverlight (обзор)

20. Знакомство с Silverlight

Цель. Знакомство с программой Microsoft Expression Blend. Создание анимированной

Silverlight-заставки и размещение её в HTML-документе

21. Перспективы и расширения HTML

ответ

на

действия

приемов динамического изменения страницы в

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Новые возможности в проектах спецификаций HTML 5 и CSS 3 22. Знакомство с Silverlight (продолжение)

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

1. Лекция: Обзор HTML и CSS Назначение языка HTML. Стандарт HTML и спецификация XHTML. Структура документа HTML. Назначение языка CSS.

Содержание

Структура документа HTML

o

Раздел head ("шапка")

o

Раздел body ("тело документа")

o

Минимальный XHTML-документ

Назначение языка CSS

что HyperText

с (разметки) гипертекста.

Начнём

того,

Markup

Language

(HTML) -

язык

определения

на документы. Кроме того, гипертекст на веб-страницах, как правило, содержит форматирование (разнообразные начертания, размеры, цвета и выравнивания символов, а также графические элементы и таблицы).

Под гипертекстом обычно понимается текст, содержащий

ссылки

другие

Разметка - процедура внедрения в текст специальных обозначений (тэгов), которые определяют ссылки и форматирование. Например, текст, заключённый между тэгами <h1> и </h1>, превращается в заголовок 1-го уровня:<h1>Заголовок</h1>.

тэгами <a> и </a> становится атрибуте href тэга <a>:

Текст

между

гиперссылкой на

<a href="http://www.bing.com/">Поиск</a>.

ресурс,

указанный

в

Указанный тэг имеет имя a и один атрибут с именем href и значением "http://www.bing.com/".

Как видно, обозначения тэгов подобраны таким образом, чтобы их легко было отличить в

в обозначают по-другому: &lt; и &gt; (сокращения от less than и greater than - меньше и больше).

их

от обычного текста. Угловые скобки

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

для

выделения

тэгов

символы

самом

тексте

Ещё одно правило тэговой разметки, которое иллюстрируют приведённые примеры, в бытьоткрывающими и закрывающими: <h1> и </h1>, <a> и </a> и

т.д., закрывающий тэг отличается от открывающего наличием символа слэша перед именем тэга и отсутствием атрибутов. В целом структура, определяемая открывающим и парным ему закрывающим тэгами, называется элементом и имеет следующий общий вид:

заключается

том,

что

тэги

могут

причём

<имя_элемента имя_атрибута1="значение_атрибута1"

имя_атрибута2="значение_атрибута2"

Варианты определения элемента:

без как самозакрывающийся тег:

Элемент

атрибутов

>

Текст </имя_элемента>

содержимого,

и

оформленный

<hr />

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Элемент, вложенный в другой элемент:

<p>

<a href="http://www.bing.com/">Поиск</a> </p>

Совокупность таких обозначений и правил их использования и образует язык разметки гипертекста HTML. Этот язык в его первоначальном варианте был предложен в 1989 году английским физиком Тимом Бернерс-Ли. В 1994 году Бернерс-Ли основал консорциум WWW - с уставной целью определить стандарты для HTML и позднее для XHTML. Его члены ответственны за создание чернового варианта стандарта, организацию его обсуждения и за внесение изменений в первоначальный вариант, учитывая замечания и предложения, поступившие от интернет-сообщества, чтобы удовлетворить пожелания большинства. В настоящее время помимо HTML и XHTML в сферу ответственности консорциума WWW (W3C) входит стандартизация любых технологий, относящихся к сети (веб-технологий). Он занимается HTTP, каскадными таблицами стилей и расширяемым языком разметки (Extensible Markup Language, XML) так же, как и связанными с ними стандартами адресации в сети. Кроме того, W3C рассматривает проекты стандартов для расширений существующих веб- технологий.

В 1990-е годы консорциумом был выпущен ряд рекомендаций, касающихся HTML.

Термин "рекомендация" отличается от термина "стандарт" (стандартами занимаются государственные и международные организации по стандартизации), однако в веб- индустрии рекомендации W3C, как правило, считаются фактическими стандартами, и о них говорят как о стандартах. Выпуская рекомендацию, W3C гарантирует, что её содержимое было представлено на рассмотрение общественности и членов рабочей группы, тщательно протестировано и ратифицировано на финальной стадии.

Последняя такая рекомендация появилась в 1999 году - это HTML версии 4.01. А в 2000 году Международная организация по стандартизации (ISO) приняла HTML в этой версии как международный стандарт (ISO/IEC 15445:2000).

Структура документа HTML

В принципе, если

произвольный текст безо всякой структуры, то браузер, вероятно, нормально его отобразит (браузеры "стараются" даже неправильные html-документы отобразить по возможности верно).

с расширением html или htm) написать

html-файле (файле

в

Упражнение. Проверьте это.

Структура нужна для того, чтобы всё имело своё законное место - текст, тэги, стили, скрипты, служебная информация.

На первом месте HTML-документа, согласно стандарту (здесь и далее под стандартом подразумевается действующий в настоящее время стандарт HTML 4.01), находится определение типа документа (ОТД).

HTML

набора фреймов.

4.01

специфицирует

три

ОТД: строгое, переходное и

ОТД

для

Существенный смысл ОТД заключается в том, чтобы указать, согласно каким правилам написан HTML-документ. В рамках стандарта HTML 4.01 возможны вариации:

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

документ может быть написан в строгом соответствии с рекомендациями стандарта (которые предписывают отказываться от ряда элементов и атрибутов, унаследованных от предыдущих версий HTML и пользоваться вместо этого новыми, оптимизированными средствами);

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

Вставляя ОТД в HTML-документ, следует ввести в его начало следующий текст:

Строгое ОТД:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Переходное ОТД:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

ОТД для набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

На практике наиболее широко используется переходное ОТД: фреймами веб- разработчики пользуются всё реже, а следовать строгому ОТД труднее, чем переходному (без каких-либо преимуществ взамен).

Если вообще опустить ОТД, то браузер сам сделает предположение о том, согласно каким правилам отображать документ.

 

(корневого)

следовать единственный в документе элемент - элемент html (директива !DOCTYPE элементом не

считается):

<html>

</html>

Раздел head ("шапка")

разделе head, таким

в образом: там размещается всё, что не входит в тело документа, но необходимо для его правильного отображения. Тело документа - такие вполне зримые элементы как абзацы с текстом, списки, изображения и таблицы. Шапка документа - его заголовок, метаданные (информация о самом документе, а не о его содержимом), стили, скрипты.

Проще всего ответить

на

вопрос, что должно размещаться

Пример минимального раздела head:

<head> <title>Заголовок документа</title> </head>

Элемент title - единственный обязательный элемент раздела head.

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Метаданные могут включать в себя информацию об авторах, ключевых словах документа и т.п., например:

<meta name="Authors" content="Alexander Kudryashev & Pavel Svetashkov" />

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

О стилях и скриптах речь пойдёт подробно в последующих лекциях.

Раздел body ("тело документа")

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

<body> <p>Hello, World!</p> </body>

Таким образом, документ, оформленный по стандарту ISO HTML 4.01, должен содержать ОТД, шапку документа с заголовком и тело документа (возможно, пустое). Всё содержимое документа упаковывается в подходящие HTML-элементы (абзацы, списки, таблицы, секции и т.п.) и размещается в теле документа, т.е. в разделеbody.

Пример пустого, но корректного документа HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

XHTML

Во всех предыдущих примерах (и в большинстве последующих) все HTML-элементы имеют как открывающий, так и закрывающий тэги. Однако стандарт HTML 4.01 допускает и упрощённую разметку: во многих случаях закрывающие тэги не необходимы, поскольку последующий открывающий тэг автоматически закрывает предыдущий. Существует ещё целый ряд допущений со стороны стандарта HTML, сокращающих написание кода для удобства разработчика. Значения атрибутов можно вводить без кавычек; некоторые атрибуты вовсе можно указывать без значений. Но все эти допущения совершенно неприемлемы в рамках другого стандарта - XHTML (где X означает Extended - расширенный).

Стандарт XHTML 1.0 появился в 2000 году, и долгое время официальная позиция W3C заключалась в том, что будущее HTML - это именно XHTML, и развиваться будет только этот стандарт. В настоящее время эта позиция изменилась: готовится HTML 5, а последнее достижение в развитии XHTML - стандарт 1.1 - был признан излишне строгим и в целом не принят сообществом разработчиков.

Разница между HTML и XHTML происходит из невозможности дать однозначный ответ на вопрос: "Что важнее - удобство веб-разработчика или формальная строгость?". В процессе разработки стандарта консорциум WWW осознал, что HTML не может быть расширен в достаточной мере, чтобы справиться с таким материалом, как химические

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

формулы, музыкальная нотация или математические выражения - для этого нужны другие языки разметки. Отвечая на эти потребности, W3C разработал стандарт расширяемого языка разметки XML, в котором описываются принципы построения других языков разметки.

XML, в отличие от HTML, определяет не разметку для какого-либо конкретного применения, а формальные правила разметки для любых целей. XML-совместимые языки несут информацию, которая в дальнейшем может быть проанализирована, обработана, отображена единым образом - вот почему нужна строгость определения элементов разметки. В эту новую языковую семью, по замыслу её создателей, должен был войти и преобразованный HTML, названный XHTML.

Но строгость неудобна, а браузеры прощают ошибки разработчиков. По этим причинам, вероятно, ещё очень долго не произойдёт всеобщий отказ от HTML в пользу XHTML - то, что в своё время провозглашал целью консорциум WWW.

Тем не менее, в данном учебном курсе весь материал даётся в виде, отвечающем требованиям XHTML. Нарушения единообразия - довольно сомнительное удобство, и мы не рекомендуем ради них игнорировать стандарт XHTML. В основном XHTML 1.0 - это тот же HTML 4.01, за следующими исключениями.

1. Элементы должны вкладываться корректно. Если один элемент содержится в другом, завершающий тег внутреннего элемента должен появиться перед завершающим тегом внешнего.
2. Каждый тег, содержащий другой тег или другое содержимое, должен иметь закрывающий тег, явно выписанный с учётом правил вложенности тегов. Отсутствующий закрывающий тег - это ошибка, из-за которой документ будет признан несоответствующим стандарту.
3. Пустые элементы, которые в принципе не могут содержать вложенных элементов (например, <br>), должны тоже иметь закрывающие теги, либо быть оформленными как самозакрывающиеся: <br />.

4. XHTML определяет все теги и атрибуты, заимствованные из HTML, используя строчные буквы. Записанные заглавными буквами имена тегов и атрибутов не являются допустимыми тегами и атрибутами XHTML.

5. XHTML требует, чтобы все значения атрибутов (включая числовые) были заключены в кавычки.

6. В HTML имеется небольшое количество атрибутов без значений, присутствие которых модифицирует поведение элементов, например: <input type="text" value="Hello!" disabled>. В XHTML значение обязательно для каждого атрибута. Атрибуты без значений

value="Hello!"

должны использовать в качестве таковых

type="text"

имена: <input

собственные

disabled="disabled">.

Минимальный XHTML-документ

<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Заголовок</title> </head> <body>

</body>

</html>

он использует восьмибитовое представление (UTF-8) Unicode для записи его содержимого

Документ начинается

стандарте XML 1.0 и

с указания

на

то,

что

основан на

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

и разметки. Затем в предложении <!DOCTYPE> объявляется, что документ следует правилам разметки, определенным в переходном ОТД XHTML 1.0, которое позволяет употреблять в документе практически любые элементы HTML 4.01. Существуют также строгое ОТД XHTML и ОТД структуры фреймов XHTML.

Содержимое документа начинается с тега <html>, который содержит атрибут xmlns, объявляющий, что пространство XHTML будет применяться по умолчанию для всего документа.

Для обычного HTML-документа указание пространства имён не имеет особого смысла, поскольку набор используемых элементов ограничен стандартом. Но для XML- документа (разновидностью которого является XHTML-документ), это - необходимость,

поскольку его призвание - в универсальности описания структур и одно из применений - в сочетании разнородных структур. Например, W3C описывает возможность соединения в одном документе разметки XHTML, MathML (разметки математических

-

таком присутствовать элементы гипертекста (body, div, p), формул (math, mrow, mfrac),

графики смешивать эти признака, указывающего на источник определения каждого из них (тем более, что, в принципе, не исключено совпадение имён в разных источниках). Таким источником и или

является пространство к атрибут xmlns="http://www.w3.org/1999/xhtml", который необходимо указывать для

элементы,

в имён http://www.w3.org/1999/xhtml. Данное значение похоже на адрес веб-страницы, однако на самом деле оно всего лишь определяет уникальный идентификатор, дающий представление о том, какой организацией, в каком году и под каким названием определён тип документа и его элементы.

элемента htmlсогласно определённые

частности,

добавляемого

формул) и

SVG

(разметки

графики)

документе

векторной

что

могут

(rect, circle, ellipse) и

т.д. Очевидно,

было

бы

неосмотрительно

элементы в одном документе, не имея какого-либо различающего

имён,

имеющее

смысл

префикса,

элементов.

именам

XHTML

спецификации

документе,

относятся

1.0,

означает,

к

явно

В

что

все

неявно

пространству

XHTML-документ можно сохранить с расширением xhtml или xml и открыть в браузере. Однако браузер Microsoft Internet Explorer (по крайней мере, IE8) не поддерживает XHTML как тип содержимого и не сможет открыть этот файл!

в директивы DOCTYPE

применения: она может читать текст, HTML, XHTML, ряд графических форматов и т.д. к содержимое. Когда мы открываем локальный файл, то на тип содержимого указывает

же расширение файла в запросе совершенно не обязательно должно быть указано), то сервер, отвечая на запрос браузера, включает в ответ заголовок видаcontent-type:

text/html или text/xml и т.п. В результате браузер всегда информирован о типе содержимого до того, как он начинает читать это содержимое, и он запускает свою подпрограмму - парсер (анализатор текста), специализированную на чтении именно данного типа содержимого.

его расширение

Приступая

Дело

каким правилам

не

только

том, согласно

в

него

файла,

ключи

и включили. Браузер - программа довольно широкого

мы написали документ

какие

определиться, какого типа это

браузер

должен

загружаем его

с веб-сервера(где

чтению

реестра); когда

Дело в том, что в большинстве случаев XHTML-документы читает парсер HTML - для него это не представляет затруднений, ведь XHTML, добавляя к HTML строгости, вместе с этим добавляет совсем немного того, чего нет в HTML (например, самозакрывающиеся теги и значения атрибутов, совпадающие с их именами). Почему? Потому что документы XHTML обычно передаются как text/html. А почему они передаются таким образом? Потому что, если передавать XHTML-документы как text/xml, то браузер IE (самый популярный в настоящее время) будет совершенно отказываться их читать. Впрочем, существует трюк, предложенный W3C, позволяющий обойти эту трудность, но

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

его применение затрагивает технологию XSLT, далеко выходящую за рамки данного курса.

Резюме таково: документы, которые мы пишем с соблюдением более строгих правил XHTML, браузеры всё равно читают как HTML (это легко заметить, искусственно внеся в документ ошибки, нарушающие одно из вышеперечисленных правил). Тем не менее, именно XHTML предпочтителен для изучения, поскольку он устроен более правильно, и его правила (правила XML) применяются в области, значительно более широкой, чем технологии веб-разработки.

Упражнения.

в элемент, например, абзац. Сохраните файл с расширением xhtml и откройте сначала в IE, а затем в каком-либо браузере, поддерживающем XHTML как тип документа (фактически, это любой другой современный популярный браузер). Сравните результаты.

него какой-либо

Создайте XHTML-документ

минимальной структуры и добавьте

Внесите в созданный документ ошибку, нарушающую правила XHTML (например, добавьте атрибут со значением без кавычек). Откройте документ в поддерживающем стандарты браузере - вместо документа там должно отобразиться сообщение об ошибке разбора.

Измените расширение файла на htm (оставив ошибку в документе). Откройте документ в любом браузере.

Назначение языка CSS

Как было показано в предыдущих разделах, типичный HTML-документ представляет собой набор элементов, содержащих другие элементы либо текст. HTML-элементы могут иметь атрибуты - большинство атрибутов отвечают за такие визуальные характеристики элемента как цвет (color), отступ (margin), рамка (border), размеры

(width,

height) и т.п. Другая большая группа атрибутов определяют реакции

элементов на такие события как щелчок мышью (onclick), нажатие клавиши (onkeydown) и т.д. Ряд атрибутов отвечают за информационное содержание, например, гиперссылка (href) или значение в элементе ввода (value). Таким образом, атрибуты элементов можно принципиально разделить на группы по критерию: "Что определяет атрибут?" - представление, поведение или содержание (существуют и другие, не попадающие в эти группы, атрибуты).

Нетрудно заметить, что применение атрибутов представления на практике обычно имеет массовый характер, в отличие от атрибутов поведения или содержания. Иными словами, имея в документе множество элементов "абзац" (p), веб-дизайнер наверняка будет применять одно и то же форматирование ко многим из них. То же можно сказать и об изображениях, и о таблицах, и об элементах форм - вообще, в основе хорошего дизайна лежит разумное единообразие.

Достичь единого представления для множества элементов посредством задания соответствующих значений атрибутов каждого из них в принципе возможно, но обременительно - как по объёму требуемых для этого усилий, так и по громоздкости результирующего кода. Так, например, при отнюдь не вычурном дизайне может потребоваться указать для абзацев цвет фона, гарнитуру, размер и цвет шрифта:

<!DOCTYPE

"http://www.w3.org/TR/html4/frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Frameset//EN"

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

<title></title> </head> <body> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background:

#B9FFCF;">

Несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем 14 пунктов на светло-зелёном фоне. </p> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background:

#B9FFCF; "> Стиль всех абзацев одинаковый. </p> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background:

#B9FFCF;">

Однако встроенные стили приходится повторять для каждого из них. </p> </body> </html>

Листинг 1.1. Встроенные стили (html, txt)

Отступы, рамки, межсимвольное расстояние, фоновые изображения и многое другое

в образом встроенный стиль элемента p), однако это весьма нерационально - по крайней мере, по одной причине: одни те же значения указываются многократно вместо того, чтобы сделать это единожды. Если бы HTML-документы строились таким образом, они представляли бы собой тяжёлую структуру из хорошо перемешанных определений содержания и представления.

также

атрибута style (определяя

может

быть

включено

значение

таким

Упражнение. Замените цвет текста (color) на чёрный (black) в каждом абзаце примера.

Поэтому специальный язык позволяющий отделить

и определить представление либо в отдельном файле, либо в отдельном элементе styleв

для определения атрибутов представления HTML-элементов создан

- Cascading

Style

Sheets (каскадные

от

стилей),

таблицы содержания HTML-документа

представление

"шапке" HTML-документа. Рекомендация W3C, выпущенная в 1998 году, определяет CSS 2, который поддерживается всеми современными браузерами.

Как и любой хорошо спроектированный язык, CSS позволяет давать короткий исчерпывающий ответ на простые вопросы, регулярно возникающие перед веб- дизайнерами. Например, ответ на простой вопрос: "Какими должны быть рамки таблиц в документе?" можно сформулировать так:

table {

border: 1px solid black;

}

Данное правило CSS означает: "таблицы везде (где не указано иное) должны иметь сплошную рамку чёрного цвета толщиной в 1 пиксел".

<!DOCTYPE

"http://www.w3.org/TR/html4/frameset.dtd">

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Frameset//EN"

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> { color: Blue; font-family: Verdana; font-size: 14pt;

p

background: #B9FFCF;

}

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

</style> </head> <body> <p> Ещё несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем 14 пунктов на светло-зелёном фоне. </p> <p> На этот раз стиль абзацев определён при помощи правила CSS, применённого к элементу p. </p> <p> Поэтому все абзацы выглядят одинаково - при существенно меньшем количестве работы по написанию и, главное, переделке стилей.</p> </body> </html>

Листинг 1.2. Каскадный стиль (html, txt)

Упражнение. Замените цвет текста (color) на чёрный (black) в стиле абзаца. Сравните трудоёмкость этого изменения с предыдущим упражнением.

Краткие итоги

Для разметки веб-страниц создан язык HTML, стандартизованный консорциумом WWW. Разметка состоит из элементов с атрибутами; границами элементов являются открывающие и закрывающие тэги.

Для разметки произвольного содержимого (графики, формул и т.п.) консорциумом WWW разработан язык XML, и HTML приведён в соответствие с XML спецификацией XHTML, которая отличается большей строгостью и систематичностью правил.

Отделение представления документа от его содержимого достигается при помощи языка CSS, определяющего правила стилей для элементов разметки.

Вопросы

Что означают аббревиатуры HTML и CSS?

Что такое тэг, элемент, атрибут?

Какое содержимое может иметь элемент?

Какая последняя версия стандарта HTML? Кем и когда она создана?

В чём отличие строгого и переходного ОТД?

Какие элементы обязательно должны входить в документ HTML?

В чём принципиальное отличие XHTML от HTML?

Какие правила отличают XHTML от HTML?

Для чего указывается пространство имён в XML-документе?

В чём назначение CSS?

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

2. Лекция: Текстовые элементы HTML Параграфы, заголовки, элементы логического и физического форматирования текста. Списки, гиперссылки

Содержание

 

o

Заголовок (h1

h6

6)

o

Абзац (p - paragraph)

 

Логическое и физическое форматирование. Разбивка на строки

o

Выделения (strong, em - emphasis, span)

o

Управление разбивкой текста на строки (br, nobr, pre)

Секция, список

 

o

Секция (div - division)

 

o

o

Таблица (table)

Якорь. Специальные символы

 

o

   

o

Разобравшись со структурой HTML-документа, логично перейти к изучению того, как наполнять документ содержанием. В первую очередь, это текст. Как уже говорилось, текст в html-файл можно поместить и безо всякой структуры. Однако, если соблюдать правила, то следует выбрать для текста подходящий контейнер и разместить его в элементе body.

Рассмотрим наиболее важные текстовые контейнеры.

Заголовки и абзацы

Заголовок (h1

h6

- header 1

6)

Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц.

Элемент h1 определяет наиболее крупный заголовок; h6 - наименее крупный. Заголовки h1 должны использоваться как главные заголовки, сопровождаемые заголовками h2, затем менее важными заголовками h3, и так далее. Обычно авторы применяют h1 для названия документа, h2 для названий разделов и т.д.

<h1>

Это заголовок 1</h1>

<h2>

Это заголовок 2</h2>

<h3>

Это заголовок 3</h3>

<h4>

Это заголовок 4</h4>

<h5>

Это заголовок 5</h5>

<h6>

Это заголовок 6</h6>

Листинг 2.1. Заголовки уровней 1-6 (html, txt)

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Рис. 2.1. Заголовки уровней 1-6

Рис. 2.1. Заголовки уровней 1-6

Обратите внимание, что каждый заголовок располагается на новой строке и имеет вертикальный отступ от соседних элементов. Первое свидетельствует о том, что заголовок - элемент блочный, т.е. всегда вызывает разрыв строки до и после себя. Второе означает, что предопределённые значения отступов для этого элемента отличны от нуля (как их можно регулировать, далее будет рассматриваться).

Абзац (p - paragraph)

Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты.

p

}

{ text-indent: 2.5em; margin-top: 0.2em; margin-bottom: 0.2em;

<p> По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным отступом, что эквивалентно установке свойств margin-top и margin-bottom

в некоторое отличное от нуля значение.

</p>

<p>

В данном примере этим свойствам задано небольшое значение (0.2em, т.е.

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

20% высоты символа M). </p> <p> Вместо этого абзацы разделены отступом первой строки, который задан CSS- свойством text-indent. </p>

Листинг 2.2. Разделение абзацев отступом первой строки (html, txt)

отступом первой строки ( html , txt ) Рис. 2.2. Разделение абзацев

Рис. 2.2. Разделение абзацев отступом первой строки

p

}

{ text-indent: 2.5em; margin-top: 0.2em; margin-bottom: 0.2em;

p:first-letter { font-weight: bold; font-size: 2em; color: Red;

}

<p> Буквица - ещё один эффект, применяемый для визуального выделения начала абзаца. В CSS он может быть достигнут путём применения специфического стиля к первой букве абзаца. </p> <p> Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter. Для этого псевдоэлемента в данном примере назначена высота 2em и красный полужирный шрифт. </p>

Листинг 2.3. Разделение абзацев выделением первой буквы (html, txt)

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Рис. 2.3. Разделение абзацев

Рис. 2.3. Разделение абзацев выделением первой буквы Упражнение. Попробуйте переформатировать текст одного из абзацев путём вставки в него пробелов для увеличения отступа и разбивки на строки путём нажатия клавиши Enter. Убедитесь, что форматирование HTML-кода такими средствами никак не влияет на отображение документа браузером, т.е. для разбивки текста на абзацы необходим элемент p, а для их разделения - один из рассматриваемых в данном примере способов.

Как видно из примеров, в теле HTML-документа расположены несколько абзацев, и никакого форматирования. Однако форматирование к абзацам всё же применяется, поскольку к HTML-документу подключена таблица стилей. Это достигается путём включения в "шапку" HTML-документа следующей ссылки:

<link rel="Stylesheet" href="Style.css" />

Подробно эта директива и другие способы подключения таблиц стилей описаны в лекции "Каскадные стили". Пока достаточно понять, что таблица стилей "Style.css" учитывается браузером при форматировании HTML-документа.

(т.е. абзаца). Об момент вполне достаточно понимания того, что свойства, указанные в стиле для элемента p, будут применены ко всем абзацам документа.

В

определениях стилей также речь пойдёт

p

таблице

стилей

содержится определение

стиля элемента

позже, однако на текущий

Остановимся подробно на этих свойствах:

данном случае, абзаца) до других элементов. margin-bottom Нижнее поле, т.е. расстояние от нижней границы элемента до

margin-top Верхнее поле, т.е. расстояние от верхней границы элемента (в

других элементов.

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Единица измерения, использованная в данном примере для задания высоты поля - em, что означает "равна высоте шрифта" (em - латинская буква m, напечатанная шрифтом Cicero - стандартная единица измерения в полиграфии) . Соответственно, 0.5em означает "равно половине высоты шрифта".

Упражнение.

Попробуйте уменьшать и увеличивать значения margin-top и margin-bottom, наблюдая за результатом.

полей.

результате по умолчанию полей, а такие, как вы увидели, проделав это упражнение.

объявления

Затем

происходит потому, что браузеры используют

уберите

совсем

В

увеличатся!

Это не нулевые значения

поля

Логическое и физическое форматирование. Разбивка на строки

Выделения (strong, em - emphasis, span)

Позволяют акцентировать отдельные фрагменты текста (как правило, слова и фразы) при помощи форматирования. Элементstrong по умолчанию делает вложенный текст полужирным, em - курсивом, но при помощи стилей такое поведение легко переопределяется. Элемент span по умолчанию никак не влияет на вложенный в него текст - к нему всегда нужно применять стиль.

strong {

color: Red;

}

.accent { background: #BFFFBF; color: Blue; font-weight: bold;

}

<p>

Элемент strong по умолчанию делает вложенный текст полужирным, em - <em>

курсивом</em>,

такое поведение <strong>легко

но переопределяется</strong>. Элемент span по умолчанию никак не влияет на вложенный в него текст - к нему всегда нужно <span class="accent">применять стиль</span>. </p>

Листинг 2.4. Выделения в тексте (html, txt)

при

помощи стилей

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Рис. 2.4. Переопределение

Рис. 2.4. Переопределение поведения элемена strong - выделение цветом

и контейнеров em, strong, span (и многих других). Однако, хотя и на экране результат будет одинаков, с точки зрения программного анализатора структуры документа

Ряд элементов используются для логического форматирования документа (в отличие от физического) и имеют следующий смысл:

Очевидно, одних

результатов можно добиться, назначая стили любому из

тех

же

(каковым

робот),

HTML-

является,

например,

поисковый

разница

большая.

Таблица 2.1.

abbr

 

Указывает, что заключённый в нём текст является сокращением

 

acronym

 

Указывает,

в (сокращением, составленным из заглавных букв)

address

Определяет контактный адрес автора документа - например, e-mail

 

blockquote

Определяет блочную цитату (длинную выдержку из другого документа), которая отображается, как правило, со специальным отступом и курсивом

cite

code

Используется для показа программного кода (как правило, отображается моноширинным шрифтом)

del

 

Указывает, что заключённый в нём текст автор исключил из текущей редакции документа - отображается, как правило, зачёркнутым текстом

dfn

 

Употребляется для выделения термина, впервые появившегося в тексте (как правило, отображается курсивом)

em

Логическое ударение (как правило, отображается курсивом)

 

ins

 

в редакцию документа - отображается, как правило, подчёркнутым текстом

Указывает, что заключённый в

kbd

 

Используется для показа текста, который пользователь должен вводить с клавиатуры (как правило, отображается моноширинным шрифтом)

q

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

strong

логическое ударение (как полужирным шрифтом)

Ещё

более

сильное

правило, отображается

(abbr и acronym)

атрибут title,

обычно определяющий расшифровку сокращения. Значение атрибута title появляется на экране только тогда, когда на элемент наводится указатель.

В элементы

сокращений

включают

Пример определения сокращения при помощи элемента abbr:

<abbr title="World Wide Web">WWW</abbr> Упражнения.

Добавьте к примеру цитату (используя элемент cite) и фрагмент кода (code).

Добавьте к примеру отображение title.

(abbr

и

acronym)

оба

вида

сокращений

и

пронаблюдайте

Другая группа текстовых контейнеров определяет физическое форматирование текста:

Таблица 2.2.

b

big

i

small

sub

Определяет текст – нижний индекс

sup

Определяет текст – верхний индекс

tt

Определяет текст телетайпа (моноширинный)

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

Как видите, одних

тех

же

визуальных

результатов можно добиться при помощи

<p> <b>полужирный текст</b></p> <p> <i>курсив</i></p> <p> <u>подчёркнутый текст</u></p> <p> <tt>моноширинный текст</tt></p> <p> <big>на 1 пункт крупнее</big></p> <p> <small>на 1 пункт мельче</small></p> <p> Верхний и нижний индексы:

<i>c</i><sub>0</sub>

+

<i>c</i><sub>1</sub><i>x</i>+

<i>c</i><sub>2</sub><i>x</i><sup>2</sup>

</p>

Листинг 2.5. Элементы физического форматирования текста (html, txt)

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Рис. 2.5. Элементы физического

Рис. 2.5. Элементы физического форматирования текста Упражнение. Пользуясь элементами физического форматирования текста, запишите несколько химических формул и физических уравнений.

Управление разбивкой текста на строки (br, nobr, pre)

говорилось, разбивка на строки кода HTML-разметки не влечёт разбивки браузером на

строки блочного элемента, например, абзаца. Другой способ (исключающий добавление

в Существует и элемент nobr (нестандартный), имеющий противоположное назначение:

дополнительных

Как

уже

документа. Один из способов разрыва строки - применение

-

это

вставка

текст

элемента

разрыва

строки br.

отступов)

текст, заключённый в количества символов.

него, не

браузером на строки, независимо от

будет

разбит

<title>Untitled Page</title> </head> <body> <p> Этот абзац будет разбит на строки <br /> здесь и

<br />

здесь.</p>

<p>

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

<nobr>Этот очень длинный абзац вообще не будет разбит на строки - пользуйтесь горизонтальной прокруткой.

Curabitur vitae tincidunt lorem </p>

</nobr>

Листинг 2.6. элементов HTML для разбивки текста на строки (html, txt)

текста на строки ( html , txt ) Рис. 2.6. Применение элементов HTML

Рис. 2.6. Применение элементов HTML для разбивки текста на строки <title>Пример для элемента pre</title> </head> <body> <p>

Далее приведён <code>

pre</code>, и Studio:</p> <pre>

программного кода, помещённый в HTML-элемент

же отступами,

теми

как

в

Visual

листинг

он

отображается с

oDigits.onmousedown = oSigns.onmousedown = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = 'red';

}

oDigits.onmouseup = oSigns.onmouseup = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = '';

}

</pre>

Листинг 2.7. Пример для элемента pre (html, txt)

Элемент pre (преформатированный вывод) выделяет в разметке фрагмент, который браузер должен отобразить "как есть", теми же символами и с тем же разбиением на строки, включая все пробелы.

Текст внутри элемента pre может содержать физическую и логическую разметку, а также якоря, изображения и горизонтальные линейки. Весь текст в элементе будет отображен моноширинным шрифтом.

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

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

как в следующем примере. Рис. 2.7. Пример для элемента pre

Рис. 2.7. Пример для элемента pre

Секция, список

Секция (div - division)

Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные (inline) элементы могут занимать часть строки, а блочные (block) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).

Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками:

блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование" и "Табличная и бестабличная вёрстка"

Список (ol - ordered list, ul - unordered list)

Используется для нумерации или маркировки последовательности элементов. В следующем примере показаны основные приёмы разметки списков.

ol { list-style-type: upper-roman;

}

<p> Первый список:</p> <ol> <li>Пункт</li> <li>Ещё один пункт</li> <li>Последний пункт</li> <li>Вложенный список:

<ul> <li>Пункт</li> <li>Ещё один пункт</li> <li>Последний пункт</li> </ul> </li> </ol>

Листинг 2.8. Списки и их оформление стилями (html, txt)

их оформление стилями ( html , txt ) Рис. 2.8. Вложенный список ul li {

Рис. 2.8. Вложенный список ul li { list-style-type: disc;

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

list-style-image:url(write.gif);

padding-left:10px;

}

<ul> <li>Пункт</li> <li>Ещё один пункт</li> <li>Последний пункт</li> </ul>

Листинг 2.9. Изображение в качестве маркера (html, txt)

в качестве маркера ( html , txt ) Рис. 2.9. Изображение в качестве

Рис. 2.9. Изображение в качестве маркера

Как видно из примера, пункты в списке должны обрамляться элементами li (list item - элемент списка), которые, в свою очередь, погружаются в элемент ol или ul.

Специфические свойства элементов ol и ul:

list-style-type Указывает вид маркера или номера.

Упражнение.

В примере "Выбор маркера" попробуйте использовать следующие значения этого свойства:

o

circle

o

disc

o

decimal

o

square

o

lower-alpha

o

lower-roman

o

upper-alpha

o

upper-roman

o

none

list-style-image Позволяет

из использовать любое изображение. При этом необходимо учитывать, что размер изображения должен быть подходящим (в CSS нет средств для его изменения), а на тот случай, если загрузка изображений в браузере отключена, рекомендуется указывать и какое-либо значение свойства list-style-type.

стандартного набора

вместо

маркера

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

list-style-position Предоставляет

выбор снаружи (outside) или внутри текста (inside).

способа

размещения

маркера

Специфический атрибут элемента ol - start, указывающий начальный номер списка, например: <ol start="10">.

- элементу ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).

Большинство общих

CSS

свойств

также

применимо

к

спискам

как

к

Упражнение. Задайте списку: а) рамки (сначала для списка в целом, затем для

 

пунктов);

б)

цвет;

в)

 

псевдоселектором first-letter,

 

пунктов списка.

list-style Соединяет

свойств list-style-type , list-style-

объявления image и list-style-position в одном сокращённом объявлении:

list-style: [list-style-type] [list-style-image] [list-style-position]

Например: list-style: square inside;

Таблица (table)

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

Якорь. Специальные символы

Якорь (a - anchor)

Служит для определения гиперссылки либо точки назначения ("якоря") гиперссылки. В документе HTML гиперссылкой может являться фрагмент текста или изображение, помещённые в элемент a. Браузер, отображая элемент a, по умолчанию (т.е. если не задать других правил) обычно выделяет текст синим цветом и подчёркиванием, а также отображает курсор в виде указателя, когда он проходит над ссылкой - будь то текст или изображение. При нажатии на гиперссылку она активизируется, и браузер выполняет переход по URL (универсальному локатору ресурса), указанному в атрибуте hrefэлемента a.

Вот типичный пример текстовой гиперссылки:

<a href="http://intuit.ru">Интернет Университет Информационных Технологий</a>

URL может указывать как на веб-страницу (документ HTML), так и на содержимое какого-либо другого типа. Браузеры умеют отображать, кроме HTML-документов, текстовые файлы и файлы изображений некоторых типов (jpg, png, gif). Другое содержимое (аудио, видео, документы Word и Acrobat, архивы) будет загружено браузером как файл и сохранено на компьютере пользователя. Впрочем, к браузеру могут быть подключены дополнительные программы (плагины - plugins), открывающие различное медиа-содержимое непосредственно в окне браузера. К популярным плагинам такого рода можно отнести Adobe Flash Player, Apple QuickTime, Microsoft Silverlight и плагин Adobe Reader.

Составные части URL имеют следующий смысл (здесь показаны только наиболее простые, необходимые элементы):

протокол://сервер/файл#якорь

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Элемент сервер определяет, к какому компьютеру отправляется запрос: любой компьютер имеет свой уникальный числовой адрес в рамках сети (IP-адрес), а многие компьютеры-сервера (компьютеры, предназначенные для обработки запросов) имеют также доменное имя, такое как ya.ru. В URL указывается либо доменное имя, либо IP- адрес.

Элемент протокол определяет, какая

запрос - веб-сервер (такой как Apache, IIS, Tomcat и др.), служба FTP или другая. Также от этого зависит, по какому протоколу будут передаваться данные от сервера

клиенту

локального компьютера. Псевдопротокол javascript при активизации ссылки вызовет указанную функцию, например: <a href="javascript:history.back();">Назад</a> . При активизации ссылки с псевдопротоколом mailto откроется почтовый клиент и с

письмо href="mailto:admin@site.com">Написать письмо</a>.

создастся

программа

на

то

сервере

браузер

будет

обрабатывать

файл

с

(браузеру).

протокол file,

Если

указан

прочитает

указанным

адресом,

например: <a

Элемент файл определяет путь к файлу на сервере - к документу HTML, изображению, архиву или, может быть, к серверной странице (php, aspx, jsp и т.п.), которая по запросу генерирует HTML-документ. Разумеется, разновидностей серверных программ и типов документов довольно много, и полное их описание не является задачей данной лекции.

И, наконец, якорь означает идентификатор элемента внутри документа, на который направлена ссылка. Если якорь в URL не указан, то документ открывается сначала, иначе - в верхней строке окна оказывается начало некоторого HTML-элемента, имеющего указанный идентификатор (т.е. атрибут id или name). Впрочем, если высота содержимого от якоря до конца документа меньше высоты окна браузера, то, естественно, якорь окажется не вверху окна, а ниже.

<style type="text/css"> a:link { color: #33ccff;

}

a:visited { color: #cecece;

}

a:hover { color: #336666;

}

a:active { color: #339999;

}

</style>

<a id="start"></a> <a href="#div2">К секции div2</a> <a href="#end">В конец документа</a> <a href="http://ya.ru">На Яндекс</a>

<div id="div1"> <strong>Это текст в секции div1 </strong> - Lorem ipsum dolor sit amet <a id="anchor1"></a> Lorem ipsum dolor sit amet… </div>

<div id="div2">

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

<strong>Это

amet

</div>

текст

в секции

div2 </strong>

<a id="end"></a> <a href="#start">В начало документа</a> <a href="#div1">К секции div1</a> <a href="http://ya.ru">На Яндекс</a>

-

Lorem ipsum dolor sit

Листинг 2.10. Гиперссылки и их оформление стилями (html, txt)

их оформление стилями ( html , txt ) Рис. 2.10. Стили ссылок

Рис. 2.10. Стили ссылок Упражнения. Добавьте ссылку на какой-либо локальный файл (текстовый документ, html-документ или изображение). Пример URL: file://C:\Documents and Settings\Admin\Мои документы\Мои рисунки\Image.png. Убедитесь, что ссылка работает (файл должен существовать!). Добавьте дополнительный якорь в середину секции div1 и создайте ссылку на него в начале документа. Сделайте разными стили для ссылок в секциях div1 и div2 (например, пусть у них будут разные цвета - во всех состояниях, включая visited, hover и active). Для этого дополните соответствующие CSS-правила селекторами элементов: #div1 a:link и т.д. Как видно из примера, элемент a - строчный. Что будет, если элементам a задать свойство display:block?

Специальные символы

Содержащиеся в документе символы, не являющиеся при этом частью тегов, обычно отображаются браузером "как есть". Некоторые символы, однако, имеют специальное

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

значение

клавиатуры.

кодирование: либо с помощью специальных названий,

кодировки

символов, а также их номера в кодировке Latin-1

и

прямо

Для

Latin-1.

не

выводятся, другие же невозможно набрать со стандартной в

документ помощью числовой некоторых

специальных

их

включения

В таблице

специальных

символов

требуется

либо

с

2.3 приведены

названия

Таблица 2.3. Имена и номера специальных символов

 
 

&nbsp;

#160;

<

&lt;

#60;

>

&gt;

#62;

&

&amp;

#38;

¢

&cent;

#162;

£

&pound;

#163;

¥

&yen;

#165;

&euro;

#8364;

§

&sect;

#167;

©

&copy;

#169;

®

зарегистрированная торговая марка &reg;

#174;

«

&laquo;

#171;

»

&raquo;

#187;

Примеры:

&copy;

&#174;

Вопросы

1. Для чего нужны заголовки в документе, при помощи каких элементов они создаются и как выглядят?

2. Какой элемент формирует абзац?

3. Чем отличаются логическое и физическое форматирование? Назовите несколько элементов соответствующих и поясните их значения.
4. Какие средства используются для указания разрывов строк в тексте, кроме блочных элементов?

5. Для чего обычно используется элемент div?

6. Какие способы маркировки и нумерации списков заложены в HTML?

7. Каких эффектов (касающихся маркировки) можно достичь, применяя правила CSS к элементам списка?

8. Каким образом включается гиперссылка в HTML-документ?

9. Перечислите и определите основные составные части URL.

10. Почему для специальных символов необходимы особые обозначения? Какие это обозначения?

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

3. Лабораторная работа: Знакомство с HTML и CSS Цель. Практически изучить структуру HTML-документа, научиться подключать таблицы стилей и настраивать внешний вид страницы при их помощи.

Содержание

Часть 1. Создание html-документа. Добавление абзацев. Назначение стилей элемента body

 

o

1. Создание каркаса документа XHTML 1.0 Transitional.

o

2. Ввод заголовка и абзаца текста.

o

3. Добавление таблицы каскадных стилей.

Часть 2. Вставка изображения, гиперссылки и элементов логического форматирования

 

o

1. Вставка изображения.

o

2. Вставка подписи с гиперссылкой.

o

3. Вставка элементов логического форматирования.

Часть 3. Применение каскадных правил. Центрирование элементов, добавление границ и полей

 

o

1. Создание рамки изображения.

o

2. Центрирование изображения с подписью

o

3. Добавление рамки и фона абзацу.

Часть 1. Создание html-документа. Добавление абзацев. Назначение стилей элемента body

1. Создание каркаса документа XHTML 1.0 Transitional.

На

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

(не

абсолютно

мы специализированным) текстовым редактором, который

начальном

этапе

рекомендуем

воспользоваться

простейшим

окажет

вам

Введите определение типа документа XHTML 1.0 Transitional, затем элемент html, а

без определение пустого элемента состоит из открывающего и следующего сразу за ним закрывающего тэга. Примеры этих элементов имеются в первой лекции. Советуем не копировать (на этот раз), а набрать вручную - это дает некоторую гарантию того, что вы будете помнить то, как код должен выглядеть и быстрее находить в нем ошибки (с которыми вы рано или поздно столкнетесь).

внутри него

содержимого. Напоминаем, что

- head (с заголовком)

и body -

пока

2. Ввод заголовка и абзаца текста.

В теле документа (внутри элемента body) введите элемент заголовка первого уровня с произвольным текстом. Затем введите элемент абзаца - также с произвольным текстом. Изучая технику применения веб-технологий, мы в данном курсе абстрагируемся от содержания и используем, как правило, бессмысленный заполняющий текст - исторически для дизайнеров это "Lorem ipsum" (см. http://www.lipsum.com). Следите за соответствием открывающих и закрывающих тэгов - каждый элемент должен либо соседствовать с другими элементами, либо быть полностью вложенным - "пересекаться" элементы не могут.

Сохраните документ и откройте в браузере. Мы изучаем стандартные средства HTML, и они должны одинаково работать во всех браузерах. Однако в первую очередь обычно проверяют веб-страницы в Microsoft Internet Explorer (сокращенно IE или, как он стал называться позже, Windows Explorer), который уже много лет лидирует по популярности среди пользователей Интернет. Рекомендуем использовать последнюю

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

версию этого браузера (на момент написания курса - 8.0). Необходимо также делать проверку и в других браузерах - профессионалы держат под рукой все современные (и многие старые) версии всех популярных браузеров. По крайней мере, в одном из современных ориентированных на стандарты браузеров проверку делать имеет смысл (помимо IE) - дело в том, что во многом из-за своей популярности IE ведет себя наиболее нестандартно - это обусловлено стремлением его разработчиков "не обрушить Web", а поддерживать совместимость с прошлыми версиями различных спецификаций (многие из которых содержат ошибки).

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

3. Добавление таблицы каскадных стилей.

Браузер отображает текст черным цветом на белом фоне, начиная с левого верхнего угла окна (точнее, как правило, делая отступ в 2 пиксела со всех сторон) во всю его ширину. Изменим этот стиль по умолчанию на собственный.

Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:

<style type="text/css"> body {

}

</style>

Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств:

 

справа right значение none.

рамку

Уберем

снизу,

и

назначив свойствам border-bottom и border-

После каждого дополнения сохраняйте документ в редакторе (Ctrl-S), переходите в браузер (в котором ваша рабочая страница уже открыта) и нажимайте Обновить (F5), чтобы убедиться в том, что действия достигают желаемого эффекта и не нарушают прежних достижений. Удобно разделить рабочую область экрана так, чтобы одновременно видеть и редактор, и браузер. Добейтесь примерно такого вида:

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Software http://www.foxitsoftware.com For evaluation only. Часть 2. Вставка изображения,

Часть 2. Вставка изображения, гиперссылки и элементов логического форматирования

1. Вставка изображения.

Сейчас понадобится файл с каким-либо графическим изображением типа GIF, JPG или PNG. Его геометрические размеры должны быть не слишком большими, чтобы оно аккуратно вписывалось в окно браузера. Ширина окна браузера обычно равна полной ширине экрана (если нет полосы вертикальной прокрутки) - например, 1280px. Если от ширины окна отнять удвоенный отступ нашей страницы (поскольку он делается с обеих сторон), толщину рамки и удвоенное поле, то получится максимальная ширина изображения, при которой страница будет полностью помещаться в доступную ширину окна (не требуя горизонтальной прокрутки). Кроме того, потом мы сделаем для изображению рамку с полем, что еще сократит пространство на странице. И, наконец, слишком большие изображения выглядят обычно не очень хорошо - все эти соображения приводят к заключению, что ширину изображения лучше выбирать достаточно небольшой.

-

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

Если вы подобрали изображение, определите

его ширину

высоту

для

этого

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

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

Вставьте в документ (внутри элемента body, но после заголовка и абзаца) элемент img:

<img src="Crataegus.jpg" width="667" height="500" alt="Crataegus L." />

Атрибуты элемента сообщают браузеру:

HTML); ширину изображения в пикселах; высоту; альтернативный текст - который будет показан, если показ рисунков выключен или проговорен, если просмотр выполняется при помощи синтезатора речи.

имя файла (предполагается, что он находится в той же папке, что и документ

Согласно

обязательными.

спецификации,

атрибуты src и alt для

элемента img являются

2. Вставка подписи с гиперссылкой.

Далее вставьте абзац с произвольным небольшим текстом (выполняющим функцию подписи). Внутри абзаца, после текста подписи, вставьте гиперссылку. на какую-либо Интернет-страницу, либо на локальный HTML-файл.

3. Вставка элементов логического форматирования.

с неупорядоченный список с двумя-тремя элементами. Просмотрите результат в браузере - вероятно, в список проникли отступы первых строк, определенные ранее для всех

это элементами). Очевидно, отступы первых строк должны быть определены не для всех элементов без разбора - достаточно, чтобы их имели абзацы и заголовки:

контейнер

элементов

Добавьте

и

заголовок

body

в

второго

уровня

произвольным

текстом

в

(ведь

свойство

наследуется

вложенными

p, h1, h2 { text-indent: 40px;

}

Переопределите правило для отступа первой строки указанным образом.

Сделаем врезку в документе - блок текста, выделенный особым форматированием - как правило, гарнитурой и начертанием. Вставьте в документ элементblockquote (цитату) с

для (например,Serif) и

произвольным

текстом элемента blockquote,

задающее начертание (например, italic).

1-2

для

из

предложений.

него

другую

Создайте

правило

гарнитуру

Вставьте в документ последний, относительно длинный,

при Определите какую-либо аббревиатуру (abbr).

выделения

в форматирования strong и span.

нем

абзац. Сделайте

помощи

элементов

логического

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Элементу span назначьте атрибут class="greenspan". Добавьте в правило
Элементу span назначьте атрибут class="greenspan". Добавьте
в
правило
стиля
с
селектором
класса,
делающее
цвет
текста
элементе
этого
класса
зеленым
и

подчеркнутым:

.greenspan { color:Green; text-decoration:underline;

}

Вот примерный результат. Обратите внимание на аббревиатуру (в данном примере - "NSCE") - она может иметь точечное подчеркивание и отображает подсказку (определенную атрибутом title) при наведении указателя.

подсказку (определенную атрибутом title ) при наведении указателя. 33

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Часть 3. Применение каскадных правил. Центрирование элементов, добавление границ и полей

1. Создание рамки изображения.

Добавьте стилевое правило для элемента img, включающее тонкую сплошную серую рамку и поле:

img { padding: 10px; border: 1px solid #777;

}

2. Центрирование изображения с подписью

Поместите изображение (элемент img) и его подпись (следующий элемент p) в секцию, т.е. создайте пустой элемент div и переместите в него элементы img и p (вместе с элементом a). Теперь позиционируем секцию горизонтально по центру страницы - для этого нужно явно задать ее ширину и затем установить автоматические отступы слева и справа. Ширина секции равна ширине изображения плюс удвоенный отступ изображения плюс удвоенная толщина рамки изображения.

Добавьте элементу div атрибуты class="pic" style="width:689px": стилевое правило, центрирующее секцию, имеет смысл определить для множества (класса) секций; а ширина секции привязана к ширине изображения, поэтому атрибут ширины лучше определить во встроенном стиле. Для класса pic стиль должен выглядеть следующим образом:

.pic { margin-left: auto; margin-right: auto;

}

Проверьте, что получилось в результате.

3. Добавление рамки и фона абзацу.

Создайте стилевое правило для абзаца, помещенного в секцию с классом pic:

.pic p {

}

Селектор .pic

p означает:

элемент p,

вложенности в элемент класса pic.

Определите в этом стилевом правиле следующие свойства:

выравнивание текста - по центру;

поле - 5 пикселов;

рамка - тонкая пунктирная (dashed) серая;

шрифт полужирный;

фон - серый (немного темнее общего фона).

В качестве последнего штриха визуально отделим абзацы друг от друга буквицей:

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 35

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

4. Лекция: Атрибуты стиля (CSS attributes)

Содержание

 

o

o

Рамки, поля, отступы, фон

 

o

o

o

o

Размещение и размер. Переполнение и обрезка

Наследование. Разбивка на страницы

o

o

o

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

Рассмотрим соответствующие свойства CSS.

Размеры и цвета

Единицы размеров

Все размеры и позиционные расположения в CSS задаются в размерных единицах. Internet Explorer и другие браузеры поддерживают как абсолютные, так и относительные единицы. Абсолютные единицы задают точный размер, например, в сантиметрах или дюймах, относительные единицы вычисляются относительно каких- либо других свойств (например, размера монитора или листа бумаги) или размеров других элементов.

Допустимые абсолютные единицы:

in – дюймы (2,54 см)

cm – сантиметры

mm – миллиметры

pt – пункты (points, 1pt = 1/72in)

pc – пики (picas, 1pc = 12pt)

Относительные единицы:

В типографии em — это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em

em

(атрибута font-size).

размер

на

основе

размера

шрифта

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

ex – размер буквы x

 

px – вычисляется на основе разрешения монитора или принтера

другого,

Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое - все элементы увеличиваются и уменьшаются пропорционально. Однако более старые браузеры (например, IE6-) не предоставляли такой возможности - вместо этого разрешалось регулировать только размер шрифта (т.е. масштабировался текст, а остальные элементы не меняли своих размеров). Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода - между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах - достаточно хорошее решение.

div { border: 1px solid black;

}

#px { width: 200px;

}

#percent {

width: 40%;

}

#em { width: 17em;

}

<div id="px"> Ширина этой секции указана в пикселах </div>

<div id="percent"> Ширина этой секции указана в процентах </div>

<div id="em"> Ширина этой секции указана в em </div>

Листинг 4.1. Использование различных единиц измерения для задания ширины (html, txt)

а) масштаб

и страницы; б) размер шрифта; в) ширину окна. Проследите за шириной блоков.

Упражнение. Откройте пример в новом окне

браузера

измените

Цвета

CSS

в определяющего интенсивности красного, зеленого и синего цветов (RGB схема). Стандарт HTML 4.01 определяет только 16 цветов, спецификация CSS 2.1 добавляет

Цвет

в виде шестнадцатеричного числа,

может

быть задан

по

имени

или

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

один цвет;

RGB схема позволяет задать

еще (#000000) до белого (#FFFFFF).

свыше 2,000,000 цветов, от черного

Следующий пример показывает способы задания красного цвета текста:

p { color: red; }

/* стандартный цвет */

p { color: #f00; }

/* #rgb */

p { color: #ff0000; }

/* #rrggbb */

p { color: rgb(255,0,0); }

/* целые в диапазоне 0 – 255 */

p { color: rgb(100%, 0.0%, 0%); }

/* диапазон 0.0% - 100.0% */

Internet Explorer и некоторые другие браузеры распознают множество других именованных цветов, однако нет гарантии, что выбранный именованный цвет (в отличие от RGB схемы) поддерживается всеми браузерами.

Шрифт и текст

из атрибутов. Многие термины здесь почерпнуты из типографской практики.

Описание шрифта и форматирования текста состоит

ряда отдельных

целого

Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:

p {font-family: 'Times New Roman', Times, serif;}

Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.

Пример:

.p1 { font-size: small;

}

/* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */ .p2 { font-size: larger;

}

/* варианты: larger, smaller */ .p3 { font-size: 10pt;

}

/* абсолютный размер 10 пунктов */ .p3 { font-size: 10px;

}

/* размер 10 пикселей. Зависит от разрешения экрана или принтера */

.p3 { font-size: 120%;

}

/* 120% от размера шрифта родительского элемента */

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Font-style (начертание) переключает между обычным (normal) и курсивным (italic).

h3 {font-style: italic;} /* курсив */

Font-weight задает насыщенность (жирность) шрифта. Возможные значения:

normal – обычный

bold – жирный

bolder – жирнее родительского

lighter – светлее родительского

100 – самый светлый

200

300

400 – то же что normal

500

600

700 – то же что bold

800

900 – самый жирный

Установки жирности зависят от установленных на пользовательской машине шрифтов. Часто пользователь не может увидеть различий между близкими значениями жирности.

li {font-weight: bold;}

Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).

p:first-line {font-variant: small-caps;}

Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.

p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line- height, font-family.

Пример:

p

{ font: italic normal 400 12px/14px Arial;

}

/* выделенные жирным значения обязательны, остальные могут быть опущены */

Эквивалентно

p

}

{ font-style: italic; font-variant: normal; /* значение по умолчанию можно опустить*/ font-weight: 400; /* значение по умолчанию можно опустить*/ font-size: 12px; line-height: 14px; font-family: Arial;

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

следующие декорирования), underline (подчеркнутый), overline (надчеркнутый), line- through (перечеркнутый), а также их сочетания.

Text-decoration допускает

значения: none (без

li {text-decoration: underline line-through;}

текста преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).

Text-transform задает

образом: none (нет

преобразование

следующим

h1 {text-transform: capitalize;}

Text-align задает выравнивание текста внутри блока влево (left), вправо (right), по центру (center) или по ширине (justify). Text-indent определяет отступ первой строки текста от левой границы блока.

p

{ text-align: justify; text-indent: 20px;

}

/* допускаются положительные и отрицательные значения */

letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в значения.

большинстве

браузеров. Значение normal сбрасывает letter-spacing в стандартное значение.

Допускаются

отрицательные

Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.

color устанавливает цвет текста. Значение: любое корректное значение цвета.

p {

font: 14px Verdana;

}

<p>

Ко устанавливающее кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства в чистом виде.

всем

абзацам

данного

примера

применено

стилевое

правило,

</p>

<p style="font-size: larger">

Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль со значением свойства font-size:larger.

</p>

<p style="line-height: 200%; color: Red">

В этом абзаце увеличен межстрочный интервал путем задания свойства стиля

line-height:

200%,

что означает удвоенную

высоту строки.

Кроме того,

тексту назначен красный цвет.

</p>

<p>

Эффект

<span

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

style="letter-spacing:

3px">разреженного

текста

</span>достигается путем применения свойства letter-spacing. </p>

Пример 4.2. Свойства шрифта и текста (html, txt)

шрифта и текста ( html , txt ) Рис. 4.1. Свойства шрифта и текста

Рис. 4.1. Свойства шрифта и текста Упражнение. Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.

Рамки, поля, отступы, фон

Рамки

для значения: solid, dotted, dashed, double, groove,ridge, inset, outset, none, и hidden.

border-style определяет

стиль

всех

границ

блока.

Допустимые

Пример: p { border-style: solid; }

Отдельные стили для каждой границы задаются при помощи свойств border-bottom- style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.

Пример: p { border-top-style: double; }

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com

For evaluation only.

border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }

То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left- width.

border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.

Пример: p { border-color: Green; }

свойств border-top-

помощи color, border-right-color, border-bottom-color, border-left-color.

Цвета отдельных границ устанавливаются при

border - сокращенное свойство, объединяющее border-width, border-style и border- color.

Пример: p { border: 2px solid #f33; }

Поля

Пустое пространство между содержимым блока и его рамкой (или если, рамки нет, то

- любых единицах измерения.

границей

в

фона) - поле

задается свойством padding. Его размер можно указать

Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left:

20px; }

оно одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.

Свойство padding -