Мировые Информационные ресурсы - Коммуникации и связь - Скачать бесплатно
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:[email protected]” - пользовательская форма будет
отсылаться по указанному электронному адресу.
* Атрибут 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 - используется для хранения значения элемента
формы.
Пример:
Мы можем задать значение поля по
|
