Вредоносное ПО (malware) - это назойливые или опасные программы,...
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
DOCTYPE | Описание |
---|---|
HTML 4.01 | |
Строгий синтаксис HTML. | |
Переходный синтаксис HTML. | |
В HTML-документе применяются фреймы. | |
HTML 5 | |
В этой версии HTML только один доктайп. | |
XHTML 1.0 | |
Строгий синтаксис XHTML. | |
Переходный синтаксис XHTML. | |
Документ написан на XHTML и содержит фреймы. | |
XHTML 1.1 | |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
В дальнейшем будем применять преимущественно строгий , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте в начало документа.
Тег определяет начало HTML-файла, внутри него хранится заголовок (
) и тело документа (Заголовок документа, как еще называют блок
, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Тег
Рис. 4.2. Вид заголовка в браузере
Тег
Обязательно следует добавлять закрывающий тег , чтобы показать, что блок заголовка документа завершен.
Тело документа
Заголовок
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег
представляет
собой наиболее важный заголовок первого уровня, а тег
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги ...
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.
...
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Общая структура HTML документа.
Основы HTML (Hypertext Markup Language)
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы - в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
Директивы HTML называются «теги» (от англ, tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег> . Все объекты, не заключенные в угловые скобки , интерпретатор воспринимает как текстовые элементы , отображая их на экране компьютера «как есть».
Структура документа HTML выглядит следующим образом:
Документ HTML
Заголовок
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, - парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег> обрабатываемое значение тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
<тег1> <тег2> обрабатываемое значение тег2>тег1>
При роботе с кодом HTML необходимо запомнить одно простое правило:
если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML», для определения которой существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня» и записывается как:
<НТМL> Содержимое НТМL>
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней.
Следующим элементом является «Заголовок документа» . Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа. Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так:
Содержимое
Раздел HEAD следует в html-документе непосредственно за тегом и является второй обязательной командой, которую необходимо включать в код Web-страницы.
«Внешний заголовок» является вложенной командой тега . Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE> Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии
. Значение тега
Последняя структурна составляющая кода web-страницы - «Тело документа» . Тело документа, описываемое тегами , включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Таким образом, обязательные элементы кода документа HTML выглядят так:
<ТITLE> Название страницы
Теги и атрибуты.
Как отмечалось выше, тег - это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение.
Тег может иметь атрибут
(или не иметь его). Например, тег верхнего уровня не имеет атрибутов, а в строке создания новой таблицы В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом: <ТЕГ ИМЯ _ АТРИБУТА-1 = "ЗНАЧЕНИЕ" ИМЯ _ АТРИБУТА-2 = "ЗНАЧЕНИЕ" ...ИМЯ _ АТРИБУТА-n = "ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; "ЗНАЧЕНИЕ-2"; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки
для следующих видов атрибутов: Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр. Атрибуты, состоящие только из цифр от 0 до 9. Атрибуты, обозначающие промежутки времени. Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER. В этой статье мы рассмотрим структуру HTML документа
и познакомимся с разными частями веб-страницы. В HTML4 веб-страница состоит из трёх главных частей: 1. Головную часть (Head
); Посмотрите на пример, приведенный выше. Заметили красный и черный текст? Черным обозначено содержимое, а красным - теги из которых состоят элементы: Первая строка в примере структуры HTML - не элемент, а объявление типа документа (также называемое декларацией DOCTYPE). Оно предоставляет информацию о версии HTML-документа и указывает браузерам спецификацию HTML. Правильный документ объявляет, какая версия языка используется. Посмотрите
: Информация о DOCTYPE
Весь документ содержится в элементе html
. Он часто называют корневым, и он не может находиться внутри любого другого элемента. Используется и в HTML
, и в XHTML документах
. Внутри элемента html
документ разделяется на «голову
» (head
) и «тело
» (body
). Элемент head
содержит описательную информацию о самом документе. То, что в нем упоминается, не должно отображаться в браузере, но передает ему некоторую информацию. Например, заголовок, используемые таблицы стилей, скрипты и другую информацию. Элемент структуры сайта HTML meta внутри head
предоставляют информацию о метаданных. Meta-элемент
может содержать разные виды информации. В примере, приведенном выше, он определяет кодировку символов (character encoding
), используемую в документе. Примечание
: метаданные - это информация о документе, но не его содержание. Head
также содержит обязательный элемент title
. Согласно спецификации HTML
, каждый документ должен включать в себя заголовок. Заголовок, который указан в этом элементе, показывается в вкладке браузера. body
содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа
, которая отображается в браузере. Перевод статьи “HTML Document Structure – Post #2 – HTML Tutorials
” был подготовлен дружной командой проекта . Хорошо
Плохо
Каждый HTML-документ
должен начинаться тегом <
HTML
>
и заканчиваться тегом
HTML
>
.
Эти теги обозначают, что находящиеся
между ними строки представляют единый
HTML-документ.
Кроме того, можно заметить, что файл
HTML в целом является элементом языка
HTML. Также в HTML-документе
должны присутствовать элементы HEAD
(информация о документе) и BODY
(тело документа). Раздел документа
HEAD
Раздел документа
HEAD
определяет его заголовок, а также
содержит дополнительную информацию о
документе для броузера. Этот раздел не
является обязательным, однако рекомендуется
всегда использовать его в своих
HTML-документах,
так как правильно составленный заголовок
может быть весьма полезен. Раздел заголовка
начинается тегом <
HEAD
>
и следует сразу за тегом .
Между открывающим и закрывающим тегами
элемента HEAD
располагаются другие элементы заголовка. Для того чтобы
дать название HTML-документу,
предназначен тег <
TITLE
>
.
Это название будет выведено в заголовок
окна броузера. Название записывается
между тегами Раздел документа
BODY
В этом разделе
документа располагается та информация,
которая отображается в окне броузера.
Раздел BODY
должен начинаться тегом <
BODY
>
и завершаться тегом
BODY
>
,
между которыми располагаются элементы
HTML,
из которых и состоит содержание документа. Спецификация
элемента
BODY
Тег TEXT="цвет
текста" BGCOLOR="цвет
фона" BACKGROUND="адрес
фонового рисунка" Атрибут TEXT
задает цвет шрифта для всего документа
в формате RGB
или в символьной нотации. По умолчанию
(если не указан этот атрибут) используются
настройки броузера. Атрибут BGCOLOR
задает цвет фона окна броузера документа
в формате RGB
или в символьной нотации. По умолчанию
используются настройки броузера. Атрибут BACKGROUND
позволяет указать адрес и имя рисунка,
используемого в качестве фона. Этот
рисунок будет размножен и распределен
на заднем плане документа. Атрибуты LINK,
VLINK
и ALINK
задают цвета гиперссылок в формате RGB
или в символьной нотации. По умолчанию
используются настройки броузера.
Непосещенная гиперссылка – гиперссылка,
которая еще не использовалась для
перехода к другому документу. Посещенная
гиперссылка – гиперссылка, которая уже
использовалась для перехода к другому
документу. Активная гиперссылка –
гиперссылка на документ, к которому в
данный момент происходит переход. Советы по
использованию атрибутов тега BODY Если вы указываете
хотя бы один цвет в теге BODY,
то укажите и остальные. Это связано с
тем, что пользователь может установить
настройки цветов своего броузера как
ему удобней. Указание только одного
цвета может привести к ситуации, что у
некоторых пользователей текст сольется
с цветом фона. В результате просмотр
документа будет затруднен. Выбирайте цвет
текста так, чтобы он "работал"
вместе с цветом фона или основными
цветами изображения. Например, красное
на зеленом может вызвать серьезные
проблемы у значительного числа людей. В элементе BODY
можно задать как BGCOLOR, так и BACKGROUND. В этом
случае броузер отдает предпочтение
BACKGROUND, но если изображение фона невозможно
загрузить, будет использовано BGCOLOR.
Поэтому старайтесь задавать цвет фона
похожим на цвет фонового рисунка, чтобы
не нарушился цветовой баланс документа. Основные понятия HTML
Управляющие конструкции языка HTML (Hyper Text Markup Language) называются тегами (дескрипторами) и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например Teги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в том месте, где они вставлены. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа "/" перед ключевым словом ( Текст К открывающему тегу может быть добавлен атрибут, представляющий собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом "=" и заключается в кавычки. <Н1 ALIGN="LEFT"> При отображении документа HTML сами теги не отображаются, но влияют на способ отображения документа HTML. Существует два способа формирования документов HTML. Первый способ состоит в разметке существующего или создаваемого документа вручную. Эта работа выполняется в текстовом редакторе или редакторе HTML. Второй способ заключается в формировании документа непосредственно на экране и автоматической его разметке. В этом способе необязательно знание языка HTML. Разметка выполняется специальным редактором, работающим по принципу WYSIWYG, например, FrontPage Express. Во втором способе используются средства форматирования вместо средств описания, что может приводить к нежелательным последствиям. Воспроизведение документа HTML выполняется программами - броузерами, например Internet Explorer. Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом: Здесь использованы ключевые слова: Большинство элементов языка HTML описывает части содержания документа и помещаются между тегами Основными функциональными элементами документа HTML являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи тегов от Обычные абзацы задаются с помощью парного тега В HTML нет средств для задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину ширины окна и расположенную справа. Как только в Web-страницу будет встроена гиперсвязь
, документ можно назвать гипертекстом. Гиперссылка может указывать: Гиперссылки могут быть оформлены как абсолютные
или относительные
. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL
- Uniform Resource Locator. Абсолютный URL
- это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь. Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-броузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet. Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet. Гипертекстовая ссылка задается парным тегом , который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например: Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла. Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#": Между дескрипторами и могут находиться только текст, графика и заголовки. Текст, располагающийся между и дескрипторами, обычно изображается броузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе При включении в Web-страницу гиперссылок учитывайте следующие рекомендации. Основные дескрипторы для организации ссылок и форматирования текста показаны в таблице.
выражение «BORDER="1" WIDTH="100"»
является атрибутом тега
.
- это параметр "BORDER"
, второй атрибут - параметр "WIDTH"
, а их значения составляют соответственно "1" и "100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"»
. Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «"»
. В общем случае такое выражение выглядит следующим образом:
Структура документа HTML
2. Тело (Body
):Объявление типа документа (1)
Элемент HTML (2)
Элемент Head (3)
Элементы Meta (4)
Элемент Title (5)
Элемент Body (7)
Запомните
Название документа title
Текст документа
до
. В Web-документе они отображаются шрифтом разного размера.
. В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая тегом
, например:
Относительный URL
используется для адресации в пределах документа или совокупности документов на одном сервере.
Дескриптор гиперсвязи иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor - якорь).
Рекомендуем почитать