Изображения

6. Изображение

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

Благодаря изображениям наша страница становится красочной и привлекательной. Изображений на сайте очень много. Но не все изображения оптимальны для сайта. Некоторые необходимо оптимизировать, чтобы они загружались максимально быстро. Но об этом мы поговорим в следующих статьях. Изображение вставляется с помощью тега <img>. Но также при вставке изображения необходимо указывать его параметры (ширину и высоту) и адрес где лежит изображение.

Сначала посмотрим, как это выглядит в коде:
<img src="fruits.jpg" alt="Фрукты" width="246" height="205">

Как картинка выглядит в браузере:

Сейчас давайте разберемся с атрибутами по порядку:

src="fruits.jpg" — указывает где находится изображение. Обязательно необходимо указывать с расширением изображения! У нас расширение это ".jpg". В данном случае оно находится в одной папке с html страницей. Если бы это изображение было в папке images, то в данном атрибуте необходимо было написать src="images/fruit.jpg".
width="246" — указывает ширину изображения в пикселях.
height="205" — указывает высоту изображения в пикселях.
alt="Фрукты" — это альтернативный текст, для изображения. Он очень важен при индексировании вашего сайта роботом. !!! Обязательно прописывайте его для каждого изображения, не ленитесь!
У тега <img> есть такой атрибут align. Он может принимать значения:

Bottom – выравнивание по нижнему краю
Left – выравнивание по левому краю
Middle – выравнивание по центру
Right – выравнивание по правому краю
Top – выравнивание по верхнему краю

Мы рассмотрели, как вставляются изображения. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить, где и как их применить.

Практическое задание 1

Пример вставки изображений.
Для выполнения данного примера требуется предварительная подготовка. Поместите файлы logo.gif и 100x100_4.gif в папку, где вы сохраняете html-файлы.
<html>
<body>


Изображение:
<img src="logo.gif" width="285" height="52">



Динамическое изображение:
<img src="100x100_4.gif" width="100" height="100">



Обратите внимание, что синтаксис вставки динамического изображения
не отличается от синтаксиса для обычного изображения.


</body>
</html>
Сохраните файл под именем 25imgsrc.html

Практическое задание 2

Вставка изображений из различных мест
Для выполнения данного примера требуется предварительная подготовка. Создайте папку images, если вы ее не создали ранее .Поместите файлы logo.gif и 100x100_4.gif в папку images.
<html>
<body>


Изображение из другой папки:
<img src="/images/logo.gif"
width="285" height="52">



Изображение с сайта ИНТУИТ:
<img src="/images/100x100_4.gif" width="100" height="100">


</body>
</html>
Сохраните файл под именем 26imgsrc.html

Практическое задание 3

Размещение изображений
<img src="url">
<html>
<body>

Первый параграф
<img src="/images/logo.gif" >
Второй параграф

</body>
</html>
Сохраните файл под именем 27imgsrc.html
<html>
<body>

В этом примере изображение
<img src="/images/logo.gif" >
размещено прямо внутри параграфа

</body>
</html>
Сохраните файл под именем 28imgsrc.html

Практическое задание 4

Выравнивание изображений
<html>
<body>

Изображение выравнено по верху
<img src="/images/logo.gif" align="top">
при помощи align="top"

Значение "middle" атрибута align
<img src="/images/logo.gif" align="middle">
центрирует изображение по вертикали

Выравнивание изображения по нижнему краю
<img src="/images/logo.gif" align="bottom">
(align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).

В этом примере изображение
<img src="/images/logo.gif" align="left">
смещено влево и, начиная со следующей строчки, текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.


<img src="/images/logo.gif" align="right">
Изображение прижато к правому краю рабочей области (align="right").
Текст занимает все свободное пространство слева от изображения обтекая его.

</body>
</html>
Сохраните файл под именем 29align.html

Практическое задание 5

<html>
<body>

 <img src="/images/logo.gif" align="left">
В данном варианте используются установленные по умолчанию значения hspace и vspace.
Изображение выровнено по левому краю при помощи align="left".

<img src="/images/logo.gif" align="left" hspace="20" vspace="20">
В данном варианте значения hspace и vspace установлены равными 20.
Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще.
В данном случае изображение сместилось вправо вниз.


Примечание: Для лучшего понимания работы атрибутов hspace и vspace
в данном примере уменьшите размер окна Вашего браузера.


</body>
</html>
Сохраните файл под именем 30hvspace.html

Практическое задание 6

Обрамление изображения
<html>
<body>

<img src="/images/logo.gif" align="left">
Изображение без рамки (по умолчанию для простых графических изображений).

<img src="/images/logo.gif" align="left" border="5">
В данном варианте толщина рамки установлена в 5 пикселей.


</body>
</html>
Сохраните файл под именем 31border.html

Практическое задание 7

<html>
<body>

<a href="http://www.tct.ru"><img src="/images/logo.gif" align="left"></a>
Несмотря на то, что значение border не задано, изображение-гиперссылка выводится обрамленным рамкой шириной 2 пикселя (значение по умолчанию)

<a href="http://www.tct.ru"><img src="/images/logo.gif" align="left" border="0"></a>
В данном варианте рамка вокруг гиперссылки убрана благодаря принудительному присвоению параметру border нулевой толщины.


</body>
</html>
Сохраните файл под именем 32border.html

Практическое задание 8

Изменение размера изображения
Для выполнения данного примера требуется предварительная подготовка. Поместите файл photo.png в папку images
<html>
<body>

В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей).
 
<img src="/images/photo.png">
 
Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций.
 
<img src="/images/photo.png" height="100">
 
В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали.
 
<img src="/images/photo.png" height="100" width="253">

</body>
</html>
Сохраните файл под именем 33heightwidth.html

Практическое задание 9

<html>
<body>

Ширина изображения в данном примере задана равной 100%. Изменяя размер окна браузера можно заметить, как изображение автоматически масштабируется, занимая всю ширину окна.
 
<img src="/images/photo.png" width="100%">
 

</body>
</html>
Сохраните файл под именем 34_100.html

Практическое задание 10

Для выполнения данного задания требуется предварительная подготовка. Поместите файл photo_big.png и файл photo_small.png в папку images
<html>
<body>

В первом варианте в качестве изображения-иконки используется большое изображение,
Размер, которого изменен при помощи атрибутов width и height. При нажатии на него исходная фотография будет отображена в полный размер.
 
<a href="/images/photo_big.png"><img src="photo_big.png" width="80" height="60" border="0"></a>
 
Во втором варианте в качестве изображения-иконки используется специально подготовленное малое изображение, значения атрибутов width и height заданы для обеспечения правильного
форматирования Web-страницы на этапе частичной загрузки.
 
<a href="/images/photo_big.png"><img src="photo_small.png" width="80" height="60" border="0"></a>
 
Несмотря на то, что оба этих варианта с внешней точки зрения практически идентичны,
во втором варианте объем загружаемой информации значительно ниже. Так объем большого изображения "photo_big.png" составляет более 1 Мб, в то время как "photo_small.png" - только 14 Кб.
 
Очевидно, что при малой скорости подключения в Интернет пользователь может просто не дождаться конца загрузки страницы.

</body>
</html>
Сохраните файл под именем 35width.height.html

Практическое задание 11

Атрибут Alt
Следующий пример демонстрирует синтаксис применения атрибута alt.
<html>
<body>

<img src="/images/logo.gif" width="285" height="52" alt="Логотип">
 
Для демонстрации работы атрибута alt необходимо в свойствах обозревателя запретить использование графики на странице.
 
Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку.

</body>
</html>
Сохраните файл под именем 36alt.html

Назад Главная Далее