Як помістити картинку

Як помістити картинку

Картинки, як і всі інші елементи веб-сторінки, відображаються браузером відповідно до докладними інструкціями, які йому надсилає сервер. Ці інструкції написані на мові HTML (HyperText Markup Language — «мова розмітки гіпертексту») і складаються з «тегів». Теги описують тип всіх елементів веб-сторінки, їх розташування і зовнішній вигляд.

Інструкція

  1. Спочатку вам потрібно завантажити файл зображення на сервер. Зробити це можна по ФТП-протоколу (File Transfer Protocol — «протокол передачі файлів») через спеціальну програму. Називають ці програми ФТП-клієнтами — наприклад, Cute FTP, WS FTP, FlashFXP та інші. Але можна завантажувати через файл-менеджер, який повинен бути в панелі управління хостингу на якому розміщений ваш сайт. Файл-менеджер дозволяє завантажувати файли через браузер.
  2. Після цього потрібно помістити відповідний тег в html-код потрібної сторінки. Тобто, вам слід знайти цю сторінку і відкрити її вихідний код для редагування. Якщо у вас є файл сторінки, то відкрити його можна простим текстовим редактором — наприклад, стандартним Блокнотом. А якщо для управління сайтом ви використовуєте яку або систему, то в панелі адміністрування цієї системи знайдіть редактор сторінок і відкрийте в ньому потрібну сторінку. Після цього залишиться вкласти тег зображення в потрібне вам місце на сторінці і зберегти зміни.
  3. Детальніше про сам теге — в найпростішому варіанті виглядати він може так:

    <img src=»image.gif»>

    Тег містить різну додаткову інформацію — «атрибути». Обов’язковим для тега зображення є всього один атрибут — src. Він вказує браузеру адресу, за якою він повинен взяти файл, що містить карnінку. Якщо цей файл лежить на сервері в цій же папці (або вкладеної в неї), що й сама сторінка, то досить вказати лише його ім’я або шлях до вкладеної папки. Такі адреси називаються «відносними». А абсолютний адреса може виглядати так:

    <img src=»http://site.ru/image.gif»>

    -

    Інший атрибут — alt — містить текст, який з’являється в підказці при наведенні миші:

    <img src=»image.gif» alt=»Текст про картінке»>

    Точно це ж саме робить й інший атрибути — title:

    <img src=»image.gif» title=»Текст про картінке»>

    -

    Два атрибути — width і height — задають розмір прямокутника, в якому браузер буде відображати зображення:

    <img src=»image.gif» width=»100″ height=»200″>

    Ці атрибути не обов’язкові, але якщо щось піде не так і картинка не зможе завантажитися, то всі інші елементи сторінки можуть виявитися не на своїх місцях, так як браузер не дізнається розмірів, які повинна була займати картинка. Розміри зазначаються в «пікселах» — це основна одиниця виміру, що використовується при розмітці сторінок.

    -

    Атрибут border задає ширину рамки навколо зображення (у пікселях):

    <img src=»image.gif» border=»4″>

    Якщо картинку зробити посиланням, то за замовчуванням браузер намалює навколо неї синю рамку. Щоб позбутися її треба в нуль значення border:

    <a href=»http://site.ru»> <img src=»image.gif» border=»0″> </ a>

    -

    Два атрибути задають відступ картинки від сусідніх елементів (наприклад від рядків тексту) — hspace задає відступ по горизонталі (зліва і справа), vspace — по вертикалі (знизу і зверху):

    <img src=»image.gif» hspace=»5″ vspace=»6″>

    -

    Це найбільш уживані атрибути, а всього їх для цього тега більше 50!