| |||||
МЕНЮ
| Мировые Информационные ресурсы<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 |
ИНТЕРЕСНОЕ | |||
|