ОБЩИЕ СВЕДЕНИЯ О СОЗДАНИИ WEB-СТРАНИЦ

⇐ ПредыдущаяСтр 2 из 5Следующая ⇒

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.

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

HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

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

Язык HTML существует в нескольких вариантах или спецификациях. Как и версии программных продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая спецификация представляет собой расширение и дополнение предыдущей таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение.html или.htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например < html>, < head>, < title>, < /title>. Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

• левой угловой скобки <;

• необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, < /title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;

• имени тэга, например, html;

• необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align=" center";

• правой угловой скобки >.

Таким образом, открывающий тэг < html>, стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг < /html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг < div align=" center" >, означающий разделение документа на части, содержит, кроме имени div, атрибут align со значением " center", означающий выравнивание по центру.

В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name=" Раздел 1".

Язык HTML не различает большие и малые буквы, так что тэги < HEAD>, < head> и < Head> эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.

Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.

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

Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тэг. Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например, " center": align=" center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.

Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:

< html>

< head>

…

< /head>

< body>

…

< /body>

< /html>

Структура HTML-документа содержит следующие обязательные элементы:

• тэги < html> и < /html>, которые отмечают начало и конец документа;

• заголовок, ограниченный тэгами < head> и < /head>;

• тело, ограниченное тэгами < body>. .. < /body>.

В заголовке, ограниченном тэгами < head> и < /head>, с помощью тэгов < title>. .. < /title> определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.

Кроме элемента < title>. .. < /title>, заголовок может содержать элементы < meta>. .. < /meta>. Открывающий тэг < meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

СОЗДАНИЕ И ОФОРМЛЕНИЕ WEB-СТРАНИЦ

Для создания Web-страниц понадобится любой браузер - Internet Explorer или Netscape Communicator, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Программа Блокнот нужна для подготовкиHTML-файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.

В качестве примера создадим сайт лицея. Цель сайта - рассказать миру о лицее, сфере его деятельности, интересов, найти друзей, партнеров, спонсоров.

Для файлов нашего сайта нужна отдельная папка.

Создайте папку с именем Web на жестком диске вашего компьютера.

Теперь запустим программу Блокнот и приступим к работе.

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

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

Введите с клавиатуры следующие основные тэги, поместив каждый из них, кроме закрывающего тэга < /title>, в новой строке.

< html>

< head>

< title> < /title>

< /head>

< body>

< /body>

< /html>

Для ввода парных тэгов вы можете использовать операции копирования и вставки через буфер обмена Windows с последующим добавлением символа слэш /.

Напомним, что первый < html> и последний < /html> тэги означают соответственно начало и конец документа, элемент < head>. .. < /head> определяет заголовок Web-страницы, элемент < body>. .. < /body> - тело документа, а в элементе < title> < /title> мы сейчас укажем название Web-страницы.

Между открывающим < title> и закрывающим < /title> тэгами вставьте название документа – Лицей № 1548. Этот элемент должен выглядеть следующим образом:

< title> Лицей № 1548< /title>

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

Наша следующая задача - вставить в тело документа между тэгами < body>. .. < /body> короткий текст-приветствие посетителям Web-страницы.

Вставьте пустую строку между тэгами < body> и < /body> и введите в ней следующий текст:

Добро пожаловать на страничку лицея № 1548! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях

Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тэга < body>. Для определения цвета как значения атрибутов существует два варианта:

• словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;

• цифровое обозначение в шестнадцатеричной записи, например, " #ffffff" - белый, которое указывает, каким образом цвет формируется из основных цветов - красного, зеленого, синего.

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

Используем в качестве примера для фона нашей Web-страницы синий цвет ( blue ), а для текста - желтый ( yellow ).

Вставьте в открывающий тэг < body> атрибуты bgcolor=blue и text=yellow. Этот тэг должен принять вид:

< body bgcolor=blue text=yellow>

Ваш текстовый файл должен выглядеть примерно так:

< html>

< head>

< title> Лицей № 1548< /title>

< /head>

< body bgcolor=blue text=yellow>

< /body>

< /html>

Теперь документ следует сохранить. Откройте ранее созданную папку Web, введите имя файла licey1548.html и нажмите кнопку Сохранить.

Обратите внимание: вы обязательно должны указать расширение имени файла.html или.htm, чтобы браузер смог его открыть.

Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид • Размер текста • Средний в браузере InternetExplorer или Вид • Увеличить шрифт, Вид • Уменьшить шрифт в браузере Netscape Communicator, чтобы установить средний размер шрифта.

Следует иметь в виду, что разные браузеры могут по-разному отображать содержимое одного и того же HTML-файла. Поэтому при создании Web-страниц желательно всегда просматривать результат в обоих наиболее популярных браузерах - Internet Explorer и Netscape Communicator. В таком случае вы будете уверены, что посетитель вашего сайта увидит именно то, что вы хотите ему показать.

Так как в элементе < body> < /body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.

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

Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тэгов с номерами, соответствующими уровню, например, < h1> < /h1> - заголовок раздела первого уровня, а < h6> < /h6> - заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - очень мелким.

Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом < head> < /head>.

В качестве заголовка текста используем первое предложение - Добро пожаловать на страничку лицея 1548! Для этого достаточно ограничить его тэгами < h1> и < /h1>.

Вставьте в текст файла licey1548.html тэги < h1> и < /h1> так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид:

< h1> Добро пожаловать на страничку лицея 1548! < /h1>

Сохраните файл, выбрав команду Сохранить меню Файл программы Блокнот.

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

Нажмите клавишу F5 или кнопку Обновить на панели инструментов рабочего окна программы Internet Explorer или аналогичную кнопку Обновить в Netscape Communicator. Файл licey1548.html будет перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого уровня.

Используя шесть уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно создать легко читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться значительно лучше, если в нем будет четкое разделение на разделы и подразделы.

По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге < h1> используется атрибут align=right, а для центрирования — align=center. Допускается также явное указание левостороннего выравнивания - align=left.

Добавьте в тэг < h1> атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид:

< h1 align=center> Добро пожаловать на страничку лицея 1548! < /h1>

Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные тэги < b> < /b>.

Вставьте в файле licey1548.html открывающий < b> и закрывающий < /b> тэги так, чтобы они ограничили текст Здесь вы узнаете…. Этот элемент должен принять следующий вид:

< b> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях < /b>

Курсивное начертание устанавливается с помощью тэгов < i> < /i>.

Вставьте в исходный код HTML тэг < i> и < /i> так, чтобы отредактированный элемент принял следующий вид:

< b> < i> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях< /i> < /b>

Элементы разметки могут быть вложенными, как в данной структуре, где элемент < i>. .. < /i> вложен в элемент < b>. .. < /b>. Современные браузеры способны правильно обрабатывать вложенные тэги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Например, такая запись будет неправильной: < b> < i>. .. < /b> < /i>. Соблюдение вложенности - очень важная часть общей культуры написания HTML-кода.

С помощью пары тэгов < u> < /u> можно установить подчеркнутое начертание текстового фрагмента, который ограничивают данные тэги, а с помощью пары тэгов < tt> < /tt> -отобразить текст телетайпным шрифтом.

После того, как вы просмотрите полученный результат, увеличим размер шрифта текста. Это можно сделать разными способами.

Тэги < big> < /big> увеличивают размер шрифта текста, заключенного между ними.

Добавьте в начало и конец вышеуказанного фрагмента кода соответственно тэги < big> и < /big> так, чтобы элемент принял следующий вид:

< big> < b> < i> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях < /i> < /b> < /big>

С помощью тэгов < small> < /small> вы можете уменьшить размер шрифта текста по сравнению с исходным.

Другой способ указания размера шрифта - с помощью тэгов < font> < /font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 - максимальному.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным, например, тэги < font size=+1> < /font> увеличат размер шрифта, по сравнению с текущим, на один порядок.

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

По умолчанию абзац с текстом Здесь Вы узнаете... выровнен влево. Центрируем его по горизонтали с помощью тэгов < center> < /center>. Вы можете также выровнять абзац по правому краю страницы с помощью тэгов < right> < /right> или по левому - с помощью тэгов < left> < /left>.

Вставьте тэги < center> < /center>, ограничив ими указанный абзац так, чтобы код HTML принял следующий вид:

< html>

< head>

< title> Лицей № 1548< /title>

< /head>

< body bgcolor=blue text=yellow>

< h1 align=center> Добро пожаловать на страничку лицея № 1548! < /h1>

< center> < font size=5> < b> < i> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях< /i> < /b> < /font> < center>

< /body>

< /html>

В окне браузера документ будет выглядеть примерно так, как это показано на рис. 1.

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

< dfn> < /dfn> - применяется для определения слова. Текст обычно выводится курсивом.

< em> < /em> - для выделения слов и усиления. Отображается курсивом.

< cite> < /cite> - для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.

< code> < /code> - для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.

< kbd> < /kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.

< samp> < /samp> - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.

< strong> < /strong> - для особо важных фрагментов. Обычно выделяется полужирным начертанием.

< var> < /var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.

Вставка иллюстраций

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

Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.

Вставим на первую страницу нашего сайта рисунок МИР.JPG, который обычно находится в папке Windows, т.е. той папке, в которой установлена операционная система Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы создали для хранения файлов сайта.

Скопируйте файл МИР.JPG или любой другой файл с расширением.JPG или.GIF из папки Windows в папку Web.

Для вставки изображения в Web-документ используется одиночный тэг < img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута < border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тэг, вставляющий рисунок, должен выглядеть следующим образом:

< img src=МИР.JPG border=1>

Вставим его после заголовка Добро пожаловать на страничку лицея № 1548!

Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в тэге указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при загрузке страниц с удаленного сервера. А все дело в том, что они указали Мир.jpg, а на диске хранится МИР.JPG.

Вставьте пустую строку после элемента < h1 align=center> Добро пожаловать на страничку лицея № 1548! < /h1> и введите в ней тэг < img src=МИР.JPG border=1> для включения изображения в документ.

Чтобы выровнять рисунок по центру, следует, воспользовавшись тэгами < center> < /center>, записать строку кода HTML, вставляющего рисунок, следующим образом:

< center> < img src=МИР.JPG border=1< /center>

Ограничим размер рисунка по ширине 300 пикселами, а по высоте – 400 пикселами:

< center> < img src= МИР.JPG border=1 Widht=300 height=400> < /center>

В результате текстовый файл должен выглядеть так, как это показано на рис. 2. В окне браузера документ будет выглядеть примерно как на рис. 3.

Создание списков

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

Создайте структуру Web-документа, напечатав основные тэги:

< html>

< head>

< title> < /title>

< /head>

< body>

< /body>

< /html>

В качестве заголовка документа в тэге < title> < /title> введите: Чем мы занимаемся?:

< title> Чем мы занимаемся? < /title>

Такой же заголовок для списка введите в теле документа между тэгами < body> и < /body>, использовав для его отображения тэги < h2> < /h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

< h2 align=center> Чем мы занимаемся? < /h2>

Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге < body>, например, так:

< body bgcolor=aqua text=navy>

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

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

Между ними располагается столько элементов, начинающихся с тэга < li>, сколько элементов в списке.

Вставьте пустую строку под строкой с кодом < h2 align=center> Чем мы занимаемся? < /h2> и введите в теле документа следующий код:

< ul>

< li> Изучением фундаментальных курсов физико-математических дисциплин.

< li> Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

< li> Изучением цикла гуманитарных дисциплин.

< li> Изучением сценического искусства.

< /ul>

Обратите внимание: тэг < li> может использоваться как одиночный, т.е. без парного, закрывающего тэга < /li>.

Полный HTML-код документа должен иметь следующий вид:

< html>

< head>

< title> Чем мы занимаемся? < /title>

< /head>

< body bgcolor=aqua text=navy>

< h2 align=center> Чем мы занимаемся? < /h2>

< ul>

< li> Изучением фундаментальных курсов физико-математических дисциплин.

< li> Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

< li> Изучением цикла гуманитарных дисциплин.

< li> Изучением сценического искусства.

< /ul>

< /body>

< /html>

Когда ввод кода будет закончен, сохраните документ в папке Web под именем spisok.html.

Воспользовавшись командой Открыть меню Файл в браузере Internet Explorer или командой Открыть страницу меню Файл в браузере Netscape Communicator, откройте файл spisok.html из папки Web.

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

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

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

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

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

Посмотрим, как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его по электронной почте лицею. Но сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тэгов < р> < /р>, и выровнять по центру с помощью атрибута align=center.

Вставьте пустую строку между закрывающим тэгом < /ul> и закрывающим тэгом < /body> и введите в этой строке следующий код:

< р align=center> Ecли у Вас есть вопросы или предложения, напишите нам: < /р>

Каждая форма начинается тэгом < form> и заканчивается тэгом < /form>. HTML-документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и тэги могут размещаться внутри формы без ограничений. Открывающий тэг < form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик, или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action=" mailto: licey1548.narod.ru".

Еще один атрибут тэга < form> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post: method=post. Таким образом, элемент < form>. .. < /form> будет иметь примерно такой вид:

< form action=" mailto: [email protected]" method=post> < /form>

Добавьте в документе spisok.html пустую строку перед закрывающим тэгом < /body> и введите указанный код.

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат тэги < textarea> < /textarea>. В качестве атрибутов открывающего тэга < textarea> необходимо указать количество строк ( rows ) и колонок ( cols ), a также имя ( name ), под которым содержимое текстового поля ввода будет передано программе-обработчику, например:

< textarea rows=5 cols=40 name=Comments> < /textarea>

Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем Comments (Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тэгами < center> < /center>.

Вставьте пустую строку перед закрывающим тэгом < /form> и введите следующий элемент, создающий текстовое поле:

< center> < textarea rows=5 cols=40 name=Comments> < /textarea> < /center>

Здесь для центрирования текстового поля мы использовали тэги < center> < /center>, a не атрибут align=center тэга < р>, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и некоторые браузеры, например, Netscape Communicator, могут игнорировать данный атрибут для поля формы.

Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то элемент управления, например, кнопка. Создать такой элемент управления очень легко с помощью одиночного тэга < input> с атрибутом type. Если нужно создать кнопку, то значение этого атрибута должно быть submit (передать):

< input type=submit>

Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Подача запроса. Чтобы изменить надпись на кнопке, достаточно включить в данный тэг атрибут value с нужным вам значением, например: value=" Отправить". Напомним, что значения атрибутов, в которых используются символы, отличные от латинских, следует обязательно заключать в кавычки.

Вставьте пустую строку перед закрывающим тэгом < /form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:

< p> < center> < input type=submit value=" Oтправить" > < /center> < /p>

В результате элемент < form>. .. < /form> должен принять следующий вид:

< form action=" mailto: [email protected]" method=post>

< center> < textarea rows=5 cols=40 name=Comments> < /textarea> < center> < p> < center> < input type=submit value=" Отправить" > < /center> < /р> < /form>

Напомним еще раз, что в качестве значения атрибута action, в открывающем тэге < form> следует указать ваш адрес электронной почты.

⇐ Предыдущая 123 4 5 Следующая ⇒