бесплатно рефераты
 

Мировые Информационные ресурсы

<LI>def</LI>

<LI>ghi</LI>

</UL>

</UL>

Отобразиться:

* abc

* def

* ghi

Браузер будет делать очередной отступ слева.

Таблицы.

1. Парный дескриптор <TABLE>…</TABLE>

В его контейнере должны быть сформированы элементы таблицы

(ячейки) в которых и будет информация.

2. Парный дескриптор <TR>…</TR> - формирует строку таблицы.

3. Парный дескриптор <TD>…</TD> - формирует ячейку внутри строки.

Пример:

<TABLE>

+-------------------------+

| <TD>1</TD> | <TD>2</TD> |

|------------+------------|

| <TD>3</TD> | <TD>4</TD> |

+-------------------------+

<TR> <TR>

<TR> <TR>

</TABLE>

Атрибуты дескриптора <TABLE>:

* Атрибут WIDTH - определяет ширину таблицы (в процентах или

пикселях).

Пример:

<TABLE WIDTH=100% или WIDTH=200>

* Атрибут HEIGHT - высота (принимает такие же значения, как и

атрибут WIDTH).

* Атрибут ALIGN - выравнивание таблицы по ширине относительно

краев окна.

* Атрибут BORDER - определяет ширину рамки (если значение

данного атрибута 0, то рамки отсутствуют).

* Атрибут bgcolor - для формирования фона таблицы с помощью

цвета.

* Атрибут background - для формирования фона таблицы с

помощью картинки.

* Атрибут cellpadding - для указания отступов от краев ячейки

(в пикселях).

* Атрибут cellspacing - расстояние между ячейками.

0x08 graphic

Обычная таблица

+---------+

|----+----|

+---------+

0x08 graphic

0x08 graphic

0x08 graphic

0x08 graphic

* Атрибут bordercolor - цвет границ ячеек (рамки).

Атрибуты дескриптора <TR>:

1. Атрибут ALIGN - выравнивание текста в ячейках.

2. Атрибут VALIGN - определяет вертикальное выравнивание

текста в ячейках.

Возможные значения атрибута VALIGN:

* =TOP - по верху.

* =MIDDLE - по центру.

* =BOTTOM - по нижнему краю ячейки.

3)Атрибут bgcolor - для указания фона строки.

Атрибуты дескриптора <TD>:

* Атрибут ALIGN.

* Атрибут VALIGN.

* Атрибут bgcolor.

Вышеперечисленные атрибуты действуют так же, как для дескриптора

<TR>.

Дополнительно атрибуты:

* Атрибут COLSPAN - объединение ячеек, находящихся в одной

строке. Значение атрибута равно количеству близлежащих ячеек

находящихся в одной строке, которые будут объединены.

Пример:

<TABLE>

+-------------------------+

| <TD COLSPAN=2>1</TD> |

|-------------------------|

| <TD>3</TD> | <TD>4</TD> |

+-------------------------+

<TR> </TR>

<TR> </TR>

</TABLE>

* Атрибут ROWSPAN - объединение ячеек, находящихся в одном

столбце. Значение атрибута указывает количество близлежащих

ячеек находящихся в одном столбце, которые будут объединены.

Пример:

<TABLE>

+--------------------------------------------+

| |<TD>2</TD>| |

| <TD ROWSPAN=2>1</TD> |----------+----------|

| | |<TD>4</TD>|

|----------------------| |----------|

+--------------------------------------------+

<TR> </TR>

<TR> </TR>

</TABLE>

Форматирование текстовых фрагментов HTML документа

Кроме ширины и высоты таблицы в целом можно регулировать ширину и

высоту ячеек (то есть использовать такие же атрибуты в

дескрипторе <TD>, в пикселях и в процентах).

Если они не указаны, то браузер выравнивает размер ячейки по

ширине текста.

Таблица является наиболее часто употребляемым инструментом в Web

дизайне, позволяющим точно разместить на таблице отдельные

мультимедийные элементы. Подобно спискам, таблицы могут быть

вложены в другие таблицы.

Пример:

+---------+

|----+----|

+---------+

Чтобы добавить такую таблицу в контейнере дескриптора ячейки

пишут следующее:

<TD>

<TABLE>

<TR><TD></TD><TD></TD></TR>

<TR><TD></TD><TD></TD></TR>

</TABLE>

<TD>

Фон отдельных ячеек могут отображать не все браузеры.

Размещение графических изображений в HTML документе

Для размещения изображений используются в основном два

графических формата:

* JPG

* GIF

1.Формат JPG.

Плюсы - Графическое изображение, сохраненное в данном формате,

имеют наименьший объем.

Минусы - при сохранении происходит довольно сильное сжатие

картинки, а при сжатии изображение теряет качество и наблюдается

эффект пикселизации.

Пример:

Картинка сжалась в девять раз.

+---+

|-++|

|-++|

|---|

+---+

Девять пикселей заменяются одним пикселем среднего цвета.

Изображение сохраняется в формате .jpg в том случае, если

необходимо сохранить максимальное количество оттенков.

2.Формат GIF.

При сохранении картинок в этом формате также происходит сжатие,

но пикселизации не происходит.

Минусы - изображение сохраняется с помощью ограниченного

количества цветов (обычно 256 цветов) => изображение будет не

очень красочным.

С помощью формата .gif сохраняются навигационные кнопки,

навигационные графические элементы и фоновые изображения.

Для внедрения изображения используется одиночный дескриптор

<IMG>.

* Атрибут SRC - основной атрибут. Он указывает путь и имя

файла, в котором содержится графический элемент.

Пример:

<IMG SRC=1.gif>

* Атрибут WIDTH - ширина внедряемого изображения (в пикселях).

* Атрибут HEIGHT - высота внедряемого изображения (в

пикселях).

* Атрибуты VSPACE, HSPACE - устанавливают отступ текста от

внедряемого в HTML документ изображения.

* Атрибут BORDER - задает толщину рамки вокруг изображения.

* Атрибут ALT - задает альтернативный текст, который

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

Пример:

ALT=”Здесь была картинка”.

Обычно атрибут используют при размещении навигационных

изображений (ссылок), а так же при размещении изображений, о

которых надо дать знать поисковой системе.

* Атрибут ALIGN - выравнивание.

Возможные значения:

=LEFT, CENTER, RIGHT.

Добавляются значения: =TOP, MIDDLE, BOTTOM.

* Если не используются атрибуты WIDTH, HEIGHT, то изображение

внедряется оригинального размера.

Если используется только один атрибут, например HEIGHT, то

браузер уменьшит или увеличит ширину пропорционально изображению.

Использование гипрессылок

Гипрессылка - это URL адрес того документа, который привязан к

одному из элементов Web страницы (текстовому или графическому).

Для внедрения ссылок в HTML документ применяется парный

дескриптор <A>…</A>.

Пример:

<A HREF=”http://www.kirov.ru/price.htm”>

Все, что находится внутри контейнера, называется элемент привязки

(текстовый фрагмент или графический элемент).

</A>

В результате на экране отображается подчеркнутый выделенный

текст.

Пример привязки к изображению:

<A>

<IMG SRC=”1.gif”>

</A>

Изображение, к которому привязывается ссылка, называется

навигационной картинкой (изображением).

В случае привязки к картинке ссылки вокруг картинки формируется

рамка (чаще всего синего цвета). Чтобы ее убрать, необходимо

указать:

<IMG border=”0”>

Значением атрибута HREF может быть абсолютный адрес (URL адрес)

или относительный адрес (имя файла, в котором хранится HTML

документ, указываемый с помощью ссылки). Например, HREF=”1.htm”.

Браузер будет искать данный документ в текущей папке, то есть в

той, в которой находится активный документ.

Исключение составляет дескриптор <BASE>

<BASE URL=”http://www.kirow.ru”>

В случае использования данного дескриптора в заголовке HTML

документа (то есть контейнера HEAD)относительные адреса

(указанные в виде значений HREF) будут восприниматься браузером

не относительно текущей папки, а относительно URL адреса,

указанного в значении атрибута URL.

Использование дескриптора <A>…</A>

для указания отдельных элементов HTML документов.

1. Атрибут NAME используется для указания места, до которого

необходимо пролистать

HTML документ.

Пример:

<A NAME=”ZDES”>

</A>

В этом случае внутри дескриптора <A> находится якорь - это

элемент HTML документа, который может быть адресован с помощью

гиперссылки. Якорь не выделяется браузером.

Для того чтобы с помощью ссылки адресоваться к якорю надо после

URL адреса добавить # и указать имя якоря.

Пример:

<A HREF=”http://www.kirov.ru/price.htm#1>

Название якоря может формироваться без указания URL адреса HTML

документа.

Пример:

<A HREF=”#1”>

Данный якорь будет искаться в текущей папке.

При использовании абсолютного адреса необходимо использовать

аббревиатуру http (например, http://www.kirov.ru).

HTML форма

Форма (в документе HTML) - это средство, позволяющее организовать

диалог пользователя и Web сайта.

Основные виды HTML форм:

1. Кнопки.

2. Списки.

3. Текстовые поля.

4. Переключатели (флажки).

5. Радиокнопки.

Элементы управления HTML форм позволяют пользователю вводить

информацию с помощью браузера и отправлять её на обработку Web

сайту.

Для обработки форм, заполненных пользователем, на Web сайте

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

программа формирует HTML код.

Группа дескрипторов, формирующих HTML форму.

1. Парный дескриптор <FORM> - задает свойство формы и содержит в

своем контейнере элементы этой формы.

Атрибуты:

* Атрибут NAME - для задания имя формы.

Например, NAME=”anketa”.

! Каждый элемент HTML формы, как и сама форма, должны быть

обязательно поименованы.

* Атрибут METHOD - определяет, каким способом HTML форма будет

отправляться к программе-обработчику.

Есть два варианта:

1)=POST - используется чаще всего.

2)=GET - используется для отправки HTML формы с помощью URL

адреса.

(По умолчанию задается метод GET).

* Атрибут ACTION - задает местоположение

программы-обработчика. Значением атрибута служит адрес

(абсолютный или относительный).

Например,

ACTION=”executive.php” - файл, в котором хранится

программа-обработчик.

Или ACTION=“mailto:a@kirov.ru” - пользовательская форма будет

отсылаться по указанному электронному адресу.

* Атрибут ENCTYPE - тип кодировки.

Варианты:

=”text/htm/”

=”text/plain” - обычный текст без элементов форматирования.

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

1.Текстовые поля.

Бывают двух видов:

1. Многострочное. Парный дескриптор <TEXTAREA>…</TEXTAREA>

Атрибуты:

* Атрибут NAME.

* Атрибут ROWS - высота поля в строчках.

* Атрибут COLLS - ширина поля в символах.

Размещенный в контейнере дескриптора <TEXTAREA> текст будет

отображаться внутри этого текстового поля (по умолчанию).

0x01 graphic

2. Однострочное. Формируется с помощью одиночного дескриптора

<INPUT>.

(Данный дескриптор также используется для переключателей,

радиокнопок).

Атрибуты:

* Атрибут NAME.

* Атрибут TYPE - задает тип создаваемого элемента. Для

создания однострочного поля значение атрибута TYPE=”Text”.

* Атрибут SIZE - ширина поля в символах.

* Атрибут MAXLENGTH - максимальная длина вводимого текста.

* Атрибут VALUE - используется для хранения значения элемента

формы.

Пример:

Мы можем задать значение поля по умолчанию VALUE=”Например, пошел

дождь”.

0x01 graphic

2.Переключатель или флажок.

0x01 graphic

Формируется с помощью дескриптора <INPUT>, атрибут TYPE

которого принимает значение TYPE=”CHECKBOX”.

<INPUT TYPE=”CHECKBOX”>

У данного дескриптора имеются также атрибуты:

* Атрибут NAME.

* Атрибут CHESKED - если он указан, то флажок будет

установлен.

3.Радиокнопка.

(Выглядит как жирная точка).

Достигается с помощью двух дескрипторов <INPUT>, имеющих

одинаковое имя. Например, NAME=”1”.

<INPUT TYPE=”RADIO” NAME=”1” VALUE=”GENAT”>

<INPUT TYPE=”RADIO” NAME=”1” VALUE=”XOLOST”>

0x01 graphic

0x01 graphic

4.Текстовое поле типа пароль.

<INPUT TYPE=”PASSWORD”>

Данный дескриптор формирует текстовое поле типа пароль. Работает

также как и однострочное текстовое поле, но значение отображается

в виде звездочек.

0x01 graphic

5.Кнопка.

* <INPUT TYPE=”BUTTON”>

Используется для вызова клиентских скриптов (сценариев).

Выглядит так:

0x01 graphic

* Кнопка созданная с помощью:<INPUT TYPE=”SUBMIT”

VALYE=”Пуск”> предназначена для отправки формы на обработку

в Web сайт.

Выглядит так:

0x01 graphic

* Кнопка сброса формы.

Предназначена для установления первоначального значения формы.

<INPUT TYPE=”RESET” VALUE=”Сброс”>

Выглядит так:

0x01 graphic

6.Списки выбора (меню) - это многоуровневая конструкция.

Парный дескриптор < SELECT >…</ SELECT > (дескриптор первого

уровня) формирует свойства меню.

Атрибуты:

* Атрибут NAME.

* Атрибут SIZE.

* Если данный атрибут равен единице, меньше единицы или

не указан, то формируется выпадающее меню.

Выглядит так:

0x01 graphic

* Если SIZE больше единицы, то формируется прокручиваемый

список.

Выглядит так:

0x01 graphic

Внутри контейнера дескриптора<SELECT> находятся элементы меню,

которые формирует одиночный дескриптор <OPTION> (дескриптор

второго уровня).

Пример:

<SELECT NAME=”Menu”>

<OPTION>Файл

<OPTION>Печать

</SELECT>

Ширина меню определяется максимальным значением элемента меню.

* Атрибут MULTIPLE - для выбора нескольких разных опций.

Советы преподавателя:

1. Размещать каждый дескриптор с новой строки.

2. Перед большими конструкциями делать интервал.

HTML форма отсылается на обработку Web сайту в виде записей,

которые выглядят следующим образом:

Имя элемента формы(Name) = значение(Value).

Для списков, переключателей, кнопок, радиокнопок обязательно

задавать значение атрибута Value. В остальных случаях значение

задает пользователь (во время ввода). В случае если при

формировании элементов формы типа переключатель (флажок) атрибут

Value не используется, в качестве значения будет формироваться

предлог On.

Для списков таковым значением по умолчанию будет назначаться

текст, расположенный сразу после дескриптора <OPTION>.

Если вы используете элемент Web формы для передачи информации Web

сайту, при передаче формы на обработку должна появиться запись:

Имя элемента формы = его значение.

История создания Internet

Страницы: 1, 2, 3, 4, 5


ИНТЕРЕСНОЕ



© 2009 Все права защищены.