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

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

В отличие от других языков программирования, в HTML команды носят название «теги» (от англ. Tag – отметка). Синтаксис записи < тег>.

Практически все теги, за исключением отдельно оговоренных случаев, – парные: открывающий тег < тег> и закрывающий < /тег>.

< тег> обрабатываемое значение < /тег>

HTML-документ в упрощенном виде представляет собой следующую схему (рис. 1.1).

HTML-документ

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

Внешний заголовок

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

Основной код

Рис. 1.1. Схема HTML-документа

HTML - документ – это команда, которая сообщает браузеру о том, что это HTML-документ и является тегом верхнего уровня.

< HTML> Содержимое документа < /HTML>

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

< HEAD> Содержимое заголовка < /HEAD>

Внешний заголовок – название страницы при ее открытии, которая отображается в заголовке окна браузера.

< TITLE> Внешний заголовок < /TITLE>

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

< BODY>

Здесь будет размещено содержимое страницы

< /BODY>

Предусматривается вложение одного тега в другой.

< тег 1>

< тег2> обрабатываемое значение < /тег 2>

< /тег1>

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

< HTML>

< HEAD>

< TITLE> Моя первая WEB-страница < /TITLE>

< /HEAD>

< BODY>

Здесь будет размещено содержимое страницы

< /BODY>

< /HTML>

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

И затем этот документ набирается в простом текстовом редакторе «Блокнот», сохраняется в файле с расширением.htm или.html на диске. Например, назначим имя файла page1.htm. Чтобы удалось назначить нужное расширение файла, выберите в диалоговом окне тип файла Все файлы (*. *) и введите в поле Имя файла придуманное вами имя файла с нужным расширением. Теперь необходимо раскрыть этот файл в браузере. Для этого выполните двойной щелчок левой кнопкой мыши на его имени или на его значке, и после запуска в браузере содержимое файла примет вид, представленный на рис. 1.2. В Windows все файлы с расширением.htm или.html открываются в окне браузера Internet Explorer, если не установлен другой браузер. Заметим на будущее: чтобы ваша страничка одинаково выглядела при загрузке во всех браузерах, необходимо ее просматривать хотя бы в трех наиболее популярных: Internet Explorer, Mozilla, Opera.

Если потребуется что-то изменить в HTML-коде, то, не выходя из окна браузера Internet Explorer, на панели инструментов выберите значок Страница и команду (опцию) Просмотр HTML-кода – откроется окно текстового редактора «Блокнот» с файлом вашей программы. Внесите необходимые изменения и сохраните файл под тем же именем. После этого в окне браузера выполните команду Обновить, нажав на кнопку с двумя стрелками . В результате загрузится измененный HTML-файл.

Рис. 1.2. Представление HTML-документа в браузере

Главная или стартовая страница должна иметь имя файла index.htm. Конечно, не обязательно, но считается хорошим тоном главную (или ту, которая должна отображаться первой) страницу назвать именно так. По умолчанию любой web-сервер страницу index.htm пытается выдать браузеру при обращении к нему (необязательно, потому что на любом web-сервере это настраивается). Все остальные страницы, к которым будет сделано обращение с этой страницы, могут иметь любые имена.

Весь HTML-документ строится из тегов.

Тег – это команда браузеру, которая может быть выполнена различным образом. Различия в выполнении зависят от тех атрибутов, которые заданы данному тегу. Существуют теги, которые могут иметь атрибуты, а могут их и не иметь.

Атрибут тега – это значение, которое браузер должен обрабатывать для конкретной директивы.

Так, например, тег < HTML> – не имеет атрибутов.

Синтаксис записи тега с атрибутами:

< тег имя_атрибута1=" значение" имя_атрибута2=" значение",...>

например:

< TABLE BORDER=" 1" WIDTH=" 100" >

где TABLE – э то тег создания таблицы, BORDER=" 1" – атрибут, который задает рисование границы таблицы толщиной, заданной значением 1, WIDTH=" 100" – атрибут, который задает ширину таблицы значением 100.

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