|
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 позволяет:
|
Структура 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 не имеет значение строчными или прописными буквами Вы пишете.
Создание заголовков |
Отображаемый текст | Запись в формате 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> |
Создание списков |
Неупорядоченный список использует для выделения
записей специальные символы.
Неупорядоченный список определяется следующими
командами начала и конца списка: <UL></UL>
Каждый элемент списка начинается с команды: <LI>
Ниже приводится пример неупорядочного списка:
Отображаемый текст | Запись в формате HTML |
---|---|
|
<UL>
<LI>Строка 1 списка <LI>Строка 2 списка <LI>Строка 3 списка </UL> |
В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами
начала и конца списка: <OL></OL>
Каждый элемент списка начинается с команды: <LI>
Ниже приводится пример упорядочного списка:
Отображаемый текст | Запись в формате HTML |
---|---|
|
<OL>
<LI>Строка 1 списка <LI>Строка 2 списка <LI>Строка 3 списка </OL> |
В списке - определении все записи сдвинуты влево
при помощи табуляции.
Список - определение определяется следующими командами
начала и конца списка: <DL></DL>
Каждый элемент списка начинается с команды: <DD>
Ниже приводится пример списка - определения:
Отображаемый текст | Запись в формате HTML |
---|---|
|
<DL>
<DD>Строка 1 списка <DD>Строка 2 списка <DD>Строка 3 списка </DL> |
Форматирование параграфов |
Ниже приводятся примеры форматирования строк:
Отображаемый текст | Запись в формате 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 файле.
Вывод текста в несколько столбцов |
Форматирование символов |
Для выделения текста жирным шрифтом воспользуйтесь командами: <B>Bold</B>
Для выделения текста курсивом воспользуйтесь командами: <I>Italic</I>
Для выделения текста подчеркиванием воспользуйтесь командами: <U>Underline</U>
Ниже приводятся примеры форматирования строк:
Отображаемый текст | Запись в формате HTML |
---|---|
Выделение текста жирным шрифтом | Выделение<B> текста </B>жирным шрифтом |
Выделение текста курсивом | Выделение<I> текста </I>курсивом |
Выделение текста подчеркиванием | Выделение<U> текста </U>подчеркиванием |
Управление цветом |
Код цвета задается в кодировке 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 всегда уменьшает количество подряд расположенных пробелов
до одного, независимо от того, сколько пробелов было в исходном тексте.
Для задания необходимого количества подряд расположенных пробелов следует
воспользоваться специальным символом пробела:
Например, в следующей записи исходного текста: A   B
в отображаемом тексте между символами A и B будет 3 пробела.
Например, для создания текста <CENTER> в исходном тексте зтой страницы
записано: <CENTER>.
Комментарии |
Не все браузеры обрабатывают вышеприведенные команды комментариев. Большенство
браузеров обрабатывают следующую запись комментариев: <COMMENT>Комментарий</COMMENT>
Таблицы |
Есть еще несколько команд, задающих цвет обрамления:
- BORDERCOLOR,
- BORDERCOLORDARK,
- BORDERCOLORLIGHT,
но они используются только в Internet Explorer.
Простейшая таблица состоит из одной клетки.Команды <TD> и </TD>
определяют соответственно начало и конец данных в клетке. Строго говоря,
команда </TD> не является обязательной, но я советую ею пользоваться
для облегчения чтения исходного текста.
Пример, таблица задана в следующем виде:
<TABLE border=0>
<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=0>
<TH>Содержимое</TH>
<TH>Название</TH>
<TR>
<TD>HTML</TD>
<TD>Язык<BR>разметки<BR>гипертекста</TD>
</TABLE>
Отображается следующим образом:
Содержимое | Название |
---|---|
HTML | Язык
разметки гипертекста |
Атрибуты ROWSPAN и COLSPAN команд <TD> и <TH> используются для
формирования клеток данных, обьединяющих более одной строки или столбца.
Например, таблица: <TABLE border=0>
<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 | Обьекты |
Гипертекстовые ссылки |
Переход в другой документ этой же 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(кадры) |
Сначала рассмотрим простейший ПРИМЕР 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>
Специальные эффекты |
Создание бегущей строки.
Замечание: Работает в 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>
Формы |
Форма начинается командой <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 - атрибут, задающий текст, отображаемый на управляющем элементе,
Произвольный текст - значение текста на управляющем элементе.
Данная кнопка имеет следующий вид:
Ниже приводятся основные типы управляющих злементов INPUT.
I. Текстовая строка: TYPE=TEXT.
Определяет окно для ввода одной строки текста. Пример:
<INPUT TYPE=TEXT NAME="text1" SIZE=30 VALUE="Введите текст">
II. Окно для ввода пароля: TYPE=PASSWORD.
Аналогичен типу TEXT, но при вводе каждый символ заменяется на *. Пример:
Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=PASSWORD NAME="pass" SIZE=10 MAXLENGHT=5>
V. Помеченный квадрат: TYPE=CHECKBOX
В отличие от радиокнопок, может быть несколько квадратов с одинаковыми
именами. Например, в следующем примере первоначально задана кнопка "Водка":
<INPUT TYPE=CHECKBOX NAME=box VALUE="Водка" checked>Водка
<INPUT TYPE=CHECKBOX NAME=box VALUE="Коньяк">Коньяк
<INPUT TYPE=CHECKBOX NAME=box VALUE="Ликер">Ликер
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>
IIIX. Кнопка ввода: TYPE=SUBMIT.
Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=SUBMIT VALUE="Ввод данных">
Команды 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.