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

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

<имя тега имя атрибута=аргумент>текст</имя тега>

Чтобы задать цвет фона страницы, можно использовать следующую запись:

В этом фрагменте программы имя тега – body, имя атрибута – bgcolor. После знака равенства на английском языке указан цвет (аргумент) фона (в данном случае – белый).

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

В данном фрагменте программы имя тега – body. Этот тег имеет пять атрибутов, и каждому атрибуту присвоен свой аргумент.

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

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

Тег <font> позволяет управлять размером, цветом и начертанием символов. Следующий фрагмент программы показывает, как изменять размеры символов. Слова Font 2 и Font 3 будут написаны шрифтом разной высоты. Размер можно изменять от 1 до 7, причем указанные цифры не связаны с каким-то истинным размером символов. Это всего лишь порядковые номера шрифтов, чем больше номер, тем крупнее символ.

Web-страницы становятся привлекательными благодаря возможности размещения на них разнообразных графических объектов. Чтобы встроить изображение в HTML-документ, нужно заранее подготовить рисунок или фотографию в форматах GIF, PNG или JPEG.

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

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

При создании графических образов пока чаще всего используются два формата: GIF и JPEG. Оба формата являются растровыми (картинки формируются из отдельных разноцветных пикселей). Каждый формат имеет свою сильную и слабую стороны.

GIF-формат характеризуется сильной степенью сжатия графических файлов (по отношению к картинкам с расширением BMP сжатие достигает 10– 30 раз).

Этот формат позволяет хранить в одном файле сразу несколько картинок. Такое свойство GIF-изображений используют для формирования анимации – динамично изменяющихся рисунков или надписей.

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

Еще одной интересной отличительной особенностью GIF-графики является возможность создания прозрачных изображений, благодаря которым создается впечатление, будто надписи парят (летят) над задним фоном страницы.

Недостатком GIF-формата является то, что он позволяет запомнить лишь 256 различных цветов. Поэтому он сильно искажает цветные фотографии и картины. Идеально этот формат подходит для прорисовки кнопок, линий, полос, логотипов, заднего фона, рисунков без полутонов, анимированных картинок. В фотоальбомах этот формат используется для создания маленьких картинок для быстрого предварительного просмотра фотографий.

Достоинством JPEG-формата является возможность хранить около 16,7 миллиона различных цветов. Недостатком формата является существенная потеря качества при большой степени сжатия изображения.

Разработан еще один формат, который должен объединить достоинства GIF и JPEG-форматов. Это – PNG (Portable Network Graphic – перемещаемая сетевая графика).

Важнейшим свойством языка HTML является возможность создания гиперссылок. С помощью гиперссылок устанавливаются связи с другими местами данного документа (внутристраничные), с другими страницами данного сервера (внутрисистемные), с другими WWW-серверами (межсистемные), а также с файл-серверами и почтовыми серверами (межпротокольные). Именно гиперссылки совместно с линиями связи и серверами участвуют в создании Паутины – WWW.

Для указания местоположения отдельного ресурса сети используется указатель, который называется URL (Uniform Resource Locator). URL – это универсальный указатель ресурсов, адрес, который указывает путь к конкретному документу. Он содержит информацию об используемом протоколе, имени сервера, имени домена. Иногда приводятся сведения о директории, в которой хранится файл, и имени файла.

Рассмотрим пример создания гиперссылки на страницу, расположенную на другом сервере по отношению к серверу, на котором расположен просматриваемый документ:

Действие этого фрагмента программы таково: на экране появляется гиперссылка Midi-музыка, при щелчке по которой происходит переход по адресу http://www.midi.ru.

Заметим, что здесь имя тега обозначено символом «а», имя атрибута – словом href. Значение аргумента в данном теге – это адрес в сети (URL).

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

В данном случае аргумент атрибута href имеет значение glossary.htm. Это значит, что браузер будет искать указанный документ на данном сервере, в текущей папке.

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

Таким образом, если осуществляется переход между документами одного сайта, то адрес можно указывать не полностью. В этом случае используется так называемая относительная адресация [79]. Рассмотрим правила относительной адресации на примере некоторого сайта (Site), содержащего три папки (Folder 1...3) и пять Web-страниц (index и doc1...doc4). Файловая система сайта показана на следующем рисунке.

Чтобы сделать ссылку из документа doc2.html на документ doc3.html, достаточно записать относительный адрес doc3.html. В этом случае форма относительного адреса простейшая. Это объясняется тем, что оба документа находятся в одной папке.

Ссылка из документа doc1.html на страницу doc2.html осуществляется так: Folder2/doc2.html. В этом случае пришлось войти внутрь папки Folder2.

Для осуществления ссылки из документа doc1.html на документ index.html относительный адрес записывается так: ../index.html. В последнем случае необходим переход на один уровень вверх.

Наконец, чтобы сделать переход от документа doc2.html к странице doc4.html, следует использовать относительный адрес ../Folder3/doc4.html. Вначале пришлось выйти из папки Folder2, а затем войти в папку Folder3.

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

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

Аргумент «#begin» указывает метку (опорную точку, якорь, anchor) на текущем документе, куда должен быть осуществлен быстрый переход. В рассматриваемом примере произойдет быстрое «листание» документа и на экране мгновенно появится начало просматриваемого документа. Браузер будет искать указанную метку на данном сервере и на текущей странице.

Предварительно точка перехода должна быть помечена программистом следующим образом:

Естественно, что метка должна располагаться в самом начале документа (в том месте, куда по замыслу разработчика должен произойти переход).

При щелчке мышью по гиперссылке Переход в начало документа произойдет перемещение к якорю со значением атрибута name=«begin».

Такие метки удобно использовать при создании больших документов (книг, отчетов, энциклопедий). В начале документа можно поместить оглавление, состоящее из ссылок на метки, расположенные в заголовках разделов книги.

Для того чтобы прямо с Web-страницы можно было отправить электронное письмо, нужно в программу включить следующий текст (межпротокольная ссылка):

После слова mailto: указан электронный адрес получателя писем (это аргумент атрибута href). Внутри контейнера (между тегами) приведен поясняющий текст, который будет играть роль гиперссылки. Фраза «Электронное письмо Алексееву А.П.» при просмотре в браузере будет подчеркнутой, и при попадании на нее курсора он превратится в указующий перст (ладошку, кисть руки).

В качестве гиперссылки можно использовать графическое изображение (рисунок или фотографию).

Ниже приведен фрагмент программы, который позволяет выполнить переход на другую Web-страницу с помощью щелчка мышью по рисунку (изображение кнопки – button):

В результате щелчка по изображению кнопки будет вызвана страница, расположенная по адресу http://www.rambler.ru (отечественная поисковая система).

Изображение кнопки хранится в файле button.gif, который размещен по адресу http://www.apa.ok.ru/button.gif. Естественно, что кнопка заранее должна быть нарисована в графическом редакторе и файл с ее изображением должен быть помещен на сервер.

Из примера видно, что тег <а href =«URL»> служит для указания адреса, на который осуществляется переход со страницы, где видна кнопка.

Язык HTML позволяет запускать звуковые файлы, заранее подготовленные разработчиком страницы.

Рассмотрим пример:

<р>3десь находится звуковой

<a>«href=http://www.apa.ok/privet.wav»>привет</a></p>

Звуковой файл privet.wav должен быть заранее подготовлен с помощью средств мультимедиа (микрофона) и размещен по соответствующему адресу (в данном случае по адресу http://www.apa.ok/privet.wav). На экране монитора поясняющая надпись и гиперссылка будут выглядеть так:

Здесь находится звуковой привет.

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