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
HTML slika ugrađivanje slika u web stranicu
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
- Slika pluta
Također možete prilagoditi poravnanje slike pomoću svojstva CSS float. Sva svojstva CSS-a moraju biti navedena u atributu style.
HTML slika
- Karte slika
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
- Pozadinska 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 slikaPozadinska 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.