Гиперссылки изображений
Гиперссылки можно назначать не только тексту, но и графическим изображениям, добавленным с помощью тега <IMG>
Создадим документ, в котором изображение будет использоваться как внешняя гиперссылка. Перед созданием файлов скопируем к себе в папку файлы bckgrd115.gif, bdblue.gif и button52.gif.
Создадим файл с именем c1.htm
<HTML>
<HEAD>
<TITLE> Гиперссылка на изображение </TITLE>
</HEAD>
<BODY>
<A HREF="a1.htm"><IMG SRC=BDBLUE.gif></A>
</BODY>
</HTML>
Создадим файл с именем a1.htm
<HTML>
<HEAD>
<TITLE> Файл </TITLE>
</HEAD>
<BODY background=Bckgrd115.gif>
<IMG SRC="BUTTON52.GIF" >
<IMG SRC="BUTTON52.GIF" >
<IMG SRC="BUTTON52.GIF" >
<IMG SRC="BUTTON52.GIF" >
</BODY>
</HTML>
Просмотрим фал с1.htm в браузере. Мы видим, что рисунок обрамлен синей рамкой. Двойной щелчок мыши на этом рисунке позволит перейти на другую страницу.
В папке HTML находится коллекция различных рисунков – кнопок, которые можно использовать в качестве гиперссылок.
Для сведения:
Можно создать гиперссылку на звуковой файл, содержащий музыкальное произведение, звуковой эффект или голосовое сообщение, записанное в файл с помощью средств цифровой звукозаписи. Обозреватели поддерживают воспроизведение звуковых файлов следующих форматов:
MIDI – музыкальные произведения в файлах с расширением .mid;
MP3 - музыка, песни и звуковые сообщения в файлах с расширением .mp3;
RealAudio – интерактивное радио и звукозапись в файлах с расширением .ra;
Wav – звуковые эффекты в файлах с расширением .wav.
Обозреватели также поддерживают просмотр видеоклипов следующих форматов:
AVI – файлы с расширением .avi;
MPEG - файлы с расширением .mpg или .mpeg;
QuikTime – небольшие клипы в файлах с расширением .mov или .gt.
Для воспроизведения фоновой музыки применяют тег <BGSOUND>
<BGSOUND SRC="имя файла.mid" LOOP="-1" BALANCE="-5000" VOLUME=0>
ТАБЛИЦЫ
В HTML ячейки таблицы могут содержать любую информацию (в том числе и другие таблицы).
Это позволяет использовать их для упорядоченного размещения на странице текста и изображений (фиксации их положения относительно друг друга). Т.о. можно создавать страницы сложной структуры.
HTML-таблицы состоят из строк и столбцов. Сами таблицы, строки, столбцы и их содержимое задаются при помощи тегов HTML. Определение заголовков столбцов таблицы позволяет улучшать ее внешний вид.
Для каждой ячейки можно задать режим выравнивания содержимого, цвета фона, текстурное изображение.
Для добавления на web-страницу таблицы используется тег <table></table>.
Элементы таблицы задаются с помощью 3-х тегов:
<th> - определяет заголовок столбцов;
<tr> - для задания строк таблицы;
<td> - для задания ячеек, принадлежащих строке.
Пример (таблица 2х2 с заголовками)
<html>
<
<th>Столбец 1</th>
<th>Столбец 2</th>
<tr>
<td>Строка1, столбец 1</td>
<td>Строка1, столбец 2</td>
</tr>
<tr>
<td>Строка2, столбец 1</td>
<td>Строка2, столбец 2</td>
</tr>
<table>
</html>
С помощью тегов <col> и <colgroup> можно задать форматирование всех ячеек столбца.
<col> - форматирование одного столбца;
<colgroup> - объединяет несколько столбцов в одну группу.
Пример (Стандартная таблица).
<html>
<h2>Стандартная таблица</h2>
<table border=4 cellspacing=3>
<caption> Заголовок таблицы </caption>
<
<th bgcolor="yellow">Заголовок 2
<tr><td>Ячейка 1
<td>Ячейка 2
<tr><td>Ячейка 3
<td>Ячейка 4
</table>
</html>
Пример
<html>
<h2>Табличка</h2>
<table border=4 cellspacing=3 cellpadding=10>
<tr>
<td bgcolor="yellow">Петровым 2 звонка
</table>
</html>
Пример
<html>
<h2>Использование элементов THEAD, TBODY и TFOOT</h2>
<table border=2>
<thead>
<tr> <td>Заголовок 1<td>Заголовок 2
<tfoot>
<tr> <td>Нижний блок таблицы<td>
<
<tr> <td>Строка 1 <td>Ячейка 1.2
<tr> <td>Строка 2 <td>Ячейка 2.2
<tbody>
<tr> <td>Строка 3 <td>Ячейка 3.2
<tr> <td>Строка 4 <td>Ячейка 4.2
<tr> <td>Строка 5 <td>Ячейка 5.2
</table>
</html>
Пример
<html>
<h2>Объединение ячеек</h2>
<table border=4 cellspacing=0 width=70%>
<tr><td bgcolor="yellow"><b>Заголовок 1</b>
<td bgcolor="yellow"><b>Заголовок 2</b>
<tr><td rowspan=3 bgcolor="lime">Ячейка 1
<td>Ячейка 2
<tr><td>Ячейка 3
<tr><td>Ячейка 4
<tr><td colspan=2 bgcolor="aqua" align="center">
Ячейка 5
</table>
<h2>Объединение ячеек</h2>
<h3>(Вариант 2)</h3>
<table border=4 cellspacing=0 width=70%>
<tr><td bgcolor="yellow"><b>Заголовок 1</b>
<td bgcolor="yellow"><b>Заголовок 2</b>
<td bgcolor="yellow"><b>Заголовок 3</b>
<tr><td rowspan=4 colspan=2 bgcolor="lime">Ячейка 1
<tr><td>Ячейка 2
<tr><td>Ячейка 3
<tr><td>Ячейка 4
<
</table>
</html>
ФРЕЙМЫ
Благодаря фреймам в одном окне Web-браузера можно отобразить сразу два (или более) HTML-документа.
Каждый фрейм предназначен для отображения отдельного документа.
Фрейм – это отдельный законченный - документ, который в месте с другими HTML-документами может быть отображен в окне Web-браузера.
Эти HTML-документы могут быть либо связанными друг с другом, либо автономными.
Чаще всего фреймы используют для создания навигационной панели Web-браузера.
Навигационные фреймы могут быть расположены у любого края Web-страницы, но чаще всего их располагают у левой или верхней кромки Web-страницы.
В большинстве случаев используют 2 или 3 фрейма. Содержимое отдельных фреймов может просматриваться независимо от других частей окна браузера. Для каждого фрейма могут выводиться отдельные полосы прокрутки.
Создание фреймов предполагает создание нового HTML-документа специального типа, который называется управляющим файлом (frameset). Структура которого отличается от обычного документа.
Управляющий файл – это особый тип HTML-документа, в котором указывают сколько документов откроется в окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться. Такой документ не содержит тела документа и не содержит какого либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> … </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне браузера, а также задают документы, которые будут загружаться в каждую область.
Структура управляющего файла:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE> Untitled </TITLE>
</HEAD>
<FRAMESET COLS="100,*", ROWS="">
<FRAME NAME=frame1 NORESIZE SRC=" ">
<FRAME NAME=frame2 SRC=" ">
</FRAMESET>
</HTML>
Тег <FRAMESET> должен содержать обязательный атрибут cols или rows, определяющий способ разбиения окна (cols – вертикально, rows – горизонтально).
Тег <FRAME> определяет документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> должно соответствовать числу вложенных областей. Тег <FRAME> должен содержать обязательный параметр SRC="имя файла.htm", определяющий документ, загружаемый в данную область. Параметр NAME задает имя фрейма. Имя фрейма используется для создания ссылок между фреймами.
Создадим фреймовую структуру, делящую окно браузера на две вертикальные области (одна из которых будет занимать 40% окна, другая – оставшиеся 60%) и просмотрим как это будет выглядеть в окне браузера. Затем создадим фреймовую структуру, которая делит окно браузера на две равные горизонтальные области и просмотрим как это будет выглядеть в окне браузера.
Рассмотрим пример вертикальных фреймов
Содержимое файла фреймы1.htm <HTML> <HEAD> <TITLE>Документ с фреймами </TITLE> </HEAD> <FRAMESET COLS="40%,*"> <FRAME SRC="левый.htm"> <FRAME SRC="правый.htm"> </FRAMESET> </HTML>
Содержимое файла левый.htm <HTML> <HEAD> <TITLE> Левый фрейм</TITLE> </HEAD> <BODY bgcolor=#A68064> <H1 align=center>Это левый фрейм</H1> </BODY> </HTML>
Содержимое файла правый.htm <HTML> <HEAD> <TITLE> Правый фрейм</TITLE> </HEAD> <BODY bgcolor=#db9370> <H1 align=center>Это правый фрейм</H1> </BODY> </HTML>
|
Рассмотрим пример горизонтальных фреймов
Содержимое файла фреймы2.htm <HTML> <HEAD> <TITLE>Документ с фреймами </TITLE> </HEAD> <FRAMESET ROWS="50%,*"> <FRAME SRC="верхний.htm"> <FRAME SRC="нижний.htm"> </FRAMESET> </HTML>
Содержимое файла верхний.htm <HTML> <HEAD> <TITLE> Левый фрейм</TITLE> </HEAD> <BODY bgcolor=#6F4242> <H1 align=center>Это верхний фрейм</H1> </BODY> </HTML>
Содержимое файла нижний.htm <HTML> <HEAD> <TITLE> Правый фрейм</TITLE> </HEAD> <BODY bgcolor=#CFB53B > <H1 align=center>Это нижний фрейм</H1> </BODY> </HTML>
|
Создадим фреймовую структуру, которая делит область окна браузера на три части, одна из которых – верхняя.
Содержимое файла Организация фреймов.htm
<HTML>
<HEAD>
<TITLE>Организация фреймов </TITLE>
</HEAD>
<FRAMESET ROWS="40%,*">
<FRAME SRC="верхний.htm">
<FRAMESET COLS="30%,*">
<FRAME SRC="левый.htm">
<FRAME SRC="правый.htm">
</FRAMESET>
</HTML>
Теперь просмотрим в окне браузера и сделаем выводы.
Задание для самостоятельной работы
Создать фреймовую структуру, включающую в себя следующее разбиение
ФОРМЫ
Формы и сценарии редко используются на персональных Web-страницах, но без этих элементов трудно обойтись при разработке профессионального корпоративного Web-узла. С помощью форм выполняют следующие задачи:
Сбор информации от пользователей с последующим сохранением в базе данных. Такое применение форм предполагает создание сложных программ и сценариев для работы с базой данных.
Интерактивное управление содержанием Web-страницы. Элементы управления формы заработают только после того, как им будут назначены функции выполнения событий.
Форма позволяет получить ту или иную информацию от пользователя. Реализация любой формы требует наличия двух компонентов:
HTML-кода, описывающего форму;
сценария обработки вводимых пользователем данных.
В качестве элементов формы могут использоваться кнопки, переключатели, флажки, текстовые области, списки, меню.
Форма на Web-странице должна быть простой и понятной для пользователей. Вся форма должна умещаться в окне обозревателя, поэтому нужно следить, чтобы ширина формы не превышала 75 символов, а высота формы была в пределах 40 строк. Подписи элементов управления должны быть короткими, но понятными. Используйте также экранные подсказки (параметр title).
Формы создаются с помощью тега <FORM></FORM>.
Объект формы не отображается в окне обозревателя до тех пор, пока в него не будут добавляться элементы формы.
С помощью параметров тега <FORM> можно настроить общие параметры работы формы:
METHOD — определяет метод передачи данных формы на Web-сервер
NAME — имя формы, по которому к форме и к ее элементам можно обращаться в коде сценария на JavaScript.
ACTION — адрес сценария обработки данных формы. Это может быть адрес URL ресурса в Интернет или адрес электронной почты, как в следующем примере:
<FORM METHOD="post" ACTION="mailto:MyAadrees@mail.ru" ENCTYPE="text/plain">
Для установки адреса электронной почты используется ключевое слово mailto:, как и при создании гиперссылки на адрес электронной почты.
Сценарий – это программа, с помощью которой производится обработка данных, введенных в форму. Если этот параметр отсутствует, то используется URL самого документа, содержащего форму.
ENCTYPE — формат данных формы. В том случае если данные формы предназначены для передачи по адресу электронной почты поэтому атрибуту следует присвоить значение "plain/text".
ACCEPT-CHARSET — поддерживаемая кодировка текста. Если в полях формы предполагается ввод текста с использованием символов кириллицы, следует установить поддержку соответствующей кодировки текста, например: KOI8-R.
Теги <FORM>…</FORM> могут находиться в любой части основного раздела документа HTML, заключенного между тегами <BODY>...</BODY>. Если в документе предполагается использование элементов управления формы, тег <FORM> может следовать сразу за тегом <BODY>, как в следующем примере:
<BODY><FORM>...</FORM></BODY>.
TARGET – указывает окно, в котором будут отображаться результаты обработки формы.
После того, как объект формы будет добавлен, его следует наполнить содержимым – элементами управления формы. Многие элементы управления формы создаются с помощью тега <INPUT> по следующей схеме: <INPUT TYPE="тип" NAME="имя">.
Параметр TYPE указывает тип создаваемого элемента:
text – создает строку для ввода текста;
password – создает строку для ввода пароля, все вводимые символы заменяются звездочками;
checkbox – создает флажок;
radio – создает переключатель;
button –создает кнопку произвольного значения;
submit – создает кнопку "Отправить";
reset – создает кнопку "Сбросить";
image – создает кнопку-изображение.
Рассмотрим пример:
<HTML>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="first_name" SIZE="30">Имя «<BR>
<INPUT TYPE="text" NAME="last_name" SIZE="30">Фамилия<BR>
<INPUT TYPE="text" NAME="birthday" SIZE="5" MAXLENGTH="4">Год рождения<ВR>
Введите пароль<INPUT TYPE="password" NAME="pass" SIZE="1O" MAXLENGTH="10"><BR>
Укажите путь к файлу:<BR><INPUT TYPE="file" SIZE="17">
</FORM></BODY></HTML>
Рассмотрим второй пример:
<HTML> <BODY> <FORM>
<H2>Цвет фона страницы</H2>
<INPUT TYPE="radio" NAME="color" VALUE="white" CHECKED ACCESSKEY="Б"><FONT COLOR="red" >Б</FONT></U>елый
<BR><INPUT TYPE="radio" NAME="color" VALUE="yellow" ACCESSKEY= "Ж"><U><FONT COLOR= "red" >Ж</FONT></U>елтый
<BR><INPUT TYPE="radio" NAME="color" VALUE="green" ACCESSKEY="3"><U><FONT COLOR= "red" >3</FONT></U>еленый<BR><BR>
<Н2>Выберите фрукт</Н2>
<INPUT TYPE="checkbox" NAME="fruit" VALUE="pear" CHECKED ACCESSKEY="Г"> <U><FONT COLOR="red">Г</FONT></U>pyшa
<BR><INPUT TYPE="checkbox" NAME="fruit" VALUE="peach" CHECKED ACCESSKEY="P"> Пе<U><FONT COLOR="red" >p</FONT></U>сик
<BR><INPUT TYPE="checkbox" NAME="fruit" VALUE="apple" ACCESSKEY="Я"><U><FONT COLOR="red">Я</F0NT></U>блоко<BR>
<
