<td><a href=link4.html>Четвертый элемент меню</a></td> </tr>
</table>
</body>
</html>
10.1. Типовое задание
Пример 1. Постройте простую таблица с заголовком следующего вида
(рис. 10.7).
Рис. 10.7. Простая таблица с заголовком
Фрагмент алгоритма представлен ниже.
<html>
<head>
<style type="text/css"> Table {
border: 1px solid black; /* Рамка вокруг таблицы */
text-align: center |
/* Выравнивание текста ячеек по центру */ |
} |
|
TH { |
|
background: black; |
/* Цвет фона заголовка */ |
color: white |
/* Цвет текста заголовка */ |
} |
|
TD. title { |
|
text-align: left |
/* Выравнивание по левому краю*/ |
}
</style>
</head>
<body>
<table width=300 border=0 cellpadding=4 cellspacing=0> <tr>
<th> </th>
<th>2007</th>
<th>2008</th>
118
<th>2009</th>
</tr>
<tr>
<td class=title>Нефть</td> <td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td class=title >Газ</td> <td>33</td> <td>57</td> <td>68</td>
</tr>
</table>
</body>
</html>
Пример 2. Постройте таблицу с цветным заголовком следующего вида
(рис. 10.8).
Рис. 10.8. Таблица с цветным заголовком
Фрагмент алгоритма представлен ниже.
<html> |
|
<head> |
|
<style type="text/css"> |
|
Table { |
|
border: 1px solid black; |
/* Рамка вокруг таблицы */ |
text-align: center; |
/* Выравнивание текста ячеек по центру */ |
119
border-collapse: collapse |
/* Линия между ячейками отображается как |
одна */ |
|
} |
|
TH { |
|
background: darkblue; |
/* Цвет фона заголовка */ |
border-bottom: 1px solid white; |
/* Линия под заголовком */ |
color: white |
/* Цвет текста заголовка */ |
} |
|
TD { |
|
border-bottom: 1px dashed black /* Пунктирная линия под ячейками */
} |
|
TD. title { |
|
text-align: left; |
/* Выравнивание по левому краю*/ |
font-weight: bold; |
/* Жирное начертание */ |
background: green |
/* Цвет фона левой колонки */ |
}
</style>
</head>
<body>
<table width=300 border=0 cellpadding=4 cellspacing=0> <tr>
<th> </th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
</tr>
<tr>
<td class=title>Нефть</td> <td>43</td>
<td>51</td>
120
<td>79</td>
</tr>
<tr>
<td class=title >Газ</td> <td>33</td> <td>57</td> <td>68</td>
</tr>
</table>
</body>
</html>
10.2.Контрольные вопросы
1.Атрибуты форматирования заголовков в CSS.
2.Стилевые атрибуты для формирования границ таблицы.
3.Фиксация высоты таблицы и добавление полос прокрутки.
4.Создание меню с помощью стилей.
5.Подсвечивание фона ячеек таблицы.
10.3.Контрольные задания
Постройте таблицы следующих видов.
Вариант 1 и 4
Задайте заголовок таблицы, создав новый класс с именем caption. Выровняйте его по правому краю.
Создайте таблицу с чередующимися колонками (цвет фона четных и нечетных колонок различный), используя два класса: odd – для нечетных колонок, идущий сразу после колонки с заголовками строк и even – для четных колонок. Слева от каждой колонки установите пунктирную линию, чтобы разделение содержимого ячеек происходило не только по цвету, но и с помощью границы между ними.
121
Вариант 2 и 5
Задайте заголовок таблицы, создав новый класс с именем caption. Выровняйте его по левому краю.
Создайте таблицу с цветным заголовком. Левую колонку выделите с помощью фона, а строки таблицы отделите друг от друга пунктирной линией. Примените свойство border-collapse, чтобы пунктирная линия в последних ячейках не совмещалась с нижней границей таблицы, т.е. линия между ячейками отображалась как одна.
Вариант 3 и 6
Задайте заголовок таблицы, создав новый класс с именем caption. Выровняйте его по центру.
Создайте таблицу с чередующимися строками (цвет фона четных и нечетных строк различный), используя класс even, который добавляется к тегу TR для всех строк через одну. Цвет фона остальных строк установите в селекторе Body.
122
Лабораторная работа № 1 1
ПОСТРОЕНИЕ ФОРМ
Цель работы: приобрести навыки создания форм различных типов.
Методические указания
Формы (формуляры) превращают WWW в интерактивную среду. Они реализуют простейший способ связи пользователя и сервера.
Форма − это набор полей для ввода текста, командные кнопки и флажки, содержимое которых возвращается серверу по указанию пользователя. Сервер в дальнейшем обрабатывает информацию и, если необходимо, возвращает пользователю ответы.
В дальнейшем рассмотрим использование некоторых тегов для создания форм и на фрагментах одного алгоритма виды таких форм.
Тег < Input > позволяет создавать различные элементы управления в форме в зависимости от своих атрибутов type, value, checked, size и name. Значения атрибута type представлены в табл. 11.1.
|
Таблица 11.1 |
|
Функциональное назначение |
Значение атрибута |
|
|
Создание поля ввода для текстовых данных |
type = "text" |
|
type = "password" |
Создание строки для ввода пароля |
type = "checkbox" |
Создание флажков |
type = "radio" |
Формирование переключателей |
type = "submit" |
Описание кнопки, нажатие на которую подтверждает |
|
ввод информации в форму |
|
Описание кнопки для отмены ввода данных в форму |
type = "reset" |
|
type = "image" |
Построение кнопки с рисунком |
type = "file" |
Средство выбора файла для присоединения к форме |
Атрибут value используется для определения произвольного текста в поле ввода (type = "text") или для надписи на кнопке (type = "submit").
Атрибут checked определяет переключатель, требуемый по умолчанию.
123
Атрибут size описывает длину поля ввода. Атрибут name — имя поля (элемента управления).
Пример 1. Построение элементов управления различного вида с использованием тега < Input > (рис. 11.1).
Рис. 11.1. Вид построенной формы
Код в HTML для построения элементов форм представлен ниже.
<Html>
<Head>
<Тitle>Создание форм </title>
<Meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head>
<body bgcolor=navy text=lime> <Hr color= "red">
<Center>
<Font color=red> <Н2>ПОЛЯ ВВОДА <Вr> ЭЛЕМЕНТ INPUT</h2> </font>
</center>
<H3> Ввод текстовой строки </h3> <Input type="text" size=50>
124
<H3> Ввод пароля </h3> <Input type="password"> <H3> Флажки </h3>
<Input type="checkbox " name = "F001" checked> <Input type="checkbox" name="F001 ">
<H3> Переключатели </h3>
<Input type="radio " name="S001" value="Первы й"> <Input type="radio " name="S001" value="Второй "> <Input type="radio " name="S001 " value="Третий " checked> <H3> Кнопка подтверждения ввода </h3>
<Input type="submit" value="submit"> <H3> Кнопка с изображением </h3> <Input type="image" src= "fon01.gif"> <H3> Кнопка очистки формы </h3> <Input type= "reset" value="reset"> <H3> Файл </h3>
<Input type="file" name="photo" accept=" image/*"> <Hrcolor="red">
</body>
</html>
Для создания списка или меню на гипертекстовой странице применяется тег <Select> </select> с дополнительным внутренним тегом <Option>. Тег <Option> предназначен для создания пунктов списка и может иметь два атрибута: selected определяет пункт меню, выбираемый по умолчанию, а атрибут value требуется для обработки данных на стороне сервера.
Пример 2. Построение элементов управления в формах с помощью тега
< Select > (рис. 11.2).
ЭЛЕМЕНТSELECT
Первый
Второй
Третий
Рис. 11.2 Элемент управления в форме
125
<Center>
<Font color=red><H2>ЭЛЕМЕНТ SELECT </h2> </font>
</center> <Select multiple>
<Option value=a> Первый <Option value=b> Второй <Option value=c>Tpemий </select>
Пример 3. Построение элементов управления в формах с помощью тега
< Select > (рис. 11.3).
Выпадающее меню
Рис. 11.3 Выпадающее меню
<H3> Выпадающее меню </h3> <Select>
<option>первый </option> <option>второй </option> <option>mpemuй </option> </select>
Тег <Textarea> </textarea > описывает специальные области для ввода и просмотра текста. Для указания количества строк и столбцов используются атрибуты rows и cols соответственно.
Пример 4. Формирование области для ввода текста из 6 строк и 40 столбцов (рис. 11.4).
126
ЭЛЕМЕНТ TEXTAREA
Рис. 11.4. Сформированная область для ввода текста
Фрагмент построения области в коде HTML:
<Center>
<Font со1оr=red><Н2>ЭЛЕМЕНТTEXTAREA </h2> </font>
</center>
<Textarea rows=6 cols=40>
Область для ввода текста
</textarea>
Пример 5. Построение кнопки с надписью и рисунком с помощью тегаов <
Button > < /button > и < Img >.
Фрагмент в коде HTML:
<Center>
<Font color=red><H2>KHOIIKA С НАДПИСЬЮ И РИСУНКОМ</H2> </font>
</center>
<Button name="submit" value="submit" type="submit"> Pencil<lmg src="fon01.gif" аlt="Рисунок"></button>
Пример 6. Построение группы полей (рис. 11.5).
ГРУППА ПОЛЕЙ
Заголовок группы Имя: Фамилия:
Телефон:1
Фрагмент в коде HTML:
Рис. 11.5. Группа полей
127