Да ли желите да убаците слику на своју веб страницу, али не знате како да прилагодите његову величину тако да одговара дизајну? Да ли желите да научите како да користите ХТМЛ ознаке и атрибуте да бисте променили ширину и висину слике? Да ли знате предности и недостатке сваке методе? Ако је одговор да, овај чланак је за вас.
У овом чланку, Научићемо вас како да прилагодите величину слике у хтмл-у, користећи различите опције и ресурсе који ће вам омогућити да креирате атрактивне и оптимизоване слике за своју веб локацију. Такође ћемо вам показати предности и недостатке сваке опције, као и неке савете и добре праксе за побољшање вашег рада.
Шта је слика у хтмл-у и како је уметнути
Слика у хтмл-у је елемент који вам омогућава да прикажете визуелни приказ објекта, особу, пејзаж или било шта друго. За уметање слике у хтмл користи се ознака , што је празна ознака, тј. која нема затварања.
Етикета има неколико атрибута који вам омогућавају да наведете информације и карактеристике слике. Најважније су:
- срц: је атрибут који указује на путању или адресу сликовне датотеке. То може бити релативан пут (унутар исте веб локације) или апсолутну путању (на другој веб локацији). На пример: било .
- алт: је атрибут који означава алтернативни текст слике, односно текст који се приказује када се слика не може учитати или се користи читач екрана. То је обавезан атрибут и мора описати садржај или функцију слике. На пример: .
- наслов: је атрибут који означава наслов слике, односно текст који се приказује када се курсор помери о слици. То је опциони атрибут и може се разликовати од алтернативног текста. На пример: .
Како прилагодити величину користећи атрибуте ширине и висине
Један од најлакших начина за подешавање величине слике у хтмл-у је коришћење атрибута ширине и висине) који вам омогућавају да одредите ширину и висину слике у пикселима. На пример:
Ови атрибути имају неке предности и недостатке:
- Предности:
- Једноставни су за употребу и не захтевају додатно знање.
- Они вам омогућавају да резервишете неопходан простор за слику пре него што је учитате, што спречава да страница скаче или мења током учитавања.
- даје вам могућност прилагодите величину слике дизајну странице без потребе да мењате оригиналну датотеку.
- Недостаци:
- Они могу изобличити однос ширине и висине слике или квалитет слике ако се користе вредности различите од оригиналне величине.
- Не дозвољава подешавање величине слике према величини екрана или уређаја корисника.
- Не дозвољавају примену ефеката или додатне стилове слике.
Како променити величину слике у хтмл-у користећи ЦСС
Други начин напреднији и флексибилнији Подешавање величине слике у ХТМЛ-у је коришћење ЦСС-а (Каскадни листови стилова), који је језик који вам омогућава да дефинишете и примените стилове на ХТМЛ елементе. Да бисте користили ЦСС, можете користити ознаку унутар хтмл документа, спољна датотека са екстензијом .цсс. На пример:
img { width: 500px; height: 600px; } било
Коришћење ЦСС-а има неке предности и недостатке:
- Предности:
- Омогућава вам да пропорционално прилагодите величину слике, користећи својство уклапања објекта или функцију цалц().
- Хајде да прилагодимо величину слике у зависности од величине екрана или уређаја корисника, користећи релативне јединице (%, ем, вв, вх) или медијске упите.
- Додатни ефекти или стилови се могу применити на слику, као што су ивице, сенке, филтери или трансформације.
- Недостаци:
- Захтева веће познавање и владање ЦСС језика.
- Може изазвати сукобе или недоследности са другим стиловима примењеним на страницу или слику.
- То може утицати на перформансе или брзину учитавања странице ако се користи превише стилова или ефеката.
Како прилагодити величину помоћу екстерног програма
Трећа опција за подешавање величине слике у хтмл-у је коришћење екстерног програма који вам омогућава да измените величину датотеке слике пре него што је убаците на страницу. Неки од ових програма су:
- ГИМП: је бесплатан програм отвореног кода који вам омогућава да професионално уређујете и манипулишете сликама. Помоћу ГИМП-а можете променити величину слике Користећи опцију „Сцале Имаге“. из менија „Слика“. Такође можете оптимизовати тежину и квалитет слике користећи опцију „Извези као“ у менију „Датотека“. ГИМП можете преузети са његове званичне веб странице.
- Пхотосхоп: је плаћени програм за препоруке који вам омогућава да креирате и уређујете слике на напредан начин. Са Пхотосхопом можете променити величину слике користећи опцију „Величина слике“ у менију „Слика“. Такође можете оптимизовати тежину и квалитет слике користећи опцију „Сачувај за веб“. из менија „Датотека“. Пхотосхоп можете преузети са његовог званичног сајта.
- Промена величине слике на мрежи: је бесплатна онлајн алатка која вам омогућава да промените величину слике без потребе да инсталирате било који програм. Помоћу Онлине Имаге Ресизер-а можете да отпремите слику са свог рачунара или са УРЛ-а, изаберите жељену ширину и висину и преузмите измењену слику. Можете приступити Онлине Имаге Ресизер-у са његове званичне веб странице.
Подесите слику онако како желите
У овом чланку показали смо вам како да прилагодите величину слике у ХТМЛ-у, користећи различите опције и ресурсе који ће вам омогућити да креирате атрактивне и оптимизоване слике за своју веб локацију. Такође смо вам показали предности и недостатке сваке опције, као и неколико савета и добрих пракси да побољшате свој рад.
Надамо се да вам је овај чланак био користан и да вас охрабрујемо да испробате ове опције и ресурсе да бисте прилагодили величину слике у ХТМЛ-у. Запамтите да је најважније изабрати опција која најбоље одговара вашим потребама и циљевима.
Ако вам се допао овај чланак, поделите га са својим пријатељима. А ако желите да сазнате више савета и трикова о хтмл-у и другим апликацијама, посетите нашу веб страницу. Видимо се!