В предыдущих уроках мы подробно изучили теоретические аспекты web-дизайна. Ну, а теперь переходим к практике.
Всевозможных реализаций языка разметки гипертекста существует довольно много, но для изучения лучше всего воспользоваться HTML версии 3.2. Безусловно, сегодня уже существует и широко применяется HTML 4.0, включающий в себя множество дополнений и расширений в части системы команд. По сравнению со своими «младшими» собратьями HTML 4.0 является более совершенным и, если хотите, «современным» вариантом языка. Почему же мы всетаки остановимся на версии 3.2?
Во-первых, HTML 3.2 является более простым в изучении, а с учетом того, что мнемоника и синтаксис обоих языков практически одинаковы, пользователю, знакомому с данной версией, не составит труда быстро освоить новую реализацию HTML, бегло прочитав соответствующую документацию. Во-вторых, с помощью HTML 3.2 можно делать практически то же самое, что и посредством HTML 4.0, особенно на начальном этапе. В-третьих, HTML 3.2 более «демократичен к клиентскому программному обеспечению. Благодаря принципу обратной совместимости, заложенному в более позднюю версию HTML создателями языка (консорциум W3C), HTML 3.2 прекрасно распознается и старым программным обеспечением, и вполне современным. Ну как, достаточно оправданий? Я думаю, да. Тогда несколько слов об истории HTML 3.2.
Если вы, уважаемый читатель, полагаете, что HTML 3.2 есть дополненный и расширенный вариант HTML 3.0, то вы глубоко заблуждаетесь. Совпадение первых цифр в обозначении версий этих двух языков является не то досадным недоразумением, не то удивительным совпадением. Дело в том, что HTML 3.0 существует как бы независимо от других реализаций языка разметки гипер текста и, по всей видимости, на сегодня представляет собой своеобразную «тупиковую ветвь» в эволюции Hypertext Markup Language. HTML 3.2 был создан на основе спецификации HTML 2.0 и вобрал в себя некоторые модифицированные элементы HTML 3.0, плюс определенный набор независимых расширений, разработанных W3C.
Сейчас HTML 3.2 наравне с HTML 4.0 является одним из наиболее распространенных и широко используемых в Интернете языков разметки гипертекста. Подробным изучением его структуры, мнемоники и системы команд мы и займемся. Но сначала — небольшое «лирическое отступление».
В среде web-дизайнеров почему-то принято считать, что на свете существуют всего две методики создания web-страниц. Первая заключается в использовании объектно-ориентированных сред разработки html-документов, так называемых web-редакторов. Web-мастеру, использующему в своей работе подобную программу, по большому счету не нужно знать HTML: достаточно лишь уметь обращаться с данным приложением и щелкать мышью. Весь необходимый код редактор генерирует сам. Не удивительно, что такой подход считается «непрофессиональным», поскольку в данной ситуации создатель web-ресурса не может гибко управлять структурой разрабатываемых им документов, а сами эти редакторы по качеству работы весьма далеки от идеала. Второй подход, считающийся «верхом профессионализма», подразумевает написание всего кода вручную, с применением стандартного текстового редактора MS Windows —программы Notepad, известной также как Блокнот. Скажу по секрету, что раньше я поступал именно так. И не потому, что, пользуясь молодежной терминологией, «косил под профессионала», а просто в силу отсутствия в те времена визуальных редакторов: они получили широкое распространение на российском рынке программного обеспечения чуть позже.
Лично я рекомендую использовать третий подход, «смешанный». Заключается он в том, что шаблон страницы, включая невидимые таблицы, часть графических элементов и необходимый набор гиперссылок, готовится в web-редакторе,после чего осуществляется «доводка», дописывание, отладка и оптимизация кода вручную. Объясняется это, прежде всего, элементарными соображениями удобства и, если хотите, лени: структура сложных html-документов подразумевает наличие большого количества идентичных, часто повторяющихся команд, используемых, например, при создании таблиц и форматировании абзацев. Поверьте, писать эти тонны кода «руками» — удовольствие сомнительное. В конце концов, web-редакторы и были созданы как раз для того, чтобы облегчить жизнь web-мастеру. На практике большинство web-дизайнеров поступает сейчас именно так.
На серверах Интернета, содержащих рекомендации по web-дизайну, а также на форумах и конференциях, посвященных той же тематике, постоянно звучит определенный набор «комплиментов» в адрес WYSIWYG-редактора MicrosoftFrontPage. Все они сводятся в основном к тому, что данная программа, мягко говоря, значительно уступает другим аналогичным пакетам, а в ряде случаев вообще непригодна для создания web-страниц. Подозреваю, что общественное мнение сформировалось таким образом в первую очередь потому, что FrontPage является продуктом Microsoft. Смею вас заверить: как инструмент для разработки шаблонов html-документов, которые впоследствии все равно дописываются и отлаживаются вручную, Microsoft FrontPage вполне подходит, поскольку полностью отвечает всем требованиям, предъявляемым обычно к подобным приложениям: эта программа удобна, оснащена достаточно дружественным интерфейсом, проста в установке, изучении и использовании. В принципе для создания шаблонов web-страниц можно использовать любой другой web-редактор, это дело вкуса. Я не стану настаивать на том, чтобы вы непременно сделали Microsoft FrontPage своим основным инструментом: изучив основы разработки html-документов, можно без труда освоить и применять любой редактор. Тем неменее дизайнеры, на чем свет стоит ругающие данный программный продукт и утверждающие, что создают свои проекты исключительно посредством Notepad (тоже, заметьте, продукт Microsoft), на мой взгляд, несколько лукавят. Анализируя код некоторых их творений, я часто видел весьма характерную строку в разделе описания метаинформации: <meta name="GENERATOR" content="MicrosoftFrontPage 3.0">.
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, html-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от англ, tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Итак, упрощенная структура документа HTML выглядит следующим образом (рис. 4.1).
Рис. 4.1. Упрощенная структура html-документа
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, — парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег>0брабатываемое значение</тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
<тег1>
<тег2>0брабатываемое значение</тег2></тег1>
ВНИМАНИЕ При роботе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Однако вернемся к изображенной на рис. 4.1 структуре документа HTML. Как видно из иллюстрации, основной, глобальной конструкцией внутреннего кода web-страницы является нечто, обозначенное на рисунке прямоугольником с надписью «Документ HTML». Вполне логично было бы предположить, что это «нечто» — какая-то специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда действительно есть. Называется она «тег верхнего уровня» и записывается так:
<НТМL>.Содержимое </НТМL>
Тег верхнего уровня, как становится ясно из предложенного примера, — парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Таким образом, правило применения данной директивы также очевидно: открывающий тег записывается самой первой строкой html-документа, а закрывающий — самой последней.
Следующим на очереди у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа». Для чего нужен этот заголовок?
Заголовок web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Необходимо отметить, что содержимое заголовка не отображается в броузере и не влияет на внешний вид документа: это, если можно так выразиться, служебная информация, которая необходима, прежде всего, самому броузеру. Синтаксис тега заголовка в общем виде выглядит так:
<HEAD> Содержимое </HEAD>
Из приведенной схемы видно, что раздел HEAD следует в html-документе непосредственно за тегом <HTML> и является второй обязательной командой, которую необходимо включать в код web-страницы.
Перейдем к следующему объекту html-документа — разделу «Внешний заголовок», который, как показано на схеме, является вложенной командой тега <HEAD>. Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE>Внешний заголовок</TITLE>
Чем же «внешний заголовок» отличается от просто «заголовка» документа HTML? Все очень просто: именно он отображается в верхнем поле броузера в качестве названия страницы при ее открытии, и именно значение тега <TITLE>подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное». Непонятно? Взгляните на рис. 4.2.
Рис. 4.2. Значение тега <TITLE>
Теперь, уверен, все неясности ликвидированы. Последняя структурна составляющая кода web-страницы — раздел «Тело документа».
Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Теперь мы располагаем достаточным объемом информации для того, чтобы представить нашу абстрактную графическую схему в виде вполне конкретного кода HTML:
<HTML>
<HEAD>
<ТITLE>Моя первая web-страничка</TITLE>
</HEAD>
<BODY>
</BOOY>
</HTML>
Создайте с помощью Проводника Windows новую директорию на вашем жестком диске и назовите ее, например, «MySite». Внутри этой папки создайте каталог с названием «images», туда вы будете впоследствии помещать иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие действия: открыть Блокнот (Пуск > Программы > Стандартные > Блокнот), набрать в нем полученный выше код, сохранить текущий файл в папке «MySite» под именем index.html, воспользовавшись функцией «Сохранить как», и открыть его в броузере путем двойного щелчка мышью на значке данного файла в Проводнике. Вы получили свою первую web-страничку (рис. 4.3).
Рис. 4.3. Первая web-страничка
Постойте, скажете вы, но ведь этот html-документ отображается в главном окне броузера абсолютно пустым! Разумеется, ведь вы еще не внесли в него никакого контекстного содержимого. Для того чтобы это содержимое наполнило вашу страничку, необходимо изучить базовые теги разметки гипертекста. А для начала я предлагаю обратить пристальное внимание на приведенную ниже информацию, которая может пригодиться вам в последующей работе. Итак,
Несколько предварительных замечаний
Для того чтобы в будущем у вас не возникло каких-либо затруднений, необходимо прежде всего разобраться в понятиях тегов и их атрибутов. Итак, тег —это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение и называется атрибутом тега.
Тег может иметь атрибут или не иметь его. Например, тег верхнего уровня<HTML> не имеет атрибутов, а в строке создания новой таблицы <TABLE BORDER="1"WIDTH="100"> выражение «BORDER="1" WIDTH="100"» является атрибутом тега <TABLE>.
В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ" ...ИМЯ_АТРИБУТА-n="ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <TABLE> — это параметр "BORDER", второй атрибут — параметр "WIDTH", а их значения составляют соответственно "1" и"100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"». Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «'». В общем случае такое выражение выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; 'ЗНАЧЕНИЕ-2'; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:
Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER.
HTML является одним из немногих языков программирования, не чувствительных к регистру, в котором вы записываете команды (в данном случае — теги и имена их атрибутов). Интерпретатор броузера одинаково обработает директивы<HEAD>, <head>, <Head> или <hEaD>. Иными словами, вы вольны записывать теги как в строчном, так и в заглавном варианте, на собственный вкус. Однако рекомендуется все же применять для написания тегов HTML заглавный регистр, прежде всего, для улучшения читаемости кода, поскольку в этом случае команды языка будет легко отличить от интегрированного в документ информационного текста. Единственным исключением из этого правила служат два элемента HTML, небезразличных к регистру. Это адреса URL и escape-последовательности, о которых мы подробно побеседуем ниже.
Иногда у web-мастера возникает необходимость использовать в тексте своей web-странички символы, зарезервированные для обозначения элементов кодаHTML. Это могут быть угловые скобки (символы «<» и «>»), в которые обычно заключаются теги, прямые кавычки («"»), употребляемые при задании значений атрибутов, и т. д. Иными словами, web-мастеру необходимо, чтобы данные символы отображались в окне броузера «как есть», то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов, и были придуманы так называемые escape-последовательности, или, как их еще иногда называют, «нотации символьных объектов».
Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа амперсанд («&») и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в строчном регистре. В табл. 4.1 приведен список наиболее часто используемых escape-последовательностей.
Таблица 4.1. Наиболее распространенные escape-последовательности
|
Символ |
Значение |
Команда |
|
< > " &
© ® |
Символ «меньше, чем»; левая угловая скобка Символ «больше, чем»; правая угловая скобка Прямые кавычки Амперсанд Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе) Символ копирайта Символ зарегистрированной торговой марки |
< > " &атр; &сору; ® |
Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где по расчетам web-мастера должен следовать соответствующий служебный символ. Например, строка html-кода
На этой страничке изложены мои ":мысли вслух" по данному вопросу отобразится в окне броузера следующим образом:
На этой страничке изложены мои "мысли вслух" по данному вопросу
Перевод строки, пробелы, табуляция
При подготовке web-страниц обязательно следует помнить, что введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируются броузером при интерпретации html-документа.
Иными словами, такие элементы текста, как
данное словосочетание
или
данное
словосочетание
на экране монитора будут выглядеть одинаковым образом:
данное словосочетание
Таким образом, любое количество пробелов между словами, отступ, выполненный посредством клавиши «Tab», или перевод строки по нажатии клавиши «Enter» преобразуются при компиляции документа в один символ пробела. Поэтому для форматирования основного текста на web-странице применяются специальные теги, которые мы изучим в рамках этого же урока. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> — командой предварительного форматирования. Мнемоника записи этого тега выглядит следующим образом:
<PRE>
предварительно отформатированный текст
</PRE>
В этом случае все, что расположено между открывающим и закрывающим тегами <PRE>, а в нашем примере это выражение «предварительно отформатированный текст», отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции. Однако злоупотреблять применением данной команды не рекомендуется, поскольку в силу несхожести алгоритмов обработки кода HTML различными броузерами возможно искажение отформатированного таким образом текста в зависимости от экранных настроек пользователей. Помните, что внутри тега PRE запрещено использовать другие теги форматирования текста.
Очевидно также, что запись
<ТЕГ>текст
эквивалентна записи
<ТЕГ>текста запись
текст</ТЕГ>
идентична записи
текст</ТЕГ>В указанных случаях переводы строки также игнорируются.
Код HTML может содержать комментарии, предназначенные как для самого web-мастера, создающего документ, так и для постороннего пользователя, читающего листинг чужой странички. И в том и в другом случае комментарии записывают с целью избежать возможной путаницы при изучении кода html-документа. Комментарии не обрабатываются интерпретаторами броузеров, но и не отображаются на экране, они остаются в составе кода web-страницы «как есть». Комментарий открывается символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков тире: <!--, закрывается же несколько иным сочетанием символов: -->. Другими словами, в общем случае синтаксис записи комментария будет выглядеть следующим образом:
<!-текст комментария -->
Иногда в комментарий включается информация о создателе документа, предупреждение об авторских правах или адрес электронной почты администратора сайта. Однако чаще всего данный элемент кода HTML используется по своему прямому назначению, для пояснения назначения тех или иных участков листинга html-документа.
Создатель языка HTML, консорциум W3C, рекомендует включать в качестве первой строки html-кода перед тегом <HTML> так называемый дефинитивныйопределитель, показывающий, что данная web-страница создана именно с использованием HTML версии 3.2, а не какой-либо другой. Определитель не несет явной функциональной нагрузки и не влияет на отображение документа вброузере, однако спецификации требуют его использования. Синтаксис записиданного определителя всегда одинаков:
<! DOCTYPE HTML PUBLIC "-//W3C//DTO HTML 3.2//EN">
Некоторые элементы языка HTML могут иметь в качестве атрибутов переменные, обозначающие цвета. Эти переменные применяются в основном для определения цвета фона html-документа, цвета текста или цвета, при помощи которого отображаются гиперссылки. Определить тот или иной цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающих названия цветов словами, или с помощью шестна-дцатеричного цифрового кода, заменяющего эти метки.
Известно, что для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны еще в XIX веке известным ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешения всего лишь трех красок: красной, зеленой и синей. При помощи цветовых меток или цифрового кода web-мастер имеет возможность использовать в документе HTML любой цвет, который поддается отображению в рамках стандарта RGB.
Разумеется, цветовые нотации, заданные посредством символьных меток, легче запоминаются и интуитивно понятны любому программисту, хотя бы немного знакомому с английским языком. Существует 140 цветов, для которых приняты стандартные символьные метки. Цветов же, которые возможно отобразить посредством цифрового кода, несоизмеримо больше. Более того, далеко не все броузеры способны отображать некоторые цвета, заданные символьной нотацией. Например, Netscape Navigator распознает их значительно больше, нежели Microsoft Internet Explorer.
Для обозначения цвета шестнадцатеричным цифровым кодом принят следующий синтаксис записи: перед самим кодом ставится символ «#», далее следует набор из шести знаков в шестнадцатеричной системе счисления. Несмотря на точто в распоряжении web-мастера имеется более ста цветовых меток, на практике активно используется лишь шестнадцать из них. Именно эти цвета были приняты в качестве стандарта для шестнадцатицветовой палитры VGA. Обозначение данных цветов приведено в табл. 4.2.
Таблица 4.2. Стандартные цвета
|
Цвет |
Значение RGB |
Символьная метка |
Цифровой код |
|
Белый Черный Зеленый Светло-зеленый Серый Светло-серый Желтый Темно-бордовый Синий Темно-синий Голубой Изумрудный Красный Пурпурный Розовый Оливковый |
255 255 255 000 0 128 0 0 255 0 128 128 128 192 192 192 255 255 0 128 0 0 0 0 255 0 0 128 0 255 255 0 128 128 255 0 0 128 0 128 255 0 255 128 128 0 |
White Black Green Lime Gray Silver Yellow Maroon Blue Navy Aqua Teal Red Purple Fuchsia Olive |
#FFFFFF #000000 #008000 #00FF00 #808080 #C0C0C0 #FFFF00 #800000 #0000FF #000080 #00FFFF #008080 #FF0000 #800080 #FF00FF #808000 |
Другие цвета, для которых существует символьное обозначение, приведены в специальном файле на прилагающемся к этой книге компакт-диске. Помните, что для передачи цветов в html-документе предпочтительнее все же пользоваться шестнадцатеричным цифровым кодом, только так вы можете быть уверены, что броузер пользователя распознает требуемый цвет корректно.
Базовые теги разметки гипертекста
Теперь настало время взяться за изучение основных директив HTML, которые позволят вам поместить в создаваемый документ какое-либо содержательное наполнение. Сначала поговорим о возможностях представления на web-страницетекста.
Как вы уже знаете из предыдущего раздела, интерпретаторы HTML, встроенные в броузеры, в общем случае игнорируют пользовательскую разметку текстовых блоков, внесенную в код HTML при помощи клавиатуры. Разумеется, в этом случае должны существовать специальные команды, позволяющие отформатировать текст на экране именно так, как это необходимо web-мастеру. Подобные команды существуют, и первая из них — это тег обозначения стандартного абзаца.
Для того чтобы вывести в составе html-документа текстовый абзац, необходимо заключить соответствующий отрывок текста в теги <Р> и </Р>. Синтаксис записи такой команды выглядит следующим образом:
<Р ALIGN=APГУMEHT>
Текст, заключаемый в абзац
</Р>
Аргументом атрибута «ALIGN» может служить одно из четырех логических выражений, значение которых приведено ниже: RIGHT — выравнивание текста по правому краю экрана или столбца таблицы; LEFT — выравнивание текста по левому краю экрана или столбца таблицы; CENTER — выравнивание текста по центру экрана или столбца таблицы; JUSTIFY — выравнивание текста по ширине экрана или столбца таблицы.
Таким образом, текст, форматирование которого внутри абзаца задано тегом<Р ALIGN=JUSTIFY>, будет выровнен на экране компьютера по всей его ширине. Если при использовании тега <Р> не задано никаких атрибутов, по умолчанию используется левое выравнивание.
Можно не включать ни один из перечисленных выше аргументов в состав тега форматирования абзаца, поскольку язык разметки гипертекста позволяет использовать некоторые из них как самостоятельные теги, предназначенные для позиционирования нескольких объектов документа в окне броузера. Используются эти теги следующим образом:
<LEFT>
Часть кода HTML
</LEFT>
Все, что заключено между тегами <LEFT> и </LEFT> — текст, таблицы, графические объекты, — будет выровнено по левому краю экрана.
<CENTER>Часть кода HTML</CENTER>
Все, что содержится между тегами <CENTER> и </CENTER>, позиционируется по центру экрана.
<RIGHT>
Часть кода HTML
</RIGHT>
Все, что заключено между тегами <RIGHT> и </RIGHT>, будет выровнено по правому краю экрана.
Если вы хотите, чтобы внутри текстового блока броузер отобразил переводстроки, например, для отделения одного абзаца от другого, в конце строки
следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, jбудет перенесено на новую строку. Примером использования этой команды мо«жет служить следующий отрывок кода HTML:
<P>
Данный текст находится на одной строке экрана.<BR>
а этот текст отобразится уже с новой строки.
</Р>
Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Примечательно, что команда <BR> неимеет закрывающего тега.
Иногда тег <BR> содержит атрибут CLEAR, который может принимать одно изтрех значений: LEFT, RIGHT или ALL. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом CLEAR таков:
<BR СLЕАР="значение">.
Некоторые броузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:
<NORB>строка без переносов</NORB>
При использовании данного тега в случае, если длина строки превышает ширину экрана, в нижней части окна броузера появляется горизонтальная полоса прокрутки.
Иногда для расстановки логических акцентов в тексте создателю web-страницыприходится использовать контекстное выделение каких-либо слов или выражений шрифтом: жирным или курсивным. В этих случаях также необходимо использовать соответствующие директивы HTML:
<В>Текст. выделяемый жирным шрифтом</В>
<I>Текст, выделяемый курсивным шрифтом</I>
Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:
<В><I>Текст. выделенный жирным курсивным шрифтом</I></В>
Однако создатели спецификации языка HTML предостерегают программистов от злоупотребления этими тегами, поскольку интерпретаторы далеко не всех современных броузеров умеют их правильно распознавать. Именно поэтому рекомендуется использование аналогичных директив, называемых «командами логического выделения». Они выполняют те же функции, но синтаксис записи у них несколько иной:
<ЕМ>Текст. выделяемый курсивным шрифтом</ЕМ>
<STRONG>Tекст. выделяемый жирным шрифтом</STRONG>
Очевидно, что для выделения текста жирным курсивным шрифтом можно использовать вложение данных тегов друг в друга:
<STRONG>
<ЕМ>Текст, выделенный жирным курсивным шрифтом
</ЕМ></STRONG>
Для выделения текста подчеркиванием используется тег <U>. Синтаксис его записи также достаточно прост:
<U>Подчеркнутый текст</U>
Элемент подчеркивания может быть вложенным тегом, спецификация языка позволяет использовать его совместно с командами выделения текста жирным и курсивным шрифтом.
Помимо перечисленных тегов выделения текста существует еще несколько текстовых элементов, позволяющих различными методами акцентировать внимание зрителя на тех или иных фразах или словах. Среди подобных команд необходимо отметить следующие:
<STRIKE> — директива, позволяющая отображать в окне броузера зачеркнутый текст. Синтаксис записи:
<STRIKE>Зачеркнутый текст</STRIKE><SUB> — тег, позволяющий отобразить подстрочный текст. Синтаксис записи:
текст 1<SUB>текст 2</SUB>
Результат обработки такой строки кода будет иметь следующий вид:
текст1текст2 — тег, позволяющий отобразить надстрочный текст. Синтаксис записи:
текст1<SUP>текст 2</SUP>
Результат обработки такой строки кода будет иметь следующий вид:
текст1текст2
<ТТ> — тег, позволяющий вывести на экран часть текста фиксированным шрифтом, так называемый телетайпный текст. Используется в основном для отображения листинга программ, экранных форм и команд пользователя. Синтаксис записи:
<ТТ>Текст. отображаемый "телетайпным" шрифтом</ТТ>
<BIG> — тег, позволяющий вывести часть текста крупным шрифтом.
ПРИМЕЧАНИЕ При обработке кода HTML интерпретатором броузера размер шрифта высчитывается не в пикселах, а в условных пунктах нелинейного размера, величина такого «пункта» зависит от используемой вами реализации броузера. «Нормальный» (подставляемый по умолчанию) шрифт имеет высоту три пункта.
Использование тега <BIG> увеличивает «нормальный» размер шрифта на одинпункт. Синтаксис записи этой команды таков:
<BIG>текст</BIG>
Чтобы увеличить размер шрифта более чем на один пункт, можно использовать последовательность из нескольких тегов <BIG>:
<BIG><BIG>тeкст</BIG></BIG>
Аналогично уменьшения размера шрифта на один пункт можно добиться с использованием тега <SMALL>. Мнемоника записи этого тега выглядит следующим образом:
<SMALL>текст</SMALL>
Допустимо также использование нескольких вложенных элементов <SMALL>, подобно тому, как это было показано для тега <BIG>.
Следует помнить, что смысловое выделение текста лучше всего применять тогда, когда это действительно необходимо, поскольку текст, излишне пестрящий жирными, курсивными или подчеркнутыми словами, труден для восприятия, при его чтении сильно устают глаза и рассеивается внимание. Контекстное выделение можно использовать для отображения цитат или ключевых фраз, однако большую часть текста лучше выводить стандартным шрифтом «нормального» размера без выделения.
Теперь вы знаете, что управлять размером выводимого на экран текста можно при помощи тегов <BIG> и <SMALL>. А как программист может изменять другие параметры шрифта? Для этого и существует директива <FONT>.
Как известно, размер шрифта в стандарте HTML обозначается условными, пунктами, причем всего их насчитывается семь. Однако не все броузеры понимают термин «пункт» одинаково. Например, при отображении документа в Microsoft Internet Explorer размеры всех шрифтов различны, за исключением пунктов 2 и 3 — они отображаются шрифтом одной высоты, которая равна величине, принятой по умолчанию, и зависит от пользовательских настроек броузера. В Netscape Navigator абсолютно одинаково отображаются пункты 4 и 5, а так же б и 7, они больше по высоте, чем пункт 3, который является «нормальным» размером шрифта.
ПРИМЕЧАНИЕ Следует помнить, что некоторые броузеры, например Microsoft InternetExplorer, позволяют настраивать параметры текста, отображаемого всоставе документов HTML, путем изменения размера шрифта, подставляемого интерпретатором броузера по умолчанию. Это значит, что параметры элемента <FONT>, равно как и других тегов, управляющих размером шрифта, могут изменяться в зависимости от пользовательских настроек. По той же причине возможен эффект нарушения компоновки страницы, оптимизированной для просмотра в броузере со стандартными настройками. Избежать этого можно, заключив все элементы документа в невидимую таблицу с фиксированной шириной, заданной в пикселах.
В общем виде синтаксис записи тега <FONT> выглядит следующим образом:
<FONT FACE="значение1" SIZE="значение 2" COLOR="значение 3">текст</FONT>
Значением атрибута FACE является название шрифта, который вы планируете использовать для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение!" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом.
ВНИМАНИЕ Помните, что набор шрифтов, установленных на компьютерах посетите-— " лей вашего сайта, может быть разным, и если вы укажете в атрибуте FACE тега <FONT> шрифт, отсутствующий в системе пользователя, текстна экране его монитора станет нечитаемым. Для того чтобы избежать ошибок при отображении текста в броузерах конечных пользователей, используйте указания только на стандартные шрифты, имеющиеся в составе большинства броузеров: Arial и New Times Roman. А лучше вообще опускать данный атрибут, позволив броузеру подставлять при интерпретации кода тот шрифт, который используется по умолчанию.
Атрибут SIZE указывает на размер шрифта, которым следует выводить текст. Параметр этого атрибута, обозначенный в нашем примере как "значение2", может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа в диапазоне от 1 до 6, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), — это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого броузером по умолчанию. Так, запись <FONT SIZE="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа.
Вместо значения атрибута COLOR подставляется либо цифровой код нужного цвета, либо обозначающая этот цвет символьная метка.
Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен. Примером записи такой команды может служить следующая строка кода HTML:
<FONT FACE="Arial" SIZE="+2" COLOR="#0000FF">
отрывок текста
</FONT>
ВНИМАНИЕ Помните, что некоторые броузеры старых версий не поддерживают директиву <FONT>. Среди них — текстовый броузер для UNIX-совместимыхплатформ, который носит название Lynx.
О теге <BODY>, обозначающем тело (основную часть) документа HTML, мы уже говорили в начале этого урока. Необходимо добавить лишь то, что данная команда также может иметь атрибуты, использование которых в ряде случаев бывает весьма полезно, а иногда — просто необходимо.
В общем виде синтаксис записи тега <BODY> со всеми допустимыми атрибутами выглядит так:
<BODY BACKGROUND="URL" BGCOLOR="значение1" ТЕХТ="значение2" LINK="значение3" VLINK="значение4" ALINK="значение5">
тело документа HTML
<BODY>
Атрибут BACKGROUND позволяет дизайнеру поместить на web-страницу некий фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например,"http://www.server.ru/imaes/имя_файла.gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ".. images/имя_файла.gif"). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера. Подробно о правилах включения графических файлов в html-документ мы поговорим в ходе следующего урока.
СОВЕТ Для того чтобы избежать неадекватности отображения того или иного цвета различными броузерами, например, когда web-дизайнер решил применить на странице заливку какого-либо редко используемого оттенка, рекомендуется следующий подход: создайте в любом подходящем редакторе графический файл нужного цвета размерами 1x1 пиксел, после чего укажите его в качестве фонового изображения, включив URL этого рисунка в параметр атрибута BACKGROUND тега <BODY>.
Атрибут TEXT позволяет задать цвет текста для всего документа в целом. Но не забывайте, что параметр, назначенный данному атрибуту в теге <BODY>, можетбыть изменен в определенном участке текста путем использования команды<FONT> с атрибутом COLOR.
Для того чтобы назначить фоновый цвет всему документу, используется атрибут BGCOLOR. В этом случае web-страница будет целиком заполнена равномерной заливкой указанного цвета.
ПРИМЕЧАНИЕ Атрибуты BGCOLOR и BACKGROUND не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницыцветом, назначенным в атрибуте BGCOLOR, поверх которой размещается изображение, заданное атрибутом BACKGROUND.
ВНИМАНИЕ Если вы не используете графических изображений в качестве фонового рисунка, а основным цветом html-документа приняли белый, использование атрибута BGCOLOR с параметром "#FFFFFF" в составе тега<BODY> обязательно. Обусловлено это правило следующей причиной: некоторые броузеры (например, Microsoft Internet Explorer) позволяют пользователям произвольно изменять фоновый цвет загружаемых web-страниц, если он не задан явно. Учтите, что пренебрежение явным указанием фонового цвета может вызвать полное нарушение разработанного вами дизайна.
Атрибут LINK дает web-мастеру возможность назначить цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение"blue" (IOOOOFF). В свою очередь, атрибут VLINK указывает на цвет посещенной ссылки, значение которой по умолчанию — "purple" (#800080). И наконец, атрибут ALINK определяет цвет активной гиперссылки, то есть цвет, который гиперссылка принимает с момента нажатия на нее курсором мыши до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple".
Очевидно, что значения всех атрибутов тега <BODY>, кроме атрибута BACKGROUND, представляют собой обозначения цветов символьными метками или шестнадцатеричным цифровым кодом.
ПРИМЕЧАНИЕ При выборе цветов документа, текста и гиперссылок следует соблюдать определенную осторожность, поскольку цвета, контрастно отображаемые на цветном мониторе, могут быть неразличимы на черно-белом. Избежать подобных ошибок можно при помощи несложного приема: сделайте снимок экрана («скриншот») в момент, когда ваша web-страницазагружена в броузер (для этого необходимо нажать кнопку Print Screenна клавиатуре компьютера), загрузите полученное изображение в графический редактор и просмотрите его в режиме grayscale (256 оттенков серого). Если выбранная вами цветовая схема по-прежнему выглядит контрастно, ее можно смело применять, если нет — придется использовать другие цвета.
СОВЕТ Подбирая цвета для web-страницы, помните, что используемая вами цветовая схема должна быть «корректной». Чтение текста не должно вызывать затруднений, глаза посетителей вашей странички не должны уставать. Пожалейте зрение пользователей, не пишите оранжевым по зеленому.
ВНИМАНИЕ Установив одно из значений цветовых параметров вашей страницы, жестко задавайте и остальные значения. Некоторые броузеры позволяют пользователю произвольно менять цвет фона документа или выводимого на экран текста, если они не указаны явно. В этом случае заданный вами цвет текста может совпасть с цветом фона, установленным в броузере пользователя по умолчанию, в результате чего текст станет нечитаемым. Изменение одного из цветовых параметров без изменения остальных недопустимо. Исключение можно сделать лишь в том случае, когда в качестве фонового цвета web-страницы используется белый.
Вот пример использования тега <BODY> со всеми допустимыми атрибутами:
<BODY BACKGROUND="http://www.myserver.com/images/back.jpg" BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#008000" VLINK="#800080" ALINK="#FF0000">
Тело документа HTML
</BODY>
Редактор Microsoft Word помимо обычного и нескольких вспомогательных стилей написания текста позволяет создавать документ с использованием так называемых стилей заголовка. В этом случае заданная пользователем фраза позиционируется на странице относительно ее центра и выводится на экран крупным жирным шрифтом. Более того, в распоряжении оператора имеется несколько различных стилей заголовка, отличающихся в основном вертикальным размером символов.
Аналогия с файлами Microsoft Word приведена здесь не случайно: она поможет вам понять назначение заголовков, применяющихся в документах HTML. Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков. Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n — целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды в общем виде таков:
<Нn АLIGN="параметр">Текст заголовка</Нn>
где n=1...6.
Атрибут ALIGN дает возможность web-мастеру определить расположение заголовка в окне броузера. Параметр этого атрибута может принимать одно из трех возможных значений:
RIGHT — позиционирование заголовка по правой границе документа; LEFT — позиционирование заголовка по левой границе документа; CENTER — позиционирование заголовка по центру документа. По умолчанию заголовки выравниваются по левому краю страницы.Вот пример использования данного тега:
<Н1 ALIGN="CENTER">ДOБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!</Н1>
К сожалению, не существует каких-либо четко сформулированных правил применения заголовков в документах HTML, за исключением одного и вполне очевидного: они должны следовать в порядке приоритета, то есть с 1 по б, но не наоборот. В принципе данное правило диктуется не внутренними законами языка разметки гипертекста, а элементарной человеческой логикой, его нарушение не вызовет появления ошибок. Не рекомендуется также включать в документы заголовки ниже уровня <Н4>, поскольку они отображаются значительно более мелким шрифтом, нежели основной текст web-страницы, что затрудняет восприятие информации. Во всех остальных случаях использование данной команды — дело вкуса и эстетических предпочтений автора проекта.
Продолжая параллель с документами MS Word, необходимо сказать еще о двух элементах оформления текстовых файлов, а именно — о нумерованных и маркированных списках. Они были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Вот простой пример организации маркированного списка:
На языке HTML подобный маркированный список можно представить при помощи команды <UL> следующим образом:
<UL ТУРЕ="параметр">
<LI> Вхождение 1</LI>
<LI>Вхождение 2</LI>
<LI>Обхождение 3</LI>
<LI>Обхождение n</LI>
</UL>
Атрибут TYPE позволяет программисту управлять так называемым «буллет стилем» , то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:
DISC — метки отображаются в виде заполненных черным цветом окружностей;
CIRCLE — метки отображаются в виде полых окружностей;
SQUARE — метки отображаются в виде заполненных черным цветом квадратов.
По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, TYPE="DISC".
Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления, например:
1. Вхождение 1
2. Вхождение 2
3. Вхождение 3
И т. д.
В документе HTML нумерованный список можно представить с использованием тега <OL>:
<OL ТУРЕ="параметр" START="значение">
<LI> Вхождение 1</LI>
<LI>Обхождение 2</LI>
<LI>Вхождение 3</LI>
</OL>
Атрибут TYPE, так же как и в случае с маркированным списком, позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута TYPE команды <OL>можно использовать один из следующих параметров:
"1" — обычные арабские числа 1, 2, 3 и т. д.
"I" — римские цифры в заглавном регистре I, II, III, IV и т. д.
"i" — римские цифры в строчном регистре i, ii, iii и т. д.
"А" — символьная маркировка в заглавном регистре А, В, С и т. д.
"а" — символьная маркировка в строчном регистре а, b, с и т. д.
Атрибут START позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут TYPE задан как "1", а атрибут START —как "5", то нумерация начнется с цифры 5. Если же TYPE имеет значение "А", аSTART — "D", то маркировка начнется с символа D.
ВНИМАНИЕ При использовании атрибута START необходимо внимательно следить,— чтобы его значение соответствовало типу маркировки, указанному в атрибуте TYPE. Запись <OL TYPE="I" START="A"> не допускается. Наоборот, запись <OL TYPE="A" START="I"> вполне допустима.
По умолчанию значение атрибута TYPE принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.
Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:
На языке HTML такой список можно представить следующим набором команд:
<OL>
<LI>Обхождение 1</LI>
<UL>
<LI>Обхождение l-a</LI>
<LI>Вхождение 1-б<LI>
</UL>
<LI> Вхождение 2</LI>
<UL>
<LI>Вхождение 2-a</LI>
<LI>Обхождение 2-6</LI>
</UL>
</OL>
Следует отметить, что тег О может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером DISC, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером SQUARE, можно записать тег данного элемента следующим образом: <LI ТYРЕ="SQUARE">Вхождение</1-1>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI ТУРЕ="А">Вхождение</LI>. Важно лишь следить за тем, чтобы указываемые в теге О параметры атрибутов совпадали с типом используемого списка.
Помимо нумерованных и маркированных списков язык разметки гипертекста позволяет создавать списки определений, для чего применяются команды <DL>.Внешний вид простого списка определений таков: Заголовок группы вхождений 1
Вхождение 1-а
Вхождение 1-6
Заголовок группы вхождений 2
Вхождение 2-а
Вхождение 2-6
В виде кода HTML этот список можно представить следующим образом:
<DL>
<DТ>Заголовок группы вхождений 1
<DD>Вхождение 1-а
<DD>Вхождение 1-6
<DT>3aголовок группы вхождений 2
<DD>Вхождение 2-а
<DD>Вхождение 2-6
</DL>
Закрывающие теги для команд <ОТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> — для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.
Для того чтобы визуально отделить часть объектов html-документа от других, применяется тег <HR>. С его помощью можно отобразить в окне броузера горизонтальную черту заданного размера и цвета. В общем виде синтаксис директивы <HR> выглядит следующим образом:
<HR ALIGN="параметр" WIDTH="значение" SIZE="значение" COLOR="значение">
Атрибут ALIGN вам уже знаком, он определяет положение горизонтальной черты на экране и может принимать одно из трех возможных значений: CENTER, LEFT и RIGHT (выравнивание черты по центру, левой и правой границам экрана). Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселах простым целым числом, либо в процентах от ширины экрана при помощи числа от 1 до 100 с добавлением символа «%», например, WIDTH="268" или WIDTH="80%". В последнем случае абсолютная длина линии будет меняться в зависимости от установленного пользователем экранного разрешения. Атрибут SIZE, значение которого — простое целое число, задает толщину линии в пикселах. И наконец, атрибут COLOR определяет цвет заливки линии, в качестве его значения указывается либо шестнадцатеричный цифровой код, либо символьная нотация необходимого цвета. Ниже приведен пример записи тега <HR>:
<HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF">
Очевидно, что подобно директиве <BR> команда <HR> не имеет закрывающего тега. По умолчанию, то есть в случае записи команды <HR> без указания каких-либо атрибутов, броузер отобразит двухцветную серо-белую «вогнутую» линию толщиной в три пиксела и длиной во весь экран.
Гиперссылки устанавливают связь между каким-либо элементом текущего документа HTML и другой web-страницей либо независимым объектом — файлом или изображением. В качестве гиперссылки может выступать не только часть текста, но и графический элемсйт. Как правило, текстовая гиперссылка выделяется на странице подчеркиванием и цветом.
О правилах представления в качестве гиперссылки графических изображений мы подробно побеседуем в пятом уроке. Что касается текстовых гинерссылок,то их можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.
Реализовать простую гиперссылку на другую web-страницу можно путем использования в html-документе тега <А>, синтаксис записи которого в общем виде выглядит следующим образом:
<А HREF="URL" TARGET="параметр" TITLE="альтернативный текст"> текст гиперссылки</А>
В приведенном примере атрибут HREF указывает на адрес страницы, с которой вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http://www.server.ru/page.htinl"), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page.html"). Если искомый документ расположен водной директории с текущим, в качестве параметра атрибута HREF достаточно записать его название.
Атрибут TARGET содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом
подчеркивания. Одно из наиболее часто встречающихся значений атрибута TARGET="_blank" отображает открываемый по ссылке документ HTML в новом окне броузера.
И наконец, атрибут TITLE предназначен для создания так называемого альтернативного текста — всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши над гиперссылкой на несколько секунд. Такая подсказка может содержать, например, более подробное описание вызываемого документа.
Следует помнить, что тег <А> является одной из немногих директив HTML, не позволяющих организовать внутри нее вложение однотипных элементов. Иными словами, одну гиперссылку нельзя размещать внутри другой.
Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы разделили участок текста. При активизации подобной гиперссылки броузер «отматывает» экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке, так называемой «закладки» —специальной метки с уникальным в пределах данного документа именем, присваиваемым «закладке» посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:
<А NAME="имя_закладки">ключевое слово или заголовок раздела</А>
Второй этап — создание самой ссылки при помощи такой команды:
<А HREF="#имя_закладки">текст ссылки</А>
Помните, что для задания имени «закладки» лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя «закладки» предваряется символом «#».
Если вы хотите разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем «закладки» указывается URL документа. В этом случае рекомендуется также использовать атрибут TARGET с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:
<А HREF="http://www.server.ru/document.html#имя_закладки"
TARGET="_blank">текст ссылки</А>
ВНИМАНИЕ Помните, что броузеры не поддерживают режим «отката» при переходе— " по гиперссылке внутри документа. Иными словами, обратившись посредством ссылки к какому-либо разделу одной и той же страницы, при нажатии кнопки «НАЗАД» вы попадете не на тот участок документа, который отображался до активизации гиперссылки, а но ту страницу, которая загружалась в броузер последней.
Ссылки на адрес электронной почты
Наверняка в процессе работы во Всемирной сети вы не раз сталкивались с гиперссылками, при активизации которых автоматически запускается установленная на вашем компьютере почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем Subject. Подобные гиперссылки также можно реализовать с использованием тега <А>. В виде кода HTML ссылку на адрес электронной почты представляют следующим образом:
<А HREF="mailto:user-l@server.ru?cc=user-2@server.ru, user-3@server.ru&subject=тема_письма" >текст ссылки</А>
Давайте рассмотрим все перечисленные выше параметры атрибута HREF более подробно. Директива mail to: указывает на основной адрес электронной почты, куда следует отправлять созданное автоматически письмо. В минимальной записи атрибута HREF при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail. Функция ?сс позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд через запятую без пробелов. И наконец, с помощью функции Subject можно задать тему отсылаемого сообщения.
Простым примером организации гиперссылки на адрес электронной почты автора этой книги может служить приведенный ниже отрывок html-кода:
<А HREF="mailto:alvion@rednet.ru&subject=комментарии читателей">Жду писем!</А>
Гиперссылка на некий файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом ZIP. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Мнемоника записи подобной команды выглядит следующим образом:
<А HREF="http://www.myserver.com/fi1es/archive.ziр">текст гиперссылки</А>
Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file://", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp://". Если искомый файл расположен в тойже директории, что и вызывающий его документ, в качестве значения атрибута HREF можно просто указать его имя.
Чтобы закрепить в памяти все новые знания, полученные вами в данном уроке, постарайтесь незамедлительно реализовать их на практике, а именно — наполнить разработанную в самом начале урока заготовку для web-страницы текстовым содержимым.
Для этого создайте в текстовом редакторе Блокнот (Notepad) два независимых документа, содержащих информацию, которую вы хотели бы представить на своей домашней страничке. Один из них этих документов разместите на стартовой странице сайта, другой — на странице одного из тематических разделов, например рубрики «мое хобби». В качестве наглядного примера я предлагаю небольшой текст в составе файла index.html. Вот он:
ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!
Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему вниманию предложена информация о моих увлечениях, моей биографии, моих друзьях, работе и семье. В отдельной рубрике я предлагаю Вашему вниманию несколько собственных фотографий. Надеюсь, они Вам понравятся.
К сожалению, в настоящий момент моя домашняя страничка находится в стадии разработки, потому еще далеко не все ее разделы доступны для просмотра. Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:
Заходите на мою страничку почаще! С уважением, Иван Иванов.
Теперь настало время подготовить рубрику «Мои увлечения». Для этого создайте внутри каталога, в котором хранится содержимое вашего сайта (C:\MySite),вложенную папку, которую озаглавьте «Hobby», а в ней разместите пустой файл с названием index.html, созданный в редакторе Notepad.
Итак, все приготовления закончены. Осталось, воспользовавшись информацией, которую вы почерпнули из этого урока, превратить ваш текстовый файл в полноценный документ HTML:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mоя домашняя страничка</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1>
<BR>
<Р ALIGN="JUSTIFY">
 : Спасибо Вам. уважаемый посетитель, за то, что Вы нашли
время и возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему
вниманию предложена информация о
<А HREF="/hobby/index.html" TITLE="Рассказ о моем хобби, в частности о
коллекционировании марок">моих увлечениях</А>,
моей биографии, моих друзьях, работе и семье. В отдельной рубрике я предлагаю
Вашему вниманию несколько собственных фотографий. Надеюсь, они Вам понравятся.
</Р><BR>
<Р ALIGN="JUSTIFY">
 :  :  : К сожалению, в настоящий момент моя домашняя страничка
находится в стадии разработки, потому еще
<STRONG>далекр не все ее разделы доступны для просмотра</STRONG>.Я искренне надеюсь, что этот ресурс будет постоянно обновляться и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. Например, в течение ближайшей недели здесь будет опубликовано:</Р>
<UL TYPE="SQUARE">
<LI>Моя биография.</LI>
<LI>Рассказ о моей семье.</LI>
<LI>Несколько фотографий.</LI>
</UL>
<Р ALIGN="CENTER">
Заходите на мою страничку почаще! С уважением.
<EM><STRONG>Иван Иванов.</STRONG></EM>
</Р>
<BR>
<HR>
<Р ALIGN="CENTER">Aвтор страницы Иван Инванов. 2000.
E-mail: <A HREF="mailto:ivan@server.ru&subject=отзывы посетителей">
ivan@server.ru</A>
</Р>
</BODY>
</HTML>
Как становится видно из предложенного выше кода, вступительная фраза «Добро пожаловать на мою домашнюю страничку!» использована в качестве заголовка первого уровня, словосочетание «моих увлечениях» превращено в гиперссылку на заглавный документ рубрики «Хобби», фраза «далеко не все ее разделы доступны для просмотра» выделена жирным шрифтом, маркированный список реализован с помощью меток в виде залитых черным цветом квадратов, а имя разработчика странички помечено жирным и курсивным выделением, имитируя подпись. Более того, нижняя часть документа отделена горизонтальной чертой, под которой размещена ссылка на адрес электронной почты автора данного web-сайта, а в качестве темы сообщения указана строка «отзывы посетителей». Результат ваших трудов будет выглядеть в окне броузера так, как показано на рис. 4.4.
Рис. 4.4. Внешний вид домашней странички
Второй html-документ, составляющий тематический раздел «Мои увлечения», предлагаю вам разработать самостоятельно по аналогии с приведенным примером. Не забудьте включить в текст этой страницы ссылку на заглавную страницу сайта.
Размещение страницы в Интернете
Начиная рассказ о процедуре публикации созданной нами домашней странички в сети Интернет, я предполагаю, что вы уже зарегистрировались на одном из сайтов, предлагающих своим посетителям бесплатный web-хостинг, получив учетную запись и пароль для доступа к ресурсам сервера, а также что для загрузки страниц на сервер используется протокол передачи файлов FTP.
Существует множество программ и утилит, облегчающих пользователям размещение web-страниц во Всемирной сети. На мой взгляд, самая удобная, простая в использовании, надежная и дружественная из них — это программа CuteFTP.
CuteFTP представляет собой тридцатидвухразрядное приложение MS Windows, предназначенное для загрузки файлов на удаленный сервер. Эта программа является Shareware-продуктом, рассчитанным на 30-дневный бесплатный период эксплуатации, по истечении которого необходима платная регистрация. Автор данной утилиты — программист из Сан-Антонио Алекс Кунадзе.
При загрузке CuteFTP на экране появляется окно менеджера связи (FTP SiteManager), внешний вид которого показан на рис. 4.5.
Рис. 4.5. Интерфейс менеджера связи
В левом окне менеджера связи отображается список папок, где хранится информация о FTP-сайтах, с которыми устанавливает соединение программа. Вы имеете возможность добавлять, удалять и переименовывать папки по собственному усмотрению при помощи кнопок Add folder, Delete folder и Rename folder.
Для того чтобы внести информацию об используемом вами FTP-сервере в базу данных Cute FTP, необходимо щелкнуть мышью на кнопке Add site, в результате чего на экране появится окно настроек удаленного хоста (Add Host) (рис. 4.6).
Рис. 4.6. Окно настроек удаленного хоста, вкладка General
В поле Site Label вкладки General данного окна необходимо указать краткое название создаваемого вами соединения, в поле Host address — адрес удаленного FTP-сервера, например, в виде ftp.server.ru. В поле User ID записывается ваш логин (учетная запись для доступа к FTP), а в поле Password, соответственно, пароль. Меню Login type предлагает на выбор три режима авторизации на удаленной машине: обычный, анонимный и двойной. Меню Transfer type позволяет пользователю специфицировать режим передачи данных: ASCII для трансфера документов HTML, текстовых файлов и скриптов, Image — для загрузки графических изображений и, наконец, Auto-Detect — для автоматического переключения из одного режима в другой в зависимости от типа загружаемого файла.
В меню Host Type вы должны указать тип операционной системы, установленной на удаленном сервере, выбрав ее название из предложенного списка. Если версия операционной системы вам неизвестна, рекомендую оставить установленный по умолчанию режим Auto-Detect. В поле Initial Remote Directory вносится имя каталога на удаленном сервере, в котором вы должны размещать составляющиеваш сайт файлы. Если они заносятся в корневую директорию, данное поле можно оставить пустым. В поле Initial Local Directory необходимо записать путь к папке на локальном компьютере, в которой хранится загружаемый вами на сервер контент, в нашем случае это C:\MySite.
В общем случае установленные по умолчанию настройки во вкладке Advanced окна настройки удаленного хоста можно оставить без изменений, поскольку они описывают лишь технические параметры соединения, такие как номер порта сервера (пункт Port), количество повторов попыток установки связи в случае возникновения ошибок (поле Connection Retries), временную задержку между повторами (пункт Delay between retries) и некоторые другие. Здесь же можно записать комментарии, которые будут отображаться в поле Comments менеджера связи при выделении мышью одного из пунктов списка доступных FTP-серверов.Внесенные в настройки хоста изменения можно зафиксировать нажатием кнопки ОК, которая возвращает пользователя в окно менеджера связи.
В правом верхнем поле окна FTP Site Manager отображается список доступных вданный момент удаленных FTP-серверов. После закрытия меню Add host в немпоявится новая позиция, озаглавленная так, как было указано вами в поле SiteLabel. Имеется возможность удалять из имеющегося списка FTP-сервера с использованием кнопки Delete site, редактировать текущие настройки при помощи кнопки Edit site и импортировать ранее подготовленные списки сайтов посредством кнопки Import.
После того как все необходимые настройки были вами внесены и в списке окна менеджера связи появился ярлык нового соединения, необходимо выделить его щелчком мыши, установить соединение с Интернетом и нажать на кнопку Connect. Можно передавать файлы.
Если соединение с удаленным FTP-сервером будет установлено успешно, на экране появится всплывающее окно, сообщающее о начале сеанса связи. Чтобы окно исчезло, нажмите кнопку ОК. Лишь после этого пользователь получает доступ к главному окну программы CuteFTP, внешний вид которого показан на рис. 4.7.
Рис. 4.7. Внешний вид главного окна программы CuteFTP
Рабочее пространство приложения CuteFTP разделено на три независимых поля. В верхнем, расположенном непосредственно под панелью инструментов с функциональными кнопками, отображаются отдаваемые программой команды и отклики сервера. В левом поле, размещающемся ниже, показано содержимое директории на локальном компьютере, в которой хранятся объекты, предназначенные для публикации на сайте. Чуть выше имеются средства навигации, позволяющие сменить текущий диск и текущую папку. В правом поле отображается содержимое каталога на удаленном сервере, в который вы будете загружать составляющие ваш проект файлы, причем данное поле также снабжено средствами навигации.
Ниже подробно описано назначение функциональных кнопок, расположенных в панели инструментов (рис. 4.8).
Рис. 4.8. Панель инструментов программы CuteFTP
1 — вызов окна менеджера связи для установки соединения с одним из доступных FTP-серверов;
2 — быстрая установка соединения, вызывает окно Quick Connect, аналогичное диалоговому окну Add Host, но с незаполненными полями настроек, куда пользователь может оперативно внести необходимую информацию и начать сеанс связи;
3 — принудительный разрыв текущего соединения;
4 — возобновление разорванного соединения;
5 — приостановка процесса передачи данных;
6 — загрузка данных с локального компьютера на удаленный сервер;
7 — копирование данных с удаленного сервера на локальный компьютер;
8 — добавление файла в очередь. Процедура, противоположная предыдущей, позволяет установить файл в очередь и указать его приоритет на копирование;
9 — просмотр содержимого выделенного файла;
10 — редактирование выделенного файла. Эта опция позволяет вам вносить изменения в содержимое своего документа HTML без длительной процедуры его повторного копирования. Она применяется в основном в процессе отладки web-страниц непосредственно на сервере. Для того чтобы воспользоваться этой функцией, необходимо указать путь к используемому вами html-редактору в поле HTML Editor панели Options, которая находится в меню FTP Settings командной панели программы. Для того чтобы отредактировать какой-либо файл, отметьте его мышью в правом окне CuteFTP, затем щелкните мышью на данной кнопке и нажмите ОК во всплывающем меню. Запустится ваш html-редактор. Завершив редактирование, сохраните файл стандартными средствами и закройте его. Появившееся на экране меню предложит вам на выбор два варианта действий: UPLOAD или CANCEL. Если вы хотите, чтобы изменения вступили в силу, выбирайте UPLOAD;
11 — переименование выделенного файла.
12 — запуск выделенной программы или скрипта на исполнение;
13 — удаление выделенного файла;
Собственно говоря, уже этого небольшого количества встроенных функций CuteFTP вполне достаточно, чтобы поместить необходимые файлы на сервер.Для этого нужно лишь выделить в левом поле при помощи мыши все содержимое локального каталога (C:\MySite), включая субдиректории, и нажать кнопку загрузки данных на удаленный компьютер, обозначенную на рис. 4.8 цифрой 6. CuteFTP сообщит вам о завершении операции копирования. Затем можно разорвать соединение с FTP-сервером и вызвать свою страничку из адресной строки броузера посредством присвоенного вашему сайту URL.
Несмотря на всю простоту процедуры публикации собственного ресурса в Интернете, я остановлюсь чуть подробнее на других возможностях CuteFTP, которые могут вам пригодиться.
Итак, управлять режимом передачи файлов вручную можно посредством меню FTP > Transfer Type, где вам предлагаются на выбор три варианта пересылки данных: режим ASCII, Binary и Auto. С помощью меню Session можно открыть новыйсеанс CuteFTP (опция Spawn Session), сохранить настройки какого-либо соединения в базе данных менеджера связи (пункт Add to Database), а также сделатьтекущие директории на локальном диске или на удаленном сервере открывающимися по умолчанию при запуске программы (опции Save Local Path и SaveRemote Path). Меню Commands позволяет отдавать серверу не только команды, продублированные на панели инструментов, но и директивы, введенные вами с клавиатуры (меню Custom Commands > Define). И наконец, управлять отображением файлов и директорий в соответствующих окнах CuteFTP вы можете при помощи меню View.
Таким образом, в рамках этого урока вы не только создали свою первую домашнюю страничку, но и опубликовали ее в Интернете. В следующем уроке мы проиллюстрируем ваш сайт графическими изображениями.
В этом уроке мы изучили:
