Как разместить картинки на сайте. Работа с размещением изображений на html сайте пошаговые уроки с примерами.

---

  Сегодня мы будем работать над размещением изображения на html странице.

  img - изображение
  src - местонахождение изображения
  <img src=" "> - код для размещения картинки на сайте




В данное время нет наверное сайта на котором мы не увидели бы изображение. Это могут быть логотипы, ссылки, баннеры, картинки, фотографии и много ещё разного, короче говоря, современные сайты не могут обойтись без изображений. Я уверен что и нам рано или поздно придётся столкнутся с размещением изображения на странице своего сайта. Давайте посмотрим, как разместить картинку на сайте и как это делается на простом примере. Здесь мы указываем, что изображение находится в папке image/, а так же название и формат logo.jpg. На наших примерах формат картинки jpg, у вас она может быть и другой, например gif, jpg, jpeg, png. А если изображение находится в той же папке что и страница, то нужно указать без папки вот так <img src="logo.jpg">. Но у нас изображение находится в папке image то и пример ниже мы приводим с указанием названия папки.


<img src="image/logo.jpg">
 

Как видите выше в примере, ничего такого сложного в размещении изображения на сайте нет. Вот что у нас получилось мы видим ниже, изображение на странице расположилось по умолчанию во весь размер.







Вот пример с указанием полного пути к картинке вместе с названием сайта. Так можно указывать даже если рисунок находится на другом сайте. Как видите итог вывода изображения на странице такой же, как и в первом примере.


<img src="http://www.sozdat-svoysayt.ru/image/logo.jpg">
 







Если мы хотим задать изображению определенный размер на странице, то задаём ему размеры ширину width и высоту height. Смотрим ниже пример. В первом случае мы задали малый а во втором большой размер, в итоге изображение сжалось и растянулось.


<img src="image/logo.jpg" height="50" width="100"> &nbsp; <img src="image/logo.jpg" height="200" width="300">


Вы наверное думаете что это &nbsp; такое? это типа пробела чтоб оба изображения не склеились между собой, его так же можно использовать в тексте.


 







--- ---

Вот ещё один вариант размещения изображения и текста на html сайте, здесь текст обходит картину, а сама картинка расположена справа. Для того чтоб поместить изображение в разных местах страницы мы используем элемент align с дополнительными атрибутами left - слева, right - справа, top - прижать к низу, bottom - прижать к верху. Вот пример как это делается. Для того чтоб текст не прилипал к картине мы используем такие атрибуты hspace - отступ по горизонтали и vspace - отступ по вертикали.


<p align="justify"> <img src="image/logo.jpg" align="right" hspace="5" vspace="5" height="70" width="100">
Вот в этом примере мы наше изображение разместили с правой стороны, в этом нам помог атрибут right. А атрибут justify указывает, что текст будет располагаться по всей ширине страницы. Так же мы используем ещё дополнительные атрибуты дл того чтоб текст не прилипал к изображению это hspace - отступ по горизонтали и vspace - отступ по вертикали. Это один пример из возможных вариантов но вы можете сами попробовать разместить изображение и текст по другому как вам хочется, предлагаю вам самим поэкспериментировать. </p>
 

Вот как это видно в браузере.

Вот в этом примере мы наше изображение разместили с правой стороны, в этом нам помог атрибут right. А атрибут justify указывает, что текст будет располагаться по всей ширине страницы. Так же мы используем ещё дополнительные атрибуты дл того чтоб текст не прилипал к изображению это hspace - отступ по горизонтали и vspace - отступ по вертикали. Это один пример из возможных вариантов, но вы можете сами попробовать разместить изображение и текст по другому как вам хочется предлагаю вам самим поэкспериментировать.



Вот ещё некоторые атрибуты с которыми я рекомендую познакомится:
Атрибут alt нужен если вдруг, у пользователя в браузере отключёна функция показа изображения ил по другим причинам не может вывести картину, то вместо него будет показан текст, который мы указали в атрибуте alt и к тому же он полезен для поисковиков.
Атрибут title показывает текст, когда вы на картинку наводите указателем, здесь записываем короткое описание.
В этом примере в первой картине я намерено указал не правильный путь к изображению, чтоб вывести описание который мы написали в alt. Возможно не все браузеры выводят описание на месте изображения, если картинка не доступна, заметил такое в Яндекс браузере.


<img src="logo.jpg" height="100" width="150" alt="Логотип сайта www.telefoniy.ru"> &nbsp;<img src="image/logo.jpg" height="100" width="150" title=" Описание к логотипу ">


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


Логотип сайта www.telefoniy.ru  







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


<a href="http://www.sozdat-svoysayt.ru"><img src="image/logo.jpg"></a>
 

Можете проверить, как работает ссылка в виде картинки кликнув понему.



На этом мы закончим этот урок, ждём на уроке по роботе с таблицами в html, рекомендую заглянуть.

--- --- ---


Рейтинг@Mail.ru   Яндекс.Метрика