Вставка графических объектов

Можно очень красиво описать Тригорское, но слова здесь никогда не создадут такого впечатления, как правильно подобранная иллюстрация. Для того, чтобы браузер отобразил графический объект, нужно в тексте страницы написать строчку:

<IMG SRC=”image2.jpg”>

Есть у тега <IMG> еще несколько важных атрибутов. Кроме SRC= (значением является путь к изображению), нужно указать значения атрибутов WIDTH= и HEIGHT=. Длинна и высота рисунка (соответственно в пикселях). Чтобы при наведении курсора на изображение всплывал так называемый альтернативный текст (подсказка), нужно использовать атрибут ALT=. В его значении записывается текст подсказки.

Некоторые браузеры автоматически создают рамку вокруг изображения. Не всегда это выглядит красиво. Атрибут BORDER= позволяет контролировать толщину рамки в пикселях или вообще убрать ее значением BORDER=”0”.

Изображение можно легко сделать гиперссылкой, заключив его между тегами <A></A>. Например:

<A HREF=”page.html”><IMG SRC=”image.jpg” WIDTH=”200” HEIGHT=”150” BORDER=”0” ALT=”Красивая фотография”></A>

Для иллюстрации работы с графикой на web-странице в раздел, посвященный Пушкиногорью на сайте компании «Стрела», добавим графическое изображение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела". Туристские перевозки</TITLE>

</HEAD>

<DIV ALIGN="CENTER"><H1>Город Псков</H2>

<FONT SIZE="+2">Тригорское</FONT><BR><BR>

Мир Тригорского - это три его былинных горы, его райские кущи, это веселый дом

Осиповых-Вульф. Не ищите в Тригорском того, что видели в Михайловском. Их нельзя

сравнивать. Там все иначе, и Пушкин совсем другой. В Михайловском Пушкин - человек,

гонимый судьбою, анахорет, поэт, пророк. Суровые сосны и ели старого бора вечно шумят

об этом. В Тригорском Пушкин просто отлично добрый человек, балагур и весельчак,

забавник и ухажер, «гуляка праздный». Здесь все и всегда радостно, и в природе парка

всегда слышится веселая песня, и в ней «без конца и без краю весна».

<P ALIGN="right"><FONT SIZE="-1">По материалам книги Семена Гейченко "Пушкиногорье"</FONT></P>

</BODY>

</HTML>

Внешний вид страницы продемонстрирован на рисунке 8.

В этом примере присутствует фотография, наглядно иллюстрирующая всю красоту Тригорского. Графическое изображение выполняет еще и роль гиперссылки.

У многих пользователей скорость соединения с Интернетом достаточно медленная. Поэтому тратить свое время на загрузку больших фотографий, не имея понятия, что там изображено, им ни к чему. Поэтому можно предоставить посетителю право выбора: просмотреть фотографию в натуральную величину или нет. Для этой цели используют миниатюры. Уменьшить изображение можно в любом графическом редакторе.

Рис. 8

Создание таблиц

Таблицы позволяют создавать очень красивые и удобные web-страницы. При их помощи можно легко выравнивать текстовые блоки и изображения и размещать их по всей площади рабочего окна браузера. Это заметно облегчает работу с документом, насыщенным разнообразной информацией.

Таблица – это то, что заключено между тегами <TABLE></TABLE>. Но строка

<TABLE>

Таблица №1

</TABLE>

не вызовет появления таблицы в окне браузера. Чтобы таблица отобразилась, нужно, как минимум, создать в ней одну строку, а в строке - ячейку. Например:

<TABLE>

<TR>

<TD>

Таблица №1

</TD>

</TR>

</TABLE>

Теги <TR></TR> обозначают строку, а теги <TD></TD> обозначают ячейку, находящуюся внутри строки. Это уже таблица, в нее можно добавить сколько угодно строк и ячеек. Тем не менее, если вставить приведенную выше строчку в тело HTML-документа, то будет виден просто «голый» текст «Таблица №1». Дело в том, что у тега <TABLE> есть атрибут BORDER=, по умолчанию его значение равно нулю. Следовательно, если мы поставим значение атрибута «1», то текст внутри таблицы будет обведен в рамку (рисунок 9).

Рис. 9

Существует еще один очень важный атрибут WIDTH=, фиксирующий ширину таблицы. Значение его можно задавать как в пикселях, так и в процентах. Напишем

<TABLE WIDTH=”50%” BORDER=”1”>

<TR>

<TD>

Таблица №1

</TD>

</TR>

</TABLE>

Теперь таблица будет занимать ровно половину рабочего окна браузера.

Установим еще два важных атрибута тега <TABLE>. CELLPADDING и CELLSPACING. Они задают отступ от края ячейки и расстояние между ячейками в таблице соответственно. Оба значения задаются в пикселях. Приведем пример:

<TABLE WIDTH=”200” BORDER=”2” CELLPADDING=”5” CELLSPACING=”3”>

<TR>

<TD>

Текст в таблице

</TD>

</TR>

</TABLE>

Рис. 10

Толщина рамки таблицы равна двум пикселям, отступ от края ячейки – пять пикселей, длинна всей таблицы – двести пикселей. Ширина этой таблицы не изменится, если расширить или сузить окно браузера.

Нарисуем еще одну таблицу, в которой будет две ячейки и две строки. В ней обозначим значение атрибута BGCOLOR= (цвет фона).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Таблица из двух строк и двух ячеек</TITLE>

</HEAD>

<TR>

<TD>Первая ячейка (первая строка)</TD>

<TD>Вторая ячейка (первая строка)</TD>

</TR>

<TR>

<TD>Первая ячейка (вторая строка)</TD>

<TD>Вторая ячейка (вторая строка)</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис. 11

Теги <TR> и <TD> имеют несколько одинаковых атрибутов:

1. Атрибут ALIGN= (горизонтальное выравнивание текста):

· Left (по левому краю)

· Right (по правому краю)

· Center (по центру)

2. Атрибут VALIGN= (вертикальное выравнивание текста):

· Top (по верхней границе)

· Bottom (по нижней границе)

· Middle (по центру)

При помощи атрибута BGCOLOR= можно установить отдельный цвет для строки или ячейки.

Атрибут VALIGN= может показаться бессмысленным, но это не так. Если у вас в таблице несколько столбцов, то могут возникнуть проблемы, если не указать значение атрибута VALIGN=. По умолчанию вертикальное выравнивание производится по центру. Поэтому, если в одной ячейке текста больше, чем в другой, то он «съедет» в середину (рисунок 12).

Рис. 12

Намного лучше, когда текст в обоих столбцах (ячейках) выравнивается по верхней границе. Для этого достаточно задать значение атрибута VALIGN= для тега <TR>:

<TR VALIGN=”top”>

Теперь выравнивание во всех ячейках, находящихся внутри этой строки, будет по верхней границе.

Рис. 13

Таблица с тонкой рамкой

Иногда требуется создать таблицу с толщиной рамки в один пиксель. К сожалению, средства стандартного HTML не позволяют сделать этого. Мы уже пробовали задать значение единицы атрибуту BORDER=. Как видно на примере (рис. 9), рамка все равно не очень тонкая. Здесь нужно воспользоваться другим методом. А именно, вставить внутрь таблицы еще одну таблицу.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<TR>

<TD BGCOLOR="#FFFFFF">Ячейка 1</TD><TD BGCOLOR="#FFFFFF">Ячейка 2</TD></TR>

<TR>

<TD BGCOLOR="#FFFFFF">Ячейка 3</TD><TD BGCOLOR="#FFFFFF">Ячейка 4</TD></TR>

</TABLE>

</TD></TR>

</TABLE>

</BODY>

</HTML>

Рис. 14

Создание HTML -форм

Как уже отмечалось, основное отличие Web от остальных средств массовой информации заключается в ее интерактивности. Пользователь Интернета может сам выбирать, какие страницы ему смотреть и с кем общаться.

Важным элементом HTML, придающим web-странице интерактивность, служит форма. Это классическое средство для получения информации от посетителя web-страницы (организации обратной связи). Формой обычно называют несколько текстовых полей, куда пользователь может ввести текст и отослать его адресату, используя экранную кнопку. В ряде случаев посетителю может быть предложено выбрать несколько пунктов из перечня предложенных вариантов – это также форма.

Добавление формы в HTML-документ

Для обозначения начала и конца формы используются теги <FORM></FORM>. Пример добавления формы в документ выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Простая форма</TITLE>

</HEAD>

<BODY>

<FORM>Форма №1</FORM>

</BODY>

<HTML>

Как и в случае с созданием таблиц, строка

<FORM>Форма №1</FORM>

не приведет к появлению формы на странице. Любая форма должна содержать следующие параметры:

1. Элементы формы

2. Кнопку отправки данных серверу

3. Адрес программы на сервере, которая будет обрабатывать полученную информацию.

Существует множество элементов форм, вот некоторые из них:

· Текстовое поле

· Многострочный текст

· Кнопка

· Флажки

· Переключатели

· Поле со списком

Если пользователь решит заполнить форму и нажмет кнопку «Отправить», то ее информация будет особым методом послана серверу, где ее обработает специальная программа.

Чтобы указать, куда и как отправить данные, внесенные в форму, используются следующие атрибуты тега <FORM>:

Action – адрес программы, которая принимает информацию от отправителя

Method – метод пересылки данных, введенных в форму. Существуют два его значения:

1. GET – данные пересылаются в качестве добавки к URL адресу (например, http://www.yoursite.ru/cgi-bin/program.cgi?name=Ivan&city=Orel)

2. POST – информация пересылается в виде отдельного блока данных.

Текстовые поля

Теперь перейдем непосредственно к работе с элементами формы. Пожалуй, самым широко используемым элементом является текстовое поле. Разберем пример HTML-кода web-страницы с простейшей формой, содержащей текстовые поля для ввода имени и адреса клиента и кнопку отправки информации.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Простая форма</TITLE>

</HEAD>

<BODY>

<DIV ALIGN="center"><FONT SIZE="+1">Заполните форму</FONT></DIV>

Ваше имя: <INPUT TYPE="text" SIZE="10" MAXLENGHT="50" NAME="Name"><BR><BR>

Ваш адрес: <INPUT TYPE="text" SIZE="10" MAXLENGHT="50" NAME="Adress"><BR><BR>

</FORM>

</BODY>

</HTML>

Результат приведен на рис.15.

Разберем некоторые детали текста. Атрибут TYPE= указывает на вид элемента формы. В нашем случае – это текстовое поле (TYPE=”text”). Атрибут SIZE отвечает за длину поля. Каждая единица – символ, то есть, SIZE=”10” означает, что текстовое поле фиксированной длины, что в нем будут одновременно видны десять символов. MAXLENGHT= - это максимальное количество символов, которое разрешено вводить в текстовое поле. Атрибут NAME= задает имя элементу формы. При просмотре полученных от пользователя данных эти имена используются, чтобы определить, от какого элемента формы получена информация. INPUT TYPE=”SUBMIT” – это кнопка отправки данных программе обработки. VALUE= задает слово, написанное на кнопке.

Рис. 15

Существует еще одна стандартная кнопка, производящая очищение всех полей формы. В HTML-документ ее можно добавить строкой

<INPUT TYPE=”reset” VALUE=”Очистить форму”

Для получения отзывов или комментариев используют многострочное текстовое поле, которое задается тегами <TEXTAREA></TEXTAREA>. Атрибут COLS= определяет количество символов в строке, атрибут ROWS= определяет число строк текстового поля.

Давайте создадим специальную страницу на сайте компании «Стрела», на которой будут приниматься отзывы от посетителей.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела". Туристские перевозки</TITLE>

</HEAD>

<FONT FACE="Arial" SIZE="+3"><P>Компания "Стрела"</P></FONT>

<FONT SIZE="+2"><I>Туристские перевозки по России и ближнему зарубежью.</I></FONT>

<A HREF="tours.html">Список туров</A>

<A HREF="price.html">Прайс лист</A>

<A HREF="opinions.html">Отзывы клиентов</A>

<A HREF="mailto:[email protected]">Контакт</A>

</DIV>

<BR>

<FONT SIZE="+1">Дорогой посетитель, оставьте, пожалуйста, свой отзыв об услугах

компании!</FONT>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Ваш адрес:</td>

</tr>

<tr>

<td>Ваш отзыв:</td>

</tr>

<tr>

</tr>

</TABLE>

</FORM>

<BR>

<FONT SIZE="+1">Большое спасибо!</FONT>

</DIV>

</BODY>

</HTML>

Результат работы показан на рисунке 16.

В вышеприведенном HTML-коде появилась следующая строка

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

Это обозначение кодировки. В данном случае, windows-1251 (Кириллица). Если эта строка будет отсутствовать в элементе HEAD, браузер попытается сам определить кодировку документа. Не всегда это удается успешно.

Для удобства позиционирования, текстовые поля и кнопки были помещены в ячейки таблицы. Сама же таблица находится между тегами <FORM></FORM>. Это позволяет избежать ненужных отступов, которые могут появиться, если расположить форму внутри таблицы.

Флажки, переключатели и поле со списком

Флажки используются, когда пользователь должен выбрать из списка предложенных вариантов один или несколько. Каждый из пунктов списка определяется с помощью атрибута тега <INPUT> TYPE=”checkbox”. Вот их стандартный вид:

Ваши интересы:

<INPUT TYPE="checkbox" NAME="interst1" VALUE="Sports">Спорт

<INPUT TYPE="checkbox" NAME="interst2" VALUE="Computers">Компьютеры

<INPUT TYPE="checkbox" NAME="interst3" VALUE="Art">Искусство

<INPUT TYPE="checkbox" NAME="interst4" VALUE="Science">Наука

Рис. 16

Переключатели используются обычно в тех случаях, когда нужно получить от пользователя четкий ответ. Можно отметить лишь один переключатель. Каждый из них определяется с помощью атрибута TYPE=”radio”.

Ваш пол:

<INPUT TYPE="radio" NAME="pol"VALUE="Male"> Мужской

<INPUT TYPE="radio" NAME="pol" VALUE="Female">Женский

Поле со списком по своей функции схоже с переключателями, но внешний вид их различается. Например, с помощью раскрывающегося списка, можно попросить посетителя указать его возраст. Для того чтобы вставить поле со списком в HTML-документ используют теги <SELECT></SELECT>.

Ваш возраст:

<SELECT NAME="AGE" SIZE="1">

<OPTION VALUE="1">менее 18

<OPTION VALUE="2">18-25

<OPTION VALUE="3">25-35

<OPTION VALUE="4">35-45

<OPTION VALUE="5">более 45

</SELECT>

Атрибут SIZE=”1” определяет размер списка. Если указать значение «3», то список превратится в прокручиваемый список, где будут одновременно видны три строки.

Давайте рассмотрим пример, наглядно иллюстрирующий все разобранные нами элементы форм. Допустим, компания «Стрела» решила провести конкурс на бесплатную путевку среди посетителей своего web-сайта. Для участия требуется заполнить небольшую анкету. Предполагается, что ее данные будут использованы в маркетинговых целях, для анализа аудитории сайта. Создадим страницу, на которой содержится форма.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела".Туристские перевозки</TITLE>

</HEAD>

<FONT FACE="Arial" SIZE="+3"><P>Компания "Стрела"</P></FONT>

<FONT SIZE="+2"><I>Туристские перевозки по России и ближнему зарубежью.</I></FONT>

<A HREF="tours.html">Список туров</A>

<A HREF="price.html">Прайс лист</A>

<A HREF="opinions.html">Отзывы клиентов</A>

<A HREF="mailto:[email protected]">Контакт</A>

</DIV>

<BR>

<FONT SIZE="+1">Заполните, пожалуйста, анкету!</FONT>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Ваш адрес:</td>

</tr>

<tr>

<td colspan="2"><P>Ваш возраст:</P>

<OPTION VALUE="1">менее 18

<OPTION VALUE="1">18-25

<OPTION VALUE="1">25-35

<OPTION VALUE="1">35-45

<OPTION VALUE="1">более 45

</SELECT></td>

</tr>

<tr>

<INPUT TYPE="radio" NAME="sex" VALUE="Male">Мужской

Женский </td>

</tr>

<tr>

<td colspan="2"><P>Ваши интересы:</P>

<INPUT TYPE="checkbox" NAME="interst1" VALUE="Sports">Спорт

<INPUT TYPE="checkbox" NAME="interst1" VALUE="Computers">Компьютеры

<INPUT TYPE="checkbox" NAME="interst1" VALUE="Art">Искусство

<INPUT TYPE="checkbox" NAME="interst1" VALUE="Science">Наука </td>

</tr>

<tr>

<td>Мнение об услугах:</td>

</tr>

<tr>

</tr>

</FORM>

</table>

<BR>

<FONT SIZE="+1">Большое спасибо!</FONT>

</DIV>

</BODY>

</HTML>

Если вы внимательно изучили HTML-код, то, наверное, обратили внимание на атрибут тега <TD> COLSPAN. Он определяет количество столбцов, на которые растягивается ячейка. Результат представлен на рисунке 17.

В этом разделе книги были рассмотрены основные средства HTML. На самом деле их намного больше. Поэтому, если вы собираетесь серьезно занимать HTML, вам понадобиться специальный справочник. Для создания web-сайтов дополнительно применяются технологии CSS, SSI, PHP, CGI. Они требуют отдельного подробного изучения.

Язык HTML изначально задумывался как язык для публикации научных материалов в Интернете. Поэтому смысл в написании HTML-документов заключается в возможности прочитать и понять его без браузера. Сейчас, с появлением таких технологий, как JavaScript и DHTML (Dynamic HTML), читать исходный текст web-страниц становится сложнее. Создатели HTML не предполагали, что язык получит такое широкое распространение. Первые версии языка практически не включали элементов оформления. Более поздние же изобилуют ими. Однако пользоваться технологическими новшествами необходимо с известной долей осторожности. Возможно, в ответственных случаях стоит отказаться от использования некоторых «сомнительных» тегов, которые могут привести к некорректному отображению страниц различными браузерами.

Рис. 17

2. Реклама и предоставление услуг через Интернет

Итак, все усилия по написанию текста Web-страниц позади. Ваши страницы протестированы и записаны в рабочую папку. Вы обговорили все условия ее размещения в Интернете с провайдером и выполнили его условия. Ваша главная страница уже находится в адресном пространстве Интернета и послушно открывается браузером вашего домашнего компьютера. С этого момента появляются основные заботы. Вы должны обслуживать и рекламировать (сопровождать) ваш сайт. Иначе вы останетесь его единственным посетителем. В организации информационного обмена Интернета нет мелочей. Вы должны не только использовать имеющиеся технологические возможности, но и решать психологические проблемы.