Писать на HTML не так сложно, как может показаться.
Урок, помещенный в прошлом номере, был первым из серии уроков о сервисах Internet и World Wide Web. На этот раз мы ближе познакомимся с HTML и разберем фрагмент реального кода на HTML.
Несмотря на наличие специализированных редакторов, код HTML представляет собой обычный текст ASCII. Следовательно, он может быть создан при помощи любого текстового редактора, если тот способен сохранять файл в формате ASCII. Программы просмотра Web используются, в основном, для доступа к страницам HTML на сервере Web, однако большинство из них позволяет загружать файлы и с локального диска. Благодаря этому вы можете попробовать создать и просмотреть простые страницы Web и не имея сервера Web.
При создании файла HTML помните, что он должен иметь расширение .HTML. Если сервер Web работает на платформе Windows 3.x или воспринимает только имена файлов в формате MS-DOS "8.3", используйте расширение .HTM.
РАКЕТОСТРОЕНИЕ
Распечатка 1 на следующей странице дает пример кода HTML для домашней страницы мифической компании под названием Retro Rocket, изготовляющей одноименную продукцию. Документ называется RETRO.HTM. На Рис. 1 вы видите ту картинку, которая появляется на экране после интерпретации кода программой просмотра Web - в данном случае, программой Netscape Navigator 2.0.
(1x1)
Рисунок 1.
Это пример того, как страница Web выглядит в Netscape Navigator 2.0.
Исходный код этой страницы на языке HTML приведен в Распечатке
1.
О том, как текст должен быть размещен на экране, HTML сообщает программе просмотра Web при помощи тегов. На Распечатке 1 код начинается с тега . Всегда помещайте этот тег в начале страницы HTML: он сообщает программе просмотра Web, что нижеследующий код написан на HTML и должен быть соответственно обработан. Обратите также внимание, что Распечатка 1 заканчивается тегом . Большинство тегов HTML используется парами: открывающий и закрывающий теги указывают фрагмент текста, к которому данный тег должен быть применен. Закрывающий тег отличается от открывающего только косой чертой.
Программа просмотра Web идентифицирует файл HTML по расширению, поэтому многие программы просмотра могут отображать страницы, не имеющие тега HTML. Если вы можете просмотреть собственный документ и при отсутствии тега, то совсем необязательно, что тот, кто захочет просмотреть ваш документ с помощью другой программы, сможет это сделать. Использование сокращений облегчает жизнь вам, но осложняет ее другим, а посему лучше всегда придерживаться общепринятых соглашений.
Вслед за открывающим тегом HTML следуют три строки коментария между символами . Программа просмотра ничего не делает с комментарием - он просто не отображается. Единственное назначение комментария состоит в пояснении написанного кода.
Страница HTML состоит из шапки и основного текста (тела). В Распечатке 1 шапка - часть текста между тегами
и . В данном примере шапка содержит только один элемент - заголовок. Заголовок ограничен (как уже вы догадались) тегамиСодержимое собственно страницы Web находится в теле документа HTML. (Думается, вы сами уже поняли, какие теги ограничивают тело страницы HTML.)
Любой текст в документе HTML, не имеющий ограничивающих его тегов, будет отображен программой просмотра как основной текст (body text). В Распечатке 1 текст, начинающийся со слов "Welcome to the RetroRocket World Wide Web site", и есть основной; он будет отображен шрифтом, определенным для данной программы просмотра.
Разработчики Web не могут обойтись одним текстом, поэтому мы включили графическое изображение - логотип RetroRocket Co. Программы просмотра Web могут отображать файлы в форматах GIF и JPEG. Логотип был нарисован при помощи стандартной программы Paintbrush из пакета Windows, а затем при помощи программы преобразования графики сконвертирован из формата .BMP в формат .GIF.
В Распечатке 1 мы ссылаемся на рисунок при помощи оператора 
. Этот оператор принадлежит к немногочисленной группе одиночных тегов. Часть оператора SRC="retro.gif" сообщает программе просмотра Web о том, какой файл надо запросить. В данном случае файл .GIF (RETRO.GIF) расположен в том же каталоге, что и файл RETRO.HTM. Если бы он находился в другом каталоге, то необходимо было бы указать полный путь к нему. Если файл находится на другом сервере, то следует указать полный URL, в том числе расширение пути, например, SRC="http://www.lanmag.com/images/retro.gif".
Помимо основного текста HTML позволяет иметь несколько стилей для подзаголовков (в порядке убывания размера шрифта) от H1 до H6. Основной заголовок (Retro) написан стилем H1 (он помещен рядом с графикой). Как вы можете видеть, оператор изображения помещен между тегами
и
, а непосредственно за ним следует слово Retro. Текст между тегами H1 передается стилем Headline 1 с наибольшим размером шрифта. По команде ALIGN=bottom в операторе изображения текст выравнивается по низу графики. (Вы можете также использовать ALIGN=top и ALIGN=middle для выравнивания текста по верху и по середине изображения.)Строка, следующая за оператором изображения ("Your best buy in a luxury spacecraft."), набрана шрифтом Headline 6 - наименьшим по размеру.
СПИСКИ И ССЫЛКИ
Мы уже упоминали об основном тексте ("Welcome to the RetroRocket World Wide Web site."), поэтому останавливаться на нем не имеет смысла; обратим только ваше внимание на тег
для обозначения конца параграфа. Вместо тега
программа просмотра Web вставляет возврат каретки и пустую строку.
Для облегчения чтения и понимания кода HTML вы можете использовать символы возврата каретки и пустые строки, однако помните, что программы просмотра будут их игнорировать. А значит, использование тега абзаца необходимо, если вы хотите, чтобы возврат каретки и пустая строка присутствовали в отображаемой странице. Программа просмотра автоматически помещает возврат каретки в конец заголовка, но в остальных случаях вы должны указывать это специально.
За основным текстом следуют три отмеченных кружками строки списка ("RetroRocket Product Line", "Dealer Listings", "History of Retro Rocket Co."); в данном случае они являются гиперссылками на другие документы. Однако это вовсе не обязательная черта списка - мы просто объединили эти две возможности (список и ссылки) вместе.
Давайте сначала обсудим первую из них. Вообще говоря, списки HTML бывают двух основных категорий: упорядоченные и неупорядоченные. Упорядоченные списки являются нумерованными списками. Упорядоченный список используется, когда его элементы должны отображаться в определенном порядке. Примером такого списка может служить инструкция по сбору изделия: выполните сначала шаг 1, затем шаг 2 и т.д. Упорядоченный список помещается между тегами
- и
Другой тип списков - неупорядоченные списки. Именно такой использовался нами в примере. Этот список не нумерован ("неупорядочен"). Он также называется маркированным списком, потому что каждому его элементу предшествует маркер (*). Неупорядоченный список открывается тегом
- и закрывается тегом
Тег
в конце каждого элемента списка дает команду программе просмотра вставить возврат каретки (конец строки) после данного элемента списка. При отсутствии тега
все три элемента были бы помещены в одну строку - вряд ли вы этого хотите. Если бы я использовал тег
, то программа просмотра вставила бы помимо возврата каретки еще и пустую строку.
Как уже упоминалось, каждый элемент списка представляет собой гиперссылку. Гиперссылка, также называемая "якорем", имеет следующий вид: отображаемый текст . Здесь "имя файла" - это имя документа, на который вы ссылаетесь, а отображаемый текст - это выделенные слова, которые будут видны на экране. (В скобках заметим, что по соглашению текст, представляющий гиперссылку, отображается обычно другим светом по сравнению с обычным текстом; кроме того, текст ссылки подчеркивается. Отображение осуществляется конкретной программой просмотра, так что вид текста на экране зависит от программы и настроек пользователя.)
Если вы посмотрите на первый элемент списка, то увидите, что открывающий тег () содержит имя файла документа, на который мы ссылаемся, в то время как вторая часть ("RetroRocket Product Line") - это то, что читатель видит на экране программы просмотра в качестве ссылки. В данном случае не было необходимости указывать URL или даже путь полностью, потому что файл ROCKETS.HTM находится в том же самом каталоге, что и текущий документ (RETRO.HTM).
Ниже списка вы можете видеть тег
для рисования горизонтальной линии.
Наконец, я добавил строку для обратной связи с читателями. Эта строка содержит адрес электронной почты администратора узла Web компании. Адрес помещается между тегами
. Программа просмотра (Netscape Navigator 2.0) воспроизводит его курсивом.В следущем месяце мы продолжим обсуждение HTML. Тем временем, вы можете попытаться самостоятельно создать несколько экспериментальных страниц Web при помощи имеющихся у вас текстовых редакторов и программ просмотра.
С Аланом Франком можно связаться через Internet по адресу: afrank@mfi.com.
РАСПЕЧАТКА 1 - ПРИМЕР СТРАНИЦЫ WEB
Retro Rocket Company
Your best buy in a luxury spacecraft.
Welcome to the RetroRocket World Wide Web site. This is the
place to check out the latest in personal spacecraft
technology.
Comments? Please e-mail to:
webmaster@retrorocket.com