Kako umetnuti sliku u HTML na web-lokaciji

10. 3. 2020.

Dodavanje slika na web-lokaciju ili profil društvene mreže sjajan je način za ukrašavanje stranice. HTML (Hypertext Markup Language) odlikuje se velikim brojem značajki web razvoja, a kod koji je potreban za dodavanje slika je vrlo jednostavan.

kako umetnuti sliku u html

Dakle, kako umetnuti sliku u HTML?

Prenesite svoju sliku na besplatnu web-lokaciju za hosting slika, kao što su Photobucket ili TinyPic, koja omogućuje stalan pristup preuzetoj datoteci. Nakon kopiranja link na sliku će se pojaviti izravno na web hosting. Međutim, ako plaćate vrhunske usluge takve usluge, bolje je koristiti dodatne značajke. To je pouzdanije, jer u slobodnom hostingu slika, slike se ponekad ne otvaraju zbog preopterećenja. Nakon što ste učitali sliku u neku od mrežnih usluga, otvorite novi dokument na računalu u uređivaču teksta (na primjer, u Notepadu) ili idite na ploču za uređivanje željene stranice svoje web-lokacije (gdje možete promijeniti HTML kod).

html kako umetnuti sliku

Pisanje oznaka

Nastavljajući razgovarati o tome kako umetnuti sliku u HTML, započnite s IMG oznakom. Nakon toga, prije završnog znaka, morate dodati razmak i znak crtice. Stoga morate birati sljedeću kombinaciju - <img />. Osim toga, postoji mnogo atributa koji su dostupni, ali samo je jedan od njih apsolutno neophodan. Ovo je adresa ili URL vaše slike. Navedeno je na sljedeći način - <img src = "URL_ vaše slike" />.

Alternativni tekst

Zatim, pokušavajući umetnuti sliku u HTML, morate dodati Alt atribut. Time se definira alternativni tekst u slučaju da se slika ne učita. Takav je tekst namijenjen i slabovidnim korisnicima koji koriste čitače zaslona. Ako lebdite pokazivač miša na slici, alternativni tekst pojavit će se u opisu alata, ali ta je značajka prisutna samo u programu Internet Explorer. Da biste je vidjeli u drugim aplikacijama, trebat će vam posebne dodatke. Za unos takvog opisa alata, unesite ga uz Alt. (Ovaj korak možete dodatno preskočiti). Ako koristite ovu značajku, veza će izgledati ovako:

<img src = "URL_your_of_article" alt = "pop-up_text" "title =" Tooltip "/>

umetnite sliku u html

Veličine i parametri slike

Nastavljajući slijediti upute o tome kako umetnuti sliku u HTML, možete dodatno odrediti veličinu slike koristeći atribute visine i širine koji označavaju u pikselima ili u postocima. Imajte na umu da će slika biti prikazana zbog promjene veličine prilikom podizanja sustava. Preglednik će u početku i dalje koristiti stvarnu veličinu slike. Zbog toga, ako je vaša slika prevelika, bolje je da je promijenite. veličine pomoć programi za uređivanje fotografija a ne samo adresu veze. Sada bi vaš kôd mogao izgledati ovako:

<img src = "URL vaše slike" alt = "texttip tekst" title = "Opis alata" height = "50%" width = "50%" />

<img src = "URL vaše slike" alt = "texttip tekst" title = "Opis alata" height = "25px" width = "50px" />

Ostali atributi

Vrijednost za te atribute je ili pozitivna vrijednost piksela ili postotak s izvornikom (1-100%). Govoreći o tome kako umetnuti sliku u HTML, također možete primijetiti da se može postaviti bilo gdje na web-stranici s atributom poravnanja - vrh, dno, sredina, desno, lijevo itd. Atribut HSPACE koristi se za umetanje slika vodoravno s lijeve i desne strane, VSPACE - za učitavanje okomito između vrha i dna stranice i relativno prema drugom sadržaju. Ako govorimo općenito o HTML-u - kako umetnuti sliku i kako dodati sadržaj na stranicu, glavno je da ne pretjerate. Inače, vaš resurs će izgledati neuredno i previše "šareno". GIF će biti najbolje rješenje za prikazivanje logotipa ili animacija, a JPEG je prikladniji za visokokvalitetne slike i fotografije.