Як вставити зображення на сайт
Все, що бачить відвідувач на сторінках сайту, відображається браузером на підставі детальних інструкцій, надісланих йому сервером. Ці інструкції називаються html-кодом сторінки і складаються з окремих «тегів», в яких описані тип, зовнішній вигляд і розташування кожного елемента окремо. Щоб помістити в сторінку будь-якої новий елемент (наприклад - зображення), Треба в її вихідний код додати відповідну інструкцію - тег. Розглянемо - як це зробити найпростіше.
1
Якщо ви використовуєте якусь систему управління сайтом, то дуже ймовірно, що в її складі є редактор сторінок. Для початку вам слід відкрити потрібну сторінку в цьому редакторі. Далі - можливі варіанти. У самому вдалому випадку редактор сторінок матиме «візуальний режим», по-іншому - «режим WYSIWYG» (What You See Is What You Get - «що бачиш, то і отримаєш»). У такому режимі вам взагалі не потрібно буде мати справу з вихідним html-кодом! Сторінка в редакторі буде виглядати так само, як і на сайті, досить буде ткнути мишкою в потрібне місце і натиснути на панелі редактора кнопку «вставити зображення».
зображення »в панелі візуального редактора" class ="lightbx" data-lightbox ="article-image"gt;
2
В результаті відкриється діалогове вікно, в якому вам треба вибрати потрібну картинку. Якщо ви її ще не завантажували - тут же є кнопка для вибору зображення на вашому комп`ютері і завантаження його на сервер. Крім того, в цьому діалозі можна задати колір і ширину рамки навколо зображення, відстань і колір заливки між рамкою і картинкою, текст для підказки. Розміри тут вказувати не обов`язково, але з міркувань прискорення завантаження сторінки і для запобігання спотворення дизайну краще все ж це зробити. Коли всі потрібні поля діалогу заповнені, натисніть «ОК», щоб потім зберегти відредаговану сторінку.
3
Через те, що єдиного стандарту на системи управління не існує, процедура вставки зображення в візуальному режимі вашої системи може трохи відрізнятися, але принцип буде таким же. З цієї ж причини WYSIWYG-режиму може не виявитися в системі управління вашим сайтом. Тоді все ж доведеться редагувати вихідний код сторінки на мові HTML (HyperText Markup Language - «мова розмітки гіпертексту»). Вам потрібно буде вставити в потрібне місце коду тег, командувач браузеру показати тут зображення. У найпростішому варіанті він повинен виглядати так:Тут вказано «відносний адреса» зображення - за цією адресою браузеру слід звернутися до сервера, щоб отримати від нього файл картинки. Якщо адреса відносний, то браузер буде вважати, що файл лежить в тій же папці сервера, де і сама сторінка (або у вкладеній папці). Але, щоб не помилитися, краще вказувати «абсолютний адреса» - наприклад, так:Природно, щоб сервер міг знайти і віддати браузеру зображення, його слід закачати в вказане місце. Найпростіше це зробити через файл-менеджер, який є в кожній системі управління сайтом, а так само в панелі управління вашої хостингу компанії. Можна зробити це і по ФТП-протоколу (File Transfer Protocol - «протокол передачі файлів»), скориставшись спеціальною програмою - ФТП-клієнтом. Їх багато, як платних, так і безкоштовних - наприклад, Cute FTP, FlashFXP, WS FTP та ін. Але, природно, установка, освоєння та налаштування програми потребують часу, тому файл-менеджер для завантаження всього необхідного через браузер - простіший варіант.
4
Крім адреси в html-тегу зображення можна вказувати і додаткову інформацію - «атрибути» тега. Наприклад, атрибут alt містить текст для спливаючій при наведенні курсору миші на зображення підказки:Його можна замінити атрибутом - title:--Розмір прямокутника, в якому браузер повинен відобразити картинку, задають атрибути width і height:--Атрибут border вказує ширину рамки навколо картинки (в пікселах):якщо зображення зробити посиланням, то браузер намалює навколо неї синю рамку. Щоб її позбутися треба значенням border привласнити нуль:--Два інших атрибута містять інформацію про величину відступів картинки від сусідніх елементів (від рядків тексту, інших картинок, і т.д.) - hspace задає розмір відступу по горизонталі (зліва і справа), vspace - по вертикалі (знизу і зверху):
Зверніть увагу
Вставка зображення на сайт. На сьогоднішньому уроці розглянемо, як вставляти на сторінку сайту зображення. Для того, щоб вставити будь-яке зображення, картинку, фотографію на сторінку сайту, слід використовувати тег, який має єдиний обов`язковий атрибут src, який визначає адресу файлу із зображенням.
Корисна порада
Подорожуючи по інтернету Ви спостерігали на багатьох сайтах різні картинки, банери, графічні зображення. Сьогодні Ми навчимося вставляти зображення на HTML сторінку. Саме зображення вставляється за допомогою тега img src ="img / mers1.jpg" де "img / mers1.jpg" - Вказує, що наша картинка лежить в папці img а ім`я файлу mers1.jpg. В принципі цього достатньо, щоб вставити зображення, інші параметри необов`язкові, але все, же їх, слід прописувати інакше наша картинка, може піддатися спотворень.
Статті за темою "Як вставити зображення на сайт"
Оцініть, будь ласка статтю