Изменение ширины столбца и высоты строки

Когда вы создаете таблицу, то ширина столбца оказывается равной самому широкому элементу этого столбца. При желании можно установить для столбца точную ширину. Вот здесь и пригодится параметр width. При работе с высотой используется оператор height.

Вертикальное и горизонтальное выравнивание внутри ячейки

Для задания выравнивания элементов внутри ячейки у тега < TH> или < TD> используются параметры:

· align – для задания горизонтального выравнивания внутри ячейки (возможные значения left, right, center )

· valign – для задания вертикального выравнивания внутри ячейки (возможные значения top , bottom, middle ).

Объединение ячеек

Для объединения группы ячеек в таблице используются специальные параметры: rowspan («растягивает» ячейку таблицы на указанное количество строк) и colspan (растягивает ячейку таблицы на указанное количество столбцов).

Задание 4.1. Используя различные цвета фона и текста, создайте HTML-документ с таблицей по образцу:

Задание 4.2. Создайте HTML-документ по образцу:

Примечание. Картинки и подписи к картинкам размещены в разных ячейках с различным выравниванием.

Лабораторная работа №5 «Формы в HTML-документе»

Понятие формы

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

После того как пользователь заполнит форму и нажмет кнопку, внесенные им данные посылаются на сервер и обрабатываются специальной программой CGI (Common Gateway Interface) или PHP (Personal Hypertext Processor). Таким образом, пользователь может интерактивно взаимодействовать с web-сервером через Интернет.

В одном документе может быть определено несколько форм для заполнения, но форма не должна содержать в себе другую форму.

Создание формы

Процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй – в создании на сервере программы, обрабатывающей данные этой формы.

Все формы создаются парными тегами < FORM > и < / FORM >, между которыми помещаются элементы формы:

< FORM method=" get/post" action=" URL программы" >

Элементы формы

< /FORM>

В параметре action указывается адрес (URL) программы, которая будет обрабатывать данные формы на сервере.

Параметр method определяет, каким путем данные будут посылаться на сервер:

· get: информация из формы добавляется в конец адреса, который был указан в параметре action. Опытные HTML-редакторы не рекомендуют использовать метод get.

· post: при использовании данного метода информация из формы пересылается не как часть адреса, а как содержимое запроса. Данный метод рекомендуется к использованию.

Примечание. В рамках данной лабораторной работы будут рассмотрены только основы создания интерфейса для отправки данных – то есть структура и основные элементы форм, а изучение программ обработки данных формы на сервере здесь опустим, поэтому параметры method и action тега < FORM> при выполнении заданий могут быть опущены.

Для задания элементов внутри формы используются теги < INPUT >, < TEXTAREA > и < SELECT >.

5.2.1. Элемент < INPUT>

Тег < INPUT > используется для ввода текстовой информации, пересылки файлов или управляющей информации.

Параметры тега < INPUT >:

· name – имя поля используется как уникальный идентификатор поля, по которому впоследствии программа обработки сможет получить данные, помещенные пользователем в это поле;

· size – определяет визуальный размер поля ввода на экране в символах (по умолчанию size=20);

· maxlength – определяяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер не позволяет ввести последующий символ. По умолчанию значение maxlength равно бесконечности;

· value – определяет начальное (по умолчанию) значение поля;

· type - определяет тип поля ввода. Может принимать значения:

- text - описывает однострочное поле ввода . Этот атрибут используется по умолчанию;

- password - отличается от атрибута text тем, что вводимое пользователем значение не отображается браузером на экране ;

- checkbox (флажок) - используется, когда необходимо ответить да или нет. В форме отображается в виде . Если в форме имеется несколько полей-флажков, то можно выбрать более одного поля. Каждое поле должно иметь свое имя (name) и значение (value). На сервере обрабатываются данные только у выбранных полей;

- radio - при использовании нескольких полей данного типа в одной форме пользователь может выбрать только одно поле. В форме отображается в виде . Поля должны иметь одинаковое имя (name), но разные значения (value). На сервер будет передано значение только выбранного поля;

- reset - данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут value может содержать текст, который будет высвечен на кнопке;

- submit - данный тип обозначает кнопку, при нажатии которой на сервере будет вызвана управляющая программа, описанная в параметре формы action. Атрибут value может содержать текст, который будет высвечен на кнопке;

- image - данный тип обозначает кнопку submit в виде рисунка. Путь к картинке указывается через атрибут src, а синтаксис совпадает с тегом < IMG >;

- file (файловое поле) - поле передачи файла на сервер.

5.2.2. Элемент < TEXTAREA>

Тег < TEXTAREA > используется для ввода большого количества текстовой информации (в несколько строк).

Атрибуты тега < TEXTAREA >:

· name - имя поля;

· cols - число колонок (символов) в текстовой области;

· rows - число видимых строк в текстовой области.

Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тегов < TEXTAREA > и < /TEXTAREA >.

5.2.3. Элемент < SELECT>

Элемент < SELECT > дает возможность пользователю выбрать значение из фиксированного списка значений. Обычно этот элемент представлен выпадающим списком.

Для определения списка пунктов используются теги < OPTION > между < SELECT > и < /SELECT >.

< SELECT ….>

< OPTION> …

< OPTION> …

…

< /SELECT>

Параметры тега < SELECT >:

· name - имя объекта SELECT;

· multiple - позволяет выбрать более чем одно наименование;

· single – из списка можно выбрать только один вариант (задан по умолчанию);

· size - определяет число пунктов, видимых для пользователя. По умолчанию список на экране отображается в виде выпадающего списка (видно одно наименование), если size> 1, то браузер представляет на экране обычный список (число - количество видимых наименований).

Параметры тега < OPTION >:

· selected – указывает, какой пункт выбран по умолчанию;

· value – значение, которое передается на сервер для обработки. По умолчанию значение value равно элементу < OPTION >.

Задание 5.1. Создайте HTML-документ с формой по образцу (см. ниже). Элементы формы выровняйте путем размещения их в ячейках таблицы.

Лабораторная работа №6 «Каскадные таблицы стилей»

⇐ Предыдущая1234567Следующая ⇒

Поделиться: