Студопедия.Орг Главная | Случайная страница | Контакты | Мы поможем в написании вашей работы!  
 

Методические указания. Для размещения изображения в документе надо помнить, что в HTML используется только два графических формата



Для размещения изображения в документе надо помнить, что в HTML используется только два графических формата. Первый формат – это формат обмена графикой Compuserve GIF (Graphics Interchange Format), включая прозрачные и анимированные; второй – JPEG (в том числе progressive jpeg).

Для того чтобы поместить изображение внутри текста, воспользуемся тэгом <IMG>. Элемент <IMG> не имеет конечного тэга. Ниже приведен список некоторых параметров, допустимых для данного тэга:

- SRC – обязательный параметр; указывает адрес (URL) файла с изображением.

- HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

- HSPACE и VSPACE – определяют отступ картинки (в пикселях) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

- ALIGN – обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

- left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

- right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

- top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

- middle – выравнивает базовую линию текущей текстовой строки с центром изображения.

- absmiddle – выравнивает центр текущей текстовой строки с центром изображения.

- bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

- absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

- NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

- ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

- BORDER – определяет ширину рамки вокруг изображения в пикселях. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

- LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

Параметры USEMAP и ISMAP тега <IMG> будут рассмотрены в практической работе №4 “Активные изображения (навигационные карты)”.

Пример использования тэга <IMG>:

<IMG SRC="img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left" BORDER=2> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселей.

Приведенный пример демонстрирует включение в текст графического изображения, которое находится в файле picture.ipg текущего каталога, ширина изображения 45 пикселей, высота – 53 пикселя, а также изобразить вокруг изображения рамку шириной 2 пикселя.

В документе HTML можно разместить фоновый рисунок, который будет виден под основным текстом. Как правило, фоновые изображения малы по размеру, но их копии как обои заполняют все окно просмотра. Для того чтобы разместить фоновое изображение необходимо воспользоваться параметром BACKGROUND тега <BODY> и некоторых других. Этот параметр указывает на URL – адрес изображения, которое используется в качестве фонового.

Пример использования параметра BACKGROUND:

<BODY BACKGROUND="img.gif">.

Основная мощь языка HTML заключается в возможности связи отдельных частей текста и иллюстраций с другими документами. За это отвечает основный тег HTML-документа – гипертекстовая ссылка. Согласно схеме HTTP нотации URI, полный адрес информационного ресурса, доступного по протоколу HTTP, надлежит записывать следующим образом:

http:user:[email protected]:port/path/some.html?query,

где http – протокол обмена данными,

user – идентификатор пользователя,

password – пароль,

domain.ru – доменное имя сервера,

port – номер TCP-порта, на котором ведет обслуживание сервер,

path – путь в корневом каталоге сервера к файлу ресурса,

some.html – файл ресурса,

query – поисковое предписание.

Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса, а гипертекстовая ссылка, в которой задан такой адрес, абсолютной.

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

Ссылка создается с помощью тэга <A>, который используется в паре с тэгом </A>. Между ними располагается либо текст ссылки, либо рисунок (с помощью тега <IMG>), которые отображается в окне просмотра браузера.

Пример ссылки на другой документ:

<A HREF=”http://www.glasnet.ru/~frolov/index.html”> Домашняя страница</A>

Использование рисунка в качестве гипертекстовой ссылки:

<A HREF="carlson.html">

<IMG SRC="img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">

</A> Для просмотра досье нажмите на кнопку справа.

Если имя домена и/или полный путь к документу в адресе URL опущены, то гипертекстовая ссылка называется частично определенной или относительной, например:

<A HREF=”../frolov/index.html”> Домашняя страница</A>

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

Пусть необходимо создать документ с именем book.htm, который состоит из нескольких глав. В начале документа желательно разместить оглавление, содержащее ссылки на отдельные главы.

Прежде всего определим в начале каждой главы локальные метки. Для этого необходимо использовать тэг <A> с параметром NAME, например:

<H2><A NAME=”Chap1”>Первая глава</A></H2>

.....

Содержание главы

.....

<H2><A NAME=”Chap2”>Вторая глава</A></H2>

.....

Содержание главы

.....

Ссылки на созданные таким образом локальные метки выполняются с помощью тэга <A>, имеющего параметр HREF:

<A HREF=”book.htm#Chap1”>Первая глава</A>

<A HREF=”book.htm#Chap2”>Вторая глава</A>

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

Контрольные вопросы

1. Что такое гипертекстовая ссылка?

2. Понятие полного адреса информационного ресурса.

3. Относительные и абсолютные гипертекстовые ссылки. Локальные и глобальные гипертекстовые ссылки. Приведите примеры.

4. Форматы графических файлов, их характеристики, достоинства и недостатки.

5. Теги вставки рисунка и использования рисунка в качестве фона web-страницы.





Дата публикования: 2015-10-09; Прочитано: 297 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!



studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.009 с)...