Тэги в теле документа
Тэги в теле документа
BODY
Начало и конец тела HTML-документа. Между начальным и конечным тэгами содержится текст документа, изображения и таблицы.
Параметры:
BACKGROUND - изображение для "заливки" фона (путь к файлу с картинкой в формате gif или jpg ).
BGCOLOR - цвет фона документа.
TEXT - цвет текста в документе.
LINK - цвет гиперссылок в документе.
ALINK - цвет подсветки гиперссылок при нажатии.
Рекомендуемые материалы
VLINK - цвет просмотренных гиперссылок
<HTML>
<BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" >
...
Текст документа.
...
</BODY>
</HTML>
Текстовые блоки
Элементы, разбивающие текст документа на блоки (параграфы, абзацы и главы, разделительные горизонтальные линии и символы возврата каретки).
| H1,H2,…,H6 | Заголовки текста |
| P | Разметка параграфов |
| DIV | Отделяет блок HTML-документа от остальной его части |
| ADDRESS | Почтовый адрес |
| BLOCKQUOTE | Цитата |
| BR | Перевод строки |
| HR | Горизонтальная разделительная линия |
| PRE | Блок предварительно отформатированного текста |
Тэги H1, H2 ,…, H6, P, DIV
Параметры:
ALIGN - выравнивание содержимого. Значения: left, right, center, [justify].
Пример 1. Оформление заголовков. Тэги H1, H2, …, H6
<H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2>Заголовок поменьше</H2>
...
<H6>Малюююсенький такой заголовочек</H6>
Пример2. Использование параграфов. Тэг P.
<P ALIGN="center">Это центрированный параграф.<BR>
Текст располагается в центре окна браузера</P>
<P ALIGN="right">А это параграф, выровненный по правому краю.</P>
Пример 3. Разбиение документа на части. Тэг DIV.
...Текст документа...
<DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...
Форматирование текста
Элементы для оформления и смыслового выделения текста - подчеркивания, изменения шрифта, выделения курсивом, цитирования.
| BASEFONT | Основной шрифт |
| FONT | Цвет, размер и тип шрифта текста |
| I | Курсив |
| B | Полужирный |
| U | Подчеркнутый |
| S,STRIKE |
|
| SUP | Верхний индекс |
| SUB | Нижний индекс |
| CODE, SAMP | Формула, программный код |
FONT
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.
Параметры:
SIZE - определяет размер шрифта. Возможные значения:
- целое число от 1 до 7;
- относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.
COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
FACE - определяет используемый шрифт.
|
Увеличенный красный шрифт Моноширинный фиолетовый текст 3 размера
Гиперссылки <A>
Элемент для создания и использования гипертекстовых ссылок .
Параметры:
HREF - гипертекстовая ссылка. Возможные значения: http://... ; ftp://...; mailto:... ; news:.. ; telnet://...;wais://...; gopher://... ;
NAME - возможный объект для ссылки.
Например:
<A NAME="part">Раздел1</A>
<A HREF="document.html#part">Раздел1</A>
TARGET – отображение окна(фрейма), на которое указывает ссылка.
_self – в текущем фрейме;
_parent – в родительском фрейме (включающем текущий);
_top - в окне-родителе;
_blank - в новом окне
Примеры использования тэга A
Пример 1. Использование параметра NAME:
<A NAME="history">История бодибилдинга</A>
...
<A NAME="now">Спорт глазами современника</A>
...
Вернуться к разделу<A HREF="#history">истории</A>
Пример 2. Использование параметра HREF:
<A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A>
<A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A>
...
Пример 3. Создадим ссылку для письма с указанием кучи параметров
<A HREF="mailto:green@igf.ru?subject=Приглашение &cc=bg@microsoft.com&body=Приезжай на вечеринку.">
Отправить приглашение </A>.
<!-- или просто письмо : -->
<A HREF="mailto:green@igf.ru?subject=Привет">авторам</A>.
СПИСКИ
| UL | неупорядоченный список |
| OL | упорядоченный список |
| LI | пункт меню внутри элементов OL или UL |
| MENU, DIR | неупорядоченный список, подобный UL |
| DL | список определений |
| DT | термин в списке определений внутри элемента DL |
| DD | определение термина внутри элемента DL |
Тэги UL, OL, LI
1. UL – неупорядоченный (маркированный) список
2. OL – упорядоченный (нумерованный) список.
Параметры:
START - определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
TYPE - определяет стиль нумерации пунктов. Может иметь значения:
"A" - заглавные буквы A, B, C ...
"a" - строчные буквы a, b, c ...
"I" - большие римские числа I, II, III ...
"i" - маленькие римские числа i, ii, iii ...
"1" - арабские числа 1, 2, 3 ...
3. LI – пункт в списке
Параметры:
VALUE - изменяет порядок нумерации элементов списка.Используется только если элемент LI находится внутри элемента OL.
| HTML-код | Результат |
| <OL TYPE="A" START="2">Список | Список
|
ОБЪЕКТЫ
Объекты - это графические и мультимедийные вставки в HTML-документ, такие как картинки, Java-апплеты, звуки, музыка, VRML.
| IMG | ИЗОБРАЖЕНИЯ |
| EMBED | РАЗЛИЧНЫЕ ОБЪЕКТЫ |
| NOEMBED | если браузер не поддерживает EMBED |
| APPLET | АППЛЕТЫ |
| PARAM | ПАРАМЕТРЫ АППЛЕТОВ |
Изображения <IMG >
Параметры:
SRC - адрес файла с изображением.
HEIGHT и WIDTH - ширина и высота изображения.
HSPACE и VSPACE - отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа.
ALIGN - способ выравнивания.
Значения: left, right, top, texttop, middle, absmiddle, bottom, baseline ,absbottom
NAME - уникальное имя изображения
ALT – текст вместо изображения
BORDER - ширина рамки
LOWSRC - адрес файла с альтерн. изображением более низкого качества
Пример 1.
<IMG src="img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.
Пример 2.
<IMG SRC=“img/girl.jpg” WIDTH=“30” HEIGHT=“70” BORDER=“2” 
ALT=“Девушка”>
ТАБЛИЦЫ
| TABLE | Таблица |
| CAPTION | заголовок таблицы |
| TR | новый ряд (строка) ячеек таблицы |
| TD, TH | ячейка с данными в текущей строке |
Пример.
| HTML-код | Результат | ||||
| <TABLE BORDER> </TR> <TR> </TR> |
|
TABLE
Параметры:
ALIGN - способ горизонтального выравнивания. Возможные значения: left, center, right. VALIGN - способ вертикального выравнивания. Возможные значения: top, bottom, middle.
BORDER - ширина рамки.
CELLPADDING - расстояние между рамкой каждой ячейки таблицы и содержимым
CELLSPACING - расстояние между границами соседних ячеек.
WIDTH и HEIGHT – ширина высота таблицы
BGCOLOR - цвет фона ячеек таблицы.
BACKGROUND – фоновый рисунок. В качестве значения необходимо указать URL рисунка.
TD и TH
TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
Параметры:
ALIGN, VALIGN, WIDTH, HEIGHT, BGCOLOR, BACKGROUND
COLSPAN - количество объединенных столбцов
ROWSPAN - количество объединенных рядов.
NOWRAP –запрет автопереноса слов.
Пример.
| HTML-код | Результат | |||
| <TABLE BORDER> </TR> <TR> </TR> |
| |||
| <TABLE BORDER> <TD ROWSPAN=“2”>B1</TD> </TR> <TR> </TR> |
|
Формы
С помощью описанных ниже элементов вы можете создавать заполняемые анкеты, опросники и различные поля для ввода текста пользователем с возможностью последующей отправки заполненной формы на ваш сервер.
Элементы для создания форм:
| ||||||||||
| Пример использования формы | ||||||||||
| Начало формы имя Комментарий Сайт вам понравился Когда вы планируете снова посетить сайт Завтра Через неделю Через месяцНикогда Оцените сайт отлично хорошо средне плохо ужасно Конец формы |
Форма <FORM>
Используется для создания заполняемой формы. Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.
Параметры:
NAME - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.
ACTION - обязательный параметр. Определяет URL, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к скрипту сервера, обслуживающему данную форму.
METHOD - определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST.
ENCTYPE - определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".
TARGET - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре TARGET элемента A.
|
Начало формы
Конец формы
Поле формы <INPUT>
Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM.
Параметры:
NAME - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов (параметр TYPE - cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.
TYPE - определяет тип поля для ввода данных. По умолчанию - это "text". Возможные значения:
text - создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH.
textarea - создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA
file - дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT.
password - создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.
checkbox - создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.
radio - создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).
submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется.
image - создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов ".x" в случае абсциссы, и ".y" в случае ординаты.
reset - создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера.
hidden - поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.
button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.
ACCEPT - конкретизирует тип файла. Используется только совместно с пара-метром TYPE="file". Значение задается в виде MIME.
VALUE - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.
CHECKED - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.
SIZE - определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".
MAXLENGTH - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.
SRC - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE="image".
ALIGN - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.
Начало формы Мужчина Конец формы |
|
Развертывающийся список <SELECT>
Элемент SELECT создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный тэги. Содержит несколько элементов OPTION.
Параметры:
MULTIPLE - дает возможность выбора нескольких пунктов меню. По умолчанию можно выбрать только один пункт меню.
NAME - определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.
SIZE - определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.
OPTION
Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тэга.
Параметры:
SELECTED - Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню.
Часть первая - лекция, которая пользуется популярностью у тех, кто читал эту лекцию.
VALUE - Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра NAME в элементе SELECT.
|
Результат:
Начало формы
MS-DOS MS Windows98 MS Windows NT OS/2 UNIX
