Шта су ХТМЛ слике и како изменити вашу веб страницу?



Овај чланак ће вам пружити детаљно и свеобухватно знање о ХТМЛ сликама и како их не можете додавати и мењати како би ваша веб страница изгледала добро.

Слике су веома важан део веб странице, јер побољшава изглед веб странице и повећава интеракцију са купцима. УСП више веб локација је начин на који они организују различите слике на својим веб страницама и додају им окусе. У ово Чланак Слике, разумећемо како да уграђујемо слике у веб страницу користећи ХТМЛ у следећем редоследу:

Како додати слику у ХТМЛ

Уграђивање слике у веб страницу даје вам ХТМЛ ознака. Још једна важна ствар коју треба запамтити је, нема завршну ознаку. сцр атрибут се користи за одређивање путање слике, која може бити урл или путања слике из система / сервера. Кренимо прво са основном синтаксом уграђивања слике у веб страницу помоћу ХТМЛ-а.





Синтакса

имг срц = 'имг / фронт-енд-веб-девелопмент / 50 / вхат-аре-хтмл-имагес.пнг'>

Узорак кода



ХТМЛ слика Уграђивање слика у веб страницу  

Слично другим ознакама, постоје различити атрибути повезани са ознака. Погледајмо сваког од њих једног по једног, схватимо њихове потребе и како их користити.

Ознаке ХТМЛ слика

  • алт Атрибут

Атрибут алт је алтернативни текст слике. Разлог зашто је уведен алт атрибут је тај што због било ког разлога слика није могла да се учита, онда би се требао појавити алтернативни текст који даје идеју о слици. Разлози због којих се слика не учитава могу бити спора интернет веза или слика не налази се у наведеном извору итд.



Ако се слика налази у истој фасцикли у којој је ХТМЛ датотека, можете директно да наведете име датотеке. У супротном, морате навести апсолутни пут до датотеке слике.

Вредност алт атрибута треба да описује слику.

Пример

 Едурека Лого
ХТМЛ слика Уграђивање слика у веб страницу логотип едурека 

ц ++ програм за сортирање низа у растућем редоследу
  • Ширина и висина слике

Атрибут стиле користи се за постављање висине и ширине слике. У атрибуту стиле одредите ЦСС стил.

ХТМЛ слика Уграђивање слика у веб страницу  

Неке од важних тачака приликом уграђивања слике у веб страницу помоћу ХТМЛ-а су:

  • Атрибути ширине и висине дефинисани су у пикселима.
  • Такође можете да дефинишете ширину и висину слике у процентима. Проценат ће се узети у обзир према целој веб страници.
   
  • Ако наведете само један од њих, онда ће други прилагодити у складу с тим.
  • Уграђивање слика помоћу УРЛ-а

ХТМЛ вам такође пружа флексибилност у којој можете одабрати слику са другог сервера само наводећи УРЛ. Можете да користите засебни сервер да бисте угостили слике и затим их уградили помоћу УРЛ-а.

ХТМЛ слика Уграђивање слика у веб страницу  

  • Слика као веза

Слику можете користити и као везу на којој корисник може кликнути на слику и спустити се на нову веб страницу. Да бисте то урадили, морате само ставити дан у ознака.

ХТМЛ слика Уграђивање слика у веб страницу  

Такође можете прилагодити поравнање слике користећи ЦСС флоат својство. Сва својства ЦСС-а морају бити наведена у атрибуту стиле.

ХТМЛ слика Слика ће лебдети десно од текста. Слика ће лебдети лево од текста.

Ово је једна од важних карактеристика које пружа ХТМЛ. таг помаже у дефинисању мапе слике. Сигурно се питате шта је мапа слика. Мапа слика је слика са областима на које је могуће кликнути

ХТМЛ слика  

Можете и да додате позадинску слику на веб страницу. Потребно је само да користите ЦСС својство тј. Позадинску слику у стилској ознаци и додате је у ХТМЛ елемент.

ХТМЛ слика

Позадинска слика

БОДИ елемент

Овим смо дошли до краја овог блога ХТМЛ Имагес.Сада бисте након извршавања горњих исечака разумели како да уметнете слику у ХТМЛ. Надам се да је овај блог информативан и да вам додаје додатну вредност.

питхон шта је __инит__

Погледајте наш која долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Укључује обуку о веб-развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.

Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре блога „ХТМЛ Имагес“ и јавићемо вам се.