Što su oznake HTML slike?
Sljedeći članak sadrži pregled HTML HTML oznaka. Znam da je to kliše, ali za početak reći ću da slika vrijedi tisuću riječi. U slučaju web stranica, to posebno vrijedi. Slika može posjetitelju prodati vašu ideju, impresionirati nekoga da kupi vaš proizvod i to može pomoći da web stranica izgleda toliko bolje. U ovom ćemo vodiču pogledati kako možemo dodati IMG na web stranice i pravilno ih poravnati zajedno s dodavanjem veza do njih.
Dodavanje slika na web stranice
IMG možete dodati na HTML stranicu koristeći u HTML dokumentu, ovdje je sintaksa:
Ovdje IMG kaže pregledniku da je oznaka dodavanje IMG dokumentu, a "src =" određuje odakle treba preuzeti sliku.
Primjer stranice sa slikom
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Evo rezultata koda:
Jedna zanimljiva činjenica o ovim HTML stranicama je da kad koristite IMG oznaku, slika se ne umetne na navedenu web stranicu, umjesto toga stvara prostor za zadržavanje gdje se slika postavlja nakon što je preuzme.
Podrška preglednika i kompatibilnost s atributima
Kao što možete očekivati, svi moderni preglednici podržavaju slike i upotrebu IMG oznaka. Ponekad će mobilni preglednici promijeniti veličinu slike kako bi se uklopila na zaslon ako slika nije postavljena kao responzivna.
Kada je u pitanju kompatibilnost atributa s HTML 4.01 i novijim HTML5, većina će oznaka raditi, osim za poravnavanje, obrub, hspace i vspace koji u potonjem jednostavno nisu podržani.
Slike kao poveznica:
Doći će vrijeme kada želite da slika djeluje kao poveznica na drugu stranicu. To možete učiniti dodavanjem oznake IMG unutar oznake.
Postavljanje slike kao pozadine web stranice
Slici možete dodijeliti kao pozadinsku sliku web stranice pomoću CSS svojstva pozadinske slike u elementu Body u stranici.
Pozadinska slika
Postavljanje slike da lebdi u pregledniku
Pomoću CSS svojstva "plutamo" možemo koristiti za postavljanje slike koja će lebdjeti bilo gdje u prozoru preglednika. Pogledajmo primjer koji će vam pomoći u razumijevanju.
Ovdje će slika automobila lebdjeti na desnoj strani teksta.
Ovdje će slika automobila lebdjeti na lijevoj strani teksta.
Atributi slikovne oznake
Slijede atributi slikovne oznake.
1) Poravnavanje
Moguće vrijednosti: gore, dolje, u sredini, ulijevo ili udesno.
Attit atribut koristi se za određivanje poravnanja slike na web stranici.
2) Alt
Vrsta vrijednosti: Tekst
Alt se koristi za određivanje alternativnog teksta slike web stranice. U slučajevima kada prikaz IMG-a nije moguć, preglednik će ovaj tekst prikazati korisniku. Tražilice poput Googlea i Bing koriste ovaj alt tekst za prikaz rezultata u pretraživanju slika.
3) obruba
Vrijednost tipa: piksela
Koristi se za stvaranje obruba definirane od strane korisnika debljine oko slike. Ne radi u HTML5.
4) cross-Porijeklo
Vrijednost tipa: anonimna upotreba-vjerodajnice
Ovaj se atribut koristi kada želimo odrediti kako se s fotografijama križnog podrijetla treba postupati. Najčešće se koristi u slučajevima kada se koriste elementi platna JavaScript web-aplikacija.
5) Visina
Vrijednost vrste: Postotak ili piksela
Očito se ovaj koristi za označavanje visine slike na HTML web stranici.
6) hspace
Vrijednost tipa: piksela
Ako nije podržan u HTML5, atribut hspace koristi se za određivanje u pikselima koliko bijelog prostora treba dodati lijevoj i desnoj strani umetnute slike.
7) ismap
Vrsta vrijednosti: URL stranice
ismap koji koristimo za definiranje navedene slike kao mape slike na strani poslužitelja. Kad korisnik klikne (ili dodirne) unutar slike, preglednici šalju koordinate klika (ili dodirivanja) na web poslužitelj kao URL.
8) longdesc
Vrijednost vrste: URL
Longdesc se koristi za detaljni opis slike pomoću URL-a. URL koji se koristi u atributu koristi se kao opis slike.
9) src
Vrijednost vrste: URL
src označava izvor i koristi se za određivanje adrese s koje će preglednik dohvatiti sliku, ovaj se URL može primijeniti na sliku unutar mape na istom poslužitelju, a može pohraniti i sliku na trećem poslužitelju sa drugo ime domene.
10) usemap
Vrijednost vrste: #mapname
Atribut usemap koristi se za definiranje slike za mapu slike na strani klijenta. Uvijek se koristi upotrebna mapa sa HTML oznakama na karti i području.
11) vspace
Vrijednost tipa: piksela
Ako nije podržan u HTML5, atribut Vspace upotrebljava se za postavljanje broja piksela koji će se koristiti kao bijeli prostor pri vrhu i dnu slike na web stranici.
12) Širina
Vrijednost tipa: piksela
Kao što mu ime govori, atribut širine koristi se za određivanje širine slike unutar HTML web stranice.
Zaključak - Oznake HTML slike
Sada kada smo pogledali kako se slike dodaju na HTML stranice i kako postaviti njihove atribute, u web projektu možemo stvoriti atraktivne web stranice.
Osim što samo dodaju vizualni njuh web stranici, slike su korisne jer pomažu i u optimizaciji tražilice. Dodavanje odgovarajućih alt oznaka i opisa slikama pomaže tražilicama da bolje razumiju sadržaj web stranice i poboljšaju poredak web stranice u mnogim slučajevima.
Preporučeni članci
Ovo je vodič za HTML slike. Ovdje raspravljamo o atributima slikovne oznake, uz podršku preglednika i kompatibilnost s atributima. Možete također pogledati sljedeće članke da biste saznali više -
- Jednostavan vodič za HTML naredbe
- Uvod u ono što je XHTML?
- Vodiči za atribute HTML
- Aplikacije i najpopularnija primjena HTML-a
- Različiti stilovi popisa u HTML-u
- HTML okviri
- HTML Blokovi