Создание первого web-документа

Размещено на http://www.allbest.ru/

Ваш первый web-документ

Вы можете приступить к созданию своего первого web-документа несколькими способами. Например, можно взять шаблон и отредактировать его в соответствии со своими потребностями. Можно загрузить из Internet и модифицировать какой-либо существующий web-документ. Программы просмотра Web, такие как Netscape Navigator и Mosaic, могут в отдельном окне вывести HTML-коды и текст web-документа, либо сохранить их в виде файла. Проблема, возникающая при использовании такого подхода, заключается в том, что в удивительно большом количестве web-документов нарушены основные правила разметки HTML. Само по себе то, что вы видите на экране домашнюю страницу крупной компании, еще не гарантирует, что эта страница создана правильно.

В этой главе предлагается использовать другой подход. Здесь обсуждаются основные элементы, необходимые для изготовления простой домашней страницы, и описаны процедуры, следуя которым, можно создать свой собственный HTML-документ. В тексте присутствуют ссылки на другие части книги, где находится более подробная информацию об обсуждаемых предметах. Чтобы помочь вам в создании правильно организованной web-страницы, в этой главе особое внимание уделено вставке элементов и проверке документа при помощи HTML-редактора HoTMetaL PRO.

Разметка HTML-документа

Как упоминалось в главе 1, «World Wide Web и гипермедиа-публикации», совокупность элементов, управляющих отображением текста, называется разметкой документа (markup). Эта разметка производится с помощью команд, которые «объясняют» web-броузеру, каким образом нужно отображать содержимое страницы. Таким образом, web-документ содержит текст, визуальные атрибуты которого определяются разметкой.

Использование разметки очень похоже на применение скобок в алгебре или ввод формул в электронных таблицах. Вместо круглых скобок при разметке HTML-документа используются команды, заключенные в угловые скобки (знаки «больше» и «меньше»). Элемент разметки обычно состоит из пары кодов -- открывающего и завершающего, которые называются тегами (tag). Завершающий тег отличается от открывающего тем, что начинается с символа «/», он обозначает конец элемента разметки. Например, тег <TITLE> обозначает начало названия документа, а тег </TITLE> -- его конец. Совокупность открывающего и завершающего тегов иногда называют элементом (element). Каждый элемент имеет имя, которое соответствует тегам, например, пара <TITLE> </TITLE> определяет элемент названия документа (TITLE). Когда между открывающим и завершающим тегами присутствует текст или данные, такой элемент в целом иногда называют контейнером (container).

Не для всех элементов необходим завершающий тег, и не все теги должны содержать текст. Элементы, которые не содержат текста и не требуют наличия завершающего кода, обычно называют пустыми элементами (empty elements). Некоторые теги позволяют вам определить специфические для каждого типа элемента атрибуты (attribute). В HoTMetaL PRO присутствует расположенная в меню Markup команда Edit SGML Attributes, которая позволяет ввести значения необходимых атрибутов. С помощью них можно указать, например, как должен располагаться текст по отношению к рисунку, или ввести строку, которая будет отображаться в том случае, если невозможно загрузить изображение.

При использовании простого текстового редактора или редактора HTML, не обеспечивающего автоматическую вставку тегов, полезно помнить, что теги разметки не зависят от регистра. Например, любой из следующих вариантов -- <title>, <TITLE> и <Title> -- может быть использован в элементе названия документа.

Совет Поскольку заранее неизвестно, какой web-броузер будет использоваться для просмотра документа, следует строго следовать правилам языка HTML. В настоящее время при работе со многими HTML-редакторами и шаблонами даже без использования некоторых обязательных элементов можно получить документ, который будет читаться web-броузером. Однако имейте в виду, что каждый путешественник по Web может легко получить исходный код документа, и его качество может существенно повлиять на мнение о вас и вашей фирме.

Итак, чтобы приступить к созданию web-страницы с помощью HoTMetaL PRO, щелкните на кнопке New, или выберите команду File д New, либо нажмите клавиши Ctrl+N. Будет создан новый документ под названием Document1, содержащий следующие теги:

<HTML> <HEAD> <TITLE> Document Title: </TITLE> </HEAD> <BODY> </BODY> </HTML>

Теги заголовка

Каждый HTML-документ начинается с тега <HTML>. Данный тег предназначен для того, чтобы программа просмотра определила, с каким типом документа она имеет дело, и соответствующим образом отобразила его. Это становится весьма важным в связи с тем, что в Internet начинают использоваться и другие форматы, например, SGML-документы, предназначенные для Panorama и других не-HTML броузеров. Завершающий тег </HTML> сообщает программе просмотра о конце документа. Он является самым последним тегом на странице.

Непосредственно за тегом <HTML> следует тег заголовка документа <HEAD>. Этот тег позволяет HTTP-серверу получить информацию о документе.

Следующим элементом, который должен быть включен в документ, является его название. Вопреки вашим ожиданиям, оно не появится над текстом документа, а будет расположено в заголовке окна просмотра. Название используется также для построения индексов в программах поиска информации Web, таких, как Web-spider («паук») или Web-robot («робот»).

При создании документа с помощью HoTMetaL PRO, надпись «Document Title:» («Название документа») появляется только в окне редактирования документа и не является частью текста страницы.

Точка вставки будет находиться между открывающим и завершающим тегами <TITLE>. Введите в этом месте название вашего документа. Оно должно быть коротким, но информативным. Информативность названия очень важна в силу того, что многие программы просмотра будут использовать его в качестве закладки или элемента «горячего списка» (hotlist), обеспечивающего переход к вашему документу. При просмотре документа броузером содержание элемента названия будет выводиться в заголовке окна. В некоторых программах просмотра название документа будет отображаться в специальном поле «Document Title». Ниже показан пример названия документа:

<HTML> <HEAD> <TITLE> Canyon Software's Home Page </TITLE> </HEAD> </HTML>

Совет В заголовке документа могут появляться и другие теги, такие как ISINDEX, BASE, LINK, NEXTID и META. Более подробную информацию о них можно найти в Приложении. Комментарии в HTML Одним из элементов, которые могут быть включены в заголовок или основную часть документа, является тег комментария. Комментарии не отображаются в программах просмотра. Чтобы вставить такой элемент, щелкните на кнопке Insert Comment, или выберите команду Markup д Insert Comment, или нажмите клавишу F8. Открывающий тег комментария выглядит как “<!--”, а завершающий -- как “-->”. Поскольку некоторые web-броузеры не любят многострочных комментариев, лучше делать их короткими, либо ограничивать каждую строчку комментария соответствующими тегами.

Теги основной части документа

Основной частью документа является его «тело», заключенное внутри элемента BODY. За исключением завершающего документ тега , все, что следует после заголовка, является телом документа. Сюда входят подзаголовки, абзацы, специальные символы, списки, изображения, гиперссылки и т.п. В следующих разделах объясняется, как создать «тело» вашей web-страницы.

Чтобы включить в страницу какой-либо элемент, щелкните на кнопке Insert Element либо выберите команду Markup д Insert Element. Нажатие комбинации клавиш Ctrl+I также открывает диалоговое окно вставки элемента. На рис. 5.1 показано, как выглядит это окно. Поскольку приходится часто вставлять элементы между открывающим и завершающим тегами тела документа, бывает очень удобно «закрепить» на экране окно вставки элемента, чтобы оно постоянно было открытым. Для этого щелкните правой кнопкой мыши в его верхнем левом углу и выберите команду Pin (Закрепить) в открывшемся меню управления.

Структурирование документа с помощью заголовков

Чтобы документ получился хорошо организованным, его создание следует начать с заголовков разделов. В HTML существует шесть тегов для заголовков различного уровня -- от <H1> до <H6>. Они работают подобно стилям заголовков в текстовом процессоре, определяя иерархическую структуру документа и его разбиение на подразделы. Шрифт и размер текста заголовка определяются настройками конкретного броузера, с помощью которого просматривается документ.

Чтобы создать заголовок, выберите тег <H1> в окне вставки элементов. Точка вставки появится между открывающим и завершающим тегами заголовка первого уровня. Ниже приведен пример такого заголовка:

<H1>Welcome to Canyon Software's Home Page</H1>

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

Предупреждение Если вы используете не HoTMetaL PRO, а другой редактор, не пытайтесь объединить теги названия документа и заголовка раздела первого уровня. Например, последовательность <H1><TITLE>Домашняя страница компании Canyon Software</TITLE></H1> не является корректной. Тег названия документа TITLE может находиться только внутри тегов HEAD в начале документа.

Теги абзаца и перевода строки В отличие от обычных текстовых процессоров, разбивка HTML-документа на строки не влияет на то, как он будет отображаться в программах просмотра. Нажатие клавиши Enter может добавить пустую строку в исходный код HTML-документа, однако она не будет показана в броузере. Множественные пробелы также игнорируются. Все последовательные пробелы и переводы строки превращаются в один пробел. Чтобы отделить один абзац от другого, необходимо использовать стандартный тег абзаца. Этот тег завершает текущую строку и обеспечивает вставку пустого пространства перед началом следующей.

В HTML 2 не требуется завершающего кода для тега абзаца, а в HTML 3 такой код необходим. Это делает HTML более совместимым с SGML, но более важно то, что в этом случае открывается возможность определения атрибутов абзаца, таких, как центрирование или выравнивание. HoTMetaL PRO автоматически добавляет открывающий и завершающий теги абзаца.

Чтобы начать ввод текста, поместите точку вставки между тегами </H1> и </BODY>. Щелкните на кнопке Paragraph, либо выберите тег <P> в окне вставки элементов. Теперь можно ввести какой-либо текст между открывающим и завершающим тегами абзаца. Например, ниже приведен HTML-код первого абзаца домашней страницы компании Canyon Software.

<P>Canyon Software is the creator of the easiest to use Windows file and compression manager available. Canyon has been in business since 1988. We were the first software company to introduce a compression manager to work seamlessly with World Wide Web browsers.</P>

С помощью кнопки Break или пункта <BR> в окне вставки элементов можно ввести тег перевода каретки и перейти на следующую строку без добавления перед ней пустого места. Тег перевода каретки является пустым элементом. Он появляется в HoTMetaL PRO в виде совокупности открывающего и завершающего тегов, однако в исходном HTML-коде документа завершающий тег для элемента <BR> отсутствует. Теги перевода строки в основном используются в элементе адреса, который обсуждается в этой главе ниже.

Горизонтальные разделители -- еще один способ разбить документ на части. По умолчанию такой разделитель отображается в виде оттененной линии, которая выглядит на сером фоне как трехмерная полоса поперек страницы. Иногда на web-страницах можно увидеть весьма оригинальные разделители -- многие используют встроенные в документ изображения вместо обычных линий. Чтобы вставить в документ стандартный горизонтальный разделитель, щелкните на кнопке Horizontal rule либо выберите тег <HR> в окне вставки элементов. В исходном коде это выглядит следующим образом:

<HR> </HR>

Компания Netscape предложила использовать четыре расширенных атрибута для тега горизонтального разделителя, которые позволяют управлять толщиной, длиной, выравниванием и тенью разделителя. С их помощью можно, например, определить горизонтальный разделитель, который будет представлять собой линию толщиной 1/4 дюйма, расположенную в центре страницы и занимающую половину ширины документа. Поместите точку вставки между открывающим и завершающим тегами <HR>. Выберите команду Markup д Edit SGML Attributes, либо нажмите клавишу F6. Откроется диалоговое окно редактирования атрибутов. На рис. 5.2 показан вид этого окна для горизонтального разделителя. В таблице 5.1 описаны расширенные атрибуты, которые позволяют автору документа определить, как должен выглядеть разделитель.

Атрибуты горизонтального разделителя

<HR SIZE=n> Определяет толщину горизонтального разделителя в пикселях. Вместо n подставляется число пикселей. <HR

<HR WIDTH=n> Определяет точную длину разделителя в пикселях, либо относительную длину в процентах от ширины документа. Вместо n подставляется число пикселей.

<HR ALIGN=alignment> Определяет выравнивание разделителя. Возможны три значения параметра -- LEFT (выравнивание по левому краю), RIGHT (выравнивание по правому краю) или CENTER (центрирование).

<HR NOSHADE> Определяет то, что разделитель должен отображаться без тени.

Совет Прекрасный вид документа в вашей собственной программе просмотра еще не гарантирует, что он будет выглядеть так же хорошо и в другом браузере. Поскольку в этой главе описывается создание простой домашней страницы, мы рекомендуем вам воздержаться от использования расширений Netscape. Когда вы получите основные навыки создания web-страниц, можете отредактировать страницы в соответствии с вашими представлениями о красоте, используя все преимущества расширений HTML. Многие из этих расширений войдут в третью версию HTML.

Списки

В HTML-документах можно использовать четыре типа списков: неупорядоченные (unordered), упорядоченные (ordered), дискурсивные (discursive) и списки каталогов (directory lists). Неупорядоченный список -- это то же самое, что простой перечень, или ненумерованный список (bulleted list), каждый элемент в котором предваряется вводным символом (bullet), например, жирной точкой. Упорядоченный список состоит из пронумерованных элементов. Дискурсивный список, или список определений (definition list), также называют словарным списком (glossary). Он позволяет вам организовать две колонки, в одной из которых находятся термины, а в другой -- их описания. Список каталогов содержит короткие (до 24 символов) элементы. Такой список, как правило, отображается без вводных символов перед элементами и без висячих отступов. Поскольку списки очень часто используются в HTML-документах, мы сейчас кратко о них расскажем. Многие домашние страницы целиком состоят из одного неупорядоченного списка.

Совет Возможно создание вложенных иерархических списков, которые выглядят примерно как оглавление книги. О том, как это сделать, рассказано в главе 7, «Наводим лоск».

Неупорядоченные списки Щелчок на кнопке Unordered List или выбор пункта <UL> в окне вставки элементов помещает в документ теги неупорядоченного списка. Для отделения одного элемента списка от другого служит тег <LI>. Он вставляется перед текстом, представляющим собой элемент списка. Вводный символ, который отображается перед каждым элементом перечня, зависит от программы просмотра. Например, броузер, работающий в DOS, может использовать звездочку или тире. Вы можете использовать теги абзаца, чтобы увеличить расстояние между элементами перечня, как показано в следующем примере.

<UL> <LI><P>Check out the 32-bit version of Drag And File.</P> </LI> <LI><P>View any file with Drag And View Gold.</P></LI> <LI><P>The new version of Drag And Zip includes Zip View, which lets you decompress files from any Web browser. </P></LI> </UL>

В программе просмотра это будет выглядеть примерно так, как показано на рис. 5.3.

Рис. 5.3. Неупорядоченный список

Распространенной ошибкой является использование подзаголовков внутри списка, чтобы выделить его элементы более крупным шрифтом. Такой подход может привести к непредсказуемым результатам. На вашем компьютере это может выглядеть очень привлекательно, однако весьма вероятно, что такое ухищрение не будет работать во многих web-броузерах.

В версии HTML 3 присутствует новый атрибут неупорядоченного списка -- TYPE. Он позволяет задавать три типа вводных символов: окружность (circle), жирную точку (disk) или квадрат (square). Чтобы определить тип вводного символа, выберите команду Markup д Edit SGML Attributes, введите параметр circle, disk или square в поле значения атрибута TYPE и щелкните на кнопке Apply.

Упорядоченные (нумерованные) списки Щелчок на кнопке Ordered List или выбор пункта <OL> в окне ввода элементов помещают в документ теги упорядоченного списка <OL>. Так же как и при создании неупорядоченных списков, для разделения элементов списка используются теги <LI>. Завершается упорядоченный список тегом </OL>.

При отображении страницы в web-броузере элементы списка будут автоматически пронумерованы, так что вам не нужно делать это самим. Ниже приведен пример упорядоченного списка:

<H2> License Agreement </H2> <OL> <LI><P> Grant of License </P></LI> <LI><P> Copyright </P></LI> <LI><P> Other Restrictions </P></LI> </OL>

В программе просмотра это будет выглядеть примерно так, как показано на рис. 5.4.

Рис. 5.4. Упорядоченный список

В HTML версии 3 присутствует новый атрибут TYPE для упорядоченного списка, который позволяет задавать стиль нумерации для различных уровней вложенности. С его помощью можно также изменять номера элементов списка. Кроме арабских цифр можно задать использование для нумерации римских цифр в верхнем или нижнем регистре, либо латинских букв (также в верхнем или нижнем регистре). Более подробную информацию об упорядоченных списках можно найти в Приложении.

Списки определений Щелчок на кнопке Definition List или выбор пункта <DL> в окне вставки элементов помещает в документ теги списка определений <DL>. Они используются для создания списка в виде словаря. Такой список содержит два типа элементов: название термина, <DT> (definition title), и соответствующее ему описание. Определения выделяются тегами <DD> (definition description). Панель инструментов HoTMetaL PRO содержит кнопки Definition Title и Definition Description, с помощью которых легко создавать элементы списка определений. Для увеличения расстояния между элементами этого списка также можно применять теги абзаца <P>.

Чтобы создать список определений, щелкните на кнопке Definition List или выберите пункт <DL> в окне вставки элементов. Вводимый после этого текст будет располагаться между открывающим и завершающим тегами названия термина. Чтобы ввести описание, поместите точку вставки между тегами </DT> и </DL> и щелкните на кнопке Definition Description, либо выберите элемент <DD> в окне вставки элементов. Ниже приведен пример списка определений:

<DL> <DT>Drag And File <DD><P>Voted shareware utility of the year by PC Magazine, this incredibly easy-to-use, yet extremely powerful file manager includes a fully customizable toolbar that works in conjunction with Drag And View Gold and Drag And Zip.</P> <DT>Drag And Zip <DD><P>A Windows compression manager that works as a stand-alone compression utility or in conjunction with PKZIP. PKZIP is a DOS-based compression utility that has become the defacto standard. Drag And Zip includes the Zip View utility that lets you decompress files on the fly from a Web browser.</P> <DT>Drag And View Gold <DD><P>A file viewer that lets you view the contents of over 40 different types of files. Drag And View Gold will view most word processing documents, spreadsheets, databases, archives, bitmapped and vector graphics.</P> </DL>

Встроенные графические изображения Большинство web-документов содержат встроенную графику. В этой главе будет рассмотрено применение встроенной графики в виде включенного в документ логотипа фирмы. Будем считать, что логотип хранится на локальном диске. В простейшем варианте локальная встроенная графика может быть включена в документ при помощи команд HTML, в которых после тега <IMG> указывается источник (графический файл): <IMG SRC= “путь/имя_файла.gif”>. Чтобы включить в документ графическое изображение, щелкните на кнопке Image, или выберите команду Markup д Insert Element и укажите тег IMG в диалоговом окне вставки элементов. Откроется диалоговое окно редактирования изображения. В текстовом поле Image File укажите путь к файлу, содержащему изображение, используя обратную косую черту (\), как обычно при обозначении пути в Windows. HoTMetaL PRO автоматически преобразует обратную косую черту в прямую (/), и при просмотре в HoTMetaL PRO указателя (URL) файла изображения в теге IMG SRC путь будет отображаться с использованием именно прямой дробной черты. Если HTML-документ и графический файл содержатся в одном каталоге, путь можно не указывать. При этом тег для встроенного изображения будет выглядеть, например, следующим образом:

<IMG SRC ="cslogo.gif">

Вид документа с добавленным логотипом изображен на рис 5.5. По умолчанию текст располагается под изображением. Для того чтобы расположить текст в середине встроенного изображения или выше него, нужно воспользоваться командой Markup д Edit SGML Attribute.

Рис. 5.5. Логотип компании Canyon Software добавлен в начало web-документа

редактор документ текст страница тег

Совет. Не все web-броузеры могут отображать графику. Для тех читателей, которые пользуются такими броузерами, укажите текст, который будет выведен при невозможности загрузить изображение. Для этого выберите команду Markup д Edit SGML Attribute или команду Links д Edit URL. Откроется диалоговое окно редактирования атрибутов, изображенное на рис. 5.6. Введите в поле ALT текст, который должен отображаться вместо изображения. В результате может быть получен следующий исходный код:

<IMG SRC="cslogo.gif" ALT="Canyon Software Logo">

Ввод значения атрибута ALT позволит при просмотре страницы в текстовом броузере (таком как Lynx, который работает на терминалах VT100) увидеть на месте логотипа текст «Canyon Software Logo».

Чтобы в HoTMetal PRO увидеть URL изображения, закройте диалоговое окно редактирования изображения и последовательно выберите команды View д Hide Inline Images и View д Show URLs. URL для встроенного изображения появится в следующем виде: <IMG SRC: путь/имя_файла.gif>. По умолчанию HoTMetaL PRO не отображает атрибут ALT и его значение. Увидеть текст атрибута ALT можно, установив курсор слева от тега </IMG>, содержащего URL изображения, и выбрав одну из двух команд: Markup д Edit SGML Attribute или Links д Edit URL.

Более полно вопрос о встроенных и внешних изображениях рассматривается в главе 8, «Использование изображений».

Рис. 5.6. Диалоговое окно Edit Attributes позволяет ввести альтернативный текст для неграфических web-броузеров

Включение ссылок Термин гиперссылка используется для описания гипертекста или изображений в документе, которые действуют как указатели на другую область документа или на внешний файл. Это может быть web-документ на удаленном или локальном компьютере, либо просто другая область текущего документа. В этом разделе рассматривается создание ссылок, обеспечивающих переходы внутри одного web-документа. Гиперссылки на удаленные web-документы подробно рассматриваются в главе 6. Чтобы создать гиперссылку, необходимо указать, куда должен осуществляться переход, и создать в точке назначения именованную метку. Исходная точка и точка назначения называются якорями (anchor), каждая из них помечается парой тегов <A> и </A>. Якорь может иметь один или несколько атрибутов, но для каждого обязательно должен быть определен атрибут NAME и/или атрибут HREF.

В редакторе HoTMetaL PRO нельзя увидеть атрибуты HREF или NAME, однако они присутствуют в исходном коде HTML. Для проверки атрибутов HREF или NAME щелкните кнопкой мыши между тегами <A> и выберите команду Markup д Edit SGML Attributes. Откроется диалоговое окно, в котором можно увидеть значения атрибутов HREF или NAME. Программа просмотра отображает текст, расположенный между тегами <A> и </A>, как гиперссылку. Сразу после тега <A> и непосредственно перед тегом </A> не должно быть пробелов, иначе они попадут в выделенный текст. Если гиперссылка расположена в конце предложения, лучше поставить точку сразу после завершающего тега </A>.

Создание указателя ресурса (URL), позволяющего перейти к определенному месту в документе, представляет собой несложную операцию. Чтобы определить исходную точку ссылки и точку назначения в пределах одной web-страницы, используйте кнопки Name Target и Connect Links, или выберите команды Links д NameTarget и Links д Connect Link. Для этого необходимо выполнить следующие шаги:

1. Выделите текст, который будет использоваться в качестве точки назначения ссылки. Это то место документа, куда должен перейти читатель, воспользовавшись гиперссылкой. Если не выделять текст, то имя метки назначения придется ввести в диалоговом окне.

2. Щелкните на кнопке Name Target. Откроется диалоговое окно ввода имени метки, в котором будет присутствовать первое слово выделенного текста.

3. Щелкните на кнопке OK. HoTMetaL PRO вставит теги якоря <A> и </A> в конце и начале выделенного текста. Атрибут NAME примет введенное значение. Это можно проверить с помощью команды Markup д Edit SGML Attributes, при этом имя точки перехода будет присутствовать в текстовом поле NAME.

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

5. Щелкните на кнопке Connect Link. HoTMetaL PRO вставит теги якоря в конце и начале выделенного текста. При этом URL будет указывать на точку назначения, в которую будет осуществляться переход по ссылке. Действие ссылки можно проверить, выбрав команду File д Preview и щелкнув кнопкой мыши на тексте исходной ссылки.

При просмотре исходного HTML-кода в текстовом редакторе можно увидеть, что атрибут HREF определяет исходную ссылку, а за ним следует знак равенства и имя якоря назначения (или URL). В приведенном ниже примере показан HTML-код, который задает исходную ссылку и имя точки назначения:

<P>Check out the 32-bit version of <A HREF="#dragnfile">Drag And File</A>.

Присутствие атрибута NAME определяет, что тег якоря задает точку назначения: <P><A NAME="dragnfile"></A>Drag And File</P>

Здесь метка #dragnfile используется для обозначения точки назначения ссылки. Слова «Drag And File» будут выделены в документе как текст гиперссылки. При щелчке кнопкой мыши на гипертексте «Drag And File» происходит перемещение к якорю со значением атрибута NAME="dragnfile".

В этом разделе рассмотрен очень простой случай гипертекстовой ссылки. Чтобы узнать, как устанавливать связи с другими документами, и более детально ознакомиться с процессом построения гиперссылок, изучите главу 6, «Искусство ссылок».

Адресные данные Тег адреса <ADDRESS> обычно выделяет адрес электронной почты, и, как правило, используется для идентификации автора документа или администратора web-узла (web-мастера), что позволяет читателю связаться с ними. В программе просмотра адрес обычно изображается курсивом. Для того чтобы расположить составные части адреса на нескольких строчках, можно использовать тег <BR>.

<P>For additional information on Canyon Software's products and services, please send e-mail to <B>info@canyonsw.com</B>, phone us at +1 415-382-7999, or FAX your request to +1 415-453-6195. If you have problems or comments concerning our Web service, please send e-mail to the following address:

</P> <ADDRESS>webmaster@canyonsw.com</ADDRESS> <P>You can also contact us via snail mail at</P> <ADDRESS> Canyon Software<BR> 1537 Fourth Street Suite 131<BR> San Rafael, California 94901 USA<BR> </ADDRESS>

Пример домашней страницы

Ниже приведен пример исходного кода web-страницы, в котором использовано большинство рассмотренных в данной главе тегов.

<HTML> <HEAD><TITLE>Canyon Software's Home Page</TITLE> </HEAD> <BODY> <CENTER><IMG SRC="cslogo.gif" ALT="Canyon Software Logo"></CENTER> <CENTER><H1>Welcome to Canyon Software</H1> </CENTER> <P>Canyon Software is the creator of Drag And File, named shareware utility of the year by <EM>PC Magazine</EM>, and Drag And Zip, the easiest to use compression manager available for Windows. Canyon Software has been in business since 1988. We were the first software company to introduce a compression manager to work seamlessly with World Wide Web browsers.</P> <HR> <H2>Our New 32-Bit Releases</H2> <UL> <LI><P>Check out the 32-bit version of <A HREF="#dragnfile">Drag And File</A>. </P></LI> <LI><P>View any file fast with <A HREF="#dragnview">Drag And View Gold</A>. </P> </LI> <LI><P>The new version of <A HREF="#dragnzip">Drag And Zip</A> works with any browser.</P> </LI> </UL> <HR> <H2>Canyon Software's Product Line</H2> <DL> <DT><A NAME="dragnfile"></A>Drag And File <DD><P>Voted shareware utility of the year by PC Magazine, this incredibly easy-to-use, yet extremely powerful file manager includes a fully customizable toolbar that works in conjunction with Drag and View Gold and Drag And Zip. </P> <DT><A NAME="dragnzip"></A>Drag And Zip <DD><P>A Windows compression manager that works as a standalone compression utility or in conjunction with PKZIP. PKZIP is a DOS-based compression utility that has become the defacto standard. Drag And Zip includes the Zip View utility that lets you decompress files on the fly from a Web browser.</P> <DT><A NAME="dragnview"></A>Drag And View Gold <DD><P>A file viewer that lets you view the contents of over 40 different types of files. Drag And View Gold will view most word processing documents, spreadsheets, databases, archives, bitmapped and vector graphics.</P> </DL> <HR> <H1>Questions and Comments</H1> For additional information or comments on Canyon Software's products and services, please send e-mail to info@canyonsw.com, phone us at +1 415-453-9779, or FAX your request to +1 415-453-6195. If you have problems or comments concerning our Web service, please send e-mail to the following address: </P> <ADDRESS>webmaster@canyonsw.com</ADDRESS> </P> <P>You can also contact us via snail mail at</P> <ADDRESS> Canyon Software<BR> 712 D Street Suite P<BR> San Rafael, California 94901 USA<BR> </ADDRESS> <P>This page, and all contents, are Copyright 1995 by Canyon Software Inc., San Rafael, California, USA. </P> </BODY> </HTML>

Проверка правильности web-документа

Достаточно простым, но важным шагом в подготовке web-документа является его проверка перед публикацией. Чтобы проверить документ в редакторе HoTMetaL PRO, щелкните на кнопке Validate SGML, выберите команду Special д Validate Document, или нажмите клавишу F9. HoTMetaL PRO позволяет проверить не только весь документ, но и отдельную его часть. Если в web-документе есть выделенный текст, то только он и будет проверен. Если выделенного текста нет, документ проверяется целиком. HoTMetaL PRO проверяет наличие всех необходимых открывающих и завершающих элементов, а также правильность формата атрибутов. При обнаружении ошибки появляется окно с предупреждением, а курсор устанавливается на место ошибки, предлагая ее исправить.

Если вы хотите проверить весь документ, перед использованием команды Validate SGML убедитесь, что в редактируемом web-документе нет выделенного текста.

Публикация web-документа Перед публикацией документа в Internet необходимо заменить все локальные ссылки на URL с полным сетевым адресом вашей системы. Например, во время работы над документом локальный указатель может иметь вид: file://c:/mydoc/page1.htm

Этот же указатель для работы в сети должен выглядеть так: http://www.mycompany.com/info/mydoc/page1.htm

HoTMetaL PRO облегчает этот процесс, предлагая автоматически изменить все URL. Для замены локальных ссылок на сетевые указатели ресурсов выберите команду File д Publish. На экране откроется диалоговое окно подготовки публикации, с помощью которого можно найти и заменить все указатели ресурсов по очереди, либо сразу заменить все ссылки на локальные файлы сетевыми http-указателями.

Что дальше После прочтения данной главы вы поняли, насколько легко создать простой HTML-документ. Однако пока вы лишь поверхностно познакомились с этим искусством. Чтобы использовать грандиозные возможности глобальных публикаций в World Wide Web, нужно осознать всю силу гиперссылок. Следующая глава, основываясь на уже изученных HTML-тегах, расскажет о возможностях применения ссылок для публикации сложных документов и установки связей с файлами и web-документами, разбросанными по всему миру.

Размещено на Allbest.ru