Статьи

Зображення в html (тег img src), як задати фонові зображення, рамки, відступи.

  1. Вставляємо зображення в текст html, міняємо розмір зображення
  2. Рамка і відступи зображення. Вирівнювання зображення.
  3. Задаємо фонове зображення для html елемента. Робимо зображення кнопкою форми. Як накласти текст на...
  4. Як зробити зображення посиланням. Прибираємо рамку навколо зображення-посилання в IE.

Вітаю вас, читачі TakProstoTak.ru , Сьогодні будемо говорити на тему зображень в html. Як вставити зображення в код html ? Як міняти розмір зображення? Як задати фонове зображення для деяких html елементів і як зробити кнопку html форми зображенням? на ці та багато інших питань я відповім у цій статті. По ходу п'єси розберемо, як виглядає html код зображення і як зробити зображення посиланням. Розглянемо як накласти текст на зображення.

html форми

Вставляємо зображення в текст html, міняємо розмір зображення

Будь-яка веб-сторінка базується на мові гіпертекстової розмітки (HTML). Ні для кого не секрет, що крім тексту на веб-сторінці можна розміщувати так само зображення. Якщо ви не так давно почали вивчати "штмл", у вас можуть виникнути деякі труднощі, пов'язані з тим, як вставити зображення на сторінку вашого сайту, як задати розташування зображень відносно один одного і щодо тексту, задати необхідну обтікання тексту.


Принципових складнощів тут немає, вставка зображення робиться за допомогою html тега IMG, а розташування в тексті регулюється CSS ( CSS блокова верстка ) Властивостями конкретного зображення і елементами, розташованими в безпосередній близькості.

Висновок зображення здійснюється тегом IMG, при цьому задіюється обов'язковий атрибут SRC (source або джерело). Нижче представлений html код, що виводить одне зображення.

<Img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

результат роботи цього коду, як видно на фото позує чарівний представник сімейства котячих.

результат роботи цього коду, як видно на фото позує чарівний представник сімейства котячих

Примітка: Які тут можуть бути труднощі? Можна вказати невірно шлях до зображення, в цьому випадку браузер нічого не покаже. Швидше за все, ви помилилися в імені або невірно вказали шлях до зображення.

Шлях може бути абсолютним і відносним. У моєму випадку використовується абсолютний шлях: http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg. Абсолютний шлях завжди починається з http: // адрес_сайта /, далі йде шлях до зображення щодо кореня сайту (/wp-content/uploads/2012/01/images1.jpeg). Так само абсолютний шлях дозволяє використовувати зображення з інших сайтів.

Відносний шлях (/wp-content/uploads/2012/01/images1.jpeg), так само часто використовується і найкращий, тому що при зміні доменного імені відносні шляхи, як і раніше будуть працювати.

Розглянемо основні атрибути тега IMG:

  • src - Джерело, адреса файлу-зображення
  • width - Ширина контейнера під зображення
  • height - Висота контейнера під зображення
  • hspace - відступ по горизонталі від навколишнього тексту
  • vspace - відступ по вертикалі від навколишнього тексту
  • border - товщина рамки зображення
  • alt - альтернативний текст зображення. Якщо відключити показ картинок в браузері, то замість картинок буде показаний альтернативний текст.

Приклад використання атрибутів тега IMG:

<Img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" width = "100" height = "100" border = "4" alt = "Кот на риболовлі" / >

результат (рамка 4пікс., ширина і висота 100пікс. альтернативний текст - "кіт на риболовлю"):

Атрибути width і height рекомендую завжди вказувати, навіть якщо вони збігаються з істинними розмірами зображення. Якщо ці атрибути вказані, то браузер резервує спочатку місце під зображення в html документі і не чекаючи завантаження продовжує формувати сторінку, а зображення тим часом завантажується. В результаті сторінка швидше завантажитися.

width і height можуть відрізнятися як в більшу так і в меншу сторону від істинного значення зображення, в цьому випадку браузер зменшить / збільшить зображення. Важливо розуміти, що браузер змінює зображення не пропорційно, а як ви вкажете. Часто можна бачити, як початківці вебмастера ставлять на сайті великі картинки (200Кб-2мб) і при цьому зменшують їх за рахунок атрибутів width і height, це поганий стиль, який веде до того, що картинки будуть виглядати менше, ніж є насправді, а ваша сторінка буде довше завантажуватися, а користувач, не дочекавшись, піде і ніколи не повернеться. В ідеалі справжнє значення висоти і ширини зображення повинно збігатися з атрибутами ширини і висоти тега IMG або відрізнятися незначно. Для показу великих фотографій на сайті існують фото-галереї, в них спочатку представлені мініатюри (зменшена копія зображення) після клацання на яку завантажується основне фото у спливаючому вікні, цю галерею можна реалізувати за допомогою будь-якого jQuery плагіна, яких досить багато на будь-який смак і колір .

Рамка і відступи зображення. Вирівнювання зображення.


Ми вже розглянули приклад як за допомогою атрибута border задати рамку навколо зображення, з тим же успіхом можна задати рамку через CSS ( CSS табличная верстка ).

Давайте задамо у коло всіх зображень сторінки червону рамку шириною 5пікс.

<Style type = "text / css"> img {border: 5px solid red;} </ style> <img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

В результаті отримаємо:

В результаті отримаємо:

Всі зображення на сторінці матимуть аналогічну рамку оскільки в CSS використовується правило img {border: 5px solid red;}, яке застосовується до всіх тегами IMG. У нашому прикладі таблиця стилів розташовується безпосередньо в html документі, але її можна винести в окремий файл і підключити до документа, це найкращий варіант. У нашому ж випадку для наочності html і css коди розташовуються в одному файлі.

Примітка: Якщо потрібно задати стиль для конкретного зображення або групи, тоді слід використовувати CSS класи. Надаємо за потрібне зображенням будь-який клас (<img src = "..." class = "img_ramka">), а в CSS стилях задаємо необхідні властивості для цього класу (.img_ramka {border: 5px solid red;}).

Вирівнюємо зображення по лівому краю.
Вирівнюємо зображення по лівому краю
Вирівнювати зображення можна по центру, по лівому або правому краях. В даному випадку зображення вирівняно по лівому краю. Вирівняти зображення можна шляхом вказівки CSS властивості float з одним зі значень left | right | none | inherit. Також можна вказати атрибут align для тега IMG, значення атрибута left | right | center.

<Style type = "text / css"> img {float: left} </ style> <img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

по правому краю
по правому краю   Цей текст обтікає зображення зліва, так як в CSS стилях задано властивість для зображень float: right
Цей текст обтікає зображення зліва, так як в CSS стилях задано властивість для зображень float: right.

<Style type = "text / css"> img {float: right} </ style> <img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

Відступи від зображення.
Відступи від зображення
У наведеному вище прикладі текст обтікає зображення щільно, без відступів. Часто потрібно, щоб текст відступав від зображень на деяку відстань, що прилип текст виглядає негарно. Давайте задамо відступ тексту від зображення в 10 пікселів. За це відповідає CSS властивість margin. margin: 10px - означає, що потрібно відступити 10 пікселів з усіх чотирьох сторін. Якщо потрібно з кожного боку задати різні відступи, тоді слід використовувати цю властивість в інший варіації (margin: 2px 3px 4px 5px - задає різні відступи, зверху 2пікс., Праворуч 3пікс., Знизу 4пікс., Зліва 5пікс.).

<Style type = "text / css"> img {float: left; margin: 10px;} </ style> <img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

Задаємо фонове зображення для html елемента. Робимо зображення кнопкою форми. Як накласти текст на зображення


Часто буває необхідно використовувати зображення в якості фону для блочного html елемента. На моєму сайті фон задається як абстрактна картинка, розмножена по вертикалі і горизонталі. Давайте створимо div контейнер з габаритами 200 на 200 пікселів і фоновою картинкою (іконка rss) і укладемо його в чорну рамку товщиною 4 пікс. Всередині контейнера div розташований текст, в результаті ми вирішили задачу накладення тексту на зображення. Якщо необхідно текст може бути позиційований всередині контейнера як завгодно і мати будь-який стильове оформлення.

Контейнер DIV, може містити довільний текст або будь-який html код. В якості фону задана картинка (32 на 32 пікселя), яка повторюється по вертикалі і горизонталі.

<Style type = "text / css"> div.conteiner {background: url (http://takprostotak.ru/wp-content/themes/Ultima/images/rss.png); width: 200px; height: 200px; border: 4px solid; margin: auto;} </ style> <div class = "conteiner"> ... </ div>

Фонове зображення задається CSS властивість background: url (...). Як бачимо фоновий малюнок повторюється і заповнює весь контейнер, це тому що малюнок менше ніж контейнер і у властивості background не вказано про «не розмноженні" картинки (no-repeat).

Фонове зображення без повторень
Щоб фон не повторювався необхідно вказати параметр no-repeat властивості background.

В цьому контейнері DIV фонове зображення не повторюється (параметр no-repeat), зміщене ліворуч на 50 пікселів. і зверху на 20 пікс.

<Style type = "text / css"> div.conteiner {background: url (...) no-repeat 50px 20px; width: 200px; height: 200px; border: 4px solid; margin: auto;} </ style> <div class = "conteiner"> ... </ div>

Фонове зображення повторюється по осі горизонталі
Якщо потрібно щоб фонова картинка розмножилася тільки по осі X, для цього необхідно вказати параметр repeat-x властивості background.

В цьому контейнері DIV фонове зображення повторюється тільки по осі X (параметр repeat-x).

<Style type = "text / css"> div.conteiner {background: url (...) repeat-x; width: 200px; height: 200px; border: 4px solid; margin: auto;} </ style> <div class = "conteiner"> ... </ div>

Фонове зображення повторюється по осі вертикалі
Якщо потрібно щоб фонова картинка розмножилася тільки по осі Y, для цього необхідно вказати параметр repeat-y властивості background.

В цьому контейнері DIV фонове зображення повторюється тільки по осі Y (параметр repeat-y).

<Style type = "text / css"> div.conteiner {background: url (...) repeat-y; width: 200px; height: 200px; border: 4px solid; margin: auto;} </ style> <div class = "conteiner"> ... </ div>

Робимо зображення кнопкою html форми. Кнопка-картинка
Стандартно кнопка html форми виглядає якось так

Щоб зробити зображення кнопкою необхідно змінити тип поля INPUT на IMAGE і додати параметр SRC.

<Input type = "image" src = "http://takprostotak.ru/wp-content/themes/Ultima/images/rss.png">

Як зробити зображення посиланням. Прибираємо рамку навколо зображення-посилання в IE.

Дуже часто потрібно зробити так щоб при натисканні по зображенню здійснювався перехід на якусь html сторінку або іншими словами зробити картинку посиланням, прив'язати її до певного URL. Для цього потрібно, всього-на-всього укласти зображення в тег A. Наступне посилання веде на головну сторінку мого блогу:

код:
код:

<a href="http://takprostotak.ru" target="_blank"> <img src = "http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" alt = "" /> </a>

Тут параметр HREF вказує адресу посилання, а TARGET = "_ BLANK" говорить про те, що сторінка повинна відкриватися в новому вікні браузера.

Щоб уникнути появи рамки навколо зображення-посилання в IE, необхідно задати в CSS стилях загальна властивість (a img {border: 0;}).

На останок за традицією відео в тему.

Примітка: Які тут можуть бути труднощі?

Новости