Создание гиперссылки. Управление структурой web-документа через таблицы. Создание формы на странице сайта. Лабораторная работа Задание 1
1. Создайте три HTML-документа, отличающихся цветом фона. Первую страничку «старт» сделайте серого цвета. Вторую страничку «серединка» оформите голубым цветом, а третью страничку «финиш» - зеленым цветом. Сохраните их под именами: start.html, middle.html и finish.html соответственно.
2. Создайте гиперссылки с первого документа на второй, со второго – на первый и третий, с третьего – на второй.
3. Посмотрите, какие теги необходимо использовать для разметки этого задания:
<html><HEAD><TITLE>Серый цвет</TITLE></HEAD>
<body bgcolor="silver" text="yellow">
<h1>Страничка СТАРТ</h1> <hr>
<A href="middle.html"> СЕРЕДИНКА </A>
</body> </html>
<html ><HEAD><TITLE>Голубой цвет</TITLE></HEAD>
<body bgcolor="teal" text="nave">
<h1>Страничка СЕРЕДИНКА</h1> <hr>
[<A href=" start.html"> СТАРТ </A>] 
[<A href=" finish.html"> ФИНИШ </A>]
</body ></html>
<html ><HEAD><TITLE>Зеленый цвет</TITLE></HEAD>
<body bgcolor="green" text="yellow">
<h1>Страничка Финиш</h1> <hr>
<A href="middle.html"> СЕРЕДИНКА </A>
</body > </html>
4. Просмотрите созданные HTML-документы в браузере. Обратите внимание, какой тег отвечает за организацию ссылок в языке HTML? Назовите обязательный атрибут этого тега.
Задание 2
1. Создайте HTML-документ по предложенному образцу и сохраните его под именем table.html.
2. Таблица занимает 70 % окна браузера и прижата к левому краю (рисунок 29).
3. Внешняя рамка – зеленая, шириной 10 pt. Внутренние границы ячеек – красные.
4. Посмотрите, какие теги необходимо использовать для разметки этого задания:
<h1>ВГКС</h1>
<h3>предлагает курсы по направлениям</h3>
<TABLE border="10" width="70%" bordercolor=green>
<tr>
<TH>Курсы</TH>
<TH>Аудитория</TH>
<TH>Время занятий</TH>
</tr>
<tr>
<TD bordercolor=red rowspan="3" valign="center">Создание сайта за один день (Joomla)</TD>
<TD bordercolor=red align="center">318</TD>
<TD bordercolor=red align="center">14<sup>15</sup></TD>
</tr>
<TD bordercolor=red align="center">321</TD>
<TD bordercolor=red align="center">10<sup>15</sup></TD>
</tr>
</tr>
<TD bordercolor=red align="center">319</TD>
<TD bordercolor=red align="center">16<sup>10</sup></TD>
</tr>
</TABLE>
Рисунок 29 – Просмотр HTML-документа в браузере
5. Просмотрите созданный HTML-документ в браузере. Обратите внимание, какой тег используется для создания таблиц. Какие теги используются для создания строки и столбца таблицы?
Задание 3
1. Создайте форму по образцу (рисунок 30) и сохраните под именем form.html. Для оформления формы используйте таблицу.
2. Список языков выполните с множественным выбором.
3. В многострочном текстовом поле добавьте текст, который будет отображаться (его можно стереть).
Рисунок 30 – Просмотр HTML-документа в браузере
4. Посмотрите, какие теги необходимо использовать для разметки этого задания:
<FORM>
<TABLE width=50% align=center cellpadding=10 rules=none>
<TR>
<TD></TD>
<TD align=left><strong>Форма регистрации</strong></TD>
</TR> <TR>
<TD align=right>Имя</TD>
<TD><INPUT TYPE=text SIZE=30 NAME=fn></TD>
</TR> <TR>
<TD align=right>Адрес</TD>
<TD><INPUT TYPE=text SIZE=30 NAME=adres></TD>
</TR>
<TR>
<TD align=right>Пароль</TD>
<TD><INPUT TYPE=password SIZE=30 NAME=pas></TD>
</TR> <TR>
<TD align=right>Подтверждение пароля</TD>
<TD><INPUT TYPE=password SIZE=30 NAME=pas1></TD>
</TR>
<TR>
<TD align=right>Пол</TD>
<TD><INPUT TYPE=radio NAME=gender VALUE=male
checked>мужской
<INPUT TYPE=radio NAME=gender
VALUE=female>женский</TD>
</TR>
<TR valign=top>
<TD align=right>Владение языками</TD>
<TD><SELECT NAME="selection" size=5 multiple>
<OPTION VALUE="lan1" selected>Английский
<OPTION VALUE="lan2">Немецкий
<OPTION VALUE="lan3">Французский
<OPTION VALUE="lan4">Испанский
<OPTION VALUE="lan5">Китайский
<OPTION VALUE="lan6">Японский
</SELECT>
</TD> </TR>
<TR valign=top>
<TD align=right>Ваши пожелания</TD>
<TD><textarea cols="30" rows=3 wrap=virtual>Можно использовать дистанционное обучение</textarea></TD>
</TR>
<TR>
<TD></TD>
<TD align=right><INPUT align=right TYPE=submit
VALUE=Регистрация>
<INPUT align=right TYPE=reset VALUE=Сброс></TD>
</TR> </TABLE> </FORM>
5. Просмотрите созданный HTML-документ в браузере. Обратите внимание, какой тег-контейнер применяется для создания формы. С помощью одиночного тега <INPUT> создаются элементы управления в форме. Парный тег <textarea> используется, если необходимо определить многострочные текстовые поля. Парный тег <SELECT> используется для создания в форме раскрывающихся списков.