Общая структура 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 |
Атрибут VLINK служит для показа уже просмотренных ссылок. Как правило, их окрашивают более темным оттенком того же цвета, что и не
просмотренные ссылки . ALINK определяет цвет ссылки, активной в текущий момент. Эти сравнительно новый атрибут, обычно применяющийся для просмотра многокадровых документов.Одним ид популярных способов украсить HTML - страницу является размещение на ней фоновой графики, видимой под основным текстом (атрибут
BACKGROUND ). Такой прием помогает подчеркнуть целостность документа либо. наоборот, разделить его на логические части.Большинство фоновых изображений малы по размеру, но их копии, как обои, заполняют все окно программы просмотра. Особенно популярны различные текстурные (узорчатые) изображения: кирпичи, мрамор, всевозможные виды тканей. В основном они служат для простого заполнения пустот в документе. Более продуманные страницы имеют фон, соответствующий содержанию.
Атрибуты
LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра страницы любым браузером. Невозможно заранее знать, какой размер окна у программы читателя документа. LEFTMARGIN устанавливает расстояние между левым краем окна браузера, которое измеряется в пикселах. Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле, свободное от текста, и отличающееся узором или цветом от остальной части фонового изображения. TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение и его желательно оставить открытым. HTML - документы можно включать комментарии, которые не будут видны читателю. Они должны начинаться тэгом . Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым. ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. ADDRESS состоит из текста, помещенного между тэгами и . Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом.Документ HTML состоит из основного текста и тегов . По сути, документ HTML представляет собой текстовый файл и для его создания можно использовать обычный текстовый редактор, например, Блокнот .
Документы HTML имеют строго заданную структуру, должны начинаться с тега и заканчиваться закрывающим тегом . Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать теги и , между которыми размещают заголовок документа. Браузеры используют этот заголовок, чтобы заполнить строку заголовка окна браузера.
Основной текст располагается в теле документа, которое задаётся тегами и . Для изменения фона документа используется атрибут BGCOLOR, а для задания цвета шрифта применяется атрибут TEXT. В качестве значений этих атрибутов используется символьная константа цвета или шестнадцатеричное число, формирующее цвет по схеме «красный-зелёный-синий».
Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются или их наличие подразумевается во всех документах HTML.
Фактически определить расположение основных структурных тегов можно и при их отсутствии. Поэтому, если теги , , и соответствующие им закрывающие теги опущены, то программа-браузер сама определит то место, где они должны находиться. Тег считается обязательным, но и его пропуск не вызовет катастрофических последствий. Однако при создании Web-страниц опускать эти теги не рекомендуется, так как неизвестно, как поведёт себя браузер, установленный на компьютере пользователя.
Парные теги влияют на часть документа между открывающим и закрывающим тегами. Такую часть документа рассматривают как элемент языка HTML. Например, элемент BODY включает в себя открывающий тег , основное содержание элемента и закрывающий тег . Элементы языка HTML делятся на блочные и текстовые . Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и более мелких частей текста. При создании документа HTML желательно придерживаться следующих правил вложения элементов :
элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;
блочные элементы могут содержать вложенные блочные и текстовые элементы;
текстовые элементы могут содержать вложенные текстовые элементы;
текстовые элементы не могут содержать вложенные блочные элементы.
Заголовок документа
Функциональные разделы документаЯзык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы .
Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от и до и . На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который по сути является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует.
Для обозначения обычных абзацев используют тег
И соответственно закрывающий тег
. Теги, описывающие обычные абзацы являются необязательными, но при их наличии браузеры чётко отслеживают границы между абзацами.Для улучшения читаемости текста между абзацами браузеры выводят пустую строку. Эффективным средством создания разделителей в тексте являются горизонтальные полоски (линейки), визуально разделяющие документ на части. Горизонтальная линейка создаётся тегом . Это одиночный тег, не имеющий парного.
При создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.
Для перехода на новую строку
без создания абзаца используется тег
.
Функциональные разделы документа
Главный заголовок
Подзаголовок
Эти строки отображаются слитно,
несмотря на то, что в документе
они отделены
друг от друга.
Закрывающий тег абзаца не обязателен.
Тег начала абзаца более важен, чем реальный переход на новую строку.
Текст после горизонтальной
линейки
разбит на
две строки
Основные понятия HTML
HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только браузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы - скрипты на языках Javascript и Visual Basic Script и программы - апплеты на языке Java .
HTML-документ представляет собой текстовый ASCII-файл, содержащий собственно текст, который должен быть отображен в окне браузера, и команды разметки – HTML-тэги, определяющие внешний вид документа при его интерпретации в окне браузера.
Основными компонентами HTML являются:
HTML-код – уникальная последовательность символов, благодаря которой веб - страница приобретает свой неповторимый внешний вид. Код для веб - страницы – все равно, что ДНК для человека.
Код любой веб - страницы можно просмотреть тремя способами:
1) Вызвать контекстное меню браузера, и выбрать пункт о просмотре исходного кода.
2) Нажать сочетание клавиш Ctrl+U.
3) Открыть страницу с помощью блокнота.
Второй способ не работает в Internet Explorer. А последний способ доступен только в том случае, если страница сохранена на носителе вашего компьютера.
Элемент
Элемент – это основа HTML , звено для построения кода, его неделимая единица. Любой код, который вы напишете для создания веб - страницы, будет состоять из элементов.
Элемент HTML представляет собой символ или сочетание символов.
Примеры элементов: p, br, h1, img, meta, table, strong, address, basefont
Набор применяемых в 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 (Hypertext Markup Language)
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы - в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
Директивы HTML называются «теги» (от англ, tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как . Все объекты, не заключенные в угловые скобки , интерпретатор воспринимает как текстовые элементы , отображая их на экране компьютера «как есть».
Структура документа HTML выглядит следующим образом:
Документ HTML
Заголовок
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, - парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
обрабатываемое значение
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
обрабатываемое значение
При роботе с кодом HTML необходимо запомнить одно простое правило:
если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML», для определения которой существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня» и записывается как:
Содержимое
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней.
Следующим элементом является «Заголовок документа» . Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа. Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так:
Содержимое
Раздел HEAD следует в html-документе непосредственно за тегом и является второй обязательной командой, которую необходимо включать в код Web-страницы.
«Внешний заголовок» является вложенной командой тега . Мнемоника внешнего заголовка записывается следующим образом:
Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии . Значение тега подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное».
Последняя структурна составляющая кода web-страницы - «Тело документа» . Тело документа, описываемое тегами , включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Таким образом, обязательные элементы кода документа HTML выглядят так:
Название страницы
Теги и атрибуты.
Как отмечалось выше, тег - это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение.
Тег может иметь атрибут (или не иметь его). Например, тег верхнего уровня не имеет атрибутов, а в строке создания новой таблицы