Справочная информация. Структура HTML-документа.Существует много различных инструментальных средств для создания Web-страниц

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

Файлы, содержащие информацию на языке HTML, обычно имеют расширение htm или html Они могут создаваться либо с помощью простейших текстовых редакторов (например, «Блокнота»), либо с помощью специальных HTML-редакторов. Основной файл каждого каталога обычно имеет имя index. Если при загрузке страницы в адресе не указывать имя файла, то обычно будет производиться поиск.

Тэги (флаги, дескрипторы, контейнеры) — это специальные кодовые слова, определяющие внешний вид текста и графики, выводимой на экран, и формирующие связи с другими web-сайтами и ресурсами Интернета.

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

HTML-документ начинается с тэга < HTML> и заканчивается тэгом < /HTML>. Между ними располагается то, что будет выводиться на экран программой просмотра: текст, картинки, видеофрагменты и т. д. Любой HTML-документ состоит из двух частей: заголовка и тела. Кроме того, допускается использование комментариев. Комментарий должен начинать­ся с <! - и заканчиваться ->. Всё, что располагается между этими тэгами, на экран выводиться не будет. Комментарии помогают лучше разобраться в коде HTML-документа.

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

< HTML>

< HEAD>

….

< /HEAD>

< BODY>

….

< /BODY>

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

< TITLE> название документа < /TITLE>

Тело документа — это содержимое Web-страницы. Оно располагается между тэгами < BODY> и < /BODY>. Тэг < BОDY> может содержать ряд атрибутов для глобальных установок, относящихся ко всему документу: цвета гиперссылок, цвет текста, фона, фоновый рисунок и т. д. Некоторые атрибуты тэга < BODY>:

• а1ink=цвет — цвет загружаемой гиперссылки;

• 1inkк=цвет —цвет невыбранной гиперссылки;

• vlink= цвет — цвет посещенной гиперссылки;

• bgcolor= цвет — фоновый цвет страницы;

• background=" имя графического файла" — повторяющаяся фоновая графика. Рисунок, хранящийся в указанном файле, будет размножен по всему экрану и перекроет цвет фона. Можно использовать форматы файлов GIF и JPEG;

• text= цвет — цвет текста;

• topmargin=n — расстояние между верхним краем окна браузера и содержимым страницы (задается в пикселях);

• lef tmargin=n — расстояние между левым краем окна браузера и содержимым страницы.

Цвет указывается с помощью либо его имени, либо его шестнадцатеричного кода.

Некоторые цвета:

black — черный (000000);

aqua — бирюзовый (00ffff);

blue — синий (0000ff);

gray — серый (808080);

reen — зеленый (008000);

red — красный (ffOOOO);

white — белый (ffffff);

yellow — желтый (ffff00);

maroon — коричневый (800000);

fuchsia — розовый (ff00ff);

lime — светло-зеленый (008000);

navy — ультрамариновый (000080);

olive — оливковый (808000); purple — пурпурный (800080);

silver — серебряный (c0c0c0);

teal — темно-зеленый (008080).

Форматирование текста. Шрифты. Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.

1) < DIV> — выделение абзаца:

< DIV а1ign=тип выравнивания> …< /DIV>

Значения параметра align:

left — по левому краю;

right — по правому краю;

center — по центру;

justify — по центру.

2)< Р align = тип выравнивания>...< /Р> — выделение абзаца текста.

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

3) < CENTER>...< /CENTER> — центрирование всех элементов, располо­женных между этими тэгами (текста, таблиц, графики).

4) < BR> — принудительный разрыв строки в месте установки данного тэга.

5) < Н1 align = тип выравнивания >...< /Н1>

< Н2 align = тип выравнивания >...< /Н2>

…….

< Н6 align= тип выравнивания >...< /Н6>

Это форматирование заголовков. Тэги с номерами 1-3 пригодны для вывода заголовков (большой размер шрифта). Тэги с номерами 4-6 задают размер шрифта, равный или меньший размеру шрифта текущего текста. По умолчанию текст выводится на экран тем шрифтом, который задан в установках браузера. Для изменения шрифта используется тэг < FONT>: < FONT fасе = название шрифта size = paзмеp со1ог = цвет>... < /FONT> — определение шрифта.

Атрибут face определяет тип шрифта (Arial, Times New Roman, Courier New, Inipact и т. д.). По умолчанию текст будет выводиться тем шрифтом, который задан в настройках программы-браузера. То же самое будет происходить, если указанный шрифт не установлен на компьютере. Возможно задание сразу нескольких шрифтов через запятую. Тогда сначала будет искаться первый, в случае его отсутствия — второй и т. д.

size — размер шрифта; может задаваться абсолютным значением в диапазоне от 1 до 7 и относительным (по отношению к базовому значению). При относительном задании необходимо перед числом поставить знак + (увеличение) или - (уменьшение). Рекомендуется использовать относительное значение.

color — цвет; задается так же, как цвет фона.

Для изменения начертания шрифта используются тэги:

1) < В>... < /В> — полужирный шрифт;

2) < I>...< /I> — курсив;

3) < U>... < /U> — подчеркивание;

4) < SUB >;...< /SUB> — нижний индекс;

5)< SUP>...< /SUP> — верхний индекс.

Гиперсвязи и гиперссылки. Реализуемые в Интернет-документах ссылки можно разделить на две категории:

1) ссылки на другие позиции внутри того же документа;

2) ссылки на другой документ.

Для задания этих типов гиперсвязей используется один тэг < А>, имеющий следующий вид:

hrеf = целевой адрес> текст или графика< /А>

В качестве гиперссылки можно использовать текст или графическое изображение. Информация, которая располагается между тэгами < А> и < /А>, будет выведена на экран. Если это текст, то он будет выделен подчеркиванием и специальным цветом (по умолчанию синим). При размещении указателя мыши над гиперссылкой он принимает вид руки. При выборе ссылки будет осуществлен переход по заданному адресу. Если ука­зывается относительный адрес (например, только имя файла), то он будет искаться в текущей папке.

При работе с большими документами рекомендуется вставлять в них метки с помощью этого же тэга с параметром NAME:

< А NАМЕ=метка> < /А>

Сама метка на экране не отображается. Для организации перехода к меткам документа следует записать следующий HTML-код:

< А НRЕF = # метка> текст или графика< /А>

Если нужно перейти к заданной метке в другом документе, то необходимо записать такой код:

< А НRЕF =адрес документа # метка> текст или графика< /А>

Пример

Файл index.htm:

< HTML>

< HEAD>

< TITLE> Страничка Компьютерной школы ПГУ< /TINLE>

< /HEAD>

 

< BODY bgcolor = gray link=white vlink = yellow>

< H1 align = center> < FONT color = navy> Koмьютерная школа ПГУ

< /FONT> < /Hl>

< BR>

< BR>

< H2 align =c enter> < A HREF=" history.htm" >

История создания< /А> < /Н2>

< BR> < BR>

< H2 align = center> < A HREF=" prepod.htm" >

Преподаватели< /А> < /Н2>

< BR> < BR>

< H2 align=center> < A HREF=" kurs.htm" > Kypсы< /A> < /H2>

< /BODY>

< /HTML>

 

Файл history.htm:

< HTML>

< HEAD>

< TITLE> История Компьютерной школы ПГУ< /ТIТLE>

< /HEAD>

 

< BODY bgcolor=gray link=white vlink=yellow>

< H1 align=center> < FONT color=navy>

История создания< /FONT> < /Н1>

< p align=justify>

Компьютерная школа была основана в < b> сентябре 1994

года< /b>. Первый набор учеников составил < b> 100< /b> человек.

< /р>

< р align=justifу>

В < i> 1995< /i> году в школе появилось старшее, а в < i> 1996< /i>

году - младшее отделение.

< /р>

< /BODY>

< /HTML>