Лабораторная работа №1. Изучение разметки HTML-документов

А.А. Пономарев

Разработка пользовательского интерфейса к БД в СУБД MySQL

Методические указания к выполнению лабораторных работ

по курсу «Базы данных» для студентов III курса специальностей 230105 «Программное обеспечение вычислительной техники и автоматизированных систем». 230201 «Информационные системы и технологии».

 

Издательство

Томского политехнического университета

2009

 

УДК 681.324.016

ББК 00000

П00

 

Пономарев А.А.

П00 Базы данных: методические указания по выполнению лабораторного практикума для студентов специальностей 230105 «Программное обеспечение вычислительной техники и автоматизированных систем», 230201 «Информационные системы и технологии». В трех частях, часть третья. /Сост. А.А. Пономарев. – Томск: Изд-во ТПУ, 2009. – 32 с.

 

 

УДК 681.324.016

ББК 00000

 

 

Методические указания рассмотрены и рекомендованы
к изданию методическим семинаром кафедры
автоматики и компьютерных систем

« 29 » октября  2009 г.

 

 

Зав. кафедрой АиКС

доктор технических наук    __________Г.П. Цапко

 

Председатель учебно-методической

комиссии                              __________Е.А. Кочегурова

 

Рецензент

Доктор технических наук, профессор

Д.Г. Копаница

 

                                    © Пономарев А.А., 2009

©Томский политехнический университет, 2009

©Оформление. Издательство Томского
политехнического университета, 2009

 

 

Оглавление

Общие сведения о языке разметки HTML.. 4

Структура документа.. 4

HTML.. 5

HEAD... 5

BODY... 5

Form... 6

Метки.. 9

Лабораторная работа №1. Изучение разметки HTML-документов.. 11

Лабораторная работа №2. Формирование навыков создания HTML-документов 13

Лабораторная работа №3 Формирование Perl скрипта и его вызов из Html формы. 14

Лабораторная работа №4 Формирование Perl скрипта, взаимодействующего с HTML формой и СУБД MySQL.. 22

 

Общие сведения о языке разметки HTML

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Структура документа

HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<META NAME="Author" CONTENT="Ваше имя ">

<title>Тег FORM, параметр action</title>
</head>
<body>

<form action="http://www.htmlbook.ru/download/file.php">
<p>...</p>
</form>
</body>
</html>

HTML

Тег <HTML> и парный ему </HTML>. Тег <HTML> указывает программе просмотра страниц что это HTML документ

HEAD

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

BODY

Тег <BODY> определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов

bgcolor	Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">
background	Указывает на url-адрес изображения - фона документа
text	Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">
<body link=?>	Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">
Пример	Эти параметры можно объединять, например на этой страничке используется <BODY bgcolor="yellow" text="green" link="red" alink="blue">

 

Form

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

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

Для отправки формы на сервер используется кнопка Submit, то же самое можно добиться, если нажать клавишу <Enter> в пределах формы. Если кнопка Submit отсутствует в форме, клавиша <Enter> имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <INPUT>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега <FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

action Адрес CGI-программы или документа, которые обрабатывает данные формы.	Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ. Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
enctype MIME-тип информации формы.	Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type="file"), следует определить параметр enctype как multipart/form-data. <form enctype="MIME-тип">...</form>
method Метод протокола HTTP.	Параметр сообщает серверу о методе запроса. <form method="get | post">...</form> Значение параметра method не зависит от регистра. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются. GET Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке. POST Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д
name Имя формы	Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты. <form name="имя">...</form> В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.
target	Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне. <form target="имя окна">...</form> В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие. _blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self. _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.
	Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. <a href="URL">...</a> <a name="идентификатор">...</a> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег А, параметр href</title> </head> <body> <p><a href="../wormik/knob.html">Относительная ссылка</a></p> <p><a href="http://www.htmlbook.ru/wormik/knob.html">Абсолютная ссылка</a></p> </body> </html> href Задает адрес документа, на который следует перейти. name Устанавливает имя якоря внутри документа. target Имя окна или фрейма, куда браузер будет загружать документ. title Добавляет всплывающую подсказку к тексту ссылки.

 

Метки

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

<A name=”Метка”> </A>

Пример меток в тексте:

<A name=”metka1”> </A>

<A name=”metka2”> </A>

Во FrontPage можно выбрать пункт bookmark в подменю Insert.

Для перехода к метке используется ссылка по следующему шаблону:

Текст подсказки <A href=”#Метка”> Текст для щелчка </A>.

Пример ссылок на метки:

<A href=”#metka1”> Ссылка на первую метку </A>

<A href=”#metka2”> Ссылка на вторую метку </A>

 

Карты изображений

 

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

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

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

Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:

<IMG SRC="url" USEMAP="url#map_name">

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

 

<MAP NAME="map_name">

<AREA [SHAPE=" shape "] COORDS="x,y,..." [ HREF =" reference "] [ NOHREF ]>

</ MAP >

 

Лабораторная работа №1. Изучение разметки HTML-документов

ЗАДАНИЕ

 

1. Сформировать HTML документ. При оформлении которого использовать теги HTML, META, HEAD, BODY, FORM, INSERT. Разместить на нем произвольную информацию с использованием шрифтов различного размера, таблиц, нумерованного и ненумерованного списка.

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

В левом фрейме создать рубрики, оформить созданные ссылки в виде списка (тег <UL>)

в правом фрейме соответственно создать ссылки с названием и кратким описанием ресурсов.

- для поисковых систем, ссылки оформить в виде таблицы из двух колонок и нескольких строк. В левой колонке поместить рисунки-логотипы поисковых систем, в правой - гиперссылки на эти системы. (ссылки http://www.yandex.ru/, http://www.rambler.ru/, http://www.aport.ru/, http://www.google.com/, http://www.filesearch.ru/).

- для каталогов, оформить созданные ссылки в виде нумерованного списка, (ссылки http://www.list.ru/, http://www.rambler.ru/.)
- для литературы, оформить созданные ссылки в виде нумерованного списка, ссылки разложить по рубрикам, например: библиотеки, техническая литература, стандарты. (ссылки http://www.citforum.ru/, http://www.lib.ru/, http://www.w3.org/, http://pyramidin.narod.ru/html401/index.htm.)

3. Сделать ссылку на эту страницу с главной страницы.

4. Разместить файлы на сервере и просмотреть в браузере, проверить работоспособность всех ссылок.