- Преподавателю
- Информатика
- «Создание веб-сайта проекта с помощью языка разметки гипертекста HTML»
«Создание веб-сайта проекта с помощью языка разметки гипертекста HTML»
| Раздел | Информатика |
| Класс | - |
| Тип | Другие методич. материалы |
| Автор | Ермолко Г.С. |
| Дата | 18.09.2015 |
| Формат | doc |
| Изображения | Есть |
«Создание веб-сайта проекта с помощью языка разметки гипертекста HTML»
Методическая разработка для выполнения цикла лабораторных работ по дисциплине
«Программное обеспечение компьютерных сетей и Web-серверов»
Хабаровск 2010
Содержание
Введение 3
Теоретические сведения 4
§1. Описание языка HTML 4
1.1. Создание простого HTML-документа 4
1.2. Атрибуты тега 5
1.3. Комментарии 6
1.4. Просмотр результата 7
§2. Форматирование Web-страниц 7
2.1. Создание абзацев 7
2.2. Создание заголовков 8
2.3. Выравнивание текста 8
2.4. Стили форматирования 9
2.5. Установка атрибутов текста 11
2.6. Гиперссылки 12
2.7. Вставка графических изображений 13
2.8. Задание бегущей строки 14
2.9. Задание списков 14
2.10. Создание таблиц 17
2.11. Создание фреймов 18
2.12. Создание форм 22
Заключение 27
Список используемой литературы 28
Введение
Данная методическая разработка создана для студентов специальности 230106 «Техническое обслуживание средств вычислительной техники и компьютерных сетей» по дисциплине «Программное обеспечение компьютерных сетей и Web-серверов». Одним из разделов данной дисциплины является «Язык разметки гипертекста HTML», который подразумевает создание веб-сайта студентами с помощью языка разметки гипертекста HTML.
На изучение программы данного раздела выделено 20 часов лабораторных работ: «Создание и просмотр простого HTML-документа», «Создание заголовков, абзацев и комментариев», «Выравнивание текста в HTML-документе», «Установка атрибутов шрифта в HTML-документе», «Создание гиперссылок в HTML-документе», «Вставка графических изображений и задание бегущей строки в HTML-документе», «Создание списков в HTML-документе», «Создание таблиц в HTML-документе», «Создание фреймов в HTML-документе», «Создание форм в HTML-документе».
Главной целью изучения данного раздела является: научить студентов создавать веб-сайты с помощью языка HTML, поэтому целесообразнее воспользоваться методом проектов для достижения данной цели.
Методическая разработка поможет студентам в создании своего веб-сайта на выбранную ими тему.
Теоретические сведения
§ 1. Описание языка HTML
1.1. Создание простого HTML-документа
HTML-документ представляет собой обычный текстовый файл. Редактировать Web-страницы, опубликованные в сети Internet, может лишь тот, кто их создал, а не любой пользователь, поскольку каждая страница имеет свой уникальный адрес (URL) и существование двух разных страниц с одинаковым адресом исключено.
Пример. Чтобы понять, каким образом, используя спецификации языка HTML, создается Web-страница, можно сравнить исходный код страницы с ее изображением в окне браузера (рис.1).
Простая Web-страница
HEAD>
<BODY>
Это самая простая Web-страница.
Рис.1. Пример Web-страницы.
Аналогичный исходный код любой Web-страницы можно получить путем выбора команды В виде HTML меню Вид в браузере или при открытии страницы в любом текстовом редакторе, например, Блокнот. Следует обратить внимание, что HTML-страница содержит как обычный текст, так и специальные команды разметки - теги, заключенные в угловые скобки. Теги языка HTML задают правила, по которым браузер отображает документ на экране: размещение текста в окне, представление графических объектов, а так же вывод звуковых файлов и т.д.
Большинство тегов языка HTML, такие как <HTML>, <TITLE>, <HEAD>, <FONT> и другие, требуют соответствующую команду с символом …> для ее закрытия, т.е. тега конца команды.
Комбинация из открывающегося и закрывающегося тега называется контейнером тегов. Существуют команды, например, <P> (тег, отделяющий друг от друга абзацы), для которых конец команды ставить не обязательно, а так же команды типа <BR> (мягкий перевод строки), которые просто не имеют тега конца команды. Многие команды имеют параметры, называемые атрибутами, которые модифицируют действие команды.
Теги нечувствительны к регистру. Это означает, что HTML-тег <html> будет воспринят браузером так же, как тег <HTML> или <Html>.
Итак, HTML-страница имеет следующую структуру:
Название.
Текст.
В таком простом документе используются следующие теги:
<HTML>. Данный тег используется для открытия <HTML>-документа. Каждая Web-страница начинается тегомWeb-страница <HTML> и заканчивается тегом HTML>.
<HEAD>. Любой <HTML>-документ состоит как минимум из двух частей: заголовка и собственно документа. Данный тег определяет заголовок Web-страницы и должен иметь обязательный закрывающийся тег HEAD>. Также обязательным атрибутом этого тега является тег <TITLE>.
<TITLE>. Каждый <HTML>-документ имеет название, заключенное между тегами <TITLE> и TITLE>. По названию документа HTML браузеры могут найти информацию, поэтому место для названия всегда определенно - оно находиться вверху и отдельно от содержимого <HTML>-документа. Отображается название в заголовке окна браузера, поэтому на него накладывается ограничение: максимальная длина названия - 40 символов.
<BODY>. Данный тег заключает в себе непосредственно документ. Так же необходим закрывающий тег BODY>.
При сохранении созданного документа необходимо указывать расширение имени файла *.html или *.htm для того, чтобы браузер правильно определил тип файла и корректно отобразил информацию, содержащуюся в HTML-файле.
1.2. Атрибуты тега <BODY>
Тег <BODY> имеет следующие атрибуты:
-
bgcolor= "…" - определяет цвет фона документа;
-
background="…" - указывает браузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;
-
text="…" - устанавливает цвет текста;
-
alink="…"- определяет цвет активной ссылки;
-
link="…"- определяет цвет не просмотренной ссылки;
-
vlink="…'- определяет цвет просмотренной ссылки;
-
top">left">bgproperties="fixed" - в случае установки данного параметра в значении fixed фоновое изображение не будет прокручиваться вместе с текстом;
-
onload="…" - определяет те действия браузера, которые должны произойти после загрузки документа из сети.
1.3. Комментарии
Очень часто исходные коды программ сопровождаются комментариями. Они предназначены для сопровождения исходного кода программы пояснениями, которые в свою очередь, облегчают понимание кода как самим разработчиком, так и при чтении кода другими людьми.
В спецификации HTML для комментариев определен специальный тег, который начинается с символа . Текст заключенный в теге комментария, не отображается в браузере, например:
Комментарии в коде
<BODY>
Комментарии используются для пояснения исходного кода документа.
Следует учесть то, что они не отображаются в браузере.
Рис.2. Использование комментариев
1.4. Просмотр результата
После написания исходного кода HTML-документа и перед размещением его в сети Internet необходимо посмотреть на результат работы со стороны пользователя.
Для просмотра созданного документа созданного документа рекомендуется использовать несколько браузеров. На сегодняшний момент самым распространенным браузерoм для семейства ОС Windows являются Internet Explorer.
Чтобы просмотреть созданный документ нужно его открыть с помощью браузера.
§ 2. Форматирование Web-страниц
2.1. Создание абзацев
Одним из основных элементов документов является абзац. В языке HTML имеется специальный тег, указывающий браузеру на то. Что в данном месте текста должен начинаться новый абзац. Этот тег обозначается: <P>.
Пример:
Создание абзацев
<BODY>
Это первый абзац.
<P> А это второй. <br>
BODY>
HTML>
В данном абзаце был использован тег <BR>, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки.
При необходимости вставки нескольких пустых строк в документ необходимо использовать тег <BR>, а не тег <P>, поскольку браузер игнорирует все последующие теги <P>, расположенные подряд и находящиеся после первого.
Для тегов абзаца и прерывания строки закрывающиеся теги не являются обязательными, поскольку тег, указывающий на начало нового абзаца, одновременно указывает на конец предыдущего.
2.2. Создание заголовков
В языке HTML определенно 6 уровней заголовков: отH1 до H6. текст, окруженный тегами <H1>…H1>, получается большим - это основной заголовок. Если текст окружен тегами <H2>…H2>, то он выглядит меньше и так далее.
Пример:
<HTML>
<HEAD>
<TITLE> Создание заголовков TITLE>
HEAD>
<BODY>
<H1> Самый большой заголовокH1>
<H2> Заголовок второго уровняH2>
<H3> Заголовок третьего уровняH3>
<H4> Заголовок четвертого уровняH4>
<H5> Заголовок пятого уровняH5>
BODY>
HTML>
2.3. Выравнивание текста
Для выравнивания текста в документе используется атрибут align. Данный атрибут является атрибутом тега <P>, он так же применим к графикам и таблицам.
Выравнивание по ширине поддерживается не всеми браузерами, поэтому следует избегать использования этого значения.
Выравнивание по левому краю: По умолчанию текст HTML выравнивается по левому краю. Поэтому атрибут align="left" можно опустить.
Выравнивание по правому краю:
align="right" (атрибут задается в обычных тегах, например: <P>)
Пример:
<HTML>
<HEAD>
<TITLE> Выравнивание текста TITLE>
HEAD>
<BODY>
< P align="left"> Данный текст выровнен по левому краю,
< P align="center"> центрирован,
< P align="right"> выровнен по правому краю.
BODY>
HTML>
Центрирование текста и графики: Тег <CENTER> центрирует любые объекты. Для данного тега необходим закрывающийся тег CENTER>.
2.4. Стили форматирования
Тег <P> - параграф.
Тег <HR> - горизонтальная линия.
Тег <BR> - перевод строки.
Контейнер <B> …B> устанавливает жирный шрифт.
Контейнер <I> …I> устанавливает наклонный шрифт.
Контейнер <U> …U> задает подчеркнутое написание слов.
Контейнер <TT> …TT> устанавливает моноширинный шрифт.
Пример:
<HTML>
<HEAD>
<TITLE> Стили форматирования TITLE>Жирный шрифтКурсив
<P><TT>Моноширинный шрифт
TT><HR>
BODY>
HTML>
Используются так же:
Контейнер <SUP>…SUP> - уменьшенный сдвинутый вверх текст.
Контейнер <SUB>…SUB> - уменьшенный сдвинутый вниз текст.
Контейнер <STRIKE>…STRIKE>- перечеркивает текст горизонтальной линией.
Контейнер <BIG>…BIG> - позволяет ввести текст большего размера.
Контейнер <SMALL>…SMALL> - позволяет ввести текст меньшего размера.
Пример:
Форматирование
<P>допускается так же использование в тексте <SUP>верхнихSUP> и <SUB>нижнихSUB>индексов
<P><STRIKE>перечеркнутый текстSTRIKE>
<P>текст<BIG>большего размераBIG>
<P>текст<SMALL>меньшего размера<SMALL>
2.5. Установка атрибутов текста
Размер шрифта: По умолчанию размер шрифта равен 3, однако, используя тег <FONT> с атрибутом size="…", его можно переопределить.
Пример:
Шрифты
размер шрифта равен 7.
размер шрифта равен 6.
размер шрифта равен 5.
размер шрифта равен 4.
размер шрифта равен 3.
размер шрифта равен 2.
размер шрифта равен 1.
Цвет документа: Установка цветов производиться с использованием атрибутов установки цвета в тегах <BODY>, <FONT>, <HR>, <TABLE/> Например, для установки цвета фона используется атрибут bgcolor= в теге <BODY>.
Выбор цвета можно производить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB.
Основные цвета и их коды.
Цвет
Код RGB
Имя
Цвет
Код RGB
Имя
черный
#000000
black
серебряный
#C0C0C0
Silver
темно-бордовый
#800000
maroon
красный
#FF0000
Red
зеленый
#008000
green
известь
#00FF00
Lime
оливковый
#808000
olive
желтый
#FFFF00
Yellow
темно-синий
#000080
navy
синий
#0000FF
Blue
фиолетовый
#800080
purple
фуксия
#FF00FF
Fuchsia
чирок
#008080
teal
аква
#00FFFF
Aqva
серый
#808080
gray
белый
#FFFFFF
white
2.6. Гиперссылки
Текст, который является гиперссылкой выделяется цветом и подчеркивается. Для определения ссылки используется тег <A>, структура которого имеет следующий вид:
текст ссылки
Здесь filename - имя файла или адрес Internet, на который необходимо сослаться, текст ссылки - текст гипертекстовой ссылки, который непосредственно показан в HTML-документе.
Например:
Views
поиск в Internet
Ссылки на объект в текущем документе
Очень удобно при создании больших Web- страниц в начало документа вставить оглавление, а его заголовки оформить в виде гиперссылок на соответствующий раздел текста. Для этого необходимо присвоить заголовку раздела уникальный идентификатор, т.е. имя. Это можно сделать, используя тег <A> и атрибут name="…". Путь оглавления необходимо оформить в виде ссылки на соответствующий раздел при помощи следующей конструкции:
Local Link
Пример:
локальных ссылокОглавление:
Часть первая
Часть вторая
Часть третьяЧасть первая
Часть вторая
Часть третья
2.7. Вставка графических изображений
Для вставки графических изображений используется тег <IMG>. Допускается использование файлов в формате gif или jpg/jpeg.
Пример:
<IMG src="pig.jpg" width=600 height=290 alt="Эволюция">
Здесь атрибут src="…" определяет URL- адрес графического файла, атрибуты height="…" и width="…"- высоту и ширину соответственно.
Атрибут alt="…" указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользовательотключил загрузку графических файлов.
Используя атрибут align="…" можно рпзместить последующий текст верху, внизу или по центру относительно картинки. Допустимые значения атрибута align="…": Top - текст распологается вверху, Bottom - внизу, Viddle - по центру.
Картинка может быть задана гиперссылкой, для чего на тег <IMG> должна указывать гиперссылка, определяемая командой <A>. Например:
По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы урать прорисовку рамки, используют атрибут border="…" в теге <IMG> снулевым значением.
2.8. Задание бегущей строки
Одним из способов оживления Web- страницы является задание бегущей строки в тексте документа. Для этого используется контейнер <MARQUEE>…MARQUEE со следующими атрибутами:
width="…"- задает ширину бегущей строки в пикселях или процентах от ширины эрана;
height="…"- указывает высоту бегущей строки;
bgcolor="…" - определяет цвет фона бегущей строки. Значением этого атрибута являютяс стандартные коды цветов;
behavior="…" - задает тип движения бегущей строки и имеет следующие значения: scroll - циклическая прокрутка строки из одного конца в другой, slide - текст появляется с одного края и останавливается у другого, alternate - текст перемещается от одного края к другому (движение маятника);
direction=…" определяет направление движения бегущей строки. Имеет следующие значения: left - изображение движется влево по строке, right - изображение движется вправо по строке, up - вся строка перемещается снизу в верх, down - строка движется сверху вниз.
scrollamount="…" - определяет число пикселей, которые отделяют один текст от последующего;
scrolldelay="…" - указывает задержку в миллисекундах перед появлением последующего текстового блока;
loop="…" - задает число повторов анимации (любое положительное число). По умолчанию или при указании значения -1 браузер будет прокручивать текст бесконечное число раз.
Пример:
BEHAVIOR="alternate" BGCOLOR="lime"
DIRECTION="right" HEIGHT=50 WIDTH=250> Пример бегущей строки.
MARQUEE>
2.9. Задание списков
В языке HTML существует возможность создания различных списков и перечислений. Для этого используются теги <UL>, <OL> и <DL>, а элементы списка отмечаются тегом <LI> в первых двух случаях и тегами <DT> и <DD> - в последнем, при этом допускаются вложенные списки любой глубины.
Рассмотрим пример ненумерованного списка и использования тегов <UL> и <LI>:
<UL>
<LI>красный
<LI>оранжевый
<LI>желтый
<LI>зеленый
<LI>голубой
<LI>синий
<LI>фиолетовый
</UL>
Для ненумерованного списка можно использовать атрибут type="…", указывающий на тип маркера каждого элемента списка. Допускается использовать следующие значения:
type="disc"
type="circle"
type="square"
Нумерованный список создают, используя теги <OL> и <LI>. Например:
<OL>
<LI>элемент первый
<LI>элемент второй
<LI>элемент третий
</OL>
По умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Используя атрибуты тега <OL>, можно изменить стиль оформления списка. Атрибут type="…" определяет стиль нумерации (буквы или цифры), при этом допускаются следующие его значения:
order- type="A"- использовать большие латинские буквы;
order- type="a"- использовать маленькие буквы;
order- type="I"- использовать большие римские цифры;
order- type="i"- использовать маленькие римские цифры;
order- type="1"- использовать арабские цифры.
Атрибут start="…" определяет начальное значение списка, например, start="5".
Третий тип списков - это список определений. Он позволяет перечислить не только пункты списка, но так же и их описания. Такой список заключается в теги <DL> и DL>, каждый пункт располагается в контейнере <DT>…DT>, а его описание - в контейнере <DD>…DD>.
Пример:
<DL>
<DT>Пункт первыйDT>
<DD>Описание первого пунктаDD>
<DT>Пункт второйDT>
<DD>Описание второго пунктаDD>
<DT>Пункт третийDT>
<DD>Описание третьего пунктаDD>
Рассмотрим пример вложенного списка, в котором допускается использовать теги <UL>, <OL> и <LI>:
<UL>
<LI> Первый раздел
<UL>
<LI>Первый подраздел первого раздела
<LI>Второй подраздел первого раздела
<OL type=a>
<LI>Первый список
<LI>Второй список
OL>
<LI>Третий подраздел первого раздела
UL>
<LI>Второй раздел
UL>
2.10. Создание таблиц
Описание таблиц в HTML- документе осуществляется с помощью контейнера <TABLE>…TABLE>. Таблица задается двумя контейнерами тегов: <TR>…TR>- описание строки таблицы и <TD>…TD>- описание ячейки таблицы.
По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.
Пример:
Таблица таблицы
<B>заголовок таблицы.B>
TD>
Первая ячейка первой строки.
TD>
<TD align="center">
Вторая ячейка первой строки.
TD>
<td align="center">
Первая ячейка второй строки.
Вторая ячейка второй строки.
TD>конец таблицы-->
BODY>
HTML>
Ширина таблицы задается атрибутом width="…" для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="…" (горизонтальное положение) и valign="…" (вертикальное положение) для тегов <TR> или <TD>.
Атрибут valign="…" может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру; а атрибут align="…" принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру.
Атрибуты cell; "> Допускаются добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="…" или valign="…" заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Значение заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно.
Атрибут border="…" тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="…" и rowspan="…" тегов <TD> и <TR>. Позволяют объединить ячейки таблицы в группы, вокруг которых рисуется рамка.
2.11. Создание фреймов
Фреймы - это окна независимого просмотра HTML-документов. Иногда очень удобно организовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню.
Рассмотрим следующий пример основного HTML-файла:
FRAMESET >
HTML>
Здесь присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="…", а для горизонтальных полос используется параметр rows="…". Параметр border="…" определяет границу между фреймами. Определение документа, изначально загружаемого при открытии этого файла, задается атрибутом тега <FRAME> src="…", при этом необходимо указать параметр name="…". Сам же документ является обыкновенной HTML- страницей.
Пример:
<HTML>
<HEAD>
FREMESET >
HTML>
Как видно из примера, сама страница не содержит какого-либо текста, который присутствует в обычной Web-странице. В данном документе находятся только ссылки на другие HTML-документы, которые будут загружены браузером при открытии страницы с фреймами.
Файл 1.html имеет следующую структуру:Первый Frame.
BODY>
HTML>
Файл 2.html также имеет указанную выше структуру. Следует сказать, что оба эти файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Контейнеры <FREMESET > и <BODY> являются взаимоисключающими. Это означает, что если в документе присутствуют оба указанных тега, то браузер игнорирует контейнер <FREMESET > и отображает информацию, заключенную в контейнер <BODY>.
Для оформления вертикальных фреймов следует использовать параметр cols="…,…" тега <FREMESET >.
Пример:
HTML>
Распространенное явление - комбинация вертикальных и горизонтальных фреймов. Предположим, необходимо создать вертикальную и горизонтальную панели навигации, а так же основной фрейм, в который будет загружаться требуемая страница. Для этого необходимо разбить страницу на три фрейма следующим образом: допускается вложенность контейнеров <FREMESET > друг в друга, при этом внутренний контейнер воспринимается внешним контейнером как обычный фрейм. Другими словами, вместо тега <FREME> можно использовать контейнер <FREMESET > для разбиения одного фрейма на несколько фреймов.
Пример:
FREMESET >
HTML>
Как при форматировании таблиц, при создании фреймов существует возможность изменения внешнего вида фреймов. Для этого используются следующие атрибуты форматирования:
bordercolor - задает цвет рамки, которая разделяет отдельные фреймы;
frameborder - указывает браузеру, отображать ли рамку у фреймов или нет;
border - определяет толщину всех фреймов данного набора.
Пример:
bordercolor ="#AB9570"
frameborder ="yes" border ="2">
bordercolor ="#AB9570"
frameborder ="yes" border ="2">
Ваш браузер не поддерживает фреймы.
HTML>
Встроенный фрейм.
Кроме обычных фреймов существуют и встроенные фреймы, которые поддерживаются, к сожалению, только Microsoft Internet Explorer 4.0 и NN 6.0 и более поздними версиями. Они представляют собой окно в документе, которое, в свою очередь, загружается другой HTML-документ. Для вставки такого фрейма используется тег <IFRAME>, который имеет следующие основные атрибуты:
-
src="…" - данный атрибут предназначен для указания пути к Web- странице, которая будет загружена в данный фрейм;
-
name="…" - в данном атрибуте определяется имя фрейма;
-
height="…" - указывает высоту фрейма;
-
width="…" - указывает ширину фрейма в пикселях.
В сочетании с атрибутом height="…" может ускорить загрузку основного документа, поскольку браузер оставит место для фрейма и продолжит загрузку родительского документа;
-
frameborder="…" - разрешает или запрещает отображение рамки вокруг фрейма. Возможные значения: 0 или 1;
-
scrolling="…" - задает отображение линий прокрутки для фрейма. Имеет следующие значения: AUTO - заданно по умолчанию, определяется браузером в зависимости от загружаемого во фрейм документа; YES - заставляет браузер отображать линии прокрутки; NO - линии прокрутки не отображаются.
Пример:
Встроенный фрейм
<BODY bgcolor="FFFFFF" text="#000000">
Здесь расположенная информация, отображается во встроенном фрейме.
BODY>
HTML>
Следует обратить внимание на то, что если браузер не поддерживает встроенные фреймы, он проигнорирует тег <IFRAME> и отобразить информацию, которая расположена в контейнере <IFRAME>.
Пример:
<HTML>
<HEAD>
<TITLE>Главная страницаTITLE>
<H1>Ниже встроенный фрейм.H1>
align="center">
В случае если ваш браузер не поддерживает встроенные фреймы, этот текст будет отображаться на экране
IFRAME>
HR>
BODY>
HTML>
2.12. Создание форм
Для получения от пользователя некоторой информации используют заполняемые формы, определяемые тегом <FORM>. Например, можно использовать формы для проведения опросов или при разработке регистрационных форм. В одном документе может быть определено несколько форм для заполнения, но вложенные теги <FORM> не допускаются. Формат контейнера < FORM> следующий:
< FORM action="url" method="GET/POST" >... FORM>
Здесь используются следующие атрибуты:
action="url" - URL-адрес сервера запросов, куда будет отослано содержание формы после подтверждения. Если этот атрибут отсутствует, будет использован URL -адрес текущего документа,
method="GET/POST"- http-метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие:
-
GET - этот метод используется браузером по умолчанию и осуществляет присоединение содержимого заполненной формы к URL;
-
POST - при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.
ENCTYPE="…" задает тип кодирования содержимого заполненной формы. Этот атрибут действует только когда используется метод Р08Т, и даже в этом случае имеет только одно возможное значение - application/x-www-form-urlencoded.
Внутри контейнера <FORM> могут находиться любые теги, кроме другого контейнера <FORM>. Для задания интерфейсных элементов внутри <FORM> используются теги <INPUT>, <SELECT> и <TEXTAREA>.
Тег <INPUT> используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты.
name="идентификатор" - имя для поля ввода, используемое при идентификации после подтверждения формы.
type="параметр" - задает тип элемента; параметр может принимать одно из следующих значений:
-
hidden- тогда пользователю не предлагаются поля для ввода, но содержимое команды передается при подтверждении и посылке формы;
-
image - определяется рисунок, по которому можно сделать щелчок мышью, что приводит к немедленному подтверждению и отсылке формы;
-
text - поле ввода текста. Это значение используется по умолчанию;
-
password - поле ввода пароля, причем вводимые символы отображаются звездочками;
-
checkbox - переключатель, принимающий положения "включено" и "выключено";
-
radio - переключатель, принимающий положения "включено" и "выключено", причем может быть выбран только один из элементов;
-
submit - кнопка, действие которой сводится к отсылке содержимого заполненной формы на сервер;
-
reset - кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию.
value="значение" - для полей ввода текста или пароля может быть использовано для задания начального содержания поля, а для checkbox или radio задает значение, когда элемент находится в отмеченном состоянии.
size="n" - задает физический размер поля ввода в символах, однако этот атрибут действует только для элементов ввода текста или пароля.
maxlength="n" - определяет максимальное количество введенных символов, которые будут приниматься для ввода.
Приведем пример несложной формы, в которой использован тег <INPUT> и его различные параметры.
Пример. Пример создания формы
< FORM method="POST" name="student" action=macom.com/cgi-bin/script.cgi >
<P>Введите ваше имя < INPUT type="text" name="T1" size="45">P>
<INPUT type="radio" value="V1" checked name="R1">учащийся вуза
<INPUT type="radio" name="R1" value="V2" >другое
< INPUT type="submit" value="Submit" name="B1">
< INPUT type="reset" value="Reset" name="B2">
< /FORM>
Тег <SELECT> предназначен для создания списков в форме, при этом внутри разрешена только последовательность тегов <OPTION>, за каждым из которых следует некоторое количество простого текста. Атрибуты тега <SELECT> следующие:
name="идентификатор" - символьное имя для элемента <SELECT>, по которому он идентифицируется;
size="n" - если значение равно 1 или если этот атрибут опущен, то элемент <SELECT> будет представлен как выпадающее меню; если size=2 или более, то элемент будет представлен как окно выбора, а значение будет определять количество видимых элементов списка;
multiple - если этот атрибут присутствует, то допускается множественный выбор из списка.
На рисунке представлена иллюстрация каждого из рассмотренных атрибутов.
Пример: Пример создания списков в формах
<HTML>
<НЕАD>
<ТIТLЕ>Создание спискаТIТLE>
НЕАD>
<ВОDY> <ВАSEFONT size=5>
<ТАВlЕ>
<ТR>
<ТD>Выберите операционную систему, которую вы используете:ТD>
<TD>Выберите операционную систему, которую вы используете:ТD>
<ТD>Выберите операционную систему, которую вы используете:ТD>
ТD>
<ТR>
СТ>
<ОРTION>Windows 3.11
<ОРТION>Windows 95
<ОРТION>Windows 98
<ОРТION>Windows Ме
Windows NT
Windows 2000
Windows XP
<ОРТION>Linux
Unix
QNX
<ОРTION>Windows 3.11
<ОРТION>Windows 95
<ОРТION>Windows 98
<ОРТION>Windows Ме
Windows NT
Windows 2000
Windows XP
<ОРТION>Linux
Unix
QNX
<ОРTION>Windows 3.11
<ОРТION>Windows 95
<ОРТION>Windows 98
<ОРТION>Windows Ме
Windows NT
Windows 2000
Windows XP
<ОРТION>Linux
Unix
QNX
ТАВLE>
ВОDY>
HTML>
И, наконец, контейнер <ТЕХТАRЕА> может быть использован для расположения многострокового поля ввода с необязательным содержимым в форме. Основными атрибутами тега <ТЕХТАRЕА> являются:
name ="..." - символьное имя поля ввода;
rows ="..." - число строк в поле ввода, то есть высота поля;
cols= "..."- число столбцов в поле ввода, то есть ширина поля.
Следующий пример иллюстрирует создание текстовой области в форме.
Пример: Создание текстовой области
<HTML>
<HEAD>
<ТIТLЕ>Создание простой формы</ТIТLЕ>
НЕАD>
<ВОDY>
Ваши предложения о работе сайта просьба оставлять здесь:<ВR>
РОSТ">
<ТЕХТАRЕА name="form1" rows="10" cols="50">ТЕХТАRЕА>
<р>Отправить" name="В1">
< input type="reset" value ="Очистить" name="В2">
FORM>
ВОDY>
НТМL>
Объект <ТЕХТАRЕА> имеет полосы прокрутки, так что может быть введено любое количество текста. Содержание по умолчанию должно быть АSII-текстом, при этом символы перевода строки воспринимаются.
Если контейнер <ТЕХТАRЕА> пуст, то в текстовой области ничего не отображается, однако если между тегами <ТЕХТАRЕА> и ТЕХТАRЕА> заключить какой-либо текст, то он будет выводиться при загрузке страницы.
Заключение
Новая информационная технология достигла такого развития, что не осталось сфер человеческой жизни, не затронутых глобальной сетью Интернет. В настоящее время интерес к сети Интернет продолжает расти.
Данная методическая разработка ориентированна на студентов желающих, не только бороздить просторы сети Интернет, но и создавать ее. Здесь подробно изложены основные вопросы, касающиеся создания HTML-страниц и веб-сайтов.
Данная методическая разработка направлена на самостоятельный отбор и соответствующее представление информации студентами. Используя, данную разработку они развивают свой творческий потенциал.
Список использованной литературы
-
Intel. Технологии будущего.
-
С.В. Глушаков, И.А. Жакин, Т.С. Хачиров «Программирование Web-страниц». - Ростов н/Д: Феникс, Харьков: Фолио, 2006. - (Самоучитель)
-
под. ред. П.П. Беленького «Информатика». - Ростов н/Д: Феникс, 2002.
-
В.Я. Турецкий «Математика и информатика». - М.: ИНФРА-М, 2002.
-
И. Б. Львов, Г. Г. Казеева, И. А. Морев «Информатика». - Владивосток, 2001.