1.1. Возможности HTML языка для создания
электронных
учебников
1.1.1. Что такое HTML
Термин
HTML (HyperText Markup Language) означает "язык маркировки
гипертекстов". Первую версию HTML разработал сотрудник Европейской
лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и
многое другое в компьютерном мире, версии, или спецификации, HTML
оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0.
Все это, будет работать с программным обеспечением, поддерживающим любую
известную на сегодня спецификацию HTML. Естественно, для этого пришлось
опустить некоторые детали, которые описаны не во всех спецификациях или описаны
в разных спецификациях по-разному. Однако Я могу Вас уверить, что Ваши
документы будут полностью работоспособными и вполне приличными по внешнему
виду.
1.1.2.
Освоение HTML-языка
Для освоения
HTML понадобятся две вещи:
1.
Любой браузер, т.е.,
программа, пригодная для просмотра HTML файлов. Мне лично очень нравится Netscape
Navigator, поэтому именно его команды я и буду приводить, описывая операции
с браузером.
2.
Любой редактор текстовых
файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем
компьютере установлен Windows, вполне подойдет Notepad.
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а
браузер как инструмент контроля за
сделанным.
Свои первые HTML-файлы я разрабатывал у себя на локальном диске.
Другими словами, компьютер, на котором я
занимался, не имел подключения к
Интернет. При этом один и тот же *.html-файл может быть
одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив
изменения в Notepad, Я просто нажмаю кнопку Reload
("перезагрузить") в Netscape Navigator, чтобы увидеть эти
изменения реализованными в HTML-документе.
Необходимое отступление о
редакторах HTML
В настоящее время
широко используются два типа редакторов HTML:
1.
Редакторы типа "что
видишь, то и получишь" (Netscape Navigator Gold, Microsoft Front
Page).Пользователь не видит "внутренностей" документа, с которым
он работает, точно так же, как при работе с текстовым процессором типа Microsoft
Word или Word Perfect. Кстати говоря, существует довольно много конвертеров,
способных преобразовывать документы, созданные в Microsoft Word или Word
Perfect, в HTML-документы.
2.
Редакторы собственно
HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие).В
процессе работы пользователь видит внутреннее содержание HTML-файла и может
изменять его либо вручную, либо вызывая команды меню для вставки определенных
элементов HTML. Работа с таким редактором очень похожа на работу с
интерактивной средой программирования типа Microsoft Visual Basic или Borland
Delphi.
Как уже было сказано, для работы с HTML
понадобится только текстовый редактор и браузер. Текстовый редактор может
выбрать каждый себе по вкусу.
Internet,
WWW (World Wide Web, Всемирная Паутина), intranet, extranet — все эти вещи и в
деловой жизни, и в обиходе становятся столь же привычными, как телефон.
Бесчисленное множество новых технологий, вызванных к жизни их распространением,
прочно входит в наш быт, изменяя наш образ мысли и деятельности. Одно из
новейших направлений — сети intranet, внутрикорпоративные сети,
построенные с использованием Internet-технологий — уже само успело дать
потомство в виде extranet, сетей, образуемых несколькими связанными
сетями intranet для обеспечения совместного доступа к информации. Можно только
гадать, что будет дальше.
Как всегда бывает во время бума, тысячи компаний дышат в затылок друг другу,
стремясь не упустить своей кусок пирога. На рынке появились десятки
замечательных продуктов для Internet, но большинству из нас не хватает времени
или опыта для того, чтобы разобраться в них, изучить их сильные и слабые
стороны и принять на вооружение.
Microsoft Frontpage призван облегчить
вам задачу достойно представить себя в WWW или создать Web-сайт для сети
intranet вашей организации. Frontpage, органично вписывающийся в пакет приложений
Microsoft Office, стал первым продуктом широкого использования для
Internet, сочетающим в себе клиентскую и серверную части и обеспечивающим
возможность разработки сайта в целом и установки его на большинство популярных
серверов. Если вы хотите создать свой Web-сайт, но с программированием знакомы
только понаслышке, не беспокойтесь — Frontpage способен взять на себя всю
необходимую работу по программированию. Однако Frontpage станет достаточно
серьезным помощником и для профессиональных разработчиков, предпочитающих
держать в руках полный контроль над творческим процессом.
Frontpage поставляется с несколькими дополнительными утилитами, вместе
составляющими так называемый Frontpage Bonus Pack.
Microsoft Personal Web Server
(Персональный Web-сервер Microsoft), версия Internet Information Server
(IIS, Информационный сервер Internet), работающая под Windows 95 и Windows NT
Workstation. От Frontpage Personal Web Server (Персонального Web-
УЕТЧЕТБ Frontpage), входящего в состав собственно Frontpage, Microsoft Personal
Web Server отличает более высокая производительность и наличие ряда
дополнительных возможностей.
-
Web Publishing Wizard (Мастер
публикации в WWW), который позволяет размещать ваши Web-сайты у провайдера, к
которому вы подключены, или в онлайновых службах типа America Online или
CompuServe. Обычно этот мастер используется для серверов, не поддерживающих Серверные
расширения Frontpage (Frontpage Server Extensions)
1.1.3. Как устроен HTML-документ
HTML-документ
— это просто текстовый файл с расширением *.html
(Unix-системы могут содержать файлы с расширением *.htmll).
Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.html-файл может быть
одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажимаем
кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Для
удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не
обязательно. Более того, браузеры просто игнорируют символы конца строки и
множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть
и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт
и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажимаем кнопку
Reload ('перезагрузить') в Netscape, чтобы увидеть
эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как
видно из примера, вся информация о форматировании документа сосредоточена в его
фрагментах, заключенных между знаками "<" и ">".
Такой фрагмент (например,<html>) называется
меткой (по-английски — tag, читается "тэг").
Большинство
HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением
"/".
Метки
можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY>
и <Body> будут
восприняты браузером одинаково.
Многие
метки, помимо имени, могут содержать атрибуты
— элементы, дающие дополнительную информацию о том, как браузер должен
обработать текущую метку. В нашем простейшем документе, однако, нет ни одного
атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные
метки <html> ... </html>
Метка <html> должна открывать HTML-документ.
Аналогично, метка </html> должна
завершать HTML-документ.
<head> ...
</head>
Эта
пара меток указывает на начало и конец заголовка документа. Помимо наименования
документа (см. описание метки <title>
ниже), в этот раздел может включаться множество служебной информации.
<title> ...
</title>
Все,
что находится между метками <title>
и </title>, толкуется
браузером как название документа. Netscape Navigator, например,
показывает название текущего документа в заголовке окна и печатает его в левом
верхнем углу каждой страницы.
<body> ...
</body>
Эта пара меток
указывает на начало и конец тела HTML-документа, каковое тело, собственно, и
определяет содержание документа.
<H1>
... </H1> — <H6> ... </H6>
Метки
вида <Hi> (где i — цифра
от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого
уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая
пара меток описывает абзац. Все, что заключено между <P> и </P>,
воспринимается как один абзац.
Метки <Hi> и <P>
могут содержать дополнительный атрибут ALIGN (читается "элайн", от
английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка
по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю</P>
Подытожим все, что мы знаем, с помощью
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример
HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать
не только влево,</P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы
самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно
улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
1.1.4.
Организация текста внутри документа
HTML
позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать
в списки, выводить их на экран в отформатированном виде, или увеличивать левое
поле.
Ненумерованные
списки: <UL> ... </UL>
Текст,
расположенный между метками <UL>
и </UL>, воспринимается
как ненумерованный список. Каждый новый элемент списка следует начинать с метки
<LI>. Например, чтобы
создать вот такой список:
·
Иван;
·
Данила;
·
белая кобыла
необходим
вот такой HTML-текст:
<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>
Обратите
внимание: у метки <LI> нет парной
закрывающей метки.
Нумерованные списки: <OL> ... </OL>
Нумерованные
списки устроены точно так же, как ненумерованные, только вместо символов,
выделяющих новый элемент, используются цифры. Если слегка модифицировать наш
предыдущий пример:
<OL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</OL>
получится
вот такой список:
1.
Иван;
2.
Данила;
3.
белая кобыла
Списки определений: <DL> ... </DL>
Список
определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются
метки <DT> (от английского
definition term — определяемый термин) и <DD>
(от английского definition definition — определение определения). Разберем это
на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает
'язык маркировки гипертекстов'. Первую версию HTML
разработал сотрудник Европейской лаборатории физики
элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый файл с расширением *.html
(Unix-системы могут содержать файлы
с расширением *.htmll).
</DL>
Этот
фрагмент будет выведен на экран следующим образом:
HTML
Термин HTML (HyperText Markup Language)
означает 'язык маркировки гипертекстов'. Первую версию HTML разработал
сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.html
(Unix-системы могут содержать файлы с расширением *.htmll).
Обратите
внимание: точно так же, как метки <LI>,
метки <DT> и <DD> не имеют парных закрывающих меток.
Если
определяемые термины достаточно коротки, можно использовать модифицированную
открывающую метку <DL COMPACT>.
Например, вот такой фрагмент HTML-текста:
<DL COMPACT>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>
будет
выведен на экран примерно так:
А
Первая буква алфавита
Б
Вторая буква алфавита
В
Третья буква алфавита
Вложенные списки
Элемент
любого списка может содержать в себе целый список любого вида. Число уровней
вложенности в принципе не ограничено, однако злоупотреблять вложенными списками
все же не следует.
Вложенные
списки очень удобны при подготовке разного рода планов и оглавлений.
Наши
знания о списках можно вкратце свести в пример 6:
<html>
<head>
<title>Пример 6</title>
</head>
<body>
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT>Ненумерованные списки
<DD>Элементы ненумерованного списка выделяются
специальным
символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются
отступом слева, а
также нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих,
но и выглядит более эффектно.
<P>Помните, что списки можно встраивать один в другой,
но не
следует закладывать слишком много уровней вложенности.
</P>
<P>Обратите внимание, что внутри элемента списка
может находиться
несколько абзацев. Все абзацы при этом будут иметь
одинаковое левое поле. </P>
</DL>
</body>
</html>
Форматированный текст: <PRE> ... </PRE>
В
самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и
символы конца строки. Из этого правила, однако, есть исключение.
Текст,
заключенный между метками <PRE>
и </PRE> (от
английского preformatted — предварительно форматированный), выводится браузером
на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это
очень удобно при создании простых таблиц.
Текст с отступом: <BLOCKQUOTE> ...
</BLOCKQUOTE>
Текст,
заключенный между метками <BLOCKQUOTE>
и </BLOCKQUOTE>,
выводится браузером на экран с увеличенным левым полем.
Как уже
упоминалось в самом начале, сокращение HTML означает "язык маркировки
гипертекстов". Про маркировку мы уже поговорили достаточно. Не пора ли
перейти к гипертексту?
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который
можно читать только от начала к концу, гипертекст позволяет осуществлять
мгновенный переход от одного фрагмента текста к другому. Системы помощи многих
популярных программных продуктов устроены именно по гипертекстовому принципу.
При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего
документа происходит переход к некоторому заранее назначенному документу или
фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки
вида:
<A HREF="[адрес перехода]">
выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может
использоваться несколько типов аргументов. Самое простое — это задать имя
другого HTML-документа, к которому нужно перейти. Например:
<A HREF="index.html">Перейти к оглавлению</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного
фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет
загружен документ index.html.
Если
в адресе перехода не указан каталог, переход будет выполнен внутри текущего
каталога. Если в адресе перехода не указан сервер, переход будет выполнен на
текущем сервере.
Из этого следует одно очень важное практическое соображение. Если подготовили к
публикации некоторую группу HTML-документов, которые ссылаются друг на друга
только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта
группа документов будет работать точно так же, если ее поместить в любой другой
каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким
образом, у Вас появляется возможность разрабатывать целые коллекции документов
без подключения к Интернет, и только после окончательной готовности,
подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
На практике, однако, часто бывает необходимо дать ссылку на
документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку
на это руководство со своей странички, Вам придется ввести в свой HTML-документ
примерно такой фрагмент:
<A HREF="http://www.yi.com/home/ChuvakhinNikolai/
index.html">
Практическое руководство по HTML Николая Чувахина</A>
При необходимости можно задать переход не
просто к некоторому документу, но и к определенному месту внутри этого
документа. Для этого необходимо создать в документе, к которому будет задан
переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в
файле 2.html (файлы находятся в
одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html:
<A NAME="AAA">Переход закончен</A>
Слова "Переход закончен" при этом никак не будут
выделены в тексте документа.
Затем в файле 1.html
(или в любом другом) можно определить переход на этот анкер:
<A HREF="2.html#AAA">Переход к анкеру AAA</A>
Кстати говоря, переход к этому анкеру можно определить и внутри
самого документа 2.html — достаточно только
включить в него вот такой фрагмент:
<A HREF="#AAA">Переход к анкеру AAA</A>
На практике это очень удобно при создании
больших документов. В начале документа можно поместить оглавление, состоящее из
ссылок на анкеры, расположенные в заголовках разделов документа.
Во избежание недоразумений рекомендуется
задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров:
большинство браузеров отличают большие буквы от маленьких. Если имя анкера
определено как AAA, ссылка на анкер aaa или AaA
не выведет Вас на анкер AAA, хотя документ, скорее
всего, будет загружен корректно.
Пока что мы обсуждали только ссылки на HTML-документы. Однако
возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">
Выгрузить файл</A>
Такая ссылка, если ей воспользоваться,
запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server,
на локальный диск пользователя.
<A HREF="mailto:user@mail.box">Послать письмо</A>
Если
пользователь совершит переход по такой ссылке, у него на экране откроется окно
ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы
будет указано user@mail.box.
1.1.5. Изображение в HTML-документе
Встроить изображение в HTML-документ очень
просто. Для этого нужно только иметь это самое изображение в формате GIF (файл
с расширением *.gif) или JPEG (файл с
расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ
изображение, записанное в файл picture.gif,
находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]">
может также включать атрибут ALT="[текст]",
например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив такую
метку, браузер покажет на экране текст Картинка
и начнет загружать на его место картинку из файла picture.gif.
Атрибут ALT может оказаться
необходимым для старых браузеров, которые не поддерживают изображений, а также
на случай, если у браузера отключена автоматическая загрузка изображений (при
медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться
в другом каталоге или даже на другом сервере. В этом случае стоит указать его
полное имя.