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