ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
Элементы HTML
A
(HTML 1.0) Anchor
Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.
Атрибуты:
HREF определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:
http://... создает ссылку на www-документ;
ftp://... создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:.. создает ссылку на конференцию сервера новостей;
telnet://... создает ссылку на telnet-сессию с удаленной машиной;
wais://... создает ссылку на WAIS сервер;
gopher://... создает ссылку на Gopher сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Например, линк <A HREF="docs/title.html">Документация</A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа.
Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк <A HREF="#bottom">В конец документа</A> в раздел "bottom" текущего документа. (см. Пример 1)
TARGET определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезевированных имен:
_self указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме;
_parent указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм;
_top указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры;
_blank указывает, что документ должен отображаться в новом окне.
Пример 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>. |
Примечания:
| Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде | <A HREF="link1.html"> Первый линк <A HREF="link2.html">Второй линк</A> Продолжаем первый линк </A> |
|
| Если в атрибуте TARGET указать имя несуществующего окна или фрейма, создастся новое окно с указанным именем. Как мы видим, результат получится тот же, что и при задании нового окна: <A HREF="..." TARGET="_blank">, с той лишь разницей, что в последнем случае окно не будет иметь имени и на него нельзя будет ссылаться. |
| С помощью элемента BASE вы можете указать значение TARGET для всех гиперссылок в текущем документе. |
ADDRESS
(HTML 2.0) Address
Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.
Пример: |
| Пишите по следующему адресу: <ADDRESS> Москва. ул. Академика Королева, 13 <BR> Мурзилке </ADDRESS> |
Примечание:
| Internet Explorer версии 3.0 неверно интерпретирует конечный тег </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста. Пример: | | <ADDRESS> Мой адрес не дом и не улица, <BR> Мой адрес – Советский Союз. </ADDRESS> <!-- избавляемся от глюка --> <I></I> Нормальный текст ... |
|
APPLET
(HTML 3.2) Applet
Имеет начальный и конечный теги. Используется для вставки в HTML-страницу Java-апплетов программ на языке Java, исполняемых браузером на вашем компьютере. Java-апплет исполняется в специально отведенном для него месте, отображаясь в документе наподобие картинки. Поэтому многие атрибуты элемента APPLET сходны с атрибутами элемента IMG.
Если ваш браузер не имеет встроенной виртуальной Java-машины (и, соответственно, не поддерживает элемента APPLET), то на месте окошка Java-апплета вы увидите текст, заключенный между начальным и конечным тегами.
Атрибуты:
CODE обязательный атрибут. Определяет имя файла исполняемого Java-апплета.
CODEBASE указывает базовый адрес (URL), по которому находится файл с кодом исполняемого Java-апплета. Если парамер CODEBASE опущен, используется URL текущего документа.
ALIGN обязательный атрибут. Указывает способ выравнивания Java-апплета. Может принимать те же значения, что и аналогичный атрибут элемента IMG.
HEIGHT и WIDTH обязательные атрибуты. Определяют ширину и высоту (в пикселах) окошка вывода программы.
HSPACE и VSPACE определяют отступ (в пикселах) по горизонтали и вертикали от других объектов документа.
NAME указывает имя Java-апплета, уникальное для данного документа. Позволяет Java-апплетам на данной странице находить себе подобных и взаимодействовать друг с другом.
ALT определяет текст, отображаемый на месте апплета браузером, если браузер понимает элемент APPLET, но не может выполнять Java-апплеты.
SRC указывает адрес (URL), ассоциированный с апплетом. Например, адрес сайта разработчика апплета.
Пример 1: |
| <APPLET CODE="JumpingGirl.class" WIDTH="30" HEIGHT="40" ALIGN="left" ALT="Прыгающая девочка"> Если вы видите этот текст, значит ваш браузер не поддерживает Java. </APPLET> |
В результате слева отображается окошко (размером 30x40 точек) с прыгающей девочкой. Само собой, у вас должен быть файл JumpingGirl.class, который должен лежать в той же директории, что и текущий документ.
Пример 2: |
| <APPLET CODEBASE="http://www.igf.ru/javagames" CODE="CrazyTetris.class" WIDTH="300" HEIGHT="500" ALIGN="right" SRC="http://www.igf.ru" ALT="Игра Тетрис"> </APPLET> |
В данном примере справа отображается окошко (размером 300x500 точек) с игрой Тетрис. Браузер будет пытаться загрузить игру используя URL "http://www.igf.ru/javagames/СrazyTetris.class".
Примечание:
| Для передачи Java-программе каких-либо параметров используется элемент PARAM. |
AREA
(HTML 3.2) Map Area
Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега.
Атрибуты:
SHAPE определяет форму навигационной области. Возможные значения:
rect прямоугольник;
circle окружность;
poly многоугольник.
В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS.
COORDS определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей:
SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";
SHAPE="circle" COORDS="центр x, центр y, радиус";
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";
HREF определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A.
NOHREF определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT определяет альтернативный текст-подсказку для данной области.
Пример: |
| <!-- Создаем хитрую карту с круглой дыркой посередине --> <MAP NAME="map1"> <AREA NOHREF SHAPE="circle" COORDS="80,70,40"> <AREA HREF="guide.html" ALT="Путеводитель" SHAPE="rect" COORDS="0,0,167,140"> </MAP> ... <!-- Применяем ее к картинке --> <IMG src="/img/logo.gif" WIDTH="167" HEIGHT="140" BORDER="0" ALT="Путеводитель" USEMAP="#map1"> |
Примечания:
| В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом активная со ссылкой. |
| Старайтесь всегда указывать атрибут ALT. Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо. |
B
(HTML 3.2) Bold
Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом.
Пример: |
| Текст с <B>выделенным</B> словом |
BASE
(HTML 3.2) Base URL
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.
Атрибуты:
HREF определяет базовый адрес (URL) текущего документа.
TARGET определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.
Пример: |
| <HEAD> <!-- Пусть браузер думает, что находится по адресу : --> <BASE HREF="http://www.igf.ru/other/index.html"> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ... <!-- А теперь создадим относительную ссылку на документ --> <!-- http://www.igf.ru/list.html --> <A HREF="../list.html">Список</A> ... |
Таблица базовых цветов
Это основные цвета, используемые в HTML. Именно эти цвета используются дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть используются там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.
| Black | | Navy |
| Gray | | Blue |
| Silver | | Aqua |
| White | | Green |
| Red | | Lime |
| Fuchsia | | Teal |
| Maroon | | Yellow |
| Purple | | Olive |
Для получения любого другого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате. Приведенные ниже 216 цветов также считаются "безопасными" (browser-safe).
Для удобства я расположил "безопасные" цвета в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам. Красный и Синий добавляем Зеленый |
---|
000000 | 000033 | 000066 | 000099 | 0000cc | 0000ff |
330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff |
660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff |
990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff |
cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff |
ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff |
003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff |
333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff |
663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff |
993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff |
cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff |
ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff |
006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff |
336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff |
666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff |
996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff |
cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff |
ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff |
009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff |
339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff |
669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff |
999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff |
cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff |
ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff |
00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff |
33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff |
66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff |
99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff |
cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff |
ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff |
00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff |
33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff |
66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff |
99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff |
ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff |
ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff |
Красный и Зеленый добавляем Синий |
---|
000000 | 003300 | 006600 | 009900 | 00cc00 | 00ff00 |
330000 | 333300 | 336600 | 339900 | 33cc00 | 33ff00 |
660000 | 663300 | 666600 | 669900 | 66cc00 | 66ff00 |
990000 | 993300 | 996600 | 999900 | 99cc00 | 99ff00 |
cc0000 | cc3300 | cc6600 | cc9900 | cccc00 | ccff00 |
ff0000 | ff3300 | ff6600 | ff9900 | ffcc00 | ffff00 |
000033 | 003333 | 006633 | 009933 | 00cc33 | 00ff33 |
330033 | 333333 | 336633 | 339933 | 33cc33 | 33ff33 |
660033 | 663333 | 666633 | 669933 | 66cc33 | 66ff33 |
990033 | 993333 | 996633 | 999933 | 99cc33 | 99ff33 |
cc0033 | cc3333 | cc6633 | cc9933 | cccc33 | ccff33 |
ff0033 | ff3333 | ff6633 | ff9933 | ffcc33 | ffff33 |
000066 | 003366 | 006666 | 009966 | 00cc66 | 00ff66 |
330066 | 333366 | 336666 | 339966 | 33cc66 | 33ff66 |
660066 | 663366 | 666666 | 669966 | 66cc66 | 66ff66 |
990066 | 993366 | 996666 | 999966 | 99cc66 | 99ff66 |
cc0066 | cc3366 | cc6666 | cc9966 | cccc66 | ccff66 |
ff0066 | ff3366 | ff6666 | ff9966 | ffcc66 | ffff66 |
000099 | 003399 | 006699 | 009999 | 00cc99 | 00ff99 |
330099 | 333399 | 336699 | 339999 | 33cc99 | 33ff99 |
660099 | 663399 | 666699 | 669999 | 66cc99 | 66ff99 |
990099 | 993399 | 996699 | 999999 | 99cc99 | 99ff99 |
cc0099 | cc3399 | cc6699 | cc9999 | cccc99 | ccff99 |
ff0099 | ff3399 | ff6699 | ff9999 | ffcc99 | ffff99 |
0000cc | 0033cc | 0066cc | 0099cc | 00cccc | 00ffcc |
3300cc | 3333cc | 3366cc | 3399cc | 33cccc | 33ffcc |
6600cc | 6633cc | 6666cc | 6699cc | 66cccc | 66ffcc |
9900cc | 9933cc | 9966cc | 9999cc | 99cccc | 99ffcc |
cc00cc | cc33cc | cc66cc | cc99cc | cccccc | ccffcc |
ff00cc | ff33cc | ff66cc | ff99cc | ffcccc | ffffcc |
0000ff | 0033ff | 0066ff | 0099ff | 00ccff | 00ffff |
3300ff | 3333ff | 3366ff | 3399ff | 33ccff | 33ffff |
6600ff | 6633ff | 6666ff | 6699ff | 66ccff | 66ffff |
9900ff | 9933ff | 9966ff | 9999ff | 99ccff | 99ffff |
cc00ff | cc33ff | cc66ff | cc99ff | ccccff | ccffff |
ff00ff | ff33ff | ff66ff | ff99ff | ffccff | ffffff |
Зеленый и Синий добавляем Красный |
---|
000000 | 000033 | 000066 | 000099 | 0000cc | 0000ff |
003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff |
006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff |
009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff |
00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff |
00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff |
330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff |
333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff |
336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff |
339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff |
33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff |
33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff |
660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff |
663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff |
666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff |
669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff |
66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff |
66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff |
990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff |
993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff |
996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff |
999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff |
99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff |
99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff |
cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff |
cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff |
cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff |
cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff |
cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff |
ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff |
ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff |
ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff |
ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff |
ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff |
ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff |
ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff |
BASEFONT
(HTML 4.0) Base Font
Не имеет конечного тега. Определяет основной шрифт, которым должен отображаться текст документа.
Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц.
Атрибуты:
SIZE обязательный атрибут. Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно.
FACE определяет используемый шрифт (гарнитуру).
Пример: |
| <BODY> <BASEFONT SIZE="3"> ... Текст документа шрифтом 3 размера ... <FONT SIZE="+1"> Слегка увеличиваем шрифт </FONT> ... Продолжаем шрифтом 3 размера ... </BODY> |
Примечание:
| Атрибут FACE игнорируется большинством браузеров. Если вы хотите явно указать тип шрифта для всего документа, используйте элемент FONT: Пример: | | <BODY> <FONT FACE="Arial"> ... Основной текст документа шрифтом Arial ... <FONT FACE="Times" SIZE="5"> Вставка текста увеличенным шрифтом Таймс </FONT> ... Продолжается основной текст документа шрифтом Arial ... </FONT> </BODY> |
|
BIG
(HTML 3.2) Big
Текст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего).
Пример: |
| Текст с <BIG>увеличенным</BIG> словом |
Примечание:
| Тег <BIG> аналогичен по действию тегу <FONT SIZE="+1"> (см. элемент FONT). |
BLOCKQUOTE
(HTML 2.0) Block Quote
Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
Пример: |
| Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение: <BLOCKQUOTE> Синели красные ромашки,<BR> Желтели в небе облака,<BR> Синицы в теплый край летели,<BR> К истоку двигалась река.<BR> ... </BLOCKQUOTE> |
Тело документа
Создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим:
Примечания:
| "Бестелесных" документов не бывает. Документ без тела будет похож на одинокую голову профессора Доуэля (см. структуру HTML=документа). |
| Документ может иметь несколько "тел" фреймов. В этом случае тело вместе со всем его содержимым удаляется и вместо него вставляется FRAMESET. |
BR
(HTML 2.0) Break
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега.
Атрибуты:
CLEAR указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
all завершить обтекание изображения текстом.
left завершить обтекание текстом изображения, выровненного по левому краю.
right завершить обтекание текстом изображения, выровненного по правому краю.
Пример: |
| Первое предложение<BR>Второе предложение на следующей строке |
Примечание:
| Возьмите себе за правило всегда ставить <br> после тега <img ...>. В противном случае все картинки будут иметь неприятный отступ. |
| Атрибут CLEAR почему-то используется очень редко. А зря. |
CAPTION
(HTML 3.2) Caption
Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.
Атрибуты:
ALIGN определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:
top помещает заголовок над таблицей (значение по умолчанию);
bottom помещает заголовок под таблицей.
Пример: |
| <TABLE BORDER="1"> <CAPTION ALIGN="bottom">Заголовок таблицы</CAPTION> <TR> <TD>Ячейка таблицы</TD> </TR> </TABLE> |
CITE
(HTML 2.0) Citation
Оформляет находящийся между начальным и конечным тегами текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом.
Пример: |
| Как сказал классик:<BR> <CITE>"Грамотное написание HTML способствует пищеварению"</CITE> |
CODE, SAMP
(HTML 2.0) Code, Sample
Данные элементы оформляют текст, находящийся между начальным и конечным тегами, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом.
Пример: |
| Формула: <CODE> n=((x*15-z/1.25)/4)^5 </CODE> |
<!-- -->
(HTML 1.0) Comment (<!-- ... -->)
Используется для создания комментариев в любой части документа. Все, что находится внутри <!-- -->, будь то элемент или текст будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Пример: |
| <HTML> ... <!-- Начинаем чуткую работу с телом документа --> <BODY> <!-- Всталяем табличку с прайс-листом --> ... </BODY> <!-- Все. Готово --> </HTML> |
Примечания:
| Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке документа. Иначе говоря, тег <!-- --> внутри TITLE не действует. |
| Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя. |
DD
(HTML 2.0) Definition Description
Cоздает определение термина внутри элемента DL.
DIV
(HTML 3.2) Division
Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Атрибуты:
ALIGN определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center.
Пример: |
| ...Текст документа... <DIV ALIGN="center"> ...Текст, таблицы, изображения. Выравнивание по центру. </DIV> ...Текст документа... |
Примечания:
| У атрибута ALIGN есть еще одно значение justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю. |
DL
(HTML 2.0) Definition List
Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью элементов DT и DD.
Атрибуты:
COMPACT включает режим "компактного" отображения списка. Удобно использовать, если список определений очень велик. Данный атрибут является флагом и не требует присвоения значения.
Пример: |
| <DL COMPACT> <DT>Жапура<DD>Река в Колумбии и Бразилии <DT>Зайцы<DD>Семейство млекопитающих отряда зайцеобразных ... </DL> |
DT
(HTML 2.0) Definition Term
Создает термин в списке определений внутри элемента DL.
EM
(HTML 2.0) Emphasis
Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тегами. Результат обычно отображается курсивом. То есть элемент EM по действию практически аналогичен элементу I.
Пример: |
| Порой в России встречаются <EM>действительно талантливые</EM> веб-мастера. Но только не друг с другом. |
Примечание:
| Согласно рекомендациям W3C, приветствуется использование <EM> вместо <I>. |
EMBED
(В спецификациях W3C отсутствует) Embed
Используется для вставки в HTML различных объектов: не-html документов и media-файлов. Тип вставляемого объекта, будь то музыкальный wav/midi-файл или трехмерный мир VRML, должен быть зарегистрирован на машине пользователя как проигрываемый одним из имеющихся plug-in'ов или поддерживаемый каким-либо приложением. Если браузер поддерживает элемент EMBED, содержащиеся между начальным и конечным тегами текст и элементы будут игнорироваться.
Атрибуты:
Вставка объекта происходит так же, как и вставка изображения (см. элемент IMG) : под внедряемый объект необходимо сначала выделить место. Поэтому элемент EMBED имеет ряд одинаковых с элементом IMG атрибутов, а именно: NAME, ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE и VSPACE.
Другие атрибуты:
SRC обязательный атрибут. Определяет имя файла вставляемого объекта.
PLUGINSPACE указывает на адрес (URL), по которому можно найти plug-in, необ-ходимый для просмотра типа файлов, аналогичных указанному в атрибуте SRC.
PALETTE определяет тип цветовой палитры для просмотра объекта. Данный атрибут работает только на Windows-машинах с 256-цветной системной палитрой. Возможные значения:
background использовать background-палитру для отображения объекта (используется по умолчанию).
foreground использовать foreground-палитру для отображения объекта.
HIDDEN определяет, отображать указанный объект или нет. Возможные значения:
true не отображать объект.
false отображать объект (используется по умолчанию).
TYPE явно указывает браузеру к какому типу файлов относится загружаемый объект, помогая определить необходимое средство просмотра (plug-in). В качестве значения указывается зарегестрированный MIME-тип файла.
Пример 1: |
| <EMBED SRC="music.mid" HIDDEN="true"> <NOEMBED>Альтернативный текст для старых браузеров</NOEMBED> </EMBED> |
Пример 2: |
| <EMBED SRC="music.vrml" HEIGHT="300" WIDTH="200" HSPACE="10" ALIGN="center" PLUGINSPACE="../plugins/download_vrml.html"> <NOEMBED>Альтернативный текст для старых браузеров</NOEMBED> </EMBED> |
Примечания:
| Для старых браузеров, не поддерживающих элемент EMBED, необходимо использовать элемент NOEMBED с указанием между начальным и конечным тегами альтернативного текста, как показано в примерах выше. |
| Обратите внимание в спецификациях консорциума W3C про EMBED ничего не сказано (!), скороее всего данный элемент появился по инициативе разработчиков Netscape 1.1 и с тех пор поддерживается всеми браузерами для совместимости (начиная с MSIE 3.0-beta-2 и выше). |
| Каким бы привлекательным элемент EMBED вам ни казался, но, поверьте, лучше его не использовать. Далеко не каждому может понравиться принудительное проигрывание MID-файла или попытка прокрутить ролик в неизвестном браузеру формате. Если вам все же не терпится украсить HTML чем-нибудь из ряда вон выходящим, не поленитесь, потратьте время на усиленное тестирование со всеми популярными видами браузеров. |
FAQ
Как сделать красную строку?
Существует множество способов создания красной строки, большинство из них с недостатками. На эту тему написано много, но раз уж задали вопрос, отвечу и я 8)
Итак, красной строки в HTML не предусмотрено, что неудивительно в английском ее не используют вообще, а специально для русских HTML никто разрабатывать не собирался. Именно поэтому все способы создания красных строк суть своеобразный "финт ушами", попытка обмануть природу. Казалось бы, что идеологически верно не корежить текст, а воспользоваться CSS:
Пример: |
| <HEAD> <STYLE type="text/css"> <!-- P:first-line { margin-left: 20; } --> </style> </HEAD> ... <BODY...> <p>тут всякий текст и все такое </p> |
Но у этого способа есть недостаток не работает в древних браузерах.
Наиболее распространенные способы обмана (работают везде):
- <font color="#ЦВЕТ_ФОНА">_______</font>
- <img src="/img/null.gif" width=20 height=10>
, где null.gif прозрачный gif-файл размером 1x1. -
FONT
(HTML 3.2) Font
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами. Вне тегов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.
Атрибуты:
SIZE определяет размер шрифта. Возможные значения:
целое число от 1 до 7;
относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью атрибута SIZE элемента BASEFONT.
COLOR определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
FACE определяет используемый шрифт.
Пример: |
| <FONT SIZE="+2" COLOR="#AA0000">Увеличенный красный шрифт</FONT> <FONT SIZE="3" FACE="Courier New" COLOR="Magenta">Моноширинный фиолетовый текст 3 размера</FONT> |
Примечание:
| Атрибут FACE старайтесь не использовать. Если на компьютере пользователя не окажется указанного шрифта глюки неизбежны. Если указать шрифт всё же необходимо, используйте только: Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. |
| Будьте внимательны. Многие элементы форматирования текста (PRE, CODE, KBD, SAMP...), расположенные внутри элемента FONT, работают некорректно. |
FORM
(HTML 2.0) Form
Используется для создания заполяемой формы. Необходимо присутствие начального и конечного тегов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.
Атрибуты:
NAME определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.
ACTION обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы путь к скрипту сервера, обслуживающему данную форму.
METHOD определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST.
ENCTYPE определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".
TARGET определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в атрибуте TARGET элемента A.
Пример: |
| <!-- Создаем форму --> <FORM ACTION="/cgi-bin/thanks.pl" METHOD=GET NAME="TestForm"> <!-- Внутри формы создаем поле ввода: --> Фамилия: <INPUT TYPE="text" name="lastname" SIZE="20" VALUE="Пупкин"><br> <!-- Кнопка "Отправить": --> <INPUT TYPE="submit" VALUE="Отправить"> </FORM> <!-- Все, конец форме -->' |
Примечания:
| Во время отладки скрипта, принимающего данные, удобнее всего использовать метод GET. |
| Метод GET не позволяет передать скрипту большой объём данных. Если предполагается, что пользователь будет заполнять очень большую форму или вводить объёмные текстовые данные, или пересылать файл используйте METHOD="POST". |
| Перед тегом <FORM> в браузерах Netscape образуется пустое пространство, вертикальный отступ. Если вас это не устраивает и при этом форма на странице одна, поместите тег <FORM> в начало страницы, сразу после тега <BODY>, это должно помочь. |
FRAME
(HTML 4.0) Frame
Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET)
Атрибуты:
SRC обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.
NAME определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.
MARGINWIDTH определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.
MARGINHEIGHT определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.
SCROLLING определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:
yes отображать линейки прокрутки.
no не отображать линейки прокрутки.
auto отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме).
NORESIZE не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения.
FRAMEBORDER определяет наличие рамок у фрейма. Возможные значения:
yes отображать рамки;
no или 0 не отображать рамки;
Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET.
Пример (файл index.html): |
| ... <FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="265,*"> <FRAME SRC="frame1.html" NAME="page"> <FRAMESET ROWS="165,*"> <FRAME SRC="frame2.html" NAME="menu1" MARGINWIDTH="0"> <FRAME SRC="frame3.html" NAME="menu2" MARGINWIDTH="0"> </FRAMESET> <NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES> </FRAMESET> <BODY> </BODY> ... |
В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html высоту 165.
FRAMESET
(HTML 4.0) Frame Set
Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется).
Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.
Атрибуты:
ROWS определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:
в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%";
в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%;
в пикселах. Например: "75,*";
Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй в 40 пикселов, а третий займет всю оставшуюся площадь.
COLS определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.
BORDER определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape;
FRAMEBORDER определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:
Yes отображать рамки;
No или 0 не отображать рамки;
Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER.
FRAMESPACING определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.
Примечание:
| Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY. FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой. |
HEAD
(HTML 1.0) Head
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).
Пример: |
| <HTML> <!-- Начинаем заголовок... --> <HEAD> <title>Справочник по HTML</title> </HEAD> <!-- ...кончили. Дальше пошло тело документа --> <BODY> Текст документа </BODY> </HTML> |
HR
(HTML 2.0) Horisontal Rule
Вставляет в текст горизонтальную разделительную линию.
Атрибуты:
WIDTH определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE определяет толщину линии в пикселах.
ALIGN определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:
left выравнивание по левому краю документа.
right выравнивание по правому краю документа.
center выравнивание по центру документа (используется по умолчанию).
NOSHADE определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
COLOR определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Пример: |
| Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией. |
H1,H2,...H6
(HTML 2.0) Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни разделы и подразделы.
Атрибуты:
ALIGN определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
Пример: |
| <H1 ALIGN="center">Самый большой заголовок посередине</H1> <H2>Заголовок поменьше</H2> ... <H6>Малюююсенький такой заголовочек</H6> |
I
(HTML 2.0) Italic
Текст, заключенный между начальным и конечным тегами, будет выделен курсивом.
Пример: |
| Текст с <I>курсивом</I> |
IMG
(HTML 2.0) Image
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Червертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тега.
Атрибуты:
SRC обязательный атрибут. Указывает адрес (URL) файла с изображением.
HEIGHT и WIDTH определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
HSPACE и VSPACE определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
ALIGN обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
NAME определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
ALT определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
BORDER определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.
LOWSRC указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.
USEMAP применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.
ISMAP определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения.
Пример 1: |
| <IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов. |
Пример 2. Использование изображения в качестве гиперссылки: |
| <A HREF="carlson.html"> <IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона"> </A> Для просмотра досье нажмите на кнопку справа. |
Пример 3. Использование ISMAP: |
| <A HREF="http://www.igf.ru/bin/imagemaps/map1"> <IMG SRC="map.gif" ISMAP></A>'); |
Пример 4. Использование USEMAP: |
| <IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">'); |
Примечания (особо важно):
| Золотое правило web-мастера всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. |
| Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в атрибуте ALT. |
| Всегда сразу после <IMG ...> ставьте <BR>! А то проблем не миновать после картинки появится пустое пространство в несколько пикселей. Причём ставьте вплотную, без пробелов: <img ...><br>. |
| Для завершения обтекания изображения текстом используйте атрибут CLEAR элемента BR. |
| Значения top и texttop атрибута ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать. |
| Указывайте значения атрибутов HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю. |
| По возможности старайтесь не создавать навигационных карт, обрабатываемых на сервере. Иначе говоря, вместо атрибута ISMAP используйте атрибут USEMAP + локальные карты. |
INPUT
(HTML 2.0) Input
Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тега. Элемент INPUT должен располагаться внутри элемента FORM.
Атрибуты:
NAME определяет имя, используемое при передаче содержания данной формы на сервер. Этот атрибут необходим для большинства типов (атрибут TYPE cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.
TYPE определяет тип поля для ввода данных. По умолчанию это "text". Возможные значения:
text создает поле ввода под одну строку текста. Как правило используется совместно с атрибутами SIZE и MAXLENGTH.
textarea создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA
file дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с атрибутом ACCEPT.
password создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.
checkbox создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле chackbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле этого типа обязательно должно иметь атрибуты 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 получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты).
reset создает кнопку, сбрасывающую значения полей формы к их первоначальным значениям. При нажатии кнопки данные на сервер не отправляются. Надпись на кнопке может быть изменена с помощью атрибута VALUE. По умолчанию надпись на кнопке зависит от версии браузера.
hidden поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип полей удобно использовать для передачи данных от скрипта скрипту незаметно для пользователя.
button позволяет создать пользовательскую кнопку в HTML документе, что, при умелом использовании JavaScript, добавляет форме функциональность. Атрибут NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Атрибут VALUE позволяет задать текст, который будет отображен на кнопке в документе.
VALUE задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для таких полей как checkbox или radio, будет возвращено значение, заданное в атрибуте VALUE.
CHECKED указывает, что поля типов checkbox и/или radio (см. выше атрибут TYPE) активизированы.
SIZE определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".
MAXLENGTH определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.
SRC задает URL-адрес картинки, используемой при создании графической кнопки. Используется совместно с атрибутом TYPE="image".
ALIGN определяет способ вертикального выравнивания для изображений. Используется совместно с атрибутом TYPE="image". Полностью аналогичен атрибуту ALIGN элемента IMG. По умолчанию имеет значение bottom.
ACCEPT конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME-типа.
Пример 1: |
| <FORM NAME="Form1" ACTION="http://www.igf.ru/cgi-bin/banya.pl"> <INPUT TYPE="hidden" NAME="info" VALUE="Запись в баню на воскресенье"> <INPUT TYPE="radio" NAME="sex" VALUE="Male" CHECKED> Мужик<BR> <INPUT TYPE="radio" NAME="sex" VALUE="Female"> Баба<BR> Имя:<BR> <INPUT TYPE="text" NAME="textfield" VALUE="Вася Пупкин" SIZE="30" MAXLENGTH="60"><BR> Пароль:<BR> <INPUT TYPE="password" WIDTH="10" NAME="passwd"><BR><BR> <INPUT TYPE="submit" VALUE="Запулить"> </FORM> |
Пример 2: |
| Хочу получать следующие издания:<br> <FORM NAME="Form2" ACTION="http://www.igf.ru/cgi-bin/magazines.pl"> <INPUT TYPE="checkbox" NAME="m1">Страшная газета<br> <INPUT TYPE="checkbox" NAME="m2">6 соток<BR> <INPUT TYPE="checkbox" NAME="m3" CHECKED>Мурзилка<BR> <INPUT type="image" src="/img/button.gif" WIDTH="60" HEIGHT="30"> </FORM> |
KBD
(HTML 2.0) Keyboard
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тегами, выделяется жирным моноширинным шрифтом.
Пример: |
| Чтобы войти в систему наберите <KBD>"GUEST"</KBD> заглавными буквами. |
LI
(HTML 2.0) List Item
Создает пункт в списке. Располагается внутри элементов OL или UL.
Атрибуты:
VALUE изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Пример: |
| <OL TYPE="A" START="2"> <LI> Пункт, озаглавленный буквой B. </LI> <LI VALUE="6"> Пункт, озаглавленный буквой F. </LI> <LI> Пункт, озаглавленный буквой G. </LI> </OL> |
Примечания:
| Некоторые разработчики употребляют LI вне элементов OL и UL, объясняя это тем, что браузеры и так нормально справятся с отображением списка. Это неверно, коллеги, почитайте спецификацию! |
| Согласно официальной рекомендации консорциума W3C закрывающий тег </LI> писать не обязательно. По этому поводу скажу следующее: хоть HTML и не является языком программирования, у вас, как и у всякого хорошего программиста, должен быть свой стиль написания кода. Кто-то будет писать </LI>, кто-то не будет это не так уж и важно. Главное, чтобы вы однажды определились и не изменяли своему решению. |
LINK
(HTML 2.0) Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK.
Атрибуты:
HREF определяет URL объекта.
REL определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:
stylesheet указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE)
home указывает на заглавную страницу вашего сайта
toc, contents указывают на файл, содержащий оглавление данного документа.
index указывает на файл, содержащий информацию для индексного поиска по текущему документу.
glossary указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
copyright указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
up, parent указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
child указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
next указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
previous указывает на предыдущую страницу в последовательности документов.
last, end указывает на последнюю страницу в последовательности документов.
first указывает на первую страницу в последовательности документов.
help указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE определяет MIME-тип для объекта, указанного в атрибуте HREF.
Пример 1: |
| <HEAD> <TITLE>Элемент DIV</TITLE> <LINK REL="HOME" TITLE="HTML-справочник" HREF="index.html"> <LINK REL="UP" TITLE="Текстовые блоки" HREF="textblocks.html"> <LINK REL="PREVIOUS" TITLE="Элемент P" HREF="p.html"> <LINK REL="NEXT" TITLE="Элемент ADDRESS" HREF="address.html"> </HEAD> |
Пример 2: |
| <HEAD> <TITLE>Полдневье</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="deco1.css"> </HEAD> |
Примечания:
| Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта эта информация интересна только индексирующим роботам поисковых систем. |
LISTING, PLAINTEXT, XMP
Данные элементы предназначены для воспроизведения предварительно отформатированного текста. Они использовались до появления элемента PRE и на данный момент являются устаревшими.
Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры еще могут распозновать их в целях обратной совместимости версий.
MAP
(HTML 3.2) Map
Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты.
Атрибуты:
NAME единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
Пример: |
| <!-- Создаем карту Map1 : --> <MAP NAME="Map1"> <!-- Задаем области --> <AREA HREF="...> <AREA HREF="...> ... </MAP> <!-- Карта готова. Применим её к картинке: --> <IMG SRC="image.gif" USEMAP="#Map1" WIDTH=200 HEIGHT=100 ALT="Картинка"> |
MENU, DIR
(HTML 2.0) Menu, Directory List
Данные теги предназначены для создания неупорядоченных списков, подобных UL. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры могут распознавать их в целях обратной совместимости. Авторам же рекомендуется использовать вместо MENU и DIR элемент UL.
META
(HTML 2.0) Meta
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.
Атрибуты:
NAME определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
HTTP-EQUIV определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).
Пример: |
| <HEAD> ... <META HTTP-EQUIV="Expires" CONTENT="Sat, 26 Jun 1999 17:38:15 GMT"> <META NAME="GENERATOR" CONTENT="Greenback"> <META NAME="Publisher-Email" CONTENT="green@igf.ru"> <META NAME="Publisher-URL" CONTENT="Idea GraFix – http://www.igf.ru/"> <META NAME="Keywords" CONTENT="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика"> <META NAME="Description" CONTENT="Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию."> ... </HEAD> |
NOEMBED
(HTML 3.2) No Embed
Определяет блок, который будет отображен, если браузер по какой-либо причине не работает с элементом EMBED.
Пример: |
| <EMBED SRC="music.mid" HIDDEN="true"> <NOEMBED> Ваш браузер морально устарел ;-D </NOEMBED> </EMBED> |
NOFRAMES
(HTML 4.0) No Frames
Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET.
Пример: |
| <FRAMESET ROWS="*,*"> <NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> </FRAMESET> |
NOSCRIPT
(HTML 4.0) No Script
Определяет текст, который будет отображен, если браузер по какой-либо причине не работает со скриптами.
Пример: |
| <SCRIPT LANGUAGE="JavaScript"> <NOSCRIPT> Пора менять браузер... </NOSCRIPT> <!-- window.location="http://www.igf.ru"; --> </SCRIPT> |
OL
(HTML 2.0) Ordered List
Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Атрибуты:
START определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
TYPE определяет стиль нумерации пунктов. Может иметь значения:
"A" заглавные буквы A, B, C ...
"a" строчные буквы a, b, c ...
"I" большие римские числа I, II, III ...
"i" маленькие римские числа i, ii, iii ...
"1" арабские числа 1, 2, 3 ...
По умолчанию <UL TYPE="1">.
Пример: |
| <OL TYPE="I" START="2"> <LI> Пункт два </LI> <LI> Пункт три </LI> <LI> Пункт четыре </LI> </OL> |
OPTION
(HTML 2.0) Option
Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тега.
Атрибуты:
SELECTED Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню.
VALUE Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением атрибута NAME в элементе SELECT.
Пример: |
| ... <FORM ACTION="script.cgi"> <SELECT NAME="gender"> <OPTION VALUE="male" SELECTED>Мужской <OPTION VALUE="female">Женский <OPTION VALUE="not_yet">Определяюсь </SELECT> <INPUT TYPE="submit" VALUE="OK"> </FORM> ... |
Результат:
P
(HTML 2.0) Paragraph
Используется для разметки параграфов.
Атрибуты:
ALIGN определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
Пример: |
| <P ALIGN="center">Это центрированный параграф.<BR> Текст располагается в центре окна браузера</P> <P ALIGN="right">А это параграф, выровненный по правому краю.</P> |
PARAM
(HTML 3.2) Parameter
Располагается в начале элемента APPLET. Используется для передачи Java-программе каких-либо параметров. Элемент задает пару "имя значение" переменной, которая будет передана Java-программе.
Пример: |
| <APPLET CODEBASE="http://www.igf.ru/applets" CODE="JavaTetris.class" WIDTH="440" HEIGHT="475" ALIGN="center"> <PARAM NAME="width" VALUE="10"> <PARAM NAME="height" VALUE="20"> <PARAM NAME="name" VALUE="Cool Tetris"> ... </APPLET> |
PRE
(HTML 2.0) Preformatted Text
Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.
Пример: |
| <PRE> Ать! Два! Три! </PRE> |
Примечание:
| Желательно избегать использования символа горизонтальной табуляции внутри PRE, т.к. он может быть неадекватно интерпретирован некоторыми браузерами. Вместо символа табуляции рекомендуется использовать число пробелов, кратное четырем. |
S, STRIKE
(HTML 2.0) Strike
Элемент STRIKE отображает помещенный между начальным и конечным тегами текст как перечеркнутый. В HTML 3.2 вместо <STRIKE> был предложен более краткий тег <S>.
Пример: |
| Лена + <STRIKE>Вася</STRIKE> Коля = Love |
SCRIPT
(HTML 3.2) Script
Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC.
Атрибуты:
LANGUAGE определяет язык, на котором написан скрипт, например, JavaScript.
SRC определяет URL скрипта.
Пример 1: |
| <SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js"> </SCRIPT> |
В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать между <!-- и -->, т.е. оформлять его как html-комментарий:
Пример 2: |
| <SCRIPT LANGUAGE="JavaScript"> <!-- window.location="http://www.art-russia.com"; // --> </SCRIPT> |
Где размещать скрипт:
Элемент SCRIPT можно располагать либо в заголовке (внутри элемента HEAD) либо в теле документа (внутри BODY).
SELECT
(HTML 2.0) Select
Элемент SELECT создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный теги. Содержит несколько элементов OPTION, иначе не имеет смысла.
Атрибуты:
MULTIPLE дает возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. По умолчанию можно выбрать только один пункт меню.
NAME определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.
SIZE определяет количество видимых пунктов в меню. Если значение этого атрибута больше единицы, то результатом будет список пунктов.
Пример: |
| ... <FORM ACTION="receive.cgi"> <SELECT NAME="OS" MULTIPLE> <OPTION VALUE="DOS">MS-DOS <OPTION VALUE="WinXP">MS Windows98 <OPTION VALUE="Unix" SELECTED>UNIX <OPTION VALUE="WinNT">MS Windows NT </SELECT> <INPUT TYPE="submit" VALUE="Послать"> </FORM> ... |
Результат:
STRONG
(HTML 2.0) Stronger emphasis
Усиленное выделение. Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B.
Пример: |
| Я <STRONG>сильный</STRONG>, но легкий. |
Примечание:
| Согласно рекомендациям W3C, приветствуется использование <STRONG> вместо <B>. |
STYLE
(HTML 3.2) Style
Используется для вставки в документ таблицы стилей (CSS Cascade Style Sheet).
Атрибуты:
TYPE обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".
TITLE определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.
Пример: |
| <HEAD> <TITLE>Пример использования таблицы стилей</TITLE> <!-- Втыкаем табличку стилей --> <STYLE TYPE="text/css" TITLE="Cool table"> <!-- A {text-decoration : none;} P {color : blue; font-size : 12pt; font-family : Arial;} H1 {color : red; font-size : 18pt;} --> </STYLE> <!-- ... кончили втыкать --> </HEAD> |
Примечания:
| Практически все популярные браузеры игнорируют атрибут TITLE, поэтому можете его не использовать. А жаль, задумка-то была неплохая... |
SUB
(HTML 2.0) Subscript
Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу.
Пример: |
| X<SUB>i</SUB> = B<SUB>i</SUB> + C<SUB>i</SUB> |
SUP
(HTML 2.0) Superscript
Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.
Пример: |
| Microsoft <SUP>TM</SUP> |
TABLE
(HTML 3.2) Table
Элемент для создания таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
Атрибуты:
ALIGN определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию left.
VALIGN должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle.
BORDER определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.
CELLPADDING определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING определяет расстояние (в пикселах) между границами соседних ячеек.
WIDTH определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Примеры таблиц
Примечания:
| Если атрибут HEIGHT указать равным 100%, то старые версии Internet Explorer будут создавать таблицу высотой чуть превышающей высоту окна браузера. Чтобы этого избежать, можно пожертвовать рамкой таблицы, указав BORDER="0". |
| Старые версии Netscape работают некорректно, если ширина и высота таблицы равны 100%. В этом случае вокруг таблицы остается свободное пространство. |
| Атрибут VALIGN работает очень загадочно. Скорее, вообще не работает. |
| Атрибут ALIGN не работает в старых версиях браузера Internet Explorer. Чтобы осуществить желаемое выравнивание таблицы, нужно поместить ее между тегами элемента DIV: Пример: | | <DIV ALIGN="center"> <TABLE WIDTH="70"> ... </TABLE> </DIV> |
|
TD и TH
(HTML 3.2) Table Data & Table Head
Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, должна улучшиться работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
Атрибуты:
ALIGN определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH центрирование.
VALIGN определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR.
WIDTH определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
HEIGHT определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к высоте таблицы.
COLSPAN определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
ROWSPAN определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
NOWRAP блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного атрибута (далее, внизу страницы).
BGCOLOR определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный атрибут не работает в старых версиях браузера Netscape (до 3.X включительно).
Примеры таблиц
Примечания:
| Границы ячейки отображаются только в том случае, когда она имеет некое содержание. Чтобы получить пустую ячейку с границами, достаточно поместить в нее специальный символ или маленькую прозрачную gif-картинку. |
| Если вы используете одновременно атрибуты NOWRAP и WIDTH="x", где x маленькое число, то следует дополнительно вставлять внутрь ячейки <NOBR> Пример: | | <!-- Так делать неправильно --> <TABLE border=1> ... <TR><TD WIDTH=5 NOWRAP>Текст, который не должен переноситься</TD></TR> ... </TABLE> <!-- А вот так – правильно и работает всегда --> <TABLE border=1> ... <TR><TD WIDTH=5 NOWRAP><NOBR>Текст, который не будет переноситься</NOBR></TD></TR> ... </TABLE> | Дело в том, что в браузерах Internet Explorer для полной отмены переноса слов используется именно <NOBR>, а атрибут NOWRAP действует только при отсутствии WIDTH. |
| Атрибут HEIGHT, указанный в процентном отношении, работает нормально лишь в том случае, когда явно задана высота всей таблицы. |
| Один из наиболее распространенных приемов web-дизайнера "таблица в таблице". Для этого достаточно расположить одну таблицу внутри ячейки другой. Таким образом можно создавать даже очень сложные вложенные "каркасы" дизайна страницы. |
TEXTAREA
(HTML 2.0) Text Area
Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент TEXTAREA должен располагаться внутри элемента FORM.
Атрибуты:
NAME обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.
ROWS определяет количество строк текста, видимых на экране.
COLS определяет ширину текстового поля в печатных символах.
WRAP определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:
off перенос слов не происходит (значение по умолчанию)
virtual перенос слов только отображается, на сервер же поступает неделимая строка.
physical перенос слов будет происходить во всех точках переноса.
Пример: |
| ... <FORM ACTION="receive.html" METHOD=POST> <TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">Ваш адрес...</TEXTAREA><br> <INPUT TYPE="submit" VALUE="OK"> </FORM> ... |
Результат:
Примечание:
| Поле типа TEXTAREA позволяет пользователю набрать довольно большой блок текста. Поэтому, если в форме присутствует поле TEXTAREA, передавайте скрипту данные методом POST (см. элемент FORM) иначе есть вероятность потери данных. |
TR
(HTML 3.2) Table Row
Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Атрибуты:
ALIGN определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
TT
(HTML 2.0) Tele Type Данный элемент отображает помещенный между начальным и конечным тегами текст моноширинным шрифтом.
Пример: |
| <TT>СЕНЯ ЗПТ ТВОЮ МАТЬ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК</TT> |
U
(HTML 2.0) Underline
Данный элемент отображает помещенный между начальным и конечным тегами текст как подчеркнутый.
Пример: |
| <U> Подчеркнутый текст </U> |
UL
(HTML 2.0) Unsorted List
Создает неупорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Пример: |
| <UL> <LI> Первый пункт списка </LI> <LI> Второй пункт списка </LI> <LI> Третий пункт списка </LI> </UL> |
VAR
(HTML 2.0) Variable
Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.
Пример: |
| Переменная <VAR>IndexZ</VAR> равна 5. |