HTML - язык World Wide Web
World Wide Web состоит из cледующих основных средств:
- HTML (Hypertext Markup Language) - язык разметки гипертекста,
- CGI (Common Gateway Interface) - общий шлюзовый интерфейс,
- HTTP (Hypertext Transfer Protocol) - протокол передачи гипертекстовых документов,
Основные языки программирования: Java, JavaScript, Perl.
Данная страница посвящена основному компоненту - HTML.
Документ HTML состоит из специальных команд (тегов), определяющих форму его отображения при просмотре.
Для просмотра документов Internet используется специальная программа - браузер, например, Netscape Navigator или Microsoft Internet Explorer.
Документ, который вы сейчас читаете, также создан с помощью языка HTML, и Вы пользуетесь одним из браузеров.
Язык HTML позволяет:
- просмотреть текст данного документа,
- отобразить на экране картины и другую информацию из различных информационных ресурсов,
- прослушать звуковой файл,
- отправить почту,
- заполнить анкету,
- получить любые файлы,
- перейти на другие домашние страницы,
- и ряд других функций.
Структура HTML документа
Символы, заключенные в угловые скобки (< и >) являются HTML командами, по которым браузер распознает, как следует преобразовать части текста, заключенные между этими командами. Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой <HTML> и заканчиваться командой </HTML>.
Документ состоит из 2 частей:
- Заголовка (HEAD),
- Собственно документа (BODY).
Для выделения заголовка следует ввести:
<HEAD>Заголовок документа</HEAD>
Каждый WWW - документ имеет название, которое вводится в титульной строке браузера. Для ввода титульной строки в заголовок документа следует воспользоваться следующими командами:
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
Для записи основного текста следует ввести:
<BODY>Основной текст</BODY>
Таким образом, общая схема документа в формате HTML выглядит следующим образом:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>Основной текст</BODY>
</HTML>
При написании команд HTML не имеет значение строчными или прописными буквами Вы пишете.
Создание заголовков
Заголовки в документе создаются с помощью команд:
<Hx>Заголовок</Hx>
причем при x=1 заголовок самый крупный, а при x=6 - самый мелкий. Например,
Отображаемый текст Запись в формате HTML
Заголовок1 <H1>Заголовок1<H1>
Заголовок2 <H2>Заголовок2</H2>
Заголовок3 <H3>Заголовок3</H3>
Заголовок4 <H4>Заголовок4</H4>
Заголовок5 <H5>Заголовок5</H5>
Заголовок6 <H6>Заголовок6</H6>
Создание списков
Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
- Неупорядочные списки,
- Упорядочные списки,
- Списки - определения.
Неупорядоченный список использует для выделения записей специальные символы.
Неупорядоченный список определяется следующими командами начала и конца списка: <UL></UL>
Каждый элемент списка начинается с команды: <LI>
Ниже приводится пример неупорядочного списка:Отображаемый текст Запись в формате HTML
Строка 1 списка
Строка 2 списка
Строка 3 списка <UL>
<LI>Строка 1 списка
<LI>Строка 2 списка
<LI>Строка 3 списка
</UL>
В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами начала и конца списка: <OL></OL>
Каждый элемент списка начинается с команды: <LI>
Ниже приводится пример упорядочного списка:Отображаемый текст Запись в формате HTML
Строка 1 списка
Строка 2 списка
Строка 3 списка <OL>
<LI>Строка 1 списка
<LI>Строка 2 списка
<LI>Строка 3 списка
</OL>
В списке - определении все записи сдвинуты влево при помощи табуляции.
Список - определение определяется следующими командами начала и конца списка: <DL></DL>
Каждый элемент списка начинается с команды: <DD>
Ниже приводится пример списка - определения:Отображаемый текст Запись в формате HTML
Строка 1 списка
Строка 2 списка
Строка 3 списка <DL>
<DD>Строка 1 списка
<DD>Строка 2 списка
<DD>Строка 3 списка
</DL>
Форматирование параграфов
В документе HTML невозможно создать абзац, используя клавишу [Enter].
Использование этой клавиши улучшает внешний вид исходного текста, но не влияет на полученное изображение.
Для перехода на следующую строку воспользуйтесь командой <BR>.
Для создания пустой строки воспользуйтесь командой <P>.
Для создания горизонтальной черты воспользуйтесь командой <HR>
Если черта создается не на всю строку, а на какую - то ее часть, например, на 40%, то команда выглядит следующим образом: <HR WIDTH=40%>
Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях) <HR SIZE=10>.
Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ задйте соответственный атрибут <ALIGN=LEFT/RIGHT/CENTER>.
Черная линия задается наличием атрибута NOSHADE.
Ниже приводятся примеры форматирования строк:Отображаемый текст Запись в формате HTML
Последняя строка параграфа
Первая строка нового параграфа Последняя строка параграфа
<P>
Первая строка нового параграфа
Первая строка текста
Вторая строка текста Первая строка текста
<BR>
Вторая строка текста
Конец секции
Следующая секция Конец секции
<HR>
Следующая секция
Только 40% ширины
Следующая секция Только 40% ширины
<HR WIDTH=40%>
Следующая секция
Толщина линии
Следующая секция Толщина линии
<HR SIZE=10>
Следующая секция
Сдвинутая влево черная линия
Следующая секция Сдвинутая влево черная линия
<HR SIZE=10 WIDTH=40% NOSHADE ALIGN=LEFT>
Следующая секция
Вы можете расположить текст по центру с помощью следующих команд: <CENTER>Произвольный текст</CENTER>. Например, <CENTER>HTML</CENTER>
Иногда необходимо создать текстовый документ, расположение строк которого (табуляция, отступы, выравнивание) определяется разработчиком домашней страницы, а не программой - редактором.
Для создания такого текста воспользуйтесь командами: <PRE>Произвольный, заранее отредактированный текст</PRE>.
Полученный в браузере образ текста будет точно соответствовать тексту в исходном HTML файле.
Вывод текста в несколько столбцов
Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном формате с помощью команд <MULTICOL></MULTICOL>.
Ниже приводится формат команд:<MULTICOL COLS="N" GUTTER="M">Задаваемый текст в столбцах</MULTICOL>.
Где N - это количество столбцов, а M - расстояние между столбцами.
Браузеры, не поддерживающие вывод текста в несколько столбцов, обеспечат вывод текста нормально, в один столбец.
Форматирование символов
Для выделения отдельных частей текста можно воспользоваться следующими стилями:
- жирный (Bold),
- курсив(Italic),
- с подчеркиванием(Underline).
Для выделения текста жирным шрифтом воспользуйтесь командами: <B>Bold</B>
Для выделения текста курсивом воспользуйтесь командами: <I>Italic</I>
Для выделения текста подчеркиванием воспользуйтесь командами: <U>Underline</U>
Ниже приводятся примеры форматирования строк: Отображаемый текст Запись в формате HTML
Выделение текста жирным шрифтом Выделение<B> текста </B>жирным шрифтом
Выделение текста курсивом Выделение<I> текста </I>курсивом
Выделение текста подчеркиванием Выделение<U> текста </U>подчеркиванием
Управление цветом
Цвета и изображения фона задаются с помощью команды <BODY>.Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее атрибуты:
bgcolor="# код цвета" - цвет фона в документе,
text="# код цвета" - цвет текста в документе,
link="# код цвета" - цвет текста, используемого в качестве ссылки,
vlink="# код цвета" - цвет сслки на просмотренний ранее документ,
alink="# код цвета" - цвет ссылки в момент нажатия на нее правой кнопки мыши.
Код цвета задается в кодировке RGB, т.е. шесть шестнадцатеричных чисел.
Важно отметить, что цвет фона не отображается на бумаге при выводе HTML - документа на печать.
Ниже приводятся коды простейших цветов:
Белый = FFFFFF,
Желтый = FFFF00,
Красный = FF0000,
Серый = 808080,
Синий = 0000FF,
Зеленый = 00FF00,
Черный = 000000,
Пурпурный = CC33FF,
Малиновый = FF00FF,
Бирюзовый = 008080,
Темно-синий = 000080,
Коричневый = 808000,
Голубой = 00FFFF,
Темно-зеленый = 008000,
Индиго = 800080,
Темно-красный = 800000.
Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться командами:
<FONT COLOR=Код цвета>Текущий текст</FONT COLOR>
Определено несколько именованных цветов. Их значения видны из таблицы:Отображаемый текст Запись в формате HTML
BLACK <FONT COLOR=BLACK>BLACK</FONT COLOR>
MAROON <FONT COLOR=MAROON>MAROON</FONT COLOR>
GREEN <FONT COLOR=GREEN>GREEN</FONT COLOR>
OLIVE <FONT COLOR=OLIVE>OLIVE</FONT COLOR>
NAVY <FONT COLOR=NAVY>NAVY</FONT COLOR>
PURPLE <FONT COLOR=PURPLE>PURPLE</FONT COLOR>
TEAL <FONT COLOR=TEAL>TEAL</FONT COLOR>
GRAY <FONT COLOR=GRAY>GRAY</FONT COLOR>
SILVER <FONT COLOR=SILVER>SILVER</FONT COLOR>
RED <FONT COLOR=RED>RED</FONT COLOR>
LIME <FONT COLOR=LIME>LIME</FONT COLOR>
YELLOW <FONT COLOR=YELLOW>YELLOW</FONT COLOR>
BLUE <FONT COLOR=#0000FF>BLUE</FONT COLOR>
FUCHSIA <FONT COLOR=FUCHSIA>FUCHSIA</FONT COLOR>
AQUA <FONT COLOR=AQUA>AQUA</FONT COLOR>
WHITE <FONT COLOR=WHITE>FUCHSIA</FONT COLOR>
Вставка специальных символов
В языке HTML символ < используется как первый символ каждой команды. Этот символ не может быть использован для обозначения отношения "меньше". Для его изображения на экране и некоторых других символов в HTML приняты специальные обозначения:Отображаемый текст Запись в формате HTML
< <
>
& &
" "
° °
¢ ¢
© ©
Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела:
Например, в следующей записи исходного текста: A   B
в отображаемом тексте между символами A и B будет 3 пробела.
Например, для создания текста <CENTER> в исходном тексте зтой страницы записано: <CENTER>.
Комментарии
Чтобы включить в HTML исходный документ комментарии, игнорируемые браузером, следует отделить их символами <!--><-->
Минимальные аттрибуты комментария: <!-->Комментарий<-->
Общий случай комментария:
<!-->
-- Строка комментариев 1 --
...
-- Строка комментариев N --
<-->
Не все браузеры обрабатывают вышеприведенные команды комментариев. Большенство браузеров обрабатывают следующую запись комментариев: <COMMENT>Комментарий</COMMENT>
Таблицы
Таблица создается с помощью команд <TABLE> и </TABLE>.Команда <TABLE> может иметь следующие атрибуты:
- UNITS - может принимать значение RELATIVE или PIXELS. Определяет единицы измерения в других атрибутах. По умолчанию, UNITS = PIXELS.
- BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии задается командой BORDER=N.
- CELLPADDING - Определяет минимальный промежуток вокруг содержимого таблицы.
- BGCOLOR - Определяет цвет фонового изображения в таблице. Во всех таблицах данного документа я использую BGCOLOR=BLACK.
Есть еще несколько команд, задающих цвет обрамления:
- BORDERCOLOR,
- BORDERCOLORDARK,
- BORDERCOLORLIGHT,
но они используются только в Internet Explorer.
Простейшая таблица состоит из одной клетки.Команды <TD> и </TD> определяют соответственно начало и конец данных в клетке. Строго говоря, команда </TD> не является обязательной, но я советую ею пользоваться для облегчения чтения исходного текста.
Пример, таблица задана в следующем виде:
<TABLE BORDER=1>
<TD> Текст в таблице </TD>
</TABLE>
При отображении она выглядит следующим образом: Текст в таблице
Строка клеток создается повторением команд <TD></TD>. Пример:
<TABLE>
<TD>Содержимое 1</TD>
<TD>Содержимое 2</TD>
<TD>Содержимое 3</TD>
</TABLE>
Отображается следующим образом:Содержимое 1 Содержимое 2
Содержимое 3 Содержимое 4
Содержимое 5 Содержимое 6
Команды <TH> и </TH> используются для обозначения заголовка столбца клеток. Например, таблица:
<TABLE BORDER=1>
<TH>Содержимое</TH>
<TH>Название</TH>
<TR>
<TD>HTML</TD>
<TD>Язык<BR>разметки<BR>гипертекста</TD>
</TABLE>
Отображается следующим образом:Содержимое Название
HTML Язык
разметки
гипертекста
Атрибуты ROWSPAN и COLSPAN команд <TD> и <TH> используются для формирования клеток данных, обьединяющих более одной строки или столбца.
Например, таблица: <TABLE BORDER=1>
<TH>Язык программирования</TH>
<TH COLSPAN=2>Особенности</TH>
<TR>
<TD>C++</TD>
<TD ROWSPAN=2>Использует</TD>
<TD>Классы</TD>
<TR>
<TD>Visual BASIC</TD>
<TD>Обьекты</TD>
</TABLE>
Отображается в виде: Язык программирования Особенности
C++ Использует Классы
Visual BASIC Обьекты
Гипертекстовые ссылки
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла следует ввести необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход.
Для организации метки запишите: <A NAME="МЕТКА"></A>, где МЕТКА - это любое имя, состоящее из букв английского алфавита и цифр.
Для перехода на эту метку запишите: <A HREF=МЕТКА>Перейти на метку.</A>
Пример: требуется организовать переход отсюда в начало данного HTML файла. Переход осуществляется нажатием левой кнопки мыши на текст "Вернуться в начало".
Для выполнения этого перехода задайте:
- В начале HTML - файла записать:
<A NAME="A0"</A>
- В необходимом для перехода месте HTML файла записать:
<A HREF=HTML0 >Вернуться в начало раздела.</A>
Переход в другой документ этой же Home Page (домашней страницы).
Для перехода из любого места HTML файла h1.htm в начало HTML файла h2.htm, в файле h1.htm следует записать:
<A HREF="H2.htm">Переход к файлу h2.htm </A>
Замечание. Можно перейти на заданную метку METKA другого документа h2.html с помощью следующей команды:
<A HREF="H2.htm#METKA"> Переход в начало файла h2.htm.</A>
Переход в любой документ Internet.
В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ или файл. Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора ресурсов - URL. Этот локатор определяет правила написания различных видов ссылок. Ниже приводятся важнейшие префиксы для URL:Префикс URL Функция
FTP://
HTTP://
FILE://
GOPHER:// FTP - сервер
WWW - сервер
Локальный диск
Gopher - сервер
Для записи гипертекстовой ссылки в HTML - файл используйте следующую команду:
<A HREF="URL">Переход по гипертекстовой ссылке.</A>
При нажатии левой кнопки мыши на текст перехода по гипертекстовой ссылке, Вы перейдете на ресурс, заданный в URL. Для возврата воспользуйтесь клавишей "Back" браузера.
Вывод изображения на экран.
Изображения могут быть выведены на экран так же, как текст. Файлы изображения могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF (файлы *.gif) и JPEG (файлы *.jpg). Ниже приводится формат команды:
<IMG SRC="ИМЯ ФАЙЛА" ALT="ТЕКСТ" ALIGN=DIRECTION WIDTH=WIDTH HEIGHT=HEIGHT>, где:
- ИМЯ ФАЙЛА - это имя файла-картинки или полное имя пути и yfpdfybt файла, если он не принадлежит каталогу, в котором расположен Ваш HTML файл. Здесь также может быть адрес в Internet данного файла.
- Текст - это текст, выводимый вместо изображения, если файл изображения по какой - либо причине недоступен.
- DIRECTION - место расположения изображения. Принимает следующие возможные значения:
ALIGN=TOP - последующий текст располагается в верхней части изображения.
ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает изображение справа.
ALIGN=MIDDLE - изображение находится в центре листа.
ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает изображение слева.
WIDTH=WIDTH - ширина требуемого изображения на экране.
HEIGHT=HEIGHT - высота требуемого изображения на экране.
Пример: если Вам нужно вставить картинку Picture.gif, то Вам следут ввести:
<IMG SRC="Picture.gif" HEIGHT=25 WIDTH=100 ALT="Каринка" ALIGN=CENTER>
Выглядеть это будет примерно так:
Гипертекстовая ссылка с помощью изображения.
Допустим, что Вы выводите на экран изображение IMAGE - файл, который называется, например, picture.gif. Если Вы хотите организовать страницу так, чтобы при нажатии левой кнопки мыши на изображение, перейти на другую домашнюю страницу, например, на: HTTP://WWW.HOME.COM, то следует записать следующую команду:
<A HREF="HTTP://WWW.HOME.COM"><IMG SRC="HOME.gif">
Создание ссылки на почтовый адрес.
Мой почтовый адрес в HOTMAIL.COM: ataev_ruslan@hotmail.com. Для организации ссылки в моей домашней странице на мой почтовый адрес я записал в конце первой HTML файла моей домашней страницы:
<A HREF=mailto:ataev_ruslan@hotmail.com>Webmaster</A>
Frame(кадры)
Команды работы с кадрами.
Вы можете разделить экран на несколько независимых оконных кадров, каждый из которых отображает отдельный HTML документ. На экране кадры представляют собой прямоугольники. В HTML используются следующие команды работы с кадрами:
<FRAMESET>, </FRAMESET> - определяют состав и размеры кадров на экране,
<FRAME>,</FRAME> - определяют HTML файл для каждого кадра,
<NOFRAMES>,</NOFRAMES> - для сообщений браузеру, не обрабатывающему кадры.
Сначала рассмотрим простейший ПРИМЕР 1:BR> Пусть требуется разделить экран на 2 части:
- Левый кадр, отображающий файл F1.HTM, занимает 30% экрана,
- Правый кадр, отображающий файл F2.HTM, занимает 70% экрана.
Тогда в головном файле домашней страницы следует записать:
<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS= 30%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm">
</FRAMESET>
<HTML>
Рассмотрим более сложный ПРИМЕР 2: В головном файле домашней страницы запишите:
<HTML>
<HEAD>
<TITLE>Frames Example 2</TITLE>
</HEAD>
<FRAMESET COLS= 30%,*>
<FRAMESET ROWS=50%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm">
</FRAMESET>
<FRAMESET ROWS=33%,33%,*>
<FRAME SRC="F3.htm">
<FRAME SRC="F4.htm">
<FRAME SRC="F5.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Формат команды FRAMESET.
Команда делит целое окно (или часть окна, определенное предыдущей командой <FRAMESET>) на несколько вертикальных (атрибут COLS ) или горизонтальных (атрибут ROWS ) кадров. Каждый из этих кадров может определять HTML - файл, отображаемый в ней (с помощью команды <FRAME> ) или, соответственно, делиться дальше по тем же правилам со вложенной командой <FRAMESET> (см. Пример 2). По концу определения кадров, задаваемых командой <FRAMESET>, не забудьте записать команду </FRAMESET>, иначе они могут быть построены неправильно. Формат атрибутов COLS и ROWS.
Эти атрибуты позволяют определить размеры и количество построенных вертикально (атрибут COLS ) или горизонтально (атрибут ROWS ) кадров. Аттрибуты атрибутов задаются в одной из 3 форм:
- абсолютный размер в пикселях,
- заданный процент в общей длине или ширине,
- остаток после задания предыдущих кадров (*).
Рассмотрим распределение экранного пространства на примерах. Если записать:
<FRAMESET ROWS="150,300,150">
то браузер при просмотре выделит первому кадру 150 пикселей, второму - 300 пикселей, третьему - 150 пикселей, но высота экрана может быть не 500 пикселей. Тогда браузер пропорционально увеличит или уменьшит размеры всех кадров. Поэтому лучше записать:
<FRAMESET ROWS="25%,50%,25%">
Результат тот же, но запись соответствует фактическому распределению и легче избежать ошибок при дальнейшей корректировке размеров окон. Если же сумма процентов не равна 100 , то браузер автоматически увеличит или уменьшит размеры кадров в соответствии с размером экрана. В начале данного размера приводились примеры с использованием символа "*". Этот символ означает выделение кадру оставшейся площади. Например, команда:
<FRAMESET ROWS=" 100,*">
создает 2 кадра: верхний составляет 100 пикселей в высоту, нижний - оставшееся пространство.
Команда: <FRAMESET ROWS="100,*,100">
создает 3 кадра:
- верхний составляет 100 пикселей в высоту,
- нижний - 100 пикселей в высоту,
- средний - оставшееся пространство в центре.
Команда: <FRAMESET ROWS="*,200,*">
создает 3 кадра:
- средний - 100 пикселей в высоту,
- верхний и нижний - равного размера.
Команда: <FRAMESET ROWS=" 100,2*,*,3*">
создает 4 кадра:
- верхний составляет 100 пикселей в высоту,
- оставшаяся площадь делится на 6 равных по высоте частей:
- второму сверху кадру выделяется 2 части,
- третьему сверху кадру выделяется 1 часть,
- четвертому сверху кадру выделяется 3 части.
Формат команды FRAME.
Данная команда существует только внутри блока <FRAMESET></FRAMESET>.
Ее назначение - определение функций конкретного кадра. Команда </FRAME> практически не используется, т.к. ее функции исполняют команды /FRAMESET и следующая FRAME. Атрибут SRC задает имя HTML - файла, отображаемого в данном кадре. Атрибут NAME применяется для создания имени кадра. Тогда другой кадр может ссылаться на данный для отображения в ней своего гипертекста.
Изменим ПРИМЕР 1 так, чтобы правый кадр получил имя "VIEW_WINDOW". <HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS=30%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm" NAME="VIEW_WINDOW">
</FRAMESET>
<HTML>
HTML - файл F1.HTML для левого кадра построим следующим образом:
<UL>
<LI>A HREF="Text1.htm" TARGET="VIEW_WINDOW">ТЕКСТ1</A>
<LI>A HREF="Text2.htm" TARGET="VIEW_WINDOW">ТЕКСТ2</A>
<LI>A HREF="Text3.htm" TARGET="VIEW_WINDOW">ТЕКСТ3</A>
</UL>
Теперь, если в левом кадре выбрать любую ссылку по гипертексту, то соответствующий файл TEXTx.HTML отобразится в правом кадре. Этот очень распространенный прием можно видеть во многих домашних страницах. Его преимущество в том, что на экране можно одновременно видеть и вызывающий, и вызываемый HTML - файлы и для просмотра следующего файла гипертекста достаточно нажать на соответвующую кнопку вызывающего файла.
Файл F1.HTML можно построить и следующим образом:
<BASE TARGET=" VIEW_WINDOW">
...
<UL>
<LI>A HREF="Text1.htm">ТЕКСТ1</A>
<LI>A HREF="Text2.htm">ТЕКСТ2</A>
<LI>A HREF="Text3.htm">ТЕКСТ3</A>
</UL>
Атрибут TARGET команды BASE задает кадр, выделяемый по умолчанию для отображения гипертекста. Атрибут NORESIZE применяется для того, чтобы пользователь не смог изменить размеры данного кадра на экране. Линейки прокрутки задаются с помощью атрибута SCROLLING. Здесь действуют следующие правила:
- Если атрибут SCROLLING не задан, то линейки прокрутки создаются автоматически тогда и только тогда, когда размер отображаемого текста превышает размер кадра (это относится как к размеру по вертикали, так и по горизонтали.
- Если задано SCROLLING="YES", то линейки прокрутки создаются всегда.
- Если задано SCROLLING="NO", то линейки прокрутки не создаются.
- Если задано SCROLLING="AUTO", то система работает так же, как если атрибут SCROLLING не задан.
Толщина граничной линии между кадрами может задаваться в пикселях с помощью атрибутов MARGINHEIGHT и MARGINWIDTH, если разработчика не устраивают значения, заданные по умолчанию.
Специальные значения атрибута TARGET.
В современных браузерах зарезервировано 4 специальных значения атрибута TARGET:
- _blank - браузер всегда задает это значение для нового, неименованного окна.
- _self - задается по умолчанию для всех кадров, в операторе FRAME которых нет атрибута TARGET. Все вызываемые по гиперссылке документы загружаются и отображаются в том же кадре, что и вызывающий их документ. Значение _self в явном виде не применяется до тех пор, пока мы не вводим команду BASE с атрибутом TARGET - тогда, возможно, понадобится отменить это общее назначение для какого-либо конкретного кадра.
- _parent - вызываемый по гиперссылке файл загружается в кадр или окно, которое является родительским по отношению к вызывающему. Другими словами, вызываемый файл будет расположен в том же окне, что и его "дедушка".
- _top - вызываемый по гиперссылке файл загружается в окно, содержащее ссылку, и перекрывает все кадры данного окна.
Формат команды NOFRAME.
Данная команда предназначена для браузеров, не обрабатывающих кадры. В браузере, обрабатывающем кадры, вся информация, содержащаяся между командами NOFRAME и /NOFRAME, игнорируется. В браузере, не обрабатывающем кадры, эта информация обрабатывается.
Обычно разработчики страниц, использующие кадры, встаавляют в тело команды NOFRAME сообщение о том, что данный браузер не обрабатывает кадры и сообщает рекомендации, например, перейти на Netscape 2.0 и выше.
Пример 4:
<HTML>
<HEAD>
<TITLE>EXAMPLE 4</TITLE>
</HEAD>
<FRAMESET COLS="125,*">
<FRAME SRC="F-left.htm">
<FRAME SRC="F-right.htm">
</FRAMESET>
<NOFRAME>
<BODY>
ВНИМАНИЕ! Для просмотраданного документа требуется браузер, обрабатывающий кадры, например, Netscape 2.0 и выше. Ваш браузер этим свойством не обладает. Для просмотра левого файла нажмите ЛЕВЫЙ ФАЙЛ. Для просмотра правого файла нажмите ПРАВЫЙ ФАЙЛ. </BODY>
</NOFRAME>
</HTML> Специальные эффекты
Создание мигающего текста.
Замечание: Работает в Netscape 3.0, не работает в Internet Explorer 3.0.
Вы можете сделать изображение текста мигающим с помощью следующих команд: <BLIK></BLIK>. Например:
<BLIK>Мигающий текст</BLIK>
Отображается следующим образом: Мигающий текст
Создание бегущей строки.
Замечание: Работает в Internet Explorer 3.0, не работает в Netscape 3.0.
Если браузер не обрабатывает бегущую строку, то Вы увидите на зкране текст без движения.
Бегущая строка создается с помощью команд: <MARQUEE></MARQUEE>. Ниже приводятся примеры команд:
Команда: <MARQUEE> Этот текст будет двигаться справа налево медленно.</MARQUEE>
Этот текст будет двигаться справа налево медленно.
Команда: <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50" SCROLLDELAY="10">Этот текст будет двигаться справа налево и назад.</MARQUEE>
Этот текст будет двигаться справа налево и назад.
Команда: <MARQUEE BEHAVIOR="SLIDE">Этот текст будет двигаться и останавливаться.</MARQUEE>
Этот текст будет двигаться и останавливаться.
Команда: <MARQUEE> SCROLLDELAY="0" SCROLLAMOUNT="50">Этот текст будет двигаться очень быстро.</MARQUEE>
Этот текст будет двигаться очень быстро.
Карта образов.
Замечание: Работает в Internet Explorer 3.0, работает в Netscape 3.0.
Карта образов позволяет создать несколько ссылок к различным адресам, используя только одно изображение. Пусть у Вас есть картинка picture.gif размером 100x100 пикселей. Предположим, что картинка состоит из 4 частей, где изображены Ваши друзья:
- В левом верхнем углу - Вася (у него есть домашняя страница vasya.htm)
- В правом верхнем углу - Илья (Его домашняя страница ilya.htm)
- В левом нижнем углу - Дима (Его домашняя страница dima.htm)
- В правом нижнем углу - Игорь (Его домашняя страница igor.htm)
Если Вы хотите, чтобы при нажатии левой кноки мыши на изображение каждого из Ваших друзей Вы попадали на его домашнюю страницу, запишите следующие команды:
<MAP NAME="MAP">
<AREA SHAPE="RECT" COORDS="0,0,49,49" HREF="Vasya.htm">
<AREA SHAPE="RECT" COORDS="0,50,49,99" HREF="Petya.htm">
<AREA SHAPE="RECT" COORDS="50,0,99,49" HREF="Dima.htm">
<AREA SHAPE="RECT" COORDS="50,50,99,99" HREF="Igor.htm">
</MAP>
<IMG SRC="Picture.gif" USEMAP="#MAP">
Плавающие окна.
Замечание: Работает в Explorer 3.0, не работает в Netscape 3.0.
Ниже Вы видите пример плавающего окна, в котором отображен первый HTML файл данной страницы:
Если ваш браузер воспринимает плавающие окна, то вы видите такое окно, иначе - только сопровождающий текст: Это плавающее окно. Это окно создано с помощью следующей команды:
<IFRAME NAME="content_frame" width="400" height="600" SRC="Default.htm">Это плавающее окно</IFRAME>
Формы
Форма - это средство, позволяющее организовать на странице диалог с ее пользователем. Разработчик страницы создает своеобразную анкету с помощью специальных элементов:
- кнопки,
- списки,
- текстовые строки,
- текстовые поля.
При зтом разработчик указывает свою программу обработки результатов анкеты. При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "SUBMIT" данной анкеты, отправляет ее содержимое программе обработки, которая называется CGI-скриптом и разрабатываются на различных языках программирования. А что, если Вы хотите организовать анкету, но писать программы Вы не умеете? Тогда можно отправить поток сообщений на Ваш почтовый адрес.
Формы передают информацию программе обработки в виде пар: Имя поля - Значение поля.
Форма начинается командой <FORM> и заканчивается командой </FORM>. Данная команда имеет 2 основных атрибута: ACTION и METHOD. Атрибут ACTION является обязательным, он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода). Атрибут METHOD не является обязательным, он принимает одно из двух значений: GET или POST, связанных с методом протокола передачи информации из анкеты. По умолчанию, METHOD=GET.
Внимание !!! Чтобы Вы могли получать послания на русском языке необходимо также вставить атрибут ENCTYPE=text/plain !!!
Пример команды FORM:
<FORM ACTION="mailto:heruch@mail.ru" METHOD=POST ENCTYPE=text/plain>
Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE=SUBMIT NAME="botton1" VALUE="Произвольный текст">, где:
INPUT - команда создания управляющего элемента,
TYPE - атрибут, определяющий управляющий элемент,
SUBMIT - значение этого атрибута (в данном случае: управляющая кнопка),
NAME - атрибут, задающий имя переменной,
botton1 - имя переменной,
VALUE - атрибут, задающий текст, отображаемый на управляющем элементе,
Произвольный текст - значение текста на управляющем элементе.
Данная кнопка имеет следующий вид:
Как мы уже отмечали выше, значением атрибута ACTION может быть просто адрес для перехода. Поэтому простейшая форма просто возвращает нас к началу данного файла:
<FORM ACTION="HTML.HTM"><INPUT TYPE=SUBMIT VALUE="Вернуться к началу"></FORM>
Перед Вами эта кнопка, проверьте ее действие:
В данном случае нет необходимости применять атрибут NAME так как данные никуда не передаются.
Ниже приводятся основные типы управляющих злементов INPUT.
I. Текстовая строка: TYPE=TEXT.
Определяет окно для ввода одной строки текста. Пример:
<INPUT TYPE=TEXT NAME="text1" SIZE=30 VALUE="Введите текст">
В полученное окно:
Вы можете ввести любой текст или оставить записанный начальный текст. При нажатии кнопки SUBMIT в программу обработки будет передано: text1=Введите текст (или другой, измененный текст).
Атрибут SIZE задает размер окна в символах.
При необходимости ограничить длину текста, применяйте дополнительный атрибут: MAXLENGTH=N, где N - это максимальное число символов в данной форме.
II. Окно для ввода пароля: TYPE=PASSWORD.
Аналогичен типу TEXT, но при вводе каждый символ заменяется на *. Пример: Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=PASSWORD NAME="pass" SIZE=10 MAXLENGHT=5>
Попробуйте в действии данную форму:
III. Текстовое окно: TEXTAREA
Задается в следующем виде:
<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>
...
Первоначально заданный текст
...
</TEXTAREA>
Атрибут COLS задает количество символов в строке, атрибут ROWS задает количество строк в окне, необязательный атрибут WRAP=VIRTUAL задает линейку прокрутки.
Введите текст в данное окно:
IV. Радиокнопка: TYPE=RADIO.
Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением атрибута NAME), но они будут взаимоисключающими: может быть нажата (CHECKED) только одна из них. Пример:
<INPUT TYPE=RADIO NAME=color VALUE="Красная"checked>Красная
<INPUT TYPE=RADIO NAME=color VALUE="Синяя">Синяя
<INPUT TYPE=RADIO NAME=color VALUE="Зеленая">Зеленая
Красная
Синяя
Зеленая
Мы получили 3 кнопки, из них отмечена Красная. При нажатии на другую кнопку предыдущая освобождается. Допустим, мы нажали Синюю кнопку. Тогда при нажатии на кнопку SUBMIT в программу обработки будет введено: color=Синяя.
V. Помеченный квадрат: TYPE=CHECKBOX
В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами. Например, в следующем примере первоначально задана кнопка "Водка":
<INPUT TYPE=CHECKBOX NAME=box VALUE="Водка" checked>Водка
<INPUT TYPE=CHECKBOX NAME=box VALUE="Коньяк">Коньяк
<INPUT TYPE=CHECKBOX NAME=box VALUE="Ликер">Ликер
Водка
Коньяк
Ликер
Если Вы нажмете еще на кнопку "Коньяк", то при нажатии на кнопку SUBMIT в программу обработки будет введено:
box=Водка
box=Коньяк
VI. Скрытый текст: TYPE=HIDDEN.
При отображении не виден пользователю. Служит для прямой передачи служебной информации от страницы обработчику формы, прозрачно для пользователя. Здесь приведен пример передачи информации о версии программы:
<INPUT TYPE=HIDDEN NAME="version" VALUE="beta">
При нажатии на кнопку SUBMIT в программу обработки будет введено: version=beta.
VII. Меню: SELECT.
Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME="TOUR">
<OPTION VALUE="tour1">Путевка в Сочи <OPTION VALUE="tour2">Путевка в Париж <OPTION VALUE="tour3">Путевка на Колыму </SELECT>
В браузере это выглядит следующим образом:
Если Вы выбрали Путевку в Париж, то при нажатии на кнопку SUBMIT в программу обработки будет введено: TOUR=tour2. Команда <SELECT> может содержать аттрибут MULTIPLE, при котором можно выбрать несколько элементов меню одновременно. Высоту окна можно задать аттрибутом SIZE=N.
Если в строке OPTION задан аттрибут checked, то данный элемент задается по умолчанию.
IIIX. Кнопка ввода: TYPE=SUBMIT.
Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=SUBMIT VALUE="Ввод данных">
Эта команда отображается следующим образом:
IIX. Кнопка Сброса значений: TYPE=RESET
Кнопка выполняет инициализацию начальными значениями всех полей:
<INPUT TYPE=RESET VALUE="Очистить поля">
Эта команда отображается следующим образом:
Команды META
Создав страницу, Вы, несомненно, захотите чтобы Вас смогли "найти" все пользователи, интересующиеся данным вопросом. Здесь можно идти двумя основными путями:
1. "Отметиться" в поисковых системах. Есть службы, позволяющие зарегистрироваться на нескольких серверах одновременно.
2. Вставить внутри блока <HEAD>...</HEAD> команды META.
Основное назначение команд META - инструкции для поисковых машин о тематике Вашей страницы. Для этих целей используются следующие атрибуты:
- destriction - краткое описание страницы,
- keyword - список ключевых слов в странице.
Я приведу примеры - команды META:
<META NAME="destriction" CONTENT="Это руководство-инструкция на русском языке по созданию страницы на языке HTML">
Здесь, я думаю, все понятно.
<META NAME="keyword" CONTENT="Internet, HTML, WWW, webpage, HyperText, Language, Russian, Интернет, гипертекст, страница, русский">
Я не претендую, на то, что выбрал ключи наилучшим образом. Хочу лишь обратить внимание на важность точной подборки ключей, чтобы, с одной стороны, Вас нашли все, кому Ваша страница предназначена, с другой стороны - чтобы поменьше чертыхались пользователи, попавшие на Вашу страницу случайно.
Из других применений команд META важно привести команды, дающие инструкции браузеру о кодировке Вашей страницы.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> - для кодировки в Windows/1251,
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r"> - для кодировки в KOI-8.
