Тема: Структура HTML–документа — КиберПедия 

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...

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

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

2018-01-04 155
Тема: Структура HTML–документа 0.00 из 5.00 0 оценок
Заказать работу

Цель: Ознакомиться со структурой HTML-документа

Для перевода текстового файла в HTML–файл, необходимо поменять расширение с ".txt" на ".html". Также необходимо соблюдать "правило первой строки". Каждый HTML–документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки декларации версии HTML <!DOCTYPE>, которая выглядит так:

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">

Эта строка помогает браузеру определить, как правильно интерпретировать данный документ. В данном случае браузеру передается информация о том, что HTML соответствует международной спецификации версии 3.2, которая является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html–документ может состоять из одной строки.

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML–документ открывается тэгом <HTML> и им же закрывается.

Далее, между тэгами <HTML> и </HTML> следует разместить заголовок и тело документа. Таким образом должен выглядеть базовый HTML–файл перед началом работы:

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">

<HTML>

<HEAD>

<TITLE>заголовок документа</TITLE>

</HEAD>

<BODY>

Текст документа

</BODY>

</HTML>

Приведенный выше документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

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

Тело документа – основная часть документа. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, большинство HTML–экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>

Одной из наиболее распространенных ошибок размещение заголовка в теле документа или наоборот, что совершенно недопустимо. Сначала закрываем заголовок </HEAD>, затем открываем тело.

Заголовок HTML–документа

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

Элементы, относящиеся к заголовку документа:

HEAD Определяет начало и конец заголовка документа
TITLE Определяет имя всего документа, которое отображается в заголовке окна браузера
BASE Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа
STYLE Используется для вставки в документ таблицы стилей CSS
LINK Описывает взаимосвязь документа с другими объектами

HEAD

(HTML 1.0) – Head

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

 

<HTML>

<! –Начинаем загодовок…–>

<HEAD>

<TITLE>справочник по HTML</TITLE>

</HEAD>

<! –…кончили. Дальше пошло тело документа –>

<BODY>

Текст документа

</BODY>

</HTML>

TITLE

(HTML 2.0) – Title

Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML–документа и может быть указан не более одного раза.

<HEAD>

<TITLE>руководство по эксплуатации</TITLE>

</HEAD>

BASE

(HTML 3.2) – Base URL

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

Параметры:

HREF – определяет базовый адрес (URL) текущего документа.

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

<HEAD>

<! – Пусть браузер думает, что находится по адресу: –>

<BASE HREF = “http://www.igf.ru/other/index.html”>

</HEAD>

<! – А теперь создадим относительную ссылку на документ – >

<! – http://www.igf.ru/other/list.html –>

<A HREF = “../list.html”> Список </A>

STYLE

(HTML 3.2) – Style

Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).

Параметры:

TYPE – обязательный параметр. Определяет MIME–тип вставляемого блока стилей. Как правило, значением этого параметра является "text/css".

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

<HEAD>

<TITLE> Пример использования таблицы стилей </TITLE >

<! – Втыкаем табличку стилей –>

<STYLE TYPE = “text/css” TITLE = “Cool table”>

<! –

A {text – decoration: none;}

P {color: blue, font – size: 12pt; font – family: Arial;}

H1{color: red; font – size: 18pt;}

- >

</STYLE >

<! – … кончили втыкать –>

</HEAD>

 

LINK

(HTML 2.0) – Link

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

Параметры:

HREF – определяет URL объекта.

REL – определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:

stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css–файл с указанного в параметре HREF адреса и применит его к текущему документу.

home – указывает на заглавную страницу вашего сайта

toc, contents – указывают на файл, содержащий оглавление данного документа.

index – указывает на файл, содержащий информацию для индексного поиска по текущему документу.

glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу.

copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.

up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).

child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).

next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).

previous – указывает на предыдущую страницу в последовательности документов.

last, end – указывает на последнюю страницу в последовательности документов.

first – указывает на первую страницу в последовательности документов.

help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE – определяет MIME–тип для объекта, указанного в параметре HREF.

<HEAD>

<TITLE> Элементы DIV</ TITLE >

<LINK REL = “HOME” TITLE = “HTML – справочник” HREF = “index.html”>

< LINK REL = “UP” TITLE = “Текстовые блоки” HREF = “textblocks.html”>

<LINK REL = “PREVIOUS” TITLE = “Элемент Р” HREF = “р.html”>

<LINK REL = “NEXT” TITLE = “Элемент ADDRESS” HREF = “address.html”>

</HEAD>

 

<HEAD>

<TITLE> Полдневье </ TITLE >

<LINK REL = “stylesheet” TYPE = “text/css” HREF = “deco1.css”>

Тело HTML-документа

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-значением в шестнадцатеричной системе.

<HTML>

<BODY BACKGROUND=”image.jpg” BGCOLOR=“#202020” TEXT=”#FFFFFF” LINK=”#FF0000” VLINK=”#505050” MARGINHEIGHT=”30” TOPMARGIN=”30” LEFTMARGIN=”40” MARGINWIDTH=”40”>

Текс документа.

</BODY>

</HTML>

Примечание:

При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно параметры MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере.

Всегда указывайте параметры BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих параметров не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows.

 

Задание:


Поделиться с друзьями:

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...

Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...

Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...

Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.044 с.