Включение изображений в html-документы

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

Использование файлов нужных типов.

Изображения можно сохранять в нескольких форматах. WWW поддерживает два основных формата изображений - GIF и JPEG. Файлы в формате JPEG занимают меньше места и, соответственно быстрее загружаются. JPEG использует специальную технику компрессии изображений, что определяет его преимущество для рисунков и фотографий. Кроме того, JPEG сохраняет цвета и детали лучше, чем GIF.

Недавно приобрел популярность новый тип изображений. Формат PNG (произносится как «пинг»). Графика в формате PNG похожа на формат GIF, но более эффективна и лучше передает большое количество цветов.

Как поместить изображение на домашнюю страницу.

Изображения вставляются при помощи тега <IMG> и ключевого слова SRC= для указания, какую графику загрузить.

Если нужное изображение (например, Hr-polac.gif ) находится в той же директории, что и ваш HTML-файл, нет необходимости указывать на диски и директории. Ваш тег будет выглядеть так:

<IMG SRC= Hr-polac.gif>.

Если изображение находится в поддиректории с именем Images, ваш тег будет таким:

<IMG SRC= Images/Hr-polac.gif>.

Если изображение находится в директории уровнем выше, чем та, в которой содержится HTML-файл, используйте такой тег:

<IMG SRC= ../Hr-polac.gif>.

Если изображение находится на другом диске, например на диске D, используйте следующий тег:

<IMG SRC FILE: ///D:\Hr-polac.gif>.

Оптимальный размер файлов с изображениями.

Полезно следить за общим размером файлов Web-страницы. Сложите размеры вашего HTML-файла и каждого использованного изображения. Общий размер не должен превышать 150 Кбайт, но лучше, если он окажется в диапазоне 30-70 Кбайт.

Уменьшение размера и минитюризация изображений.

1. Существует ряд профессиональных пакетов, таких как Adobe Photoshop, позволяющих изменить размеры изображений. Но иногда после уменьшения размера ваше изображение становится труднее рассматривать.

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

Где можно найти графику, изображения и рисунки.

1. Найти CD-ROM с графикой. Скопировать с компакт-диска нужную графику в поддиректорию вашего компьютера, содержащую HTML-файлы, с помощью Проводника Windows.

2. Воспользуйтесь другими страницами. Но! Соблюдайте осторожность при заимствовании изображений из других узлов. Помните об авторском праве. Чтобы заимствовать изображения с помощью Internet Explorer, нужно выполнить следующие действия: 1). Щелкните правой кнопкой мыши на изображении вверху экрана. Появится всплывающее меню Internet Explorer. 2). Выберите команду Сохранить рисунок как… Появится диалоговое окно Сохранить как… 3). Internet Explorer автоматически предлагает имя. Определите, где на жестком диске вы хотите сохранить изображение, и выберите команду Сохранить.

3. Создайте собственное изображение. Существует множество полезных программных средств и графических пакетов, позволяющих создавать, изменять изображения для Web-страниц и управлять ими. Например, программа Paint Shop Pro.

4. Если вы хотите отобразить на Web-странице личные фотографии и рисунки, иногда единственным средством является цифровой сканер. Для непрофессионального использования обычно используются сканеры с разрешением 300х300 или 600х600 точек на дюйм. Отсканированное изображение сохраните с расширением GIF. или JPEG.

Таблица 12.

ТЕГ

АТРИБУТЫ

IMG – Вставка изображения.

Align=тип left – выравнивает изображение по левому краю страницы, троки текста выводятся справа от изображения; right – выравнивает изображение по правому краю страницы, строки текста выводятся слева от изображения; top – выравнивает изображение по самому высокому элементу в строке; middle – выравнивает нижнюю границу строки посередине изображения; absmiddle – выравнивает середину строки посередине изображения (применяется для мелких изображений); bottom – выравнивает нижнюю границу строки по нижней границе изображения. Alt=текст Задается альтернативный текст. Border=n Установка толщины (в пикселях) обрамления изображений, содержащихся в гиперссылках. Controls Добавление функций управления воспроизведения встроенных видеоклипов. Dynsrc=url Задается URL-адрес видеоклипа, подлежащего изображению. Height=n Задается высота изображения в пикселях. Hspace=n Задается размещение слева и справа от изображения областей свободного пространства шириной по n пикселей. Ismap Указывается, что при использовании данного тега внутри тега <A> изображение выбирается с помощью мыши. Loop=значение Установка числа повторов воспроизведения видео. Значение может быть целым или значением infinite. Lowsrc=url Указывается изображением с низким разрешением, которое браузер должен загрузить первым. За ним следует изображением, заданное атрибутом <src>. Src=url Указывает исходных URL изображения, подлежащего воспроизведению. Этот атрибут является необходимым. Start=начало Указывается, когда следует воспроизвести видеоклип (варианты: fileopen или mouseover). Usemap=url Указывается чувствительная к перемещению мыши область изображения. Vspace=n Задается размещение над и под изображением областей свободного пространства по n пикселей. Width=n Указывается ширина изображения в пикселях.

Задание 14.

Вставьте в HTML-документ изображение (например, Hr-polac.gif). Предварительно скопируйте в свою личную папку файл с изображением. Это можно сделать при помощи программы Проводник. Сохраните документ под именем изображение.html в свою личную папку.

<HTML>

<HEAD>

<TITLE>Вставка изображения</TITLE>

</HEAD>

<BODY>

<H1> <B> ВСТАВКА ИЗОБРАЖЕНИЯ </B></H1>

<IMG alt=”Это герб” SRC=”Hr-polac.gif” align=middle hspace=30>

<FONT color=blue>Я справился с этим заданием! </FONT>

<HR size=10 color=blue>

</BODY>

</HTML>

Рис. Иллюстрация задания 14.

ПИКТОГРАММЫ

Кроме цветных изображений и рисунков на домашней странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию «изображения» (они обычно хранятся в форматах GIF или JPEG), но очень малы (2-6Кбайт) и применяются на домашних страницах из соображения дизайна, эстетики, а также для «перелистывания» страниц.

Линии и полосы.

Для того, чтобы разделить Web-страницу на части линиями мы использовали тег <HR>. Очень часто вместо этого тега используют линейную графику (простую графику в виде линий и полос). Элементы линейной графики бывают различных форм, цветов и рисунков.

Маркеры.

Маркеры обычно применяются для замены точек, которые отмечают пункты маркированного списка. Для этого необходимо набрать каждый пункт, а затем - тег <BR>. Вот пример HTML-кода для помещения на домашней странице графических маркеров:

<BR> <IMG SRC=”redbull.gif” align=center>

При выводе маркеров обязательно используйте ключевое слово align, чтобы текст и изображение были должным образом выровнены. При использовании маркеров выводить альтернативный текст не нужно.

Пиктограммы новинок.

Для отметки новинок на домашней странице применяются пиктограммы новинок. Это помогает посетителям быстро найти свежие изменения, которые произошли со времени их последнего посещения.

Не оставляйте на домашней странице пиктограмму новинок на долгое время. Обычно новинка отмечается пиктограммой в течение не более месяца. После этого берите пиктограмму.

Пиктограммы перемещения.

Эти пиктограммы полезны, когда у вас большой Web-узел, состоящий из многих страниц с перекрестными ссылками друг на друга.

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

Задание 15. Итоговое.

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