HTML Изображения – тага <img> и атрибута src

В HTML изображения се дефинират с тага <img>. Този таг е празен. Това означава, че може да съдържа само атрибути (никакво съдържание) и няма затварящ таг. За да покажете картинка или някакво изображение на страницата си, трябва да използвате src атрибута, като src означава source(източник). В самия атрибут се въвежда URL-а на картинката, която искате да покажете.
Синтаксис за дефиниране на изображение

url-a показва мястото където изображението се съхранява. Картинка с името „example.gif“, която се съхранява в папката „images“ на „www.w3schools.bg“ има следния url: „http://www.w3schools.bg/images/example.gif“. Браузъра показва изображението, там където е сложен img тага. Ако сложим картинката между два параграфа, браузъра ще покаже първия параграф, ще покаже изображението и след това ще довърши втория параграф.

HTML Изображения – атрибута alt

Атрибута alt е задължителен, за да е валиден HTML кода ви. Той дефинира текст, който ще бъде показан в случай, че иаозбражението не може да бъде заредено. Съдържанието на атрибута е напълно по ваш избор.

alt атрибута предоставя допълнителна информация, в случай, че потребителя не може да види картинката (било то поради бавен интернет, грешка в src атрибута или др.)

HTML Изображения – Размери

Атрибутите height и width се използват за да се определят височината и широчината на картинката. Принципно, за размерите се използват пиксели (px)

Хубаво е да дефинирате и височината и широчината в тага за изображението, за да може браузъра да задели нужното пространство за вашето изображение. Ако не определите размери, картинката ще добие нормалните си размери, а това може да „счупи“ страницата ви. Размерите може да дефинирате и чрез CSS, но на този етап, можете да използвате атрибутите в img тага. Широчина и височина или стил? Ширините, височината и стилните атрибути са валидни в HTML5. Предлагаме обаче да използвате атрибута за стила. Предотвратява смяна на размерите на изображенията от листовете за стилове:

Изображения в друга папка

Ако не е посочено, браузърът очаква да намери изображението в същата папка като уеб страницата. Обикновено се съхраняват изображения в под-папка. След това трябва да включите името на папката в атрибута src:

Изображения на друг сървър

Някои уеб сайтове съхраняват своите изображения на сървъри за изображения. Всъщност можете да получите достъп до изображения от всеки уеб адрес в света:

Анимирани изображения

HTML позволява анимирани GIF файлове:

Изображение като връзка

За да използвате изображение като връзка, поставете тагът <img> във тагът <a>. Виж урока за линкове тук.

Забележка: border:0; се добавя, за да предотврати извеждането (IE9 и по-рано) на рамка около изображението (когато изображението е връзка).

Подвижна картинка

Използвайте опцията на CSS float да накара изображението да плува отдясно или отляво на текста:

Карти с изображения

Използвайте маркера <map>, за да дефинирате картинна карта. Екранна карта е изображение с полета, върху които може да се кликва. В изображението по-долу кликнете върху компютъра, телефона или чашата кафе:

Атрибутът за име на маркера <map> е свързан с атрибута <img> на usemap и създава връзка между изображението и картата. Маркерът <map> съдържа редица маркери <area>, които дефинират зоните, върху които може да се кликва върху картата на изображението.

Фон на изображението

За да добавите фоново изображение в HTML елемент, използвайте свойството CSS background-image: За да добавите фоново изображение в уеб страница, задайте свойството на фона на елемента BODY:

За да добавите фоново изображение в параграф, задайте свойството на фона на елемента P:

За да научите повече за фоновите изображения, изучете нашият урок за CSS Background.

Елементът <picture>

HTML5 представи елемента <picture>, за да добави по-голяма гъвкавост при определяне на ресурсите на изображението. Елементът <picture> съдържа няколко елемента <source>, всеки от които се отнася за различни източници на изображения. По този начин браузърът може да избере изображението, което най-добре отговаря на текущия изглед и / или на устройството. Всеки елемент <източник> има атрибути, които описват кога изображението е най-подходящо. Браузърът ще използва първия елемент <source> със съвпадащи стойности на атрибутите и ще игнорира всички следващи <source> елементи. Показвайте една снимка, ако прозорецът на браузъра (viewport) е минимум 650 пиксела, а друго изображение, ако не е, но е по-голямо от 465 пиксела.

Забележка: Винаги задайте елемент <img> като елемент на последния елемент на елемента <picture>. Елементът <img> се използва от браузъри, които не поддържат елемента <picture> или ако не съвпадат нито един от маркерите <source>.

HTML екранен четци

Четецът на екрана е софтуерна програма, която чете HTML кода, преобразува текста и позволява на потребителя да „слуша“ съдържанието. Екранните четци са полезни за хора, които са слепи, с увредено зрение или с увреждания.

Обобщение на главата

• Използвайте елемента <img>, за да дефинирате изображение
• Използвайте атрибута src , за да определите URL адреса на изображението
• Използвайте alt , за да дефинирате алтернативен текст за изображение, ако не може да се покаже
• Използвайте атрибутите <width> и <height>, за да определите размера на изображението
• Използвайте CSS свойствата за ширина и височина, за да определите размера на изображението (алтернативно)
• Използвайте собствеността на CSS float, за да позволите на изображението да плава
• Използвайте елемента <map>, за да дефинирате картинна карта
• Използвайте елемента <area>, за да дефинирате областите, върху които може да се кликва в картата с изображения
• Използвайте атрибута на елемента за примерен елемент на HTML <img>, за да посочите изображение-карта
• Използвайте елемента HTML <picture>, за да показвате различни изображения за различни устройства

Забележка: Зареждането на изображения отнема време. Големите изображения могат да забавят страницата ви. Използвайте внимателно изображенията.

Основни забележки и полезни съвети

Съвет: ако един HTML файл има 10 изображения, зареждането на файла ще отнеме време. Съвета ни е, използвайте изображенията внимателно, тъй като зареждането им отнема време. Съвет: Когато страничката се зарежда, браузъра е този, които взима картинката от уеб сървъра и я слага на страничката. За да не се счупи картинката, бъдете сигурни, че картинката е на мястото което сте линкнали. Ако се случи нещо такова, вместо картинка ще се появи иконка за „счупен линк“.

Как да накараме картинка да float-не наляво или надясно Накарайте картинката да седи от лявата или дясната страна на параграф. Направете изображение, като хиперлинк Как да използваме изображение

HTML Тагове за Изображения