Što su HTML slike i kako izmijeniti vašu web stranicu?



Ovaj će vam članak pružiti detaljno i sveobuhvatno znanje o HTML slikama i kako ih ne možete dodavati i mijenjati kako bi vaša web stranica izgledala dobro.

Slike su vrlo važan dio web stranice jer poboljšava izgled web stranice i povećava interakciju s kupcima. USP više web stranica je način na koji organiziraju različite slike na svojim web stranicama i dodaju im okuse. U ovome Članak Slike, razumjet ćemo kako ugraditi slike u web stranicu pomoću HTML-a sljedećim redoslijedom:

Kako dodati sliku u HTML

Ugrađivanje slike u web stranicu daje vam HTML označiti. Još jedna važna stvar koju treba zapamtiti je, nema završnu oznaku. scr atribut se koristi za specificiranje putanje slike, što može biti url ili put slike do sustava / poslužitelja. Krenimo prvo s osnovnom sintaksom ugrađivanja slike u web stranicu pomoću HTML-a.





Sintaksa

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Uzorak koda



HTML slika ugrađivanje slika u web stranicu  

Slično drugim oznakama, s raznim su atributima povezani označiti. Pogledajmo svakog od njih jednog po jednog, shvatimo njihove potrebe i kako ih koristiti.

Oznake HTML slika

  • alt Atribut

Atribut alt je zamjenski tekst slike. Razlog zašto je uveden atribut alt je taj što se zbog bilo kojeg razloga slika nije mogla učitati, tada bi se trebao pojaviti zamjenski tekst koji daje ideju o slici. Razlozi zbog kojih se slika ne učitava mogu biti spora internet veza ili slika ne nalazi se u navedenom izvoru itd.



Ako se slika nalazi u istoj mapi u kojoj je HTML datoteka, možete izravno odrediti naziv datoteke. U suprotnom, morate navesti apsolutni put do slikovne datoteke.

Vrijednost alt atributa trebala bi opisivati ​​sliku.

Primjer

 Edureka Logo
HTML slika ugrađivanje slika u web stranicu edureka logo 

Vodiči za SQL poslužitelje za početnike
  • Širina i visina slike

Atribut style koristi se za postavljanje visine i širine slike. U atributu style navodite CSS stil.

HTML slika ugrađivanje slika u web stranicu  

Neke važne točke prilikom ugrađivanja slike u web stranicu pomoću HTML-a su:

  • Atributi širine i visine definirani su u pikselima.
  • Također možete definirati širinu i visinu slike u postocima. Razmatrat će postotak prema cijeloj web stranici.
   
  • Ako navedete samo jedan od njih, on će prilagoditi drugi u skladu s tim.
  • Ugrađivanje slika pomoću URL-a

HTML vam također pruža fleksibilnost u kojoj možete odabrati sliku s drugog poslužitelja samo određivanjem URL-a. Možete koristiti zasebni poslužitelj za hostiranje slika i zatim ih umetnuti pomoću URL-a.

HTML slika ugrađivanje slika u web stranicu  

  • Slika kao poveznica

Sliku možete koristiti i kao vezu na kojoj korisnik može kliknuti na sliku i sletjeti na novu web stranicu. Da biste to učinili, jednostavno morate staviti dan u označiti.

HTML slika ugrađivanje slika u web stranicu  

Također možete prilagoditi poravnanje slike pomoću svojstva CSS float. Sva svojstva CSS-a moraju biti navedena u atributu style.

HTML slika Slika će plutati desno od teksta. Slika će plutati lijevo od teksta.

Ovo je jedna od važnih značajki koje pruža HTML. Oznaka pomaže u definiranju mape slike. Sigurno se pitate što je to slikovna karta. Mapa slike je slika s područjima na koja je moguće kliknuti

HTML slika  

Također možete dodati pozadinsku sliku na web stranicu. Jednostavno morate upotrijebiti svojstvo CSS, tj. Pozadinsku sliku u stilskoj oznaci i dodati je u HTML element.

miješanje podataka tablice lijevo spajanje
HTML slika

Pozadinska slika

TIJELO element

Ovim smo došli do kraja ovog bloga HTML Images.Sada biste nakon izvršavanja gornjih isječaka razumjeli kako umetnuti sliku u HTML. Nadam se da je ovaj blog informativan i da vam dodaje dodanu vrijednost.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare na blogu 'HTML Images' i javit ćemo vam se.