Лабораторная работа №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 ©Оформление. Издательство Томского
Оглавление Общие сведения о языке разметки 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> <META NAME="Author" CONTENT="Ваше имя "> <title>Тег FORM, параметр action</title> <form action="http://www.htmlbook.ru/download/file.php"> HTML Тег <HTML> и парный ему </HTML>. Тег <HTML> указывает программе просмотра страниц что это HTML документ HEAD Тег <HEAD> и парный ему </HEAD>. Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин BODY Тег <BODY> определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов
Form Тег <FORM> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга. Для отправки формы на сервер используется кнопка Submit, то же самое можно добиться, если нажать клавишу <Enter> в пределах формы. Если кнопка Submit отсутствует в форме, клавиша <Enter> имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <INPUT>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата. Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега <FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.
Метки В случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки:
Пример меток в тексте: <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:
Параметр 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/). 3. Сделать ссылку на эту страницу с главной страницы. 4. Разместить файлы на сервере и просмотреть в браузере, проверить работоспособность всех ссылок.
Популярное: Личность ребенка как объект и субъект в образовательной технологии: В настоящее время в России идет становление новой системы образования, ориентированного на вхождение... Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас... Как построить свою речь (словесное оформление):
При подготовке публичного выступления перед оратором возникает вопрос, как лучше словесно оформить свою... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (228)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |