Погледнете која било веб-страница на интернет денес и ќе забележите дека споделуваат одредени заеднички работи. Една од тие споделени особини е слики. Правото слики додаваат толку многу на презентацијата на веб страната. Некои од тие слики, како лого на компанијата, помагаат да се брендира страницата и да се поврзе тој дигитален ентитет со вашата физичка компанија.
За да додадете слика, икона или графика на вашата веб-страница, треба да ја користите ознаката во HTML-кодот на страницата. Вие ја ставате IMG таг во HTML каде точно сакате да се прикаже графиката. Веб-прелистувачот што го рендерира кодот на страната ќе ја замени оваа ознака со соодветната графика откако страната ќе се прегледа. Враќање во примерот на логото на нашата компанија, тука е како можете да ја додадете таа слика на вашиот сајт:
Атрибути на сликата
Гледајќи го HTML кодот погоре, ќе видите дека елементот вклучува две атрибути. Секој од нив е потребен за сликата.
Првиот атрибут е "src". Ова е доста буквално датотеката со слики што сакате да ја прикажете на страницата. Во нашиот пример се користи датотека наречена "logo.png". Ова е графиката што веб-прелистувачот ќе ја прикаже кога го прикажува сајтот.
Исто така, ќе забележите дека пред името на оваа датотека, додадовме некои дополнителни информации, "/ images /". Ова е патеката на датотеката. Почетната коса црта го кажува серверот да го разгледува коренот на директориумот. Потоа ќе побара папка наречена "слики" и конечно датотеката наречена "logo.png". Користењето на папка наречена "слики" за чување на целата графика на веб-страницата е прилично честа практика, но патеката на датотеката ќе се промени на она што е релевантно за вашиот сајт.
Вториот потребен атрибут е "alt" текст. Ова е "алтернативен текст" кој се прикажува ако сликата не успее да се вчита поради некоја причина. Овој текст, кој во нашиот пример го чита "Логото на компанијата", ќе биде прикажан ако сликата не успее да се вчита. Зошто тоа би се случило? Различни причини:
- Неточна патека на датотека
- Неточни имиња на датотеки или грешка
- Грешка при пренос
- Датотеката е избришана од серверот
Ова се само неколку можности за тоа зошто нашата одредена слика може да недостасува. Во овие случаи, нашиот алт текст ќе се прикаже наместо.
Alt текстот исто така се користи од софтверот за читач на екранот за да ја "прочита" сликата на посетителот кој е оштетен од видот. Бидејќи тие не можат да ја видат сликата како ние, овој текст им овозможува да знаат што е самата слика. Ова е причината зошто е потребен алт текст и зошто треба јасно да се наведе каква е сликата!
Честа недоразбирање на алт текстот е дека тој е наменет за цели на пребарувачот. Ова не е вистина. Додека Google и другите пребарувачи го читаат овој текст за да утврдат каква е сликата (запомнете, тие не можат да ја "видат" вашата слика или), не треба да пишувате алт текст за жалба исклучиво на пребарувачите. Автор јасен алт текст кој е наменет за луѓето. Ако исто така можете да додадете некои клучни зборови во тагот што се допаѓа на пребарувачите, тоа е во ред, но секогаш осигурајте се дека алт-тек ја служи својата примарна цел со наведување на тоа каква е сликата за секој кој не може да ја види графичката датотека.
Други атрибути
IMG ознаката, исто така, има две други атрибути кои може да ги видите при употреба кога ставате графичка на вашата веб-страница - ширина и висина. На пример, ако користите WYSIWYG уредник како Dreamweaver, тој автоматски ги додава овие информации за вас. Еве еден пример:
Атрибутите WIDTH и HEIGHT му кажуваат на прелистувачот за големината на сликата. Прегледувачот тогаш точно знае колку простор во изгледот да се распредели, и може да премине кон следниот елемент на страницата додека преземањето на сликата. Проблемот со користењето на оваа информација во HTML е дека можеби не секогаш сакате вашата слика да се прикаже на таа точна големина. На пример, ако имате реактивна веб-страница чија големина се менува врз основа на екранот на посетители и големината на уредот, исто така ќе сакате вашите слики да бидат флексибилни. Ако наведете во вашата HTML она што е фиксната големина, ќе ви биде многу тешко да се замени со соодветни медиумски пребарувања на CSS . Поради оваа причина, и за одржување на одделување на стил (CSS) и структура (HTML), се препорачува да НЕ додадете атрибути на ширина и висина на вашиот HTML код.
Една забелешка: Ако ги оставите овие инструкции за големината и не наведете одредена големина во CSS, прегледувачот во секој случај ќе ја прикаже сликата според неговата стандардна големина.
Уредено од Џереми Жирар