Будакова Е.А. Учебное пособие Современные информационные технологии

Подождите немного. Документ загружается.

131

Рисунок 67

Из схемы видно, что документ состоит из двух основных блоков -

"заголовка" и "тела документа". Заголовок определяется с помощью элемента

HEAD, а тело - элементом BODY.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты

HTML-документа. Тело документа может содержать ссылки на другие

документы, текст и другую форматированную информацию.

Тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>.

Это та часть документа, которая отображается как текстовая и графическая

(смысловая) информация вашего документа.

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст,

заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень

заголовков (самый большой) обозначается

цифрой 1, следующий - 2, и т.д.

Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>

Физический разрыв абзаца может находиться в любом месте исходного

текста

документа (для удобства его читаемости). Однако броузер разделяет

абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>,

ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P ALIGN=left|center|right> позволяют

выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа

Вы можете центрировать все элементы документа

в окне броузера. Для

этого можно использовать тэг <CENTER>. Все элементы между тэгами

<CENTER> и </CENTER> будут находиться в центре окна

132

Разрыв строки <BR> Тэг <BR> извещает броузер о разрыве строки.

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

Данный параметр позволяет выполнить не просто перевод строки, а разместить

следующую строку, начиная с чистой левой (left), правой (right) или обоих (all)

границ окна броузера.

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы

можете

обозначить ее тэгами <NOBR> и </NOBR>.

Цитата <BLOCKQUOTE> Данный тэг предназначен для обозначения в

документе цитаты из другого источника.

Таблица 5 - Список базовых тэгов HTML

Стартовый Завершающий Описание

<HTML> </HTML> Обозначение HTML-документа

<HEAD> </HEAD> Заголовочная часть документа

<TITLE> </TITLE> Заголовок документа

<BODY> </BODY> Тело документа

<H1> </H1> Заголовок абзаца первого уровня

<H2> </H2> Заголовок абзаца второго уровня

<H3> </H3> Заголовок абзаца третьего уровня

<H4> </H4> Заголовок абзаца четвертого уровня

<H5> </H5> Заголовок абзаца пятого уровня

<H6> </H6> Заголовок абзаца шестого уровня

<P> </P> Абзац

<PRE> </PRE> Форматированный текст

<BR> Перевод строки без конца абзаца

<BLOCKQUOTE> </BLOCKQUOTE> Цитата

Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим

WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки

(далее - ссылки), вы делаете набор документов связанным и

структурированным, что позволяет пользователю получать необходимую ему

информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет броузеру

интерпретировать их и выполнять необходимые функции (вызывать методы)

зависимости от типа ссылки. Ссылки могут указывать на другой документ,

специальное место данного документа или выполнять другие функции,

например запрашивать файл по FTP-протоколу для отображения его броузером.

URL может указывать на специальное место по абсолютному пути доступа, или

указывать на документ в текущем пути доступа, что часто используется при

организации

больших структурированных WEB-сайтов.

URL

133

HTML использует URL (Uniform Resource Locator) для представления

гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа.

Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис.

Другая часть URL (после двоеточия) интерпретируется в зависимости от метода

доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Опишем каждый из компонентов URL:

METHOD Имя операции, которая будет

выполняться при интерпретации

данного URL. Наиболее часто используемые методы:

file: чтение файла с локального диска. Имя файла интерпретируется для

локальной машины пользователя.

http: доступ к WEB-странице в сети с использованием HTTP-протокола.

ftp: запрос файла с анонимного FTP-сервера.

mailto: активизирует почтовую сессию с указанным пользователем и

хостом.

telnet: обращение к службе telnet

news: вызов службы новостей,

если броузер ее поддерживает.

SERVERNAME Необязательный параметр, описывающий полное сетевое

имя машины.

PORT Номер порта TCP на котором функционирует WEB-сервер.

PATHNAME Частичный или полный путь к документу, который должен

вызваться в результате интерпретации URL.

#ANCHOR Данный элемент является ссылкой на строку (точку) внутри

HTML-документа.

Структура ссылок в HTML-документе

Пока что мы рассмотрели только

внешний вид URL. Для того, чтобы

броузер отобразил ссылку на URL, необходимо отчетить URL специальными

тэгами в HTML-документе. Синтаксис HTML, позволяющий жто сделать -

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает

его. Любой текст, находящийся между данными двумя тэгами подсвечивается

специальным образом Web-броузером. Обычно этот текст отображается

подчеркнутым

и выделенным синим (или другим заданным пользователем)

цветом.

Графика внутри HTML-документа

Одна из наиболее привлекательных черт Web - возможность включения

ссылок на графические и иные типы данных в HTML-документ. Делается это

при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет

значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах.

Первый

- это внедрение графических образов в документ, что позволяет

пользователю видеть изображения непосредственно в контексте других

134

элементов документа. Это наиболее используемая техника при проектировании

документов, называемая иногда "inline image". Синтаксис тэга:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2

ALIGN=top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL Данный URL указывает броузеру где находится рисунок. Рисунок

должен храниться в графическом формате, поддерживаемом броузером. На

сегодняшний день форматы GIF и JPG поддерживаются большинством

броузеров.

ALT="text" Данный необязательный элемент задает текст, который будет

отображен броузером, не

поддерживающим отображение графики или с

отключенной подкачкой изображений.

HEIGTH=n1 Данный необязательный параметр используется для указания

высоты рисунка в пикселах. Если данный параметр не указан, то используется

оригинальная высота рисунка.

WIDTH=n2 Параметр также необязателен, как и предыдущий. Позволяет

задать абсолютную ширину рисунка в пикселах.

ALIGN Данный параметр используется, чтобы сообщить броузеру, куда

поместить

следующий блок текста.

ISMAP Этот параметр сообщает броузеру, что данное изображение

позволяет пользователю выполнять какие-либо действия, щелкая мышью на

определенном месте изображения.

Новые параметры:

BORDER Данный параметр позволяет автору определить ширину рамки

вокруг рисунка.

VSPACE Позволяет установить размер в пикселах пустого пространства

над и под рисунком, чтобы текст не наезжал на

рисунок.

HSPACE То же самое, что и VSPACE, но только по горизантали.

Фоновые рисунки

Большинство броузеров позволяет включать в документ фоновый рисунок,

который будет матрицироваться и отображаться на фоне всего документа.

Описание фонового рисунка включается в тэг BODY и выглядит следующим

образом: <BODY BACKGROUND="picture.gif">

Добавление стилей в ваш HTML-документ

HTML позволяет использовать различные стили шрифтов

для выделения

текстовой информации в ваших документах. Вот короткий список стилей,

поддерживаемых большинством броузеров:

- bold (жирный)

- italic (наклонный)

- mono spaced (type writer - с использованием фиксированных шрифтов)

Вы можете комбинировать различные виды стилей, например жирный и

наклонный.

Таблица 6

135

Стиль Элемент или тэг Результат

Bold <B> Этот текст жирный </B> Этот текст жирный

Italic <I> Этот текст наклонный </I> Этот текст наклонный

Mono

spaced

<TT> Этот текст с непроп. шрифтом

</TT>

Этот текст с непроп.

шрифтом

Дополнительные стили:

- big (большой)

- small (маленький)

- sub (подстрочник)

- sup (надстрочник)

Таблица 7

Стиль Элемент или тэг Результат

Big Этот текст <BIG> большой </BIG> Этот текст большой

Small

Этот текст <SMALL> маленький

</SMALL>

Этот текст маленький

Sub

Этот текст <SUB> подстрочник

</SUB>

Этот текст подстрочник

Sup

Этот текст <SUP> надстрочник

</SUP>

Этот текст надстрочник

Размер шрифта <FONT SIZE>

Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер

шрифта цифрой, или указать смещение относительно базового значения (по

умолчанию - 3) в положительную или отрицательную сторону. Базовое

значение можно изменить при помощи тэга:

Цвет шрифта <FONT SIZE>

Вы можете изменить цвет шрифта

при помощи тэга: <FONT

COLOR="#xxxxxx>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания

размерности каждой компоненты цвета в шестнадцатиричном формате.

3.2.2 Программные средства для создпния web-страниц

Простейшие средства создания веб-страниц

Как уже говорилось выше, веб-страницы кодируются на языке

гипертекстовой разметки — HTML. Вообще говоря, чтобы написать HTML-

файл, достаточно иметь любой текстовый редактор, лишь бы он умел не

добавлять в текст свои специальные символы. Самый простой вариант — это

редактор Notepad (Блокнот), входящий в стандартную поставку Windows

136

(рисунок 68). Собственно говоря, это именно то, что нужно, — простейшая

программа, сохраняющая написанный текст именно в том виде, в котором он

был введен, и ничего лишнего.

Рисунок 68 - Код HTML в текстовом редакторе Блокнот

Однако в очень простых текстовых редакторах типа Блокнота весь HTML-

текст приходится писать вручную, а многим хотелось бы какую-то часть

работы автоматизировать. Учитывая это желание, разработчики создали

специализированные средства, призванные облегчить труд веб-программиста

(как иногда называют тех, кто пишет код HTML, в отличие

от веб-дизайнеров,

которые придумывают внешний вид и иногда даже пытаются воплотить его,

используя программы работы с графикой).

Веб-редактор TextPad

Тем, кто предпочитает набирать код HTML вручную, но кому не хватает

функциональности Блокнота и подобных ему программ, можно посоветовать

программу под названием TextPad. Эта программа по сути весьма похожа на

Блокнот, однако разработчики

специально предусмотрели некоторые удобства

для того, чтобы писать код HTML. Это выражается в том, что при написании

HTML -документа все теги автоматически подсвечиваются синим цветом, их

атрибуты — темно-синим, а значения атрибутов — зеленым (цвета можно

настроить по собственному желанию, так же, как и шрифт). Это очень удобно.

К примеру, если автор случайно

ошибется в имени тега или атрибута, то оно

останется черным, и он сразу поймет, что здесь что-то не то.

В отличие от Блокнота, TextPad — редактор многооконный. В нем можно

открыть сразу несколько документов и работать, легко переключаясь между

ними с помощью списка в левой части окна или вкладок в нижней

части.

Веб-редактор TextPad позволяет автоматизировать набор многих тегов.

Если не хочется набирать их вручную (многие этого не любят просто из-за того,

что приходится переключаться на латинский шрифт), то там приведен список

наиболее распространенных HTML-тегов, которые можно вставлять в свой

основной текст двойным щелчком мыши. Правда, в списке указаны не сами

теги, а их описание.

Кроме списка тегов TextPad предоставляет нам также возможность

выбирать из списка специальные символы (список HTML Characters), а также,

если потребуется, любой управляющий символ, например символы

псевдографики DOS и другие.

137

Веб-редактор Arachnophilia

Как и в предыдущем случае, программа автоматически подсвечивает

синим цветом теги и атрибуты, а значения атрибутов — зеленым, что улучшает

зрительное восприятие, хотя проверка правильности тегов и отсутствует. Зато

если случайно забыть закрыть тег, то все последующее содержимое файла

подсветится бордовым цветом, так что ошибка сразу бросится в глаза. В

программе Arachnophilia предусмотрена автоматизация ввода тегов HTML. В

нижней части окна имеются кнопки, каждая из которых открывает

соответствующую кнопочную панель. На этих панелях расположены кнопки

для быстрого ввода тегов.

Нажатие некоторых кнопок вызывает появление диалоговых окон.

Например, нажав на кнопку Color (Цвет), можно открыть стандартное

диалоговое окно выбора цвета, а с помощью кнопки TableWiz (

Мастер таблиц)

открывают диалоговое окно Table Wizard (Мастер таблиц), средствами

которого можно предварительно задать количество строк и столбцов в таблице,

а также определить ее ширину, цвет линий и некоторые другие параметры .

Отличительной особенностью программы является возможность легкого

просмотра веб-страницы в различных броузерах, для чего в меню Preview

(Предварительный просмотр) предусмотрен пункт Identify Browser (Указать

Лроузер). Здесь можно назначить до шести различных броузеров, в каждом из

которых легко открыть создаваемый HTML-файл для просмотра, даже не

сохраняя его на диске.

Однако самым замечательным свойством программы, пожалуй, является

функция Instant View (Немедленный просмотр), которая доступна в меню

Preview (Предварительный просмотр). Если она включена и внутренний

броузер, который также имеется в

программе, открыт, то все изменения,

вносимые в текст HTML, немедленно отображаются на экране! Правда, в

некоторых случаях, программа не успевает за вводом данных и изображение в

окне броузера может исчезать.

Веб-редакторы типа WYSIWYG

Мы рассмотрели программы, в которых основной упор при создании веб-

страниц сделан на написание HTML-коца. вручную. Однако существуют

программы

, позволяющие редактировать веб-страницы как бы в режиме

WYSIWYG.

На самом деле обычно из этого ничего хорошего не получается. Это

связано с тем, что автор создает не код, а оформление страницы, после чего

программа автоматически подбирает для нее код, который соответствует тому,

что задумал автор. Обычно на странице оказывается много совершенно

лишнего кода.

Редактор Star Office

Более мощными средствами редактирования HTML-файлов располагает

программа StarOffice. Здесь при открытии или создании HTML- файла

соответственно меняется содержимое некоторых меню, что позволяет

достаточно эффективно работать с HTML кодом. Самым приятным моментом

138

здесь, пожалуй, является возможность установить флажок HTML Source

(Исходный код HTML) в меню View (Вид), который отключает режим

WYSIWYG и позволяет работать с исходным HTML-текстом, в котором все

теги и их атрибуты подсвечены красным цветом. По своему усмотрению можно

редактировать как исходный текст, так и отображаемый результат,

переключаясь между режимами командой HTML Source (Исходный код HTML)

из меню

View (Вид). В отличие от других WYSIWYG-редакторов, StarOffice

довольно корректно удаляет ненужные элементы при отмене пользователем

каких-либо действий и не вставляет лишних комментариев. При этом он

довольно активно использует каскадные таблицы стилей (CSS).

Перед подсветкой теги проверяются на корректность — ошибочно

написанные теги красным цветом не выделяются. Однако надо иметь в виду,

что

программа не понимает новых тегов, таких, как <BUTTON> , <LABEL> и

пр.

Netscape Composer

Еще одна WYSIWYG-ориентированная программа для редактирования

.HTML-файлов встроена в броузер Netscape. Средства верхней

инструментальной панели позволяют вставить в файл изображение (Image),

горизонтальную линию (H.Line), таблицу, гиперссылку (Link) или якорь

(Anchor). Ниже расположена небольшая панель для управления начертанием

шрифта (полужирное, курсивное, подчеркнутое), а также его размером,

отступом и выключкой. Здесь же можно выбрать цвет фона. С помощью

выпадающих меню доступно еще несколько HTML-элементов.

Как разместить веб-страничку на сервере

Для этого существует несколько способов. В принципе, можно это

сделать, даже никуда страничку не копируя, но это имеет смысл, лишь, когда

свой компьютер постоянно подключен к Интернету (например

, с

использованием выделенной линии).

Где найти сервер для публикации

Не все имеют постоянное соединение с Интернетом. Тем, у кого

соединение временное, гораздо проще разместить свою веб-страничку на

каком-нибудь чужом компьютере, специально для этого настроенном.

Как отправить материалы серверу

Получив место на сервере, можно загрузить туда все файлы своей

странички. Для этого удобнее всего воспользоваться так называемым FTP-

соединением. При этом процесс загрузки файлов на сервер визуально мало

отличается от привычного процесса копирования файлов.

Если вы собираетесь часто обновлять свою страницу, вам будет полезна

служебная программа Ftpweb. Эта программа может отслеживать, какие файлы

странички были изменены с момента последней загрузки, и автоматически

копировать их на сервер. От нас практически ничего при этом не требуется,

кроме нажатия на кнопку Process (Исполнить). Программу до сих пор можно

загрузить с сервера компании, хотя, к сожалению, новых ее версий не

выпущено и, по всей види- мости, их выпуск не планируется.

139

Доменные имена

Как мы уже говорили выше, любой компьютер в Интернете имеет свой

уникальный IP-адрес. Поэтому, если страничка лежит на компьютере с IP-

адресом, например, 194.34.45.8 в каталоге /Мураде, то любому пользователю

для ее просмотра достаточно набрать в адресной строке броузера следующий

адрес: http://194.34.45.8/Mypage. Однако запоминать и вводить адреса в

цифровом виде не слишком

удобно. Для облегчения задачи существует система

так называемых доменных имен (DNS — Domain Name System). Большинству

IP-адресов поставлено в соответствие некоторое название — доменное имя.

Например, сайт Интернет-провайдера “Гласнет” находится по адресу

http://www.glasnet.ru. Согласитесь, что запомнить и набрать такую запись

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

Доменные имена читаются справа налево. Та часть доменного

имени,

которая расположена непосредственно перед последней точкой, называется

доменным именем второго уровня. Домены второго уровня выдаются (обычно

за деньги) владельцами доменов первого (верхнего) уровня. В любом случае,

иметь собственный домен второго уровня считается достаточно престижным.

Владельцы доменных имен второго уровня, в свою очередь, могут

распоряжаться доменными именами третьего уровня и т

. д., но дальнейшее

развертывание имен в большинстве случаев имеет только декоративный смысл.

Крайнюю левую позицию в записи доменного имени занимает сетевое имя

компьютера (в локальной сети), на котором работает серверная программа.

Многие дают этому компьютеру имя www, чтобы подчеркнуть, что его ресурсы

относятся к службе World Wide Web — тогда доменное имя сайта начинается с

сочетания www.

Поясним сказанное на примере. Предположим, что имеется пользователь

Сергей Сергеев, который зарегистрировался у провайдера Black Line, выбрав

себе регистрационное имя (логин) sergesergeev. У провайдера, разумеется, есть

собственный сервер и сайт с адресом www.blackline.ru. На этом сервере

провайдер размещает веб-странички своих пользователей, каждую в отдельном

каталоге. После того как Сергей Сергеев разместит свою веб

-страничку на

сервере провайдера, она будет, скорее всего, иметь адрес

www.blackline.ru/~sergesergeev или просто www.blackline.ru/sergesergeev.

Некоторые провайдеры вместо имени каталога позволяют использовать

регистрационное имя в качестве домена третьего уровня, например, так:

www.sergesergeev. blackline. ru.

Если же Сергей Сергеев решил разместить свою страничке на бесплатном

сервере, например, в сообществе Geocities, то там ему выдадут какое-нибудь

длинное

имя, например: www.geocities.com/SiHconValley/6285. Сообщество

Geocities — это виртуальный город со своими виртуальными улицами,

кварталами и домами. Веб-страница клиента в этом “городе” — это как бы

отдельное виртуальное домовладение. “Жители” этого “города” стараются

селиться на тематических “улицах” по общим интересам, чтобы в свободное от

основной работы время заходить друг к другу “в гости”. На

самом деле,

140

конечно. Silicon Valley (Кремниевая долина) — это просто каталог на жестком

диске, и возможно, что и “домовладение” (то есть веб-страничка) с номером

6285 в нем уже реально существует.

На первый взгляд, размещать свою Web-страничку на сервере,

предоставляющем такой длинный адрес, не очень удобно, и многие стараются

использовать место, которое предоставляет собственный сервис-провайдер.

Однако вспомните о том, что сервис-провайдеров часто меняют. Если мы

разместим свою страничку у провайдера, а затем решим его сменить, то

потеряем к ней доступ. Тогда наши посетители, скорее всего, еще долго будут

созерцать ее в законсервированном виде — ведь мы не сможем ее обновлять.

Зато когда веб-страничка расположена на

Geocities или ином подобном сервере,

никак не связанном с сервис-провайдером, то менять провайдеров можно

сколько угодно без всякого ущерба для себя.

Здесь и далее все имена и названия гипотетические. Например, провайдера

Black Line у нас не существует. В тех случаях, когда используются реальные

названия, это специально указано в тексте.

Логин (login, от log in) —имя

для входа в систему.

Здесь и далее мы опускаем префикс http://, указывающий на

соответствующий сетевой протокол, поскольку в большинстве программ

просмотра веб-страниц протокол http определен по умолчанию и данный

префикс добавляется к адресу автоматически.

Можно, конечно, обо всем позаботиться заранее и поставить, например,

переадресацию на новое местоположение странички, пока еще есть

доступ к

старому серверу. Однако не всегда у нас бывает возможность сразу обо всем

подумать...

Регистрация имен

А как быть, если хочется сделать адрес странички более коротким,

запоминающимся? Для этого существуют многочисленные службы

переадресации, например: come.to, www.da.ru, attend.to (все названия реальные).

Например, если Сергей Сергеев разместил на своей страничке информацию о

своей фирме “Филин

”, он может бесплатно зарегистрировать такие имена, как

filin.da.ru(или www.filin.da.ru), come.to/filin и т. п. При этом пользователь,

набравший эти адреса в своем броузере, будет автоматически

переадресовываться на веб-страничку, размещенную где угодно: на сервере

провайдера, на сервере Geocities или еще где-нибудь.

Ну, а если вы хотите приобрести для себя домен второго уровня (например

www.filin.ru), то вам придется обратиться в соответствующую организацию.

Так, например, распределением имен в домене .ru занимается организация

РосНИИРОС (www.ripn.ru). За регистрацию в этом случае придется заплатить

деньги, однако в итоге вы будете иметь легко запоминающийся адрес. Кстати,

многие пользователи, игнорируя услуги поисковых машин, часто пытаются

найти веб-странички, набирая наугад адреса типа www.имя

.Компания.ru, так

что, имея такое имя, вы получаете большие шансы на посещение.