Pers.narod.ru. Обучение. Основы HTML (2003 г.) |
Основы HTML |
Щелкните по заголовку темы для перехода к ней: |
В электронном учебнике изложены основы формата разметки гипертекста HTML. При написании учебника не преследовалась цель дать исчерпывающее описание HTML, он достаточно краток и емок и рассчитан, прежде всего, на понимание основных конструкций и логики построения гипертекста. Учебник разбит на темы, в конце большинства тем приведены задания. Предполагается, что читатель знаком с работой в Windows и имеет представление об основных сервисах и возможностях Интернет. Если это не так, почитать электронный учебник "Основы работы в Интернет" Вы можете по адресу http://pers.narod.ru/study/inet/inet.html. Вы можете свободно копировать этот документ при условии сохранения его
без изменений. Авторские права на документ принадлежат мне).
Буду благодарен за Ваши письма, предложения и пожелания.
|
"Всемирная паутина" World Wide Web на сегодня является ведущим сервисом Интернет, постепенно вытесняющим или включающим в себя большинство других сетевых служб. Документы, составляющие содержание WWW, называются Web-страницами, а формат, с помощью которого подготавливаются Web-страницы, называется HTML (HyperText Markup Language) или “язык разметки гипертекста”. Под гипертекстом же в простейшем случае понимается текст, позволяющий не только последовательное прочтение, то есть, указателями-ссылками связанный с другими текстами.
HTML представляет собой достаточно простой набор команд, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу отдельно подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа-браузер на Вашем компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернет. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
С точки зрения пользователя Windows, Web-страница – это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске Вашей машины.
Стандартный документ Интернет
представляет собой текстовый файл, размеченный
средствами формата HTML. Элемент разметки или
оформления, входящий в формат HTML, называется таг.
Любой таг имеет общий вид
<ИМЯ>область действия тага</ИМЯ>
и действует на все, что расположено между
треугольными скобками. Почти все таги (кроме <P>, <BR>, <IMG>)
должны закрываться, причем закрытие тага
отличается от открытия только наличием символа
'/'. Таги могут вкладываться друг в друга
иерархически, но без пересечений, то есть
допустимо вложение вида
<ТАГ1><ТАГ2></ТАГ2></ТАГ1>, но не
<ТАГ1><ТАГ2></ТАГ1></ТАГ2>. Действие
вложенных тагов объединяется, то есть, если
внутрь тага, создающего жирное начертание
шрифта, вложен таг курсива, в результате
получится жирный курсив. Внутри
открывающей части таг может содержать опции,
уточняющие его действие и имеющие вид
имя="значение".
HTML довольно "демократичен", неправильный таг или неправильное вложение тагов обычно не приводят к "зависаниям" браузера или каким-либо сообщениям об ошибках, хотя, разумеется, могут вызвать неправильное форматирование документа. Названия тагов нечувствительны к рЕгИсТрУ символов.
Создавать HTML-документы можно как в простом текстовом редакторе, например, в Блокноте Windows, так и с помощью специализированных программ, таких как Microsoft Frontpage. Для несложных документов подойдет и Microsoft Word-97 и выше - если он установлен полностью, в нем поддерживается возможность чтения и сохранения HTML-файлов.
HTML-файл имеет следующую общую структуру:
<HTML>
<HEAD>
<Мета-таги>
<Функции скриптов>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Основная часть документа
</BODY>
</HTML>
Обязательным является только открывающий таг <HTML>. В таге <HEAD> помещается заголовочная информация. Общие сведения о документе размещаются во вложенных тагах <META>. Перечислим основные из них:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
В настоящее время широко распространены сразу несколько способов кодирования национальных алфавитов. Таг, указанный выше, управляет кодировкой документа. Обычно используется одна из двух основных русскоязычных кодировок:
Для современных браузеров, поддерживающих несколько кодировок, указание тага кодировки необязательно. Остальные мета-таги:
<meta name="Generator" content="Имя программы,
сгенерировавшей документ">
<meta name="Description" content="Краткое описание
содержания страницы">
<meta name="Keywords" content="ключевые слова
документа, разделенные запятыми">
<meta name="owner" content="электронный почтовый
адрес владельца страницы">
<meta name="category" content="категория страницы,
например, home site">
Мета-таги Description и Keywords используются поисковыми машинами и настоятельно рекомендуются к использованию на любой web-странице, предназначенной для размещения в Интернет. Существуют и другие мета-таги, используемые, например, для автоматической переадресации документа, если web-страница "переехала" на другой сервер:
<meta http-equiv="Refresh" content="10" URL="новый адрес страницы">
Браузеры поймут эту запись как инструкцию ожидать 10 секунд, а затем загрузить новый документ.
Функции скриптов вложены в таг следующего вида:
<SCRIPT LANGUAGE="JavaScript">
<!--
текст на языке JavaScript
// -->
</SCRIPT>
или аналогичный таг для языка Visual Basic Script.
В таге <TITLE>, также вложенном в таг <HEAD>помещается текст, отображаемый в заголовке окна браузера. Основной текст документа размещен внутри тага <BODY>. Таг <BODY> имеет множество опций, с основными из которых мы познакомимся позже.
Несмотря на то, что существует утвержденный стандарт языка HTML, различные браузеры могут интерпретировать одни и те же таги по-разному. Это связано как с различным пониманием стандартов, так и с конкуренцией браузеров. Поскольку 99% браузеров в мире - это Internet Explorer и Netscape Navigator, Web-мастер обычно стремится создать документ, одинаково выглядящий в этих двух программах. В этом учебнике мы рассматриваем только небольшую часть тагов - и только те, которые интерпретируются одинаково браузерами Internet Explorer и Netscape Navigator.
Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит таг <P>, закрывать который не обязательно. В таге <P> можно указать способ выравнивания текста абзаца в виде <P ALIGN="опция_выравнивания">. Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY (последний - только в новых браузерах). Точно так же можно выравнивать и заголовки в тагах <H1>,...,<H6> (см. табл. 2).
При "ручном" наборе текста для HTML-документа следует избегать переносов слов по слогам и выравнивания текста с помощью пробелов или табуляций. Все форматирование в HTML осуществляется через таги, а переносы строк и количество символов в строке не имеют значения.
Для принудительного разрыва строки внутри абзаца служит таг <BR>. Если Вы хотите, напротив, запретить переносы в какой-то части текста, следует заключить ее в таг <NOBR>...</NOBR>.
Некоторые символы являются для HTML служебными и при "ручном" наборе HTML-документа вместо них следует использовать сочетания символов из таблицы 1:
Символ | Обозначение в HTML |
< | < |
> | > |
& | & |
" | " |
Таблица 1 Служебные символы HTML
Если нужно вставить в текст один или несколько неизменяемых пробелов, для этого используется сочетание символов
Для форматирования текста абзацев используйте таги, приведенные в таблице 2:
Таг | Пояснение | Образец |
<H1>...</H1> | Заголовок 1 уровня | Заголовок1 |
<H2>...</H2> | Заголовок 2 уровня | Заголовок2 |
<H3>...</H3> | Заголовок 3 уровня | Заголовок3 |
<H4>...</H4> | Заголовок 4 уровня | Заголовок4 |
<H5>...</H5> | Заголовок 5 уровня | Заголовок5 |
<H6>...</H6> | Заголовок 6 уровня | Заголовок6 |
<BIG>...</BIG> | Большой | Большой |
<SMALL>...</SMALL> | Маленький | Маленький |
<SUP>...</SUP> | Верхний индекс | Верхний индекс |
<SUB>...</SUB> | Нижний индекс | Нижний индекс |
<B>...</B> | Жирный | Жирный |
<I>...</I> | Курсив | Курсив |
<U>...</U> | Подчеркнутый | Подчеркнутый |
<S>...</S> | Перечеркнутый |
Таблица 2 Некоторые таги форматирования текста
Кроме указанных выше элементов физического форматирования, существуют таги логического форматирования, служащие, например, для выделения цитат, важных фрагментов текста, имен переменных и т.д. Информацию о них можно найти в справочной литературе.
Размерами и начертаниями шрифта можно
управлять также с помощью тага
<FONT FACE="Шрифт" SIZE="Размер">
где "Шрифт" - имя шрифта Windows, а размер
указывается цифрой от 1 до 7, например, этот текст отформатирован тагом <FONT
FACE="Arial" SIZE="5">. Размер шрифта по
умолчанию обычно равен 3. Разумеется, для
корректного отображения текста каким-либо
шрифтом он должен быть установлен на машине
пользователя, поэтому следует избегать
"экзотических" шрифтов. По умолчанию
браузеры поддерживают один стандартный
масштабируемый шрифт (обычно это Times
New Roman) и один шрифт для отображения
предварительно отформатированного текста в таге
<PRE> (обычно Courier New).
Опция face позволяет также указать несколько
шрифтов через запятую - в этом случае для
форматирования текста будет использован первый
подходящий шрифт из списка:
<font face="Verdana, Arial, Helvetica">
Для отображения предварительно отформатированного текста, с сохранением переносов строк, табуляций и интервалов, используется таг <PRE width="N">, где N - необязательная опция, указывающая желаемый размер строки в символах. Если нужна гарантия, что все символы отформатированного текста будут иметь одинаковую ширину, следует использовать таг <TT>. Примеры:
Текст в таге TT
Текст в таге PRE
Для создания в документе текстового раздела используется таг <div>...</div>, с опцией align, указывающей способ выравнивания текста в разделе (так же, как в таге <p>). Указанный в таге <div> способ выравнивания текста используется по умолчанию во всех абзацах этого раздела, если в абзаце в явном виде не указан другой способ выравнивания. Для размещения части документа по центру окна браузера можно также использовать таг <center>...</center>
Отделить часть текста горизонтальной чертой можно с помощью тага <HR>. Опция ALIGN со значением LEFT, RIGHT или CENTER определяет выравнивание черты на странице, опция SIZE="размер" - толщину линии в пикселах, а опция WIDTH="ширина" - ширину, указанную в пикселах (например, 600) или процентах (100%). Если указана опция NOSHADE, линия создается без трехмерных эффектов. Пример:
Эта черта создана тагом вида <HR ALIGN="CENTER" SIZE="1" WIDTH="50%">
С помощью Блокнота Windows создайте и сохраните в личной папке HTML-файл с именем index.html и заголовком, совпадающим с Вашей фамилией. В тексте файла создайте 2 заголовка первого уровня "Мои анкетные данные" и "Мое хобби".
В разделах "Мои анкетные данные" и "Мое хобби" добавьте по 2-3 абзаца осмысленного текста, выровненных по ширине окна. Внутри текста используйте выделение слов курсивом, жирным и подчеркиванием.
Добавьте в раздел "Мое хобби" заголовок второго уровня "Программирование" и поместите под ним небольшой листинг программы на изучаемом Вами языке программирования. Позаботьтесь о выводе листинга программы с сохранением всех отступов, интервалов и переносов строк.
К нижней части документа добавьте
неразрываемую строку, набранную шрифтом Arial с
использованием размера 4:
<p> - это таг форматирования абзаца. Его
необязательно закрывать, но можно выровнять
абзацы с помощью опции align=left | right | center | justify
Добавьте к документу подпись, отформатированную как в примере:
Студент группы 110 Иванов А.П.
Добавьте в заголовок документа мета-таги Description и Keywords.
Просмотрите полученный файл с помощью браузеров Internet Explorer и Netscape Navigator. Обратите внимание на изменение форматирования документа при изменениях размера окна и размера шрифтов браузера.
Гиперссылками (или просто ссылками) называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети.
Гиперссылка состоит из "внутренней" части, то есть, адреса документа, на который она ссылается, и "внешней" части, видимой на экране и называемой якорем гиперссылки. Якорь гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель “мыши” к ссылке, он примет форму ладони с вытянутым указательным пальцем – и это самый надежный способ ее определить. При этом, в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка.
Кроме того, практически всегда текстовые ссылки выделены другим цветом и очень часто подчеркнуты. Графические ссылки часто заключены в рамку того же цвета, которым выделяются текстовые ссылки. По умолчанию это синий цвет, но каждая Web-страница может использовать свое собственное оформление. Цвет ссылок, которые уже выбирались пользователем, обычно отличается от цвета непосещенных ссылок и выглядит более “бледным” (по умолчанию – фиолетовый).
Для создания гиперссылки служит таг
вида
<A HREF="адрес" TARGET="окно">текст
ссылки</A>
Об адресах документов сказано ниже. Опция TARGET
может быть не указана, в этом случае документ
открывается в текущем окне браузера, или указана
в виде TARGET="_BLANK">, тогда документ
открывается в новом окне. Текст ссылки внутри
тага <A> может быть любым. Точно так же в таг
<A> можно поместить и изображение.
Чтобы научиться создавать ссылки, нужно иметь представление о том, как адресуются документы в Сети.
Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать “урл”). URL может состоять из следующих частей:
Протокол | Пояснение |
http:// | HTTP – основной протокол, обеспечивающий доступ к Web-страницам. Используется по умолчанию, поэтому часто не указывается в URL. |
ftp:// | Протокол передачи файлов FTP, позволяющий при помощи программы FTP-клиента обмениваться файлами с удаленным компьютером. |
mailto: | Доступ к электронной почте. Вслед за mailto: указывается адрес электронной почты, имеющий общий вид имя_пользователя@адрес_почтового_домена. |
file:// | Указывается вместо имени протокола при обращении к Web-странице, расположенной на локальной машине. |
Таблица 3 Основные префиксы протоколов в URL
В целях совместимости имена файлов, размещаемых в Интернет, обычно строятся по правилам DOS - то есть, состоят из латинских букв, цифр и символа подчеркивания и имеют длину не более 8 символов. С другой стороны, web-страницам принято давать раширение *.html, а не *.htm.
Следует также помнить, что URL чувствителен к регистру символов, то есть, http://www.TNT.ru и http://www.tnt.ru – это не один и тот же адрес.
Например, один из файлов сайта pers.narod.ru имеет полный URL http://pers.narod.ru/text/eten_x500plus.html, из чего можно заключить, что он находится на сервере pers.narod.ru в папке с именем text.
Если в URL не указано имя html-файла, это означает, что документ имеет имя по умолчанию, которое может назначаться при администрировании сервера. Чаще всего это имя index.html, так что URL http://www.host.ru может означать то же самое, что http://www.host.ru/index.html.
Ссылка, в которой указан полный URL документа, называется абсолютной. Абсолютные ссылки используются для связи с внешними ресурсами Интернет, URL которых известен нам и не меняется.
Относительная ссылка ссылается на
документ, опуская общую адресную часть. Например,
если из документа index.html нужно сослаться на
документ test.html, находящийся в той же папке, это
можно сделать ссылкой вида
<a href="test.html">документ test.html</a>
При использовании относительной ссылки можно
ссылаться на папки, которые являются как
вложенными, так и родительскими по отношению к
папке, в которой расположен исходный документ.
Например, ссылка на рисунок с именем my.jpg,
находящийся во вложенной папке images может иметь
вид
<a href="images/my.jpg">посмотрите рисунок</a>
Внутренние ссылки предназначены для навигации в пределах документа. Они имеют вид <a href="#закладка">якорь ссылки</a>
Для создания закладки служит таг вида <a name="закладка">якорь закладки</a>. Имена закладок должны быть уникальными в пределах документа.
Например, если первое слово документа
заключить в таг <a name="start">...</a>, в
нижней части документа можно разместить ссылку
вида
<a href="#start">к началу страницы...</a>
При разработке собственного web-сайта для перехода между его страницами используются, как правило, относительные ссылки, что позволяет просматривать сайт на локальной машине, не внося в него изменений, а также при необходимости легко переместить сайт на другой сервер.
Посмотрите примеры различных видов ссылок в таблице 4:
Обычная ссылка | Это обычная гипертекстовая ссылка. Щелчок по ней вызовет переход к новому документу (в данном случае - к главной странице нашего сайта). |
Почтовая ссылка | Это ссылка на почтовый адрес. Щелчок по ней приведет к запуску окна создания сообщения, которое можно отправить по указанному в ссылке адресу. Если же ни одна почтовая программа на машине не установлена, браузер сообщит об этом в окне диалога. Опция target при этом не указывается. |
FTP-ссылка | Это ссылка на FTP-сервер, содержащий файловые архивы. При щелчке по ней браузер перейдет в режим FTP-клиента и покажет содержимое головного каталога архива. При этом, панели инструментов браузера изменятся. Если же на машине установлена внешняя программа поддержки FTP, она будет запущена. |
Ссылка на файл | Это ссылка на архивный файл типа *.zip, находящийся на сервере. После щелчка по ней браузер обычно спрашивает в окне диалога, что следует сделать с архивом - открыть в текущем положении или сохранить на диске. Такие же вопросы задаются и о многих других типах файлов, в том числе об исполняемых программах *.exe |
Ссылка на картинку | Это ссылка на картинку типа *.gif, которая откроется в новом окне. |
Локальная ссылка | Щелчок по этой ссылке откроет в новом окне содержимое диска c: Ссылка имеет вид file://c:/ |
Ссылка с хитростью | Это внутренняя ссылка на закладку в документе. Но HTML-код ссылки таков, что браузер при щелчке по ней откроет в новом маленьком окне картинку. Поэтому не удивляйтесь, если при посещении некоторых страниц окна вдруг "вываливаются ниоткуда"... это один из рекламных приемов в Сети. |
Таблица 4 Ссылки на различные ресурсы Интернет
Создайте документ links.html с заголовком "Мои ссылки" и сохраните его в той же папке, что и документ index.html из задания 1. Добавьте в links.html перечень ссылок на различные ресурсы Интернет, например:
Почтовая служба www.mail.ru
Поисковые серверы Яndex и Rambler
и т.д. - всего 6-8 ссылок. При щелчке по ним ссылки
должны открываться в новом окне.
Добавьте в верхнюю часть документа links.html ссылку вида
возвращающую к документу index.html
Добавьте в документ index.html строку вида "Мои ссылки", адресующую документ links.html. Документ links.html должен открываться в текущем окне.
Сделайте подпись из файла index.html ссылкой на Ваш адрес электронной почты, или, если у Вас нет личного адреса на адрес pers@mail.ru
Добавьте в нижнюю часть файла index.html ссылку "в начало страницы", адресующую первую строку документа.
HTML поддерживает нумерованный и маркированный списки, открывающиеся. соответственно, тагами <OL> и <UL>. Опция COMPACT делает список более компактным. Опция TYPE позволяет указать тип маркеров списка. Для нумерованного списка ее возможные значения - "A", "I" или "1"(по умолчанию), обозначающие, соответственно, нумерацию латинскими буквами, римскими или обычными цифрами. Для маркированного списка опция TYPE указывает вид маркера - circle, disc или square. Опция START="число" нумерованного списка позволяет начать нумерацию с цифры, отличной от 1 или буквы, отличной от A.
Отдельные элементы списка заключаются в таг <LI>. Для нумерованного списка можно изменить нумерацию, указав в таге <LI> опцию VALUE="число".
Для создания комбинированных списков таги нумерованных и маркированных списков можно вкладывать друг в друга. Слева показан пример списка, а справа его HTML-код:
|
<ol compact> <li>Компьютеры <ul compact type="disc"> <li>Pentium Pro</li> <li>Pentium MMX</li> </ul> </li> <li>Принтеры <ul compact type="square"> <li>матричный</li> <li>струйный</li> <li>лазерный</li> </ul> </li> </ol> |
Кроме того, HTML поддерживает список определений, содержащий чередующиеся пары вида "термин"-"его описание". Список определений начинается с тага <DL>, термин выделяется тагом <DT>, а описание, которое обычно выводится со сдвигом вправо, тагом <DD>.
Сделайте перечень ссылок из документа links.html маркированным списком с маркерами в виде квадрата.
Добавьте к документу links.html список из 4-5 определений, состоящий из ссылок и комментариев к ним. Пример элемента такого списка:
Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончании ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа. Таблица размещается в таге <TABLE>, имеющем ряд опций:
Опция |
Назначение |
ALIGN="выравнивание" | Выравнивание всей таблицы относительно текста, в котором она находится (left, center или right) |
BORDER="число" | Ширина обрамления таблицы в пикселах |
CELLSPACING="число" | Расстояние между ячейками в пикселах |
CELLPADDING="число" | Размер свободного пространства между границами ячейки и ее содержимым в пикселах |
HSPACE="число" | Размер свободного пространства слева и справа от таблицы, в пикселах |
VSPACE="число" | Размер свободного пространства сверху и снизу от таблицы, в пикселах |
WIDTH="ширина" | Требуемая ширина таблицы в пикселах или в процентах от ширины окна бруазера |
Таблица 5 Основные опции тага TABLE
Таблица формируется по строкам, причем, каждая строка заключена в таг <TR>...</TR>, а каждая ячейка строки - в таг <TD>...</TD>.Закрывать таг </TABLE> и таги строк и столбцов обязательно. Можно изменять выравнивание объектов в ячейках таблицы, используя в тагах <TR> и <TD> опции ALIGN (так же, как в таге <TABLE>) и VALIGN для указания способа выравнивания ячеек по вертикали - TOP (по верхнему краю), BOTTOM (по нижнему краю) или CENTER (по центру).
Для явного указания ширины ячейки в таге <td> также можно использовать опцию width, а опция nowrap запрещает браузеру распределять текст по всей ячейке, так, что на экране отображается лишь та часть текста, которая умещается по длине.
Об управлении цветами в таблице будет сказано в разделе 7.
Для того, чтобы растянуть ячейку таблицы на несколько строк или столбцов, в таге ячейки <TD> используются опции ROWSPAN="число" и COLSPAN="число", указывающие, сколько строк и сколько столбцов таблицы охватывает данная ячейка. Если ячейку следует оставить пустой, в нее обычно помещают "жесткий" символ пробела
Примеры:
Характеристики | |||
Средний рост, см | Средний вес, кг | ||
Пол | Мужской | 177 | 73 |
Женский | 166 | 65 |
Данная таблица создана с помощью следующего HTML-кода:
<table border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" rowspan="2"> </td> <td colspan="2">Характеристики</td> </tr> <tr> <td>Средний рост, см</td> <td>Средний вес, кг</td> </tr> <tr align="center"> <td rowspan="2">Пол</td> <td>Мужской</td> <td>177</td> <td>73</td> </tr> <tr align="center"> <td>Женский</td> <td>166</td> <td>65</td> </tr> </table>
Следующая таблица использует 90% ширины окна браузера и различные способы выравнивания данных в ячейках:
Заголовок | |
Данные, выровненные по левому краю ячейки |
Данные, выровненные по правому краю ячейки |
25% ширины таблицы | 75% ширины таблицы |
<table width="90%" align="center" border="5" cellpadding="2" cellspacing="0"> <tr valign="center"> <td align="center" colspan="2"><big>Заголовок</big></td> </tr> <tr valign="top"> <td align="left">Данные, выровненные по<br> левому краю ячейки</td> <td align="right">Данные, выровненные по<br> правому краю ячейки</td> </tr> <tr> <td width="25%">25% ширины таблицы</td> <td width="75%">75% ширины таблицы</td> </tr> </table>
Обратите внимание на оформление таблиц - как и при написании программ, при "ручном" создании Web-страниц удобнее всего набирать операторы одного уровня с одинаковым сдвигом вправо. Во втором примере также характерно, как ширина ячеек второй строки неявно определяется шириной ячеек третьей.
Сложные и красивые эффекты могут быть достигнуты вложением таблиц друг в друга - внутренняя таблица при этом должна быть целиком вложена в таг <td> внешней таблицы.
Создайте документ tab.html. Основная часть документа должна быть организована как таблица, состоящая из 2 колонок. В левой колонке располагаются ссылки, служащие для связи документа с другими страницами сайта, а в правой колонке - основное содержание. Ширину левой колонки выберите в пределах 150-200 пикселов, ширину всей таблицы - 90-100% от ширины окна браузера, обрамление таблицы должно быть отключено. Например, таблица может выглядеть так:
На главную... Ссылки |
Основная часть документа будет находиться в правой колонке! |
В правую колонку добавьте вложенную таблицу, состоящую из строки заголовка и трех столбцов с данными. Данные выберите по своему усмотрению. Ячейки таблицы должны иметь обрамление шириной 1 пиксел.
Выбор различных цветов для оформления Web-страницы может значительно улучшить внешний вид и "читабельность" документа.
Основной цветовой набор HTML-документа указывается через опции тага <BODY>. Это следующие опции: BGCOLOR="цвет" TEXT="цвет" LINK="цвет" ALINK="цвет" VLINK="цвет". Они обозначают, соответственно, цвет фона документа, цвет текста, цвет непосещенных ссылок, цвет активной (нажатой в данный момент) ссылки, цвет посещенных пользователем ссылок. Цвета можно указывать через их имена, либо через шестнадцатиричные коды. В первом случае имена цветов такие же, как в большинстве языков программирования. Все браузеры поддерживают стандартный цветовой набор Windows:
Aqua | Black | Blue | Fuchsia | Gray | Green | Lime | Maroon |
Navy | Olive | Purple | Red | Silver | Teal | Yellow | White |
Таблица 6. Некоторые цвета Windows, поддерживаемые браузерами
Кроме того, цвета можно вводить, указывая информацию о яркости красной, зеленой и синей компонент в шестнадцатиричном коде. В этом случае перед кодом цвета ставится символ #. Коды компонет могут принимать значения от 00 до FF включительно. Так, белому цвету соответствует код #FFFFFF, черному - #000000, красному - #FF0000, зеленому - #00FF00, синему - #0000FF и т.д. Для того, чтобы цвета документа корректно отображались различными браузерами и при 256-цветном режиме монитора, следует использовать только интенсивности компонент, равные 00, 33, 66, 99, CC и FF - всего насчитывается 216 таких цветов. Впрочем, 256-цветных мониторов остается все меньше и это требование постепенно теряет актуальность. Используя документ по адресу http://pers.narod.ru/jscript/allcolors.html, Вы можете поэкспериментировать с цветами.
Пример указания цветов в таге <body>:
<body bgcolor="white" text="black" link="#009900"
alink="#006600" vlink="#003300">
Указывая код цвета любым из перечисленных способов, можно изменять цвет любой части текста, заключая ее в таг вида <FONT COLOR="цвет">часть текста</FONT>, например, этот текст заключен в таг <font color="#ffcc00">...</font>
Кроме того, HTML позволяет изменить фоновый цвет таблицы, а также отдельной строки или ячейки таблицы. Для этого достаточно в таге <TABLE>, <TR> или <TD> указать опцию вида BGCOLOR="цвет". Цвет обрамления таблицы, строки или ячейки можно изменить с помощью опции BORDERCOLOR="цвет".
Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.
Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения"). Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект - возможность черезстрочной загрузки изображения GIF - то есть, изображение может постепенно "проявляться" по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.
Формат JPG используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательный вариант картинки.
Из доступных приложений эффективно управлять файлами в форматах GIF и JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.
Рисунок в любом формате вставляется в документ
HTML тагом следующего вида:
<IMG SRC="URL рисунка" WIDTH="ширина"
HEIGHT="высота" BORDER="рамка"
ALIGN="выравнивание" HSPACE="отступ по
горизонтали" VSPACE="отступ по вертикали"
ALT="текст">
Закрывать этот таг не нужно.
Опция SRC содержит абсолютный или относительный адрес рисунка, если рисунок не найден, на его месте выведется пустая рамка. При разработке сайта используются, как правило относительные адреса. Хотя SRC - единственная обязательная опция тага, указание всех остальных опций настоятельно рекомендуется.
Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Если ширина и высота не указаны, загрузка страницы замедляется и часто приводит к некрасивому эффекту "скачущего" текста на экране. Если указанные ширина и высота не соответствуют действительным размерам рисунка, при выводе он будет отмасштабирован, что также существенно замедляет загрузку (единственное допустимое исключение - уменьшение или увеличение при загрузке в 2 раза).
Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка, являющегося гиперссылкой. Если рамка не нужна, значением этой опции следует сделать 0, а если рисунок не является ссылкой, опцию можно не указывать.
Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения - LEFT (слева) и RIGHT (справа). Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Рисунок не выглядит сливающимся с текстом при их значениях в пределах 5-15.
Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит название рисунка.
Примеры:
<img src="http://pers.narod.ru/study/inet/img/html.gif" width="267" height="106" align="left" alt="Заставка"> |
А эта картинка со ссылкой подготовлена с помощью тага <IMG SRC="http://pers.narod.ru/img/pers.gif" WIDTH="88" HEIGHT="31" BORDER="1" HSPACE="10" VSPACE="10" ALIGN="LEFT" ALT="Страница">
HTML позволяет легко добавить на страницу фоновое изображение. Для этого достаточно указать опцию background="URL рисунка" в таг BODY. Рисунок может быть в формате GIF или JPG. Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы - для этого достаточно указать опцию background="URL рисунка" в таге <table>, <tr> или <td>.
Измените основной цветовой набор документа links.html. Выделите цветами различные части документа.
Создайте с помощью редактора Paint рисунок, конвертируйте его из формата bmp и разместите на Вашей странице.
С помощью таблиц и фоновых изображений оформите свои страницы.
Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие-либо комментарии и пожелания.
Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.
Форма открывается тагом <FORM>, имеющим несколько опций.
Опция action="url" указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.
Опция method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
Опция name="имя" указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.
Опция enctype="кодирование" задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype="text/plain".
Примеры:
Заголовок формы, используемой на поисковой
машине Яndex, имеет вид:
<form name="web" method="get" action="/yandsearch">
Заголовок формы, отправляющей информацию на
адрес E-mail, может иметь вид:
<form action="mailto:vita@lvs.ru?subject=Internet-Test"
method="post" enctype="text/plain" name="Q"
onSubmit="return Validate()">
Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес vita@lvs.ru с темой "Internet-Test", опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.
Внутри тага <form> находятся поля формы. Перечислим основные из них:
<textarea name="имя" cols="число столбцов"
rows="число строк" wrap="стиль">...</textarea>
Таг предназначен для создания многострочного
поля ввода. Опции cols и rows указывают число
строк и столбцов в поле, опция wrap указывает на
режим автоматического распределения текста в
ячейке. Она может принимать одно из значений off
(выключен), virtual (распределять текст по всей
ячейке, но на сервер передавать как одну строку)
или physical (распределять текст по всей ячейке и
передавать на сервер так, как он отображается).
Опция name здесь и далее обозначает имя поля и
предполагается обязательной. Текст, написанный в
таге <textarea>, становится его значением по
умолчанию.
Таг <select name="имя" size="размер" multiple>...</select> определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки. Если опция size указана в виде size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция multiple, если она указана, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.
Внутри тага <select> размещаются элементы
меню или списка, каждый - в своем таге <option>,
имеющем общий вид
<option value="значение" selected>текст</option>
Опция value указывает значение, возвращаемое
программе обработки при выборе пользователем
данной опции, опция selected указывает на элемент
списка, выбранный по умолчанию. Внутри тага
<option> пишется текст, видимый в меню или списке
на экране.
Таг <input>, в отличие от <textarea> и <select>, не должен закрываться и предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы.
<input type="text" name="строка"
maxlength="максимальный размер" size="число
символов" value="строка">
Создает поле ввода. Опция maxlength
ограничивает максимальную длину вводимого
текста, а опция size показывает максимальное
количество отображаемых символов. Опция value
указывает исходное значение поля ввода.
Текстовое поле с защитой вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type="text" на type="password". Остальные опции поля ввода пароля - те же самые.
<input type="checkbox" name="строка"
value="строка" checked>
Создает флажок. Опция value определяет
значение, возвращаемое программе обработки при
выборе пользователем флажка, опция checked, если она
указана, делает флажок выбранным по умолчанию.
<input type="radio" name="имя" value="строка"
checked>
Создает радиокнопку. Радиокнопки можно
группировать, задавая одно и то же значение опции
name. Опции value и checked имеют те же значения, что и у
флажка.
<input type="reset" value="строка">
Создает кнопку для очистки формы.
Значение опции value позволяет указать надпись для
кнопки. После очистки все элементы формы
принимают значения, которые они имели по
умолчанию.
<input type="submit" value="строка">
Создает кнопку для отправки данных
формы приложению-обработчику. Опция value
позволяет указать надпись на кнопке.
Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагом <INPUT TYPE="button" VALUE="Вывести" onClick="Look()"> подписана словом "Вывести", а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.
Пример разработки формы:
Эта форма имеет следующий HTML-код:
<form method="post" action="mailto:pers@mail.ru?subject=Information"> <pre>Ваше имя: <input name="name" type="text" maxlength="40" size="40" value=""> Ваш пол: <input type="radio" name="pol" value="male">Мужской <input type="radio" name="pol" value="female">Женский На каком курсе Вы учитесь? <select name="curs" size="1"> <option value="1" selected>Первый</option> <option value="2">Второй</option> <option value="3">Третий</option> <option value="4">Четвертый</option> <option value="5">Пятый</option> </select> Какие языки программирования Вы знаете? <input type="checkbox" name="pascal" value="yes" checked>Паскаль <input type="checkbox" name="c" value="yes">Си <input type="checkbox" name="asm" value="yes">Ассемблер Напишите несколько слов о себе:</pre> <textarea name="about" rows="6" cols="60" wrap="off"></textarea> <p><input type="submit" value="Отправить данные"> <input type="reset" value="Очистить форму"> </form>
Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма "Information". Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа-клиент. Если да, то информация будет отправлена, причем данные из полей формы придут в виде строк текста name=value, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.
Обратите внимание, что для лучшего выравнивания данных часть формы заключена в таг <pre>, а в части, находящейся вне тага <pre>, использованы стандартные для HTML способы форматирования текста, например, таг абзаца.
Создайте документ HTML, содержащий форму для заполнения заказа на товар. Заказ должен быть отправлен по электронной почте.
Форма предусматривает поле ввода номера банковского счета, поле ввода личного номера пользователя (этот номер следует защитить от "подглядывания" при вводе), список выбора товаров (можно выбрать как один, так и несколько товаров), поле ввода произвольного комментария пользователя.
Также пользователь должен указать один из двух методов оплаты - наличным или безналичным расчетом. Пользователь должен иметь возможность указать, какую дополнительную информацию он хочет получить при ответе - данные об остатках на счете и/или список последних платежей по счету. Любая из этих двух опций может быть включена или выключена.
Предусмотрите также возможность сброса введенных в форму данных.
Фреймами или кадрами называют независимые окна внутри окна браузера, в которых могут одновременно отображаться разные документы. Фреймы удобны при создании страниц, которые должны иметь как динамическое, так статическое содержимое. Например, узкий левый фрейм может содержать оглавление сайта, а широкий правый будет предназначен для вывода информации. Возможны также любые другие конфигурации.
Документ, использующий фреймы, содержит только описание внешнего вида фреймов, которое выполняется в таге <frameset>...</frameset>, используемом вместо тага <body>. У тага <frameset> есть две главных опции - rows="список величин" и cols="список величин", описывающие, соответственно, строки и столбцы таблицы фреймов.
Строка "список величин" представляет собой разделенный запятыми перечень значений в пикселах, процентах или относительных величинах. Например, таг <frameset rows="100,240,140"> создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселов соответственно, <frameset cols="25%,75%"> создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а <frameset cols="*,2*"> - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.
Эти способы можно использовать и совместно - например, <frameset cols="128,*"> указывает оставить 128 пикселов слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, <frameset rows="*,2*" cols="*,2*"> получается сетка кадров.
Другие опции тага <frameset>:
border="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;
frameborder=yes или frameborder=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;
framespacing="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.
Внутри тага <frameset> находятся описания отдельных кадров, каждое в собственном таге <frame>, закрывать который не нужно. Число тагов <frame> должно быть равно числу кадров, определенных в таге <frameset>, при этом считается, что кадры описываются слева направо и сверху вниз.
Перечислим основные опции тага <frame>:
опция src="url" указывает URL исходного документа для данного кадра;
опция name="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;
опция scrolling="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);
опция noresize запрещает изменять размеры кадра. Опция noresize, указанная для данного кадра, влияет также и на все кадры, смежные с ним;
опция frameborder может указываться также внутри тага <frame>, со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в таге <frame> отменяет указание, сделанное в таге <frameset> для данного кадра и всех, смежных с ним;
опции magrinheight="ширина" и marginwidth="ширина" задают размещение по верхней-нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселах.
После того, как таг <frameset> закрыт, можно использовать таг <noframes>...</noframes>, определяющий содержимое, которое будет выводиться браузерами, не поддерживающими кадры.
Для создания более сложных конфигураций кадров таги <frameset> могут вкладываться друг в друга - внутренний таг <frameset> может быть вложен вместо любого из тагов <frame>.
Пример документа с фреймами:
<html> <head></head> <frameset rows="40,*" border="0" frameborder="0" frameborder="no"> <frame src="reclama.html" name="top" scrolling="no" noresize> <frameset cols="128,*" border="0" frameborder="0" frameborder="no"> <frame src="menu.html" name="menu" scrolling="auto"> <frame src="index.html" name="main" scrolling="yes"> </frameset> </frameset> <noframes> Извините, Ваш браузер не поддерживает кадры! </noframes> </html>
Здесь верхний кадр высотой 40 пикселов может служить, например, для вывода рекламы и связан с файлом reclama.html. Остальная часть окна разбита на 2 колонки. Левая колонка имеет ширину 128 пикселов и может быть предназначена для вывода меню (документ menu.html). Третий кадр занимает основную часть окна и предназначен для вывода информации (файл index.html).
Для создания ссылки из одного кадра в другой достаточно указать в таге ссылки опцию вида target="имя кадра". Например, для ссылки из кадра menu в кадр main достаточно написать в документе menu.html ссылку вида <a href="URL нового документа" target="main">...</a> При щелчке по этой ссылке содержимое правого кадра, то есть, документ index.html, будет заменено на новый документ.
При работе с кадрами можно также указывать опцию target в одном из видов _self (загрузить в тот же кадр, откуда делается ссылка), _parent (загрузить в родительский для данного кадр; если такого нет - результат действия аналогичен _self) или _top (загрузить в полное окно, разрушая все кадры).
Создайте документ, содержащий 2 вертикально расположенных фрейма. Левый фрейм (узкий) предназначен для вывода меню, правый (широкий) - для вывода содержимого документов, на которые Вы ссылаетесь из меню. Размеры фреймов должны быть изменяемы. Оставьте небольшое свободное пространство между фреймами.
Создайте в левом фрейме меню для навигации по всем страницам Вашего сайта. Проверьте работу документа с фреймами.
Сегодня многие Web-страницы располагают интересной разновидностью меню - картированными изображениями, то есть, картинками, отдельные части которых чувствительны к нажатию кнопки "мыши". Обычно чувствительные части изображения связаны с HTML-документами, то есть, являются ссылками.
В качестве графического формата для изображения-карты, как правило, выбирается формат GIF с чересстрочной загрузкой, который поддерживается практически всеми браузерами и позволяет выводить изображение, постепенно уточняя детали. Следует позаботиться о том, чтобы размер файла-изображения не был слишком большим - как и всегда при работе с графикой.
Использование изображения-карты вместо обычных гиперссылок предпочтительнее, если этого требует графический дизайн страницы. Однако, не следует забывать о пользователях, браузер которых не поддеживает вывод графики или этот вывод отключен - если на странице, помимо картированного изображения не предусмотрено других средств навигации, они не смогут воспользоваться Вашей страницей. Поэтому наряду с картированным изображением Web-мастер обычно разрабатывает обычный текстовый вариант меню.
Изображение-карта может обслуживаться как сервером, так и на стороне клиента. Мы рассмотрим только последний вариант, так как для его реализации не нужно иных средств, кроме тагов HTML.
Для определения областей картинки,
чувствительных к нажатию "мыши", их следует
описать в специальном таге <MAP>, имеющем вид
<MAP NAME="имя_карты">...</MAP>
Располагать таг <MAP> можно в любом месте документа, но для удобства это обычно делают в начале документа после тага <BODY>.
Внутри тага <MAP> каждая чувствительная
область изображения описывается в таге
<AREA>. Его общий вид следующий:
<area shape="форма" coords="список координат"
href="URL">
Закрывать таг <AREA> не нужно.
Форма может принимать одно из значений rect (прямоугольник), poly (многоугольник), circle (круг). Если эта опция не указана, подразумевается значение rect. При наложении двух зон действует значение, определенное первым тагом <AREA>.
Список координат зависит от выбранной формы и включает в себя координаты в пикселах, перечисленные через запятую. Как обычно, сначала указывается X-, а затем Y-координата и при этом считается, что ось Y расположена сверху вниз от верхнего левого угла рисунка. Левый верхний угол имеет координаты (0,0). Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, например <area shape="rect" coords="0,0,200,100">. Для круга указываются X- и Y-координаты центра и радиус в пикселах, например, <area shape="circle" coords="263,200,50" href="1.html">. Для многоугольника перечисляются пары X- и Y-координат вершин. Для надежности многоугольник должен быть замкнутым, то есть, первая пара вершин совпадает с последней.
В опции href="URL" как обычно указывается URL-адрес документа, адресуемого данной областью. Если чувствительная область определена, но не связывается ни с одним документом, вместо данной опции указывается значение nohref.
Для связывания изображения с созданной картой достаточно в таге <img>, с помощью которого вставлено изображение, указать опцию вида usemap="#имя карты", например, <img src="1.jpg" width="526" height="400" border="1" usemap="#a1">. Здесь использована карта с именем a1, находящаяся в текущем документе.
Создайте в графическом редакторе изображение, включающее в себя несколько геометрических фигур (круг, прямоугольник, многоугольник) и используйте его для картирования Вашего сайта.
Пример:
Современные текстовые процессоры, например, Microsoft Word, позволяют пользователю определять стиль, то есть, набор правил оформления и форматирования, который может применяться к различным частям документа. С другой стророны, в стандартном HTML для присвоения элементу определенных свойств (цвет, размер, положение на странице) эти свойства приходится каждый раз описывать заново, даже если на странице находится 10 или 100 таких элементов.
Каскадные таблицы стилей (Cascading Style Sheets, сокращенно CSS) предназначены для хранения информации о стилях Web-страниц. CSS позволяет отделить форматирование HTML-документа от его содержания и, таким образом, экономично и удобно использовать однажды созданные стили для оформления любого количества Web-страниц.
В настоящее время CSS является одной из самых перспективных технологий, облегчающих и автоматизирующих разработку Web-сайтов. Браузеры Internet Explorer и Netscape Navigator поддерживают стили начиная с четвертых версий. К сожалению, как и сам HTML, технология CSS тоже стала жертвой "войны браузеров" и не все элементы стилевого форматирования поддерживаются обеими лидирующими браузерами. Мы ограничимся рассмотрением "ядра" CSS, одинаково воспринимаемого Internet Explorer и Netscape Navigator.
Существует 3 основных способа применения таблицы стилей к документу:
Наиболее перспективен первый способ, поскольку
однажды созданный и размещенный на сервере стиль
может быть затем применен ко всем страницам
Вашего сайта. Хранить таблицу стилей следует в
тектовом файле с расширением *.css, который можно
создать при помощи любого текстового редактора.
Для связывания таблицы стилей с документом HTML в
последнем используется таг следующего вида:
<link rel=stylesheet type="text/css" href="URL">
Здесь URL, как всегда, обозначает абсолютный или относительный адрес стилевого файла, а остальные опции служат для того, чтобы сообщить браузеру, что на странице используется CSS. Обычно этот таг располагают в таге <head> или между тагами <head> и <body>.
Вместо первого можно использовать второй
способ - встроить таблицу стилей непосредственно
в документ. В этом случае указывать таг <link> не
нужно, а таблица стилей будет действовать только
внутри одного документа. Общий вид таблицы
стилей следующий:
<style type="text/css">
<!--
описание стиля
-->
</style>
Таблица стилей заключена в таг HTML-комментария <!-- ... --> для того, чтобы спрятать ее от старых браузеров. Точно такой же общий вид имеет и стилевой файл *.css
Наконец, для определения стиля конкретного
тага достаточно добавить к нужному тагу опцию style
и присвоить ей строковое значение определяющее
новый стиль:
<h1 style="color: blue">...</h1>
Здесь мы определили цвет текущего заголовка первого уровня как синий.
Данный метод указания стиля поддерживается всеми подчиненными тагами тага <body>. Три способа определения стиля упорядочены иерархически - наивысший приоритет имеет оперативное указание стиля в конкретном таге, затем - указание стиля в таге <style> и затем - указание в стилевом файле. Поэтому первый и второй способы обычно используются лишь для "разового" переопределения свойств какого-либо тага, указанных в стилевом файле. При злоупотреблении оперативным определением стиля теряется основное преимущество CSS - разделение содержание и форматирования.
Следует также помнить, что CSS поддерживает механизм
наследования - то есть, подчиненные таги по
умолчанию копируют некоторые свойства,
определенные для родительских тагов. Например,
используя стиль в таге <div> можно определять
стиль целого раздела документа:
<div style="color: blue">
<h1>Это заголовок внутри раздела</h1>
<p>Это абзац внутри раздела</p>
</div>
Здесь таги <h1> и <p> унаследуют синий цвет шрифта от тага <div>.
Опишем основные возможности технологии CSS.
Таблица описания стилей состоит из определений,
в простейшем случае имеющих вид:
название_элемента { свойство: значение; }
где "название_элемента" - имя HTML-тага без
символов <...> (например, H1, P, TD), а параметры в
фигурных скобках - список свойств элементов и
присвоенных им значений. Элементы списка
разделены символом точки с запятой. Пример:
h1 { color: blue; font-size: 12pt; text-line: center }
Если это определение сделано в таге <style> или в стилевом файле, все заголовки первого уровня будут выведены синим шрифтом размером 12 пунктов с выравниванием по центру окна. Для всех прочих свойств будут использованы значения по умолчанию.
Если Вы хотите определить одно и то же свойство
для нескольких тагов HTML, Вы можете
перечислить их в отдельном списке:
P { font-size: 12pt }
UL { font-size: 12pt }
или более компактно указать в одной строке
P, UL { font-size: 12pt }
Иногда возникает необходимость определения двух
(и более) стилей для одного тага -
например, для тага элемента списка <li> может
понадобиться один стиль, если <li> подчинен
тагу нумерованного списка <ol> и другой - если
он находится в маркированном списке <ul>. Это
можно сделать с помощью контекстных
определений, задав точную
последовательность тагов, для которой будет
применен стиль:
OL LI { list-type-style: decimal }
UL LI { list-type-style: square }
Обратите внимание, что имена тагов не разделены запятыми. В противном случае всем тагам списка будет приписан один и тот же стиль.
Таблицы стилей позволяют также создавать
классы - то есть, совокупности
определений, каждое из которых может
использоваться в нужном месте страницы.
Например, Вы можете определить 3 варианта стиля
заголовка H1. Определение вариантов отличается от
указания стиля лишь тем, что к названию тага
добавляется произвольное имя класса, отделенное
точкой:
H1.blue { color: blue }
H1.red { color: red }
Теперь, включая в документ таг <H1>, можно
указать в нем конкретный стиль при помощи опции CLASS:
<h1 class=red>Красный заголовок</h1>
<h1 class=blue>Синий заголовок</h1>
Классы могут использоваться и без привязки к
конкретному тагу, в этом случае их имя начинается
с символа точки, например:
.normal {
font-family:Times New Roman; font-size: 12pt;
margin-left: 0%; margin-right: 0%;
margin-top: 4px; margin-bottom: 4px;
}
.letter {
font-size: 18pt;
margin-left: 0pt; margin-right: 0pt;
margin-top: 0pt; margin-bottom: 0pt; color: #800000;
}
Здесь описаны два класса для форматирования
текста с именами normal и letter. Они могут
использоваться с любыми текстовыми элементами
страниц, для чего достаточно указать в нужном
таге опцию class="имя_класса":
<font class="normal">текст</font>
При указании любых размеров в CSS
используются следующие единицы измерения:
px - пикселы,
pt - пункты,
cm - сантиметры,
mm - миллиметры,
% - проценты
Следует помнить, что все перечисленные единицы измерения, кроме процентов, являются абсолютными и указание их в стиле лишает пользователя возможности управлять размерами шрифта с помощью браузера. Это может привести к тому, что при "слишком большом" или "слишком маленьком" разрешении монитора пользователя документ станет неудобочитаемым. Рекомендуется всюду, где возможно, указывать размеры в процентах. При этом за 100% принимается размер шрифта по умолчанию в браузере пользователя. Новые браузеры поддерживают еще 2 относительных единицы измерения: em - высота шрифта элемента и ex - высота символа X (самого высокого символа шрифта).
Наконец, таблицы стилей можно комментировать.
Комментарии располагаются между символами /* и */
и игнорируются программами просмотра. Пример:
body { margin-left: 1.5in } /* отступ на 1.5 дюйма */
Познакомимся со свойствами CSS более подробно:
Свойства шрифта. font-family
используется для указания шрифта или шрифтового
семейства, которым будет отображаться документ.
Пример:
P { font-family: Times New Roman, serif}
В качестве приоритетного шрифта абзацев указан шрифт Times New Roman, при его отсутствии документ будет отображаться любым подходящим шрифтом семества serif. Считается, что в Windows определены следующие семейства шрифтов:
Семейство | Шрифт по умолчанию |
serif | Times New Roman |
sans-serif | Arial |
cursive | Script |
fantasy | Comic |
monospace | Courier New |
font-weight определяет жирность шрифта и имеет значения lighter, normal, bold и bolder. Можно задавать жирность также числами 100,200,...,900. 400 примерно соответствует нормальной жирности начертания.
font-size указывает размер шрифта. Размеры
могут быть абсолютными и относительными:
P { font-size: 12pt }
.little { font-size: 80% }
Можно также указывать один из следующих размеров:
Значение | Описание |
xx-small | На 50% меньше x-small |
x-small | На 50% меньше small |
small | На 50% меньше medium |
medium | Шрифт среднего размера, возможно, 10 пунктов |
large | На 50% больше medium |
x-large | На 50% больше large |
xx-large | На 50% больше x-large |
larger | На 50% больше шрфита родительского элемента |
smaller | На 50% меньше шрфита родительского элемента |
Цвет элемента и фона. color
определяет цвет элемента. Цвет может указываться
одним из стандартных способов - по имени или в
виде RGB (см. п. 7).
A { color: green } /* определили цвет ссылок как зеленый */
background-color устанавливает цвет фона элемента. Цвета указываются также, как у совйства color. Браузеры могут интерпретировать данное свойство по-разному: Internet Explorer отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator - лишь ширину, занимаемую этим элементом.
Свойства текста. text-decoration указывается для наложения текстовых эффектов:
Значение | Описание |
overline | Линия над строкой |
line-through | Зачеркивание |
underline | Подчеркивание |
blink | Мерцание |
text-indent используется для отступа в
первой строке текста элемента. Идеально подходит,
например, для создания "красной строки",
принятой в русских текстах:
P { text-indent: 1cm }
text-align
определяет способ горизонтального выравнивания
текста элемента. Может принимать стандартные для
HTML значения left, right, center и justify. Пример: определим
выравнивание по ширине в качестве способа
выравнивания абзацев по умолчанию:
P { text-align: justify }
vertical-align регулирует вертикальное положение текста внутри элемента. Значения этого свойства перечислены ниже:
Значение | Описание |
baseline | Выравнивает базовую линию элемента по базовой линии родительского элемента |
middle | Выравнивает середину элемента по середине родительского элемента |
sub | Опускает элемент на подстрочный уровень |
super | Поднимает элемент на надстрочный уровень |
text-top | Выравнивает вершину элемента по верху текста родительского элемента |
text-bottom | Выравнивает низ элемента по низу текста родительского элемента |
top | Выравнивает верх элемента по самому высокому элементу строки |
bottom | Выравнивает низ элемента по самому низкому элементу строки |
line-height используется для определения расстояния между базовыми линиями строк текста. Может указываться числовым значением, в процентах от аналогичного свойства родительского элемента или иметь значение normal.
Свойства обрамления. Определены следующие группы свойств:
border-style определяет стиль рамки элемента и может принимать следующие значения:
Значение | Описание |
none | Рамки нет |
dotted | Точечная линия |
dashed | Штриховая линия |
solid | Обычная линия |
double | Двойная линия |
groove | Трехмерная вдавленная линия цвета, определенного свойством color |
ridge | Трехмерная выпуклая линия цвета, определенного свойством color |
inset | Трехмерная линия цвета, определенного свойством color |
Если свойству border-style присвоено одно значение, оно определяет все стороны рамки, два значения - стиль верхней и нижней, а затем левой и правой сторон, четрые значения - стиль верхей, затем правой, нижней и левой сторон рамки.
border-color определяет цвет рамки.
border-top-width, border-right-width, border-bottom-width, border-left-width позволяют определить ширину каждой из сторон рамки одним из значений thin (узкая), medium (средняя), thick (широкая).
margin-top, margin-right, margin-bottom, margin-left определяют поля элемента. Значения полей могут быть указаны как в абсолютных, так и в относительных величинах, допускаются и отрицательные значения полей для создания специальных эффектов.
Примеры: для того, чтобы браузер при размещении
текста оставлял свободными по 5% ширины окна
слева и справа, достаточно написать в стилевом
файле определение вида
P { margin-left: 5%; margin-right: 5% }
По умолчанию в браузерах интервалы между
абзацами установлены двух-трехкратными
интервалу между строками, что делает текст
неудобочитаемым. Исправим вид текста с помощью
стиля:
P { margin-top: 4px; margin-bottom: 4px }
padding-top, padding-right, padding-bottom, padding-left указывают величину свободного пространства между сторонами рамки и содержимым элемента.
Если свойства обрамления указываются в процентах, считается, что они рассчитываются относительно свойств width и height (ширина и высота элемента). Сами свойства width и height также могут быть установлены любым допустимым в CSS способом.
Наконец, некоторые таги HTML позволяют задавать
разные значения одних и тех же свойств своим
дочерним элементам. На практике эта возможность
обычно используется для определения в стилевом
файле внешнего вида ссылок. Пример:
A:link{ /* стиль непосещенной ссылки*/
color: #000080;
text-decoration:none;
}
A:active { /* стиль активной ссылки*/
color: #0000FF; /* цвет */
text-decoration:none; /* нет подчеркивания */
}
A:visited { /* стиль посещенной ссылки*/
color: #0000FF;
text-decoration:none;
}
A:hover { /* стиль ссылки, поверх которой находится
курсор "мыши" */
color: #0000FF;
text-decoration:underline; /* подчеркнута */
}
Создайте стилевой файл и подключите его к страницам Вашего сайта.
Файл должен поддерживать следующее форматирование текста:
Создайте и используйте также классы текста menu для вывода элементов меню и small для вывода небольших информационных сообщений (таких, как адрес текущей страницы, имя автора и т.п.)
к началу страницы |