Основные понятия
Гипертекстовые
документы
HTML
позволяет вам формировать различную гипертекстовую информацию на основе
структурированных документов. Тот или иной обозреватель (броузер) Internet
определяет сформированные ссылки и через протокол передачи гипертекста HTTP
открывает доступ к вашему документу другим пользователям Сети.
Разумеется,
для успешной реализации всего этого необходим софт, полностью совместимый с
WWW и поддерживающий HTML.
HTML
HTML
документ — это обычный текстовой файл.
Например,
через Microsoft Internet Explorer вы можете просмотреть результат вашей
работы, просто загрузив в этот обозреватель созданный на основе синтаксиса
HTML текстовой файл.
Гипертекстовый
язык предоставляет только информацию для чтения. Это означает, что
редактировать Web-страницы может лишь тот, кто их создал, а не простой
пользователь сети сетей. Впрочем, если забежать немного вперед, можно
сказать, что используя общий шлюзовой интерфейс (CGI) можно добавлять
некоторые операторы HTML в сгенерированную страницу.
Тэги
Самый
смак гипертекстового языка – это ссылки. В мировой паутине вы просто
нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара.
В
языке описания гипертекстовых документов все тэги парные. В конечном тэге
присутствует слэш, который сообщает броузеру о завершении. Но! Существует
одно исключение из этого правила пар:
●
В природе не существует тэга </P>.
●
В языке HTML нет разницы между прописными и строчными символами.
●
Не все тэги совместимы с броузерами. Если броузер не понимает тэг, то он его
просто пропускает.
Итак,
документ HTML это заголовок:
<html>
<head> Заголовок </head>
<body>
...
и
текст
...
</body>
с названием:
<head>
<title> Название </title>
</head>
Название
документа
Это
не правило, и даже не закон, это факт: Любой документ HTML имеет название. По
названию вашего документа HTML другие броузеры могут найти информацию. Место
для названия всегда определено – оно находится вверху экрана, и отдельно от
содержимого документа. Максимальная длина названия – 40 символов.
Форматирование
Форматирование
может быть непосредственным или авторским. Если вы используете тэг
<pre>, то форматирование считается авторским:
<body>
<pre>
Следующие
тэги присущи непосредственному форматированию:
●
<p> — параграф;
●
<hr> — горизонтальная линия;
●
<br> — обрыв строки.
Заголовки
и подзаголовки
Язык
HTML позволяет вам работать с шестью уровнями заголовков. Первый заголовок –
самый главный. На него обращается особое внимание. Остальные заголовки могут
быть оформлены, например, жирным шрифтом или прописными буквами.
В
HTML первый заголовок обозначается как <H1>:
<Hn>Текст</Hn
>
Под n
понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6.
В
HTML первый заголовок может совпадать с названием документа.
Списки
Списки
подразделяются на:
●
ненумерованные:
<ul>
<li>
Элемент списка
</ul>
●
нумерованные:
<ol>
<li>
Элемент списка
</ol>
●
c описаниями:
<DL>
<DT>
Собака (элемент)
<DD>
Друг человека (описание элемента)
</DL>
●
вложенные:
<UL>
<LI>
Примус
<OL>
<LI>
Другой примус
...
</OL>
<LI>
...
</UL>
Выделение
текста
Текст
в документе HTML может быть выделен одним из следующих способов:
●
<cite> — цитата </cite>.
●
<code> — программный код </code>.
●
<dfn> — определение </dfn>.
●
<em> — логический акцент </em>.
●
<kbd> — ввод с клавиатуры </kbd>.
●
<samp> — сообщения компьютера </samp>.
●
<strong> — сильный акцент </strong>.
●
<var> — переменные </var>.
Один
большой параграф
В
HTML разбиение на строки не принципиально. Это означает, что вы можете
разбить строки вашего документа в любом его месте. Связано это с тем, что в
гипертекстовом документе идущие подряд отбивки превращаются в одну. Но! Если
отбивка сделана после тэга <P>, то она учитывается. Если
какой-нибудь тэг <H> игнорируется, то отбивка также учитывается.
В остальных случаях броузер будет пропускать отбивки.
Ссылки
HTML
позволяет вам связать текст или картинку с другими гипертекстовыми
документами. Текст, как правило, выделяется цветом или оформляется
подчеркиванием. Для этого используется тэг <A>. Помните, что после
буквы A должен стоять пробел.
Чтобы
сформировать ссылку:
●
наберите <A.
●
введите HREF=”filename”>.
●
наберите после > текст гипертекстовой ссылки.
●
наберите тэг </A>.
Один
из вариантов гипертекстовой ссылки может выглядеть так:
<A HREF=”BobAnapa.html”>Bob</A>
Здесь
слово “Bob” ссылается на документ BobAnapa.html, образуя гипертекстовую
ссылку.
Если
документ формирующий ссылку находится в другой директории, то подобная ссылка
называется относительной:
<A HREF=”BobAnapa/ВobMoscow.html”>Bob</A>
Если
вы хотите указать полное имя файла, то вам необходимо использовать синтаксис
UNIX.
Формирование
ссылок
Ссылки
можно формировать на основе так называемого универсального локатора ресурса,
то есть используя следующий синтаксис:
protocol:
//hostport/path
Предварительное
форматирование текста
Тэг <PRE>
позволяет сформировать текст, оформленный моноширинным шрифтом. Используйте
этот тэг для оформления листингов программ.
Расширенные
цитаты
Тэг <BLOCKQUOTE>
позволяет вам включить цитату в уединенный объект.
Адрес
Тэг <ADDRESS>
позволяет сформировать информацию об авторе документа HTML.
Куча
слов относительно форматирования символов
В
HTML слова и строки кодируются логическими и физическими стилями. Физические
стили форматируют текст. Логические стили форматируют через определение в
гипертекстовом документе некоторого значения. Это в частности означает, что
тэг заголовка первого уровня не содержит информации о размере шрифта и
гарнитуре. Поэтому, чтобы изменить символьное форматирование заголовка вы
должны модифицировать заголовок первого уровня. Через логические (в том числе
и символьные) тэги вы можете сформировать согласованный гипертекстовый
документ, то есть определить заголовок первого уровня в качестве только <H1>
(без информации о гарнитуре шрифта и его кегле).
Логические
стили
Ниже
мы представляем примеры логических стилей документа HTML.
●
<DFN> Определить слово. Как правило, курсив.
●
<EM> Усилить акцент. Как правило, курсив.
●
<CITE> Заголовок чего-то большого и хорошего. Курсив.
●
<CODE> Компьютерный код. Моноширинный шрифт.
●
<KBD> Текст, введенный с клавиатуры. Моноширинный жирный
шрифт.
●
<SAMP> Сообщение программы. Моноширинный шрифт.
●
<STRONG> Ну очень важные участки. Жирный шрифт.
●
<VAR> Замена переменной на число. Курсив.
Физические
стили
Гипертекстовый
документ может быть оформлен с использованием следующих стилей:
●
<B> Полужирный.
●
<I> Курсив.
●
<TT> Моноширинный.
Специальные символы
Символы,
которые не могут быть введены в текст документа непосредственно через
клавиатуру называются специальными символами. Для таких символов существуют
особые тэги.
Четыре
символа — знак меньше (<), знак больше (>), амперсанд (&) и двойные
кавычки (“) имеют специальное значение внутри HTML и следовательно не могут
быть использованы в тексте в своем обычном значении.
Скобки
используются для обозначения начала и конца HTML тэгов, а амперсанд
используется для обозначения так называемой escape-последовательности. Для
использования одного из этих символов введите одну из следующих
escape-последовательностей:
●
< — знак меньше.
●
> — знак больше.
●
& — амперсанд.
●
" — кавычки.
Принудительный
перевод строки
Тэг <BR>
переводит только одну строку, то есть без дополнительного пробела.
Горизонтальные
разделители
Тэг <HR>
формирует горизонтальную линию по всей ширине окна.
Встроенные
изображения
Вы
можете встраивать в ваш документ картинки. Синтаксис встроенной картинки следующий:
<IMG
SRC=image_URL>
Здесь
image_URL есть указатель на файл картинки, синтаксис которого совпадает с
синтаксисом ссылки HTML.
Звуковоспроизведение
Для
того, чтобы вставить в вашу страничку звуковой файл, например, midi-файл,
используйте следующую конструкцию:
<EMBED SRC=”bob1.mid” WIDTH=”140” HEIGHT=”50”
ALIGN=”MIDDLE”
BORDER=”0” AUTOSTART=TRUE>
Это одна строка.
В
тэге были использованы следующие параметры:
●
WIDTH — параметр определяющий ширину midi-плейера.
●
HEIGHT — параметр определяющий высоту midi-плейера.
●
BORDER — ширина рамки midi-плейера.
●
AUTOSTART — запустить midi-плейер сразу после того, как загрузится
документ HTML.
Распределение
ссылок по картинке
Используя
технологию распределения ссылок по картинке, вы можете, например, создать
графическое меню из одной большой картинки таким образом, чтобы каждый
элемент системы меню содержал определенный URL.
Распределение
ссылок по картинке описывается в тэге IMG следующим параметром:
<IMG SRC=”url” USEMAP=”url#map_name”>
Здесь
аргумент USEMAP задает расположение схемы распределения map_name в URL. Если
URL не указан, то поиск схемы map_name ведется в текущем документе.
Код
схемы может выглядеть так:
<MAP NAME=”map_name”>
<AREA [SHAPE=” shape “] COORDS=”x,y,...” [HREF=” reference “] [NOHREF]>
</MAP>
Выше
были использованы следующие тэги:
●
<AREA> — определить для данного URL область на картинке
посредством параметров SHAPE и COORDS.
●
SHAPE — форма области.
Вы можете
выделить область на картинке так:
●
default — стандартная форма.
●
rect — прямоугольник.
●
circle — круг.
●
poly — многоугольник произвольной формы.
●
COORDS — координаты области. Задаются в пикселах. Отсчет начинается с
нуля. Круг имеет три координаты, прямоугольник — четыре, а для многоугольника
вы должны описать каждый его угол в двух координатах. Например, область
имеющая размеры 50 на 50 пикселов описывается так:
<AREA
COORDS=”0,0,54,54” ...>
●
HREF=”url” — определить ссылку на схеме, то есть вписать URL.
●
NOHREF — указать, что в данной области картинки отсутствует ссылка.
Этот параметр работает всегда, когда не определен параметр HREF.
●
</MAP> — закончить описание схемы распределения ссылок по картинке.
Общий
шлюзовой интерфейс и формы HTML
Общий
шлюзовой интерфейс (Common Gateway Interface) позволяет работать с данными
сервера Web в интерактивном режиме. Сервер Web через CGI запускает поисковую
программу и пересылает обработанные данные назад. Сама программа CGI хранится
в каталоге CGI-BIN. Это означает, что файл из каталога CGI-BIN всегда
исполняемый файл. Если CGI-программа, например, взаимодействует с системой
управления базой данных, то пользователь может получать некоторую
интересующую его информацию в интерактивном режиме.
Это
тривиально, но это факт: CGI-программы создаются посредством CGI. Код
программы пишется, как правило, на языке описания сценариев Perl. Perl
является интерпретируемым языком.
Передача
данных от сервера к программе CGI осуществляется сервером через командную
строку и переменные окружения.
Таким
образом, сервер через общий шлюзовой интерфейс запускает программу CGI и
пересылает ей вводимые пользователем данные. Сами данные вводятся через так
называемые формы HTML. Форма представляет собой гипертекстовую страницу с
одним или несколькими полями данных и специальной кнопкой для передачи
введенной информации.
Как и
код любого гипертекстового документа, код формы начинается с тэга FORM
ACTION = /SGI-BIN/EXAMPLE.PL и заканчивается тэгом /FORM.
●
ACTION
Аргумент
ACTION — это URL программы CGI, то есть /SGI-BIN/ EXAMPLE.PL.
●
METHOD
Метод,
используемый для запроса данных. Этот параметр задает режим передачи данных
из формы в программу CGI. Основные режимы передачи — GET, HEAD и POST.
Программа CGI должна поддерживать один из этих режимов, иначе обработки
данных не произойдет.
В
режиме GET данные входят через URL в строку запроса. Например, если программа
обработки данных BOB.PL лежит в каталоге CGI-BIN, то запрос HTML пойдет на
сервер через ACTION следующим образом:
FORM ACTION=/CGI-BIN/BOB.PL METHOD=GET
Теперь
сервер знает, где находится программа BOB.PL, поэтому он ее запустит в режиме
GET.
Программы
CGI получают данные от переменных окружения и посылают выходные данные через
общий шлюзовой интерфейс обратно пользователю. Например, после ввода тэга A
HREF=BOB.HTML на сервер пойдет запрос GET /BOB.HTML. Заголовок GET
определяет получение документа BOB.HTML в корневом каталоге сервера.
Аргумент
POST
CGI
реализован в программах, поддерживающих Unix и некоторые приложения Windows.
CGI для Windows реализуется лишь в том случае, если сервер Web способен
декодировать данные тех форм HTML, которые пересылаются в режиме POST. Это
можно сделать двумя способами:
●
URL-Encoded. Данные формы пересылаются на сервер в виде HTML.
●
Multipart Form Data. Данные формы пересылаются на сервер в виде
MIME-сообщения.
INPUT
TYPE=TEXT
Поместить
в форму текстовое поле данных.
NAME=NAME
Определить
имя текстового поля данных NAME.
MXLENGTH=NUMBER
Размер
текстового поля данных. Вместо NUMBER вы можете ввести целое
число.
RADIO
Определить
кнопку переключения.
NAME=PRODTYPE
Определить
логическое поле PRODTYPE.
INPUT
TYPE=CHECKBOX
Определить
флажок для протокола передачи.
ACCEPT
Метод,
используемый для интерпретации пересылаемых файлов. Файлы могут пересылаться
в виде ASCII или HTML. Количество заголовков ACCEPT соответствует
типам данных MIME (Multipurpose Internet Mail Extensions).
Заголовок
ACCEPT: TYPE/SUBTYPE { parameters} пересылается как значение параметра
ACCEPT. Каждый тип данных имеет собственный параметр ACCEPT.
Осторожно!
Каталог CGI-BIN!
В
подавляющем числе удаленных компьютеров каталог CGI-BIN зарезервирован для
исполняемых файлов. Это означает, что файлы из этого каталога могут быть
запущены через Web. Обычно в этом каталоге хранятся сценарии на языке PERL,
которые запускаются на удаленном сервере Web программой CGI (вы просто
нажимаете кнопку Submit, которая сформирована кодом формы HTML, написанным
для исполняемой программы CGI). В этот каталог, при большом желании, можно
поместить и другие файлы, имеющие такое же отношение к общему шлюзовому интерфейсу,
как и Билл Гейтс к созданию UNIX. Гипертекстовый язык предоставляет только
информацию для чтения, то есть модифицировать Web-страницы может лишь их
автор. Но! Используя общий шлюзовой интерфейс CGI, можно добавлять некоторые
операторы HTML в сгенерированную страницу. Это означает, что вы можете
запросить информацию у Web-сервера, затем запустить поисковый софт и получить
то, что вы хотите. Вы просто вставляете нужные вам операторы гипертекстового
языка в существующую Web-страницу. Ваша задача – найти Web-сервер, который
использует CGI и тем самым способен запускать различный софт.
Файлы
общешлюзового интерфейса — это не обыкновенные текстовики, это вполне
полноценный софт (в частности, когда вы блуждаете по Web, вы используете
CGI). Софт этот (как правило, код пишется на языке сценариев Perl — Practical
Extraction and Report Language) хранится в каталоге CGI-BIN нужного вам
сервера Web. Хакер взламывает сервер, находит этот каталог, запускает
программу CGI, передает ей подготовленные им данные, она их обрабатывает,
возвращает на броузер хакера результат и, наконец, преобразовывает уже свои
данные в нужную хакеру гипертекстовую страничку.
Как это делается? Хакер нажимает
Submit и броузер начинает работать согласно инструкциям оператора ACTION таким
образом (происходит передача ключей и значений), что удаленный компьютер
запустит сценарий из удаленного каталога CGI-BIN. К исполняемым файлам
каталога CGI-BIN доступ неограничен. Поэтому, к примеру, хакер может
поместить в этот каталог программу чтения файлов паролей или небольшую
приблуду, позволяющую заменять файлы.
|