| Автор |
Сообщение |
|
|
|
| Администратор |
 |
Стаж: 8 лет 7 месяцев 2 дня
Сообщения: 1223
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
HTML справочникОбзор : - Структура html документа
- Вставка комментариев
header : - верхняя часть страницы, сайта, "шапка". - Заголовок [Тэги HEAD, TITLE, BASE, STYLE, LINK, META]
- Фреймы (frames)
- Скрипты
body : - тело документа, страницы - BODY
- Гиперссылки
- Текстовые блоки. Тэги H1, P, DIV, ADDRESS, BLOCKQUOTE, BR, HR
- Форматирование текста. Тэги BASEFONT, FONT, I, EM, B, STRONG, U, S, STRIKE, BIG, SMALL, SUP, SUB, CODE, SAMP, TT, KBD, VAR, CITE
- Списки. Тэги UL, OL, LI, MENU, DIR, DL, DT, DD
- Объекты. Тэги IMG, EMBED, NOEMBED, APPLET, PARAM
- Таблицы. Тэги CAPTION, TABLE, TD, TH, TR
- Формы. Тэги FORM, TEXTAREA, SELECT, OPTION, INPUT
footer : - нижняя часть страницы, сайта. "подвал". - Описание
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
html
|
 |
|
|
|
| Администратор |
|
Стаж: 8 лет 7 месяцев 2 дня
Сообщения: 1223
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
Обзор Структура HTML-документаС чего начинается HTML Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки": Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки. Пример самого короткого HTML-документа: Код: Выделить всё <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается тегом <HTML> и им же закрывается. Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы: Код: Выделить всё <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>Если приведенный выше пример пояснить схематически, получится следующее: Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY. Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE). Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>. Для вставки комментариев в HTML документ используется <!-- -->. То есть, всё, что находится внутри этой строки игнорируется браузером, соответственно, не выводится на экран. Комментарии очень удобны при создании и редактировании HTML-файлов. Код: Выделить всё <HTML>
...
<!-- Начинаем чуткую работу с телом документа -->
<BODY>
<!-- Вставляем табличку с прайс-листом -->
...
</BODY>
<!-- Все. Готово -->
</HTML>И ещё: Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует. Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
|
|
|
|
|
| Администратор |
|
Стаж: 8 лет 7 месяцев 2 дня
Сообщения: 1223
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
Header Заголовок [Тэги HEAD, TITLE, BASE, STYLE, LINK, META]Создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа (см. структуру HTML-документа). Элементы, относящиеся к заголовку документа: HEAD - Определяет начало и конец заголовка документа
пример
Код: Выделить всё <HTML>
<!-- Начинаем заголовок... -->
<HEAD>
<title>Справочник по HTML</title>
</HEAD>
<!-- ...кончили. Дальше пошло тело документа -->
<BODY>
Текст документа
</BODY>
</HTML>
TITLE - Определяет имя всего документа, которое отображается в заголовке окна браузера
пример
Код: Выделить всё ...
<HEAD>
<TITLE>Руководство по эксплуатации</TITLE>
</HEAD>
...
BASE - Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа
пример
Указывает базовый адрес текущего документа (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>
... STYLE - Используется для вставки в документ таблицы стилей CSS
пример
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;}
--></font>
</STYLE>
<!-- ... кончили втыкать -->
</HEAD>
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. Код: Выделить всё <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>Код: Выделить всё <HEAD>
<TITLE>Полдневье</TITLE>
<LINK REL="stylesheet" TYPE="text/css" href="deco1.css">
</HEAD> 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 &#150; http://www.igf.ru/">
<META NAME="Keywords" CONTENT="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика">
<META NAME="Description" CONTENT="Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию.">
...
</HEAD> Фреймы (frames)Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов, к чему, поверьте, имеют довольно веские основания. Старайтесь использовать фреймы только тогда, когда это действительно необходимо.Элементы для создания фреймов и работы с ними: FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице
пример
Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент 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) считается ошибкой.
FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры
пример
Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET) Атрибуты: SRC - обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. NAME - определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов. MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. SCROLLING - определяет наличие линеек прокрутки содержимого фрейма. Возможные значения: yes - отображать линейки прокрутки. no - не отображать линейки прокрутки. auto - отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме). NORESIZE - не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения. FRAMEBORDER - определяет наличие рамок у фрейма. Возможные значения: yes - отображать рамки; no или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET. Код: Выделить всё ...
<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.
NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы
пример
Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET. Код: Выделить всё <FRAMESET ROWS="*,*">
<NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES>
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET> Внимательно следите, чтобы все вышеперечисленные элементы находились вне элемента BODY. Фреймы к телу документа никоим образом не относятся! СкриптыСкрипты - это включения в HTML не-html кода, дополняющего его возможности. С помощью скриптов вы можете создавать анимированные кнопки меню, осуществлять автоматическое перенаправление на другие документы и т.д. Большинство скриптов пишется на языке JavaScript. Элементы для работы со скриптами: SCRIPT - Вставляет скрипт в HTML-документ
пример
Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC. Атрибуты: LANGUAGE - определяет язык, на котором написан скрипт, например, JavaScript. SRC - определяет URL скрипта. Код: Выделить всё <SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js">
</SCRIPT>Элемент SCRIPT можно располагать либо в заголовке (внутри элемента HEAD) либо в теле документа (внутри BODY). Возможна установка многих скриптов, но, в некоторых случаях, важна очередность их размещения. Также возможен и "конфликт скриптов", когда их функции частично перекрываются и выполнение html-кода идёт с ошибкой.
NOSCRIPT - Определяет текст, который будет отображен, если браузер не поддерживает скрипты
пример
Определяет текст, который будет отображен, если браузер по какой-либо причине не работает со скриптами. Код: Выделить всё <SCRIPT LANGUAGE="JavaScript">
...
...
<NOSCRIPT> Пора менять браузер... </NOSCRIPT>
</SCRIPT>
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
|
|
|
|
|
| Администратор |
|
Стаж: 8 лет 7 месяцев 2 дня
Сообщения: 1223
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
body BODYУказывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза. АтрибутыMARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR - определяет цвет фона документа. TEXT - определяет цвет текста в документе. LINK - определяет цвет гиперссылок в документе. ALINK - определяет цвет подсветки гиперссылок в момент нажатия. VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели. Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Код: Выделить всё <HTML>
<BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40">
...
Текст документа.
...
</BODY>
</HTML>При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно атрибуты MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере. Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. ГиперссылкиСсылки на другие документы в HTML создаются с помощью элемента A. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Атрибуты: HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения: http://... – создает ссылку на www-документ; ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:... – создает ссылку на конференцию сервера новостей; telnet://... – создает ссылку на telnet-сессию с удаленной машиной; wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер; Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк будет ссылаться на файл title.html в подкаталоге docs (относительно текущего). NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например: Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк отправит вас в раздел "part" файла document.html, а линк – в раздел "bottom" текущего документа. TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме; _parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры; _blank – указывает, что документ должен отображаться в новом окне. Код: Выделить всё <!-- Использование атрибута NAME: -->
<A NAME="history">История бодибилдинга</A>
...
<A NAME="now">Спорт глазами современника</A>
...
Вернуться к разделу<A HREF="#history">истории</A>Код: Выделить всё <!-- Использование атрибута HREF: -->
<A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A>
<A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A>
...Код: Выделить всё <!-- Создадим ссылку для письма с указанием кучи атрибутов -->
<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 для всех гиперссылок в текущем документе. Текстовые блоки. Тэги H1, P, DIV, ADDRESS, BLOCKQUOTE, BR, HRВ этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки. Элементы: H1,H2,...H6 - Используются для создания заголовков текста
пример
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы. Атрибуты: ALIGN - определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center. Код: Выделить всё <H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2>Заголовок поменьше</H2>
...
<H6>Малюююсенький такой заголовочек</H6>
P - Используется для разметки параграфов.
пример
Используется для разметки параграфов. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left. Код: Выделить всё <P ALIGN="center">Это центрированный параграф.<BR>
Текст располагается в центре окна браузера</P>
<P ALIGN="right">А это параграф, выровненный по правому краю.</P>
DIV - Отделяет блок HTML-документа от остальной его части
пример
Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты: ALIGN - определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center. Код: Выделить всё ...Текст документа...
<DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...
У атрибута ALIGN есть еще одно значение - justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю.
ADDRESS - Оформляет текст как почтовый адрес
пример
Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом. Код: Выделить всё Пишите по следующему адресу:
<ADDRESS>
Москва. ул. Академика Королева, 13 <BR>
Мурзилке
</ADDRESS>
Internet Explorer версии 3.0 неверно интерпретирует конечный тег </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста: Код: Выделить всё <ADDRESS>
Мой адрес не дом и не улица, <BR>
Мой адрес – Советский Союз.
</ADDRESS>
<!-- избавляемся от глюка -->
<I></I>
Нормальный текст
...
BLOCKQUOTE - Оформляет текст как цитату
пример
Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличии от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Код: Выделить всё Редакция журнала "Домосед" выражает благодарность
Бухаресту Магарычу Шницелю за замечательное стихотворение:
<BLOCKQUOTE>
Синели красные ромашки,<BR>
Желтели в небе облака,<BR>
Синицы в теплый край летели,<BR>
К истоку двигалась река.<BR>
</BLOCKQUOTE>
BR - Осуществляет перевод строки
пример
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега. Атрибуты: CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения : all - завершить обтекание изображения текстом. left - завершить обтекание текстом изображения, выровненного по левому краю. right - завершить обтекание текстом изображения, выровненного по правому краю. Код: Выделить всё Первое предложение<BR>Второе предложение на следующей строке
HR - Вставляет в текст горизонтальную разделительную линию
пример
Вставляет в текст горизонтальную разделительную линию. Атрибуты: WIDTH - определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE - определяет толщину линии в пикселах. ALIGN - определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left - выравнивание по левому краю документа. right - выравнивание по правому краю документа. center - выравнивание по центру документа (используется по умолчанию). NOSHADE - определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR - определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer. Код: Выделить всё Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией.
Форматирование текста. Тэги BASEFONT, FONT, I, EM, B, STRONG, U, S, STRIKE, BIG, SMALL, SUP, SUB, CODE, SAMP, TT, KBD, VAR, CITEВ этом разделе описаны элементы для оформления и смыслового выделения текста - подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д. Элементы форматирования текста: BASEFONT - Определяет основной шрифт, которым должен отображаться текст документа
пример
Не имеет конечного тега. Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент 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> 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, работают некорректно.
I - Выделяет текст курсивом
пример
Текст, заключенный между начальным и конечным тегами, будет выделен курсивом.
EM - Используется для смыслового выделения текста (курсивом)
пример
Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тегами. Результат обычно отображается курсивом. То есть элемент EM по действию практически аналогичен элементу I. Код: Выделить всё Порой в России встречаются <EM>действительно талантливые</EM> веб-мастера.Согласно рекомендациям W3C, приветствуется использование <EM> вместо <I>.
B - Выделяет текст жирным шрифтом
пример
Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом.
STRONG - Усиленное выделение текста (жирным)
пример
Усиленное выделение. Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B. Согласно рекомендациям W3C, приветствуется использование <STRONG> вместо <B>.
U - Выделяет текст подчеркнутым
пример
Данный элемент отображает помещенный между начальным и конечным тегами текст как подчеркнутый.
S, STRIKE - Выделяет текст перечеркнутым
пример
Элемент STRIKE отображает помещенный между начальным и конечным тегами текст как перечеркнутый. В HTML 3.2 вместо <STRIKE> был предложен более краткий тег <S>.
BIG - Отображает текст увеличенным шрифтом (относительно текущего)
пример
Текст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего). Тег <BIG> аналогичен по действию тегу <FONT SIZE="+1"> (см. элемент FONT).
SMALL - Отображает текст уменьшенным шрифтом (относительно текущего)
пример
Текст, заключенный между начальным и конечным тегами, отображается уменьшенным шрифтом (относительно текущего). Код: Выделить всё Небоскребы, небоскребы, а я <SMALL>маленький</SMALL> такойТег <SMALL> аналогичен по действию тегу <FONT SIZE="-1"> (см. элемент FONT).
SUP - Отображает текст со сдвигом вверх (верхний индекс)
пример
Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.
SUB - Отображает текст со сдвигом вниз (нижний индекс)
пример
Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу. Код: Выделить всё X<SUB>i</SUB> = B<SUB>i</SUB> + C<SUB>i</SUB> CODE, SAMP Оформляют текст как формулу или программный код
пример
Данные элементы оформляют текст, находящийся между начальным и конечным тегами, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом. Код: Выделить всё Формула: <CODE> n=((x*15-z/1.25)/4)^5 </CODE> TT - Отображает текст моноширинным шрифтом
пример
Данный элемент отображает помещенный между начальным и конечным тегами текст моноширинным шрифтом. Считается устаревшим. Код: Выделить всё <TT>СЕНЯ ЗПТ ТВОЮ МАТЬ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК</TT> KBD - Выделяет текст, который предлагается набрать на клавиатуре
пример
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тегами, выделяется жирным моноширинным шрифтом. Код: Выделить всё Чтобы войти в систему наберите <KBD>"GUEST"</KBD> заглавными буквами VAR - Используется для обозначения в тексте переменных
пример
Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.
CITE - Оформляет текст как цитату или ссылку на источник
пример
Оформляет находящийся между начальным и конечным тегами текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом. Код: Выделить всё Как сказал классик:<BR>
<CITE>"Грамотное написание HTML способствует пищеварению"</CITE> Списки. Тэги UL, OL, LI, MENU, DIR, DL, DT, DDСписки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера. Элементы: UL - Создает неупорядоченный список
пример
Создает неупорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. Код: Выделить всё <UL>
<LI> Первый пункт списка </LI>
<LI> Второй пункт списка </LI>
<LI> Третий пункт списка </LI>
</UL> OL - Создает упорядоченный список
пример
Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов 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> LI - Создает пункт меню внутри элементов OL или UL
пример
Создает пункт в списке. Располагается внутри элементов 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>, кто-то не будет – это не так уж и важно. Главное, чтобы вы однажды определились и не изменяли своему решению.
MENU, DIR - Создает неупорядоченный список, подобный UL
пример
Данные теги предназначены для создания неупорядоченных списков, подобных UL. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры могут распознавать их в целях обратной совместимости. Авторам же рекомендуется использовать вместо MENU и DIR элемент UL.
DL - Открывает и закрывает список определений
пример
Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью элементов DT и DD. АтрибутыCOMPACT - включает режим "компактного" отображения списка. Удобно использовать, если список определений очень велик. Данный атрибут является флагом и не требует присвоения значения. Код: Выделить всё <DL COMPACT>
<DT>Жапура</DT>
<DD>Река в Колумбии и Бразилии</DD>
<DT>Зайцы</DT>
<DD>Семейство млекопитающих отряда зайцеобразных</DD>
...
</DL> DT - Создает термин в списке определений внутри элемента DL
пример
Создает термин в списке определений внутри элемента DL.
DD - Cоздает определение термина внутри элемента DL
пример
Cоздает определение термина внутри элемента DL.
Объекты. Тэги IMG, EMBED, NOEMBED, APPLET, PARAMОбъекты - это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, VRML. Элементы: IMG - Используется для вставки в HTML изображений
пример
Используется для вставки изображений в 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), заданную элементом [#navmaps/map.php MAP]. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - "map1", то ссылка на нее будет выглядеть как "#map1" . Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные. ISMAP - определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения. Код: Выделить всё <IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселовКод: Выделить всё <A href="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справаКод: Выделить всё <A href="http://www.igf.ru/bin/imagemaps/map1">
<IMG SRC="map.gif" ISMAP></A>');Код: Выделить всё <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 + локальные карты.
EMBED - Используется для вставки в HTML различных объектов
пример
Используется для вставки в 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-тип файла. Код: Выделить всё <EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>Код: Выделить всё <EMBED SRC="music.vrml" HEIGHT="300" WIDTH="200" HSPACE="10" ALIGN="center" PLUGINSPACE="../plugins/download_vrml.html">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>
Обратите внимание - в спецификациях консорциума W3C про EMBED ничего не сказано (!), скороее всего данный элемент появился по инициативе разработчиков Netscape 1.1 и с тех пор поддерживается всеми браузерами для совместимости (начиная с MSIE 3.0-beta-2 и выше).
Каким бы привлекательным элемент EMBED вам ни казался, но, поверьте, лучше его не использовать. Далеко не каждому может понравиться принудительное проигрывание MID-файла или попытка прокрутить ролик в неизвестном браузеру формате. Если вам все же не терпится украсить HTML чем-нибудь из ряда вон выходящим, не поленитесь, потратьте время на усиленное тестирование со всеми популярными видами браузеров.
NOEMBED - Используется, если браузер не поддерживает элемент EMBED
пример
Определяет блок, который будет отображен, если браузер по какой-либо причине не работает с элементом EMBED. Код: Выделить всё <EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED> Ваш браузер морально устарел ;-D </NOEMBED>
</EMBED> APPLET - Используется для вставки в HTML Java-апплетов
пример
Имеет начальный и конечный теги. Используется для вставки в 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), ассоциированный с апплетом. Например, адрес сайта разработчика апплета. Код: Выделить всё <APPLET CODE="JumpingGirl.class" WIDTH="30" HEIGHT="40" ALIGN="left" ALT="Прыгающая девочка">
Если вы видите этот текст, значит ваш браузер не поддерживает Java.
</APPLET>В результате слева отображается окошко (размером 30x40 точек) с прыгающей девочкой. Само собой, у вас должен быть файл JumpingGirl.class, который должен лежать в той же директории, что и текущий документ. Код: Выделить всё <APPLET CODEBASE="http://www.igf.ru/javagames" CODE="CrazyTetris.class" WIDTH="300" HEIGHT="500" ALIGN="right" SRC="http://www.igf.ru" ALT="Игра Тетрис">
</APPLET>В данном примере браузер будет пытаться загрузить Java-апплет игры используя URL "http://www.igf.ru/javagames/СrazyTetris.class". В при наличии файла справа отобразится окошко (размером 300x500 точек) с игрой Тетрис. Для передачи Java-программе каких-либо параметров используется элемент PARAM.
PARAM - Используется для передачи параметров Java-программе (см. элемент APPLET)
пример
Располагается в начале элемента 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> Таблицы. Тэги CAPTION, TABLE, TD, TH, TRДля построения таблиц в HTML коде используются следующие тэги: CAPTION - Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.
пример
Атрибуты: ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top - помещает заголовок над таблицей (значение по умолчанию); bottom - помещает заголовок под таблицей. Код: Выделить всё <TABLE BORDER="1">
<CAPTION ALIGN="bottom">Заголовок таблицы</CAPTION>
<TR>
<TD>Ячейка таблицы</TD>
</TR>
</TABLE>
TABLE - Элемент для создания таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, CAPTION, TD и TH.
пример
Атрибуты:
ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию – left.
VALIGN – должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle.
BORDER – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.
CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек.
WIDTH – определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
TD и TH - Элемент 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 рисунка.
Границы ячейки отображаются только в том случае, когда она имеет некое содержание. Чтобы получить пустую ячейку с границами, достаточно поместить в нее специальный символ или маленькую прозрачную gif-картинку.
TR - Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
пример
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Примеры построения таблиц:
смотреть
Код: Выделить всё <TABLE BORDER>
<TR>
<TH ROWSPAN=2>HDD</TH>
<TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD>
</TR>
<TR>
<TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD>
</TR>
</TABLE>Код: Выделить всё <TABLE BORDER>
<TR>
<TH COLSPAN=2>Video</TH>
</TR>
<TR>
<TD>Matrox G400</TD><TD ALIGN="right">115$</TD>
</TR>
<TR>
<TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD>
</TR>
</TABLE>
Формы. Тэги FORM, TEXTAREA, SELECT, OPTION, INPUTС помощью описанных ниже элементов вы можете создавать заполняемые анкеты, опросники и различные поля для ввода текста пользователем с возможностью последующей отправки заполненной формы на ваш сервер. Элементы для создания форм: 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>, это должно помочь.
TEXTAREA - Создает поле для ввода нескольких строк текста
пример
Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент 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>
... 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>
... OPTION - Создает отдельные пункты в меню (см. SELECT)
пример
Используется только с элементом 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>
... 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-типа. Код: Выделить всё <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>Код: Выделить всё Хочу получать следующие издания:<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>
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
|
|
|
|
|
| Администратор |
|
Стаж: 8 лет 7 месяцев 2 дня
Сообщения: 1223
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
footer ОписаниеВ самом HTML документе footer отсутствует, но на сайтах и даже в отдельных HTML файлах он может присутствовать. Это просто вставка блока для удобства применения и размещается он перед закрывающим тэгом </BODY>. В подвале обычно размещают всевозможную статистическую информация, информацию о хозяевах и разработчиках, а также ссылки на возможности связи. Если что интересное (в оформлении) встретится - размещу здесь. Простой подвал будет выглядеть так: Код: Выделить всё <div id="footer">
<table width="100%">
<tr>
<td width="30%">Левая ячейка. Текст прижат к левому краю</td>
<td width="30%" align="center">Текст по центру</td>
<td width="30%" align="right">Правая ячейка. Текст прижат к правому краю</td>
</tr>
</table>
<div>id="footer" позволяет задать внешний вид подвала. Предположим, что стиль такой: {border:1px solid #069;height:50px;} - то есть блок имеет бордер толщиной 1px синего цвета и высоту 50px. Такой простой код в реале будет выглядеть так: Левая ячейка.
Текст прижат к левому краю | Текст по центру | Правая ячейка.
Текст прижат к правому краю |
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
|
|
|
