ГРАФИКА
Графика – одна из самых привлекательных особенностей WorldWideWeb. Хорошо оформленные сайты, т.е. сайты, на страницах которых в соответствии с замыслом дизайнера размещены графические изображения, привлекают к себе большее число посетителей, чем сайты, хранящие только текстовую информацию. Многообразие достигается путем размещения в различных позицияхHTML– документа изображений, которые хранятся на диске в файлах графического формата, в которых любое изображение представлено в виде битовой карты – прямоугольной матрицы элементарных цветных точек, называемых пикселями. Все, что вы видите на экране своего монитора, достигается за счет того, что операционная система меняет цвета различных пикселей матрицы экрана.
На сегодня существует множество графических форматов файлов, но в WWWиспользуются только файлы форматаGIFJPEG.
Формат GIF(GraphicInterchangeFormat– формат обмена графическими данными) изначально разрабатывался для пользователей сетей. Графика, сохраняемая в этом формате, ограничивается 256 цветовыми оттенками. Этого маловато для качественной цветной фотографии, но вполне подходит для оформления фона. Этот формат обладает двумя важными свойствами, которые не поддерживаются другими форматами: прозрачность (transparency) и анимация (animation).
Прозрачность задается следующим образом: в специальной программе какой-то цвет для файла этого формата назначается «прозрачным» и тогда при выводе на экран изображения, которое хранится в таком GIF– файле, пиксели указанного цвета будут игнорироваться, то есть не выводиться. Это дает возможность поверх фона «накладывать» сложные изображения.
Анимация заключается в том, что в пределах одного GIF– файла сохраняются несколько изображений и при выводе браузером последовательно показываются в одной области экрана, что создает эффект простейшей мультипликации.
Формат JPEG(JointPhotographicExpertsGroup– Объединенная группа экспертов по изображениям) является общим именем для набора форматов. Все семейство этих форматов основано на математических алгоритмах сильного сжатия изображения. Причем, чем больше сжатие, тем менее качественным по отношению к оригиналу получается результирующее изображение. Но в целом, это формат позволяет сжать графический файл в десятки раз.
Внедрение графики в HTML – документ
Рассмотрим как изображения из графических файлов попадают в рабочее поле Web– браузера.
Во-первых, изображение может быть использовано в качестве фона. Уже известный нам тэг <BODY>имеет атрибутBACKGROUND:
<BODY BACKGROUND=”URL GIF- или JPEC – файл“>
Если графический файл ( с расширением GIF- илиJPEC) расположен в том же каталоге, то достаточно просто указать его имя с расширением, но если он хранится в другом месте, то для него требуется указать полный путь доступа, а в Сети –URL, например так:
<BODY BACKGROUND=”http://www.tutorial.ru/pic/back.gif”>
Возможен случай, когда графический файл расположен в подкаталоге текущего. В этом случае достаточно просто указать имя подкаталога и имя файла.
<BODY BACKGROUND=”pictures/back.gif”>
Обращаю ваше внимание, что Webв качестве символа разделителя в полном имени файлов применяется обратный слэш /, а не тот который используется в системеWindows. Это требование системыUnix, под управлением которой работают большинство серверов Интернета. Еще одной особенностью этой системы является то, что в ней различаются строчные и прописные символы при указанииURL, это важно, игнорирование этого момента может привести к ошибке.
Например, с точки зрения Windows, все ниже приведенные имена указывают на один и тот же файл, расположенный в каталогеpictures:
pictures/back.gif
PICTURES/back.gif
pictures/BACK.GIF
Pictures/Back.gif
Но система Unixбудет искать различные файлы, расположенные в различных каталогах и может не найти указанный файл. Самый простой способ не ошибиться всегда задавать имена файлов и каталогов, используя только строчные буквы латинского алфавита, и обходится простыми словами английского языка (или вовсе транскрипциями).
Внедренной фоновое изображение, если его размеры меньше рабочего поля, будет размножено браузером так, что заполнит весь экран. Если сам HTML– документ достаточно большой и для его просмотра приходится прибегать к помощи полос прокрутки (скроллинг), то фоновое изображение (особенно в том случае, когда оно многократно дублировано), будет перемещаться вместе с текстом. Если по какой-то причине необходимо оставлять фон неподвижным в момент прокрутки всего документа, следует воспользоваться параметромBGPROPERTIES=”FIXED”:
<BODY BACKGROUND=”bg.gif” BGPROPERTIES=”FIXED”>
Для привязки изображений к HTML– документу существует одинарный (не имеющий обрамляющей пары) тэг <IMG> наиболее простая форма этого тэга следующая:
<IMGsrc=”URL”>
Здесь URLявляется адресом графического файла (или полным его именем), содержащего изображение. Все, что сказано для имен, используемых вURLтэга <BODY>, справедливо и для тэга <IMG>.
У этого тэга есть еще несколько атрибутов:
ALING– Устанавливает расположение текста по отношению к изображению наверху (TOP), посередине (MIDDLE) или внизу изображения (BOTTOM).
ALT– Определяет текст, который будет выводиться «под изображением», то есть в той прямоугольной области, которая должна быть закрыта изображением. Этот же текст будет выводиться под указателем мыши, если его на несколько секунд оставить неподвижным над изображением.
WIDTH– задает ширину изображения в пикселях.
HEIGHT– задает высоту изображения в пикселях.
BORDER– задает ширину обрамляющей изображение рамки.
Атрибуты WIDTHиHEIGHTвыполняют важную функцию. Если они не указаны, то браузер сам вынужден определять размер внедряемого графического файла.
Следующий пример демонстрирует вывод изображения формата 25х70 пикселей без рамки, хранящегося в файле demo_picture.gif. Изображение физически размещено не на удаленном компьютере, а том же каталоге, что иHTML– документ, в котором установлена ссылка на это изображение.
<IMG SRC =”demo_picture.gif” WIDTH=25 HEIGH=70 BORDER=0 ALT=”Чудесная картина”>
На листинге представлен текст простого HTML– документа, оформленного с использованием фонового изображения и некоторой фотографии.
Листинг.Внедрение графического файла.
<HTML>
<HEAD><TITLE>Фотография</TITLE></HEARD>
<BODY BACKGROUND=vts.jpg><CENTER>
<IMG SRC=green.jpg WIDTH=486 HEIGHT=400 BORDER=0 ALT=”Греция”>
</CENTER> </BODY>
</HTML>
Так выглядит браузер после загрузки HTML– документа
Листинг
<HTML>
<HEAD><TITLE>Фотография</TITLE></HEARD>
<BODY BACKGROUND=pictures/IMG_0119.JPG><CENTER>
<IMG SRC=IMG_0165.JPG WIDTH=486 HEIGHT=400 BORDER=0 ALT=”Греция”>
</CENTER> </BODY>
</HTML>
Так выглядит браузер после загрузки HTML– документа
HTMLдопускает любое расположение тэгов и их атрибутов, так что можно его форматировать по собственному вкусу. Используя тэг <IMG> можно внедрять в документ также и динамические изображения – файлы форматаAVI. Этот формат позволяет работать с оцифрованными видео-клипами. Для внедренияAVI.- клипа используется следующий набор атрибутов:
DYNSRC– ЗадаетURLAVI– файла.
WIDTH– Ширина изображения в пикселях.
HEIGHT– Высота изображения в пикселях
START– Задает момент «включения» клипа. Может принимать значениеFILEOPEN, то есть прокрутка начинается сразу же с момента загрузки документа илиMOUSEOVER, когда «включение» происходит при щелчке мыши.
LOOP– Задает количество повторов клипа путем указания целого числа. Если вместо числа поставить значениеINFINITE, то клип будет «прокручиваться» бесконечное число раз.
LOOPDELAY– Задает задержку в миллисекундах между повторами изображения.
Пример, загрузки клипа, хранящегося в файле clip.avi. Прокрутка начинается сразу же, бесконечное число раз с задержкой 3 мс между каждым циклом:
<IMG dynsrc=clip.avi WIDTH=150 HEIGHT=120 START=”fileopen” LOOP=”infinite” LOOPDELAY=3>
Гиперссылки
Для Осуществления связи между HTML– документами применяются так называемые гипертекстовые ссылки.
Гипертекстовая ссылка состоит из двух частей: псевдокнопки и адресной части (URL). Псевдокнопка – это просто какой-то текст или графическое изображение, по которому пользователь должен щелкнуть мышью, приблизительно также, как он «нажимает» на кнопку диалоговой панели.
Абсолютный и относительный URL
В разделе, посвященном компьютерным сетям и принципам поиска информации в Интернет, было введено понятие URL (универсального локатора ресурса), однозначно определяющего расположение объекта в глобальной сети. В общем случае URL имеет следующий вид (части, заключенные в квадратные скобки, не обязательны и могут быть опущены):
протокол://адрес_узла[:порт]/путь/файл[#метка]
В таблице ниже приведены назначения компонент URL.
|
Компонента |
Назначение |
|
протокол |
Обозначение одного из протоколов, используемых для обращения к ресурсу, возможные значения: http, ftp, file и др. |
|
адрес_узла |
Доменное имя или IP-адрес компьютера в сети Интернет |
|
порт |
Порт, по которому клиент обращается к серверу для установления соединения; указывается только в случае обращения к нестандартному порту |
|
путь |
Путь к требуемому ресурсу |
|
файл |
Имя файла, содержащего HTML-документ или другой ресурс |
|
метка |
Позиция в документе, начиная с которой он отображается в окне браузера |
URL, заданный в таком виде, называется абсолютным URL, так как он полностью описывает расположение ресурса в глобальной сети. Пример При обращении к конкретному ресурсу порт и позиция в документе часто не указываются:
http://www.ctc.msiu.ru/education/book/index1.html
Якорь
Для создания гипертекстовой ссылки используется тэг <A>, следующего формата:
<A HREF=”URL”>Любой текст</A>
Буква А означает anchor (“якорь”), HREF – Hypertext Reference («Гипертекстовая ссылка) URL может быть полным, например:
<A HREF=http://www.infa-m.ru>Издательство INFA-M</A>
Если происходит ссылка на документ, который расположен на том же самом диске, более того, в том же каталоге, можно применять сокращенную запись URL, указывая только имя файла например:
<A HREF=”page15.htm”> Страница 15</A>
Эта гипертекстовая ссылка приведет к загрузке HTML– документа, хранящегося в том же каталоге в виде файлаpage15.htm.
Следующий пример демонстрирует ссылку на файл demo.jpg.хранящегося в каталогеpictures:
<A HREF=”pictures/demo.jpg”>
Тэг <A> может иметь дополнительный атрибутTARGET=, который указывает на способ загрузки страницы в браузер. Например, следующая ссылка приведет к созданию нового экземпляра браузера, в который и будет загружена страница:
<A HREF=’page15.htm” TARGET=”_BLANK”> Страница 15 </A>
Разберем следующую ситуацию. В одном HTML– документе (например,contents.htm) описано оглавление некоторого большого текста, разбитого на главы. А сам текст в полном объеме хранится в другомHTML– документе (например,text.htmявляется гипертекстовой ссылкой на сам текст. Например:
<A HREF=”text.htm”>Глава 77</A>
В этом случае документ будет загружен с самого начала и пользователю придется с помощью полосы прокрутки позиционировать его на главу 77. HTMLпозволяет путем введения так называемых именованных гипертекстовых ссылок избежать поиска нужного фрагмента. Имя гипертекстовой ссылке присваивается так же при помощи тэга <A> с атрибутомName.
Например, для указанного примера в HTML– документеtext.htmвместо Глава 77 следует поместить тэг:
<A NAME=”chapter77”>Глава 77</A>
А в HTML– документеcontents.htmсоответствующий вызов оформить следующим образом:
<A HREF=”text.htm#chapter77”>Глава 77</A>
В этом случае загруженный документ сразу будет установлен с искомой точки.
Использование изображения в качестве гиперссылки ничуть не сложнее, чем использования для этой цели обычного текста. Для этого тэг, описывающий изображение, следует обрамить тэгом гиперссылки:
<AHREF=”index.htm”><IMGSRC=”home.gif”ALT=”На главную страницу”></A>
В этом примере приведена ссылка на главную страницу (index.htm)Web-сайт. Такая гиперссылка обычно является атрибутом любой страницы нижнего уровня. В данном примере предполагается, что на диске имеетсяGIF– файл с именемhome.gif. в котором хранится некое изображение.
Пример связи страниц
А теперь создадим пару связанных между собой документов. Введите в редакторе текст с листингом 5.1 и 5.2 и сохраните их в файлах, соответственно: 05_01.htmи 05_02.htm. В данном случае имена файлов должны быть именно такими, как приведено в тексте, иначе связка не получится.
Листинг 1ПростейшийHTML– документ, содержащий гиперссылку(05_01.htm)
<HTML>
<HEAD><TITLE>Документ 1</HEAD></TITLE>
<BODY.
<CENTER>
<H1>Документ №1</H1><BR>
<A HREF=”05_02.htm”>Документ № 2</A>
</CENTER>
</BODY></HTML>
Листинг 2ПростейшийHTML– документ, содержащий гиперссылку(05_02.htm)
<HTML>
<HEAD><TITLE>Документ 2</HEAD></TITLE>
<BODY.
<CENTER>
<H1>Документ №1</H1><BR>
<A HREF=”05_01.htm”>Документ № 1</A>
</CENTER>
</BODY></HTML>
Мы получили самый настоящий связанный набор HTML– документов. Первый документ содержит ссылку на файл 05_01.htmи при активизации этой ссылки данный документ будет загружен в браузер. Соответственно, второй документ содержит ссылку на первый.
Циклическая связь двух HTML – документов с помощью тэгов <A HREF>
Структура сайта
Главных причин популярности HTML три.
1. HTML-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура. Оно линейно в своей основе. (Отступлением от этого тезиса являются ссылки. С их помощью можно организовать ветвление и процедурный вызов. Об этом будет рассказано ниже. Однако, эти средства слишком примитивны для серьезного сопоставления с аналогичными структурами языков типа Си или Паскаль.)
Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:
берется обычный текст
и размечается, то есть, на него накладывается сетка из тегов так, чтобы браузер смог показать строчки текста на экране.
Однако, хорошие гипертекстовые документы при таком подходе получить гораздо сложнее, чем в случае когда, структура HTML-документа планируется еще до написания текстов. Ведь гипертекст устроен принципиально иначе (см. третью причину).
Переносимость.
Если, работая в Word'e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию -- начинаются проблемы.
Для того чтобы документ появился на экране у абонента, необходимо, чтобы его компьютер и операционная система (платформа) позволяли запустить ваш любимый редактор.
Для того чтобы документ загрузился в Word, крайне желательно совпадение версий этого продукта у вас и вашего коллеги.
Для того чтобы текст на экране не выглядел как древненорвежский манускрипт, необходимо, чтобы ваш партнер имел на своем компьютере шрифты, которые были использованы при создании вашего текста.
Но даже, если все эти условия выполнены, все равно мало шансов на то, что ваш товарищ увидит текст неискаженным (картинки вылезают из рамок, границы страниц плывут по тексту,...). Это происходит потому, что ваш Word и Word вашего партнера настроены по-разному.
После того, как по телефону (или электронной почте) редакторы будут настроены одинаково, текст все равно может выглядеть по-разному уже по причинам, известным только фирме Microsoft.
Все, о чем говорилось, называется непереносимостью продукта. Не в том смысле, что продукт кого-то не любит, а в том, что разным пользователям невозможно, или крайне тяжело, отображать у себя то, что сделано в другом месте.
HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.
Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы. Правда, и здесь не все гладко. Разные браузеры могут работать немного по-разному.
HTML-документ -- это гипертекст.
Обычный текст имеет линейную структуру. И хотя пользователь может читать любые его страницы и строчки, листая документ на экране или в бумажной книге, автор предполагает, что текст читается по порядку. Сначала первая страница, потом вторая и так далее.