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

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


Картинки, як і усі інші елементи веб-сторінки, відображаються браузером відповідно до детальних інструкцій, які йому присилає сервер. Ці інструкції написані на мові 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!