Конспект «Язык гипертекстовой разметки - HTML» (стр. 1 )

Введение

HTML появился приблизительно в 1986-1991 годах в Европейском Центре ядерных исследований в Женеве (Швейцария). Разработал его британский учёный Тим Бернерс-Ли.

Он также разработал протокол прикладного уровня передачи данных HTTP и стандартизированный способ записи адреса сайта в интернете – URL.

Тим Бернерс-Ли является создателем World Wide Web ("Всемирной паутины"). С 1994 года является главой "Консорциума Всемирной паутины" (World Wide Web Consortium, W3C), который разрабатывает и внедряет технологические стандарты для "Всемирной паутины".

HTML (от англ. HyperText Markup Language )- язык гипертекстовой разметки.

На языке HTML интернет-браузеру передаётся информация о том, как текст и другие его элементы (ссылки, изображения, таблицы, формы) должны быть отображены на странице.

На языке HTML текст верстают, а не программируют. Для этого текст размечают особым образом.

Для этого существуют так называемые теги. 

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

Поскольку HTML-документ записывается в ASCII-формате, для создания Web-страницы может быть использован любой текстовый редактор, работающий с простым текстом, т. е. таким текстом, который не содержит служебной информации. Такими редакторами являются, например, NotePad (Блокнот).

После того, как с помощью текстового редактора HTML-документ создан, он должен быть сохранен на диске в виде файла с расширением .htm или .html. Это позволит после щелчка мыши по этому файлу запустить браузер, который осуществит формирование Web-страницы в соответствии с данным HTML-документом. Можно поступить по-другому. Сначала запустить браузер, а затем в его поле адреса (Address) указать путь к файлу с данным HTML-документом.

Браузером (browser, от англ. to browse - выслеживать) называется программа, которая выполняет следующие основные функции:

·  после задания пользователем адреса Web-страницы и нажатия клавиши "переход" ("Go") устанавливает с помощью http-протокола соединение с Web-сервером, передает ему запрос и получает от него требуемую Web-страницу в виде HTML-документа;

·  преобразует полученный HTML-документ в изображение не экране пользователя, которое и называется Web-страницей (если HTML-документ содержится на компьютере пользователя, то соединение с Web-сервером не является обязательным).

Примерами браузеров могут служить такие программы, как Microsoft Internet Explorer (MIE), Mozilla Firebox, Apple Safari, Netscape Navigator, Opera и др.
С помощью HTML можно создавать только статические Web-страницы. Для создания динамических страниц необходимо совместное использование HTML с такими языками, как JavaScript, PHP и др.

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

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

Служебные слова называются тэгами (tags) и берутся в угловые скобки < >.

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

<тэг атрибут1="значение" атрибут2="значение">

<тэг атрибут1="значение" атрибут2="значение">...</тэг>

Тэги бывают двойными, называемые контейнерами (container), и одиночными.

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

При вложении в контейнер других тэгов, следует соблюдать их порядок. Так, на рис. демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.

а

б

Рис.1. Вложение тегов, а — правильное, б — неверное

Примером контейнера служат тэги, задающие начало HTML-документа: <HTML> и его окончание: </HTML>. Тэг окончания контейнера отличается от тэга его начала наличием символа "/". Текст, находящийся между началом контейнера и его окончанием, является его содержимым.
Примером одиночного тэга служит тэг перевода на новую строку: <BR> (браузерами не обрабатываются повледовательности пробелов, символы текстовых редакторов перевода каретки CR и перехода на новую строку LF).

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. w3.org/TR/html4/strict. dtd">

<HTML>
<HEAD> . . .заголовок 
</HEAD>
<BODY>
. . . тело
</BODY>
</HTML>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать  <!DOCTYPE>. Элемент <!DOCTYPE> не является тэгом.

Внимание! Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т. е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

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

В теле HTML-документа, который находится внутри тэга-контейнера <BODY> . . . </BODY>, помещается текст, который будет непосредственно выводится на экран.

Пример 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. w3.org/TR/html4/strict. dtd">

<HTML>
<HEAD>
<TITLE> Пример 1</TITLE>
</HEAD>
<BODY>
Привет! Это моя домашняя страничка!
</BODY>
</HTML>

Текст может быть разбит на параграфы (текстовые блоки). Для указания параграфа используется контейнер <P> . . . </P>:
<P>
Текст 
параграфа 
</P>

На экране между параграфами вставляется пустая строка. Тэг окончания параграфа </P> можно не указывать. В этом случае тэг начала следующего параграфа <P> (или </BODY>) будет означать закрытие текущего.

Для указания одно - и многострочных комментариев в HTML-документе используется такая конструкция:

<!--
Этот текст браузером не обрабатывается.
Он закомментирован.
-->

Внимание! Комментарии помещаются в HTML-документе только между тэгами. 

Форматирование в HTML – документе

1.  Задание полей на WEB-странице

Для задания, левого, правого, верхнего и нижнего полей документа на WEB – странице используются соответственно параметры LEFTMARGIN, RIGHTMARGIN, TOPMARGIN и BOTTONMARGIN тега <BODY>. Значение поля указывается в пикселах.

Пример 2:

<HTML>

<HEAD>

<TITLE> Пример 2</TITLE>

</HEAD>

<BODY TOPMARGIN=50 LEFTMARGIN=100>

Привет! Это моя домашняя страничка!

</BODY>

</HTML>

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

2. Задание цвета на Web-странице

В HTML есть средства для задания и изменения как цвета текста, так и цвета фона. Для этого используются соответственно параметры TEXT и BGCOLOR тэга <BODY>.