Основная структура HTML- программы

< HTML>

< HEAD>

……………….

< TITLE> текст заголовка < /TITLE>

………………

< /HEAD>

……………….

< BODY>

………………….

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

……………………

< /BODY>

< /HTML>

Ярлыки < HTML> и < /HTML> обозначают тип документа, его начало и конец.

Ярлыки < HEAD> и < /HEAD> выделяют поле заголовка документа. Внутри этого поля размещается строка, содержащая название WEB -страницы, которое размещается между ярлыками < TITLE> и < /TITLE>. В броузере этот текст будет находится в строке заголовка документа, в синем поле.

Ярлыки < BODY> и < /BODY> выделяют главную структурную часть документа. Между этими тэгами помещается основной текст WEB -страницы.

Например: в текстовом редакторе Блокнот наберем следующий текст программы

< HTML>

< HEAD>

< TITLE> Пример1 < /TITLE>

< /HEAD>

< BODY>

Гипертекст дает возможность объединить разрозненные текстовые и мультимедийные фрагменты - графику, анимацию, аудио и видео в информационные блоки.

< /BODY>

< /HTML>

Сохраните эту программу: Файл - Сохранить как…, в строке Имя файла напишите Пример1.html, в строке Тип файла выберите Все файлы, затем нажмите кнопку Сохранить.

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

Вверху окна помещен заголовок, который находился между тэгами < TITLE>. Если программа набрана правильно, без ошибок, то в окне броузера тэги не видны. Если есть ошибки, то их надо исправить, затем Сохранить, а в броузере, в строке Стандартная нажать кнопку Refresh (обновить).

Ярлык < BODY> может содержать информацию о цвете фона и текста, которая задается параметрами BG COLOR, определяющий цвет фона, и TEXT, определяющий цвет текста.

Например:

< BODY BGCOLOR = “FFFF00” TEXT= “000000”>

Здесь цвет фона выбран желтый, а цвет текста – черный.

Все цвета имеют свою кодировку. Может задаваться комбинацией букв и цифр.

Например:

Варьируя разные сочетания букв и чисел, можно получить любой цвет.

Кроме этого, броузеры распознают название некоторых стандартных цветов палитры. Например:

При написании программ могут быть использованы одиночные тэги.

1. Тэг <! > - комментарии. Как известно, в процессе написания программ часто приходится делать различные заметки, комментарии, т.е. вносить какой-либо пояснительный текст. Поскольку комментарии не должны быть видны при просмотре текста в броузере, комментарии помещают внутри тэга: <! текст комментария >

2. Тэг < HR> (Horizontal ruller) выводит на экран горизонтальную линию, которая может служить для логического разделения страницы. По умолчанию, то есть без дополнительных указаний эта линия будет пересекать всю страницу (по ширине) слева направо. С целью ограничения ее длины, надо ввести параметр WIDTH – ширина. Размеры могут быть заданы в процентах или в пикселах.

Например: < HR WIDTH = 50%>

Данная линия начнется с левой стороны и закончится посередине.

Линия может располагаться по середине, может начинаться от середины и заканчиваться на правой стороне страницы. Для изменения расположения линии применяется параметр ALIGN, который имеет три значения: LEFT - слева, RIGHT - справа, CENTER - центр.

Например:

< HTML>

< HEAD>

< TITLE> Пример2 < /TITLE>

< /HEAD>

<! Выберем цвет фона фиолетовый, а цвет шрифта черный>

< BODY BGCOLOR = “FF00FF” TEXT = “000000”>

Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989 году как один из компонентов технологии распределенной гипертекстовой системы World Wide Web (WWW).

<! Линия шириной полстраницы справа>

< HR WIDTH = 50% ALIGN = “RIGHT”>

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

<! Линия шириной четверть страницы слева>

< HR WIDTH = 25% ALIGN = “LEFT”>

Термин «гипертекст» ввел в обращение Т.Нельсон в 1965 году.

<! Линия шириной 30% страницы по центру>

< HR WIDTH = 30% ALIGN = “CENTER”>

< /BODY>

< /HTML>

Сохраните текст с именем Пример2.html

На экране, в режиме просмотра документов HTML увидим:

Элемент HR, создающий горизонтальную линию, допускает использование ряда атрибутов. С их помощью линию можно превратить в цветной прямоугольник. Например, прямоугольник светло-зеленого цвета, выровненный влево, высотой 20 и шириной 18 пикселов: < HR color = “lime” SIZE=20 width =18 align = “left”>.

3. Тэг < P> задает новый абзац, пустую строку. Следующий за ним текст не просто переносится в начало новой строки, но и отделяется от предыдущего текста дополнительным промежутком. Тэг < BR> осуществляет переход на новую строку.

Например: строки стихотворения надо отделять друг от друга разрывом строки, а четверостишия – пустой строкой.

< CENTER> … < /CENTER> - центрируется все, что находится между этими тэгами, например, рисунок, таблица, линия, текст.

Для изменения размера шрифта существует набор из 6 ярлыков:

< H1> …. текст …. < /H1> - Самый крупный шрифт

< H2> …. текст …. < /H2> - -----------

< H3> …. текст …. < /H3> - ----------

< H4> …. текст …. < /H4> - -----------

< H5> …. текст …. < /H5> - -----------

< H6> …. текст …. < /H6> - Самый мелкий шрифт

Изменение шрифтов можно осуществлять и с помощью парного тэга < font> …< /font>, определяющего тип, размер и цвет шрифта. Эти характеристики определяются при помощи соответствующих атрибутов. Абсолютный размер шрифта задается атрибутом size (размер) –абсолютный размер шрифта. Может принимать значения от 1 до 7.

Например:

< HTML>

< HEAD>

< TITLE> Графика< /TITLE>

< /HEAD>

<! Выберем цвет фона зеленый, а цвет шрифта черный>

< BODY BGCOLOR = “00FF00” TEXT = “000000”>

< H1> Компьютерная графика < /H1>

<! Линия шириной полстраницы и в центре>

< HR WIDTH = 50% ALIGN = “CENTER”>

< H4> Растровая графика применяется при разработке мультимедийных изданий.

< P> Векторная графика применяется для создания оформительских иллюстраций.

< P> Фрактальная графика применяется для программирования изображений. < /H4>

<! Линия шириной на всю страницу>

< HR WIDTH = 100%>

< /BODY>

< /HTML>

Сохраните текст с именем Графика.html При просмотре в броузере этот файл имеет вид: