Указания для выполнения задания № 2
Разметка гипертекста в языке HTML производится на основе т.н. дескрипторов или тэгов (tag). Тэги являются некими маркерами, помечающими с какого (начальный тэг) и по какое (конечный тэг) место должен быть выделен фрагмент в тексте, который будет обладать свойствами, определяемыми используемым типом тэга. Каждый тэг в HTML заключается в угловые скобки <> и может иметь набор параметров, от значения которых зависит задаваемый режим использования данного тэга. Причем эти параметры задаются внутри угловых скобок начального тэга, а перед конечным тэгом всегда ставится символ «/». Некоторые тэги могут быть непарными, т.е. без конечного, закрывающего тэга.
Приведем список некоторых наиболее часто используемых тэгов с их основными параметрами, которые мы будем в дальнейшем использовать для создания Web-страниц:
Html – граница гипертектового документа, который распознается и обрабатывается браузером, например программой Internet Explorer;
Title – заголовок окна на экране компьютера, в котором располагается гипертекстовый документ;
Body – граница содержательной части гипертектового документа, например общая структура Web-страницы в HTML-формате должна иметь примерно следующий вид
<html>
<title>страница предприятия Радуга</title>
<body>
…
</body>
</html>
где вместо многоточия располагается содержательная часть страницы;
H1(H2,H3…,H7) – граница заголовка (соответственно от 1 до 7 уровня), параметр выравнивания align со значениями left, right, center (соответственно влево, вправо, по центру), например
<h1 align=«center»>Продукция предприятия РАДУГА</h1>
P – граница абзаца;
Br – начало новой строки (заканчивать не нужно, тэг непарный);
Hr – вставка разделительной черты (заканчивать не нужно, тэг непарный);
Marquee – вставка «бегущей» строки, параметр direction со значениями right (вправо) и left (влево), например
<marquee direction=”left”>
Font – задание параметров для текста, параметры: color со значением #nnmmkk, где каждая пара цифр изменяется от 00 до FF задает в шестнадцатиричной системе исчисления число от 0 до 255, причем nn – красный, mm – зеленый, kk – синий цвета, face – гарнитура (Arial, Times, …), size – размер (принимает значения от 1 до 6), например
<font color=«#FF0000” face=«arial” size=5>
A – граница гиперссылки, обязательный параметр href со значением адреса гиперссылки, например
<a href=«http://www.bstu.unibel.by/»>БГТУ</a>
либо name со значением имени, задаваемым данному фрагменту текста, например
<a name=«adress4»> 4. Редактор VBA</a>
Img – вставка рисунка, обязательный параметр src со значением адреса рисунка, например
<img src=«ris1.gif»>
Frameset – разбивка документа на множество рамок (кадров) или фреймов, обязательный параметр rows со значением из списка разбиения экрана на горизонтальные фреймы в процентах, например
<frameset rows=«25%,30%,45%»>
или cols со значением из списка разбиения экрана на вертикальные фреймы в процентах, например
<frameset cols=«25%,25;30%,20%»>
(после тэга должны следовать тэги <frame> для заполнения всех фреймов);
Frame – вставка содержимого во фрейм с параметрами: src со значением адреса вставляемого гипертекстового документа, например
<frame src=«web1.html»>
name со значением имени, задаваемого данного фрейма, например
<frame src=«web1.html» name=«info»>
Form – организация интерактивного гипертекстового документа с элементами управления, т.н. формы с параметрами: способ обработки формы method и посылка формы в сети по указываемому адресу action, например
<form method= «get» action= «http://www.bstu.unibel.by/anketa»>
Input – вставка элемента управления на форму с обязательным параметром type и со значениями: текстовой полосы text, например
<input type= «text»>
флажка checkbox, например
<input type= «checkbox»>
переключателя radio, например
<input type= «radio»>
командной кнопки button, например
<input type= «button»>
командной кнопки “послать” submit, например
<input type= «submit»>
командной кнопки “очистить”, например
<input type= «reset»>
Select – вставка списка на форму (после тэга должны следовать тэги <option> для заполнения списка записями);
Option – вставка записи в список, обязательный параметр value, значением которого является заносимая в список запись, например
<option value=«Стол»>
Textarea – создание текстовой области на форме, обязательные параметры: количество строк rows и количество символов cols, например
<textarea rows=3 cols=40>
Script – вставка фрагмента программного кода, обязательный параметр language, значениями которого могут быть языки написания сценариев VBScript или JavaScript, например
<
script
language=”vbscript”>.
Рис. 16. Домашняя страница сайта предприятия «Морепродукты»
Т Используя перечисленные выше тэги и их основные параметры с допустимыми значениями, создадим в HTML-формате Web-сайт некоторого предприятия, который содержит рекламу предприятия, производимой им продукции и анкету, заполняемую потребителем продукции. Очевидно, что такой Web-сайт может состоять, как минимум, из трех отдельных Web-страниц со следующими компонентами.
На первой странице, как начальной или домашней странице (см. рис. 16) сайта, необходимо разместить заголовок, сопровождающий текст, характеризующий предприятие в целом, а также рисунок-логотип предприятия и две гиперссылки на соответственно вторую и третью Web-страницы (см. рис. 17, 18)екст программы разметки такой страницы в HTML-формате может иметь примерно следующий вид:
<html>
<head>
<title>Предприятие МОРЕПРОДУКТЫ</title>
</head>
<body bgcolor= «#00ffff»>
<h1 align= «center»> Предприятие МОРЕПРОДУКТЫ</h1>
<hr>
<p>
<img src= «Contacts.gif» align=left height=300>
<font size=+3>
<p align=center>
Совместное белорусско-российское предприятие «Морепродукты»
реализует населению морепродукты Балтийского, Черного и
Каспийского морей по самым низким в Беларуси ценам
<p align=center> <a href= «web2.html»>Продукция</a>
<p align=center> <a href= «web3.html»>Анкета потребителя</a>
</font>
</body>
<
/html>
Рис. 17. Примерная организация второй Web-страницы в html-формате
Вторая страница, представляющая продукцию предприятия может быть разбита на несколько кадров (фреймов), примерно как это показано на рисунке 17.
При этом при щелчке по каждому виду продукции (на рис. 17 в списке всего три вида продукции) в левом нижнем кадре в правом нижнем кадре страницы должна вызываться подробная характеристика-реклама этого вида продукции.
Для того, чтобы заполнить все кадры на второй странице информацией, очевидно, необходимо создать кроме самой второй Web-страницы еще пять Web-страниц, которые соответственно ее будут заполнять. Таким образом, текст программы разметки второй страницы, соответствующий виду, представленному на рис. 17, может выглядеть примерно следующим образом
<html>
<head>
<title>продукция</title>
</head>
<frameset rows= «20%,80%»>
<frame src= «web21.html»>
<frameset cols= «30%,70%»>
<frame src= «web1.html»>
<frame name= «info»>
</frameset>
</frameset>
</html>
Здесь в верхнем кадре размещается файл web21.html, в котором находится заголовок страницы с ее логотипом. В левом кадре – файл web22.html, со списком из трех видов производимой продукции, каждая запись в котором содержит гиперссылку на файл с соответствующей этому виду продукции информацией. Правый кадр на рис. 17 является своеобразной «мишенью» для размещения рекламируемой продукции и приобретает имя «INFO», по которому и будет происходить размещение информации. Примерный текст файла web21.html приводится ниже
<html>
<head>
<title>заголовок</title>
</head>
<body>
<p align= «center»>
Продукция консервного завода <font size= «+3»> Морепродукты </font>
<body>
</html>
Файл web22.Html, заполняющий левый кадр, может иметь следующий вид
<html>
<head>
<title>перечень продукции</title>
</head>
<body >
<p>
<a href="w1.html" target="info">Сельдь</a>
<p>
<a href="w2.html" target="info">Салака</a>
<p>
<a href="w3.html" target="info">Камбала</a>
</body>
</html>
Здесь используются ссылки на три файла: w1.html, w2.html, w3.html, которые в свою очередь могут быть размечены в html-формате примерно следующим образом
W1.Html
<html>
<head>
<title>информация о сельди</title>
<body>
<p>
Сельдь выловлена в Каспийском море </br>
Поставщик - предприятие ООО «Каспий»</br>
Цена - 3000 рублей за кг
</body>
</html>
W2.Html
<html>
<head>
<title> информация о салаке </title>
<body>
<p>
Салака выловлена в Балтийском море </br>
Поставщик - предприятие ЗАО «Балтика»</br>
Цена - 1500 рублей за кг
</body>
</html>
W2.Html
<html>
<head>
<title> информация о камбале</title>
<body>
<p>
Камбала выловлена в Черном море </br>
Поставщик - предприятие АДО «Чайка»</br>
Цена - 4500 рублей за кг
</body>
</html>
Таким образом, вторая страница работает как страница с «прокруткой» информации по каждому виду продукции, которая рекламируется на Web-сайте предприятия.
Третья страница должна представлять собой форму, представленную на рис. 18 в виде анкеты потребителя, содержащей указанные на ней элементы управления, соответственно:
• Ваша фамилия - text,
• Наименование продукции - select,
•
Ваша
оценка качества - radio,
• Ваши замечания - textarea.
Рис. 18. Интерфейс «Анкеты потребителя»
Текст программы для третьей страницы в HTML-формате может иметь примерно следующий вид
<html>
<head>
<title>анкета</title>
<body>
<form method= «post» action= «http://www.ivt.unibel.by»>
<h1> Анкета потребителя </h1>
<p>
Ваша фамилия
<p>
<input type= «text» name= «фамилия» size= «30»>
<p>
Наименование продукции
<p>
<select name= «продукция»>
<option value= «сельдь»>сельдь
<option value= «салака»>салака
<option value="камбала">камбала
</select>
<p>
Ваша оценка качества продукции
<p>
<input type= «radio» name= «bal» value=4>хорошее
<input type= «radio» name= «bal» value=3>удовлетворительное
<input type= «radio» name= «bal» value=2>плохое
<p>
Ваши комментарии
<p>
<textarea name= «комментарии» rows=5 cols=20></textarea>
<p>
<input type= «submit» value= «послать»>
<input type= «reset» value= «очистить»>
</form>
</body>
</html>
В программе каждому элементу управления, в том числе и самой форме, присвоены имена как значения свойства name для того, чтобы к ним можно было обращаться при обработке анкетной информации по программе, о чем будет идти речь в следующем разделе. Кроме того, здесь учтено, что переключатели <radio> должны иметь одинаковое значение параметра name, поскольку “включенным” всегда бывает только один из переключателей.