) 36 2.4. Маркированные списки (элемент

) 37 2.5. Нумерованные списки (элемент
) 37 2.6. Многоуровневые списки 39 3. Форматирование произвольного фрагмента текста. 40 3.1. Параметры шрифта (элемент ) 40 3.2. Размер шрифта (элементы и ) 41 3.3. Выделение курсивом (элемент ) 42 3.4. Выделение жирным (элемент ) 42 3.5. Верхние и нижние индексы (элементы и ) 42 3.6. Подчеркивание и перечеркивание (элементы и 43 3.7. Авторское форматирование (элемент

) 43
4. Задание для самостоятельной работы. 44
Лекция 4. Гипертекстовые ссылки 46
1. Понятие гиперссылки 46
2. Понятие закладки 48
3. Открытие html страниц в новом окне 50
4. Форматирование гиперссылок 51
5. Задание для самостоятельной работы. 51
Лекция 5. Таблицы в HTML 53
1. Создание простейших HTML-таблиц 53
2. Форматирование таблиц 56
2.1. Расположение заголовка таблицы 56
2.2. Рамка таблицы. Атрибуты BORDER и BORDERCOLOR 56
2.3. Цвет фона таблицы и фоновый рисунок. Атрибуты BGCOLOR и BACKGROUND 58
2.4. Расстояние между ячейками. Атрибут CELLSPACING 58
2.5. Отступ между рамкой таблицы и содержимым ячейки. Атрибут CELLPADDING 59
2.6. Ширина и высота таблицы. Атрибуты WIDTH и HEIGHT 60
2.7. Горизонтальное выравнивание таблицы. Атрибут ALIGN 62
2.8. Объединение ячеек. Атрибуты COLLSPAN и ROWSPAN 63
3. Форматирование данных внутри таблицы 65
4. Задание для самостоятельной работы. 66
Лекция 6. Графика в HTML. 69
1. Общие соображения. 69
2. Спозобы хранения изображений. 70
3. Использование изображения в качестве фона HTML-документа (атрибут BACKGROUND тега ) 71
4. Встраивание изображений в HTML-документы (элемент ) 71
4.1. Выравнивание изображений (атрибут ALIGN). 72
4.2. Задание размеров выводимого изображения (атрибуты WIDTH и HEIGTH). 74
4.3. Отделение изображений от текста (атрибуты HSPACE и VSPACE). 75
4.4. Рамки вокруг изображений (атрибут BORDER). 75
4.5. Альтернативный текст (атрибут ALT). 75
5. Создание гиперкарты 76
5.1. Терминология 77
5.2. Преимущества и недостатки гиперкарт 77
5.3. Графическое представление гиперкарты 79
5.4. Описание конфигурации карты-изображения 79
5.4.1. Элемент разметки <МАР> 79
5.4.2. Элемент разметки  80
5.4.3. Атрибут SHAPE 80
5.4.4. Атрибут COORDS 80
5.4.5. Атрибуты HREF и NOHREF 81
5.4.6. Атрибут TARGET 82
5.4.7. Атрибут ALT 82
6. Средства создания гиперкарт 82
6.1. MapEdit 84
6.2. CoffeeCup Mapper 85
6.3. HTML Map Designer 85
7. Задание для самостоятельной работы. 86
Лекция 7. Формы в HTML. 88
1. Основы создания форм. 88
1.1. Атрибут ACTION 90
1.2. Атрибут METHOD 91
1.2.1. Метод GET 91
1.2.2. Метод POST 91
1.3. Атрибут TARGET 91
2. Элементы форм 92
2.1. Однострочное текстовое поле 92
2.2. Поле для пароля 93
2.3. Многострочный текст 94
2.4. Поле со списком 96
2.4.1. Атрибуты тега  96
2.4.2. Атрибуты тега  97
2.4.3. Группировка элементов списка 99
2.5. Переключатели 100
2.6. Флажки 102
2.7. Скрытое поле 103
2.8. Кнопки 105
2.8.1. Кнопка SUBMIT 107
2.8.2. Кнопка RESET 108
2.8.3. Кнопка с изображением 109
2.9. Поле отправки файла 110
2.10. Группировка элементов формы. 112
2.11. Переход между полями с помощью табуляции 112
2.12. Ограничение доступа к элементам формы. 113
3. Задание для самостоятельной работы. 115
Лекция 8. Фреймы 117
1. Сфера применения фреймов 117
2. Создание Web-страниц с фреймами 118
2.1. Элемент  118
2.2. Элемент  119
2.3. Элемент  121
3. Задание для самостоятельной работы. 121
Лекция 9. Введение в CSS. 123
1. Понятие CSS 123
2. Подключение CSS 124
2.1. Таблица связанных стилей 124
2.2. Таблица глобальных стилей 126
2.3. Внутренние стили 127
3. Базовый синтаксис 128
4. Селекторы тегов 130
5. Классы 131
6. Идентификаторы 136
7. Правила создания стиля 140
8. Основы CSS-верстки. Создание «резинового» шаблона. 144
8.1. Создание макета из одной колонки 144
8.2. Макет из двух колонок 146
8.3. Макет из трех колонок 148
9. Задание для самостоятельной работы 150
Раздел 1. Введение в HTML и CSS.
Лекция 1. Введение в HTML.
1. История развития HTML
В 1989 году Тим Бернерс-Ли предложил руководству европейского центра ядерных исследований (CERN) проект распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW), Всемирная паутина. Первоначально идея системы состояла в том, чтобы при помощи гипертекстовой навигационной системы объединить все множество информационных ресурсов CERN в единую информационную систему. Технология оказалась настолько удачной, что дала толчок к развитию одной из самых популярных в мире глобальных информационных систем. Практически в сознании большинства пользователей глобальной компьютерной сети Internet сама эта сеть ассоциируется с тремя основными службами:
• World Wide Web.
• электронная почта (e-mail);
• файловые архивы FTP;
Причем последняя находится именно на первом месте.
Успех World Wide Web определен двумя основными факторами: простотой и использованием протоколов межсетевого обмена семейства TCP/IP, (Transmission Control Protocol, протокол управления передачей/Internet Protocol, протокол Internet), которые являются основой Internet.
Практически все пользователи Сети одновременно получили возможность попробовать себя в качестве создателей и читателей информационных материалов, опубликованных во Всемирной паутине. Но и популярность самого Internet во многом вызвана появлением World Wide Web, так как это первая сетевая технология, которая предоставила пользователю простой современный интерфейс для доступа к разнообразным сетевым ресурсам. Простота и удобство применения привели к росту числа пользователей WWW и привлекли внимание коммерческих структур. Далее процесс роста числа пользователей стал лавинообразным, и так продолжается до сих пор.
При этом сама технология создания и использования материалов на начальном этапе была чрезвычайно проста. Дело в том, что при разработке различных компонентов технологии (языка гипертекстовой разметки HTML (HyperText Markup Language, язык разметки гипертекста), протокола обмена гипертекстовой информацией HTTP, спецификации разработки прикладного программного обеспечения CGI и др.) предполагалось, что квалификация авторов информационных ресурсов и их оснащенность средствами вычислительной техники будут минимальными.
Одним из компонентов технологии создания распределенной гипертекстовой системы World Wide Web стал язык гипертекстовой разметки   HTML, разработанный Тимом Бернерсом-Ли на основе стандарта языка разметки печатных документов — SGML (Standard Generalised Markup Language, стандартный обобщенный язык разметки). Дэниел В. Конноли написал для него Document Type Definition — формальное описание синтаксиса HTML в терминах SGML.
Разработчики HTML смогли решить две задачи:
• предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;
• сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных.
Первая задача была решена за счет выбора теговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати.
Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.
Вторым важным моментом, повлиявшим на судьбу HTML, стало то, что в качестве основы был выбран обычный текстовый файл. Выбор был сделан под влиянием следующих факторов:
• В качестве средства создания документа может выступать любой текстовый редакторе (включая банальный «Блокнот») на любой аппаратно-программной платформе (PC, Mac, Linux, Windows, MacOS и т. д.). Для дальнейшей работы с помощью браузера достаточно сохранить такой документ в виде файла с расширением .htm (.html);
• к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа.
Такой подход предполагает наличие еще одного компонента технологии — интерпретатора языка. Для HTML функции интерпретатора выполняет интерфейс пользователя (браузер), который осуществляет интерпретацию конструкций языка, связанных с представлением информации.
Первая версия языка (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер. Вторая версия языка (HTML 2.0) фиксировала практику использования его конструкций. Версия HTML++ представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста. Версия 3.2 смогла упорядочить все нововведения и согласовать их с существующей практикой. HTML 3.2 позволяет реализовать использование таблиц, выполнение кодов языка Java, обтекание графики текстом, а также отображение верхних и нижних индексов.
Сейчас World Wide Web Consortium (W3C) — международная организация, которая занимается подготовкой и распространением документации на описание новых версий HTML — уже опубликовала материалы спецификации HTML 4.01. Кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей, уже существовавших в предыдущих версиях HTML, в версию 4.01 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов. Для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев, например, JavaScript, Java и VBScript.
Усложнение HTML и появление языков программирования привело к тому, что разработка Web-узлов стала делом высокопрофессиональным, требующим специализации по направлениям деятельности и постоянного изучения новых Web-технологий. Но возможности Internet позволяют пользователям, владеющим основами HTML, создавать и размещать собственные Web-узлы без больших затрат.
2. Принципы гипертекстовой разметки
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами). В HTML разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами.
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например, <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
<TABLE WIDTH=570 ALIGN=center CELLPADDING=10
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выравнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Uniform Resource Locator, унифицированный указатель ресурса), других документов в качестве значения атрибута HREF.
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.
При использовании вложенных элементов разметки в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например, теги   <META> и <BASE>.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег   <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.
Есть и другие конечные теги, без которых браузеры отлично работают, например, конечный тег   </HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Для краткости и образности мы будем в ряде случаев вместо словосочетания "элемент разметки" применять термин "контейнер".
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
"контейнер"=
<"имя тега" "список атрибутов">
содержание контейнера
</"имя тега">
Следует отметить, что в литературе кроме термина "контейнер" еще используется и термин "элемент". Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера.
Кроме тегов, элементами HTML являются CER (Character Entity Reference - подстановочные коды), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега ( к примеру - <BR>) просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используются такие ссылки.
CER легко обнаружить, если посмотреть на структуру любого документа HTML, поскольку каждый из них начинается с амперсанда "&". В отличие от наименований тегов HTML, наименования CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;. Далее в таблице 1.1 приведены наиболее часто используемые CER и соответствующие им числовые коды.
Таблица 1.1.
Наиболее часто используемые CER и соответствующие им числовые коды.
Числовой код
Именная замена
Символ
Описание
&#034;
&quot;
"
Кавычка
&#038;
&amp;
&
Амперсанд
&#060;
&lt;
<
Меньше
&#062;
&gt;
>
Больше
&#161;
&iexcl;
¡
Перевернутый восклицательный знак
&#162;
&cent;
¢
Цент
&#163;
&pound;
£
Фунт
&#164;
&curren;
¤
Валюта
&#165;
&yen;
¥
Йена
&#168;
&uml;
¨
Умляут
&#169;
&copy;
©
Копирайт
&#171;
&laquo;
«
Левая угловая кавычка
&#174;
&reg;
®
Зарегистрированная торговая марка
&#177;
&plusmn;
±
Плюс или минус
&#187;
&raquo;
»
Правая угловая кавычка
Лекция 2. Структура HTML – документа
Документ в формате HTML 4.0 состоит из трех частей:
• сстроки, содержащей информацию о версии HTML ;
• рраздела заголовков (определяемого элементом HEAD);
• ттела, которое включает собственно содержимое документа. Тело может вводиться элементом BODY.
Перед каждым элементом или после каждого элемента может находиться пустое пространство (пробелы, переход на новую строку, табуляции и комментарии).
Вот пример простого документа HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
2
<HEAD>
<TITLE>Мой первый документ HTML</TITLE>
</HEAD>
3
<BODY>
<P>Всем привет!
</BODY>
</HTML>
Следует обратить внимание, что разделы 2 и 3 входят в состав контейнера <HTML>...</HTML>.
1. Информация о версии HTML
При подготовке документов HTML в качестве первой строки используется идентификатор текста DTD (Document Type Declaration, определение типа документа). Это позволяет браузеру идентифицировать документ как соответствующий стандарту HTML. Обычно (но не обязательно) каждый документ HTML начинается со строки типа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
В этой строке содержится информация о том, что документ соответствует версии HTML 4.0; разработанной W3C; используемый язык — английский.
Возможные варианты DTD:
• HTML 4.0 Strict DTD (строгое определение) включает все элементы и атрибуты, не являющиеся нежелательными и не использующиеся в документах с кадрами. Для документов, использующих это DTD, используйте такое объявление типа документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
• HTML 4.0 Transitional DTD (переходное определение) включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты (большинство из которых относится к визуальному представлению). Для документов, использующих это DTD, используйте такое объявление типа документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
• HTML 4.0 Frameset DTD (определение для кадров) включает все, что включено в переходное DTD, а также кадры. Для документов, использующих это DTD, используйте такое объявление типа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
Этот элемент структуры HTML документа обязательным не является. По умолчанию (если DTD явным образом не определен) в качестве версии используется последний вариант.
2. Контейнер <HTML> </HTML>
Определяет границы собственно HTML документа. Все остальные элементы, описывающие HTML — документ, находятся внутри данного контейнера.
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY). Рассмотрим простейший пример классического документа.
2.1. Заголовочная часть HTML – документа
Заголовок HTML-документа является необязательным элементом разметки. В HTML 2.0 предлагалось вообще отказаться от деления элементов документа на элементы заголовка и элементы тела документа. В то время в HTML не было элементов, которые использовались одновременно и в заголовке, и в теле документа. Современная практика HTML-разметки такова, что почти в каждом документе есть HTML-заголовок. Элементы заголовка HTML-документа содержатся внутри контейнера HEAD.
Основными элементами заголовка HTML – документа являются:
• TITLE (заглавие документа);
• BASE (база URL);
• ISINDEX (поисковый шаблон);
• META (метаинформация);
• LINK (общие ссылки);
• STYLE (описатели стилей);
• SCRIPT (скрипты).
Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP-обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей стилей.
2.1.1. Элемент разметки TITLE
Элемент разметки TITLE служит для именования документа в World Wide Web. Более прозаическое его назначение — именование окна браузера, в котором просматривается документ. Состоит контейнер из тега начала, содержания и тега конца. Наличие тега конца обязательно. Тег начала элемента не имеет специфических атрибутов.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Заглавие не является обязательным контейнером документа. Его можно опустить. Однако следует отметить, что роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах внешнего Web-узла.
2.1.2. Элемент разметки BASE
Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить мишень (окно) загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Подробнее об использовании этого элемента рассказывается в лекции “Гиперссылки”
2.1.3. Элемент разметки META
Это наиболее популярный элемент разметки заголовка, более распространен только элемент TITLE. Такое положение дел объясняется назначением данного элемента разметки. META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа.
Остановимся на наиболее ярких примерах использования данного контейнера:
1. Описание поискового образа документа. Собственно, для описания документа используется два META-тега. Один определяет список ключевых слов, а второй – реферат (краткое содержание документа), который отображается в качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе. Контейнер TITLE здесь также используется в качестве названия документа.
<TITLE>Основы Web-технологий</TITLE>
<META NAME="description"
http-equiv="description"
content="Учебный курс Разработка WEB-приложений.
Тема: Структура HTML-документа. Элемент
разметки META. Дается краткое описание
основных способов применения контейнера META
в заголовке HTML-документа. Рассматривается
управление HTTP-обменом и индексирование
документов.">
<META NAME="keywords" HTTP-EQUIV="keywords"
CONTENT="учебный курс; Web-технология; web;
технология; HTML; язык гипертекстовой разметки;
заголовок HTML-документа; заголовок; HTML;
документ; контейнер; META; элемент; HEAD;
пример; разметка; методика">
При индексировании такого документа содержимое контейнера TITLE и атрибутов CONTENT контейнеров META после фильтрации попадет в индекс поисковой машины и может быть использовано для составления запросов. Процесс фильтрации отбракует так называемые stop-слова и общие слова. Они не попадут в индекс поисковой машины. В частности, будут отбракованы предлоги или, если речь идет о тематическом поисковом индексе, например по технологиям World Wide Web, то в него не попадут: web, Web-технология и т.п.
2. Указание типа кодировки документа. В Windows 95 и Windows NT 4.0 с поддержкой таблиц UNICODE появилась возможность указывать тип кодировки документа — CHARSET. К сожалению, на многих Unix-платформах этот механизм не работает, что часто приводит к ошибкам, например в IRIX версий 6.2-6.4. Скептическое отношение поклонников Unix к этой возможности ничем не подкреплено, так как основная масса пользователей российской части Internet просматривает документы World Wide Web в Windows. Для перекодировки на стороне клиента (документ подготовлен в кодировке cp1251) в заголовок документа необходимо включить META-тег следующего вида:
<META HTTP-EQUIV="Content-type"
CONTENT="text/html;
CHARSET=windows-1251">
2.1.4. Элемент разметки LINK
Элемент разметки LINK – это результат давно предпринятой попытки придать HTML академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется тем, что контекстную связь можно привязать к определенному месту документа, а общую — отнести только ко всему документу целиком. Если взглянуть на проблему связи чуть шире, то очевидной становится аналогия с отношениями. Гипертекстовая связь задает отношение на множестве информационных узлов.
Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй — мишенью. Собственно, это и отражено в названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью). При этом в контекстной связи один и тот же термин может идентифицировать разные связи. Например, в контексте содержания конспекта данной темы слово "HEAD" определяет документ head.htm, который описывает контейнер HEAD и особенности его применения, а в контексте справочника по данной теме слово "HEAD" будет означать ссылку на описание синтаксиса этого контейнера.
Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся в отношении следования, т.е. при "линейном" просмотре одна Web-страница является следующей для другой Web-страницы. В этом случае речь идет о страницах целиком, а не об отдельных их частях. Такой же общей связью является принадлежность к Web-узлу, который ассоциируется со своей домашней страницей.
Осмысленное применение контейнер LINK поучил после реализации поддержки описателей стилей в Netscape Navigator и Internet Explorer четвертых версий. CSS (Cascade STYLE Sheets, каскадные таблицы стилей). Он позволил загружать внешние описатели стилей:
<LINK REL=stylesheet href="../css/style.css"
TYPE="text/css">
В данном случае речь идет о загрузке стилей из файла style.css. При этом стили задаются в нотации W3C. В сущности, атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.
2.1.5. Элемент разметки STYLE
Элемент разметки STYLE, также как и предыдущий, предназначен для размещения описателей стилей. При этом описание стиля из данного элемента разметки, если оно совпадает по имени класса и/или идентификатору подкласса со стилем, описанным во внешнем файле, заменяет описание стиля из внешнего файла. С точки зрения влияния на весь документ, описатели стилей задают правила отображения контейнеров HTML-документа для всей страницы.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт тегом начала, то он должен быть закрыт тегом конца. В общем виде запись элемента STYLE выглядит так:
<STYLE TYPE=тип_описания_стилей>
описание стиля/стилей
</STYLE>
Применению стилей в HTML-разметке, а также проектированию Web-узлов с применением CSS посвящена отдельная лекция "Применение каскадных таблиц и стилей".
2.1.6. Элемент разметки SCRIPT
Элемент разметки SCRIPT служит для размещения внутри HTML-документа кода JavaScript, VBScript или Jscript. Соответствующие скрипты придают документу определенную интерактивность, делают страницу динамической. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:
<SCRIPT LANGUAGE="JavaScript"
SRC=script.code>
Если открыт тег начала, то нужно обязательно использовать тег конца контейнера. В противном случае, браузер может отобразить только символ "]". Если код не помещен в HTML-комментарии, то старые версии браузеров (до Mozilla 2) отображают программу перед текстом страницы. В ряде случаев страница вообще может не отображаться.
В общем виде запись контейнера выглядит следующим образом:
<SCRIPT [TYPE=тип_языка_программирования]
[SRC=URL]>
JavaScript/VBScript-код
</SCRIPT>
Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript. Подробнее с JavaScript и контейнером SCRIPT можно ознакомиться в лекциях раздела "Введение в JavaScript".
2.2. Тело HTML документа
Описание тегов тела документа следует начать с тега ВОDY.
2.2.1. Заголовки в тексте
Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.
Ниже на рисунке показан код и результат использования следующих заголовков <H1> и <H2>:
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
Рис. 3.1. Результат использования элементов <h1> и <h2>
2.2.2. Абзацы (параграфы)
Элемент <P> применяется для разделения текста на абзацы. К каждому абзацу можно применить собственные параметры форматирования:
• выравнивание (по левому краю, по правому краю, по центру, по ширине);
• отступы (слева, справа, первой строки);
• интервалы (перед абзацем, после абзаца, между строк внутри абзаца);
• маркированный список;
• нумерованный список.
2.2.3. Таблицы
Таблицы — едва ли не самый противоречивый с точки зрения их включения в структуру документа элемент. Они могут использоваться как для разметки соответствующего документа, так и для оформления определенного элемента текста. Для описания таблиц используется элемент <TABLE>.
2.2.4. Рисунки
Для того чтобы вставить в Web-страницу изображение, необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования можно создать простое изображение и сохранить его в нужном формате. Если программа этот формат не поддерживает, необходимо преобразовать файл в требуемый формат. Существует множество программ, предназначенных для преобразования одного графического формата в другой. Позаимствовать же картинки можно из различных программных пакетов или с других Web-страниц в Internet, содержащих библиотеки свободного доступа художественных изображений. Когда браузер выводит Web-страницу с изображением, соответствующий графический файл временно хранится в памяти компьютера. В большинстве браузеров есть команда, позволяющая сохранить файл на локальном диске. Существует также множество других вариантов получения графических файлов.
Изображения могут нести определенную информацию, да и просто придают Web-странице привлекательный вид. Приведем наиболее распространенные случаи применения изображений:
• логотип компании на деловой странице;
• графика для рекламного объявления;
• различные рисунки;
• диаграммы и графики;
• художественные шрифты;
• подпись автора страницы;
• применение графической строки в качестве горизонтальной разделительной линии;
• применение графических маркеров для создания красивых маркированных списков.
Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
2.2.5. Гиперссылки
Гиперссылка представляет собой соединение одного Web-ресурса с другим, в качестве которого может выступать другой документ, другое место в данном документе, внешний файл любого формата (изображение, видеоклип, аудиофрагмент, программа и др.). Несмотря на простоту концепции, ссылка является одной из фундаментальных сил, приведших к успешному развитию Web.
Приведенный ниже пример демонстрирует гиперссылку на начало файла primer.htm, который находится внутри базовой папки (вводится с помощью элемента <BASE>), привязанную к тексту «Пример ссылки»
<A href="primer.htm">Пример ссылки</A>
Если же необходимо осуществить переход к конкретному месту в документе, то это место должно быть помечено с помощью закладки («якоря»):
<A name=”yacor”>Текст к которому должен осуществиться переход</A>
где «yacor» - имя закладки. И гиперссылка в этом случае будет выглядеть следующим образом:
<A href="primer.htm#yacor">Пример ссылки</A>
2.2.6. HTML формы
Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO:> в формах позволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.
Для определения документа (или части документа) как формы используется элемент <FORM> внутри которого с помощью соответствующих тегов описываются элементы управления формы. Подробнее об этом будет говориться в лекции «Формы HTML»/
2.2.7. Пользовательские элементы структуры.
Контейнер <SPAN></SPAN> используется для выделения произвольного фрагмента текста как элемента структуры HTML-документа. К такому элементу могут быть применены все атрибуты, характерные стандартным элементам структуры (<H1>, <P>, <TABLE>, <FORM>, <IMG> и др.), включая возможность присвоения идентификатора (атрибут ID) и пользовательского стиля из CSS-таблицы (атрибут CLASS).
Лекция 3. Форматирование HTML – документа
Для отображения не отформатированного текста достаточно просто ввести его между тегами начала и конца соответствующего структурного элемента тела документа. При обработке такой страницы браузер найдет и выведет весь этот текст. Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение полужирным или курсивом, необходимо использовать соответствующие атрибуты и теги, отвечающие за форматирование.
Сразу же обращаем Ваше внимание на то, что указание соответствующих атрибутов, отвечающих за форматирование, не является обязательным. В случае отсутствия такового браузер будет использовать для такого атрибута значение по умолчанию. Однако, поскольку для различных браузеров такое значение может отличаться, внешний вид созданного документа на компьютере клиента в этом случае становится непредсказуемым.
1. Форматирование страницы.
Применение параметров форматирования для страницы в целом осуществляется путем указания определенных атрибутов для тега <BODY>. Некоторые из них описаны ниже.
1.1. Цвет фона страницы (атрибут BGCOLOR)
Атрибут ВGCOLOR определяет цвет фона, на котором отображается текст документа. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1. Следует отметить, что в качестве значения атрибута может выступать как код цвета, так и его название:
<ВОDY ВGCOLOR=#FFFFFF>
или
<ВОDY ВGCOLOR=white>
Таблица 3.1.
Принятые в HTML формальные обозначения некоторых цветов.
Название
Код
Название
Код
aqua
#00FFFF
navy
#000080
black
#000000
olive
#808000
blue
#0000FF
purple
#800080
fuchsia
#FF00FF
red
#FF0000
gray
#808080
silver
#C0C0C0
green
#008000
teal
#008080
lime
#00FF00
white
#FFFFFF
maroon
#800000
yellow
#FFFF00
1.2. Использование в качестве фона страницы изображения (атрибут BАСКGROUND)
Атрибут BАСКGROUND позволяет определить в качестве фона, на котором отображается текст документа изображение, предварительно созданное с помощью любого графического редактора и сохраненное в виде файла с расширением .gif или .jpg :
<ВОDY ВАСКGROUND="image.gif">
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. Напоминаем, что для хранения информации о базовом URL (начиная с которого идет поиск требуемого файла) используется элемент BASE заголовочной части документа. Если базовый URL не будет явным образом определен, то в качестве такового будет восприниматься папка, в которой сохранен сам файл HTML. Разумеется, никто не мешает указать адрес соответветствующего файла полностью:
<ВОDY ВАСКGROUND=file:///E:/Foto/image.gif>
или
<ВОDY ВАСКGROUND=http://informnn.com/Foto/image.gif>
однако это не всегда удобно, если идет речь о перемещении соответствующей страницы.
1.3. Цвет символов текста (атрибут ТЕХТ)
Атрибут TEXT определяет цвет символов текста в HTML - документе. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.
<ВОDY TEXT=#000000>
или
<ВОDY TEXT=black>
1.4. Цвет символов гиперссылки (атрибут LINK)
Атрибут LINK определяет цвет символов для гиперссылки до момента первого перехода по ней с данного компьютера. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.
<BODY LINK=#0000FF>
или
<BODY LINK=blue>
1.5. Цвет символов активной гиперссылки (атрибут ALINK)
Активной называют гиперссылку на которую наведен указатель мыши. Цвет символов для такой гиперссылки определяет атрибут ALINK. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.
<BODY ALINK=#FF0000>
или
<BODY ALINK=red>
1.6. Цвет символов гиперссылки после перехода (атрибут VLINK)
Атрибут VLINK определяет цвет символов для гиперссылки после первого перехода по ней с данного компьютера. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 3.1.
<BODY VLINK=#800080>
или
<BODY VLINK=purple>
2. Форматирование абзаца.
Сразу же уточним, что под абзацем здесь мы будем понимать законченную со смысловой точки зрения часть текста (а не часть текста между тегами <P></P>). Именно поэтому речь здесь пойдет не только об атрибутах тега <P>, но и о некоторых дополнительных тегах, позволяющих оформлять специфические по своей сути абзацы.
2.1. Выравнивание (атрибут ALIGN)
Атрибут ALIGN тега <P> позволяет установить для соответствующего абзаца горизонтальное выравнивание. Возможные варианты значения:
• left – по левому краю;
• center – по центру;
• right – по правому краю;
• justify – по ширине.
2.2. Принудительный перенос на новую строку (элемент <BR>)
Перенос на новую строку внутри абзаца осуществляется автоматически. В строке будет столько символов, сколько уместится на экране. Отсюда явная зависимость между длиной строки с одной стороны и диагональю экрана (или размером окна браузера) — с другой. В некоторых случаях автору требуется жестко ограничить размер строки. Для этого он может использовать элемент <BR>. Текст, который пойдет после него, гарантировано будет перенесен на новую строку. Заметим, что в отличии от тегов с которыми мы имели дело до сего момента, элемент <BR> не имеет тега окончания. На рисунке 3.1 Вы можете увидеть пример применения этого тега (в верхней части окна — код HTML, в нижней — вид документа в браузере).
Рис. 3.1. Пример использования элемента <BR>
2.3. Оформление цитат (элемент <BLOCKQUOTE>)
Элемент <BLOCKQUOTE> обычно используется при цитировании текста, взятого из другого источника. Большинство браузеров выделяют такой фрагмент текста от остального пустыми строками и отступами. Пример использования данного элемента — рисунок 3.2.
Рис. 3.2. Пример использования элемента <BLOCKQUOTE>
2.4. Маркированные списки (элемент <UL>)
Совокупность абзацев, каждый из которых должен быть оформлен как элемент маркированного списка, помещается внутрь контейнера <UL></UL>. С помощью атрибута TYPE тега <UL> можно выбрать стиль маркера для создаваемого списка.
Возможные варианты значения атрибуда:
• disc — маркер-диск (по умолчанию) ()
• circle — маркер-круг ()
• square — маркер-квадрат ()
Каждый элемент списка помещается в контейнер <LI></LI> (рис. 3.3).
Рис. 3.3. Пример создания маркированного списка.
2.5. Нумерованные списки (элемент <OL>)
Совокупность абзацев, каждый из которых должен быть оформлен как элемент нумерованного списка, помещается внутрь контейнера <OL></OL>. С помощью атрибута TYPE тега <OL> можно выбрать стиль маркера для создаваемого списка.
Возможные варианты значения атрибута:
• A - устанавливает маркер в виде прописных букв
• a - устанавливает маркер в виде строчных букв
• I - устанавливает маркер в виде больших римских цифр
• i - устанавливает маркер в виде маленьких римских цифр
• 1 - устанавливает маркер в виде арабских цифр (по умолчанию)
С помощью следующих атрибутов можно дополнительно управлять отображением списка
• START = n - устанавливает начальный маркер в текущем списке; n - номер, с которого начинается нумерация в списке
• COMPACT - Представляет список в более компактном виде
Каждый элемент списка помещается в контейнер <LI></LI> (рис. 3.4).
Рис. 3.4. Пример создания нумерованного списка
2.6. Многоуровневые списки
Для оформления части текста как многоуровневого списка достаточно лишь включить контейнер для создания списка второго уровня внутрь контейнера для создания списка первого уровня (рис. 3.5).
Рис. 3.5. Пример создания нумерованного списка
3. Форматирование произвольного фрагмента текста.
Параметры форматирования, описываемые в этом параграфе, можно применить к любой последовательности символов. Необходимо лишь заключить ее в соответствующий контейнер.
3.1. Параметры шрифта (элемент <FONT>)
Элемент <FONT> позволяет управлять параметрами шрифтов.
Гарнитура шрифта устанавливается с помощью атрибута FACE, значение которого — название желаемой гарнитуры шрифта (Arial, Tahoma, Vernada). При необходимости использования нестандартной гарнитуры шрифта рекомендуется указывать через запятую несколько альтернативных вариантов — на случай если определенный шрифт не будет установлен на компьютере клиента. В этом случае будет применяться первый из найденных на компьютере клиента шрифтов.
Размер шрифта задается с помощью атрибута SIZE. В качестве значения атрибута указывается порядковый номер размера (1 — 7). Примерное соответствие порядкового номера шрифта и размера шрифта в пт (единица измерения принятая во всех текстовых редакторах) для браузера Internet Explorer приведено в таблице 4.4.
Таблица 3.2.
Размер шрифта
Номер размера
Размер в пт
1
7
2
10
3
12
4
14
5
18
6
24
7
36
Еще одним атрибутом тега <FONT>, который можно использовать на практике является COLOR, позволяющий указать цвет шрифта для выделяемого фрагмента.
3.2. Размер шрифта (элементы <BIG> и <SMALL>)
Достаточно удобным вариантом выделения размером определенного фрагмента текста является использование элементов разметки <BIG> и <SMALL>.
Элемент <BIG> увеличивает размер шрифта на единицу по сравнению с обычным текстом (3). Допускается применение вложенных тегов <BIG>, при этом размер шрифта будет больше с каждым уровнем, но не может быть больше, чем 7.
Элемент <SMALL> уменьшает размер шрифта на единицу по сравнению с обычным текстом (3). Допускается применение вложенных тегов <SMALL>, при этом размер шрифта будет меньше с каждым уровнем, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.
3.3. Выделение курсивом (элемент <I>)
Курсивное (наклонное) начертание символов осуществляется с помощью элемента разметки <I>.
3.4. Выделение жирным (элемент <STRONG>)
Помещенный внутрь контейнера <STRONG></STRONG> текст отображается браузерами жирным начертанием.
3.5. Верхние и нижние индексы (элементы <SUB> и <SUP>)
Элемент <SUB> позволяет отобразить последовательность символов в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Элемент <SUP> позволяет отобразить последовательность символов в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.
3.6. Подчеркивание и перечеркивание (элементы <U> и <STRIKE>
Элемент <U> позволяет отобразить текст как подчеркнутый, а элемент <STRIKE> - как перечеркнутый.
Рис. 3.6. Пример форматирования произвольных фрагментов текста
3.7. Авторское форматирование (элемент <PRE>)
В общем случае, текст документа формируется браузером, игнорируя пробелы и переносы строк. Используя элемент разметки <PRE> можно описать в тексте заданный авторский стиль (то есть пробелы и пустые строки существующие в исходном HTML-коде будут интерпретироваться браузером именно так).
Внутри контейнера <PRE> Можно применять все описанные выше параметры форматирования произвольных фрагментов текста.
Рис. 3.7. Применение авторского форматирования
4. Задание для самостоятельной работы.
• Проделайте все примеры, приведенные в качестве иллюстраций в лекции №3 (рис. 3.1 – 3.6). Каждый пример должен быть реализован в виде отдельной страницы.
• По приведенному ниже образцу, используя, где необходимо, элемент <PRE> создайте свое резюме. Рекомендуемые параметры:
◦ Цвет фона для документа – голубой.
◦ Фамилия, имя – заголовок первого уровня, выравнивание по центру.
◦ Слова «Цель», «Опыт работы», «Образование», «Увлечения» - заголовки второго уровня.
◦ Для остального текста – выравнивание – по левому краю, шрифт Arial, размер 12пт, параметры начертания (жирный, курсив, подчеркнутый) и отступы от левого края – по образцу.
Сергей Алексеев
ЦЕЛЬ:
Получение высокооплачиваемой работы
ОПЫТ РАБОТЫ:
1990-1994 ТОО «Башмачок» Москва
Руководитель планового отдела
• Введена новая система планирования.
• Увеличены объемы продаж на 13%.
• Уменьшены издержки производства на 23%.
1985-1990 ТОО «Башмачок» Москва
Заместитель руководителя планового отдела
• Увеличены объемы продаж на 7%.
• Организована единая компьютерная сеть.
• Введены в строй 4 филиала предприятия.
ОБРАЗОВАНИЕ:
1971-1975 Институт легкой промышленности Москва
• Факультет: Экономика легкой промышленности.
Специальность: Экономист.
УВЛЕЧЕНИЯ
Компьютеры, автомобили, теннис, чтение.
Лекция 4. Гипертекстовые ссылки
1. Понятие гиперссылки
Под гипертекстовой ссылкой (гиперссылкой) понимают соединение одного Web-ресурса с другим. Несмотря на простоту концепции, ссылка является одной из фундаментальных сил, приведших к успешному развитию Web.
Для создания гиперссылки используется элемент разметки <A>, называемый также «якорем». Заметим, что при создании гиперссылки зачастую говорят о «якорях» двух видов — начальном (ставится в месте с которого необходимо осуществить переход) и конечном (помечающим место к которому необходимо осуществить переход). Последний также часто называют закладкой. Конечный якорь не является обязательным. Если речь не идет о переходе к определенному месту в документе — его можно опустить.
Заметим также что направление гиперссылки задается с помощью атрибута HREF начального якоря. В качестве значения атрибута выступает URI ресурса на который необходимо осуществить переход. Приведенный ниже пример содержит две ссылки, одна из которых указывает на документ HTML с названием "chapter2.html", а другая - на GIF-изображение в файле "forest.gif":
Рис. 4.1.Пример гиперссылки
Активировав эту ссылку (к примеру — щелчком мыши), пользователь может посетить этот ресурс. Заметим, что URI ресурса к которому должен осуществляться переход, может указываться в относительном виде (как это показано в данном примере), так и в абсолютном (http://MySite.ru/image/forest.gif).
Относительный стиль адресации предполагает, что базовый URI (тот, который помечается символом «..») указан в заголовочной части документа в элементе BASE:
<HTML>
<HEAD>
<TITLE>Пример гиперссылки</TITLE>
<BASE href="http://www.MySite.ru/index.html">
</HEAD>
<BODY>
<P>Вы видели наши <A href="../Prod/birds.gif">товары</A>?
</BODY>
</HTML>
С учетом базового относительный URI "../cages/birds.gif" будет восприниматься браузером как «http://www.MySite.ru/cages/birds.gif»:
Что же касается варианта «chapter2.html» - то в данном случае в качестве базового URI воспринимается папка, в которой находится страница с начальным якорем.
Стоит также обратить внимание на прикладные протоколы по котрым HTML позволяет осуществлять доступ к ресурсам. Помимо традиционного http:// это:
• ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
• mailto: - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
• news:.. - создает ссылку на конференцию сервера новостей;
• telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
• file:/// - создает ссылку на место в файловой системе локального компьютера.
2. Понятие закладки
Атрибут NAME позволяет присвоить соответствующему якорю имя по которому к нему в дальнейшем можно обращаться. В частности, механизм именования якорей является принципиальным, если речь идет о переходе не просто к определенному ресурсу, а к определенному месту в этом ресурсе. В этом случае соответствующий якорь может выступать в качестве закладки, по имени которой к ней можно осуществить переход.
Рис. 4.2. Пример использования имени якоря в качестве закладки
Рис. 4.3. Пример гиперссылки, позволяющей перейти к закладке
Требований к имени якоря лишь два — уникальность в рамках конкретного документа и соблюдение регистра при обращении по имени. Для обеспечения перехода к закладке ее имя добавляется после символа «#» в конце URI, используемого в качестве значения атрибута атрибута HREF.
Следует также отметить, что имя закладки в качестве элемента направления перехода по гиперссылке может быть использовано и при обеспечении возможности гипертекстового перехода в рамках одного документа. В данном случае последовательность символов типа «#zakladka» и будет являться значением атрибута HREF.
Еще одной возможностью идентификации закладки, переход к которой должен осуществиться после активации соответствующей гиперссылки, является использование универсального атрибута ID, который можно использовать для начального тега любого элемента, описывающего структуру тела документа (<H1>, <H2>, <P>, <TABLE>, <IMG> и др.).
Рис. 4.4. Пример использования качестве закладки ID структурного элемента HTML документа.
Синтаксис же для начального якоря при таком варианте идентификации закладки ничем не будет отличаться от рассмотренного ранее.
3. Открытие html страниц в новом окне
При помощи атрибута TARGET можно предусмотреть возможность загрузки страницы, открываемой при активации гиперссылки, в новом окне браузера. Этот атрибут предназначен для задания наименования окна, в котором должна открываться страница. Чтобы открыть страницу в новом окне надо использовать значение _blank1.
Рис. 4.5. Открытие документа в новом окне браузера.
4. Форматирование гиперссылок
Форматирование гиперссылок мало чем отличается от форматирования обычного текста — вопрос, которому была посвящена лекция 3, а именно:
• Пункты 1.3 — 1.5 — цветовое оформление гиперссылок;
• Пункт 3.1 — гарнитура шрифта и размер;
• Пункты 3.3, 3.4, 3.6 — параметры начертания символов (курсив, жирность, подчеркивание)
5. Задание для самостоятельной работы.
• Проделайте все примеры, приведенные в качестве иллюстраций в лекции №4 (рис. 4.1 – 4.5). Каждый пример должен быть реализован в виде отдельной страницы.
• Взяв за основу текст лекции №2 (электронный вариант прилагается), создать серию html-страниц, отвечающих следующим требованиям:
◦ Страница 1 (index.html) содержит заголовок лекции и оглавление, включающее заголовки параграфов;
◦ Каждый параграф должен быть реализован в виде отдельной html-страницы (название — произвольно);
◦ Если параграф содержит более мелкие элементы структуры (параграф 2), в начале страницы должно быть создано оглавление, содержащее заголовки этих элементов структуры;
◦ Форматирование в html-документе должно соответствовать приложенному электронному варианту лекции;
◦ Внедряемые в html-документы рисунки должны храниться в папке с названием img.
Лекция 5. Таблицы в HTML
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.
Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием элемента <PRE>, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что при использовании пары тэгов <PRE> и </PRE> все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.
1. Создание простейших HTML-таблиц
Каждая таблица должна начинаться тегом <TABLE> и завершаться тегом
</TABLE>. Внутри этого контейнера располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом <TR> (Table Row) и завершается тегом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется обычно для ячеек-заголовков таблицы, а <TD> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным (Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тегом <TD> по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.
Теги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>. Завершающие коды </TR>, </TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы.
Количество строк в таблице определяется числом открывающих тегов <TR>, а количество столбцов — максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тегов — <TD>, </TD>. Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержат данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.
Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Описание заголовка таблицы должно располагаться внутри тегов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тегов <TD>, <TH> или <TR>. Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тэга <TABLE> и до первого <TR>.
По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.
Перечисленные теги могут иметь параметры, число и значения которых различны. Однако в простейшем случае тэги используются без параметров, которые принимают значения по умолчанию.
Этих сведений вполне достаточно для построения элементарных таблиц. Приведем пример простейшей таблицы, состоящей из трех строк (одна из которых — строка заголовка) и двух столбцов (рис. 5.1):
Рис. 5.1. Пример таблицы
2. Форматирование таблиц
Рассмотрим назначение различных атрибутов тега <TABLE>, отвечающих за внешний вид таблицы.
2.1. Расположение заголовка таблицы
Тег заголовка таблицы (<CAPTION>) имеет единственный допустимый параметр ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру. Таблица может не иметь заголовка. В качестве заголовка таблицы в большинстве случаев используется простой текст, что регламентируется спецификацией HTML, однако в действительности между тегами <CAPTION> и </CAPTION> допустимо записывать любые HTML-элементы, употребляемые в разделе <BODY>.
2.2. Рамка таблицы. Атрибуты BORDER и BORDERCOLOR
Атрибут BORDER тега <TABLE> управляет изображением рамки вокруг каждой ячейки, которые, по сути, дают линии сетки таблицы, и вокруг всей таблицы. По умолчанию рамки не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы. Существует немало ситуаций, когда использование таблиц без рамок вполне оправданно, например, для многоколонных списков, реализованных при помощи таблиц, или задания точного взаимного расположения рисунков и текста. Однако в большинстве случаев для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице.
Для добавления в таблицу рамок необходимо включить в код <TABLE> параметр BORDER, который может иметь численное значение. Например:
<TABLE BORDER>
или
<TABLE BORDER=10>.
Численное значение параметра определяет толщину рамки в пикселях, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно принимается равным минимальному значению (1), хотя для различных браузеров стиль показа рамок может отличаться.
Атрибут BORDERCOLOR тега <TABLE> позволяет указать свет рамки таблицы. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 3.1.
Пример таблицы с рамкой красного цвета толщиной 10 пикселей приведен на рис. 5.2.
Рис. 5.2. Таблица с рамкой толщиной 10 пикселей красного цвета
2.3. Цвет фона таблицы и фоновый рисунок. Атрибуты BGCOLOR и BACKGROUND
Применение данных атрибутов тега <TABLE> полностью аналогично одноименным атрибутам тега <BODY>, рассмотренным в пунктах 1.1 и 1.2 лекции 4.
2.4. Расстояние между ячейками. Атрибут CELLSPACING
Форма записи атрибута: CELLSPACING=num, где num — численное значение в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 5.2). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 5.3).
Рис.5.3. Таблица со значением CELLSPACING=0
2.5. Отступ между рамкой таблицы и содержимым ячейки. Атрибут CELLPADDING
Форма записи атрибута аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка атрибута CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.
На рис. 5.4 показан пример таблицы со значением CELLPADDING=10.
Рис. 5.4. Таблица со значением CELLPADDING=10
2.6. Ширина и высота таблицы. Атрибуты WIDTH и HEIGHT
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами — по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.
В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются атрибуты WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега <TABLE>. Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна браузера. Последний вариант указания высоты и ширины (в %) активно используется, к примеру, при применении таблиц для разметки страницы:
<TABLE WIDTH=100%>.
Аналогичные атрибуты могут задаваться и для отдельных строк и столбцов (ячеек). В примере, приведенном на рисунке 5.5 ширина таблицы состовляет 100% от размера окна браузера. Из них 30% приходится на столбец 1 и 70% - на столбец 2. Высота таблицы составляет 100% от размера окна браузера. Из них 20% - первая строка, 20% - вторая строка и 60% - третья строка.
Рис. 5.5. Таблица с указанием параметров ширины и высоты в % от размера окна
2.7. Горизонтальное выравнивание таблицы. Атрибут ALIGN
Данный атрибут тега <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево), RIGHT (выравнивание вправо) и CENTER (выравнивание по центру). По умолчанию таблицы выровнены по левому краю.
На рисунке 5.6 представлена таблица, выравненная по центру страницы.
Рис. 5.6. Таблица, выровненная по центру страницы.
2.8. Объединение ячеек. Атрибуты COLLSPAN и ROWSPAN
Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью атрибутов COLSPAN (COLiimn SPANning) и ROWSPAN (ROW SPANning), задаваемых в кодах <TD> или <TH>. Форма записи: COLSPAN=num, где num — числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение атрибута ROWSPAN аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали. По умолчанию для этих параметров устанавливается значение, равное единице. Допустимо одновременное задание значений обоих параметров для одной ячейки. Правильная установка значений этих параметров может оказаться не очень простой задачей, тем более, что большинство HTML-редакторов позволяют визуально конструировать с последующей генерацией HTML-кодов лишь простейшие таблицы.
На рисунке 5.7 представлен типичный пример выполнения задачи. Методом объединения ячеек создан общий заголовок для двух столбцов и общий заголовок для трех строк.
Рис. 5.7. Пример таблицы с объединенными ячейками.
3. Форматирование данных внутри таблицы
Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>, в том числе тэги, управляющие расположением текста — <P>, <BR>, <HR>, коды заголовков — от <H1> до <H6>, тeги форматирования символов — <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT>, тeги вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д. Сразу же подчеркнем, что область действия тeгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тeга. Например, если внутри ячейки определен цвет текста — <FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или расположения его через несколько ячеек или строк таблицы, текст следующей ячейки будет отражен цветом по умолчанию.
Помимо стандартны, при работе с таблицами можно использовать и специфические элементы форматирования. В частности, выравнивание текста внутри соответствующей ячейки можно установить с помощью атрибутов ALIGN и VALIGN, которые могут применяться в тегах <TR>, <TD> и <TH>.
Атрибут для горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Атрибут для вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки может быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.
Некоторые варианты выравнивания текста внутри таблицы представлены на рисунке 5.8. Следует обратить внимание, что если параметры выравнивания соответствуют установленным по умолчанию можно не указывать.
Рис. 5.8. Выравнивание текста в таблице
4. Задание для самостоятельной работы.
1. Проделайте все примеры, приведенные в качестве иллюстраций в лекции №5 (рис. 5.1 – 5.8). Каждый пример должен быть реализован в виде отдельной страницы.
2. Создайте страницы со следующими заголовками:
1. Главная;
2. Новости;
3. Файлы.
Структура каждой из страниц должна соответствовать примеру, изображенному на рисунке:
Требования к страницам:
• Высота и ширина таблицы — 100% от размера окна браузера.
• Толщина линий сетки — 0.
• Для каждой из гиперссылок явным образом прописать цвет ссылки при наведении указателя мыши, цвет ссылки до перехода, цвет ссылки после перехода.
• Для текста на странице: шрифт — Arial, размер — 12пт, цвет — черный.
• Для фона и графического объекта использовать рисунки, располагающиеся в папке «ris_zadanie».
• В рабочей области страницы «Главная» должен располагаться текст следующего содержания: «Добро пожаловать на сайт, созданный Ивановым Иваном».
• В рабочей области страницы «Новости» должна содержаться таблица следующей структуры:
•
•
•
• В первом столбце — дата (выравнивание по центру), во втором столбце — текст новости (выравнивание по ширине).
• В рабочей области страницы «Файлы» должны располагаться гиперссылки на документы MS Word с текстами лекций по курсу «Разработка Web-приложений», оформленные в виде нумерованного списка (нумерация — арабскими цифрами).
Лекция 6. Графика в HTML.
Возможность использования графики трудно переоценить. Без иллюстраций документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещенная графика делает его визуально привлекательнее и, что самое важное, передает одну из основных идей документа. Вспомните старое правило - лучше один раз увидеть, чем сто раз услышать (данном случае прочитать).
1. Общие соображения.
Принимая решение о целесообразности включения в документ тех или иных иллюстраций необходимо учитывать следующие моменты:
• Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для получения документов, особенно, если используется соединение с помощью модема на небольших скоростях. С другой стороны, одновременная работа нескольких пользователей с большими документами, размещенными на вашем сервере, может также привести к его перегрузке.
• Многие пользователи работают в режиме отключения приема графических изображений для увеличения скорости передачи данных. В этом случае от полученных документов остается только текстовая часть, которая должна давать информацию о содержательной стороне документа.
• Поисковые системы не могут индексировать графику. Поэтому если на ваших страницах расположены только иллюстрации без текстовых пояснений, то читатели, использующие современные методы поиска, такие страницы не обнаружат.
• Следует помнить, что пользователи могут работать с различными расширениями экрана монитора и различной глубиной цвета. Страницы хорошо смотрящиеся при одном расширении, могут выглядеть совершенно по иному при другом расширении.
2. Спозобы хранения изображений.
Существует значительное количество форматов хранения графических файлов, - порядка нескольких десятков.
При создании web-страниц чаще всего используется графика в двух форматах: GIF и JPG. Эти два формата поддерживаются всеми современными браузерами.
Формат BMP является стандартом MS Windows и поддерживается браузером Internet Explorer, однако его употребление не может быть рекомендовано, так как данный формат не поддерживает сжатие данных.
Разработанный недавно формат PNG был призван заменить формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил.
Иные графические форматы (кроме GIF и JPG) в HTML-документах на WWW-серверах практически не встречаются, хотя принципиально это возможно. Использование других форматов не рекомендуется по следующим причинам: во-первых, только для GIF и JPG осуществляется встроенная поддержка в большинстве браузеров, тогда как для иных файлов необходимо подключение внешних программ отображения, во-вторых, структура файлов GIF и JPG наиболее подходит для передачи данных по сети и является независимой от платформы.
В общем, изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ.
3. Использование изображения в качестве фона HTML-документа (атрибут BACKGROUND тега <BODY>)
Техническая сторона вопроса относительно оформления фона страницы достаточно подробно был рассмотрен в рамках пункта 1.2 лекции 4. Остановимся лишь на некоторых замечаниях относительно эстетической стороны вопроса.
К фоновому рисунку HTML-документа, безусловно, предъявляется ряд требований. В зависимости от того, какой вид хочет придать своей странице автор, выбирается направление конструирования фона. До недавнего времени классическим решением было создание бледно-серого фона с таким же бледным, но рельефным рисунком. Здесь очень многое зависит от художника, но современные графические редакторы позволяют создавать похожие эффекты и автоматически. Такой фон не должен ощутимо снижать контрастность страницы и мешать чтению текста.
В последнее время в моде на фоновые рисунки произошли изменения. Все чаще можно встретить белый фон. Белый цвет вне конкуренции, и тут не надо что-либо объяснять. Другое направление — использование бледного фона, но другого цвета, например, бежевого, голубого или зеленого. Сам рисунок выглядит как произвольный узор из точек, напоминая поверхность кожи или камня. Здесь опять таки, полет фантазии художника ограничивается необходимостью обеспечения контрастности.
4. Встраивание изображений в HTML-документы (элемент <IMG>)
Для встраивания изображений в HTML-документы следует использовать тег <IMG>, имеющий единственный обязательный атрибут SRС, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:
<IMG SRC="Risunok.gif">
Что касается остальных атрибутов, то, хотя они и не являются обязательными, их использование может существенно повлиять на качество отображение графики на странице.
4.1. Выравнивание изображений (атрибут ALIGN).
При включении графического изображения в документ можно указать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра align тега <IMG> . Возможные значения этого параметра:
Значение параметра align
Действие параметра
top
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
texttop
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
middle
Выравнивание середины изображение по базовой линии текущей строки
absmiddle
Выравнивание середины изображение посередине текущей строки
baseline или bottom
Выравнивание нижней границы изображение по базовой линии текущей строки
absbottom
Выравнивание нижней границы изображение по нижней границе текущей строки
left
Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
right
Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны
Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра - left и right . При использовании любого из этих параметров мы получаем так называемое "плавающие" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением может занимать несколько строк.
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображение относительно строки текста. Таким образом, в отличии от плавающих изображений, здесь изображения являются обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой текста, правда, достаточно большой (типа буквицы).
Приведём пример кода, в котором используются изображения:
<html>
<head>
<title>Выравнивание изображений</title> </head>
<body> Выравнивание<IMG src="../images/cat.jpg" align="top">по верхнему краю <p> Выравнивание<IMG src="../images/cat.jpg" align="baseline">по базовой линии </body>
</html>
Возникает вопрос, в чем разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассматриваемой строки.
Базовая линия - это нижняя часть линии текста, которая проводиться без учета нижней части некоторых символов, например, букв типа j, q, y. В отличии от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т.е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами top и texttop .
4.2. Задание размеров выводимого изображения (атрибуты WIDTH и HEIGTH).
Тег встраивания изображений имеет два необязательных атрибута, указывающих размеры изображения при отображении - WIDTH и HEIGHT . Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра.
Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузер автоматически при загрузке изображения выполняет его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропоций рисунка и, как следствие, к его искажению.
Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычеслятся автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения.
Если не требуется изменить размеры изображения, настоятельно рекомендуется указывать их реальные размеры в пикселях. Указание действительных размеров:
• позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстрации по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер, не зная их, выведет маленькую пиктограмму и форматирование будет нарушено).
• позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отфармотировать текст на экране. Указание размеров изображений позволяет выполнить форматирование документа до полной загрузки файлов и сизображениеми.
4.3. Отделение изображений от текста (атрибуты HSPACE и VSPACE).
Для тега <IMG> можно задать атрибуты HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
4.4. Рамки вокруг изображений (атрибут BORDER).
Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит атрибут BORDER тега <IMG> . В качестве значения атрибута используется число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
4.5. Альтернативный текст (атрибут ALT).
Одним из атрибутов тега <IMG> является ALT, определяющий альтернативный текст. Его указание дает возможность пользователям работающих в режиме отключенной загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях.
При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением атрибут ALT . Значение этого параметра имеет смысл и для случаев, когда загрузка изображений будет выполняться. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением.
Современные браузеры также будут отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.
5. Создание гиперкарты
В последнее время многие Web-страницы для организации ссылок используют так называемые гиперкарты. Реализация этой возможности предусмотрена языком HTML и позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу.
На рис. 6.1 показана Web-страница одной из крупнейших компьютерных фирм России. Основное меню на этой странице представляет собой гиперкарту с соответствующими ссылками.
Рис. 6.1. Главное меню сайта компьютерной фирмы ФЦЕНТР.
5.1. Терминология
Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map — все эти англоязычные термины используются в справочной литературе для обозначения одной и той же возможности — использование встроенного в HTML-документ изображения, для которого определены "горячие" (или активные) точки или области, имеющие ссылки на различные URL-адреса. Будем описывать эту возможность термином «гиперкарта», подразумевая под этим совокупность нескольких компонентов, обеспечивающих реализацию данной концепции. Основными компонентами являются: само изображение, которое будем называть опорным для данной гиперкарты; описание конфигурации активных областей; а также соответствующее программное обеспечение.
5.2. Преимущества и недостатки гиперкарт
В использовании гиперкарт есть как положительные, так и отрицательные моменты. Большинство из них носит эстетический характер, но некоторые имеют и технические аспекты.
Гиперкарты наиболее удобно использовать в следующих ситуациях:
• Для представления пространственных связей, например географических координат, которые было бы трудно задать отдельными кнопками или текстом. В качестве примера может быть приведена карта Северной Америки, на которой выбор каждого из штатов ведет к переходу на соответствующую страницу.
• В качестве меню верхнего уровня, появляющегося на каждой странице. Наличие такого меню предоставляет возможность перехода в интересующий раздел сервера с любой страницы и в любой момент. Создание общего графического меню позволит сократить время разработки HTML-документов, поскольку будет использоваться один и тот же файл описания ссылок. Вместо того, чтобы на каждой странице устанавливать связи с различными частями начальной страницы, достаточно сослаться на общее меню. Такое меню также облегчит навигацию для пользователя.
Несмотря на то, что гиперкарты стали необычайно популярны, очевидно, что они не являются неотъемлемым атрибутом Web-страниц и используются далеко не на всех страницах. Есть ситуации, когда их использование не допустимо.
К недостаткам гиперкарт можно отнести следующие:
• Если не предусмотрено альтернативное текстовое меню, то не остается никаких средств навигации для пользователей, которые не могут загрузить графику или отключили ее загрузку.
• Картам-изображениям свойственны общие недостатки, присущие использованию изображений на Web-страницах, а именно, значительное увеличение времени загрузки по сравнению с чисто текстовыми документами.
• Неудачно спроектированные изображения могут внести путаницу. Иногда бывает трудно определить области, являющиеся активными на изображении.
• При использовании гиперкарт браузер не имеет возможности отмечать другим цветом уже пройденные ссылки так, как это делается для текстовых ссылок.
5.3. Графическое представление гиперкарты
Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений.
5.4. Описание конфигурации карты-изображения
Конфигурация гиперкарты записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников. Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей.
5.4.1. Элемент разметки <МАР>
Для описания конфигурации областей карты-изображения используется элемент разметки <МАР>, единственным параметром которого является NAME. Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Закрывающий тег - обязателен. Внутри контейнера должны располагаться описания активных областей карты, для чего используется элемент разметки <AREA>.
5.4.2. Элемент разметки <AREA>
Каждый элемент <AREA> задает одну активную область. Завершающий тег не требуется. Активные области могут перекрываться. В случае если некоторая точка относится одновременно к нескольким активным областям, то будет реализована та ссылка, описание которой располагается первым в списке областей.
Атрибутами тега <AREA> являются SHAPE, COORDS, HREF, NOHREF, TARGET, и ALT. Рассмотрим их назначение.
5.4.3. Атрибут SHAPE
Атрибут SHAPE определяет форму активной области. Допустимыми значениями являются rect, circle, poly. Эти значения задают области в виде прямоугольника, круга, многоугольника. Если атрибут SHAPE опущен, то по умолчанию предполагается значение rect, т. е. область в виде прямоугольника.
5.4.4. Атрибут COORDS
Параметр COORDS задает координаты отдельной активной области. Значением параметра является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату по горизонтали, второе — по вертикали. Список координат зависит от типа области.
Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника.
Для области типа circle задаются три числа — координаты центра круга и радиус.
Для области типа poly задаются координаты вершин многоугольника в нужном порядке. Заметим, что последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области браузер автоматически соединит последнюю точку с первой. Различные редакторы карт-изображений в этом отношении работают по-разному — одни добавляют первую точку в конец списка, а другие — нет. Количественные ограничения на число вершин довольно велики и покрывают практически все мыслимые потребности. По крайней мере многоугольник, имеющий 100 вершин, уверенно обрабатывается всеми ведущими браузерами. Есть ограничение, связанное с самим языком HTML, согласно которому список не может содержать более 1024 значений. Многоугольник вполне может быть невыпуклым.
5.4.5. Атрибуты HREF и NOHREF
Атрибуты HREF и NOHREF являются взаимоисключающими. Если не задан ни один из этих параметров, то считается, что для данной области не имеется ссылки. То же самое явно определяет атрибут NOHREF, не требующий значения. Атрибут HREF определяет адрес ссылки, который может записываться в абсолютной или относительной форме. Правила записи полностью совпадают с правилами записи ссылок в теге <А>.
Атрибут NOHREF полезно использовать для исключения части активной области. Пусть, например, необходимо создать активную область в виде кольца. Такой тип области не предусмотрен в списке возможных областей, однако он может быть реализован путем задания двух круговых областей. Для этого сначала следует задать область меньшего радиуса и указать в качестве параметра NOHREF. Далее нужно задать область большего радиуса с центром в той же точке и указать нужную ссылку. Тогда область внутри кольца, определенная двумя окружностями различного радиуса, будет иметь необходимую ссылку. Использование подхода, основанного на взаимном перекрытии областей, позволит строить области весьма разнообразной формы.
5.4.6. Атрибут TARGET
Атрибут TARGET употребляется при работе с фреймами. Его назначение — указать имя фрейма, в который будет размещен документ, загружаемый по данной ссылке. Более подробную информацию об использовании этого параметра можно получить из лекции, посвященной работе с фреймами.
5.4.7. Атрибут ALT
Атрибут ALT позволяет записать альтернативный текст для каждой из активных областей изображения. По существу этот текст будет играть лишь роль комментария для создателя документа. Если альтернативный текст, записанный для всего изображения (в теге <IMG>), служит для выдачи его на экран при работе с отключенной загрузкой изображений, то альтернативный текст для активных областей никогда на экране не появится.
На рисунке 7.2 приведен пример гиперкарты, состоящей из 5 прямоугольных областей.
6. Средства создания гиперкарт
Создание гиперкарт требует двух шагов: подготовки опорного изображения, на котором впоследствии будут заданы активные области, и разработки конфигурационных строк, описывающих геометрические параметры активных областей. Подготовка изображения, которое будет являться основой для карты-изображения, ничем не отличается от работы по подготовке обычных изображений, встраиваемых на Web-страницах. Для этого можно воспользоваться любым графическим редактором или использовать готовое изображение.
Рис. 6.2. Пример гиперкарты.
На втором шаге необходимо отметить активные области на изображении и сопоставить им соответствующие адреса ссылок. Подготовка файла конфигурации является наиболее трудным шагом в создании карт-изображений. В принципе возможен ручной способ задания границ активных областей на изображении. Например, при работе в графическом редакторе можно отмечать отдельные точки, записывать их координаты и затем создавать описания геометрических параметров выбранных областей. Однако такой подход крайне неудобен и громоздок.
Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять конфигурационные элементы, работая непосредственно с изображением на экране. Большинство программ представляют собой отдельные утилиты, работающие автономно и, по существу, являющиеся дополнением к HTML-редакторам. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. В первом случае типичным вариантом является совместная работа программы редактирования карты-изображения и какого-либо HTML-редактора или обычного текстового редактора. Если же программа позволяет сохранять конфигурационный файл на диске, то она может использоваться полностью автономно. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Если интерфейс программы покажется вам неудобным, можно отказаться от ее использования и выбрать другую.
Рассмотрим некоторые из существующих программ.
6.1. MapEdit
Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бутеллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ (Windows, MacOS. Как и для большинства программ, существовал ряд версий данной утилиты. На текущий момент последней доступной версией для Windows является версия 4.05 (декабрь 2007г.). Информацию о программе можно получить по адресу:
http://www.boutell.com/mapedit/
Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 1 Мб, и при этом обладает практически всеми необходимыми возможностями.
6.2. CoffeeCup Mapper
Эта утилита разработана компанией CoffeeCup Software, известной такими программами, как HTML Editor Pro и рядом FTP-клиентов. Работать с этой программой очень просто: запускаете Map Wizard, загружаете графическое изображение для будущей гиперкарты, определяете адрес, по которому браузер перейдет в случае нажатия на область, не имеющей значений координат, и вариант открытия окна (в этом же окне, в новом и т.д.). После появления файла в окне программы нужно выбрать тип области, которому соответствует своя пиктограмма на панели инструментов (прямоугольник, круг, многоугольник) и выделить область необходимого размера на заготовке. После выделения появится окно, в котором следует указать адрес ссылки, альтернативный текст и вариант открытия документа (здесь же, в виде нового документа и т.д.). Возможно параллельно просмотреть готовую или текущую КИ в установленном по умолчанию браузере. HTML-код созданной карты отображается в нижнем окне программы. CoffeeCup Mapper позволяет создавать КИ только в клиентском варианте.
Существует триальная версия программы (ограничение по времени — 15 дней). Получить информацию о программе можно по адресу: http://www.coffeecup.com/image-mapper/
6.3. HTML Map Designer
"HTML Map Designer" - простая утилита, которая поможет упростить создание гиперкарт, содержащих много ссылок в области картинки на web-страницах. Используя данную утилиту создать собственные гипер-изображения за несколько минут. Встроенный простой HTML редактор поможет редактировать и управлять полученным кодом HTML.
Особенности:
3. Поддержка BMP, JPEG и GIF форматов.
4. Вы можете корректировать интерфейс (цвета активных и пассивных областей).
5. Простой доступ к любой отмеченной области со справкой списка областей.
6. Отметки и события: ALT, TARGET...
Программа условно-бесплатная (ограничение по времени — 20 дней). Актуальная версия — 2.2. Получить информацию о программе можно по адресу: http://www.imagecure.com/index.html
В заключении хотелось бы отметить, что достаточно мощные с функциональной точки зрения средства разработки web-приложений, относящиеся к категории WYSIWYG редакторов (MS FrontPage, Macromedia Dreamweaver и др.) обладают встроенными возможностями создания гиперкарт которых более чем достаточно для решения большинства задач, описанных в рамках данной лекции.
Также встроенными возможностями по созданию гиперкарт обладают мощные растровые графические редакторы типа GIMP.
7. Задание для самостоятельной работы.
Все необходимые для выполнения задания графические объекты находятся в папке «ris_zad»
• C помощью программы Map Designer проделайте пример, приведенный в качестве иллюстраций в лекции №6 – рис. 6.2 (каждая из страниц к которым осуществляется переход должна быть создана предварительно).
• С помощью программы Map Designer в отдельном файле создайте графическое меню на основе изображения, находящегося в файле Menu.jpg (ссылки для соответствующих активных областей должны указывать на страницы сайта, созданного в рамках выполнения пункта задания к лекции 5).
• Замените созданным графическим меню гипертекстовые ссылки, расположенные в левой области каждой из страниц сайта, созданного в рамках выполнения пункта 2 задания к лекции 5).
Лекция 7. Формы в HTML.
1. Основы создания форм.
Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Любая форма характеризуется следующими параметрами.
• Элементы формы, которые представляют собой стандартные поля для ввода информации.
• Кнопку отправки данных формы на сервер (кнопка SUBMIT).
• Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.
Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом NAME тега <INPUT> или другим, допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки SUBMIT, происходит запуск обработчика формы, которая получает введенную в форме информацию, а дальше делает с ней то, что предполагал разработчик. В качестве обработчика формы обычно выступает CGI-программа, заданная атрибутом ACTION тега <FORM>. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки — PHP, Perl, С++.
Для указания браузеру где начинается и заканчивается форма, используется контейнер <FORM>. Между открывающим и закрывающим тегами <FORM> и </FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ может содержать несколько форм, но они не должны быть вложены одна в другую (рисунок 7.1).
Рис. 7.1. Добавление формы в документ
В данном примере показано добавление двух разных форм. При нажатии на кнопку SUBMIT данные текущей формы отправляются на сервер, а остальные формы на веб-странице никак не будут обработаны.
Каждая форма характеризуется некоторыми атрибутами, которые указываются в теге <FORM> и позволяют указать: имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики.
1.1. Атрибут ACTION
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер (рис. 7.2). В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии. После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.
Если атрибут ACTION отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
Рис 7.2. Указание обработчика формы
В качестве обработчика можно указать также адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию.
1.2. Атрибут METHOD
Метод сообщает серверу о цели запроса. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.
1.2.1. Метод GET
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.
1.2.2. Метод POST
Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д.
1.3. Атрибут TARGET
Атрибут TARGET употребляется при работе с фреймами. Его назначение — указать имя фрейма, в который будет размещен результат обработки формы (в виде HTML-документа). Более подробную информацию об использовании этого параметра можно получить из лекции, посвященной работе с фреймами.
2. Элементы форм
Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д.
2.1. Однострочное текстовое поле
Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.
<INPUT TYPE="text">
При создании текстового поля с помощью соответствующих атрибутов тега <INPUT> можно указывать следующие параметры:
Табл. 7.1.
Основные атрибуты однострочного текстового поля
Атрибут
Описание
SIZE
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.
MAXLENGTH
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля.
ID
Идентификатор поля, предназначеный для того, чтобы обработчик формы мог его идентифицировать.
NAME
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
VALUE
Начальный текст, отображаемый в поле.
Создание текстового поля с разными параметрами показано на рис. 7.3.
Рис. 8.3. Текстовое поле
2.2. Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. Синтаксис создания следующий.
<INPUT TYPE="password">
Атрибуты поля полностью аналогичны перечисленным для текстового поля. Создание поля для пароля показано на рисунке 7.4.
Пример 7.4. Поле для пароля
2.3. Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Синтаксис создания следующий.
<TEXTAREA>текст</TEXTAREA>
Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.
Допустимые атрибуты перечислены в табл. 7.2.
Табл. 7.2.
Атрибуты многострочного текста
Атрибут
Описание
COLS
Ширина поля в символах.
DISABLED
Блокирует доступ и изменение элемента.
ID
Идентификатор поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
NAME
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
READONLY
Устанавливает, что поле не может изменяться пользователем.
ROWS
Высота поля в строках текста.
WRAP
Параметры переноса строк.
Создание поля многострочного текста показано на рисунке 7.5.
Рис. 7.5. Многострочный текст
2.4. Поле со списком
Поле со списком, называемое раскрывающимся списком или ниспадающим меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.
Поле со списком создается следующим образом.
<SELECT>
<OPTION>Пункт 1</OPTION>
<OPTION>Пункт 2</OPTION>
<OPTION>Пункт 3</OPTION>
</select>
Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра SIZE тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.
2.4.1. Атрибуты тега <SELECT>
Рассмотрим атрибуты тега <SELECT>, с помощью которых можно изменять вид и представление списка:
• MULTIPLE. Наличие данного атрибута сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от использования атрибута SIZE. Если он отсутствует, то высота списка равна количеству пунктов, если значение SIZE меньше числа пунктов, то появляется вертикальная полоса прокрутки.
Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.
Рис. 7.6. Список множественного выбора
• ID определяет уникальный идентификатор элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
• SIZE устанавливает высоту списка. Если значение атрибута SIZE равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.
2.4.2. Атрибуты тега <OPTION>
Тег <OPTION> также имеет атрибуты, влияющие на вид списка, они представлены далее.
• SELECTED делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен атрибут MULTIPLE, то можно выделять более одного пункта.
• VALUE определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается атрибутом ID тега <SELECT>, а значение — атрибутом VALUE выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.
Создание списка показано на рис. 7.7.
Рис. 7.7. Использование списка
В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.
2.4.3. Группировка элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <OPTGROUP>. Он представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется Атрибут LABEL, как показано на рис. 7.8.
Рис. 7.8. Группирование элементов списка
2.5. Переключатели
Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
<INPUT TYPE="radio" NAME=”Primer”>
Возможные для переключателей атрибуты перечислены в табл. 7.3
Табл. 7.3.
Параметры переключателей
Атрибут
Описание
CHECKED
Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
NAME
Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. Атрибут является обязательным.
ID
Идентификатор группы переключателей по которому к ней можно обращаться из сценариев на обработку событий. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
VALUE
Задает, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
Создание группы переключателей показано на рис. 7.9.
Рис. 7.9. Создание переключателей
Заметим, что, атрибут NAME для всех переключателей обязателен и имеет одинаковое значение. Только в этом случае браузер будет понимать, что переключатели связаны между собой и помечать только один пункт из предложенных. Значение параметра VALUE же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
2.6. Флажки
Флажки используют, когда существует возможность выбора нескольких вариантов значения из предложенного списка.
Флажок создается следующим образом.
<INPUT TYPE="checkbox">
Атрибуты для флажков полностью аналогичны перечисленным для переключателей. Использование флажков показано на рис. 8.10.
Рис. 8.10. Создание флажков
2.7. Скрытое поле
Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель создания скрытых полей — в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.
Синтаксис создания скрытого поля.
<INPUT TYPE="hidden">
Возможные для скрытого поля атрибуты перечислены в табл. 7.4.
Табл. 7.4.
Атрибуты скрытого поля
Атрибут
Описание
ID
Идентификатор поля, предназначеный для того, чтобы обработчик формы мог его идентифицировать.
NAME
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
VALUE
Начальный текст, отображаемый в поле.
Пример использования скрытых полей приведен на рис. 7.11.
Рис. 7.11. Использование скрытого поля
В данном примере показано создание двух скрытых полей, одно из них носит имя «UserName» и получает значение Vasya, а второе именуется «password» со значением pupkin. В результате отправки формы программа может легко прочитать эти данные и использовать их по усмотрению разработчика.
2.8. Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. Этому событию чаще всего и ставят в соответствие выполнение сценариев, написанных на соответствующих языках программирования, если такие сценарии должны выполняться при отправке данных на сервер..
Кнопку на веб-странице можно создать двумя способами — с помощью тега <INPUT> и тега <BUTTON>.
<INPUT TYPE="button">
Параметры кнопки перечислены в табл. 7.5.
Табл. 7.5.
Параметры кнопок
Атрибут
Описание
NAME
Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
VALUE
Текст надписи на кнопке.
ID
Идентификатор кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
В отличие от тега <INPUT>, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы. Ниже показаны разные виды кнопок, полученные с помощью указанных тегов.
Рис. 7.12. Создание кнопок
Помимо кнопок общего назначения, в HTML можно создавать кнопки, которым уже заранее поставлены в соответствие жестко определенные действия: отправка данных на сервер или очистка формы.
2.8.1. Кнопка SUBMIT
Для отправки данных на сервер предназначена специальная кнопка SUBMIT. Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром ACTION тега <FORM>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.
Синтаксис создания кнопки SUBMIT зависит от используемого тега <INPUT> или <BUTTON>.
<INPUT TYPE="submit">
<BUTTON TYPE="submit">Надпись на кнопке</button>
Параметры такие же, что и у обычных кнопок.
Рис. 7.13. Кнопка для отправки данных на сервер
Отметим также, что параметр NAME для этого типа кнопки может быть опущен. Для кнопки, созданной с помощью тега <INPUT> можно также не указывать атрибут VALUE: на кнопке автоматически появится надпись «Подача запроса» для русской версии браузера Internet Explorer, «Отправить запрос» для русской версии Firefox.
2.8.2. Кнопка RESET
При нажатии на кнопку RESET, данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
<INPUT TYPE="reset">
<BUTTON TYPE="reset">Надпись на кнопке</button>
В примере на рис. 7.14 показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега <INPUT>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».
Рис. 7.14. Кнопка для очистки формы
Если на кнопке, созданной с помощью тега <INPUT> опустить атрибут VALUE, на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».
2.8.3. Кнопка с изображением
Кнопка с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром ACTION тега <FORM>.
Изображение в форме создается следующим образом.
<INPUT TYPE="image">
Параметры перечислены в табл. 7.6.
Табл. 7.6.
Параметры поля с изображением
Параметр
Описание
ALIGN
Определяет выравнивание изображения.
ALT
Альтернативный текст для кнопки с изображением.
BORDER
Толщина рамки вокруг изображения в пикселах.
NAME
Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы.
SRC
URL-адрес графического файла, изображение которого должно использоваться в качестве фона
На рис. 7.15 показано использование поля с изображением.
Рис. 7.15. Кнопка с изображением
2.9. Поле отправки файла
Для того чтобы можно было отправить на сервер файл, используется специальное поле. Такой элемент формы отображается как текстовое поле, рядом с которой располагается кнопка Обзор. При нажатии на эту кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
<input type="file" параметры>
Атрибуты для элемента управления перечислены в табл. 7.7.
Табл. 7.7.
Атрибуты поля для отправки файла
Атрибут
Описание
SIZE
Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
MAXLENGTH
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле.
NAME
Имя поля, используется для его идентификации обработчиком формы.
ID
Идентификатор элемента управления для обращения к нему из скриптов или для получения значения обработчиком формы.
Создание поля для отправки файла показано на рис. 7.16.
Рис. 7.16. Создание поля для отправки файла
Результат данного примера показан ниже.
Параметр формы enctype со значением multipart/form-data нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу.
Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью метода POST, как показано в примере.
2.10. Группировка элементов формы.
При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (рис 7.17).
Рис. 7.17. Использование тега <FIELDSET>
Чтобы добавить к рамке, визуально группирующей элементы, специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, вроде <B>, <I>, <SUP>, <SUB>, а также стили.
2.11. Переход между полями с помощью табуляции
При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится утомительно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша <Tab>, которая позволяет быстро переключать фокус с одного поля на другое. Атрибут TABINDEX определяет последовательность перехода между полями при нажатии на <Tab>.
2.12. Ограничение доступа к элементам формы.
У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).
Блокирование элемента не позволяет вообще производить с ним каких-либо действий. Максимум на что будет способен пользователь (да и то не во всех браузерах) - выделять и копировать содержимое заблокированного текстового поля. Заблокированное поле помечается обычно серым цветом
Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь же не должен в подобном случае иметь доступ к полю, поэтому оно блокируется.
Установка блокирования соответствующего элемента управления осуществляется с помощью параметра DISABLED, который можно указывать для любого тега, описывающего элемент управления, отвечающий за ввод данных.
Поля формы можно не только блокировать, но и делать их только для чтения. В этом случае доступ к ним сохраняется, но изменять значения, заданные по умолчанию, нельзя. Разумеется, речь идет только о текстовых полях, где требуется вводить текст. Выделять и копировать его можно, но изменить не получится. Для установки режима «только для чтения» используется параметр readonly.
3. Задание для самостоятельной работы.
1. Проделайте все примеры, приведенные в качестве иллюстраций в лекции №7 (рис. 7.1 – 7.17). Каждый пример должен быть реализован в виде отдельной страницы.
2. По приведенному ниже образцу создайте страницу с формой регистрации.
Обратите внимание, что выравнивание элементов управления и подписей к ним лучше всего проводить с помощью таблицы.
Для раскрывающегося списка «Город» используйте следующие варианты значений: Арзамас, Дзержинск, Кстово, Нижний Новгород.
• По приведенному ниже образцу создайте форму авторизации. Обратите внимание, что при заполнении поля «Пароль» формы вводимый текст должен заменяться символом «*».
• Свяжите страницы между собой с помощью гиперссылки, поставленной в соответствие слову «зарегистрируйтесь» на странице с формой авторизации.
Лекция 8. Фреймы
Фреймы позволяют разбивать окно просмотра браузера на несколько прямоугольных областей, располагающихся рядом друг с другом. В каждую из таких областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фрэймами можно организовать взаимодействие заключающиеся в том, что выбор ссылки в одном из фреймов может привести к загрузке документа в другой фрейм. При создании страниц с фреймами разрабатываются несколько HTML-файлов. Документы разкладки (layout), используются для создания структуры Web-страниц, то есть разделения их на несколько областей. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
1. Сфера применения фреймов
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
• при необходимости организовать управление загрузкой документов в одну из областей окна просмотра браузера при работе в другой области;
• для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других областей экрана.
• для представления информации, которую удобно расположить в нескольких смежных областях окна, каждая из которых может просматриваться независимо.
Приведённый список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер.
2. Создание Web-страниц с фреймами
Итак, как же создать Web-страницу с фреймами? Сначала необходимо продумать разбиение экрана на области. Вторым этапом является подготовка HTML-файлов для каждой области. Они создаются по тем же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой будет демонстрироваться каждый из них.
2.1. Элемент <FRAMESET>
Фреймы определяются в структуре <FRAMESET> , которая используется для страниц, содержащих фреймы, вместо раздела <BODY> обычного документа. Web-страницы составленные из фреймов, не могут содержать раздел <BODY> в своём HTML-коде. В свою очередь, страницы с разделом <BODY> не могут использовать фреймы.
Контейнер из тегов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только теги <FRAME> и вложенные тэги <FRAMESET> .
Тэг <FRAMESET> имеет два параметра: rows и cols . Горизонтальное деление экрана задаётся при помощи атрибута rows , а вертикальное - при помощи атрибута cols . Значение атрибута могут быть выражены в пикселах или процентах. Кроме того используется симвод *, для обозначения оставшейся части экрана.
Приведём несколько примеров:
cols= 50%, 50%
деление области просмотра по вертикали пополам (принцип программы Norton Commander);
rows=150, 30%, *
для верхней горизонтальной области отведенно 150 пикселов, для средней - 30% доступного пространства, а для нижней всё что остаётся;
cols=*, 4*
стиль для любителей головоломок, правая вертикальная область в четыре раза шире левой; эту формулу можно записать так: cols=20%, 80%
2.2. Элемент <FRAME>
Элемент разметки <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тегов <FRAMESET> и </FRAMESET> . Этот контейнер не имеет завершающего тега. Всё определение одиночного фрейма выполняется одной строчкой HTML-кода.
Тег <FRAME> имеет шесть атрибутов: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING И NORESIZE.
На практике в теге <FRAME> редко используются одновременно все атрибуты. Наиболее важный атрибут - SRC (сокращение от слова source). Значение этого атрибута определяет URL-адрес документа, который будет загружён изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:
<FRAME src="sample.htm">
Разумеется, в качестве значения SRC может быть задан любой допустимый URL-адрес.
Атрибут NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задаётся из другого фрейма, располагающегося на той же самой странице. Например:
<FRAME src="sample.htm" name="frame_1">
Такая запись создаёт фрейм с именем "frame_1", на который может быть выполнена ссылка. Например:
<A href="other.htm" target="frame_1"> Кликните здесь для загрузки документа other.htm во фрейм с именем frame_1 </a>
Обратите внимание на атрибут TARGET , который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.
Атрибуты MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Например:
<FRAME src="sample.htm" marginwidth="5" marginheight="7">
Данный фрейм имеет поля сверху и снизу по 5 пикселей, а слева и справа по 7 пикселей. Не забудьте, что здесь идёт речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.
Для фреймов будут автоматически создаваться и отображаться полосы прокрутки, если содержимое фрейма не помещается полностью в отведённом пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется атрибут SCROLLING . Форма записи:
<FRAME src="sample.htm" scrolling="yes|no|auto">
Атрибут SCROLLING может принимать три значения: yes , no или auto . Значение auto действует также, как и в случае отсутствия атрибута. Значение yes вызывает появление полос прокрутки вне зависимости от необходимости этого, а no - запрещает их появление.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамки фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize . Этот параметр не требует никаких значений. Естественно, когда задан параметр noresize для одного из фреймов, то размер любого из смежных фреймов также не сможет быть изменён.
2.3. Элемент <NOFRAMES>
Этот элемент используется, чтобы предусмотреть ситуацию, когда браузер не поддерживает фреймы. В этом случае нужно вывести на экран предупреждающее сообщение или адресовать клиента к другой странице. Фрагмент кода может быть записан следующим образом:
<NOFRAMES>
<P> Для просмотра этой страницы необходим, браузер
поддерживающий фреймы </p>
Вы можете просмотреть
<A href="без_фреймов.htm"> упрощенную версию </a> страницы

Разумеется, браузеры поддерживающие фреймы не станут воспроизводить этот код.
Пример страницы с фреймами приведен на рис. 8.1. Обратите внимание на логику вложения фреймовой структуры, состоящей из двух вертикальных фреймов, внутрь среднего фрейма фреймовой структуры, состоящей из трех горизонтальных фреймов.
3. Задание для самостоятельной работы.
C помощью системы фреймов создайте сайт структуры, аналогичной предложенной в пункте 2 задания к лекции 5.
Рис. 8.1. Пример страницы с фреймами
Лекция 9. Введение в CSS.
1. Понятие CSS
CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.
Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформления текста, ссылок, изображений и других элементов.
Использование при верстке HTML-документа CSS дает следующие преимущества:
• Разделение оформления и содержания. Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задается через стили. При подобном разделении формирование дизайна и верстка сайта могут вестись параллельно.
• Единое оформление документов. Сайт это не просто набор связанных между собой документов, но и единое расположение основных блоков и их оформление. Применение единообразного оформления заголовков, основного текста и других элементов создает преемственность между страницами и облегчает пользователям работу с сайтом и его восприятие в целом. Разработчикам же использование стилей существенно упрощает проектирование дизайна.
• Централизованное хранение. Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Благодаря этому удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.
• Расширенные возможности. В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.
• Быстрая работа. При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша1 браузера. За счет кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.
2. Подключение CSS
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим способы подключения CSS.
2.1. Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в следующем примере.









Заголовок
Текст


Значения атрибутов тега  — rel и type остаются неизменными, как показано в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега  приведено в следующем примере:
H1 {
color: navy;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P {
padding-left: 20px;
}
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
2.2. Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера 


Hello, world!


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







Заголовок


В данном примере стиль тега 
 задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.
3. Базовый синтаксис
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.
Селектор { свойство1: значение; свойство2: значение; ... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы и классы, они подробно описаны далее. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в следующем примере показаны две разновидности оформления селекторов и их правил:








Заголовок 1
Заголовок 2


В данном примере свойства селектора H1 записаны в одну строку, а для селектора H2 каждый параметр находится на отдельной строке. Во втором случае легче отыскивать параметры и править их по необходимости, но при этом незначительно возрастает объем данных за счет активного использования пробелов и переносов строк.
Отметим, что имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например — terminator4, Titanic2, extra.
4. Селекторы тегов
В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, оформление которого будет переопределено, заглавными или прописными символами не имеет значения. Внутри фигурных скобок пишется свойство CSS, а после двоеточия — его значение. Набор параметров разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько:








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


В данном примере изменяется цвет текста и выравнивание текста параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера 
.
Следует понимать, что стиль можно добавить только для тегов, которые непосредственно отображаются в контейнере .
5. Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса":








При работе на вычислительной технике необходимо сесть
так, чтобы руки с предплечьями образовывали прямой угол, глаза
поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.


Результат данного примера показан на рис. 9.1.
Рис. 9.1. Вид текста, оформленного с помощью стилей
Первый абзац выровнен по ширине с текстом черного цвета, а следующий, к которому применен класс cite — написан курсивом синего цвета.
Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию, при этом имя должно всегда начинаться с символа. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи, класс можно применять к любому тегу:








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


Результат применения селектора с именем cite к тегу  показан на рис. 9.2.
Рис. 9.2. Вид тега , оформленного с помощью стилей
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги  и 
. В примере 6.3 показано изменение стиля первой буквы предложения путем использования класса совместно с тегом .








Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.


Результат данного примера показан на рис. 9.3.
Рис. 9.3. Результат использования классов
6. Идентификаторы
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 7.1). Символ решетки при этом уже не указывается.









Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.



В данном примере определяется стиль тега 
, для которого указан селектор help через параметр id (рис. 9.4).
Рис. 9.4. Результат применения идентификатора
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В следующем примере показано использование идентификатора применительно к тегу 
.








Обычный параграф
Параграф необычный


Результат данного примера показан на рис. 9.5.
Рис. 9.5. Вид параграфов после применения стиля
В данном примере вводится стиль для тега 
 и для такого же тега, но с указанием идентификатора «opa».
7. Правила создания стиля
При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным:
• Пишите все правила для каждого селектора в одном месте. Допускается для каждого селектора добавлять каждый стилевой параметр и его значение по отдельности, как это показано в следующем примере:
TD { background: olive; }
TD { color: white; }
TD { border: 1px solid black; }
Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите аргументы для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид:
TD {
background: olive;
color: white;
border: 1px solid black;
}
Форма написания — в одну строку или несколько — зависит от воли автора. Заметим только что, когда каждый параметр занимает отдельную строку, проще отыскивать взглядом нужное значение. Соответственно, быстрее и удобнее происходит редактирование кода CSS.
• Имеет приоритет значение, указанное в коде ниже. Если для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже:
P { color: green; }
P { color: red; }
В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.
На самом деле такой записи лучше вообще избегать и удалять повторяющиеся параметры селекторов. Но подобное может произойти не явно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.
• Начинайте с селекторов верхнего уровня. Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY, как показано в следующем примере.
BODY {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта */
font-size: 110%; /* Размер шрифта */
}
Наследование свойств позволяет не повторять многократно одни и те же параметры, если они заданы для селекторов верхнего уровня. Только учтите, что не все атрибуты наследуются и к некоторым из них вроде border, все же приходится обращаться несколько раз.
• Группируйте селекторы с одинаковыми параметрами и значениями. Достоинство и удобство группирования состоит в применении набора параметров сразу к нескольким селекторам одновременно. Так, в следующем примере показано добавление одинаковых атрибутов для трех разных идентификаторов. Но поскольку для них требуется различный цвет фона, то он устанавливается уже ниже.
#col1, #col2, #col3 {
font-family: Arial, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 90%; /* Размер шрифта */
font-weight: bold; /* Нормальное начертание */
color: white; /* Цвет текста */
}
/* Цвет фона для каждого слоя */
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }
• Используйте идентификаторы и классы. Классы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д. Если тег перед именем класса не установлен, то он может добавлять к любому тегу:
.new {
... /* Этот стиль можно использовать с любыми тегами */
}
P.new {
... /* Этот стиль работает только для тега 
 */
}
Класс new в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается.
• Применяйте универсальные стилевые параметры. Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).
Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны. Через padding также можно задать разные значения сверху, справа, снизу и слева. В следующем примере показано использование универсального стилевого атрибута margin.
P {
margin-top: 10px;
margin-right: 30px;
margin-bottom: 5px;
margin-left: 0;
}
P {
margin: 10px 30px 5px 0;
}
В данном примере приведены две записи, дающие одинаковый результат, но запись с margin выглядит нагляднее и короче.
8. Основы CSS-верстки. Создание «резинового» шаблона.
8.1. Создание макета из одной колонки
Попробуем создать макет страницы, состоящий всего из одной колонки и сделать эту колонку «резиновой».
body {
  margin-left:20%;
  margin-right:20%;
}
Мы задали значения левого и правого полей элемента BODY в процентах, что позволяет содержимому занимать всю ширину окна браузера (за исключением полей естественно) и располагаться при этом точно в центре.
Если мы хотим задать нашей колонке фиксированную ширину- поступим вот следующим образом:
body {
  width:600px;
}
При этом колонка будет выровнена по левому краю окна браузера. И если нам необходимо вновь отцентрировать ее, то без дополнительного блока не обойтись.

... содержимое блока ...

и далее вот такой css код:
body {
  width:600px;
  padding-left:50%;
}
#content {
  width:600px;
  margin-left:-300px;
}
Чтобы понять суть этого приема, надо хорошо понимать основы модели визуального форматирования. В частности точно представлять, из каких именно величин складывается общая ширина (высота) блока. При этом еще необходимо учитывать различия в реализации блочной модели конкретных браузеров. Особенно того, названИЕкоторого Вы и так знаете.
В элементе body, который имеет ширину 600px мы задали левый отступ в 50%, добавив таким образом к ширине элемента половину ширины окна браузера. При этом левый край блока content расположился бы точно по центру окна, но мы предусмотрительно сдвигаем его ровно на половину ширины, на 300px влево, задавая отрицательное значение левого поля.
Теперь блок content расположен точно в центре экрана и ширина его фиксирована. Этот прием работает во всех популярных браузерах.
8.2. Макет из двух колонок
Попробуем теперь создать макет страницы с двумя колонками, изменяющими свою ширину в зависимости от ширины окна браузера, т.е. «резиновый» макет. И сначала создадим HTML-разметку, форматировать которую будем с помощью стилевых таблиц.

... шапка страницы ...


... основное содержимое страницы ...


... колонка меню ...


... подвал ...

А теперь css код, который сформирует нужное нам визуальное представление:
#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
margin-left:67%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}
Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. Справа.
Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.
Разный цвет фона блоков задан лишь для того, чтобы Вам легче было наблюдать границы блоков, если Вы вдруг захотите испытать этот пример.
И наконец в блоке footer используется свойство clear для того, чтобы обеспечить его отображение гарантировано ниже любого элемента из «плавающей модели».
Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.
Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Для этого мы используем свойство margin-left:67%.
8.3. Макет из трех колонок
Следующий шаг – создание «резинового» макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать.

... шапка страницы ...


... колонка меню ...


... основное содержимое страницы ...


... колонка меню ...


... подвал ...

и отформатируем ее с помощью следующей таблицы стилей:
#content {
  float:left;
  width:50%;
  background-color:#CCC;
}
#sidebar {
  float:left;
  width:30%;
  background-color:#FFC;
}
#otherbar {
  float:left;
  width:20%;
  background-color:#FFC;
}
#header {
  background-color:#FCF;
  text-align:center;
}
#footer {
  clear:both;
  text-align:center;
  background-color:#CFF;
}
В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.
Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.
9. Задание для самостоятельной работы
1. Проделать описанные в текущей лекции примеры
2. C помощью описанной в данной лекции технологии «резиновых» макетов создайте сайт структуры, аналогичной предложенной в пункте 2 задания к лекции 5.
                            
        
    

    





    
        
        
        

            
                
                
                Прикрепить лекцию
            
            
                Отправить
                
            
        

        

            

                
                
                    
                    Принять пользовательское соглашение
                
            
            

                Согласен с
                
                    политикой конфиденциальности
                
                и
                
                    пользовательским соглашением
                
            
        
    

    


            

    

        
        
            Программирование
        
    
    

        Получи ответ по «Разработка web-приложений» от ИИ за 2 минуты
    

    
        Задать вопрос