1.1 Вступление.Без преувеличения можно сказать ,
что получение информации посредством
Интернет-страниц(WEB-pages,html-pages) наиболее популярен.Для создания
подобных документов необходимо иметь хотя бы общее представление о
структуре html - файла.
HTML(HyperText Makeup
Language - язык создания гипертекстовых документов) - стандарный
сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день
последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до
полненая по сравнению с версией 3.2
Данный
документ не является ни переводом какого-либо стандарта , ни сопутствующим
комментарием, его цель - предоставление общих знаний о формате HTML и
путях его создания.
2.1 Что такое HTML ?На самом деле ,если вы
откроете файл с расширением htm (или html) в любом текстовом редакторе, вы
увидите,что это не что иное, как ... обычный текст, правда "испорченный"
какими-то словами в угловых скобках.Эти "ненужные" слова и представляют
собой средства разметки текста, которые понимает программа, работающая с
html-файлами(такую программу называют браузер).Похожий принцип построения
докуметов не нов, и встречается ,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем
енты - тэги (удобное представление этой самой информации). Одсюда
следует, что для того, чтобы создать гипертекст,нужно всего лишь знать
как, куда и в каком количестве "вносить" эти управляющие элементы.
2.2 Тэги.Тэги - (от англ. tag) это средство,
позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде,
удобном для восприятия, пои ска, чтения.Это в своем роде язык
программирования, определяющий ,как будет выглядеть на экране следующая
строка, что нужно выделить, а что - наоборот - столь очевидно,что нет
необходимости это подчеркивать. Тэгом считается определенное выражение,
помещенное в скобки вида <>. Весьма условно тэги можно разделить на
граничные и унарные.Унарные тэги представляют собой очевидные операции,
предписывающие браузеру совершить определенное действие по постижению
данного тэга при обра ботке html - документа.Пример - наиболее часто
употребляемый тэг <BR> - переход на другую строку, весь следующий за
ним гипертекст браузер будет представлять, начиная с новой строки.Унарные
тэги не относятся к определенным участкам текста,а ,скорее всего, к всей
последующей части документа.С граничными тегами сложнее, но надо
учитывать, что их много больше , нежели унарных.Граничные тэги определяют,
как будет выглядеть на экране пользователя часть текста,определеная этими
элементами, причем в начальном тэге можно указывать различные
параметры,опреде ленные данному тэгу, в конечном тэге эти параметры
присутствовать не должны(браузером они игнорируются).
Пример
граничного тэга: гиперссылка <a
href="http://uic.tula.ru/">Сервер ТулГУ</a>
Здесь
- a - управляющее слово, показывающие, что текст вплоть до тега
</а> ,будет являться гипертекстовой ссылкой (то есть указнием
браузеру просмотреть определенный html - документ при совершении
управляющего действия ( шелчка мыши) над "ограниченным" текстом)
- href="..." http - сервис))
Некоторые параметры
определены по умолчанию браузером, некоторые- пользователем браузера,но
есть и такие,определять которые необходимо при создании страницы(пример -
тотже параметр href тэга <a>).
Из всего вышесказанного
следует, что ,зная наиболее употребляемые тэги и их параметры, любой
пользователь легко может редактировать и создавать гипертекст.При этом
необходимо учитывать, что тэги могут включать в себя другие тэги, а так же
необходимо иметь представление о структуре html - документов.
2.3 Структура HTML - документов.Структура
гипертекстовых файлов черезвычайно проста.HTML-документ должен начинаться
тэгом <html> и заканчиваться </html>.Информация вне этих тэгов
игнорируется,либо выдается в нелицеприятном виде. Помимо этого все,
огражденное тегами <html> и </html> делится на две части:
- заголовок(меньшая часть)
Ограничивается тэгами
<head> и </head>.Содежит, как правило мета-информацию,то
есть дополнительные данные о странице, и заголовок страницы,выносимый
как правило в заголовок окна браузера(в оконной графической системе).
Рассматривать представление мета-информации в данном тексте не имеет
смысла,поскольку она не играет никакой роли при визуализации
страницы.Заголовок определяется тэгами <title> и
</title>,эго присутствие необязательно,но желательно.
Тэги
<head> и <title> параметров не имеют.Эта часть документа
может отсутствовать.
- основная часть документа (тело)
Ограничивается тэгами
<body> и </body>.Определяет то,что выводится в главном окне
браузера.Здесь сосредотачивается вся несомая страницей информация.Так же
может отсутствовать при использовании фреймов.
Тэг <body> имеет следующие (необязательные) параметры:
- background="img.gif" - на задний план документа помещается
изображение из файла img.gif
- bgcolor="RED" - цвет заднего плана, если преведущий параметр не
определен(о представлении цвета в HTML смотрите следующую часть главы)
- text="BLACK" - цвет текста документа
- link="RED" - цвет гиперссылок документа
- vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
и другие.
<html>
<head>
<title>Заголовок</title>
</head>
<body bgcolor="WHITE" text="BLACK" link="BLUE">
.
.
Тело документа
.
.
</body>
</html>
Области <head> и <body> не
пересекаются.Любая информация вне них,но внутри <html>-области
инорируется, если не несет с собой управляющий характер(например,
является java-скриптом).
2.4 Представление цвета в HTML.Цвет в
гипердокументах представляется в виде трех двухбайтных составляющих,
записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая
определяет количество базисного цвета (по системе RGB) в данном.То есть
вы можете в одном из параметров тэга <body> вместо "WHITE" указать
"#ffffff", где # указывает ,что следующее число шестнадцатиричное, а
каждая из световых компонент (напомню, здесь используется аддитивная
модель цветопередачи) имеет значение ff, то есть участвует в
формировании цвета полностью.Соответствено базисные цвета могут быть
представлены:
#ff0000 RED красный
#00ff00 GREEN зеленй
#0000ff BLUE синий
Наиболее часто используемые сочетания трех компонент занесены в
таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций
имеет определенное название, распознаваемое браузером.Именно в таком
виде определялись цвета в примере с тэгом <body>.
2.5 Основные тэги HTML. В этой части главы
будут кратко описаны наиболее часто встречаемые тэги гипертекстового
языка.Более подробно они описаны в спецификации и разного рода
справочной и учебной литературе.
Тэги, оределяющие отображение текста
- размер шрифта
<h1> - определяет следующий до закрывающего тэга текст как
заголовок первого уровня (размер букв - максимально
допустимый)
<h2> - ..
<h3> - .. размер букв изменяется пропорционально
<h4> - .. в сторону допустимого минимума
<h5> - ..
<h6> - размер букв -минимально допустимый
<big> - максимально допустимый шрифт
<small> - минимально допустимый шрифт
(Границы допустимости шрифтов задаются браузером, используя
среднее значение, определяемое ,как правило, пользователем)
- вид надписи
<i> - (italic) наклонный шрифт
<b> - (bold) шрифт с выделением толщиной символов
<u> - (underline) подчеркнутый текст
<tt> - (teletype<blink> - надпись
<p> - форматированный вывод текста (широко использует MS Word 8)
Кроме того существует тэг, определяющий тип шрифта, размер и
цвет <font face="......" size=. color="#......" > -
где
face - тип шрифта (не стоит увлекаться
экзотическими шрифтами, поскольку они могут отсутствовать в системе
клиента)
size - размер (варьируется от 1 до 6) в
относительных единицах.Его также можно задавать относительно
,например : size=+1 (увеличить текущее логическое значение на 1)
color - задает цвет шрифта. Вышеописанный
тэг очень удобен для выделения цветом той или иной строки.
- форматирование текста (и других элементов)
<center> - выравнивание по центру
<left> - выравнивание по левой границе
<right> - выравнивание по правой границе
- Теги,отвечающие за формирование списков
- <ul>
- <menu> - Эти два тэга определяют ограничиваемую область как
список с соответствующим отступом от левой границы
документа
- <li> - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)
Списки могут быть вложенными, то есть элементом одного из
списков может быть другой список.
- Тэги общего характера
<img src=".." alt=".." width=. height=.> -
Вставка в документ графической информации.(Злоупотребление этим
тэгом снижает посещаемость страницы!)
Параметры:
src="имя-файла" alt="текстовой-аналог" - применяется в случае,
если у клиента отключена загрузка графических изображений.
width - Ширина изображения в пикселах (может не
соответствовать реальному).
height - Высота изображения в пикселах.
<hr width=..> - разделяющая части документа
линия.Параметр width определяет длину как в абсолютных(пикселах),
так и в относительных единицах(процентах).
<br> - тэг начала новой строки.
- code><!-- - тэг комментария.Следующий текст
игнорируется до появления --!>.
<a href=" "> - тэг гипертекстовых
ссылок.Может адресовать документы в :
- глобальной сети
Параметр href содержит полный (с
адресои ЭВМ, содержащий данный файл) путь и имя файла.
- файл на данной машине (необязательно html-документ)
Параметр href содержит путь к файлу относительно текущего
каталога и имя файла.
- метку в текущем документе
<a href="#001">.Метки задаются тем же тэгом, но с другим
параметром <a name=" ">, где name - имя метки (# - не
используется!).Примет для 001 - <a name="001">
2.6 Работа с таблицами в HTML. Таблицы в HTML -
это один из мощных инструментов представления информа ции.Они
описываются набором тегов, почти каждый из которых имеет свои
параметры.Рассмотрим основные:
<table bgcolor=.. border=.. width=.. cellpadding=..
cellspacing=..> - объявление таблицы и определение некоторых
параметров
bgcolor - цвет фона таблицы
width
- ширина таблицы в абсолютных и относительных единицах
border - ширина рамки таблицы (в пикселах)
cellpadding - отступ от границ при визуализации
табличного контента (в пикселах) cellspacing - промежуток
между ячейками таблицы (в пикселах)
<caption> - заголовок таблицы.Как правило,
применяется после объявления таблицы
<th> - заголовок каждого столбца.
<tr> <td>, определяющим
вертикальныеразделяющие линии при визуализации таблицы.То есть
область, ограничиваемая тэгом <tr> включает в себя одну или
несколько областей, ограниченых тегом <td>, определяющим, что
будет находится в каждой ячейке на данной строке.
Пример: HTML - решение:
Нужно построить таблицу: <table>
<tr>
<td>1</td><td>1</td><td>3</td>
1 1 3 </tr>
2 2 3 <tr>
<td>2</td><td>2</td><td>3</td>
</tr>
</table>
Последние три тэга имеют ряд параметров:
colspan=.. - "растянуть" данную ячейку в ширину на
указанное целое число ячеек. (неприменимо к tr)
rowspan=.. - аналогично, но действие происходит по
вертикали.
bgcolor=.. - задание цвета фона для каждой ячейки
2.7 Фрэймы. Фрэймы - это окна
независимого просмотра различных html - документов. Иногда бывает очень
удобно организовать навигацию по странице в виде меню в отдельном
фрейме, и основного окна, где будет представлятся вся информация,
определяемая действиями пользователя в области меню.Здесь окно нужно
понимать как часть рабочей области браузера, а не как отде льное от нее
окно в среде Windows или X11 (хотя при помощи JavaScripts возможно и
такое).Поясню действие фреймов на примере:
Создадим 2 фрэйма:
меню и информационное окно. Основной html-файл будет выглядеть так:
index.htm <html>
<!--
Замечу, что это тот случай,когда <body> может отсутстовать
--!>
<frameset cols="20%,80%" border=0>
<!--
Оъявление фреймов.Они будут располагатся вертикальными полосами
(об этом говорит параметр cols, для горизонтальных полос нужно
вместо него использовать параметр rows) и занимать 20 и 80 проце
нтов рабочей области.Параметр border определяет границу между
фрагментами.
--!>
<frame src="menu.htm" name="Menu">
<!--
Определение документа, начально загружаемого при открытии этого
файла.Парметр name (имя фрейма) необходимо указывать.
--!>
<frame src="hello.htm" name="Info">
</frameset>
</html>
Стоит учитывать, что фреймы могут быть вложенными.
menu.htm <html>
<body>
<br>
<a href="about.htm" tagert="Info">
About me
</a>
<br>
<a href="books.htm" tagert="Info">
My favorite books
</a>
<br>
<a href="link.htm" tagert="Info">
Nice links
</a>
</body>
</html>
Замечу, что у тэга <a> появился параметр tagert, указывающий
на фрейм Info.Это означает, что при нажатии на ссылку искомый документ
загрузится не в текущий, а в определяемый tagert фрейм. Вот так,
довольно просто можно организовать навигацию по стра ницам припомощи
фреймов.Однако с развитием технологии SSI (о ней далее) многие
Web-дизайнеры предпочитают организацию сопровождения по сайту при
помощи таблиц.
2.8 Неупомянутые тэги. После всего того, что
было сказанно, остается еще достаточно большое количество неупомянутых
тэгов, которые можно использовать для приукрашения и придания большей
функциональности уже существующей странице.Не буду останавливаться на
них - в Сети достаточно много страниц, посвященных Web-дизайну - вспомню
лишь некоторые:
Тэги
<form>,<input>,<textarea>,<select>
и <option> предназначены для организации так
называемых заполняемых форм, являющихся по сути дела обратной связью во
взаимодействии "клиент-сервер". Тэги <map> и
<area> необходимы для использования в качестве меню
одного графического изображения.Разным участкам этого изображения
ставится в соответствие разлчные документы, при активизаци (нажатии)
участка происходит переход на другой документ, аналогичный переходу при
нажатии на гиперссылку. И,наконец, тэг <embeed>
позволяет встраиватьв документ файлы раз личных форматов (например,
midi-музыку).При получении такого файла браузер пользователя (если у
него доступны функции, отвечающие за работу с этим файлом) сам отобразит
этот файл как часть общего до кумента, не прибегая к помощ сторонних
приложений.
3.1 Технологии создания динамических HTML - документов.
широчайших просторах их практического применения, кратко перечислю
технологии,позволяющие их реализовать.Надо заметить,что и сам
HTML-документ достаточно динами чен (например,), потому результаты,
выдаваемые различными машинами с разными браузерами,будут
различны.Однако это не является препядствием для появления новых
программных средств и технологий, имеющих в качестве выходного формата
HTML.
JavaScript - объектно-ориетированный скрипт-язык с
ограниченным количеством классов(Java-язык, адаптированный под
HTML).Исполняется на стороне клиента его браузером, что влечет за собой
определенные трудности - не все браузеры поддерживают данную технлогию,а
в остальных ее версии довольно сильно различаются и одни и те же
скрипты, уверенно работающие на одном браузере, не воспринимаются на
другом.
CGI (Common Getaway Interface) - за этой
аббревиатурой кроется принцип передачи результатов программы, работающей
на сервере, клиенту(пользователю). Такая программа может быть написана
на любом языке программирования, который поддерживает платформа
сервера.Очень часто для подобных целей используют PERL -
интерпретируемый язык, похожий на Си.
SSI(Server Side
Includes) - технолгия, позволяющая вставлять в статические
html-документы динамически меняющиеся документы или результаты ис
полняемых на сервере программ.
Следующая технология,
применяемая в Web-дизайне, призвана, наоборот,обеспечить соответствие
задаваемых при создании документов их отображением на клиентских
машинах.
CSS(Cascade Style Sheets) - технология,
позволяющая определить для каждого тэга вид, размер(в абсолютных
единицах) и тип шрифта текста,ограничиваемого данным тэгом.
VRML - своеобразный язык для создания 3х-мерных сцен и
страниц.Похож на HTML.
И ,наконец, ASP(Active Server
Page), DHTML(DynamicHTML) и XML(eXtendet Makeup
Language) - совсем новые, но довольно быстро распространяющиеся
технологии, разработанные консорциумом W3C и корпорацией Microsoft.
3.2 Инструменты и приемы создания Web-страничек.
Первое, что необходимо для создания
html-документов, это браузер. Развитие Интернета спровоцировало
появление около десятка различных программных продуктов подобного рода.В
настоящее время браузеры су ществуют практически для всех платформ, а в
некоторых графических оболочках (например, в KDE для Linux) стали
неотъемлемой частью сис темы.Названия некоторых из них приведены ниже: Netscape Navigator MacOS,Windows,UNIX
Internet Explored Windows,some UNIX
Opera Windows
Arachne DOS,Linux
Arena Linux
Второе - редактор HTML-документов.Рынок програмного
обеспечения на сыщен комерческими программными продуктами, позволяющими
содавать HTML-страницы на основе приципа WYSIWYG(What You See Is What
You Get) - приципа соответствия выходного html-кода задаваемому
программе виду, желаемому пользователем.В качестве примера назову MS
FrontPage, Lotus Domino, Xara Webster.В браузере Netscape Navigator
начиная с 3-ей версии встроен достаточно неплохой редактор Netscape
Composter. Однако нет необходимости в сложных и дорогих редакторах,
поскольку html-документ по сути обычный текстовой файл, то есть для его
создания и редактирования достаточно простейшего текстового редактора.
Напоследок объявлю несколько негласных правил Web-дизайна:
- Недопустим избыток графических изображений. Поскольку не все могут
позволить себе многомегабитные линии доступа в Сеть, часто
пользователи отключают автозагрузку графической информации, что сведет
на нет все усилия сделать страницу максимально привлекательной
- Желательно, чтобы все графически оформленные ссылки были
продублированны текстовой ремаркой по той-же причине.
- Как правило, при оформлении используют ограниченный набор цветов,
причем для отображения информации подбираются контрастные элементы
палитры.(Это не строго,но ,согласитесь, разобрать светло-зеленые буквы
на светло-сером фоне достаточно сложно)
- Прежде,чем размещать страницу, необходимо проверить, адекватно ли
она воспринимается другими браузерами.
- При помещении страницы в нерусской зоне Интернет необходимо
учитывать, что, в отличии от Windows-систем, в UNIX-ах используется
другая кодировка символов KOI8, потому нужно предусмотреть возможность
просмотра тех же документов в данной кодировке.(Обычно в русском
Интернете на всех серверах имеются автоматические перекодировщики,
поэтому тут достаточно одного экземпляра страницы в определенной
кодировке).
|