Личный сайт Мочалова Дмитря по клички “DIMOK”|foto|web dizainery|html yshebniki|

HTML - введение

HyperText Markup Language (HTML) является стандартным языком, предназначенным для
создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться 
различными типами WEB-броузеров. Когда документ создан с использованием HTML, 
WEB-броузер может интерпретировать HTML для выделения различных элементов документа 
и первичной их обработки. Использование HTML позволяет форматировать документы для 
их представления с использованием шрифтов, линий и других графических элементов на 
любой системе, их просматривающей. Большинство документов имеют стандартные элементы, 
такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать 
данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения 
данных элементов, сохраняя вцелом общую структуру и информационную полноту документов. 
Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует 
тэги HTML и воспроизводит на экране документ в виде, который ему придает автор. 
В большинстве случаев автор документа строго определяет внешний вид документа. 
В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной 
степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, 
где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет 
WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг 
начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и 
представляет документ в одну строку. Пользователи некоторых WEB-броузеров имеют, также, 
возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение 
документа.

Структура документа

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </html>

--------------------------------------------------------------------------------

Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML> 
<HEAD> 
<TITLE> Список сотрудников </TITLE> 
</HEAD> 
...

Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

--------------------------------------------------------------------------------

Заголовок документа <TITLE>

Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

--------------------------------------------------------------------------------

Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:

Комментарии могут встречаться в документе где угодно и в любом количестве.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию. 
----------------------------------------------------------------------

Тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и 
<div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div>
</body>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

----------------------------------------------------------------------

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1> 
Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx> 
где x - цифра от 1 до 6, определяющая уровень заголовка.

---------------------------------------------------------------------

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

----------------------------------------------------------------------

Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER> 
будут находиться в центре окна

----------------------------------------------------------------------

Тэг преформатирования <PRE>

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

перевод строки 
символы табуляции (сдвиг на 8 символов вправо) 
непропорциональный шрифт, устанавливаемый броузером 
Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div>
</body>
</HTML> 
Вот, что вы увидите на экране броузера:

Список сотрудников нашей фирмы 
Составлено : 30 июля 1996 года 
Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Список может быть использован только в служебных целях.

Внимание! Заголовок "Список сотрудников" не отображен броузером как часть документа. Он появится в заголовке окна броузера.

----------------------------------------------------------------------

Разрыв строки <BR>

Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:

Алексей Ярцев <BR> 
Дмитровское шоссе, <BR> 
д.9Б, офис 326 <BR>

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> 
<img src="http://www.softexpress.com/images/schema1.gif" align=baseline> 
Мастер/Деталь </p>

----------------------------------------------------------------------

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Данная строка является самой длинной строкой документа,
 которая не допускает какого-либо разбиения где бы то ни было

----------------------------------------------------------------------

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P> 
<BLOCKQUOTE> 
Сегодня один из величайших дней для нашей компании. <BR> 
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. 
</BLOCKQUOTE>

При отображении броузером данный текст будет выглядеть так:

На открытии данной конференции глава представительства произнес:

Сегодня один из величайших дней для нашей компании. 
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.

Тэги списков

Существует три основных вида списков в HTML-документе:

пронуменрованный 
непронуменрованный 
список описаний 
Вы можете создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка - зависит от броузера. Более подробно смотри в разделе "Вложенные списки".

--------------------------------------------------------------------------------

Пронумерованные списки

В пронумерованном списке броузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL> 
<LI> Программирование 
<LI> Алгоритмизация 
<LI> Проектирование 
</OL>

Программирование 
Алгоритмизация 
Проектирование 
Тэг <OL> может иметь параметры:

где:

TYPE

Вид счетчика:

A - большие латинские буквы (A,B,C...) 
a - маленькие латинские буквы (a,b,c...) 
I - большие римские цифры (I,II,III...) 
i - маленькие римские цифры (i,ii,iii...) 
1 - обычные цифры (1,2,3...) 
START=n

Число, с которого начинается отсчет

Например:

<OL TYPE=I START=15> 
<LI> Программирование 
<LI> Алгоритмизация 
<LI> Проектирование 
</OL>

Программирование 
Алгоритмизация 
Проектирование

--------------------------------------------------------------------------------

Непронумерованные списки.

Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера.

Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL> 
<LI> Программирование 
<LI> Алгоритмизация 
<LI> Проектирование 
</UL>

Программирование 
Алгоритмизация 
Проектирование 
Тэг <UL> может иметь параметр:

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square> 
<LI> Программирование 
<LI> Алгоритмизация 
<LI> Проектирование 
</UL>

Программирование 
Алгоритмизация 
Проектирование

--------------------------------------------------------------------------------

Вложенные списки

Дадим пример вложенных списков:

<HTML> 
<HEAD> 
<TITLE> Список сотрудников </TITLE> 
</HEAD> 
<BODY> 
<H2> Список сотрудников нашей фирмы </H2> 
<H3> Составлено : 30 июля 1996 года </H3> 
Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> 
Список может быть использован только в служебных целях. <P> 
<OL> 
<LI> Дирекция 
<UL> 
<LI> Иванов И.И. 
<LI> Петров К.В. 
</UL> 
<LI> Отдел маркетинга 
<UL> 
<LI> Варшавская Е.Л. 
<LI> Самсонов Д.М. 
</UL> 
</OL>

Вот, что вы увидите на экране броузера:

Список может быть использован только в служебных целях.

Дирекция 
Иванов И.И. 
Петров К.В. 
Отдел маркетинга 
Варшавская Е.Л. 
Самсонов Д.М.

--------------------------------------------------------------------------------

Элемент списка <LI> 
Тэг <LI> может иметь параметры:

в зависимости от того, в списке какого вида находится данный элемент.

TYPE

Вид маркера (см. <UL>) или счетчика (см.OL)

VALUE=n

Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

Например:

<OL TYPE=I START=15> 
<LI> Программирование 
<LI TYPE=i VALUE=25> Алгоритмизация 
<LI> Проектирование 
</OL>

Программирование 
Алгоритмизация 
Проектирование

--------------------------------------------------------------------------------

Список определений

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>. Например:

<DL> 
<DT> <B> Отдел маркетинга </B> 
<DD> Данный отдел занимается продвижением продуктов и услуг 
<DT> <B> Финансовый отдел </B> 
<DD> Данный отдел занимается всеми финансовыми операциями 
<DT> <B> Отдел кадров </B> 
<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д. 
</DL> Отдел маркетинга 
Данный отдел занимается продвижением продуктов и услуг 
Финансовый отдел 
Данный отдел занимается всеми финансовыми операциями 
Отдел кадров 
Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д.

Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его броузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

Внимание! Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако, HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.

--------------------------------------------------------------------------------

URL

HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.php

Следующий пример представляет собой вызов HTML-документа index.php с сервера www.softexpress.com с использованием HTTP протокола:

http://www.softexpress.com/index.php

Uniform Resource Locator имеет следующий формат:

method://servername:port/pathname#anchor

Опишем каждый из компонентов URL:

METHOD

Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:

file:

чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: 
file:/home/alex/index.php - отобажает файл index.php из каталога /home/alex на пользовательской машине

http:

доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: 
http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress

ftp:

запрос файла с анонимного FTP-сервера. Например: 
ftp://hostname/directory/filename

mailto:

активизирует почтовую сессию с указанным пользователем и хостом. Например: 
mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слэшей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)

telnet:

обращение к службе telnet

news:

вызов службы новостей, если броузер ее поддерживает. Например: 
news:relcom.www.support

SERVERNAME

Необязательный параметр, описывающий полное сетевое имя машины. Например:

www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.

Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.

PORT

Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME

Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например:

http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слэши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL закагчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.php).

#ANCHOR

Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.

--------------------------------------------------------------------------------

Структура ссылок в HTML-документе

Пока что мы рассмотрели только внешний вид URL. Для того, чтобы броузер отобразил ссылку на URL, необходимо отчетить URL специальными тэгами в HTML-документе. Синтаксис HTML, позволяющий жто сделать - следующий:

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

--------------------------------------------------------------------------------

Ссылки на точки внутри документа

Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, броузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет ращзмещена на первой строке окна броузера (если данная строка не присутствует уже на экране броузера).

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке-броузера </A>

2. Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A>

Например:

<p><b>Список разделов</b></p> 
<ul> <li><a href="#ex1">Раздел 1</a></li> 
<li><a href="#ex2">Раздел 2</a></li> </ul> 
<p><a name="ex1"></a>Раздел 1</p> 
<ul> <p>Текст раздела 1</p> </ul> 
<p><a name="ex2"></a>Раздел 2</p> 
<ul> <p>Текст раздела 2 <br></p>

Список разделов

Раздел 1 
Раздел 2 
Раздел 1

Текст раздела 1

Раздел 2

Текст раздела 2

Символы "#ex1" сообщает вашему броузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".

Когда пользователь щелкнет мышью на строке "Раздел 1", броузер перейдет сразу к разделу 1.

Внимание! Как ранее было показано в синтаксисе URL, маркер раздела может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае броузер осуществит подгрузку другого документа и перейдет к указанному для него разделу.

Графика внутри HTML-документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

Опишем элементы синтаксиса тэга:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

ALT="text"

Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

Данный необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2

Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселах.

ALIGN

Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.

ISMAP

Этот параметр сообщает броузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML и будет обсуждена нами позже.

Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

Новые параметры:

BORDER

Данный параметр позволяет автору определить ширину рамки вокруг рисунка.

VSPACE

Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.

HSPACE

То же самое, что и VSPACE, но только по горизантали.

--------------------------------------------------------------------------------

Фоновые рисунки

Большинство броузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

--------------------------------------------------------------------------------

Задание стандартных цветов

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR

Цвет фона документа

TEXT

Цвет простого текста документа

LINK

Цвет ссылки

Цвет задается шестизначным числом в шестнадцатиричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например:

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

--------------------------------------------------------------------------------

Горизонтальная линия

Используя тэг <HR> вы можете разделить текст горизонтальной чертой.

Формат тэга:

Параметры тэга:

SIZE

Толщина линии в пикселах.

WIDTH

Ширина линии в пикселах или процентах от ширина окна броузера.

ALIGN

Расположение на экране (слева | по центру | справа).

NOSHADE

По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

Добавление стилей в HTML документ

HTML позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством броузеров:

bold (жирный) 
italic (наклонный) 
mono spaced (type writer - с использованием фиксированных шрифтов) 
Вы можете комбинировать различные виды стилей, например жирный и наклонный.

Стиль  Элемент или тэг  Результат  
Bold  <B> Этот текст жирный </B>  Этот текст жирный  
Italic  <I> Этот текст наклонный </I>  Этот текст наклонный  
Mono spaced  <TT> Этот текст с непроп. шрифтом </TT>  Этот текст с непроп. шрифтом

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!

Дополнительные стили:

big (юольшой) 
small (маленький) 
sub (подстрочник) 
sup (надстрочник) 
Стиль  Элемент или тэг  Результат  
Big  Этот текст <BIG> большой </BIG>  Этот текст большой  
Small  Этот текст <SMALL> маленький </SMALL>  Этот текст маленький  
Sub  Этот текст <SUB> подстрочник </SUB>  Этот текст подстрочник  
Sup  Этот текст <SUP> надстрочник </SUP>  Этот текст надстрочник

--------------------------------------------------------------------------------

Размер шрифта <FONT SIZE>

Вы можете изменять размер шрифта при помощи тэга:

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:

Например:

и зменени е

--------------------------------------------------------------------------------

Цвет шрифта <FONT SIZE>

Вы можете изменить цвет шрифта при помощи тэга:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000"> 
Красный </FONT> 
<FONT COLOR="#00FF00"> 
Зеленый </FONT> 
<FONT COLOR="#0000FF"> 
Синий </FONT>

Красный Зеленый Синий

Тэги формы

TEXTAREA

Тэг "<"TEXTAREA">" используется для того, чтобы позволить пользователю вводить более одной
 строки информации (свободный текст). Вот пример использовани тэга "<"TEXTAREA">":

"<"TEXTAREA NAME="address" ROWS=10 COLS=50">"
Москва,
Дмитровкое шоссе,
д.9Б, офис 448
"<"/TEXTAREA">" 
Атрибуты, используемые внутри тэга "<"0TEXTAREA">" описывают внешний вид и имя вводимого 
значения. Тэг "<"/TEXTAREA">" необходим даже тогда, когда поле ввода изначально пустое.
 Описание атрибутов:

NAME - имя поля ввода 
ROWS - высота поля ввода в символах 
COLS - ширина поля ввода в символах 
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо
 вставить его внутри тэгов "<"TEXTAREA">" и "<"/TEXTAREA">".

INPUT

Тэг "<"INPUT">" используется для ввода одной строки текста или одного слова. Атрибуты тэга:

CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.

MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. 
При превышении количества допустимых символов броузер реагирует на попытку ввода нового 
символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH 
больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно 
бесконечности.

NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, 
впоследствии, вы сможете получить данные, помещенные пользователем в это поле.

SIZE - определяет визуальный размер поля ввода на экране в символах.

SRC - URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).

TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. 
Остальные типы должны быть явно указаны: 
CHECKBOX
Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем 
данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

HIDDEN
Поля данного типа не отображаются броузером и не дают пользователю изменять присвоенные 
данному полю по умолчанию значение. Это поле используетс для передачи в CGI-программу
 статической информации, как то ID прользователя, пароля или другой информации.

IMAGE 
Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии 
мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа.
 Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных:
 первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную 
будет помещена X-координата точки в пикселах ( считая началом координат левый верхний угол 
рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся
 в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются.
 Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом "<"IMG">".

PASSWORD 
То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается броузером на
 экране.

RADIO 
Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора 
альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными 
значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет 
передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, 
которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа 
RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут 
невыбранными на экране.

RESET 
Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для 
них по умолчанию.

SUBMIT 
Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), 
описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на 
кнопке.

TEXT 
Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH 
и SIZE для определения максимальной длинны вводимого значения в символах и размера 
отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при 
использовании типа RADIO (для типа RADIO данный атрибут обязателен)

Меню выбора в формах

Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:

Select - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Даннй вид представляется как выпадающий LISTBOX. 
Select single - то же самое, что и Select, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг. 
Select multiple - позволяет выбрать несколько элементов из LISTBOX. 
SELECT

Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

Тэг SELECT имеет один или более параметр пежду стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <SELECT>:

<FORM>
<SELECT NAME=group>
<OPTION> AT 386
<OPTION> AT 486
<OPTION> AT 586
</SELECT>
</FORM> 
SELECT SINGLE

Тэг SELECT SINGLE - это то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:

<FORM>
<SELECT SINGLE NAME=group SIZE=4>
<OPTION> AT 386
<OPTION> AT 486
<OPTION> AT 586
<OPTIONS> Pentium PRO
</SELECT>
</FORM> 
SELECT MULTIPLE

Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Пример:

<FORM>
<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>
<OPTION> AT 386
<OPTION> AT 486
<OPTION> AT 586
<OPTIONS> Pentium PRO
</SELECT>
</FORM> 
Если выбрано одновременно несколько значений, то серверу передаютс соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.