- •Раздел 4 Первая web-страница
- •Общая структура html
- •Теги и атрибуты
- •Escape-последовательности
- •Перевод строки, пробелы, табуляция
- •Комментарии
- •Базовые теги разметки гипертекста
- •Заголовки
- •Разделители
- •Гиперссылки
- •Ссылки на разделы
- •Ссылки на адрес электронной почты
- •Ссылки на файловые объекты
- •Практикум
- •Размещение страницы в Интернете
Раздел 4 Первая web-страница
Краткое содержание раздела:
Общую структуру языка HTML.
Понятия тегов и атрибутов, escape-последовательностей, правила записи команд.
Цветовые спецификации языка.
Базовые теги HTML, позволяющие формировать абзацы, устанавливать стили выделения и форматирования текста.
Атрибуты тега <BODY>.
Тег управления шрифтом <FONT>.
Команды, предназначенные для создания заголовков, списков, разделителей.
Правила организации гиперссылок.
Программу CuteFTP, предназначенную для публикации web-страниц в сети Интернет.
Общая структура html
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, html-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от англ, tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Итак, упрощенная структура документа HTML выглядит следующим образом
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, — парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу.
В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег>0брабатываемое значение</тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга: <тег1> <тег2>0брабатываемое значение</тег2></тег1>
ВНИМАНИЕ При роботе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода web-страницы является нечто, обозначенное на рисунке прямоугольником с надписью «Документ HTML». Вполне логично было бы предположить, что это «нечто» — какая-то специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда действительно есть. Называется она «тег верхнего уровня» и записывается так:
<НТМL>.Содержимое </НТМL>
Тег верхнего уровня, как становится ясно из предложенного примера, — парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Таким образом, правило применения данной директивы также очевидно: открывающий тег записывается самой первой строкой html-документа, а закрывающий — самой последней.
Следующим на очереди у нас прямоугольник, обозначенный на схеме фразой «Заголовок документа». Для чего нужен этот заголовок? Заголовок web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Необходимо отметить, что содержимое заголовка не отображается в броузере и не влияет на внешний вид документа: это, если можно так выразиться, служебная информация, которая необходима, прежде всего, самому броузеру. Синтаксис тега заголовка в общем виде выглядит так:
<HEAD> Содержимое </HEAD>
Из приведенной схемы видно, что раздел HEAD следует в html-документе непосредственно за тегом <HTML> и является второй обязательной командой, которую необходимо включать в код web-страницы.
Перейдем к следующему объекту html-документа — разделу «Внешний заголовок», который, как показано на схеме, является вложенной командой тега <HEAD>. Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE>Внешний заголовок</TITLE>
Чем же «внешний заголовок» отличается от просто «заголовка» документа HTML? Все очень просто: именно он отображается в верхнем поле броузера в качестве названия страницы при ее открытии, и именно значение тега <TITLE>подставляется по умолчанию в соответствующее диалоговое окно, когда пользователь заносит документ в папку «избранное».
Последняя структурна составляющая кода web-страницы — раздел «Тело документа».
Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Теперь мы располагаем достаточным объемом информации для того, чтобы представить нашу абстрактную графическую схему в виде вполне конкретного кода HTML:
<HTML> <HEAD> <ТITLE>Моя первая web-страничка</TITLE> </HEAD> <BODY> </BOOY> </HTML>
Создайте с помощью Проводника Windows новую директорию на вашем жестком диске и назовите ее, например, «MySite». Внутри этой папки создайте каталог с названием «images», туда вы будете впоследствии помещать иллюстрирующие ваш проект изображения. Теперь необходимо проделать следующие действия: открыть Блокнот (Пуск > Программы > Стандартные > Блокнот), набрать в нем полученный выше код, сохранить текущий файл в папке «MySite» под именем index.html, воспользовавшись функцией «Сохранить как», и открыть его в броузере путем двойного щелчка мышью на значке данного файла в Проводнике.
Постойте, скажете вы, но ведь этот html-документ отображается в главном окне броузера абсолютно пустым! Разумеется, ведь вы еще не внесли в него никакого контекстного содержимого. Для того чтобы это содержимое наполнило вашу страничку, необходимо изучить базовые теги разметки гипертекста. А для начала я предлагаю обратить пристальное внимание на приведенную ниже информацию, которая может пригодиться вам в последующей работе.