С чего начинается HTML Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки": Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
С чего начинается работа На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера . Необходимо отметить, что любой HTML-документ открывется тегом и им же закрывается. Затем, между тегами и следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Текст документа </BODY> </HTML>
Используется для создания комментариев в любой части документа. Все, что находится внутри
Code
<!-- -->
, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Code
<HTML> ... <!-- Начинаем чуткую работу с телом документа --> <BODY> <!-- Всталяем табличку с прайс-листом --> ... </BODY> <!-- Все. Готово --> </HTML>
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег внутри TITLE не действует. Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
Элементы, относящиеся к заголовку документа HEAD Определяет начало и конец заголовка документа TITLE Определяет имя всего документа, которое отображается в заголовке окна браузера BASE Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа STYLE Используется для вставки в документ таблицы стилей CSS LINK Описывает взаимосвязь документа с другими объектами META Используется для вставки метаданных
HEAD Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META). Пример:
Code
<HTML> <!-- Начинаем заголовок... --> <HEAD> <title>Справочник по HTML</title> </HEAD> <!-- ...кончили. Дальше пошло тело документа --> <BODY> Текст документа </BODY> </HTML>
TITLE Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Code
... <HEAD> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ...
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег внутри TITLE не действует.
BASE Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов. Атрибуты HREF - определяет базовый адрес (URL) текущего документа. TARGET - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. Пример:
Code
<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 - Cascade Style Sheet). Атрибуты TYPE - обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css". TITLE - определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу. Пример:
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.
Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем.
Сообщение отредактировал Shift - Понедельник, 09.04.2012, 21:28
META Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. Атрибуты NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке. CONTENT - присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV). Пример:
Code
<HEAD> ... <META HTTP-EQUIV="Expires" CONTENT="Sat, 26 Jun 1999 17:38:15 GMT"> <META NAME="GENERATOR" CONTENT="Greenback"> <META NAME="Publisher-Email" CONTENT="green@igf.ru"> <META NAME="Publisher-URL" CONTENT="Idea GraFix – http://www.igf.ru/"> <META NAME="Keywords" CONTENT="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика"> <META NAME="Description" CONTENT="Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию."> ... </HEAD>
Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов, к чему, поверьте, имеют довольно веские основания. Старайтесь использовать фреймы только тогда, когда это действительно необходимо.
Элементы для создания фреймов и работы с ними
FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы
Примечания Внимательно следите, чтобы все вышеперечисленные элементы находились вне элемента BODY. Фреймы к телу документа никоим образом не относятся!
FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET) Атрибуты SRC - обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. NAME - определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов. MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. SCROLLING - определяет наличие линеек прокрутки содержимого фрейма. Возможные значения: yes - отображать линейки прокрутки. no - не отображать линейки прокрутки. auto - отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме). NORESIZE - не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения. FRAMEBORDER - определяет наличие рамок у фрейма. Возможные значения: yes - отображать рамки; no или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET. Пример (файл index.html):
В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html - высоту 165.
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) считается ошибкой.
NOFRAMES Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET. Пример:
Code
<FRAMESET ROWS="*,*"> <NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> </FRAMESET>
Скрипты - это включения в HTML не-html кода, дополняющего его возможности. С помощью сприптов вы можете создавать анимированные кнопки меню, осуществлять автоматическое перенаправление на другие документы и т.д. Большинство скриптов пишется на языке JavaScript.
Элементы для работы со скриптами SCRIPT Вставляет скрипт в HTML-документ NOSCRIPT Определяет текст, который будет отображен, если браузер не поддерживает скрипты
SCRIPT Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC. Атрибуты LANGUAGE - определяет язык, на котором написан скрипт, например, JavaScript. SRC - определяет URL скрипта.
Навигационные карты Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG. Пример:
Code
<!-- Создаем карту с именем ImageMap: --> <MAP NAME="ImageMap"> <AREA href="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка"> <AREA href="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка"> </MAP> <!-- Создали. --> <BODY> <!-- Привинчиваем ее к изображению --> <IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0"> ...
В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая - на файл anything.html. Примечание Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG. Мы их сознательно не рассматриваем, ибо механизм обработки карт на удаленной машине осуществляется с помощью скриптов и не имеет к HTML никакого отношения.
MAP Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты. Атрибуты NAME - единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Пример:
AREA Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега. Атрибуты SHAPE - определяет форму навигационной области. Возможные значения: rect - прямоугольник; circle - окружность; poly - многоугольник. В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS. COORDS - определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей: SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y"; SHAPE="circle" COORDS="центр x, центр y, радиус"; SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,..."; HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL). TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A. NOHREF - определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего. ALT - определяет альтернативный текст-подсказку для данной области. Пример:
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 базовых цветов. Пример:
Примечания При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно атрибуты MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере. Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? То-то. Некрасиво получится.
