mutivseti.ru - правильный сайт о заработке в интернете!

Работа с изображениями в html-документах

Подробности

Опубликовано 30.09.2012 15:53

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

С помощью обязательного атрибута src браузер обращается к месту, где картинка расположена, расширение изображения обязательно должно быть указано! Атрибут alt нужен на тот случай, если браузер пользователя не загружает изображения по какой-либо причине. Если изображение не будет загружаться, тогда вместо него на экране монитора появится надпись, указанная в атрибуте alt. Посмотрим ниже результат записи .

Бывают случаи, когда размер изображения на веб-странице необходимо изменить (для красоты например). Для этого существуют атрибуты width - ширина и hight - высота. Задаются в пикселях или процентах от ширины экрана. Зададим их нашему рисунку (в пикселях). Получим запись следующего вида: . Выглядеть после этого наша картинка будет следующим образом:

В данном случае изображение на веб-странице было уменьшено относительно оригинала, его можно также и увеличить, только в случае увеличения качество изображения уменьшится!

Также изображение можно поместить в рамку с помощью атрибута border. Ширина рамки обозначается в пикселях, например border=2.

 

По отношению к тексту html-документа можно также выровнять рисунок. Делается это с помощью атрибута align. Этот атрибут имеет несколько значений.

• align="texttop". Значение атрибута align="texttop" обозначает, что верхняя часть изображения будет выравнена по верхнему краю текста текущей строки. Возьмём, например такой тест с изображением:
  
  На данном рисунке>изображена планета Земля с астероидами вокруг неё.
  
  Результат смотри ниже.
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="top". align="top" обозначает, что изображение будет выравнено по самому высокому текстовому элементу текущей строки .Рассмотрим тот же пример, только вместо align="texttop" напишем align="top":
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="middle". Середина изображения выравнивается по базовой линии текущей строки.
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="absmiddle". Середина изображения выравнивается по середине базовой линии текущей строки. На глаз разница не заметна, если сравнивать с предыдущим случаем.
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="baseline". Изображение выравнивается по базовой линии строки.
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="bottom". Здесь выравнивание нижней границы изображения осуществляется по низу окружающего текста. Ниже это можно увидеть.
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
   
• align="left". Текст находится справа от изображения, другими словами говоря, выравнивание изображения происходит по левому краю. Только в этом случае необходимо расписывать теги в таком порядке:
  
  >На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
  То есть, сначала нужно указать рисунок и его параметры и только после этого напечатать текст. Вот и пример данной записи:
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
  
  
  
  
   
• align="right". В этом случае выравнивается изображение по правому краю, вот как это будет выглядеть (в тегах всё прописывается, как и в случае align="left" только вместо left пишется right):
  
  На данном рисунке изображена планета Земля с астероидами вокруг неё.
  
  
  
  
  
  
   

Как видно, из параметров атрибута align тест можно располагать с разных сторон от изображения (или изображение от текста). Но текст располагается очень близко к изображению. Иногда это не очень красиво смотрится. Чтобы "отодвинуть" текст от рисунка на n-ное расстояния в html используются атрибуты hspace (отступы по горизонтали, то есть справа и слева) и vspace (отступы по вертиками, снизу и сверху от изображения). Напишем такую строчку:

>На данном рисунке изображена планета Земля с астероидами вокруг неё.

Значение параметра hspace="10" указывается в пикселях. Получается следующее, а именно текст расположился на расстоянии 10 пикселей от изображения:

На данном рисунке изображена планета Земля с астероидами вокруг неё.






 

Любое изображение также можно сделать ссылкой. Делается это следующим образом:



Результатом данной записи будет кликабельная картинка space.JPG размером 150х150 пикселей, нажав на которую пользователь перейдёт в новой вкладке к изображению examples/html/space.JPG в полном размере. Вот, кстати, и она:

 

| следующая>>

 

---