I. Основы языка HTML

ВВЕДЕНИЕ В ТЕХНОЛОГИЮ СОЗДАНИЯ WEB-САЙТОВ ОБРАЗОВАТЕЛЬНОГО НАЗНАЧЕНИЯ НА ЯЗЫКЕ HTML

I. Основы языка HTML

Цель обучения: научиться создавать файлы, содержащие элементы форматирования на языке HTML.

Требуемый начальный уровень подготовки слушателей: уметь работать с основными объектами Windows, знать возможности, принципы и основные приемы работы с компьютером.

Задание: создать простую web-страничку на языке html.

Теоретические аспекты:

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

HTML (HyperText Markup Language) - это язык, принятый в World Wide Web для создания и публикации web-страниц. HTML предоставляет авторам средства для:

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

– перехода к другим web-страницам посредством щелчка кнопки мыши по гипертекстовой ссылке;

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

– непосредственного включения в web-документы видеоклипов, звука и других внешних объектов.

Язык HTML используется для задания логической структуры документа (заголовки, абзацы, графические изображения и прочие объекты).

Термин HTML (HyperText Markup Language) означает «язык маркировки гипертекстов».

Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.

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

– такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде какой угодно операционной системы;

– к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.

Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа.

Для освоения HTML могут понадобиться две вещи:

– Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов.

– Любой редактор текстовых файлов. Вполне подойдет Блокнот (Notepad). Web-страничка создается в Блокноте и сохраняется с расширением.htm.

Вот самый простой HTML-документ:

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

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками " < " и " > ". Такой фрагмент (например, < html>) называется тегом (по-английски — tag).

Итак, тег HTML состоит из следующих друг за другом в определенном порядке элементов:

– левой угловой скобки <

– необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом, в этом контексте вы можете читать символ /, как конец. Практически все теги являются парными, т.е. открывающему тегу соответствует закрывающий, который пишется с чертой (/) после открывающей скобки.

– имени тега, например TITLE или PRE

– необязательных, если даже тег может иметь их, атрибутов, задающих различные свойства тега, дающих дополнительную информацию о том, как браузер должен обработать текущий тег. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

– правой угловой скобки >.

Примеры:

< H1>

< H1 ALIGN=LEFT>

Как было сказано, большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:

< H1> Заголовок< /H1>

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

Теги можно вводить как большими, так и маленькими буквами. Например, метки < body>, < BODY> и < Body> будут восприняты браузером одинаково.

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть.

Спецификация атрибутасостоит из расположенных в следующем порядке:

– имени атрибута, например WIDTH

– знак равенства (=)

– значения атрибута, которое задается строкой символов, например, " 80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки (" 80").

Практические задания: