Задание 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¹⁵</TD>

</tr>

<TD bordercolor=red align="center">321</TD>

<TD bordercolor=red align="center">10¹⁵</TD>

</tr>

</tr>

<TD bordercolor=red align="center">319</TD>

<TD bordercolor=red align="center">16¹⁰</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> используется для создания в форме раскрывающихся списков.