HTML документ в общих чертах
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="..." - параметр, определяющий ,какой документ будет просмотрен (это может быть как файл на локальной или удаленной машинах,так и просто IP-адрес удаленной(с условием,что эта машина предоставляет 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-документ будет иметь следующую структуру:
<html> <head> <title>Заголовок</title> </head> <body bgcolor="WHITE" text="BLACK" link="BLUE"> . . Тело документа . . </body> </html>
Области <head> и <body> не пересекаются.Любая информация вне них,но внутри <html>-области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).
2.4 Представление цвета в HTML.
#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) a-la телетайпное сообщение <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="имя-файла"
- указание, какой файл будет включен. Современные нетекстовые браузеры опрерируют изображениями в форматах GIF89, JPEG, animated GIF, реже - PNG и XPM. -
alt="текстовой-аналог"
- применяется в случае, если у клиента отключена загрузка графических изображений. -
width
- Ширина изображения в пикселах (может не соответствовать реальному). -
height
- Высота изображения в пикселах.
-
-
<hr width=..>
- разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах). -
<br>
- тэг начала новой строки. - code><!-- - тэг комментария.Следующий текст игнорируется до появления --!>.
-
<a href=" ">
- тэг гипертекстовых ссылок.Может адресовать документы в :-
глобальной сети
Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла. -
файл на данной машине (необязательно html-документ)
Параметр href содержит путь к файлу относительно текущего каталога и имя файла. -
метку в текущем документе
Параметр href содержит символ # и имя метки.Например, для метки 001 ссылка выглядит как <a href="#001">.Метки задаются тем же тэгом, но с другим параметром <a name=" ">, где name - имя метки (# - не используется!).Примет для 001 - <a name="001">
-
глобальной сети
-
2.6 Работа с таблицами в 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 Фрэймы.
Создадим 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
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 Неупомянутые тэги.
Тэги<form>,<input>,<textarea>,<select>
и<option>
предназначены для организации так называемых заполняемых форм, являющихся по сути дела обратной связью во взаимодействии "клиент-сервер".
Тэги<map>
и<area>
необходимы для использования в качестве меню одного графического изображения.Разным участкам этого изображения ставится в соответствие разлчные документы, при активизаци (нажатии) участка происходит переход на другой документ, аналогичный переходу при нажатии на гиперссылку.
И,наконец, тэг<embeed>
позволяет встраиватьв документ файлы раз личных форматов (например, midi-музыку).При получении такого файла браузер пользователя (если у него доступны функции, отвечающие за работу с этим файлом) сам отобразит этот файл как часть общего до кумента, не прибегая к помощ сторонних приложений.
3.1 Технологии создания динамических 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-страничек.
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-документ по сути обычный текстовой файл, то есть для его создания и редактирования достаточно простейшего текстового редактора.
Третье - полноценный графический редактор.Советую обзавестись как редактором растровых изображений (например, Adobe Photoshop или GIMP), так и редактором векторной графики (CorelDraw! или CorelXara).
-
Напоследок объявлю несколько негласных правил Web-дизайна:
- Недопустим избыток графических изображений. Поскольку не все могут позволить себе многомегабитные линии доступа в Сеть, часто пользователи отключают автозагрузку графической информации, что сведет на нет все усилия сделать страницу максимально привлекательной
- Желательно, чтобы все графически оформленные ссылки были продублированны текстовой ремаркой по той-же причине.
- Как правило, при оформлении используют ограниченный набор цветов, причем для отображения информации подбираются контрастные элементы палитры.(Это не строго,но ,согласитесь, разобрать светло-зеленые буквы на светло-сером фоне достаточно сложно)
- Прежде,чем размещать страницу, необходимо проверить, адекватно ли она воспринимается другими браузерами.
- При помещении страницы в нерусской зоне Интернет необходимо учитывать, что, в отличии от Windows-систем, в UNIX-ах используется другая кодировка символов KOI8, потому нужно предусмотреть возможность просмотра тех же документов в данной кодировке.(Обычно в русском Интернете на всех серверах имеются автоматические перекодировщики, поэтому тут достаточно одного экземпляра страницы в определенной кодировке).
Рекомендуем почитать