Тема: Структура HTML-страницы, основные теги и теги форматирования текста.

Тема: Структура HTML-страницы, основные теги и теги форматирования текста.

Цель: Закрепление основных понятий о структуре HTML-страницы, изучение основных тегов

 

Заголовки

В примере для заголовка используются теги <H1></h1>.

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

align=’’left’’

align=’’center’’

align=’’right’’

<COMMENT></comment>

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

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

<!--Строка комментария -->

<!—Комментарий --Не комментарий --Снова комментарий-->

Внутри подобной конструкции можно помещать и теги: они не будут восприниматься браузером.

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

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

<P></p>

Элемент абзаца (paragraph). Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает конец предыдущего и начало следующего абзаца. Вместе с элементом Р можно использовать атрибут выравнивания align

<BR>

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

<NOBR></nobr>

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

<PRE></pre>

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

<BLOCKQUOTE></blockquote>

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

<CENTER></center>

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

<DIV></div>

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

align=’’left’’

align=’’center’’

align=’’right’’

<B></b>

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

<BIG></big>

Увеличенный размер шрифта

<SMALL></small>

Уменьшенный размер шрифта

<I></i>

Выделение текста курсивом

<EM></em> и <DFN></dfn>

Элементы, означающие выразительность фрагмента текста и определение чего-либо. Оба элемента аналогичны по своему действию элементу I, то есть, в большинстве случаев, позволяют выделить текст курсивом.

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

<TT></tt>

Элемент, обозначающий текст телетайпа. Его особенность заключается в использовании моноширинного шрифта.

<STRIKE></strike>

Элемент, создающий перечеркнутое начертание текста. В настоящее время его заменяют более простим: <S></S>

<U></u>

Подчеркнутое начертание текста.

<STRONG></strong>

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

<SUB></sub>

Элемент, создающий эффект нижнего индекса.

<SUP></sup>

Элемент, создающий эффект верхнего индекса.

<PLAINTEXT></plaintext>

Этот элемент предназначен для создания текста с конструкциями HTML, которые должны восприниматься именно как текст. Все теги, заключенные вPLAINTEXT, воспринимаются браузером только как произвольные символы. Элемент удобно использовать для обсуждения вопросов, связанных с использованием HTML.

<CODE></code>, <SAMP></samp> и <VAR></var>

Элементы, предназначенные для вывода фрагментов программ. CODE используется для форматирования текста программы. SAMP предполагается задействовать при иллюстрации примеров вывода данных на экран. VAR был создан для выделения переменных. Как правило, все эти элементы обеспечивают вывод информации с использованием моноширинного шрифта.

<KBD></kbd>

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

<CITE></cite>

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

 

Практическое задание.

1.Создать структуру HTML-страницы.

2.Внутри созданной страницы использовать основные теги.

3.Написать Ф. И. О. магистра, № группы, название кафедры, используя теги форматирования текста.

Контрольные вопросы.

1.Из чего состоит web-страница?

2.Атрибутами какого тега являются атрибуты bgcolor и background? И что они определяют?

3.Основные теги форматирования текста и их назначение.

Подготовка отчета по практическому заданию.

Отчет должен состоять из следующих пунктов:

1. Краткие теоретические сведения.

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

3. Краткое заключение.

Пример выполнения 1-го практического задания: Структура HTML-страницы, основные теги и теги форматирования текста.

HTML код:

<HTML>

<HEAD>

<TITLE>Практическое задание №1.Структура HTML-страницы, основные теги и теги форматирования текста.</title>

</head>

<BODY BGCOLOR="e5e5e5">

<H1><CENTER>Практическое задание №1</center></h1><BR>

<B>Название: <I>Структура HTML-страницы, основные теги и теги форматирования текста.</i></b><BR><BR>

<B>Цель работы: <I>Закрепление основных понятий о структуре HTML-страницы, назначение основных тегов.</i></b><BR><BR><H2>Выполнил</h2>

<STRONG>Ф. И. О.:</strong>&nbsp;&nbsp;&nbsp;<U>Цой Дмитрий Лаврентьевич</u><BR>

<STRONG>Группа:</strong>&nbsp;&nbsp;&nbsp;&nbsp;<U>902-05 МБАТр</u><BR>

<STRONG>Кафедра:</strong>&nbsp;<U>Информационные технологии</u><BR></body></html>

 

Рис 1. Результат выполнения 1-го практического задания

Фреймы

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

Фреймы задаются следующими элементами:

FRAMESET - определяет расположение фреймов на странице. Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тэгами кроме элементов FRAME и NOFRAME могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Параметры: rows - определяет количество и размеры горизонтальных фреймов. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: в процентах от высоты экрана, например "25%,35%,40%"; можно использовать "*" (звездочку), которая означает, что фрейм занимает все остальное место, например в данном примере "25%,35%,*", звездочка равна 40%; в пикселях - "135,56,*". Cols - определяет количество вертикальных фреймов и их размеры, все задается как и в параметре rows. Border - задается ширина рамок фреймов (работает только в NetscapeNavigator). Frameborder - определяет наличие рамок у содержащихся внутри frameset фреймов. Возможные значения: yes - отображать рамки, no - не отображать (не поддерживается Netscape). Framespacing - задает расстояние между фреймами в пикселях. Используется когда рамки не должны отображаться.

FRAME - определяет фрейм и его свойства внутри элемента frameset. Параметры: scr - определяет адрес (URL) файла, отображаемого в данном фрейме; name - определяет имя данного фрейма, которое будет использоваться для ссылки на него из других документов с помощью параметра target. Marginwidth/marginheight - определяется ширина/высота левого/правого или верхнего/нижнего полей фрейма; scrolling - определяет наличие полей прокрутки фрейма. Возможные значения: yes - отображать, no - не отображать, auto - отображать, если нужно. Noresize - не позволяет изменять размеры фрейма; frameborder - определяет наличие рамок у фрейма. Возможные значения: yes/no - отображать/ не отображать.

NOFRAMES - определяет, что будет отображать браузер, если он не поддерживает фреймы.

Пример:

это текст файла, задающего фреймы (frame1.html, frame2.html, frame3.html)

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="250,*">
<FRAME SRC="frame1.html" NAME="page">
<FRAMESET ROWS="150,*">
<FRAME SRC="frame2.html" NAME="menu1" MARGINWIDTH="0">
<FRAME SRC="frame3.html" NAME="menu2" MARGINWIDTH="0">
</FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>

</FRAMESET>

<BODY></BODY>

 

Списки

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

<UL><LI></ul>

Самый простой ненумерованный список (unordered list). Его шаблон представлен ниже:

<UL>

<LI> Пункт 1 списка

<LI> Пункт 2 списка

<LI> Пункт 3 списка

</ul>

Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 2.1.

 Пункт 1 списка  Пункт 2 списка  Пункт 3 списка

Рис.2.1. Ненумерованный список.

 

<OL><LI></ol>

Структура нумерованного списка похожа на предыдущую:

<OL type=’’I’’>

<LI> Пункт 1

<LI> Пункт 2

<LI> Пункт 3

<LI> Пункт 4

</ol>

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

I. Пункт 1 II. Пункт 2 III. Пункт 3 IV. Пункт 4

Рис. 2.2. Нумерованный список.

 

Способ нумерации задается при помощи атрибута type. В табл. 2.1. приведены все способы нумерации.

Табл. 2.1. Значение атрибута type

Атрибут	Последовательность нумерации
type=’’1’’	1, 2, 3, 4,...
type=’’i’’	i, ii, iii, iv,...
type=’’I’’	I, II, III, IV,...
type=’’a’’	a, b, c, d,...
type=’’A’’	A, B, C, D,...

Списки с определениями (definition lists) создаются при помощи тегов трех видов:

<DL>

<DT> Пункт 1

<DD> Определение пункта 1

<DD> Другое определение пункта 1

<DT> Пункт 2

<DD> Определение пункта 2

<DT> Пункт 3

<DD> Определение пункта 3

</dl>

Наглядное представление о списке с определениями дает рис. 2.3. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение - произвольный текст под заголовком.

Пункт 1 Определение пункта 1 Другое определение пункта 1 Пункт 2 Определение пункта 2 Пункт 3 Определение пункта 3

Рис.2.3. Список с определениями

 

Практическое задание.

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

2.Разбить всю страницу на 4 фрейма – 2 по горизонтали и 2 по вертикали.

3.В левом верхнем фрейме создать меню, состоящее из следующих ссылок:

- Поисковые системы;

- Каталоги;

- Литература.

4.В правом верхнем фрейме разместить какой-нибудь логотип, картинку.

5.В левом нижнем фрейме выводить ссылки из левого верхнего фрейма.

- Для поисковой системы – ссылки www.yandex.ru, www.google.ru, www.aport.ru, www.rambler.ru, www.filesearsh.ru оформить в виде ненумерованного списка;

- Для каталогов – ссылки www.list.ru, www.catalog.ru, www.rambler.ru, www.filesearsh.ru оформить в виде нумерованного списка;

- Для литературы – все ссылки оформить как списки с определениями, то есть разложить по рубрикам библиотека (www.lib.ru, www.aldebaran.ru), развлечение – игры, музыка, клипы и тд. (www.games.ru, www.partypoker.com.ru, www.mp3real.ru, www.zaycev.net, www.delit.net, www.mp3.uz), техническая литература (www.citforum.ru, www.intuit.ru, www.kurs-lab.ru).

Все поисковые системы выводить с их логотипом.

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

Контрольные вопросы.

1.Какими тегами задаются фреймы?

2.Для чего были добавлены списки в HTML?

3.Какие бывают списки?

Подготовка отчета по практическому заданию.

Отчет должен состоять из следующих пунктов:

1. Краткие теоретические сведения.

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

3. Краткое заключение.

Пример выполнения 2-го практического задания: Изучение возможностей языка HTML – фреймы и списки.

HTML код:

Index.htm

<HTML>

<HEAD>

<META NAME="Content-Language" CONTENT="ru">

<TITLE>Практическое задание №2 - Использование фреймов, списков</title>

</head>

<FRAMESET cols="25%,*" FRAMEBORDER="2" и BORDER="5">

<FRAMESET rows=20%,*" FRAMEBORDER="3" и BORDER="5">

<frame name="toc" src="Frame1.htm" SCROLLING="Auto" NORESIZE>

<frame name="menu2" src="Frame4.htm" SCROLLING="Auto" NORESIZE>

</frameset>

<FRAMESET rows=20%,*" FRAMEBORDER="3" и BORDER="5">

<frame name="logo" src="Frame3.htm" SCROLLING="Auto" NORESIZE>

<frame name="main" src="Frame2.htm" SCROLLING="Yes" NORESIZE>

</frameset></frameset><noframes>

<p>Ваш браузер не поддерживает фреймы, пожалуйста, обновите его.</p></noframes>

</html>

 

Frame1.htm

<HTML>

<HEAD>

<TITLE>Frame1</title>

</head>

<BODY bgcolor="c0e0e0">

<UL>

<LI><A HREF="Find.htm" target="menu2">Поисковые системы</a>

<LI><A HREF="Catalogs.htm" target="menu2">Каталоги</a>

<LI><A HREF="Literature.htm" target="menu2">Литература</a>

</ul>

</body>

</html>

Frame2.htm

<HTML>

<HEAD>

<TITLE>Frame2</title>

</head>

<BODY bgcolor="d0e0e0">

<H2><CENTER>Добро пожаловать на сайт</center></h2>

</body>

</html>

Frame3.htm

<HTML>

<HEAD>

<TITLE>Frame3</title>

</head>

<BODY bgcolor="d0e0e0">

<IMG SRC="Mts2.gif" width="138" height="86" align="right">

</body>

</html>

Frame4.htm

<HTML>

<HEAD>

<TITLE>Frame4</title>

</head>

<BODY bgcolor="c0e0e0">

</body>

</html>

Find.htm

<HTML>

<HEAD>

<TITLE>Find</title>

</head>

<BODY bgcolor="d0e0e0">

<IMG SRC="logo_yandex.gif" width="50">

<A HREF="http://www.yandex.ru" target="main">www.yandex.ru</a><BR>

<IMG SRC="logo_rambler.gif"width="50">

<A HREF="http://www.rambler.ru" target="main">www.rambler.ru</a><BR>

<IMG SRC="logo_aport.gif"width="50">

<A HREF="http://www.aport.ru" target="main">www.aport.ru</a><BR>

<IMG SRC="logo_google.gif"width="25"><IMG SRC="logo_google2.gif" width="10">

<IMG SRC="logo_google3.gif" width="15">

<A HREF="http://www.google.ru" target="main">www.google.ru</a><BR>

<IMG SRC="logo_filesearch.gif"width="50">

<A HREF="http://www.filesearch.ru" target="main">www.filesearch.ru</a><BR>

</body>

</html>

 

Catalogs.htm

<HTML>

<HEAD>

<TITLE>Catalogs</title>

</head>

<BODY bgcolor="d0e0e0">

<OL type="1">

<LI><A HREF="http://www.yandex.ru" target="main">www.yandex.ru</a>

<LI><A HREF="http://www.rambler.ru" target="main">www.rambler.ru</a>

<LI><A HREF="http://www.aport.ru" target="main">www.aport.ru</a>

<LI><A HREF="http://www.google.ru" target="main">www.google.ru</a>

<LI><A HREF="http://www.filesearch.ru" target="main">www.filesearch.ru</a>

</ol>

</body>

</html>

 

Literature.htm

<HTML>

<HEAD>

<TITLE>Literature</title>

</head>

<BODY bgcolor="d0e0e0">

<DL>

<DT><B><BIG>Библиотеки</big></b>

<DD><A HREF="http://www.lib.ru" target="main">www.lib.ru</a>

<DD><A HREF="http://www.aldebaran.ru" target="main">www.aldebaran.ru</a>

</dt>

<DT><B><BIG>Развлечение - игры, музыка, клипы и тд.</big></b>

<DD><A HREF="http://www.games.ru" target="main">www.games.ru</a>

<DD><A HREF="http://www.partypoker.com.ru" target="main">www.partypoker.com.ru</a>

<DD><A HREF="http://www.mp3real.ru" target="main">www.mp3real.ru</a>

<DD><A HREF="http://www.zaycev.net" target="main">www.zaycev.net</a>

<DD><A HREF="http://www.delit.net" target="main">www.delit.net</a>

<DD><A HREF="http://www.mp3.uz" target="main">www.mp3.uz</a>

</dt>

<DT><B><BIG>Техническая литература</big></b>

<DD><A HREF="http://www.citforum.ru" target="main">www.citforum.ru</a>

<DD><A HREF="http://www.intuit.ru" target="main">www.intuit.ru</a>

<DD><A HREF="http://www.kurs-lab.ru" target="main">www.kurs-lab.ru</a>

</dt>

</dl>

</body>

</html>

 

Рис 2.4. Результат выполнения 2-го практического задания.

Таблицы

Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала с помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

TABLE - элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION. Параметры: align - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left; valign - определяет способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle; border - определяет ширину внешней рамки таблицы (в пикселях). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет; cellpadding - определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом; cellspacing - определяет расстояние (в пикселях) между границами соседних ячеек; width - определяет ширину таблицы. Ширина задается либо в пикселях, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала; height - определяет высоту таблицы. Высота задается либо в пикселях, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала; bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов; background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

CAPTION - задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо. Параметры: align - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top - помещает заголовок над таблицей (значение по умолчанию); bottom - помещает заголовок под таблицей.

TR - создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH. Параметры: align - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right; valign - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle; bgcolor - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

TD/TH - элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы. Параметры: align - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование; valign - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру, если значение этого параметра не было задано ранее в элементе TR; width - определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы; height - определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к ширине таблицы; colspan - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1; rowspan - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1; nowrap - блокирует автоматический перенос слов в пределах текущей ячейки; bgcolor - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов; background - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Пример:

<table border="1" cellpadding="0" cellspacing="0" width="100"> <tr> <td colspan="2">А</td><td>В</td> <td rowspan="2">Б</td> </tr> <tr> <td rowspan="2">В</td><td colspan="2">Г</td> </tr> <tr> <td>Д</td><td>Е</td><td>Ж</td> </tr> <tr> <td colspan="2">З</td><td colspan="2">И</td>

А
В	Г
Д	Е
З	И

</tr> </table> Таблица 3.1. Результат работы вышеприведенного примера

Формы

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

FORM - используется для создания заполняемой формы. Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов. Параметры: name - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм; action - обязательный параметр. Определяет URL, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к скрипту сервера, обслуживающему данную форму; method - определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST; enctype - определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded"; target - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения: _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре TARGET элемента A.

TEXTAREA - создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент TEXTAREA должен располагаться внутри элемента FORM; name - обязательный параметр. Определяет название, которое будет использоваться при идентификации заполненного поля сервером; rows - определяет количество строк текста, видимых на экране; cols - определяет ширину текстового поля - в печатных символах; wrap - определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения: off - перенос слов не происходит (значение по умолчанию), virtual - перенос слов только отображается, на сервер же поступает неделимая строка, physical - перенос слов будет происходить во всех точках переноса.

SELECT - создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный тэги. Содержит несколько элементов OPTION. Параметры: multiple - дает возможность выбора нескольких пунктов меню. По умолчанию можно выбрать только один пункт меню; name - определяет имя меню, уникальное для данной формы, которое будет использоваться при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION; size - определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.

OPTION - используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тэга. Параметры: selected - определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню; value - задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра NAME в элементе SELECT.

INPUT - элемент INPUT создает поле формы (кнопку, поле ввода, чек бокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM. Параметры: name - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически; type - определяет тип поля для ввода данных. По умолчанию - это "text". Возможные значения: text - создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH, textarea - создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA, file - дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT; password - создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз; checkbox - создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано, radio - создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button), submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется, image - создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов ".x" в случае абсциссы, и ".y" в случае ординаты, reset - создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера, hidden - поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер, button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе; accept - конкретизирует тип файла. Используется только совместно с пара-метром TYPE="file". Значение задается в виде MIME, value - задает текстовый заголовок для полей любого типа, в том числе и кнопок.

Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE, checked - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы, size - определяет размер поля в символах.

Например, чтобы определить поле с видимой шириной в 33 символа, надо указать SIZE="33", maxlenght - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено, scr - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных.

Используется совместно с параметром TYPE="image", align - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.

Таблица 3.2. Теги создания форм

<form></form>	Создает формы
<select multiple name="NAME" size=?> </select>	Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option>	Указывает каждый отдельный элемент меню
<select name="NAME"></select>	Создает ниспадающее меню
<option>	Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea>	Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox"name="NAME">	Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x">	Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20>	Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME">	Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif">	Создает кнопку "Принять" - для этого используется изображение
<input type="reset">	Создает кнопку "Отмена"

Практическое задание.

1.Создать таблицу, состоящую из 5 строк.

- Первую и вторую строки разбить на 3 столбца;

- Третью строку разбить на 6 столбцов;

- Четвертую строку разбить на 2 столбца;

- Пятую не разбивать вообще.

2.Ниже создать ещё одну таблицу, состоящую из 2 строк и в каждой строке по 2 столбца.

3.В первой строке первого столбца разместить ниспадающее меню.

4.В первой строке второго столбца разместить окно для ввода текста.

5.Во второй строке первого столбца разместить скролируемое меню.

6.Во второй строке второго столбца разместить кнопку "Принять".

Контрольные вопросы.

1.Какой элемент служит для создания таблицы?

2.Атрибуты тегов <TR> и <TD>.

3.С помощью какого тега создаются формы и для чего нужны формы?

Подготовка отчета по практическому заданию.

Отчет должен состоять из следующих пунктов:

1. Краткие теоретические сведения.

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

3. Краткое заключение.

Пример выполнения 3–го практического задания: Изучение возможностей языка HTML – таблицы и формы.

HTML код:

<HTML>

<HEAD>

<TITLE>Практическое задание №3.Изучение возможностей языка HTML – таблицы и формы.</title>

</head>

<BODY bgcolor="d5f5d5">

<TABLE BORDER="1" WIDTH="100%" HEIGHT="50%">

<CAPTION>ТАБЛИЦА</caption>

<TR>

<TD colspan="2">1.1</td><TD colspan="2">1.2</td><TD colspan="2">1.3</td>