Какво е HTML Image Tags?
Следващата статия ще съдържа контур за HTML Image Tags. Знам клишето му, но нека започна като кажа, че една снимка струва хиляда думи. В случая на уеб страниците това е особено вярно. Едно изображение може да продаде посетителя с вашата идея, да впечатли някого да купи вашия продукт и това може да помогне на уеб страницата да изглежда толкова по-добре. В това ръководство ще разгледаме как можем да добавим IMG към уеб страниците и да ги подравним правилно, заедно с добавянето на връзки към тях.
Добавяне на изображения към уеб страници
Можете да добавите IMG към HTML страница, като използвате етикет в HTML документа, ето синтаксиса:
Тук IMG казва на браузъра, че етикетът е свързан с добавяне на IMG към документа и „src =“ указва откъде да изтеглите изображението.
Пример за страница с изображение
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Ето изхода на кода:
Един интересен факт за тези HTML страници е, че когато използвате IMG маркера, изображението не се вмъква в споменатата уеб страница, вместо това създава място за задържане, където изображението се поставя след като бъде изтеглено.
Поддръжка на браузъра и съвместимост с атрибути
Както можете да очаквате, всички съвременни браузъри поддържат изображения и използването на IMG тагове. Понякога мобилните браузъри ще преоразмерят изображението, за да го поставят на екрана, ако изображението не е настроено като отзивчив.
Когато става въпрос за съвместимост на атрибути с HTML 4.01 и по-нов HTML5, повечето тагове ще работят, с изключение на подравняването, границата, hspace и vspace, които просто не се поддържат в последната.
Изображения като връзка:
Ще има моменти, в които ще искате изображението да работи като връзка към друга страница. Можете да го направите, като добавите етикета IMG вътре в маркера.
Задаване на изображение като фон на уеб страница
Можете да зададете изображение като фонова снимка на уеб страница, като използвате CSS свойството background-image в елемента Body на страницата.
Фоново изображение
Настройка на изображението да плава в браузъра
Можем да използваме свойството CSS „float“, за да настроим изображението да плава вътре навсякъде в прозореца на браузъра. Нека да разгледаме един пример, който ще ви помогне да разберете.
Тук изображението на автомобила ще плава от дясната страна на текста.
Тук изображението на автомобила ще плава в лявата част на текста.
Атрибути на изображението
По-долу са атрибутите на таг за изображение.
1) Align
Възможни стойности: отгоре, отдолу, в средата, вляво или вдясно.
Атрибутът светлина се използва за определяне на подравняването на картина на уеб страницата.
2) Alt
Тип стойност: текст
Alt се използва за определяне на алтернативния текст на снимка на уеб страница. В случаите, когато показването на IMG не е възможно, браузърът показва този текст на потребителя. Търсачки като Google и Bing използват този алт текст, за да показват резултати в Търсене на изображения.
3) Гранична
Тип стойност: Пиксели
Използва се за създаване на граница с дебелина, определена от потребителя около картината. Не работи в HTML5.
4) Cross-Origin
Тип стойност: Анонимни идентификационни данни за използване
Този атрибут се използва, когато искаме да уточним как трябва да се обработват снимки с кръстосан произход. Това се използва най-вече в случаите, когато се използват елементи на платното на уеб приложенията на JavaScript.
5) Височина
Тип стойност: Проценти или пиксели
Очевидно този се използва за обозначаване на височината на изображението в HTML страницата.
6) hspace
Тип стойност: Пиксели
Неподдържан в HTML5, атрибутът hspace се използва за определяне в пиксели колко бяло пространство трябва да се добави отляво и отдясно на вмъкнатото изображение.
7) ismap
Тип стойност: URL адрес на страница
ismap използвахме за определянето на споменатото изображение като карта на изображението от страна на сървъра. Когато потребителят кликне (или докосне) вътре в изображението, браузърите изпращат координатите на щракването (или докосването) на уеб сървъра като URL.
8) Longdesc
Тип стойност: URL адрес
Longdesc се използва за даване на подробно описание на изображение чрез използване на URL. URL адресът, използван в атрибута, се използва като описание на изображението.
9) SRC
Тип стойност: URL адрес
src означава източник и се използва за определяне на адреса, от който браузърът ще извлече изображението, този URL адрес може да се приложи към изображение вътре в директория на същия сървър и може също така да съхранява изображение в сървър на трети страни с друго име на домейн.
10) usemap
Тип стойност: #mapname
Атрибутът usemap се използва за определяне на изображението за карта на изображението от страна на клиента. Използва се винаги карта за използване с HTML маркери на карта и област.
11) vspace
Тип стойност: Пиксели
Не се поддържа в HTML5, атрибутът Vspace се използва за задаване на броя на пикселите, които трябва да бъдат използвани като празно пространство в горната и долната част на изображението в уеб страницата.
12) Ширина
Тип стойност: Пиксели
Точно както подсказва името му, атрибутът width се използва за определяне на ширината на снимка в HTML уеб страницата.
Заключение - HTML Image Tags
След като разгледахме как се добавят изображения в HTML страници и как да зададем техните атрибути, можем да създадем атрактивни изглеждащи уеб страници в уеб проект.
Освен че просто добавяте визуален усет към уеб страница, изображенията са ценни, защото помагат и за оптимизацията на търсачките. Добавянето на подходящи alt тагове и описания към изображенията помага на търсачките да разберат по-добре съдържанието на уеб страница и да подобрят класирането на уеб страница в много случаи.
Препоръчителни статии
Това е ръководство за HTML Image Tags. Тук обсъждаме атрибутите на изображението, заедно с поддръжката на браузъра и съвместимостта с атрибутите. Може да разгледате и следните статии, за да научите повече -
- Просто ръководство за HTML команди
- Въведение в това, което е XHTML?
- Ръководства за HTML атрибути
- Приложения и основни приложения на HTML
- Различни стилови списъци в HTML
- HTML рамки
- HTML блокове