- •От автора
- •0. Самые начальные сведения Гипертекст? html?
- •Что понадобится для освоения html?
- •Необходимое отступление о редакторах html
- •1. Простейший документ в сети Документ такой красивый – интересно, что внутри
- •Обязательные теги
- •2. Абзац!
- •Непарные метки
- •Комментарии
- •Форматирование шрифта
- •Физические стили
- •Логические стили
- •3. Целые списки из абзацев, или как нам организовать текст
- •Вложенные списки
- •4. In the Outside. Гиперсвязи Связывание
- •Изображения в html-документе
- •5. Бантики в заголовках или как "я раскрашу целый свет..." Цветовая гамма Вашего документа
- •Что в хедере тебе моем..?
- •6. Страсти по табулированию
- •Внутренняя жизнь таблиц
- •"Мы с Тамарой ходим парой" или параллельные тексты
- •Полные чисел таблицы
- •Ячейка, которая требует большего
- •Играем во вложенность
- •7. Сплошной формАлизм
- •Анатомия формы
- •Форменные кнопки
- •Начинаем собирать данные
- •Форму – почтой
- •8. Единственный практический вопрос
- •Правила хорошего тона при разработке html-документов
- •Используйте продуманную иерархию заголовков
- •Следите за вложенностью меток
- •... И затащить на него посетителей
- •Оглавление
- •65 Руководство Web-дизайнера
Что в хедере тебе моем..?
Часть HTML-документа, расположенная между тегами <head> и </head>, называется заголовком или хедером документа. Информация хедера вообще говоря не видна пользователю при просмотре документа, однако в хедере есть некоторые интересные особенности, которые имеет смысл знать.
Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций. META-инструкция – это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции:
<META NAME="description" CONTENT="Программа курса по микроэкономике, читаемого в Тамбовском бизнес-колледже с 1997-98 уч. года, с распределением тем курса по часам">
Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы, как например поисковая система AltaVista, постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.
<META NAME="keywords" CONTENT="микроэкономика курс бизнес-колледж программа экономика рынок лекция тема">
Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам применяется в большинстве поисковых машин Интернета. Единственное неудобство здесь проистекает из самой природы русского языка: поскольку поисковые системы не умеют спрягать и склонять, и не все пользователи Интернета это хорошо понимают, приходится для гарантированного обнаружения документа задавать все русские грамматические формы, например "микроэкономика микроэкономике микроэкономики микроэкономикой".
Наиболее известный поисковый сервер AltaVista распознает элементы META со значениями DESCRIPTION и KEYWORDS. AltaVista использует содержимое META элементов, когда индексирует документы, а значение CONTENT, соответствующее DESCRIPTION, – как резюме для документа, когда возвращает результаты запроса. (Замечание. По умолчанию AltaVista использует первые несколько слов документа, как резюме, которые зачастую не дают представления о содержании документа. Действительно, по правилам представления официальных программ курсов первыми строками содержательной части документа должны быть "УТВЕРЖДАЮ – Директор Тамбовского бизнес-колледжа...", что, согласитесь, имеет очень отдаленное отношение к содержанию файла. Даже если с ключевыми словами все в порядке, то читатель, получив в качестве описания документа стандартную "шапку", вряд ли захочет знакомиться с таким документом. Конец замечания) Таким образом, рекомендуется включать элементы META способом, подобным приведенному в этих примерах.
Тег META влияет на индексирование документа, когда он включается в базу данных поисковой службы. Когда ищутся кандидаты для такой базы данных, нет гарантий на автоматическое включение Вашего документа. Поэтому, если Вы полагаете, что документ важен и, в особенности, если на него нет ссылок из других документов, подумайте над использованием дополнительных возможностей, подобных "Add URL" на главной странице AltaVista.
Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251">
Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows cp-1251.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r">
Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8.
Разница между NAME и HTTP-EQUIV заключается в том, что последний имеет особое значение, когда документы берутся через HTTP. HTTP серверы могут использовать собственное имя, специфицированное атрибутом HTTP-EQUIV, для создания заголовка в стиле RFC 822 – стандарта используемого в Internet протокола электронной почты в ответе HTTP. Например:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
приведет к формированию HTTP заголовка
Expires: Tue, 20 Aug 1996 14:25:27 GMT
и это может быть использовано для определения того, когда следует выбрать свежую копию документа. Если в документ включена такая метаинформация, как авторская информация или срок окончания в специальном формате, можно с помощью специальных программных средств периодически сканировать WWW сервер, чтобы автоматически посылать напоминание авторам.
<META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[HTML-документ]">
Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку страницы сети, указанной в атрибуте URL=[документ]". Этот механизм используется на сервере "живой" трансляции соревнований по Формуле-1 в Монте-Карло.
В Монте-Карло имеется сервер с данными по всему, относящемуся к миру "Формулы-1", а по URL = http://www.monaco.mc/f1/live.html располагается страница оперативного протокола гонки, проходящей в настоящее время. Каждую минуту эта страница обновляется; в нее вносятся записи о всех событиях, произошедших в гонке за последнюю минуту, и корректируется таблица текущего расположения гонщиков на трассе с указанием разделяющих их секунд. Каждый пользователь, обратившийся к этой странице в сети, может "в режиме прямого эфира" следить за гонкой. Единственная проблема – сделать так, чтобы страница на всех машинах в мире, настроенных "на волну Монте-Карло" обновлялась с той же периодичностью, что и страница-оригинал на сервере www.monaco.mc и чтобы при этом пользователю не приходилось бы раз в минуту щелкать мышью по клавише "Перезагрузить". Решение этой проблемы неожиданно простое.
В заголовке этой страницы помимо стандартного тега <TITLE> имеется и META-инструкция:
<HEAD> <TITLE> GALE FORCE F1 - Live </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="60; URL= http://www.monaco.mc/f1/live.html">
</HEAD>
Если читатель не предпримет никаких действий в течение 60 секунд после того, как страница из Монте-Карло загружена в его машину, например не выберет переход на другой документ по какой-либо ссылке, то его машина автоматически обратится снова к документу http://www.monaco.mc/f1/live.html, который к этому времени уже будет обновлен; таким образом читатель получает возможность просто периодически посматривать на экран своего компьютера, чтобы быть в курсе происходящего в Аргентине или в Японии на трассах Формулы-1. Ну, а если надоест, или гонка закончится, можно вручную выбрать любую другую страницу в Интернете, и заголовок этой новой страницы перекроет действие атрибута Refresh страницы GALE FORCE F1 – Live.
META-инструкцию Refresh можно также использовать, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. В этом случае при обращении по старому адресу будет выведено информационное сообщение, а после некоторой выдержки браузер обратится уже по новому адресу за тем же документом. На заглавной странице ежедневной электронной газеты dz-online (именно так, малыми буквами) имеется сообщение на русском и английском языках "Мы загружаем самый свежий выпуск нашей газеты. Разумеется, Вы ничего не должны делать для этого". За время паузы на сервер dz-online передается информация о том, какой из систем Вы пользуетесь, и страница газеты загружается именно в нужной версии кодировки русских символов и рассчитанная на просмотр именно Вашим браузером.
Пример применения цветовой гаммы документа и использования META-инструкции Refresh достаточно громоздок. Вам необходимо создать несколько документов схожей структуры; пусть они получат имена вида color01, color02, color03 и т.д. Кроме того потребуется заглавная страница color00, которая будет иметь стандартный цвет и содержать ссылки на остальные документы. Эта заглавная страница будет упоминаться в каждом из подчиненных документов как средство возврата из демонстрации. Все "цветные" страницы будут автоматически загружать друг друга по кругу с помощью команды "Refresh".
<HTML><!--файл color00.html -->
<HEAD>
<TITLE>Заглавная страница для цветовой гаммы</TITLE>
</HEAD>
<BODY bgcolor=#FFFFFF text=#000000 link=#FF0000>
<H1> Демонстрация цветовых гамм </H1>
<P>Черный текст на белом фоне </P>
<P><A HREF="color01.html"> Первый вариант цветовой гаммы </A></P>
<P><A HREF="color02.html"> Второй вариант цветовой гаммы </A></P>
<!-- таких строк столько, сколько "разноцветных" файлов -->
</BODY>
</HTML>
Как видите, заглавный файл обычного цвета просто содержит ссылки на остальные "цветные" страницы. Каждая же из "цветных" страниц устроена следующим образом:
<HTML><!--файл color01.html -->
<HEAD>
<TITLE>Первая цветовая гамма</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="20; URL=color02.html">
</HEAD>
<BODY bgcolor=#?????? text=#?????? link=#??????>
<!-- коды для цвета проставьте самостоятельно -->
<H1> Первая цветовая гамма</H1>
<P>..... текст на ....... фоне </P>
<P>... и создайте некоторый произвольный текст,
чтобы он занимал хотя бы несколько строк...</P>
<P><A HREF="color00.html">Возврат к оглавлению цветов</A></P>
</BODY>
</HTML><!--конец файла color02.html -->
"Цветные" страницы организуйте по циклу: пусть color01 ссылается на color02, та – на color03; последняя из Ваших страниц (например color05) должна ссылаться на страницу color01 – все эти ссылки указываются в теге META Refresh. Кроме того в теле страниц надо сослаться на заглавную страницу color00 для организации выхода из "заколдованного круга".
Для демонстрации "мультипликации" загрузите страницу color00 и перейдите по ссылке на любую из "цветных" страниц. Далее просто наслаждайтесь автоматической сменой цветов на экране через каждые 20 секунд (но Вы можете установить и другой период обновления страниц). Для того, чтобы прервать демонстрацию, просто с любой из цветных страниц вернитесь на заглавную.