Студопедия

КАТЕГОРИИ:

АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

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

Практическая работа №14 -15

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

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

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

Тег <!DOCTYPE>

Тег <!DOCTYPE> записывается в начале HTML-файла. Он описывает создаваемый документ и предоставляет основную информацию для браузера.

Пример заполнения тега <!DOCTYPE>:

<!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Transitional//EN'' ''http://www.w3.org/TR/xhtml1//DTD/xhtml1-transitional.dtd''>

Эта строчка дает браузеру общую информацию об HTML-документе. Данная строчка заполняется всегда одинаково, но все же разберем ее по частями выясним, какую информацию о документе несут данные из тега <!DOCTYPE>:

Html – показывает, что для создания документа используется язык HTML.

PUBLIC – указывает на то, что при создании документа использовалась общепринятая версия HTML.

''-//W3C//DTD XHTML 1.0 Transitional//EN'' – отражает, какая версия языка используется, а также какие элементы и атрибуты можно применять.

''http://www.w3.org/TR/xhtml1//DTD/xhtml1-transitional.dtd'' – адрес URL- документа, в котором описываются элементы и атрибуты, используемые в соответствии с версией языка. В этом теге содержится общая служебная информация о странице. Он не влияет на то, как страница будет выглядеть на экране, более того, без него страница не сможет нормально загрузиться. Использование этого тега подразумевается стандартом HTML.

Тег <HTML>

Главным структурным тегом  HTML-документа является тег <HTML>.

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

Тег  <HEAD>

Раздел документа <HEAD> определяет его заголовок, а также содержит дополнительную информацию о документе для браузера. Здесь размещаются сценарии, написанные на VBScript или JavaScript, устанавливается связь с таблицей стилей.

Этот раздел не является обязательным, однако рекомендуется всегда использовать его в своих HTML-документах, так как правильно составленный заголовок может быть весьма полезен.

Тег  <TITLE>

Для того чтобы дать название HTML-документу, предназначен тег <TITLE>. Это название будет выведено в заголовок окна браузера. Название записывается между тегами <TITLE> и </TITLE> и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент <TITLE> должен находиться только в разделе <HEAD>.

Тег <META>

Тег <META> используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы – для ее индексации.

В блоке <HEAD> можно использовать несколько тегов <META>,потому что в зависимости от используемых атрибутов они могут нести разную информацию.

Основные атрибуты тега <META>:

- Атрибут CONTENT используется вместе с атрибутами HTTP-EQUIV и NAME.  Он задает значение свойства, которое указывается с их помощью.

- Атрибут HTTP-EQUIV устанавливает служебные свойства документа, например, его кодировку, дает браузеру информацию о том, как нужно обрабатывать документ.

- Атрибут NAME устанавливает служебные свойства документа, например, данные об авторе и содержимом документа. Эти данные не влияют на обработку документа браузером, однако предоставляют информацию для поисковых систем.

Пример записи тега <META>:

<META HTTP-EQUIV=”refresh” CONTENT=”10; URL=http://www.test.ru” />

<META NAME=”keywords” CONTENT=”тег, мета, индексация, поиск” lang=”ru” />

Раздел документа <BODY>

В этом разделе документа располагается та информация, которая отображается в окне браузера. Раздел BODY должен начинаться тегом <BODY> и завершаться тегом </BODY>, между которыми располагаются элементы HTML, из которых и состоит содержание документа.

Атрибуты тега <BODY> определяют внешний вид документа.

 

Спецификация тега:

<BODY

TEXT="цвет текста"

BGCOLOR="цвет фона"

BACKGROUND="адрес фонового рисунка"

LINK="цвет не посещенной гиперссылки"

VLINK="цвет посещенной гиперссылки"

ALINK="цвет активной гиперссылки"

>

Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки браузера.

Атрибут BGCOLOR задает цвет фона окна браузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки браузера.

Атрибут BACKGROUND позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа.

Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки браузера. Не посещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

Пример создания простого HTML-документа:

В Блокноте набираем следующий код:

<HTML>

<HEAD>

<title>

Блок заглавия

 </title>

</HEAD>

<body bgcolor="pink" TEXT="green">

Добро пожаловать на мою первую страничку!!!

</body>

</HTML>

Затем выбираем команду Файл - Сохранить как…

В пункте «Имя файла» пишем «Имя файла . html», а в поле «Тип файла» – выбираем «Все файлы»; нажимаем «Сохранить». В результате получаем следующую Web-страницу:

 

 

 

Контрольные вопросы:

1. Из каких элементов должен состоять HTML-документ?

2. Для чего используются теги <!DOCTYPE> и <META>?

3. Какая информация располагается в элементе HEAD?

4. Для чего служит элемент TITLE?

5. Какая информация располагается в элементе BODY?

6. Какие атрибуты имеет тег BODY?

7. Как создать HTML-документ?

 

Задание для самоконтроля:

Создайте следующий HTML-документ:

 

 










Последнее изменение этой страницы: 2018-04-12; просмотров: 495.

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