Система адресации в Интернете DNS Электронная почта Протокол передачи файлов FTP Броузеры Web-технологии хостинг web-дизайн Логическая и физическая структура сайта Теги и атрибуты Изучаем HTML GIF JPEG GIF-анимация

Основы Web технологий, основы Web дизайна - курс лекций

Урок 4 Первая web-страница

  Изучаем HTML

  Общая структура

Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, html-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от англ, tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Итак, упрощенная структура документа HTML выглядит следующим образом (рис. 4.1).

[an error occurred while processing this directive]

Рис. 4.1. Упрощенная структура html-документа

У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, — парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:

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

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

<тег1>

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

ВНИМАНИЕ При роботе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.

Однако вернемся к изображенной на рис. 4.1 структуре документа HTML. Как видно из иллюстрации, основной, глобальной конструкцией внутреннего кода web-страницы является нечто, обозначенное на рисунке прямоугольником с надписью «Документ HTML». Вполне логично было бы предположить, что это «нечто» — какая-то специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда действительно есть. Называется она «тег верхнего уровня» и записывается так:

<НТМL>.Содержимое </НТМL>

Тег верхнего уровня, как становится ясно из предложенного примера, — парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Таким образом, правило применения данной директивы также очевидно: открывающий тег записывается самой первой строкой html-документа, а закрывающий — самой последней.

Следующим на очереди у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа». Для чего нужен этот заголовок?

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

<HEAD> Содержимое </HEAD>

Из приведенной схемы видно, что раздел HEAD следует в html-документе непосредственно за тегом <HTML> и является второй обязательной командой, которую необходимо включать в код web-страницы.

Перейдем к следующему объекту html-документа — разделу «Внешний заголовок», который, как показано на схеме, является вложенной командой тега <HEAD>. Мнемоника внешнего заголовка записывается следующим образом:

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

Чем же «внешний заголовок» отличается от просто «заголовка» документа HTML? Все очень просто: именно он отображается в верхнем поле броузера в качестве названия страницы при ее открытии, и именно значение тега <TITLE>подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное». Непонятно? Взгляните на рис. 4.2.

Рис. 4.2. Значение тега <TITLE>

Теперь, уверен, все неясности ликвидированы. Последняя структурна составляющая кода web-страницы — раздел «Тело документа».

Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.

Теперь мы располагаем достаточным объемом информации для того, чтобы представить нашу абстрактную графическую схему в виде вполне конкретного кода HTML:

<HTML>

<HEAD>

<ТITLE>Моя первая web-страничка</TITLE>

</HEAD>

<BODY>

</BOOY>

</HTML>

Создайте с помощью Проводника Windows новую директорию на вашем жестком диске и назовите ее, например, «MySite». Внутри этой папки создайте каталог с названием «images», туда вы будете впоследствии помещать иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие действия: открыть Блокнот (Пуск > Программы > Стандартные > Блокнот), набрать в нем полученный выше код, сохранить текущий файл в папке «MySite» под именем index.html, воспользовавшись функцией «Сохранить как», и открыть его в броузере путем двойного щелчка мышью на значке данного файла в Проводнике. Вы получили свою первую web-страничку (рис. 4.3).

Рис. 4.3. Первая web-страничка

Постойте, скажете вы, но ведь этот html-документ отображается в главном окне броузера абсолютно пустым! Разумеется, ведь вы еще не внесли в него никакого контекстного содержимого. Для того чтобы это содержимое наполнило вашу страничку, необходимо изучить базовые теги разметки гипертекста. А для начала я предлагаю обратить пристальное внимание на приведенную ниже информацию, которая может пригодиться вам в последующей работе. Итак,

Краткий экскурс в теорию сетей - Современный Интернет Основы Web технологий - курс лекций