Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / «Создание веб-сайта проекта с помощью языка разметки гипертекста HTML»

«Создание веб-сайта проекта с помощью языка разметки гипертекста HTML»

  • Информатика

Поделитесь материалом с коллегами:



















«Создание веб-сайта проекта с помощью языка разметки гипертекста 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-страница.

hello_html_m6e55b203.png

Рис.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>

Комментарии используются для пояснения исходного кода документа.

Следует учесть то, что они не отображаются в браузере.

hello_html_m184b4962.png

Рис.2. Использование комментариев




1.4. Просмотр результата

После написания исходного кода HTML-документа и перед размещением его в сети Internet необходимо посмотреть на результат работы со стороны пользователя.

Для просмотра созданного документа созданного документа рекомендуется использовать несколько браузеров. На сегодняшний момент самым распространенным браузерoм для семейства ОС Windows являются Internet Explorer.

Чтобы просмотреть созданный документ нужно его открыть с помощью браузера.


§ 2. Форматирование Web-страниц

2.1. Создание абзацев

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

Пример:

Создание абзацев

<BODY>

Это первый абзац.

<P> А это второй. <br>

BODY>

HTML>

hello_html_35ec8cae.png

В данном абзаце был использован тег <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>

hello_html_m55982237.png


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>

hello_html_m28efae4.png

Используются так же:

Контейнер <SUP>…SUP> - уменьшенный сдвинутый вверх текст.

Контейнер <SUB>…SUB> - уменьшенный сдвинутый вниз текст.

Контейнер <STRIKE>…STRIKE>- перечеркивает текст горизонтальной линией.

Контейнер <BIG>…BIG> - позволяет ввести текст большего размера.

Контейнер <SMALL>…SMALL> - позволяет ввести текст меньшего размера.

Пример:

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

<P>допускается так же использование в тексте <SUP>верхнихSUP> и <SUB>нижнихSUB>индексов

<P><STRIKE>перечеркнутый текстSTRIKE>

<P>текст<BIG>большего размераBIG>

<P>текст<SMALL>меньшего размера<SMALL>

hello_html_m36e33c4c.png

2.5. Установка атрибутов текста

Размер шрифта: По умолчанию размер шрифта равен 3, однако, используя тег <FONT> с атрибутом size=”…”, его можно переопределить.

Пример:

Шрифты

размер шрифта равен 7.

размер шрифта равен 6.

размер шрифта равен 5.

размер шрифта равен 4.

размер шрифта равен 3.

размер шрифта равен 2.

размер шрифта равен 1.

hello_html_392178cb.png


Цвет документа: Установка цветов производиться с использованием атрибутов установки цвета в тегах <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

Пример:

локальных ссылок

Оглавление:

Часть первая

Часть вторая

Часть третья

Часть первая




Часть вторая




Часть третья




hello_html_m27d2f61d.png


2.7. Вставка графических изображений

Для вставки графических изображений используется тег <IMG>. Допускается использование файлов в формате gif или jpg/jpeg.

Пример:

<IMG src=”pig.jpgwidth=600 height=290 alt=”Эволюция”>

Здесь атрибут src=”…” определяет URL- адрес графического файла, атрибуты height=”…” и width=”…”- высоту и ширину соответственно.

Атрибут alt=”…” указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользовательотключил загрузку графических файлов.

Используя атрибут align=”…” можно рпзместить последующий текст верху, внизу или по центру относительно картинки. Допустимые значения атрибута align=”…”: Top – текст распологается вверху, Bottom – внизу, Viddle – по центру.

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

Mailmowe.gif”

По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы урать прорисовку рамки, используют атрибут 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>

hello_html_m52c9b32c.png


Для ненумерованного списка можно использовать атрибут type=”…”, указывающий на тип маркера каждого элемента списка. Допускается использовать следующие значения:

type=”disc

type=”circle

type=”square

Нумерованный список создают, используя теги <OL> и <LI>. Например:

<OL>

<LI>элемент первый

<LI>элемент второй

<LI>элемент третий

</OL>

hello_html_212891c6.png


По умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Используя атрибуты тега <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>

hello_html_m6bc3111.png


Рассмотрим пример вложенного списка, в котором допускается использовать теги <UL>, <OL> и <LI>:

<UL>

<LI> Первый раздел

<UL>

<LI>Первый подраздел первого раздела

<LI>Второй подраздел первого раздела

<OL type=a>

<LI>Первый список

<LI>Второй список

OL>

<LI>Третий подраздел первого раздела

UL>

<LI>Второй раздел

UL>

hello_html_m48ff551f.png


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

Описание таблиц в HTML- документе осуществляется с помощью контейнера <TABLE>…TABLE>. Таблица задается двумя контейнерами тегов: <TR>…TR>- описание строки таблицы и <TD>…TD>- описание ячейки таблицы.

По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.

Пример:

Таблица

таблицы

<B>заголовок таблицы.B>

TD>

Первая ячейка первой строки.

TD>

<TD align=”center”>

Вторая ячейка первой строки.

TD>

<td align=”center”>

Первая ячейка второй строки.

Вторая ячейка второй строки.

TD>

конец таблицы-->

BODY>

HTML>

hello_html_m4c8545fd.png


Ширина таблицы задается атрибутом 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=”FFFFFFtext=”#000000”>

Здесь расположенная информация, отображается во встроенном фрейме.

BODY>

HTML>

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

Пример:

<HTML>

<HEAD>

<TITLE>Главная страницаTITLE>

<H1>Ниже встроенный фрейм.H1>

Width=”300” height=”100” align=”center”>

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

IFRAME>

HR>

BODY>

HTML>


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

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

< FORM action=”url” method=”GET/POST” >... FORM>

Здесь используются следующие атрибуты:

action=”urlURL-адрес сервера запросов, куда будет отослано содержание формы после подтверждения. Если этот атри­бут отсутствует, будет использован 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=”POSTname=”studentaction=http://www.macom.com/cgi-bin/script.cgi >

<P>Введите ваше имя < INPUT type=”textname=”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-страниц и веб-сайтов.

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


































Список использованной литературы

  1. Intel. Технологии будущего.

  2. С.В. Глушаков, И.А. Жакин, Т.С. Хачиров «Программирование Web-страниц». – Ростов н/Д: Феникс, Харьков: Фолио, 2006. – (Самоучитель)

  3. под. ред. П.П. Беленького «Информатика». - Ростов н/Д: Феникс, 2002.

  4. В.Я. Турецкий «Математика и информатика». – М.: ИНФРА-М, 2002.

  5. И. Б. Львов, Г. Г. Казеева, И. А. Морев «Информатика». – Владивосток, 2001.







Автор
Дата добавления 02.11.2015
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров355
Номер материала ДВ-114493
Получить свидетельство о публикации
Похожие материалы

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