Для обозначения изображения как гипертекстовой метки используется тот же таг <А>,
что и для текста, но между <А>и </А> вставляется таг изображения <IMG>:
Первые WEB-страницы содержали исключительно текстовую информацию. Иначе на тот момент и быть не могло: скорость передачи по каналам была низкой, а графические возможности броузеров крайне скудными. Впоследствии картина существенно изменилась: выросли скоростные и технические характеристики линий связи, появились более мощные компьютеры и совершенное программное обеспечение к ним.
Сейчас даже трудно представить WEB-страницу, не содержащую яркие и красочные иллюстрации, подмигивающие кнопочки, перемещающиеся изображения и т.д. Такая страница привлекает внимание читателя и ему хочется посетить ее вновь и вновь.
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте. Каждый из этих форматов имеет свои преимущества. Общеизвестно, что многие изображения лучше выглядят в формате JPEG, чем в GIF, кроме того, файлы с изображениями в формате JPEG получаются намного компактнее, что очень важно с точки зрения персылки информации в Интернет. Однако, формат GIF фирмы CompuServe позволяет сохранять не только неподвижные изображения, но и анимированные кадры, создающие эфект движения. Кроме того формат GIF89a позволяет достичь эффекта "прозрачности" за счет удаления из цветовой палитры изображения одного из цветов (обычно цвета фона). Такие изображения могут быть импортированы в другие изображения, образуя коллажи. Поэтому, действительно красочный и красивый сайт можно построить только комбинируя оба графических формата.
Чтобы вставить изображение в текстовый документ, нужно включить в текст гиперссылку на него с помощью дескриптора <IMG>. Причем изображение, на которое мы ссылаемся, может находиться как на том же сервере, что и текстовый HTML-документ, так и на любом другом сервере Интернет. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда это можно сделать так:
<IMG SRC="picture.gif">
<IMG> является одиночным дескриптором. Атрибут SRC означает источник (SoRCe), то есть место, где сохраняется изображение. Если оно находится на другом WEB-сервере, то в декрипторе <IMG> указывается полный URL графического файла:
<IMG SRC=(URL изображения)>
Как и в случае текстовой гиперссылки, указываемый URL может быть абсолютным и относительным (см. раздел "Связывание")в материале прошлого занятия.
При чтении HTML-страницы загрузка ее графической части занимает достаточно много времени, по сравнению с текстовой. Многие броузеры позволяют отключать режим загрузки графики. В этом случае на HTML-странице обозначаются лишь контуры площади, занимаемой изображением. Атрибут АLТ тэга IMG (от alternative) позволяет пользователям, броузеры которых настроены на просмотр только текста, получить представление о том, что за графика расположена на странице и каково ее содержание. Например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений.
Во время загрузки HTML-страницы броузер сначала загружает все встроенные изображения, а только затем ее текстовую часть. Но эту проблему можно решить с помощью атрибутов HEIGHT и WIDTH. Дело в том, что если заранее указана высота и ширина поля, куда будет загружено изображение, то броузер сможет подготовить макет страницы и разместит текст до того, как будет закончена загрузка всех изображений. Например, дескриптор
<IMG SRC="picture.gif" HEIGHT=120 WIDTH=160>
создаст в загружаемой HTML-странице прямоугольное поле размером 120x160 пикселов, затем загрузит текстовую часть документа, а только затем приступит к загрузке изображения в отведенное поле. Если реальные размеры изображения на совпадают с указанными, то оно будет отмасштабировано, хотя длина передаваемого графического файла при этом останется неизменной. Однако, все же лучше, чтобы заданные размеры поля изображения на HTML-странице совпадали с его действительными размерами, так как возможности броузеров по графическому редактированию оставляют желать лучшего
Определить взаимное расположение изображения и текста на HTML-странице позволяет атрибут ALIGN. Для аттрибута ALIGN используется следующая форма записи.
<IMG ALIGN=значение SRC=(URL изображения)>
Некоторые возможные варианты атрибута ALIGN приведены в таблице:
| Значение | Результат |
|---|---|
| TOP | Нижний край текста выравнивается по верхнему краю изображения |
| MIDDLE | Нижний край текста выравнивается по центру изображения |
| BOTTOM | Нижний край текста выравнивается по нижнему краю изображения |
Значение атрибута ALIGN влияет только на текущую строку текста. Текст следующей строки будет находиться под встроенным изображением. Если для атрибута ALIGN значение не указывать, то оно "по умолчанию" примет значение BOTTOM.
Значения LEFT и RIGHT атрибута ALIGN задают тот край документа, вдоль которого размещается изображение, при этом текст охватывает все изображение вдоль его правого края, продолжаясь и под ним.
Атрибут VSPACE служит для определения расстояния до охватывающего текста над и под изображением, а атрибут HSPACE - слева и справа изображения
Для определения способа обтекания текста вокруг изображения используются дескриптор <BR> и атрибут CLEAR. Они позволяют прервать размещение текста рядом с изображением и поместить его под изображением.
Чтобы удалить текст относительно изображения, находящегося слева, и поместить его под изображением, строим дескриптор:
<BR CLEAR=LEFT>
Аналогично, но для текста относительно изображения, находящего справа:
<BR CLEAR=RIGHT>
И, наконец, оба варианта сразу реализуются с помощью дескриптора
<BR CLEAR=ALL>
В качестве указателя ссылки может быть
использован не только текст, но и изображение
Для обозначения изображения как гипертекстовой метки используется тот же таг <А>,
что и для текста, но между <А>и </А> вставляется таг изображения <IMG>:
<А НREF="адрес файла или изображения"><IMG SRC="(URL изображения)"></А>
Еще один полезный атрибут дескриптора IMG - это BORDER. По умолчанию изображение-ссылка заключается в рамку шириной 2 пиксела. Эту рамку можно увелить ли уменьшить, задав ее величину:
<А НREF="адрес файла или изображения"><IMG SRC="(URL изображения)" BORDER=n></А>
Атрибут BORDER можно задавать и для обычных изображений (не являющихся ссылками), хотя этим можно только сбить с толку пользователей.
Примеры взаимного размещения текста и изображения при использовании атрибутов ALIGN, дескриптора <BR CLEAR=ALL>, а также изображения-ссылки приведены в примере 8. Ниже приведен текст этой HTML-страницы:
<HTML> <HEAD> <TITLE>Пример 8</TITLE> <LINK HREF="mystyle.css" REL=stylesheet> </HEAD><BODY> <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <IMG ALIGN=LEFT HEIGHT=280 WIDTH=50 SRC="fon2frm.jpg"> <IMG ALIGN=RIGHT HEIGHT=280 WIDTH=50 SRC="fon2frm.jpg"> <P><IMG ALIGN=LEFT SRC="previous_L.jpg" >Это изображение расположено вдоль левого края документа.</P> <P><IMG ALIGN=RIGHT SRC="previous_R.jpg" >Это изображение расположено вдоль правого края документа.</P> <P><Это изображение <IMG ALIGN=TOP SRC="picture.gif"> включено в текст со значением "TOP"</P> <P><Это изображение <IMG ALIGN=MIDDLE SRC="picture.gif"> включено в текст со значением "MIDDLE"</P> <P><Это изображение <IMG ALIGN=BOTTOM SRC="picture.gif"> включено в текст со значением "BOTTOM"</P> Для данного изображения установлены следующие расстояния до текста:<BR> <IMG ALIGN=LEFT VSPACE=10 HSPACE=20 SRC="escort_.jpg" > Атрибут <TT>VSPACE</TT> (расстояние над и под рисунком) - 10 пикселей.<BR> Атрибут <TT>HSPACE</TT> (расстояние слева и справа от рисунка) - 20 пикселей.<BR> Затем освобождаем все оставшееся справа поле от текста<BR CLEAR=LEFT> Изображение можно сделать ссылкой,то есть осуществлять переход при нажатии левой кнопкой мыши на изображении: <A HREF="lesson3.htm#glava5a-4"> <IMG SRC="next_on.gif" ALIGN=TOP BORDER=0></Agt; для возврата в основной документ. </BODY> </HTML>
Обратим внимание на последнюю часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (в примере 8 происходит возврат на материал текущего занятия).
Заголовок HTML-документа, находящийся между дескрипторами Head и /Head, вообще говоря, не виден пользователю при просмотре. Однако в нем есть некоторые интересные особенности, которые стоит знать.
Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций, задаваемых с помощью дескриптора <META>, и трех его атрибутов: NAME, CONTENT и HTTP-EQUIV. META-инструкция — это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME или атрибут HTTP-EQUIL, но ни в коем случае не оба вместе!!! ) и значения (атрибут CONTENT). При желании можно включить в заголовок несколько дескрипторов <META>, которые никоим образом не повлияют на работу WEB-страницы. При этом необходимо помнить, что <META> - это одиночный дескриптор и не нуждается в закрывающем тэге. Вот некоторые наиболее типичные META-инструкции:
<META NAME="keywords" CONTENT="Интернет, HTML, WWW, руководство, публикация, гипертекст">или
<META HTTP-EQUIV="keywords" CONTENT="Интернет, HTML, WWW, руководство, публикация, гипертекст">
Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей).
<META NAME="description" CONTENT="Это руководство - учебник для тех, кто хочет публиковать документацию любого рода на глобальной компьютерной сети Интернет">
Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.
<META NAME="Author" content="Bill Gates">
Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. Разберем несколько примеров:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251">
Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r">
Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8.
<META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]">
Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=lesson1.htm">
Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ lesson1.htm.
META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере.
Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.
Наконец, если параметр URL вообще не будет указан, то через заданное время будет просто происходить автоматическая перезагрузка данной HTML-страницы.
ПримерВ отличие от всех примеров, которые мы рассматривали ранее, пример 9 состоит не из одного, а из трех файлов. Используя META-инструкцию Refresh, мы создадим небольшой слайд-фильм из трех кадров (файлов e0009.html, e0009a.html и e0009b.html), которые будут циклически повторяться. Для остановки демонстрации нужно будет воспользоваться любой из гипертекстовых ссылок.
<HTML><!--файл e0009.html --> <HEAD> <TITLE>Пример 9</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009a.html"> </HEAD> <BODY bgcolor=#FF0000> <H1>Слайд-демонстрация цветовых гамм <BR> с помощью META-инструкции Refresh </H1> <H2>Текст на красном фоне </H2> <P>[<A HREF="lesson3.htm">Возврат к оглавлению третьего занятия</A>| <A HREF="lesson3.htm#glava6-1">Возврат к данной главе</A>]</P> </BODY> </HTML><!--конец файла e0009.html -->
<HTML><!--файл e0009a.html --> <HEAD> <TITLE>Пример 9a</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009b.html"> </HEAD> <BODY bgcolor=#00FF00> <H1>Слайд-демонстрация цветовых гамм <BR> с помощью META-инструкции Refresh </H1> <H2>Текст на зеленом фоне </H2> <P>[<A HREF="lesson3.htm">Возврат к оглавлению третьего занятия</A>| <A HREF="lesson3.htm#glava6-1">Возврат к данной главе</A>]</P> </BODY> </HTML><!--конец файла e0009a.html -->
<HTML><!--файл e0009b.html --> <HEAD> <TITLE>Пример 9b</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009.html"> </HEAD> <BODY bgcolor=#0000FF> <H1>Слайд-демонстрация цветовых гамм <BR> с помощью META-инструкции Refresh </H1> <H2>Текст на синем фоне </H2> <P>[<A HREF="lesson3.htm">Возврат к оглавлению третьего занятия</A>| <A HREF="lesson3.htm#glava6-1">Возврат к данной главе</A>]</P> </BODY> </HTML><!--конец файла e0009b.html -->
Если Вы просмотрели пример 9 из предыдущего раздела, то, конечно, заметили, что фон каждой из HTML-страний имел различный цвет. Эти и многие другие цветовые эффекты документа управляются специальными атрибутами цветовой гаммы HTML-документа, размещенными внутри тэга <BODY>. Ниже приведен список этих атрибутов в таблице:
| Атрибут | Влияние на цветовую гамму |
|---|---|
| BGCOLOR | Определяет цвет фона документа. |
| BACKGROUND | Определяет фоновый рисунок. |
| TEXT | Определяет цвет текста документа. |
| LINK | Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке. |
| VLINK | Определяет цвет ссылки на документ, который уже был просмотрен ранее. |
| ALINK | Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке. |
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов системы RGB (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Многие из цветов палитры могут быть также заданы по названию, указываемому в кавычках. Некоторые из принятых названий цветов приведены в Приложении 2.
По умолчанию для ALINK устанавливается голубой цвет, для VLINK - фиолетовый, а для ALINK - красный. Рассмотрим теперь несколько примеров.
Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
С помощью атрибута LANG можно определить язык, на котором написан текст. Это помогает поисковым системам и программам проверки орфографии лучше ориентироваться, а для броузера облегчает задачу отображения текста.
Для определения языка документа используется двухсимвольного код стандарта ISO-639, за которым следует через точку необязательный код страны в формате ISO-3166. Некоторые стандартизованные языковые коды приведены в таблице:
| Код | Язык | Код | Язык |
|---|---|---|---|
| "cz" | Чешский | "hi" | Хинди |
| "de" | Немецкий | "hu" | Венгерский |
| "el" | Греческий | "it" | Итальянский |
| "en" | Английский | "ja" | Японский |
| "en-US" | Английский - US | "pt" | Португальский |
| "es" | Испанский | "ru" | Русский |
| "fr" | Французский | "ur" | Урду |
| "gd" | Шотландский | "zh" | Китайский |
| "iw" | Иврит | "ua" | Украинский |
Атрибут LANG может быть установлен в тэге "HTML", в тэге "BODY", а также в любом тэге абзаца или определения шрифта в документе. Напрмер:
<P lang="en-US"> US English txt here ... <P>
Это атрибут может принимать лишь два значения: ltr (слева направо) rtl (справа налево). В тех случаях, когда страница или ее часть написаны, например, на иврите или на арабском языке, то это обязательно нужно указать броузеру. В противном случае он может неправильно отобразить страницу. Этот атрибут обычно помещается там же, где и атрибут LANG. К сожалению, в полном объеме его только Internet Explorer.
Присвоение отдельным элементам в HTML-документе имен делает страницу более мобильной, так как в этом случае на них можно делать ссылки в программах на языках JavaScript и VBScript. Эти имена также можно учитывать при создании листов стилей, которые будут рассматриваться на следующем занятии.
Для присваивания тэгам персональных имен используется атрибут ID, который включается в соответствующий тэг. Например:
<UL>
<LI><A HREF="#Глава 3">Переход на главу 3</A>
. . .
</UL>
. . .
<H2 ID="Глава 3">Глава третья</H2>
На этот вопрос казалось бы есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Действительно, это так. Однако, применение в HTML-документе средств, создающих таблицы, позволяет более тщательно планировать расположение отдельных элементов в поле экрана броузера при отображении этой страницы. Это особенно важно, когда у пользователя могут быть установлены различные режимы разрешения экрана дисплея да и разные размеры самого окна броузера.
Построенные таблицы обладают одним очень важным свойством - по желанию разработчика HTML-страницы они могут быть сделаны невидимыми на экране, но сохранят четкость размещения и взаимное расположение элементов документа, находящихся в их ячейках вне зависимости от размера окна и характеристик дисплея. Именно в этом качестве они и применяются в HTML-документе гораздо чаще, чем по своему прямому назначению - отображению таблиц.
В устройстве таблицы легче всего разобраться на простом примере.
<HTML> <HEAD> <TITLE>Пример 10</TITLE> </HEAD> <BODY> <H1>Простейшая таблица </H1> <TABLE BORDER=1> <!--Это начало таблицы--> <CAPTION> <!--Это заголовок таблицы--> У таблицы может быть заголовок </CAPTION> <TR> <!--Это начало первой строки--> <TD> <!--Это начало первой ячейки--> Первая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Первая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец первой строки--> <TR> <!--Это начало второй строки--> <TD> <!--Это начало первой ячейки--> Вторая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Вторая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец второй строки--> </TABLE> <!--Это конец таблицы--> </BODY> </HTML>
Таблица начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Дескриптор <TABLE> может включать несколько атрибутов:
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Дескриптор <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с тэга <TR> и заканчивается тэгом </TR>. Дескриптор <TR> (Таble Row) может включать следующие атрибуты:
Каждая ячейка таблицы начинается с тэга <TD> и заканчивается тэгом </TD>. Дескриптор <TD> всегда находится внутри дескриптора <TR> и может включать следующие атрибуты:
При задании заголовков для столбцов и строк таблицы используются тэги заголовка <ТН> и </TH> (Таblе Неаder, заголовок таблицы). Эти тэги аналогичны <ТD> и </TD>. Отличие состоит в том, что текст, заключенный между тэгами <ТН> и </TH>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> и </TD> с тэгом <В> и атрибутом <АLIGN=CENTER>, текст тоже будет выглядеть как заголовок. Однако, следует иметь в виду, что не все броузеры поддерживают жирный шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Попробуем теперь построить таблицу с разной высотой и шириной ячеек и посмотрим, что получилось.
Приведем теперь текст программы:
<HTML> <HEAD> <TITLE>Пример 10a</TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER>Таблица с неравной шириной и высотой ячеек</H3> <TABLE BORDER=3> <CAPTION>Характеристики компьютеров </CAPTION> <TR> <TH COLSPAN=2></TH> <TH>Модель/<BR>Частота в<BR>МГц>/TH> </TR> <TR ALIGN=CENTER> <TH ROWSPAN=3>Процессор</TH> <TH>Celeron</TH> <TD>466</TD> </TR> <TR ALIGN=CENTER> <TH>Pentium-II</TH> <TD>450</TD> </TR> <TR ALIGN=CENTER> <TH>Pentium-III</TH> <TD>700</TD> </TR> </TR> <TH COLSPAN=3> </TH> </TR> <TR ALIGN=RIGHT> <TH COLSPAN=2>Общее количество</TH> <TH ALIGN=CENTER>3</TH> </TR> </TABLE> </BODY> </HTML>
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.