Основное правило размещения тэгов

Лабораторная работа №3

Тема: Возможности HTML. Структура документа HTML.

Цель: Знакомство с теоретическими основами языка HTML. Получение первых представлений о структуре HTML.

Задача: Создание первой страницы с правильной структурой и цветным фоном при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.

Вопросы для подготовки к лабораторной работе:

Что такое World Wide Web?
Что такое HTML?
Что такое тег?
Из каких основных частей состоит HTML-документ?
Какие существуют обязательные теги? Названия атрибутов.

Задание:

Создайте HTML-страницу с основными тегами. Фон страницы – один из 16 базовых цветов.

Материал для подготовки к лабораторной работе:

Что такое World Wide Web

World Wide Web (Web)\Всемирная паутина это сеть информационных ресурсов. Web использует три механизма, делающих эти ресурсы доступными максимально возможной аудитории:

Единообразная схема именования размещения ресурсов в Web (напр., URI).
Протоколы для доступа к именованным ресурсам Web (напр., HTTP).
Гипертекст для быстрой навигации по ресурсам (напр., HTML).

Каждый доступный на Web ресурс - документ HTML, рисунок, видеоклип, программа и т д. - имеет адрес, который может быть кодирован как Universal Resource Identifier\Универсальный идентификатор ресурса, или "URI".

URI обычно состоят из трёх частей:

Схема именования механизма, используемого для доступа к ресурсу.
Имя машины - владельца (хоста) ресурса.
Имя самого ресурса, даваемое как путь/path.

Некоторые URI ссылаются на место внутри ресурса. URI этого типа заканчиваются знаком "#", после которого следует идентификатор якоря (называемый идентификатор фрагмента). Например, вот URI, указывающий на закладку с названием section_2:

http://somesite.com/html/top.html#section_2

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

Относительный URI расширяется до полного URI с использованием базового URI.

В HTML URI используются для:

ссылки на другой документ или ресурс (см. элементы A и LINK);
ссылки на внешнюю таблицу стилей или сценарий/скрипт (см. элементы LINK и SCRIPT);
включения в страницу рисунка, объекта или аплета (см. элементы IMG, OBJECT, APPLET и INPUT);
создания карт изображений (см. элементы MAP и AREA);
отправки формы (см. FORM);
создания многооконного документа - фреймов (см. элементы FRAME и IFRAME);
цитирования внешней ссылки (см. элементы Q, BLOCKQUOTE, INS и DEL).;
ссылки на соглашения по метаданным, описывающим документ (см. элемент HEAD).

HTML

Для публикации информации и её глобального распространения необходим универсальный язык типа основного всеобщего языка, который потенциально понятен всем компьютерам. Таким языком, используемым в World Wide Web, является HTML (от HyperText Markup Language/Язык Гипертекстовой Разметки).

HTML даёт авторам средства для того, чтобы:

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

Краткая история HTML

HTML был первоначально разработан Tim Berners-Lee как CERN и популяризован браузером Mosaic, разработанным NCSA. В течение 90х гг. он буквально расцвёл в связи с бурным развитием Web. В это время HTML развивался разными путями. Web зависит от соглашений между создателями документов и провайдерами услуг. Это является причиной совместной работы над HTML.

HTML 2.0 (ноябрь 1995, см. [RFC1866]) был создан под эгидой Internet Engineering Task Force (IETF) для кодирования в конце 1994 г.. HTML+ (1993) и HTML 3.0 (1995, см. [HTML30]) представляли собой более "навороченные" версии HTML. Несмотря на то, что консенсус никогда не достижим в дискуссиях о стандартах, эти проекты вели к обобщению большого объёма новых возможностей. Усилия World Wide Web Consortium's HTML Working Group по кодификации практических наработок в 1996 г. выразились в появлении HTML 3.2 (январь 1997, см. [HTML32]). Изменения, сделанные в HTML 3.2 суммированы Приложении A.

Большинство было согласно с тем, что документы HTML должны хорошо работать на различных платформах и в различных браузерах. Достижение универсальности уменьшает затраты провайдеров, поскольку они должны создавать документы одной версии языка. Если это не будет сделано, увеличится риск того, что Web будет развиваться во множестве несовместимых форматов, уменьшая коммерческий потенциал Web для всех участников.

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

HTML был разработан в расчёте на то, что все виды устройств смогут получить информацию на Web: PC графическими дисплеями различного разрешения и глубины цвета, сотовыми телефонами, переносными устройствами, разговорными устройствами, компьютерами с высокой и низкой тактовой частотой и так далее.

Теоретические основы HTML

HyperText Markup Language (HTML) - язык разметки гипертекста, является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB.

Для просмотра HTML-документов используются специальные программы, которые называют WEB-браузерами или просто браузерами. В настоящее время существует большое количество браузеров разных фирм-разработчиков: Internet Explorer, Netscape, Mozilla, Opera. Это - наиболее распространенные из них.

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

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

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

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

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

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

HTML-генераторы, такие, как "Netscape Navigator Gold" компании Netscape или программа HomeSite, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). Эта технология позволяет создавать HTML-документ без знаний самого языка разметки. Весь HTML-код создаст программа. Текстовый процессор Microsoft Word также может быть использован как HTML-генератор.

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

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

Понятие тэга

Разметка информации на языке HTML производится при помощи тэгов. Тэгом принято называть конструкцию, которая начинается с символа "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки), между которыми размещаются имена тэгов. Как правило, существует открывающий (начальный) тэг и закрывающий (конечный) тэг. Конечный тэг отличается от начального наличием символа "/" (прямой слеш) перед именем тэга. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

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

В данном примере тэг <TITLE> говорит WEB-браузеру о том, что при просмотре документа необходимо заменить стандартный заголовок окна браузера на тот текст, который располагается между этим тэгом и тэгом </TITLE>, который информирует о завершении текста заголовка окна.

HTML не реагирует на регистр символов, описывающих имена тэг, и приведенный ранее пример может выглядеть следующим образом: <title>Заголовок окна документа</title>

Важно!!!

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

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

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...документ... </HTML>

HTML-документ состоит из двух основных частей. Это голова и тело.

Голова документа содержит информацию для браузера о том, как интерпретировать документ: на каком языке он написан, какой текст поместить в заголовок окна, кто автор документа и много другой информации.

Начальный тэг головы <HEAD> должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Конечный тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

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

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

</HEAD>

...

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Таким образом, получается следующая структура HTML-документа:

<HTML>

<HEAD>

Голова документа

</HEAD>

<BODY>

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

</BODY>

</HTML>

Эти тэги должны присутствовать во всех документах, созданных с применением языка разметки HTML. При создании нового документа рекомендуется сначала задавать такую структуру документа, а после уже добавлять смысловую информацию. Соответственно, слова "Голова документа" и "Тело документа" заменяются на нужные наборы тэгов.

Основное правило размещения тэгов

Основное правило размещения тэгов заключается в том, что при использовании нескольких тэгов закрывающие тэги ставятся в порядке, обратном открытию. По-другому это правило можно сформулировать так: те тэги, которые были раньше открыты, должны быть позже закрыты. Обратите внимание на структуру гипертекстового документа. Самый первый открытый тэг <HTML> закрывается в самом конце документа. Аналогично тэг <HEAD>, открытый раньше тэга <TITLE>, закрывается позже него.

Обязательные тэги

<HTML>описывает документ как Веб-страницу, выполненную в формате HTML

<HEAD> указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней.

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

<BODY>Указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза.

Атрибуты:

BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. Занимает всю площадь страницы, если необходимо – размножается.

BGCOLOR – определяет цвет фона документа.

TEXT – определяет цвет текста в документе.

LINK – определяет цвет гиперссылок в документе.

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

VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели.

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

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

MARGINHEIGHT – определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape.

TOPMARGIN – определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.

MARGINWIDTH – определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN – определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer.

ð указываются все

Таблица базовых цветов

Это основные цвета, используемые в HTML. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты.

	Black #000000		Navy #000080
	Gray #808080		Blue #0000FF
	Silver #C0C0C0		Aqua #00FFFF
	White #FFFFFF		Green #008000
	Red #FF0000		Lime #00FF00
	Fuchsia #FF00FF		Teal #008080
	Maroon #800000		Yellow #FFFF00
	Purple #800080		Olive #808000

Форма отчетности: Защита лабораторной работы.

[1] 7757

ÕÕ! [1]ba010253514.1.0540.40.530505546564665(645 6665 645546548444351454565(65 64A044006335)301140158745N7V06800797