Создание HTML-документа на основании информации запроса базы данных

Лабораторная работа №8

 

Создание HTML-документа на основании информации запроса базы данных

Цель: научиться создавать html-документы на основе информации таблиц базы данных.

Содержание отчета:

Распечатка текста html-документа.

Задание

1. Запустить СУБД Microsoft Access.

2. Открыть запрос №2, выполненный в лабораторной работе №3 и экспортировать его в формат html.

3. Открыть полученный html-документ в любом текстовом редакторе, добавить заголовок и откорректировать текст в соответствии с вариантом.

4. Оформить отчет.

 

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

 

HTML — это язык, состоящий из набора специальных символов-тэгов (элементов), которые определяют структуру и внешний вид документа при отображении в браузере, а также систему ссылок на другие документы. Тэг состоит из имени, заключенного в угловые скобки, и необязательного набора атрибутов. Как правило, тэги включают начальный и конечный компоненты (начальный и конечный тэги, или открывающий и закрывающий тэги), между которыми размещается содержимое тэга (текст и другие элементы).

Конечный тэг имеет то же имя, что и начальный, с той разницей, что перед именем конечного тэга ставится косая черта (/). Одним из принципов языка является многоуровневое вложение элементов.

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

Несмотря на то, что спецификация HTML является стандартом, язык постоянно дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров.

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

Разделение на абзацы

Разбиение текста HTML- документа на абзацы выполняется с использованием тэга абзаца <P>, помещаемого перед началом каждого абзаца. Закрывающий тэг </P> необязателен. Тэг <P> может задаваться с параметром горизонтального выравнивания ALIGN.

ALIGN=LEFT выравнивание текста по левой границе окна браузера

ALIGN=CENTER выравнивание по центру окна браузера

ALIGN=RIGHT выравнивание по правой границе окна браузера

ALIGN=JUSTIFY выравнивание по ширине (по двум сторонам)

 

Перевод строки

Тэг <BR> служит для размещения последующего текста с начала новой строки.

Тэги <NOBR> и <WBR> выполняют операцию противоположного плана – запретить перевод строки. Текст размеченный тэгом <NOBR> будет гарантированно располагаться в одной строке.

 

Заголовки внутри HTML-документа

Для разметки заголовков используются тэги <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Эти тэги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым крупным, а с номером 6 – самым мелким.

 

Горизонтальные линии

Горизонтальные линии подчеркивают законченные той или иной области страницы. Тэг < HR > позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра.

Параметры тэга < HR >:

ALIGN выравнивает по краю или центру; имеет значения LEFT,CENTER,RIGHT

WIDTH устанавливает длину линии в пикселях или процентах от ширины окна браузера

SIZE устанавливает толщину линии в пикселях

Специальные символы

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

Таблица 4. Спецсимволы.

Код символа	Числовая кодировка	Мнемоническая кодировка	Название	Символ
	&#34	&guot	прямая кавычка	“
	&#38	&amp	амперсант	&
	&#60	&lt	знак меньше	<
	&#62	& gt	знак больше	>
	&#153	&trade	знак ТМ	™
	&#169	&copy	знак копирайта	©
	&#176	&deg	знак градуса
	&#181	&micro	знак микро	м

 

Ссылки на другие документы и файлы

Одним из важнейших понятий для HTML-документов являются ссылки. Гипертекстовый документ – документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. За основу гипертекста взят принцип организации энциклопедических словарей, в которых во многих статьях есть ссылки на другие.

Организация ссылок

Ссылка состоит из двух частей. Первая – то, что вы видите на Web-странице; она называется указатель ссылки (anchor).Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Указатели бывают двух типов – текстовые и графические.

Правила записи ссылок

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

Тэг < A>.

Тэг <A> имеет единственный параметр HREF,и значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </A>:

<A HREF = URL-адрес > Текстовый указатель ссылки </A>

Для обеспечения работы с относительными указателями ссылок введен тэг <BASE>. Он располагается в начале документа в разделе <HEAD> и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на различные части текущего документа. Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра NAME тэга <A>. При этом параметр HREF не используется, а браузер не выделяет содержимое тэга <A>.

Например: <A NAME = chapter_5> </A>

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

<A HREF =”# chapter_5”>глава 5 </A>

Теперь, если пользователь щелкнет кнопкой мыши на словах “глава 5”, браузер выведет соответствующую часть документа в окне просмотра.

Графические изображения

Фоновые изображения.

Разработчики WEB-страниц могут управлять цветом фона документа, а также указывать изображения используемые в качестве фонового. Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала. Например:

<BODY BACKGROUND = backgrd2.png BGCOLOR = GRAY>

Одновременное задание параметров BACKGROUND и BGCOLOR не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать. Может показаться, что указание фонового цвета излишне при задании фонового изображения. На практике рекомендуют всегда указывать цвет фона документа, если задается фоновое изображение. Т. к. при загрузке документа, прежде всего, отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона будет определяться значением параметра BGCOLOR илиустанавливаться по умолчанию. Опыт работы с HTML-документами, получаемыми по сети, показывает, что до загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомиться с уже загруженным текстом. При появлении фонового изображения меняется гамма цветов документа. Чтобы предотвратить резкое изменение цветов, следует задавать значение цвета фона близким к цветам фонового изображения.

 

Рамки вокруг изображений

Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется. Исключением является только случай, когда изображение является ссылкой. В этом случае браузеры заключают изображение в рамку синего цвета. Избежать появления рамки можно указав значение BORDER=0.

Альтернативный текст

Параметр тэга <IMG> ALT определяет альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях. При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений выполняется. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением. Современные браузеры будут также отображать альтернативный текст в качестве подсказки при помещении курсора мыши в область изображения.

Таблицы

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

Каждая таблица должна начинаться тэгом <TABLE> и заканчивается тэгом </TABLE>. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей.

Строка таблицы: <TR>...</TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: <TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы — будет поставлена подпись. По умолчанию подпись всегда центрирована в рамках ширины таблицы. Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, RIGHT, CENTER. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться для горизонтального и вертикального выравнивания. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения TOP и BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет вид:

<CAPTION ALIGN=Left VALIGN=bottom> Заголовок таблицы </caption>

Параметры тэга <TABLE>

Основным тэгом, применяемым при создании таблиц, является тэг <TABLE>. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры Netscape и Microsoft Internet Explorerразрешают кроме перечисленных пяти параметров использовать параметры: HEIGHT и BGCOLOR.

Параметр BORDER

Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

Параметр ALIGN

Если атрибут ALIGN присутствует внутри тэгов <TABLE> и </TABLE>, то он определяет горизонтальное расположение таблицы в области просмотра. По умолчанию ALIGN=left. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. Это обусловлено тем, что присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы с двух сторон не предусмотрено. Для более точного управления обтеканием следует использовать тэг <BR> с параметром CLEAR так же, как это выполняется для <IMG>. Если параметр ALIGN опущен, то место слева и/или справа таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого необходимо все описание таблицы поместить внутри тэгов <CENTER> и </CENTER>.

Вложенные таблицы

Отдельные ячейки таблицы могут содержать практически любые тэги языка и данные, разрешенные в разделе <BODY>. В том числе, внутри одной ячейки таблицы может быть расположена другая таблица. Не все браузеры, поддерживающие таблицы, правильно отображают сложные таблицы.

 

Варианты заданий

	Варианты заданий
1-2	3-4	5-6	7-8	9-10	19-22
Цвет (стандартный) фона страницы (можно выбрать самостоятельно!)	серый	корич-невый	синий	бирюзовый	желтый	олив-ковый
Шрифт	Arial	Tahoma	Verdana	Times New Roman	Microsoft Sans Serif	Palatino Linotype
Выравнивание	Выбрать самостоятельно
Размер шрифта			+2	-1	+1
Остальные параметры текста	Выбрать самостоятельно

 

Лабораторная работа №8

 

Создание HTML-документа на основании информации запроса базы данных

Цель: научиться создавать html-документы на основе информации таблиц базы данных.

Содержание отчета:

Распечатка текста html-документа.

Задание

1. Запустить СУБД Microsoft Access.

2. Открыть запрос №2, выполненный в лабораторной работе №3 и экспортировать его в формат html.

3. Открыть полученный html-документ в любом текстовом редакторе, добавить заголовок и откорректировать текст в соответствии с вариантом.

4. Оформить отчет.