Как устроен web-сайт

Как устроен web-сайт:

Любой сайт в интернете представляет собой набор файлов разных типов, находящихся где-то на сервере. Когда пользователь указывает адрес программе-браузеру (наиболее распространенные браузеры - Internet Explorer и Netscape Navigator), эта программа скачивает файл, связанный с указанным адресом, на компьютер пользователя. Как правило этот файл – обычный текстовый файл, в котором кроме текста содержатся команды, управляющие показом содержимого на экране. Эти команды принято называть тегами. Теги используются для изменения шрифта, для вставки рисунков (эти рисунки находятся на сервере в виде отдельных файлов), для указания места перехода на другую страницу по щелчку мышки (после перехода будет отображаться файл web-страницы, относящийся к другому адресу).

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

Средства, при помощи которых создаются web-сайты.

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

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

Рассмотрим три основных способа создания web-сайтов на своем компьютере:

1)  Вариант, не требующий никаких средств, кроме стандартных средств Windows.

Как уже было замечено, основной файл web-страницы представляет собой обычный текстовый файл с символьной кодировкой, поэтому его можно создать и редактировать с помощью текстового редактора Блокнот или какого-либо другого, ему подобного. Чтобы браузер «понял», что это файл web-страницы, его следует сохранить с расширением *.html или *.htm (многие провайдеры интернет требуют, чтобы файл главной страницы сайта имел имя index. html).

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

Созданный файл web-страницы можно сразу посмотреть при помощи Internet Explorer, выбрав пункт меню файлàоткрыть. Для последующего редактирования содержимого web-страницу можно открыть с помощью Блокнота, не выходя из браузера. Для этого достаточно выбрать пункт меню видàпросмотр НТМL-кода. Отредактировав код в блокноте, сохраните его, а затем щелкните в Internet Explorer по иконке обновить (в других браузерах имеются аналогичные команды и иконки). Последовательно переходя от редактирования к просмотру, не забывая сохранять файл и обновлять содержимое окна браузера, можно добиться желаемого результата.

2)  Использование текстовых НТМL-редакторов.

В этом случае, как и при использовании Блокнота, пользователь работает непосредственно с текстом, вставляя в него необходимые теги. Однако специализированные НТМL-редакторы имеют ряд преимуществ:

-  Наглядность при редактировании HTML-кода. Например, для удобства восприятия теги, их параметры и обычный текст показываются разными цветами.

-  Одним щелчком мышки можно переходить от режима редактирования к режиму просмотра и обратно.

-  Легко и без ошибок при помощи мышки вводятся основные теги и их параметры.

-  Используя палитру, можно легко выбрать цвет текста или фона и ввести в нужное место страницы его код.

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

-  Многие редакторы этого типа содержат средства для перемещения web-страниц на сервер.

3)  Использование HTML-редакторов, предназначенных для верстки страницы непосредственно в режиме просмотра.

Например, часто используется редактор FrontPage, входящий в состав Microsoft Office. Такие редакторы позволяют, выделяя и форматируя куски текста, перемещая содержимое с помощи мышки и т. п. добиться нужного вида страницы. После этого программа-редактор автоматически генерирует HTML-код.

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

Как правило, подобные редакторы дают пользователю возможность просматривать получаемый HTML-код и его редактировать, добиваясь большей эффективности кода. Тем не менее, многие профессионалы относятся к подобному подходу осторожно, предпочитая сразу работать непосредственно с текстом.

Изложение методов создания web-сайтов в этом пособии будет ориентировано на второй из предложенных путей. Наиболее популярным HTML-редактором данного типа, вероятно, является Macromedia HomeSite. Однако мы будем рассматривать более простую программу EditPlus. Она имеет небольшой объем (~1МБ), но обладает всеми описанными возможностями. Её меню (см. рисунок) содержит иконки, позволяющие переходить к просмотру страницы (иконка с изображением лупы), определять код цвета (иконка в виде палитры), а также автоматически вставлять многие тегов (другие иконки в том же ряду). Существует возможность передачи файлов на сервер по FTP.

Программу EditPlus можно найти в интернете. В частности, на сайте фирмы-разработчика http://www. / можно получить 30-дневную рабочую версию (shareware).

Теги и их виды.

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

<ИМЯ_ТЕГА ПАРАМЕТР1=”значение1” ПАРАМЕТР2=”зачение2”>

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

Теги бывают парными и непарными. Непарные теги служат для вставки в текст некоторого объекта – линии, рисунка, перехода на новую строчку. Характеристики вставляемого объекта указываются в виде параметров. Парные теги – они встречаются чаще – служат для указания свойств текста и других объектов, заключенных между открывающим и закрывающим тегами (как скобки) . Закрывающий тег записывается так же, как и открывающий, однако в этом случае названию тега предшествует косая черта. Параметры указываются только для открывающего тега. Таким образом, стандартная запись с использованием парных тегов выглядит как:

<ИМЯ_ТЕГА ПАРАМЕТР1=”значение1” ПАРАМЕТР2=”зачение2”>

Текст, на который действует команда, определенная этим тегом

</ИМЯ_ТЕГА>

Как непарные, так и парные теги вместе с их содержимым могут быть вложены внутрь «контейнера» из других парных тегов. При этом нужно следить за правильной последовательностью закрытия этих «скобок»: первым открылся – последним закрылся. Несоблюдение этого правила приводит к неверному показу страницы.

Теги и текст можно распределять по строчкам по своему усмотрению: браузер не делает различия между пробелом и символом перехода на новую строку, вставляемым при нажатии клавиши Enter. Имена тегов и параметров можно записывать как заглавными, так и маленькими буквами.

Структура стандартной web-страницы.

Стандартный файл web-страницы содержит две основные части:

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

2) «Тело» страницы. Именно в этой части помещается всё то, что увидит посетитель сайта.

Ниже показана основная разметка HTML-документа в том виде, в котором он создается редактором EditPlus при выборе команды FileànewàHTML page.

Верхняя строка указывает версию стандарта HTML. В принципе, без этой строки можно обойтись, но стирать ее тоже не нужно. Далее весь документ заключается в парные теги <HTML>, сообщающие о том, что всё, что содержится внутри, соответствует этому стандарту. Практика показывает, что браузеры нормально показывают страницы, даже если они не содержат этих тегов.

Заголовочная часть помещается между открывающим и закрывающим тегами <HEAD> В нее сразу предлагается включить следующие теги (отредактировав их содержимое):

<TITLE> - парный тег, который определяет заголовок окна браузера. Он отображается не на странице, а на синем фоне вверху окна (!).

<META> - непарные служебные теги, передающие информацию поисковым системам, просматривающим страницы, через соответствующие друг другу значения NAME и CONTENT, указываемые в виде текста в кавычках. Значения NAME, предлагаемые при создании страницы, означают:

Generator – программа, в которой создана страница

Author – имя автора

Keywords – Список ключевых слов.

Description – Краткое текстовое описание страницы.

Теги <META> не влияют на отображение страницы. Тем не менее, при размещении сайта в интернете их следует заполнить, поскольку это поможет пользователям легче найти Вашу информацию.

«Тело» страницы помещается между открывающим и закрывающим тегами <BODY>. Внутри открывающего тега <BODY> могут быть указаны некоторые параметры, определяющие цвет элементов страницы, задаваемый по умолчанию. Ни один из этих параметров не является обязательным.

Параметр	Назначение
Bgcolor	Задает цвет фона страницы
Background	Задает имя файла рисунка, используемого в качестве фона. Обычно это небольшой файл, задающий многократно повторяемую текстуру. Допустимые форматы – jpg, gif и png.
Text	Задает цвет, которым по умолчанию отображается текст
Link	Задает цвет, которым отображается гиперссылка, по которой еще не было перехода
Vlink	Задает цвет, которым отображается уже просмотренная гиперссылка
Alink	Указывает цвет, которым по умолчанию отображается активная гиперссылка

Цвет на web-страницах может быть указан двумя способами:

1.  Основные цвета – красный, зеленый и т. п. – можно указать, записав соответствующее английское слово: “red”, “green”. Недостаток этого варианта в том, что можно назвать далеко не все оттенки.

2.  Можно указать шестнадцатеричный код: шесть шестнадцатеричных цифр, две первые из которых показывают интенсивность красного, две следующих – зеленого, а последние – синего цвета при смешивании. Перед этими цифрами ставится символ #. Нулевой интенсивности всех составляющих (#000000) соответствует черный цвет, а максимальной – (#ffffff) – белый.

Примеры открывающих тегов BODY:

А) <BODY BGCOLOR=”yellow”>

B)  <BODY BGCOLOR=”#660066” TEXT=”white” LINK=”yellow” VLINK=” #F3C272”>

C)  <BODY BACKGROUND=”mramor. jpg”>

В последнем примере предполагается, что файл mramor. jpg расположен в той же папке, что и использующая его страница. Если это не так, то следует указывать полный адрес рисунка. Также можно указать URL файла, находящегося в интернете.

Форматирование текста.

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

А) Логическое форматирование. С помощью специальных тегов создатель страницы обозначает отдельные фрагменты как заголовки, разбивает текст на абзацы. Для отдельных слов и фраз специальными тегами автор указывает дополнительную значимость. Браузер по своему усмотрению выбирает шрифты и варианты размещения текста таким образом, чтобы подчеркнуть заданную структуру представленного материала.

Б) Физическое форматирование. В этом случае автор явно указывает размер и цвет шрифта, стиль его начертания, способ выравнивания и т. п.

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

Теги заголовков – парные теги <H1>, <H2>,….,<H7>, где цифра обозначает уровень заголовка. Заголовок первого уровня, определяемый тегами <H1>, отображается наиболее крупным шрифтом. Заголовок <H7>, соответственно, самый мелкий. Таким образом, автор может выбрать уровень заголовка согласно его значимости.

Теги <P> служат для обозначения начала нового абзаца (от слова paragraph). Некоторые авторы руководств по языку HTML считают их парными, некоторые – нет. В частности, программа-редактор EditPlus при нажатии на соответствующую иконку (на ней символ p) вставляет одиночный тег, без закрывающего. Браузеры такое использование нормально интерпретируют, считая, что следующий тег <P> закрывает предыдущий абзац.

Параметр align тега <P> дает возможность задать способ выравнивания текста в абзаце. Возможные значения: left, right, center или justify – соответствуют выравниванию по левому краю, по правому краю, по центру или по ширине, то есть ровными в этом случае будут как правый, так и левый край. Вариант <P align=center> применяется редко, поскольку существует более удобный парный тег <CENTER>, выравнивающий по центру всё, что находится между открывающим и закрывающим тегами: текст, заголовки, рисунки, таблицы и т. п.

Начиная новый абзац, браузер переходит на новую строку, отступая от предшествующего текста на некоторое расстояние. Нужно помнить, что переход на новую строчку, возникающий при нажатии клавиши Enter в процессе набора текста, не приведет к переводу строки при отображении текста браузером. Для перехода на новую строчку существует специальный непарный тег <BR>. Если требуется создать отступ первой строки – используйте несколько последовательных пробелов. Однако, обычные пробелы для этого Вам не подойдут, ибо несколько последовательных пробелов будут восприниматься браузером как один. Вместо обычного пробела в этом случае нужно использовать специальный символ «неразрывного пробела», задаваемый комбинацией &nbsp; Некоторые другие символы также требуют специальных комбинаций, начинающихся с “&”. Так, &lt соответствует знаку “<”, а &gt – “>”.

Один из полезных приемов, подчеркивающих структуру отображаемого материала - использование горизонтальных линий. Эти линии задаются непарными тегами <HR>. Для тега <HR> возможно использование параметра WIDTH, задающего длину линии в пикселях или в процентах (если после числа стоит знак %). Другие параметры – SIZE и COLOR – задают, соответственно, толщину (в пикселях) и цвет линии.

Для изменения шрифта можно применять следующие парные теги:

<B>	Жирный шрифт
<I>	Курсив
<U>	Подчеркнутый текст
<STRIKE>	Перечеркнутый текст
<BIG>	Шрифт большего размера, чем используемый по умолчанию
<SMALL>	Шрифт меньшего размера, чем используемый по умолчанию
<SUP>	Верхний индекс
<SUB>	Нижний индекс

Кроме того, можно использовать парные теги <FONT>, параметры которых задают вид шрифта, его цвет и размер:

·  Color – задается цвет текста

·  Size – задает размер шрифта. Как и для заголовков, существует несколько стандартных размеров шрифта, пронумерованных от 1 до 6 (в порядке увеличения). По умолчанию обычно используется 3-й шрифт (если пользователь не изменил настройки браузера). Размер можно задать числом (например, size=”5”), а можно указать, на сколько единиц следует увеличить или уменьшить шрифт по сравнению с обычным (например, size=”+2”).

·  Face – Определяет способ начертания шрифта. Однако не стоит злоупотреблять этим параметром: явно указывая название шрифта, автор должен быть уверен, что данный шрифт установлен на компьютере пользователя, просматривающего страницу. Если это не так, то текст будет отображаться шрифтом, используемым по умолчанию.

Вставка рисунков.

Для вставки рисунка на web-страницу используется непарный тег <IMG>. Имя файла рисунка, размеры и некоторые другие свойства указываются в виде параметров. Стандарт HTML обязывает браузеры нормально воспринимать три типа файлов изображений:

1)  Файлы *.jpg. Этот формат лучше всего подходит для передачи фотографий.

2)  Файлы *.gif. Если Вам требуется передать изображения, имеющие четкие линии, то этот формат предпочтителен. Кроме того, в формате *.gif есть возможность создания покадровой анимации. Также формат *.gif подходит для создания рисунков, выполненных на прозрачном фоне.

3)  Формат *.png. Этот формат используется редко.

Некоторые другие форматы, например, *.bmp, могут показываться не всеми типами браузеров. Использование «стандартного» формата *.bmp нежелательно ещё и потому, что такие файлы имеют большой размер.

Основные параметры тега <IMG>

-  обязательный параметр SRC. Его значение задает имя файла с отображаемым рисунком. Оптимальный вариант – когда рисунок находится в той же папке, что и вызывающая страница. В этом случае достаточно написать имя файла, не забыв указать расширение (!). Если рисунки хранятся в отдельной папке, следует указывать полное имя файла, включающее в себя папку, где он находится. Можно использовать на своей странице рисунок, размещенный в интернете. Для этого в виде значения параметра SRC указывается его интернет адрес (http://www……).

Примеры:

A)SRC=”picture. jpg” B)SRC=”album\picture. jpg” C)SRC=”http://mysite. *****/picture. jpg”

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

-  Параметр ALT задает так называемый «альтернативный текст», всплывающий при наведении указателя мышки на рисунок.

-  Параметр BORDER задает толщину рамки вокруг рисунка (по умолчанию рамки нет)

-  Для обтекания рисунка текстом используются значения “left” или “right” параметра ALIGN. В первом случае рисунок располагается в левой части страницы, во втором – справа от текста. Если параметр ALIGN не указать, то никакого обтекания не будет.

-  Параметры HSPACE и VSPACE позволяют указать количество свободного места вокруг рисунка в пикселях (сверху - снизу и справа - слева).

Если Вы используете EditPlus, то последовательность действий по добавлению рисунка может быть такой:

-  Поместить файл с рисунком в нужную папку (средствами Windows).

-  В EditPlus: Установить курсор в то место HTML-текста, где должен быть рисунок.

-  Щелкнуть мышкой по иконке . Это вызовет запуск стандартного мастера, позволяющего найти нужный файл. После выбора файла в текст страницы будет вставлен тег <IMG> с рядом параметров. Пример добавляемого тега:

-  Отредактируйте значения параметров. Если нужно добавить новые – добавьте.

Использование таблиц.

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

Для создания простейшей таблицы на web-странице следует использовать парные теги <TABLE>, между которыми с помощью тегов <TR> и <TD> создаются, соответственно, ряды и входящие в них отдельные ячейки.

На рисунке слева показана разметка простейшей таблицы (в таком виде этот фрагмент кода можно увидеть в EditPlus) и результат ее просмотра. Вставить основные теги для разметки обычной таблицы в EditPlus можно, нажав на иконку:

После этого компьютер предложит Вам выбрать число рядов и столбцов.

Внутри открывающего тега <TABLE> могут быть заданы параметры:

1)  WIDTH - ширина таблицы. Может быть выражена в процентах или в пикселях.

2)  BGCOLOR – цвет фона в ячейках таблицы

3)  BORDER – толщина границы. Если не указать, то линии между ячейками видны не будут.

Также можно использовать параметр bordercolor, отвечающий за цвет границы между ячейками, и параметр height, задающий высоту таблицы.

Параметры width, height, bgcolor могут быть применены не только ко всей таблице, но и к отдельным ячейкам: в этом случае они указываются внутри тегов <TD>, открывающих ячейку. Высота ячейки может быть указана внутри тега <TR>, открывающего новый ряд.

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

Объединение ячеек.

Существует возможность объединить две и более ячейки в таблице. Для этого внутрь тега <TD> добавляется либо параметр colspan, значение которого показывает, на сколько колонок будет распространяться объединенная ячейка, либо, если ячейка занимает несколько рядов, параметр rowspan: его значение задает количество объединяемых рядов. Возможно одновременное объединение ячейки как по горизонтали, так и по вертикали – путем одновременного использования параметров colspan и rowspan.

Наиболее надежная последовательность действий по созданию таблицы с объединенными ячейками такова:

1)  Мысленно разделив объединенные ячейки, создать обычную таблицу. Задать необходимые размеры, Записать внутрь ячеек минимальную информацию, например их порядковый номер.

2)  Внутрь тега <TD> первой ячейки объединяемой группы (при обходе слева направо ряд за рядом) вставить:

-  если объединяются несколько колонок (n штук), то colspan=”n”

-  если объединяются несколько рядов (m штук), то rowspan=”m”

-  если объединяются n колонок и m рядов, то colspan=”n” rowspan=”m”

3)  Удалить все теги <TD>, относящиеся к оставшимся ячейкам, входящим в состав объединенной.

4)  Если нужно объединить ещё какие-либо ячейки, пункты 2 и 3 нужно будет повторить еще раз.

Пример фрагмента HTML-кода и конечный вид таблицы с объединением ячеек показан на следующем рисунке:

Гиперссылки.

Гиперссылки – это такие места на web-странице, щелкнув по которым мышкой можно перейти к другому документу. Этот документ, как правило, тоже представляет собой web-страницу, выполненную в стандарте HTML. Для его показа может быть открыто новое окно браузера, а может использоваться уже имеющееся. Чаще всего новый документ замещает старый.

Для создания гиперссылок используются парные теги <A>. Название этого тега идет от слова anchor = якорь. Есть два основных способа использования тега <A>:

1)  Создание гиперссылки (подробное рассмотрение см. ниже).

2)  Создание метки в тексте страницы. Эта метка может быть впоследствии использована для создания гиперссылки не к началу документа, а к его определенному разделу. Метка создается путем вставления тега <A> с параметром NAME, например:

<A NAME=”glava_2”>Глава №2. </A>

Текст между открывающим и закрывающим тегами в этом случае не играет никакой роли.

Для создания гиперссылок используются теги <A> с параметром HREF. Его значением является имя файла, на который совершается переход. Текст, а также рисунки, таблицы и т. п., заключенный между открывающим и закрывающим тегами <A>, начинает функционировать как гиперссылка: при наведении на него курсор мыши приобретает вид руки, а после щелчка осуществляется переход.

В качестве файла можно указать:

1)  Другую страницу в стандарте HTML (файл с расширением *.html, *.htm).

2)  Файлы рисунков в стандарте *.jpg, *.gif. Такие рисунки показываются средствами самого браузера.

3)  Любой другой файл (*.doc, *.pdf, *.mp3 и т. п) Однако в этом случае непосредственной демонстрации файла может не произойти, поскольку это зависит от браузера и настройки системы. Как правило, в таких случаях пользователь видит окно с вопросом, что ему нужно: открыть файл в текущем местоположении (средствами одного из приложений) или скачать файл на свой компьютер.

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

Если следует осуществить переход не к началу HTML-файла, а к определенному месту, отмеченному «якорем» (например, <A NAME=”abc2”>Глава 2</A>), то в значении параметра HREF после имени файла указывается символ # и значение соответствующего NAME, например: <A HREF=”roman. html#abc2”> Вторая глава романа</A>

В качестве значения HREF можно указать почтовый адрес, например: HREF=”mailto:*****@***ru” . В этом примере при щелчке мышкой по гиперссылке вызывается почтовая программа, в которой адрес *****@***ru уже указан в соответствующем поле.

Еще один важный параметр, имеющий имя TARGET, служит для указания, в каком из окон следует показывать результат перехода. По умолчанию, если параметр TARGET отсутствует, новый документ замещает тот, который его вызвал. Если Вам нужно показать ссылку в новом окне (не закрывая старое), используйте значение TARGET=”blank”. Далее будет рассмотрено создание сайтов с использованием фреймов, т. е. нескольких окон, имеющих свои имена. Для показа ссылки в определенном окне указывается TARGET=”name” , где вместо name записывается конкретное имя нужного окна. Для замещения всей системы фреймов, содержащей вызывающее окно, используется TARGET=”parent”.

Разработчики web-страниц, использующие EditPlus, могут легко вставить теги <A> одним нажатием на иконку с изображением якоря. Однако параметры и их значения всё равно придется набирать вручную.

Использование фреймов.

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

Web-страница, содержащая фреймы, размечается особым образом. Вместо (!) части <BODY> в файле страницы присутствует часть <FRAMESET>, внутри которой определяется, на сколько окон разбивается экран, каковы их размеры и расположение и какие документы в них отображаются. Пример контейнера фреймов:

Мы видим, что между открывающим и закрывающим тегами <FRAMESET> находится ряд тегов <FRAME>, задающих имя и содержимое каждого из фреймов. Число фреймов и их расположение определяется параметрами тега <FRAMESET>. В приведенном примере используется параметр ROWS. Его значением является последовательное перечисление через запятую размеров фреймов, расположенных по горизонтали. Размеры указываются в процентах или в пикселях. Символ * означает, что для очередного фрейма отводится всё оставшееся место.

Если требуется разбить экран на фреймы не по горизонтали, а по вертикали, вместо параметра ROWS используется параметр COLS. В тех случаях, когда один из фреймов нужно в свою очередь разделить на части, вместо тега <FRAME> записывается очередной набор <FRAMESET>. Другой способ – сделать файл страницы, отображаемой в этом окне, новым контейнером фреймов.

Теги <FRAME> не требуют закрывающего тега. Их параметр SRC задает имя документа, который будет отображен в соответствующем окне. Параметр NAME позволяет задать имя, которое будет использоваться в гиперссылках в качестве значения параметра TARGET для отображения результата именно в этом фрейме.

По умолчанию пользователь может двигать границу между фреймами мышкой. Чтобы зафиксировать границу следует добавить в качестве параметра <FRAME> слово NORESIZE.

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

Плавающий фрейм.

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

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

Для создания плавающего фрейма используются теги <IFRAME> с набором параметров, аналогичных параметрам тега <IMG>. Основные различия:

1)  Тег <IFRAME> является парным. Между открывающим и закрывающим <IFRAME> помещается информация, которая будет показана в том (и только в том) случае, когда браузер не поддерживает плавающий фрейм.

2)  Вместо файла картинки в качестве значения параметра SRC указывается имя HTML-документа.

Другие параметры, такие как width, height, border и т. п., аналогичны параметрам, используемым при вставке рисунков.

Формы на web-страницах.

Формы используются для организации общения с пользователями. Они выглядят как некоторый бланк, который нужно заполнить, вставляя текст в текстовые поля, отмечая галочками нужные пункты списка и т. п. После заполнения формы пользователь щелкает мышкой по кнопке “submit” («переслать») – и данные в определенном формате отправляются на сервер. Там они обрабатывается специально созданными программами, рассмотрение которых выходит за рамки данного пособия.

Форма при написании HTML-кода заключается в парные теги <FORM>, имеющие ряд параметров, в том числе обязательных. Обязательные параматры:

1) ACTION. В качестве значения этого параметра указывается адрес программы-обработчика формы. Другой вариант, доступный реализации своими силами – пересылка данных по электронной почте на определенный адрес. В таких случаях пишется, например: ACTION=”mailto:*****@***ru" , где после mailto: указывается нужный адрес.

2) METHOD. Этот параметр, определяющий стандарт организации доступа к пересылаемой информации, может иметь два варианта значения: METHOD=”post” или METHOD=”get”. Различие этих методов могут понять только специалисты. Впрочем, именно эти специалисты и занимаются созданием программ обработки информации, поступившей на сервер. По умолчанию браузер предполагает значение “get”. Но в единственном варианте, доступном для реализации не специалистами – в варианте отправления по электронной почте – следует указывать “post”.

Внутри формы записываются самые различные теги, в том числе уже привычные теги оформления текста, добавления рисунков. Часто используются таблицы, позволяющие выровнять расположение объектов, составляющих форму. Кроме «обычных» тегов встречаются специализированные, которые как раз и создают объекты типа текстовых полей, переключателей, кнопкок и т. п. Эти объекты принято называть элементами управления.

Основной специализированный тег – непарный тег <INPUT> – служит для создания большинства видов элементов управления. Тип элемента задается параметром TYPE, возможные значения которого будут рассмотрены ниже. Другие параметры тега <INPUT> имеют названия NAME и VALUE. При передаче данных пересылаются именно их значения. С некоторыми упрощениями можно считать, что сервер принимает данные в виде:

ЗНАЧЕНИЕ_NAME1=ЗНАЧЕНИЕ_VALUE1

ЗНАЧЕНИЕ_NAME2= ЗНАЧЕНИЕ_VALUE2

ЗНАЧЕНИЕ_NAME3= ЗНАЧЕНИЕ_VALUE3

…………..

Возможные следующие элементы форм, создаваемые тегами <INPUT>:

1) Текстовое поле. В этом случае NAME=”text”. Значение параметра VALUE, указанное при создании поля, передается по умолчанию, если пользователь ничего не ввел. Дополнительные параметры:

SIZE=”n”, где n – размер поля в символах.

MAXLENGTH=”n” – определяет максимальную длину вводимого текста.

2) В случае TYPE=”checkbox” создается переключатель, принимающий положения включено/выключено. Если нужно, чтобы по умолчанию данный пункт был выбран, в качестве параметра тега <INPUT> добавьте слово CHECKED.

3) TYPE=”radio” соответствует созданию группы переключателей (так называемых «радиокнопок», по английски “radiobutton”). Пользователь имеет возможность выбрать только один из вариантов. Для каждого из переключателей создается свой тег <INPUT>. Объединение в группу происходит за счет указания одного и того же значения параметра NAME. При этом на сервер передается то значение VALUE, которое относится к выбранному переключателю. Один из тегов <INPUT>, относящийся к группе, может содержать слово CHECKED, тогда этот вариант будет выбран по умолчанию.

4) Кнопка создается при TYPE=”button”. На ней будет надпись, задаваемая значением параметра VALUE. Для программирования действия при нажатии кнопки используют параметр ONCLICK=”function( )”, где вместо function( ) указывается функция («скрипт»), запрограммированная отдельно. Как правило для этого используют встроенные в браузер языки программирования javascript или vbscript, рассмотрение которых выходит за рамки данного пособия.

5) При TYPE=”submit” создается специальная кнопка, при нажатии которой происходит пересылка данных формы. Текст на ней задается параметром VALUE. Если Вам нужно создать кнопку не в стандартном виде, а в виде нарисованного изображения, используйте TYPE=”image” SRC=”picture_file. jpg”. В данном примере на форме появится рисунок из файла picture_file. jpg, при щелчке на котором будет происходить пересылка данных.

6) Кнопка очистки формы создается при TYPE=”RESET”.

7) Можно создать скрытое поле, которое не появится на форме, но его значение будет передано вместе с другими данными формы. Эта возможность полезна, например, в случае поступления сходной информации при заполнении форм, расположенных на разных сайтах. Для создания скрытого поля используется TYPE=”hidden”.

Использование <INPUT TYPE=”text”> позволяет передать текст, занимающий одну строку. Для передачи многострочного текста используются парные теги <TEXTAREA>. Значения параметров ROWS и COLS задают размеры текстовой области, измеряемые в числе символов. При попытке ввода большего объема текста появляются полосы прокрутки. Так же, как и для тега INPUT, используется параметр NAME, передаваемый вместе с формой для обозначения, какому элементу формы соответствует полученных текст.

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

<SELECT NAME=”Выбор_клиента”>

<OPTION>Вариант_1

<OPTION SELECTED>Вариант_2

<OPTION>Вариант_3

</SELECT>

Строка, для которой в качестве параметра указано SELECTED, выбирается по умолчанию.

Ниже показан пример HTML-кода создания формы, а также результат его отображения браузером. Проанализируйте их самостоятельно.