Первая Web-страница

Реферат

Первая Web - страница



В среде web-дизайнеров почему-то принято считать, что на свете существуют всего две методики создания web-страниц. Первая заключается в использовании объектно-ориентированных сред разработки html-документов, так называемых web-редакторов. Web-мастеру, использующему в своей работе подобную программу, по большому счету не нужно знать HTML: достаточно лишь уметь обращаться с данным приложением и щелкать мышью. Весь необходимый код редактор генерирует сам. Не удивительно, что такой подход считается «непрофессиональным», поскольку в данной ситуации создатель web-ресурса не может гибко управлять структурой разрабатываемых им документов, а сами эти редакторы по качеству работы весьма далеки от идеала. Второй подход, считающийся «верхом профессионализма», подразумевает написание всего кода вручную, с применением стандартного текстового редактора MS Windows --программы Notepad, известной также как Блокнот. Скажу по секрету, что раньше я поступал именно так. И не потому, что, пользуясь молодежной терминологией, «косил под профессионала», а просто в силу отсутствия в те времена визуальных редакторов: они получили широкое распространение на российском рынке программного обеспечения чуть позже.

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

На серверах Интернета, содержащих рекомендации по web-дизайну, а также на форумах и конференциях, посвященных той же тематике, постоянно звучит определенный набор «комплиментов» в адрес WYSIWYG-редактора Microsoft FrontPage. Все они сводятся в основном к тому, что данная программа, мягко говоря, значительно уступает другим аналогичным пакетам, а в ряде случаев вообще непригодна для создания web-страниц. Подозреваю, что общественное мнение сформировалось таким образом в первую очередь потому, что FrontPage является продуктом Microsoft. Смею вас заверить: как инструмент для разработки шаблонов html-документов, которые впоследствии все равно дописываются и отлаживаются вручную, Microsoft FrontPage вполне подходит, поскольку полностью отвечает всем требованиям, предъявляемым обычно к подобным приложениям: эта программа удобна, оснащена достаточно дружественным интерфейсом, проста в установке, изучении и использовании. В принципе для создания шаблонов web-страниц можно использовать любой другой web-редактор, это дело вкуса. Я не стану настаивать на том, чтобы вы непременно сделали Microsoft FrontPage своим основным инструментом: изучив основы разработки html-документов, можно без труда освоить и применять любой редактор. Тем не менее дизайнеры, на чем свет стоит ругающие данный программный продукт и утверждающие, что создают свои проекты исключительно посредством Notepad (тоже, заметьте, продукт Microsoft), на мой взгляд, несколько лукавят. Анализируя код некоторых их творений, я часто видел весьма характерную строку в разделе описания метаинформации: <meta name="GENERATOR" content="MicrosoftFrontPage 3.0">.



Изучаем HTML

Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы -- в данном случае, html-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование -- «теги» (от англ, tag -- отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Итак, упрощенная структура документа HTML выглядит следующим образом

Рис. 1. Упрощенная структура html-документа



У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, -- парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:

<тег>0брабатываемое значение</тег>

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

<тег1>

<тег2>0брабатываемое значение</тег2></тег1>

ВНИМАНИЕ При роботе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором браузера.

Однако вернемся к изображенной на рис. 1 структуре документа HTML. Как видно из иллюстрации, основной, глобальной конструкцией внутреннего кода web-страницы является нечто, обозначенное на рисунке прямоугольником с надписью «Документ HTML». Вполне логично было бы предположить, что это «нечто» -- какая-то специальная команда, призванная «объяснить» браузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда действительно есть. Называется она «тег верхнего уровня» и записывается так:

<НТМL>.Содержимое </НТМL>

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

Следующим на очереди у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа». Для чего нужен этот заголовок?

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

<HEAD> Содержимое </HEAD>

Из приведенной схемы видно, что раздел HEAD следует в html-документе непосредственно за тегом <HTML> и является второй обязательной командой, которую необходимо включать в код web-страницы.

Перейдем к следующему объекту html-документа -- разделу «Внешний заголовок», который, как показано на схеме, является вложенной командой тега <HEAD>. Мнемоника внешнего заголовка записывается следующим образом:

<ТITLE>Внешний заголовок</TITLE>

Чем же «внешний заголовок» отличается от просто «заголовка» документа HTML? Все очень просто: именно он отображается в верхнем поле браузера в качестве названия страницы при ее открытии, и именно значение тега <TITLE>подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное». Непонятно? Взгляните на рис. 2.

Рис. 2. Значение тега <TITLE>

Теперь, уверен, все неясности ликвидированы. Последняя структурна составляющая кода web-страницы -- раздел «Тело документа».

Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.

Теперь мы располагаем достаточным объемом информации для того, чтобы представить нашу абстрактную графическую схему в виде вполне конкретного кода HTML:



<HTML>

<HEAD>

<ТITLE>Моя первая web-страничка</TITLE>

</HEAD>

<BODY>

</BOOY>

</HTML>

Создайте с помощью Проводника Windows новую директорию на вашем жестком диске и назовите ее, например, «MySite». Внутри этой папки создайте каталог с названием «images», туда вы будете впоследствии помещать иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие действия: открыть Блокнот (Пуск > Программы > Стандартные > Блокнот), набрать в нем полученный выше код, сохранить текущий файл в папке «MySite» под именем index.html, воспользовавшись функцией «Сохранить как», и открыть его в браузере путем двойного щелчка мышью на значке данного файла в Проводнике. Вы получили свою первую web-страничку (рис. 3).

Рис. 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 позволяет опускать кавычки для следующих видов атрибутов:

· Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр.

· Атрибуты, состоящие только из цифр от 0 до 9.

· Атрибуты, обозначающие промежутки времени.

Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER.

Регистр записи команд. HTML является одним из немногих языков программирования, не чувствительных к регистру, в котором вы записываете команды (в данном случае -- теги и имена их атрибутов). Интерпретатор браузера одинаково обработает директивы<HEAD>, <head>, <Head> или <hEaD>. Иными словами, вы вольны записывать теги как в строчном, так и в заглавном варианте, на собственный вкус. Однако рекомендуется все же применять для написания тегов HTML заглавный регистр, прежде всего, для улучшения читаемости кода, поскольку в этом случае команды языка будет легко отличить от интегрированного в документ информационного текста. Единственным исключением из этого правила служат два элемента HTML, небезразличных к регистру. Это адреса URL и escape-последовательности, о которых мы подробно побеседуем ниже.



Escape-последовательности

Иногда у web-мастера возникает необходимость использовать в тексте своей web-странички символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки (символы «<» и «>»), в которые обычно заключаются теги, прямые кавычки («"»), употребляемые при задании значений атрибутов, и т. д. Иными словами, web-мастеру необходимо, чтобы данные символы отображались в окне браузера «как есть», то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов, и были придуманы так называемые escape-последовательности, или, как их еще иногда называют, «нотации символьных объектов». Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа амперсанд («&») и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в строчном регистре. В табл. 1 приведен список наиболее часто используемых escape-последовательностей.

Таблица 1. Наиболее распространенные escape-последовательности

Символ	Значение	Команда
< > " & © ®	Символ «меньше, чем»; левая угловая скобка Символ «больше, чем»; правая угловая скобка Прямые кавычки Амперсанд Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе) Символ копирайта Символ зарегистрированной торговой марки	&lt; &gt; &quot; &атр; &nbsp; &сору; &reg;

Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где по расчетам web-мастера должен следовать соответствующий служебный символ. Например, строка html-кода

На этой страничке изложены мои &quot: мысли вслух &quot; по данному вопросу отобразится в окне браузера следующим образом:

На этой страничке изложены мои "мысли вслух" по данному вопросу

Перевод строки, пробелы, табуляция

При подготовке 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. Обозначение данных цветов приведено в табл. 2.

Таблица 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>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Примером использования этой команды может служить следующий отрывок кода 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>.

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

Элемент <FONT>

Теперь вы знаете, что управлять размером выводимого на экран текста можно при помощи тегов <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-совместимых платформ, который носит название Lynix.

Атрибуты тега <BODY>

О теге <BODY>, обозначающем тело (основную часть) документа HTML, мы уже говорили в начале этого урока. Необходимо добавить лишь то, что данная команда также может иметь атрибуты, использование которых в ряде случаев бывает весьма полезно, а иногда -- просто необходимо.

В общем виде синтаксис записи тега <BODY> со всеми допустимыми атрибутами выглядит так:

<BODY BACKGROUND="URL" BGCOLOR="значение1" ТЕХТ="значение2" LINK="значение3" VLINK="значение4" ALINK="значение5">

тело документа HTML

<BODY>



Атрибут BACKGROUND позволяет дизайнеру поместить на web-страницу некий фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например,"Ошибка! Недопустимый объект гиперссылки."), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ".. 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, необходимо сказать еще о двух элементах оформления текстовых файлов, а именно -- о нумерованных и маркированных списках. Они были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Вот простой пример организации маркированного списка:

· Вхождение 1

· Вхождение 2

· Вхождение 3

· Вхождение n.

На языке 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", нумерация начинается с первого элемента в каждом из типов маркировки.

Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:

1. Вхождение 1

· Вхождение 1-а

· Вхождение 1-6

2. Вхождение 2

· Вхождение 2-а

· Вхождение 2-6

На языке 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-страницей либо независимым объектом -- файлом или изображением. В качестве гиперссылки может выступать не только часть текста, но и графический элемсит. Как правило, текстовая гиперссылка выделяется на странице подчеркиванием и цветом.

О правилах представления в качестве гиперссылки графических изображений мы подробно побеседуем в пятом уроке. Что касается текстовых гинерссылок,то их можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.