С чего начинается HTML Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки": Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки. Пример самого короткого HTML-документа: С чего начинается работа На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера . Необходимо отметить, что любой HTML-документ открывется тегом и им же закрывается. Затем, между тегами и следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы: Заголовок документа Текст документа Если приведенный выше пример пояснить схематически, получится следующее: Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY. Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE). Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами и (HTML 1.0) - Head Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META). Пример: Справочник по HTML Текст документа (HTML 2.0) - Title Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза. Пример: ... Руководство по эксплуатации ... Примечания: • Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег внутриTITLE не действует. BASE (HTML 3.2) - Base URL Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов. Атрибуты HREF - определяет базовый адрес (URL) текущего документа. TARGET - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. Пример: Руководство по эксплуатации ... Список ... STYLE (HTML 3.2) - Style Используется для вставки в документ таблицы стилей (CSS - Cascade Style Sheet). Атрибуты TYPE - обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css". TITLE - определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу. Пример: Пример использования таблицы стилей Примечания • Практически все популярные браузеры игнорируют атрибут TITLE, поэтому можете его не использовать. А жаль, задумка-то была неплохая... Рекомендуем почитать про CSS: • Отличное руководство по CSS на MANUAL.RU LINK (HTML 2.0) - Link Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK. Атрибуты HREF - определяет URL объекта. REL - определяет тип взаимосвязи текущего документа с объектом, определенным атрибутомHREF. Возможные значения: • stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE) • home - указывает на заглавную страницу вашего сайта • toc, contents - указывают на файл, содержащий оглавление данного документа. • index - указывает на файл, содержащий информацию для индексного поиска по текущему документу. • glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему документу. • copyright - указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п. • up, parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). • child - указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). • next - указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря). • previous - указывает на предыдущую страницу в последовательности документов. last, end - указывает на последнюю страницу в последовательности документов. first - указывает на первую страницу в последовательности документов. help - указывает на страницу с подсказкой (напр. по навигации по вашему сайту). TYPE - определяет MIME-тип для объекта, указанного в атрибуте HREF. Пример 1 Элемент DIV Пример 2 Полдневье Примечание Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем. META (HTML 2.0) - Meta Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документавнедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. Атрибуты NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке. CONTENT - присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV). Пример: ... ... Ссылки на другие сайты по данной теме • Бойцы невидимого фронта (Mike Melnikov) FRAME (HTML 4.0) - Frame Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET) Атрибуты SRC - обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. NAME - определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов. MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. SCROLLING - определяет наличие линеек прокрутки содержимого фрейма. Возможные значения: • yes - отображать линейки прокрутки. • no - не отображать линейки прокрутки. • auto - отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме). NORESIZE - не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения. FRAMEBORDER - определяет наличие рамок у фрейма. Возможные значения: • yes - отображать рамки; • no или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET. Пример (файл index.html): ... Ваш браузер не поддерживает фреймы ... В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.htmlбудет иметь ширину 265 пикселов, а frame2.html - высоту 165. FRAMESET (HTML 4.0) - Frame Set Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элементаFRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Атрибуты ROWS - определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: • в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; • в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; • в пикселах. Например: "75,*"; Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь. COLS - определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS. BORDER - определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape; FRAMEBORDER - определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения: • Yes - отображать рамки; • No или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER. FRAMESPACING - определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок. Примечание • Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY.FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой. FRAMESET (HTML 4.0) - Frame Set Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элементаFRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Атрибуты ROWS - определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: • в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; • в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; • в пикселах. Например: "75,*"; Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь. COLS - определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS. BORDER - определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape; FRAMEBORDER - определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения: • Yes - отображать рамки; • No или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER. FRAMESPACING - определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок. Примечание • Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY.FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой. FRAMESET (HTML 4.0) - Frame Set Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элементаFRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Атрибуты ROWS - определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: • в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; • в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; • в пикселах. Например: "75,*"; Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь. COLS - определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS. BORDER - определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape; FRAMEBORDER - определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения: • Yes - отображать рамки; • No или 0 - не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER. FRAMESPACING - определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок. Примечание • Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY.FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой. SCRIPT (HTML 3.2) - Script Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC. Атрибуты LANGUAGE - определяет язык, на котором написан скрипт, например, JavaScript. SRC - определяет URL скрипта. Пример 1: В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать между , т.е. оформлять его как html-комментарий: Пример 2: Где размещать скрипт Элемент SCRIPT можно располагать либо в заголовке (внутри элемента HEAD) либо в теле документа (внутри BODY). NOSCRIPT (HTML 4.0) - No Script Определяет текст, который будет отображен, если браузер по какой-либо причине не работает со скриптами. Пример: BODY *(HTML 2.0) - 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, где все цвета инвертированы? То-то. Некрасиво получится. Поддержку сайта обеспечивают: BASEFONT (HTML 4.0) - Base Font Не имеет конечного тега. Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии вы можете легко изменить шрифт в любой части документа, используя элементFONT. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц. Атрибуты SIZE - обязательный атрибут. Определяет базовый размер шрифта. Возможные значения: целые числа от 1 до 7 включительно. FACE - определяет используемый шрифт (гарнитуру). Пример: ... Текст документа шрифтом 3 размера ... Слегка увеличиваем шрифт ... Продолжаем шрифтом 3 размера ... Примечание Атрибут FACE игнорируется большинством браузеров. Если вы хотите явно указать тип шрифта для всего документа, используйте элемент FONT: Пример ... Основной текст документа шрифтом Arial ... Вставка текста увеличенным шрифтом Таймс ... Продолжается основной текст документа шрифтом Arial ... H1,H2,...H6 (HTML 2.0) - Headers Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы. Атрибуты ALIGN - определяет способ выравнивания заголовка по горизонтали. Возможные значения:left, right, center. Пример:

Самый большой заголовок посередине

Заголовок поменьше

...

Малюююсенький такой заголовочек

P (HTML 2.0) - Paragraph Используется для разметки параграфов. Атрибуты ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения:left, center, right. По умолчанию имеет значение left. Пример:

Это центрированный параграф.
Текст располагается в центре окна браузера

А это параграф, выровненный по правому краю.

DIV (HTML 3.2) - Division Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты ALIGN - определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center. Пример: ...Текст документа...

...Текст, таблицы, изображения. Выравнивание по центру.

...Текст документа... Примечание У атрибута ALIGN есть еще одно значение - justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю. ADDRESS (HTML 2.0) – Address Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом. Пример Пишите по следующему адресу:

Москва. ул. Академика Королева, 13
Мурзилке

Примечание • Internet Explorer версии 3.0 неверно интерпретирует конечный тег , поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после любой элемент форматирования текста:

Мой адрес не дом и не улица,
Мой адрес – Советский Союз.

Нормальный текст ... BLOCKQUOTE (HTML 2.0) - Block Quote Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Пример: Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение:

Синели красные ромашки,
Желтели в небе облака,
Синицы в теплый край летели,
К истоку двигалась река.

BR (HTML 2.0) - Break Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибутCLEAR. Элемент не имеет конечного тега. Атрибуты CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения : • all - завершить обтекание изображения текстом. • left - завершить обтекание текстом изображения, выровненного по левому краю. • right - завершить обтекание текстом изображения, выровненного по правому краю. Пример: Первое предложение
Второе предложение на следующей строке Примечание • Возьмите себе за правило всегда ставить
после тега . В противном случае все картинки будут иметь неприятный отступ. • Атрибут CLEAR почему-то используется очень редко. А зря. HR (HTML 2.0) - Horisontal Rule Вставляет в текст горизонтальную разделительную линию. Атрибуты WIDTH - определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE - определяет толщину линии в пикселах. ALIGN - определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: • left - выравнивание по левому краю документа. • right - выравнивание по правому краю документа. • center - выравнивание по центру документа (используется по умолчанию). NOSHADE - определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR - определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer. Пример: Текст, разделенный

сплошной горизонтальной линией.