Основы HTML
Структура HTML
Документ HTML начинается с декларации, за которой идут элемент <HTML>, заголовок (HEAD) и тело (BODY) документа: <HTML> <HEAD> <TITLE>Наименование документа</TITLE>... Заголовок документа </HEAD> <BODY>... Тело документа </BODY> </HTML> Документ HTML должен начинаться с декларации. Спецификация HTML не содержит никаких требований к объектам хранения (например, к файлам). Таким образом, HTML-документы могут генерироваться динамически. Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Кроме того, документ HTML должен включать наименование документа (TITLE). Минимальный документ HTML, таким образом, выглядит так: <TITLE>Минимум</TITLE>
Заголовок(тэг HEAD)
Метки <HEAD> и </HEAD> указывать не обязательно(но желательно). Заголовок может содержать в любом порядке любые из указанных ниже элементов:(Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, Заголовок документа не появляется при отображении самого документа в окне.)
TITLE
определяет наименование документа (обязательный элемент)
STYLE
зарезервирован для использования со списками стилей
SCRIPT
зарезервирован для использования со скриптами
ISINDEX
предназначен для организации простого поиска по ключевому слову; см. описание атрибута PROMPT
BASE определяет базовый ресурс, относительно которого происходит адресация по относительным ссылкам
META содержит мета-информацию в виде пар имя/значение
LINK определяет отношение к другим документам
Элементы TITLE, SCRIPT и STYLE должны иметь открывающую и закрывающую метки. Для остальных элементов закрывающие метки запрещены.
TITLE
Документ HTML должен содержать один элемент TITLE в заголовке. В наименовании документа могут использоваться символьные объекты. Метки внутри элемента TITLE, однако, запрещены.
Пример элемента TITLE: <TITLE>Заголовок документа HTML</TITLE>
ISINDEX
Элемент ISINDEX показывает, что документ представляет собой оглавление, в котором можно производить поиск по ключевому слову. Ограничений на длину запроса нет. Для определения текста подсказки можно использовать атрибут PROMPT например: <ISINDEX PROMPT="Поиск по ключевому слову:">; Семантика элемента ISINDEX в настоящее время определена только для случая, когда в качестве базового ресурса указан ресурс, доступный по протоколу передачи гипертекстов (http://). Как правило, когда пользователь нажимает клавишу Enter (Return), на сервер, определенный как базовый ресурс, отправляется соответствующий запрос. Например, если пользователь ввел запрос "I am a programmer", а в качестве базового ресурса указано:
http://meltingpot.fortunecity.com/wisconsin/536 генерируется вот такой запрос:
http://meltingpot.fortunecity.com/wisconsin/536/?I+am+a+programmer"
Пробелы конвертируются в плюсы (+).
Обратите внимание: на практике, в строке запроса могут содержаться только символы из набора Latin-1, поскольку в настоящее время не существует возможности указать набор символов, на основе которого построен текст запроса.
BASE
Элемент BASE указывает базовый ресурс, относительно которого выполняются относительные ссылки, например:
<BASE href="http://i.am/vd-s">
...
<IMG SRC="1.gif">
В этом случае изображение загружается из файла
http://i.am/vd-s/1.gif
В отсутствие элемента BASE в качестве базы используется местонахождение текущего документа. Обратите внимание: фактическое местонахождение документа может отличаться от имени ресурса, к которому был адресован HTTP-запрос, поскольку базовое местонахождение может быть переопределено заголовком HTTP, сопровождающим документ.
META
Элемент META определяет пару имя/значение, описывающую некоторое свойство документа: информацию об авторе, список ключевых слов и т.п. Атрибут NAME указывает имя переменной, а атрибут CONTENT — значение переменной.
<META NAME="VD-S" CONTENT="Html">
Вместо атрибута NAME можно использовать атрибут HTTP-EQUIV. Серверы протокола передачи гипертекстов (HTTP) могут использовать свойства, определенные атрибутом HTTP-EQUIV для создания заголовка в соответствии с RFC 822, хотя некоторые элементы заголовков HTTP таким образом создать нельзя. Более подробную информацию можно найти в спецификации HTTP.
Пример:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
приведет к генерации заголовка HTTP:
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Такая переменная может использоваться в кэше для определения того, до какого времени действительна кэшированная копия документа.
LINK
LINK позволяет определять отношение текущего документа к другим документам и ресурсам. LINK входит в спецификации HTML уже очень давно, хотя очень немногие браузеры поддерживают этот элемент (большинство все еще его игнорирует). В принципе, элемент LINK можно использовать: для навигации (создание меню или кнопок), для контроля за печатью HTML-файлов, для компоновки дополнительных ресурсов (списков стилей и скриптов), для показа альтернативных форм текущего документа, Допустимые атрибуты элемента LINK:
href
Указывает ресурс для компоновки.
rel
Прямое отношение, или "тип связки". Определяет отношение текущего документа к ресурсу, указанному в атрибуте HREF. Отношения в HTML пока не стандартизованы, хотя уже существуют некоторые соглашения на этот счет.
rev
Определяет обратное отношение. Связка от документа A к документу B с указанием REV=отношение отражает то же самое отношение, что связка из B к A with REL=отношение. Иногда для указания автора (домашней страницы или адреса электронной почты в виде ресурса типа mailto:) используется отношение REV=made.
title
Необязательное наименование скомпонованного ресурса.
Вот некоторые предлагаемые отношения:
rel=top
Ссылка на вершину иерархии: первую или заглавную страницу в коллекции.
rel=contents
Ссылка на документ, выполняющий функции оглавления коллекции.
rel=index
Ссылка на документ, выполняющий функции оглавления текущего документа.
rel=glossary
Ссылка на документ, в котором находится словарь терминов, относящихся к текущему документу.
rel=copyright
Ссылка на документ, в котором находится информация об авторском праве на текущий документ.
rel=next
Ссылка на следующий документ в последовательности.
rel=previous
Ссылка на предыдущий документ в последовательности.
rel=help
Ссылка на документ, содержащий систему помощи: описание более широкого контекста и дополнительные ссылки.
rel=search
Ссылка на поисковый механизм, связанный с коллекцией.
Примеры элементов LINK:
<LINK REL=Contents HREF=doc1.html>
<LINK REL=Previous HREF=doc2.html>
<LINK REL=Next HREF=doc3.html>
<LINK REL=Chapter REV=Contents HREF=chapter2.html>
Тело HTML (тэг BODY)
Тело документа должно находиться между тэгами <BODY>; и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа. Метки <BODY> и </BODY> не обязательны.
Основные атрибуты метки <BODY>:
bgcolor
Определяет цвет фона документа.
text Определяет цвет текста.
link Определяет цвет гипертекстовых ссылок.
vlink Определяет цвет использованных гипертекстовых ссылок.
alink Определяет цвет гипертекстовой ссылки в момент нажатия на нее.
background Определяет изображение, служащее фоном.
Элементы уровня блока и уровня текста
Большая часть элементов, которые могут находиться в теле документа, относится либо к элементам уровня блока, либо к элементам уровня текста. Различие состоит в том, что новый элемент уровня блока всегда открывает собой новый абзац. Наиболее часто встречающиеся элементы уровня блока — это H1... H6 (заголовки), P (абзацы), LI (элементы списков) и HR (горизонтальные линии). Наиболее часто встречающиеся элементы уровня текста — это EM, I, B и FONT (метки форматирования шрифта), A (гипертекстовые ссылки), IMG и APPLET (встроенные объекты) и BR (разрывы строк). Обратите внимание: элементы-блоки могут содержать в себе другие элементы уровня блока и элементы уровня текста, а элементы уровня текста — только другие элементы уровня текста.
Заголовки
Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:
<H1> Заголовок первого уровня </H1>
Заголовки другого уровня могут быть представлены в общем случае так:
<Hx> Заголовок x-го уровня </Hx> где x - цифра от 1 до 6, определяющая уровень заголовка.
ADDRESS
Тэг <ADDRESS> используется для выделения автора документа и его дреса (например, e-mail). Синтаксис:
<ADDRESS> Адрес-автора </ADDRESS>
Элементы уровня блока
P абзацы
Открывающая метка обязательна, закрывающую можно не указывать. С помощью атрибута ALIGN можно устанавливать выравнивание, например,
<P ALIGN=RIGHT>
UL ненумерованные списки
Открывающая и закрывающая метки обязательны. Список может содержать один или более элементов LI, определяющих пункты списка.
OL нумерованные списки
Открывающая и закрывающая метки обязательны. Список может содержать один или более элементов LI, определяющих пункты списка.
DL списки определений
Открывающая и закрывающая метки обязательны. Список может содержать элементы DT (термины) и элементы DD (соответствующие определения).
PRE предварительно форматированный текст
Открывающая и закрывающая метки обязательны. Такие элементы выводятся на экран шрифтом с фиксированной шириной символа с сохранением форматирования, определенного пробелами и символами конца строки.
DIV разделы документа
Открывающая и закрывающая метки обязательны. Используется с атрибутом ALIGN для установки выравнивания текста, находящегося в блоках внутри него. Допустимые значения: ALIGN=LEFT, ALIGN=CENTER и ALIGN=RIGHT.
CENTER выравнивание текста по центру
Открывающая и закрывающая метки обязательны. Используется для центрирования текста внутри элемента CENTER. См. также DIV.
BLOCKQUOTE цитата
Открывающая и закрывающая метки обязательны. Используется для приведения длинных цитат. Выводится на экран с увеличенными полями.
FORM формы
Открывающая и закрывающая метки обязательны. Используется для создания форм, которые в дальнейшем обрабатываются серверами HTTP. Допустимые атрибуты — ACTION, METHOD и ENCTYPE. Форму нельзя размещать внутри другой формы.
ISINDEX примитивные формы
Закрывающая метка запрещена. Более ранний по сравнению с FORM элемент. Используется для создания простых форм с одним текстовым полем ввода. В документе допускается только один элемент ISINDEX.
HR горизонтальные линии
Закрывающая метка запрещена. Допустимые атрибуты — ALIGN, NOSHADE, SIZE и WIDTH.
TABLE таблицы; могут встраиваться одна в другую
Открывающая и закрывающая метки обязательны. Таблица начинается с необязательного заголовка CAPTION, за которым следует один или несколько элементов TR, определяющих горизонтальные ряды ячеек. В каждом ряду может быть одна или несколько ячеек, определенных элементами TH или TD. Допустимые атрибуты элемента TABLE — WIDTH, BORDER, CELLSPACING и CELLPADDING.
Более подробно о абзацах смотри соответствующий пункт меню!!!
Базовые тэги
<HTML> </HTML>
Обозначение HTML-документа
<HEAD> </HEAD>
Заголовочная часть документа
<TITLE> </TITLE>
Заголовок документа
<BODY> </BODY>
Тело документа
<H1> </H1>
Заголовок абзаца первого уровня
<H2> </H2>
Заголовок абзаца второго уровня
<H3> </H3>
Заголовок абзаца третьего уровня
<H4> </H4>
Заголовок абзаца четвертого уровня
<H5> </H5>
Заголовок абзаца пятого уровня
<H6> </H6>
Заголовок абзаца шестого уровня
<P> </P>
Абзац
<PRE> </PRE>
Форматированный текст. Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:
перевод строки, символы табуляции (сдвиг на 8 символов вправо), непропорциональный шрифт, устанавливаемый броузером, Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.
<BR>
Перевод строки без конца абзаца.Используется для разрыва строки.Закрывающая метка запрещена. Атрибут CLEAR используется для перемещения ниже изображений, выравненных по правому или левому полю. <BR CLEAR=LEFT> переводит текст ниже изображений, выравненных по левому полю, <BR CLEAR=RIGHT> делает то же самое для изображений, выравненных по правому полю, <BR CLEAR=ALL> переводит текст независимо от выравнивания изображений.
<BLOCKQUOTE> </BLOCKQUOTE>
Цитата.Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов.
Абзацы
В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости).
Для маркировки абзацев используется элемент P. Открывающая метка обязательна. Закрывающая метка необязательна. В большинстве случаев абзацы выводятся на всю доступную ширину экрана.
Пример:
< P>Это первый абзац.
<P>Это второй абзац.
Абзацы обычно выравниваются по левому краю. Для указания горизонтального выравнивания можно использовать атрибут ALIGN:
align=left
Абзац выравнивается по левому краю.
align=center
Абзац выравнивается по центру.
align=right
Абзац выравнивается по правому краю.
Примеры:
<p align=center>Центрированный абзац.
<p align=right>Абзац, выравненный по правому краю.
По умолчанию принято выравнивание по левому краю, однако возможно иное выравнивание, если абзац находится внутри элемента DIV или CENTER.
Фрэймы
Фрэйм - это район, регион, который находится внутри окна и при этом сам играет роль окна, т.е. является окном внутри главного окна браузера.Главное окно браузера может иметь множество фрэймов, и каждый из них может иметь различное содержание.В данном разделе будет изложено, как с помощью тэгов <FRAME>, <FRAMESET> создавать фрэймы.Также будет рассмотрен тэг <NOFRAMES>-который является альтернативой, если браузер не поодерживает(не работает) с фрэймами. Итак, начнем с тэга <FRAME>
FRAME
Тэг FRAME создает индивидуальное(независимое) окно браузера.Это как-бы окно внутри главного окна.Тэг должен использоваться внутри тэга FRAMESET.
Тэг FRAMESET может включать в себя множество тэгов FRAME, каждый из которых определяет свое собственное окно.Каждый фрэйм имеет свой URL, который и определяет содержимое этого фрэйма. Вы можете задавать следующие атрибуты для тэга фрэйм:
SCROLLING
Определяет будет ли доступна или нет полоса прокрутки для данного фрэйма.
SCROLING=YES - полоса прокрутки будет, независимо от ее необходимости
SCROLING=NO - полосы прокрутки не будет
SCROLING=AUTO - полоса прокрутки
появляется только в случае необходимости
FRAMEBORDER
Параметр, определяющий будут ли видны границы фрейма или нет.
FRAMEBORDER=YES - есть граница
FRAMEBORDER=NO - нет границы
MARGINHEIGHT
Параметр, который определяют отступ(пикселах) внутри рамок(верхний и нижний уровни), и выравнивает графическое изображение внутри рамки.
MARGINWIDHT
Параметр, который определяют отступ(в пикселах) внутри рамок(левый и правый уровни), и выравнивает графическое изображение внутри рамки.
NAME
Определяет имя фрэйма.Очень важный параметр.Ссылки на внешние URL могут сопровождаться атрибутом TARGET
TARGET - атрибут связи между фреймами. Имеет несколько значений
_BLANK- загружает содержимое страницы, заданой ссылки, в новое окно.
_SELF -содержимое страницы, заданой ссылки, в окно, которое содержит ссылку.
_PARENT-загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
_TOP-содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.
Но, если вы задаете имя фрэйма, допустим "main", и при этом в ссылку пишете следующим образом: <a href="http://meltingpot.fortunecity.com/wisconsin/536/html.htm" target="main">-то содержимое ссылки будет открываться в окне-фрэйме, которое названо "main".
NORESIZE
Аттрибут, определяющий то, что пользователь не может изменять размер фрэйма.
SRC
Определяет документ, который будет показан в данном фрэйме. Пример:SRC="http://i.am/vd-s"
BORDERCOLOR
Определяет цвет рамки.
FRAMESET
Определяет все фрэймы, которые включены в него.Может содержать множество тэгов FRAME, которые и определяют внешний вид окон.HTML-документ, который включает в себя тэг FRAMESET, не может при этом включать в себя тэг BODY. С помощью FRAMESET вы можете задавать вид главного фрэйма-он может состоят из множества колонок или множества столбцов, или того и другого. Аттрибуты тэга FRAMESET:
COLS
Определяет Ширину фрэйма в процентах, пикселах. Пример:
<frameset cols="20%, 80%">
Показывает соотношение одной колонки-фрэйма ко второй колонке-фрэйму.В итоге первая колонка-фрэйм будет занимать лишь 20% от веричины главного окна, в то время как второй фрэйм-колонка будет занимать 80% от веричины главного окна.
ROWS
Определяет высоту фрэймов в процентах, пикселах.
<frameset rows="20%, 80%">
Показывает соотношение одного ряда-фрэйма ко второму ряду-фрэйму.В итоге первый ряд-фрэйм будет занимать лишь 20% от веричины главного окна, в то время как второй фрэйм-ряд будет занимать 80% от веричины главного окна.
BORDER
Определяет ширину бордюра(в пикселах).Если тэг не определен, то по умолчанию ширина бордюра равна 5.
BORDERCOLOR
Определяет цвет бордюра.
FRAMEBORDER
Определяет будут ли показаны границы фрэйма.
FRAMEBORDER=YES - есть граница,
FRAMEBORDER=NO - нет границы
ONBLUR
Определяет Java-script code, который необходимо запустить когда окно содержит Frameset loses focus(т.е. когда фрэйм теряет свое сосредоточение)
Запись:ONBLUR="JScode"
ONFOCUS
Определяет Java-script code, который необходимо запустить когда окно содержит Frameset gets focus(т.е. когда фрэйм находит сое сосредоточение(плохое слово, но другого не могу подобрать)
Запись:ONFOCUS="JScode"
ONLOAD
Определяет Java-script code, который необходимо запустить, когда FRAMESET запускается в фрэйм(вот такой вот каламбур)
Запись:ONLOAD="JScode"
ONUNLOAD
Определяет Java-script code, который необходимо запустить, когда FRAMESET не существует. Запись:ONUNLOAD="JScode"
Пример:
<HTML>
<HEAD>
<TITLE>Простой пример использования фрэймов</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%" BORDER=10>
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
<NOFRAMES>Используйте браузеры, которые поддерживают использование фрэймов </NOFRAMES>
</FRAMESET>
</HTML>
На экране своего браузера вы увидете следующую картину: Две колонки - одна 20% от величины главного окна, другая 80%. Также, пользователь с браузером не поддерживающим фрэймы получит сообщение:Используйте браузеры, которые поддерживают использование фрэймов.
NOFRAMES
определяет содержимое, которое будет показано, в случае, если браузер не поддерживает фрэймы.Ставить NOFRAMES тэг необходимо между <FRAMESET> и </FRAMESET>
Запись: <NOFRAMES>...</NOFRAMES>
Списки
На данный момент существуют следующие виды списков:
Пронуменрованный
Непронуменрованный
Список определений
Пронумерованные списки
В данном случае браузер автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга <OL> и завершается тэгом </OL>
Например:
<OL>
<LI> Раз
<LI>Два
</OL>
Тэг <OL> может иметь параметры:
<OL TYPE=A|a|I|i|1 START=n>
где:
TYPE - вид счетчика:
A - большие латинские буквы (A, B, C...)
a - маленькие латинские буквы (a, b, c...)
I - большие римские цифры (I, II, III...)
i - маленькие римские цифры (i, ii, iii...)
1 - обычные цифры (1, 2, 3...)
START=n - число, с которого начинается отсчет
Непронумерованные списки
Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера.
Непронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:
<UL>
<LI>Апельсин
<LI>Мандарин
</UL >
Тэг <UL> может иметь параметр:
<UL TYPE=disc|circle|square>
где disc, circle, square-внешний вид маркера, котрый по умолчанию ставится в виде диска, т.е.-disc.
Списки определений
Списки определений имеют вид:
<DL>
<DT> термин
<DD> определение термина
...
</DL>
Элементы DT могут включать в себя только элементы уровня текста, а элементы DD, кроме того - и элементы уровня блока, за исключением заголовков и элементов ADDRESS.
С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.
Дополнительно на данную тему:
Оценка XHTML
Как поставить ссылку
Неизвестное о формах
Работа с фоном. Теория
Работа с фоном. Фоновый цвет на практике
Перенос и разбиение слов в HTML
Немного слов о кодировках
Фрэймы
Быстрее ветра - быстрый html
Таблица цветовых кодов
|
