Погледнете всяка онлайн страница днес и ще забележите, че споделят някои общи неща. Една от тези споделени черти е изображенията. Точните изображения добавят толкова много към презентацията на уебсайта. Някои от тези изображения, като логото на една компания, помагат за маркетинга на сайта и свързват този цифров обект с вашата физическа компания.
За да добавите изображение, икона или графики към уеб страницата си, трябва да използвате маркера в HTML кода на дадена страница. Вие поставяте маркера IMG във вашия HTML точно там, където искате графиката да се показва. Уеб браузърът, който изобразява кода на страницата, ще замени този маркер с подходящата графика след преглед на страницата. Връщайки се към примера на фирменото лого, ето как можете да добавите това изображение към сайта си:
Атрибути на изображението
Ако разгледате горния HTML код, ще видите, че елементът съдържа два атрибута. Всеки от тях се изисква за изображението.
Първият атрибут е "src". Това е буквално файлът с изображения, който искате да се показва на страницата. В нашия пример използваме файл, наречен "logo.png". Това е графиката, която уеб браузърът би показал, когато го направи сайта.
Ще забележите също, че преди това име на файла добавихме допълнителна информация "/ images /". Това е пътят на файла. Първоначалната наклонена черта отразява сървъра, за да разгледа корена на директорията. Тогава ще търси папка, наречена "изображения" и накрая файла, наречен "logo.png". Използването на папка, наречена "изображения" за съхраняване на всички графики на сайта, е доста обичайна практика, но пътят ви към файла ще бъде променен на това, което е подходящо за вашия сайт.
Вторият задължителен атрибут е текстът "alt". Това е "алтернативен текст", който се показва, ако изображението не успее да се зареди по някаква причина. Този текст, който в нашия пример има "Лого на фирмата", ще се покаже, ако изображението не се зареди. Защо ще се случи това? Различни причини:
- Неправилен път на файла
- Неправилно име на файла или грешно изписване
- Грешка при предаване
- Файлът бе изтрит от сървъра
Това са само няколко възможности, поради които може да липсва нашето конкретно изображение. В тези случаи вместо това ще се покаже нашия алтернативен текст.
Друг текст се използва и от софтуер за четене на екрана, за да "чете" изображението на посетител, който е с нарушено зрение. Тъй като не могат да видят изображението като нас, този текст им позволява да знаят какво е самият образ. Ето защо се изисква алтернативен текст и защо трябва ясно да се посочва какво представлява изображението!
Обичайно неразбиране на алтернативния текст е, че то е предназначено за целите на търсачката. Това не е вярно. Докато Google и други търсачки четат този текст, за да определят какво представлява изображението (не забравяйте, че не могат да "видят" имиджа ви), не трябва да пишете алтернативен текст, който да обжалва единствено търсачките. Авторът изяснява алтернативен текст, който е предназначен за хора. Ако можете да добавите и някои ключови думи в маркера, който е привлекателен за търсачките, това е добре, но винаги се уверете, че алтернативният текст изпълнява основната си цел, като посочите какво представлява изображението за всеки, който не може да види графичния файл.
Други атрибути
Маркерът IMG има и други два атрибута, които може да видите в употреба, когато поставите графика на уеб страницата си - ширината и височината. Например, ако използвате WYSIWYG редактор като Dreamweaver, той автоматично добавя тази информация за вас. Ето един пример:
Шрифтът WIDTH и HEIGHT атрибутите казват на браузъра размера на изображението. След това браузърът знае точно колко пространство в оформлението да разпредели и може да премине към следващия елемент на страницата, докато изтегля изображението. Проблемът с използването на тази информация във вашия HTML е, че може да не искате изображението ви да се показва на този точен размер. Ако например имате отговорен уеб сайт, чието оразмеряване се променя въз основа на екран на посетителите и размер на устройството, вие също ще искате изображенията ви да бъдат гъвкави. Ако посочите във Вашия HTML какъв е фиксираният размер, за вас ще бъде много трудно да се пренебрегнете с отзивчиви заявки за CSS медии . Поради тази причина и за да запазите отделянето на стила (CSS) и структурата (HTML), се препоръчва да не добавяте атрибути за ширина и височина на вашия HTML код.
Една бележка: Ако оставяте тези инструкции за оразмеряване на разстояние и не указвате размера в CSS, браузърът ще покаже изображението по подразбиране, натиснат размер така или иначе.
Редактиран от Джеръми Жирар