Добавление изображений на веб-страницу
На веб-странице можно размещать фотографии, простые и анимированные рисунки. В интернете используют в основном два формата для вывода на экран графической информации: JPG и GIF. Формат JPG применяют для вставки фотографий в веб-страницу. При малом объеме файла сохраняется качество фотоснимка с минимальными потерями. Формат GIF – для рисунков, поддерживает анимацию и прозрачность.
Вставить изображение в текст веб-страницы можно с помощью тега <IMG>, в котором атрибуту SRC присваивается URL-адрес картинки (аналогично HREF в якорях). <IMG> – одиночный, у него нет закрывающего тега.
Изображения лучше хранить в отдельной папке, чтобы отличать графическую информацию от текстовой.
Пример: <IMG SRC=“images/photo.jpg”>
|
|
Атрибуты тега <IMG> |
|
|
|
|
|
атрибут |
значение |
описание |
|
|
|
|
|
SRC |
photo.jpg |
задает URL картинки |
|
|
|
|
|
ALT |
фото |
Всплывающая подсказка, появляющийся при |
|
наезде мышкой. Текст виден, когда отключен |
|||
|
|
показ рисунков в броузере. |
|
|
|
|
|
ALIGN |
Left, right, |
Выравнивание |
|
|
center |
|
|
WIDTH |
100, 50% |
Ширина изображения. Без её указания картинка |
|
выводится в натуральную величину. |
|||
|
|
||
|
|
|
|
HEIGHT |
100, 50% |
Высота изображения. Без её указания картинка |
|
выводится в натуральную величину. |
|||
|
|
||
|
|
|
|
BORDER |
5 |
Рамка вокруг рисунка |
|
|
|
|
|
HSPACE |
0 |
Свободное пространство слева и справа от изо- |
|
бражения |
|||
|
|
||
|
|
|
|
VSPACE |
10 |
Свободное пространство сверху и снизу от изо- |
|
бражения |
|||
|
|
||
|
|
|
Рисунки можно использовать в роли кнопок. Для этого тег изображения нужно поместить внутри контейнера – ссылки.
Пример.
<A HREF=“photo.html“><IMG SRC=“images/button.gif”></A>
Рисунок может быть фоном веб-страницы. Для этого к тегу <BODY> до-
бавляется атрибут BACKGROUD=”images/fon.jpg”.
Пример.
<BODY BACKGROUD=”images/fon.jpg”>
Практическое задание 3.
Для дальнейшей работы нужно:
•создать папку “images” на одном уровне с веб-страницами нашего сайта
•взять из интернета 3-4 рисунка или фотографии
•поместить всё найденное в папку “images”
•
Добавим на нашу первую страницу фотографию или рисунок. Можно также подобрать картинку для фонового изображения.
Теперь первая страница выглядит следующим образом:
Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела!
ВАСЯ
ВАСЯ
ВАСЯ
©
портфолио резюме |
фото юмор |
Пишите мне: vasya@mail.ru
Теперь займемся страницей photo.html.
Вставляем рисунки на страницу, задаем им размер 50Х50. У нас получились так называемые иконки – миниатюры больших изображений. Иконки обычно располагаются в самом верху страницы в одной строке.
Следующий шаг – добавление на страницу оригиналов один под другим. Можно добавить описание фотографии под ней.
Теперь каждую из иконок мы превращаем в ссылку на большой вариант этого же изображения, расположенный на той же веб-странице ниже (см. пример создания ссылки внутри одного html-документа в предыдущей главе).