Что такое HTML? Отделение селектора и объявления. Как создать файл html

HTML - это язык тэгов.

Тэг (дескриптор ) - специальный код, вставляемый в текст для форматирования элементов HTML-документа. Это основной элемент кодирования, принятый в стандарте HTML. Тэг заключаются в угловые скобки . Например тэгом абзаца является

А тэгом горизонтальной линии - .

Существует два типа тэгов: контейнеры и одиночные тэги.

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

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

Элемент HTML - документа - это начальный и конечный тэги контейнера вместе с заключённым между ними содержимым. Элементом может быть изображение, фрагмент текста, форма, таблица, список, ссылка, текстовое поле, кнопка и даже заголовок документа или его основная часть (тело).

Замечание : Язык HTML не чувствителен к регистру. Тэги могут набираться как прописными, так и строчными буквами, т.е. команда эквивалентна команде или . Не все тэги поддерживаются всеми браузерами. Если браузер не поддерживает тэг, он его просто игнорирует.

Самым главным из тэгов HTML является одноименный тэг . Он должен всегда открывать документ, также как тэг должен обязательно стоять в последней его строке. Эти тэги означают, что находящиеся между ними строки представляют собой единый HTML документ. Это важно, так как сам по себе документ является обычным текстовым файлом ASCII. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.

Заголовок документа не является обязательным элементом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка документа является предоставление информации для программы, интерпретирующей документ. Элементы, находящиеся внутри раздела HEAD (кроме названия документа, записываемого в разделе TITLE ), не видны на экране. Элементы, содержащиеся внутри раздела HEAD документа, нужны для того, чтобы:

Дать документу название

Определить отношения между несколькими документами

Дать указание браузеру создать форму для поиска

Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра

Раздел HEAD открывается тэгом . Обычно этот тэг следует сразу же за тэгом . Закрывающий тэг показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.

РазделTITLE является единственным обязательным элементом заголовка документа и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна браузера. Содержимое раздела TITLE нельзя путать с названием файла документа. Оно представляет собой текстовую строку, совершенно не зависящую от имени и местоположения файла. Имя же файла жестко определяется операционной системой того компьютера, на котором храниться.

Название документа записывается между тэгами и и представляет собой текстовую строку. Не следует заключать его в кавычки, если вы хотите, чтобы на экране их тоже не было. В большинстве случаев раздел TITLE занимает не более одной строки.

В принципе название может иметь любую длину и содержать любые символы, кроме некоторых зарезервированных. На практике лучше ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при сворачивании окна браузера. Поэтому надо стараться поместить наиболее важные слова в начало названия.

Хотя в WWW и наметилась тенденция к увеличению “активного” содержания, большинству читателей все же интересна текстовая часть страниц. Поэтому независимо от того пишется ли новый текст или конвертируется старый, процесс работы над телом документа отнимает немалое количество времени.

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

This is an example document


Enter body text here

Шаблон открывается тэгом

, который, как мы уже знаем, необходим для каждого HTML - документа. Следующим идет тэг ,начинающий заголовок документа. Заголовок содержит элемент TITLE , вводящий название документа, в нашем случае “This is an example document”. Заголовок закрывается тэгом . Далее идет тэг , после которого помещается текст (тело) документа. Тэг означает конец тела, а тэг - конец всего документа. BODY может содержать большое количество атрибутов. Все они важны, так как определяют общий облик документа. Эти атрибуты приведены в таблице.

	Назначение
ALINK	определяет цвет ссылки, активной в текущий момент
BACKGROUND	указывает на URL - адрес изображения, которое используется в качестве фонового
BGCOLOR	определяет цвет фона документа
BGPROPERTIES	если установлено значение FIXED , фоновое изображение не прокручивается
LEFTMARGIN	Устанавливает границу левого поля в пикселах
LINK	Определяет цвет еще не просмотренной ссылки
TEXT	Определяет цвет текста
TOPMARGIN	Устанавливает границу верхнего поля в пикселах
VLINK	Определяет цвет уже просмотренной ссылки

Рассмотрим эти атрибуты подробнее.

Определение цвета составных частей документа - первый шаг к его созданию. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра.

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

HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, синем и зеленом. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые вместе с их шестнадцатеричными кодами приведены в нижеследующей таблице.

Цвет	Код
Black (черный)	#000000
Магооп (темно-бордовый)	#800000
Green (зеленый)	#008000
Olive {оливковый)	#808000
Navy (темно-синий)	#000080
Purple (фиолетовый)	#800080
Teal (чирок)	#008080
Gray (серый)	#808080
Silver (серебряный)	#С0С0С0
Red (красный)	#FF0000
Lime (известь)	#00FF00
Yellow (желтый)	#FFFF00
Blue (синий)	#0000FF
Fuchsia (фуксия)	#FF00FF
Aqua (аква]	#00FFFF
White (белый)	#FFFFFF

BGCOLOR отвечает за цвет фона документа. Если страница имеет фоновое изображение, этот атрибут должен обеспечивать цвет, как можно более близкий к общему тону рисунка. Это позволит читателю, настроившему свой браузер на отказ от загрузки изображений, ясно видеть текст. Многие авторы не придерживаются этого правила. В этом случае, если фоновый рисунок исполнен в темных токах и выбран белый цвет шрифта для текста, некоторые читатели могут быть удивлены, не увидев ничего, кроме пустой белой страницы. TEXT определяет цвет текста документа. Старайтесь в ваших страницах всегда поддерживать высокую контрастность текста. При использовании шрифта с тонким начертанием помните, что он смотрится лучше темным на светлом фоне. LINK используется браузером для показа еще непросмотренных ссылок. Очевидно, что они должны выделяться цветом на фоне основного текста.

Атрибут VLINK служит для показа уже просмотренных ссылок. Как правило, их окрашивают более темным оттенком того же цвета, что и не

просмотренные ссылки . ALINK определяет цвет ссылки, активной в текущий момент. Эти сравнительно новый атрибут, обычно применяющийся для просмотра многокадровых документов.

Одним ид популярных способов украсить HTML - страницу является размещение на ней фоновой графики, видимой под основным текстом (атрибут

BACKGROUND ). Такой прием помогает подчеркнуть целостность документа либо. наоборот, разделить его на логические части.

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

Атрибуты

LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра страницы любым браузером. Невозможно заранее знать, какой размер окна у программы читателя документа. LEFTMARGIN устанавливает расстояние между левым краем окна браузера, которое измеряется в пикселах. Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле, свободное от текста, и отличающееся узором или цветом от остальной части фонового изображения. TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение и его желательно оставить открытым. HTML - документы можно включать комментарии, которые не будут видны читателю. Они должны начинаться тэгом . Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым. ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. ADDRESS состоит из текста, помещенного между тэгами и . Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом.

При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML. В данном уроке мы познакомимся с HTML , разберем структуру документа HTML и на практических примерах закрепим полученные знания.

Что такое HTML?

HTML расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.

Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.

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

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

) и состоит из имени, за которым может следовать список атрибутов (для большинства тэгов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Записывать тэги можно в любом регистре – прописными или строчными буквами.

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами , воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тэгами могут располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг вызывает вставку рисунка из файла pict.gif, расположенного в той же папке, что и сам HTML-документ.

Тэги могут иметь уточняющие параметры – атрибуты. Атрибуты позволяют регулировать способ отображения информации, добавляемой с помощью тега. Атрибуты записываются внутри автономного тэга, а в контейнере только в открывающей части. В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна. Значения атрибутов указываются после знака равенства в кавычках.

Примеры тэгов с атрибутами:

– задает светло-синий фон для документа,

текст – парный тэг, дает указание браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

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

Документ HTML всегда начинается с тега и заканчивается закрывающим тегом .

Внутри документа выделяют два основных раздела: раздел заголовков и тело документа, идущие друг за другом.

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

Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Тег заголовочной части документа должен быть использован сразу после тэга и более нигде в теле документа. Данный тег представляет собой общее описание документа. Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех браузерах заголовок документа виден в верхней части экрана (окна).

Заголовок окна Web - страницы устанавливается внутри контейнера .

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

Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна Web - страницы.

Заголовок

Внутри контейнера допускается размещать следующие элементы: , , , , , , , .

Синтаксис:

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

Элемент предназначен для хранения содержания Web - страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег также применяется для определения цветов ссылок и текста на Web - странице.

Часто тег используется для размещения обработчика событий, например, onload , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги на Web - странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML - документа.

Простейший документ HTML, содержащий все теги, определяющие структуру, имеет вид:

Метатеги

Кроме элемента ... , заголовок может содержать мета – теги ... .

Метатеги - это теги языка HTML, содержащие различную служебную информацию. - тег используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами/клиентами для использования в идентификации, индексации и создании каталогов страниц. Метатеги размещаются в заголовке страницы (между тегами и ) и имеют формат:

Условно метатеги можно разделить на три группы:

Открывающий тэг включает пары имя = значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Тип и кодировка документа: META HTTP-EQUIV = "CONTENT-TYPE"

- кодировка Windows.

Основное назначение этого тега - сообщение браузеру об используемой кодировке. Использовать метатег content-type надо только с учетом некоторых нюансов.

Кодировка символов текста должна соответствовать кодировке, указанной в теге.

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

Если сервер меняет кодировку текста, он должен скорректировать или удалить мета тег content-type.

Несоблюдение этих требований может привести к следующему: Web - сервер автоматически определит кодировку запроса клиента и отдаст страничку браузеру перекодированной. Браузер, в свою очередь, будет читать документ в соответствии с метатегом content-type. И если кодировки не совпадут, то прочитать документ можно будет только после ряда замысловатых манипуляций.

Некоторые из возможных типов кодировки:

· ISO-8859-1- Latin-1, для большинства западноевропейских языков;

· Windows-1251- Кириллица (Windows);

· KOI8-r- Кириллица (КОИ8-Р);

· cp866- Кириллица (DOS);

· Windows-1252- Западная Европа (Windows);

· Windows-1250- Центральная Европа (Windows).

Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.

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

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

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

Поехали…

Каждый HTML документ начинается со строчки:

XHTML

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

Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

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

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

XHTML

Заголовок окна браузера

Заголовок окна браузера

Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.

Между тегами и располагается информация, не отображаемая на странице.

Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).

Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).

Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .

И стили, заключенные в теги …. .

На этом с тегом пожалуй мы закончим.

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

bgcolor — устанавливает цвет фона документа. ( )

background — указывает на url-адрес изображения — фона документа.

text — устанавливает цвет текста документа.

link — устанавливает цвет гиперссылок.

vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.

alink= — устанавливает цвет гиперссылок при нажатии.

bgproperties=fixed — фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.

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

XHTML

Давайте и наберем эту строку в нашем предыдущем примере.

XHTML