Краткий теоретический материал

Тема работы: Добавление изображений к HTML-странице

Практическая работа №11

Дополнительная информация по тел.: 31-83-77

ВХОД СВОБОДНЫЙ!

Июня c 17:00 Фанни-Парке (Фрунзе, 16г, за ТЦ «Русь»).

и на сайте www.afrus.ru/togliatti

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

Для вставки рисунка в HTML-страницу используется тег <img>. Основным параметром этого тега является параметр src, с помощью которого указывается адрес файла, в котором и хранится рисунок. Этот же тег также можно использовать для показа видео-роликов. В этом случае используется параметр dynsrc, с помощью которого указывается адрес видео файла. Самыми распространенными форматами файлов-рисунков являются форматы jpg, gif, png, а видео файлов - avi.

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

Например, для вставки рисунка, который хранится в файле logo.gif по адресу www.picture.com.ua/picture необходимо:

<img src=" www.picture.com.ua/picture/logo.gif">

При использовании относительного формата определения местоположение файла-рисунка происходит с учетом местонахождения данной HTML-страницы.

Например, для вставки в HTML-страницу prim.html рисунка, который хранится в файле logo.gif, что находится в одном каталоге с файлом prim.html необходимо:

<img src="logo.gif">

Графические файлы удобно хранить в отдельном каталоге, например, в каталоге с именем img. В этом случае для вставки в HTML-страницу prim.html рисунка logo.gif необходимо:

<img src="img/logo.gif">

Отметим, что каталог img и файл prim.html должны находиться в одном каталоге. Кроме обязательного параметра src тег <img> имеет несколько необязательных параметров (табл.11.1)

Таблица 11.1

Параметры тега <img>

Параметр	Назначение
alt	Определение альтернативного текста
width	Ширину рисунке в пикселях
height	Высоту рисунку в пикселях
hspace	Отступ от рисунка к другим объектам на HTML-странице по вертикали
vspace	Отступ от рисунке к другим объектам на HTML-странице по горизонтали
border	Толщина рамки вокруг рисунка
lowsrc	Задает файл с альтернативным изображением
align	Выравнивание рисунке относительно других объектов на HTML-странице
src	Адреса графического файла
dynsrc	Адрес видео файла
start	Задает момент начала прокрутки видео ролика. Возможные значения: -fileopen ролик начинается сразу после загрузки видео файла, -mouseover ролик начинается при наведении мыши на изображение.
loop	Задает количество повторов видео - ролика. Если значение равно 1, то проигрывание происходит непрерывно

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

<img src="logo.gif" alt="Альтернативний текст" >

Параметры width и height предназначены для определения размеров рисунка в окне браузера. Отметим, что при изменении размеров изображения размер файла не меняется, то есть время загрузки рисунке не меняется. Приведем пример применения параметров alt, width и height для одного и того рисунка:

<img src="logo.gif" width="184" height ="164" alt="Альтернативний текст" >

<img src="logo.gif" width="92" height =" 82" alt="Альтернативний текст" >

<img src="logo.gif" width="150" height ="40" alt="Альтернативний текст" >

Следует отметить, что изменение размеров рисунка может привести к потере качества изображения, особенно за счет потери пропорций между начальной высотой и шириной. Практический опыт показывает, что даже при соблюдении пропорций увеличения начальных размеров изображений-фотографий более чем на 10-15% приводит к чувственной потери качества. При этом уменьшение размеров изображений сказывается на качестве их отображения гораздо меньше, но их использование не оптимальное с точки зрения времени загрузки.

Параметр border позволяет определить толщину рамки вокруг рисунка. Применим этот параметр со значением 2 для рисунков предыдущего примера:

<img src="logo.gif" width="184" height ="164" border="2">

<img src="logo.gif" width=" 92 " height =" 82" border="2" >

<img src="logo.gif" width=" 150 " height ="40 " border="2">

Параметри hspace та vspace дозволяють в пікселях задавати відступи від рисунку до інших об’єктів на HTML-сторінці. Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього прикладу:

<img src="logo.gif" width="184" height="164" hspace="20" vspace="20" border="2">

<img src="logo.gif" width=" 92 " height =" 82" hspace="20" vspace="20" border="2" >

<img src="logo.gif" width=" 150 " height ="40 " hspace="20" vspace="20" border="2">

Параметр lowsrc позволяет определить файл с альтернативным изображением, которое появляется в окне браузера до появления основного изображения. Альтернативное изображение, как правило, это рисунок того же содержания, что и основной, но менее качественный. По этой причине файл альтернативного изображения меньше размером, а потому загружается намного быстрее чем основной. Это позволяет быстро показать общие черты изображения. Пример использования:

<img src="logo.gif" width="184" height="164" lowsrc ="small.gif">

Параметр align используется для определения горизонтального или вертикального выравнивания рисунке относительно других объектов на HTML-странице. Параметры выравнивания зависят от значений параметра align. При использовании этого параметра со значениями left или right рисунок размещается в соответствии с левой или правой стороны окна браузера, а текст "обтекает" изображение с противоположной стороны. Отметим, что в этом случае текст может занимать несколько строк. Пример использования параметра align:

<body>

<img src="logo.gif" width="182" height="162" border="1" align="right">

Пример использования параметра align="right". Рисунок размещен

возле правой стороны окна браузера. Текст обтекает изображении с левой стороны.

</body>

Кроме left и right параметр aling может принимать следующие значения:

- Top верхний предел изображения выравнивается по наиболее высокому элемента строки;

- Texttop верхний предел изображения выравнивается по наиболее высокому текстовом элемента строки;

- Middle середина изображения выравнивается по базовой линии строки;

- Absmiddle середина изображения выравнивается по центру;

- Bottom нижняя граница изображения выравнивается по базовой линии строки;

- Absbottom нижняя граница изображения выравнивается по нижней границе строки.

В этих случаях изображение можно рассматривать как обычный элемент строки.

Отметим, что базовая линия текста - это нижняя линия строки текста без учета нижней части некоторых символов (р, j, y).

Приведем пример использования параметра align тега < img > с значениями top, middle и bottom:

<body>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="top">

Пример использования параметра align="top". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="middle">

Пример использования параметра align="middle". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="bottom"> Пример использования параметра align="bottom".

</body>

Ход работы:

1. Для выполнения работы подберите два графических файла и сохраните их под именами 1.jpg та 1a.gif.

2. Создайте текстовый документ с названием picture.html, откройте его с помощью браузера и перейдите к редактированию HTML-кода.

3. Создайте заготовку для HTML-кода Web-страницы:

<html>

<head>

<title>Рисунки</title>

<META http-equiv=Content-Type content="text/html;

charset=windows-1251">

</head>

<body>

</body>

</html>

4. Добавьте HTML-код для отображения на странице четырех одинаковых рисунков с различными размерами:

<body>

<h2 align=center>Замена размеров рисунков</h2>

<img src="1.jpg">

<img src="1.jpg" width="260" height="220">

<img src="1.jpg" width="130" height="110">

<img src="1.jpg" width="300" height="250">

</body>

</html>

5. Просмотр страницы в браузере должен отвечать рис.11.1.

Рис. 11.1. Рисунки с разными размерами

6. Рассмотрите возможность использования границ вокруг рисунков. Для этого добавьте следующий HTML-код:

...

<h2 align=center>Границы рисунков</h2>

<img src="1.jpg" width="130" height="110" >

<img src="1.jpg" width="130" height="110" border="1">

<img src="1.jpg" width="130" height="110" border="3">

Просмотр страницы в браузере должен отвечать рис.11.2.

Рис.11.2. Использование границ рисунков

7. Рассмотрите возможность определения альтернативного текста в тегах рисунков. Для этого модифицируйте последний фрагмент HTML-кода:

...

<img src="1.jpg" width="130" height="110" alt="Рисунок. Границ нет">

<img src="1.jpg" width="130" height="110" border="1" alt="Рисунок. Толщина границ 1 піксель">

<img src="1.jpg" width="130" height="110" border="3" alt="Рисунок. Толщина границ 3 пікселі">

8. Отключите отображение рисунков в окне браузера и обновите страницу (рис. 11.3).

Рис. 11.3. Отображение альтернативного текста

9. Восстановите отображения рисунков в браузере и проведите обновление HTML-страницы.

10. Рассмотрите возможности вертикального выравнивания рисунков относительно текста.

11. Добавьте HTML-код для определения текста и рисунков, выровненных относительно верхней границы:

...

<h2 align=center>Выравнивание рисунков относительно тексту </h2>

<h3 align=center> Выравнивание рисунков относительно верхней границы строки </h3>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="top">

По верхней границе наивысшего элемента строки

</p>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="texttop">

По верхней границе наивысшего текстового элемента строки

</p>

</body>

Соответствующее окно браузера показано на рис.11.4.

Рис. 11.4. Выравнивание рисунков относительно верхней границы

- Добавьте HTML-код для определения текста и рисунков, выровненных относительно середины строки:

...

<h3> Выравнивание рисунков относительно середины строки </h3>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="middle">

По базовой линии строки

</p>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вес" align="absmiddle">

По середине строки

</p>

</body>

Соответствующее окно браузера показано на рис. 11.5.

Рис. 11.5. Выравнивание рисунков относительно середины строки

- Добавьте HTML-код для определения текста и рисунков, выровненных относительно нижней границы:

...

<h3 align=center> Выравнивание рисунков относительно нижнего края строки </h3>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="bottom">

Выравнивание рисунков по базовой линии строки

</p>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага">

<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="absbottom">

Выравнивание рисунков по нижней границе строки

</p>

</body>

Соответствующее окно браузера показано на рис. 11.6.

Рис. 11.6. Выравнивание рисунков относительно нижней границы строки

12. Рассмотрите возможность определения "плавающих" рисунков, т.е. рисунков, выровненных по левому или правому краю строки. Для этого добавьте HTML-код:

...

<h3 align=center>"Плавающие" рисунки</h3>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="left">

По левому краю строки

</p>

<br><br><br><br><br>

<p>

<img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="right">

По правому краю строки

</p>

</body>

Соответствующее окно браузера показано на рис. 11.7.

Рис. 11.7. "Плавающие" рисунки

13. Рассмотрите возможности отделения текста от рисунков за счет определения горизонтальных и вертикальных отступов. Для этого добавьте HTML-код:

...

<h2 align="center">Отделение рисунков от текста</h2>

<img src="1.jpg" width="130" height="110" border="3" hspace="20" vspace="20" align="top" alt="Вага">

Расстояние до текста 20 пикселей

<br>

<img src="1.jpg" width="130" height="110" border="3" hspace="1" vspace="1" align="top" alt="Вага">

Расстояние до текста 1 пиксель

</body>

Соответствующее окно браузера показано на рис. 11.8.

Рис. 11.8. Отделение текста от рисунков за счет отступов

14. Добавьте HTML-код для определения альтернативного изображения:

...

<h2>Использование миниатюр</h2>

<img src="1.jpg" lowsrc="1a.gif" width="130" height="110" border="3" alt="Вага" >

</body>

Задания для самостоятельной работы

1. Оформить в виде HTML-документа фотокнигу по тематике, по варианту.

2. Оформить отчет.

3. Темы фотокниг

· В мире животных

· Путешествие городом

· Очевидное невероятное

· Чудеса света

· Мебель

· Автомобили

· Мимика и настроение

· С высоты Птичьего полета

· Правила дорожного движения

· Наслаждение вкусом
Вопросы для самопроверки
1. Как определить размер вертикального отступления от текста до границы рисунке?
2. Как определить размер горизонтального отступа от текста до границы рисунке?
3. В чем заключается специфика плавающего выравнивания рисунков?
4. Зачем нужно записывать альтернативный текст при определении рисунков?
5. Зачем нужны миниатюры при определении рисунков?
6. Как выровнять рисунок по верхнему краю строки?
7. В чем разница между выравниванием рисунке bottom и absbottom?
8. В чем заключается разница между выравниванием рисунке absmiddle и middle?
9. В чем заключается разница между выравниванием рисунке texttop и top?
10. Как определить толщину границы рисунка?

Дата добавления: 2015-06-30