Шта су ознаке ХТМЛ слике?
Следећи чланак ће дати преглед ХТМЛ ХТМЛ ознака. Знам да је то клише, али за почетак рећи ћу да слика вриједи хиљаду ријечи. У случају веб страница, то је посебно тачно. Слика може продати посетиоца вашом идејом, импресионирати некога да купи ваш производ и то може помоћи да веб страница изгледа толико боље. У овом ћемо водичу погледати како можемо додати ИМГ на веб странице и правилно их поравнати заједно са додавањем веза до њих.
Додавање слика на веб странице
Можете додати ИМГ на ХТМЛ страницу користећи ознаку у ХТМЛ документу, ево синтаксе:
Овде ИМГ каже прегледачу да се тага односи на додавање ИМГ-а документу, а „срц =“ одређује одакле да преузмете слику.
Пример странице са сликом
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Ево резултата кода:
Једна занимљива чињеница о овим ХТМЛ страницама је да када користите ИМГ ознаку, слика се не убацује на поменуту веб страницу, уместо тога ствара простор за задржавање где се слика поставља након што је преузмете.
Подршка прегледача и компатибилност са атрибутима
Као што можете очекивати, сви модерни прегледачи подржавају слике и употребу ИМГ ознака. Понекад ће мобилни прегледачи промијенити величину слике како би је уклопили на екран ако слика није постављена као респонзивна.
Када је у питању компатибилност атрибута са ХТМЛ 4.01 и новијим ХТМЛ5, већина ознака ће радити, осим за поравнавање, обруб, хспаце и вспаце који једноставно нису подржани у потоњем.
Слике као веза:
Доћи ће тренуци када желите да слика делује као линк до друге странице. То можете да урадите додавањем ИМГ ознаке унутар ознаке.
Постављање слике као позадине веб странице
Слику можете доделити као позадинску слику веб странице коришћењем ЦСС својства позадинске слике у елементу Боди у страници.
Позадинска слика
Постављање слике да лебди у прегледачу
Можемо да користимо ЦСС својство „флоат“ да подесимо да слика лебди унутра било где у прозору прегледача. Погледајмо пример који ће вам помоћи у разумевању.
Овде ће слика аутомобила лебдети на десној страни текста.
Овде ће слика аутомобила лебдети на левој страни текста.
Атрибути сликовне ознаке
Следе атрибути сликовне ознаке.
1) Поравнајте
Могуће вредности: горња, доња, средња, лева или десна.
Аттит атрибут користи се за одређивање поравнања слике на веб страници.
2) Алт
Тип вредности: Текст
Алт се користи за одређивање алтернативног текста слике веб странице. У случајевима када приказивање ИМГ-а није могуће, прегледач овај текст приказује кориснику. Тражилице попут Гооглеа и Бинг користе овај алт текст за приказ резултата у претраживању слика.
3) Граница
Вредност типа: пиксела
Користи се за стварање границе корисничке дебљине око слике. Не ради у ХТМЛ5.
4) унакрсно порекло
Вриједност типа: Анонимна употреба-акредитиви
Овај се атрибут користи када желимо прецизирати како се треба односити према фотографијама унакрсног поријекла. Најчешће се користи у случајевима када се користе елементи платна ЈаваСцрипт веб апликација.
5) Висина
Тип вредности: проценти или пиксели
Очито се овај користи за означавање висине слике на ХТМЛ веб страници.
6) хспаце
Вредност типа: пиксела
Ако није подржан у ХТМЛ5, атрибут хспаце се користи да се у пикселима одреди колико белог простора треба додати левој и десној страни уметнуте слике.
7) исмап
Тип вредности: УРЛ странице
исмап који смо користили да дефинирамо наведену слику као мапу слике на страни сервера. Када корисник кликне (или додирне) унутар слике, прегледачи шаљу координате клика (или тапне) на веб сервер као УРЛ.
8) Лонгдесц
Вредност типа: УРЛ
Лонгдесц се користи за детаљни опис слике коришћењем УРЛ-а. УРЛ који се користи у атрибуту користи се као опис слике.
9) срц
Вредност типа: УРЛ
срц означава извор и користи се за одређивање адресе са које ће прегледач преузети слику, а овај УРЛ се може применити на слику унутар директорија на истом серверу и такође може да похрани слику на сервер треће стране са друго име домена.
10) усемап
Тип вредности: # мапнаме
Атрибут усемап користи се за дефинирање слике за мапу слике на страни клијента. Увек се користи мапа употребе са ХТМЛ ознакама мапе и подручја.
11) вспаце
Вредност типа: пиксела
Ако није подржан у ХТМЛ5, атрибут Вспаце користи се за подешавање броја пиксела који ће се користити као бели простор на врху и на дну слике на веб страници.
12) Ширина
Вредност типа: пиксела
Као што му име каже, атрибут ширине користи се за одређивање ширине слике унутар ХТМЛ веб странице.
Закључак - ХТМЛ Имаге Тагс
Сада када смо погледали како се слике додају у ХТМЛ странице и како поставити њихове атрибуте, можемо да креирамо атрактивне веб странице у веб пројекту.
Осим што само додате визуелни њух веб страници, слике су корисне и због тога што помажу у оптимизацији претраживача. Додавање одговарајућих алт ознака и описа сликама помаже претраживачима да боље схвате садржај веб странице и побољшају рангирање веб странице у многим случајевима.
Препоручени чланци
Ово је водич за ХТМЛ Имаге Тагс. Овде смо расправљали о атрибутима ознаке слике заједно са подршком прегледача и компатибилности са атрибутима. Можда ћете такође погледати следеће чланке да бисте сазнали више -
- Једноставан водич за ХТМЛ команде
- Увод у шта је КСХТМЛ?
- Водичи за атрибуте ХТМЛ
- Апликације и најпопуларнија употреба ХТМЛ-а
- Различити стилови листе у ХТМЛ-у
- ХТМЛ Фрамес
- ХТМЛ Блоцкс