Язык HTML

Составление программы на языке HTML чем-то напоминает набор текста в редакторе MS Word. Как известно, если при наборе текста в MS Word бывает необходимо сделать какое-то слово полужирным, нужно его выделить и нажать специальную кнопку на панели форматирования. Чтобы форматировать текст на Web-странице, нужно с помощью языка HTML поставить вокруг выделяемого слова специальные символы. В различных литературных источниках эти символы могут называться по-разному: маркерами, метками, дескрипторами, командами управления или тегами.

Например, слово "Проба" на Web-странице будет выделено полужирным шрифтом, если использовать такую конструкцию:

<Ь>Проба

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

Проба

Этот пример достаточно типичен. Большинство тегов парные: первый тег является открывающим, а второй тег - закрывающим (завершающим, конечным). Распознать закрывающий тег можно по символу "/". Открывающий тег имеет такой формат:

<имя тега [атрибуты]>

Действие тега по форматированию текста определяется его именем и может уточняться атрибутами. Атрибуты являются необязательными элементами тегов и поэтому могут отсутствовать. Атрибуты записываются в формате:

имя атрибута [=значение]

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

<имя тега>текст

Фрагмент программы, расположенный между открывающим и закрывающим тегами, называется контейнером. Специальные теги используются для центрирования текста, управления выравниванием, размером шрифта и цветом текста, создания заголовков, абзацев, списков, таблиц, форм, вставки гиперссылок, графических объектов и др. Различаются теги своими именами и действиями, производимыми над элементами документа (Web-страницы). Кроме парных тегов существуют непарные теги.

Тег используется, если необходимо перейти на новую строку, не создавая нового абзаца. Тег создает разделительную горизонтальную линию. Одиночный тег

используется для вставки графических объектов. К непарным тегам также относится метка для комментариев .

При создании языка HTML авторами использовался английский язык. Смысл имен многих тегов становится понятным при переводе английских слов на русский язык, например: b - bold (четкий, жирный), i - italic (курсив), u - underline (подчеркивание), head (голова), body (тело), img (image - изображение).

Теги могут быть вложенными. Например:

HTML - язык для создания УеЬ-страпиц

В результате выполнения браузером этого фрагмента кода на экране клиента появится фраза, написанная жирным шрифтом (теги Ь), причем слово HTML будет выделено курсивом (теги i):

HTML - язык для создания Web-страниц

Как уже упоминалось выше, теги, помимо имени, могут содержать атрибуты, которые дают дополнительную информацию о том, как браузер должен обработать текущую метку. Общий вид тега с атрибутом таков:

<имя тега имя атрибута=значение (аргумент)>Форматируемый текст

Например, чтобы изменить цвет шрифта на сиреневый цвет можно воспользоваться следующей конструкцией:

color="rgb(255,0,255)" или color="fuchsia"

Этот пример говорит о том, что значение атрибута может быть задано с помощью символьной метки (например, red, blue), с помощью трех десятичных чисел (каждое может изменяться в пределах от 0 до 255), с помощью трех шестнадцатеричных чисел (каждое изменяется от 0 до FF), путем указания процентной насыщенности каждого из трех основных цветов (в процентах).

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

В данном фрагменте программы имя тега - body. Этот тег имеет пять атрибутов, и каждому атрибуту присвоен свой аргумент. Атрибут bgcolor задает цвет заднего фона страницы (бумаги). В данном случае этот цвет выбран белым. Атрибут text определяет цвет чернил (здесь - черный), a link определяет цвет гиперссылки (синий). Наконец, атрибут vlink задает цвет гиперссылки недавно посещенного сайта (красный), a alink назначает цвет ссылки в момент ее выбора (зеленый). Цвета задаются тремя шестнадцатеричными числами в интервале от 00 до FF (в десятичной системе счисления от 0 до 255). Иногда такое сочетание трех шестнадцатеричных чисел называют RGB-триплетом.

Таким образом, можно задать любой из 256x256x256 = 16 777 216 цветовых оттенков для бумаги, чернил и ссылок. "Смешивая" три цвета (красный, зеленый и синий - RGB) с разными интенсивностями каждого цвета, можно получить желтый (FFFFOO), светло-серый (ВЕВЕВЕ), небесно-голубой (87СЕЕВ), золотой (FFD700), пурпурный (A020F0) цвета и множество других цветовых оттенков. Образцы некоторых цветов показаны в следующей таблице.

Название	Число	Цвет |
Желтый	FFFFOO
Светло-серый	ВЕВЕВЕ
Небесно-голубой	87СЕЕВ
Зеленый	00FF00
Пурпурный	A020F0
Красный	FF0000

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

Font 2Font 5

Результат действия этих тегов будет таким: Font 2 Font 5

Размер символов можно изменять от 1 до 7, причем указанные цифры не связаны с каким-то истинным размером. Это всего лишь порядковые номера шрифтов. Чем больше номер, тем крупнее символ.

Web-страницы становятся привлекательными благодаря возможности размещения на них разнообразных графических объектов. Чтобы встроить изображение в HTML-документ, нужно заранее подготовить рисунок или фотографию в форматах GIF, PNG или JPEG. Допустим, что нужно включить в документ фотографию с именем foto.JPG, находящуюся в одном каталоге (папке) с данным HTML-документом. Тогда нужно использовать такой фрагмент программы: . В результате на экран будет выведено подготовленное изображение:

Самара. Часовня Бориса и Глеба .

Формирование графических изображений следует сопровождать альтернативным текстом. Дело в том, что многие пользователи для ускорения работы в Интернете отключают графику с помощью специальных команд (установок) браузера. В этом случае альтернативный текст позволяет пользователю заранее представить, что появится на экране монитора после включения графического режима. Например:

При создании графических образов пока чаще всего используются два формата: GIF и JPEG. Оба формата являются растровыми (картинки формируются из отдельных разноцветных точек). Каждый формат имеет свою сильную и слабую стороны. GIF-формат характеризуется сильной степенью сжатия графических файлов (по отношению к картинкам с расширением BMP сжатие достигает 10-30 раз). Этот формат позволяет хранить в одном файле сразу несколько картинок. Такое свойство GIF-изображений используют для формирования анимации - динамично изменяющихся рисунков или надписей. Отличительной особенностью этого формата является чересстрочный способ воспроизведения графических объектов. Вначале появляются лишь основные детали, которые по мере загрузки картинки становятся отчетливее. Еще одной интересной отличительной особенностью GIF-графики является возможность создания прозрачных изображений, благодаря кото рым создается впечатление, будто надписи парят (летят) над задним фоном страницы. Недостатком GIF-формата является то, что он позволяет запомнить лишь 256 различных цветов. Поэтому он сильно искажает цветные фотографии и картины. Идеально этот формат подходит для прорисовки кнопок, линий, полос, логотипов, заднего фона, рисунков без полутонов, анимированных картинок, баннеров. В фотоальбомах этот формат используется для создания маленьких картинок (миниатюр) для быстрого предварительного просмотра фотографий.

Достоинством JPEG-формата является возможность хранить около 16,7 миллиона различных цветов. Недостатком формата является существенная потеря качества при большой степени сжатия изображения. Разработан еще один формат, который должен объединить достоинства GIF и JPEG форматов. Это - PNG (Portable Network Graphic - перемещаемая сетевая графика).

Краткие итоги

Язык HTML - это язык разметки (форматирования) текста.

Форматируемый текст обрамляется тегами, которые изменяют форму символов, текста, их местоположение.

Графические объекты могут быть внедрены на Web-страницу в одном из трех форматов: JPEG, GIF или PNG.