Mi a HTML képcímkék?
A következő cikk körvonalazza a HTML képcímkéket. Tudom a közhelyét, de hadd kezdjem azzal, hogy egy kép ezer szó értékű. A weboldalak esetében ez különösen igaz. Egy kép eladhatja a látogatót az ötleteddel, lenyűgözheti valakit, hogy megvásárolja a terméket, és ez segíthet egy weboldal sokkal jobb megjelenésében. Ebben az útmutatóban megvizsgáljuk, hogyan lehet az IMG-t hozzáadni a weboldalakhoz, és hogyan igazíthatjuk őket megfelelően, a linkek hozzáadásával.
Képek hozzáadása a weboldalakhoz
Az IMG-t hozzáadhat egy HTML oldalhoz a címkét a HTML dokumentumban, itt van a szintaxis:
Itt az IMG azt mondja a böngészőnek, hogy a címke az IMG hozzáadása a dokumentumhoz, és az “src =” meghatározza, ahonnan töltse le a képet.
Példa egy képpel ellátott oldalra
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Itt van a kód kimenete:
Érdekes tény ezekről a HTML-oldalakról az, hogy amikor az IMG-tagot használják, a képet nem helyezik be az említett weboldalra, hanem egy tartóhelyet hoz létre, ahol a képet a letöltés után elhelyezik.
Böngésző-támogatás és az attribútumokkal való kompatibilitás
Mint várható, minden modern böngésző támogatja a képeket és az IMG-címkék használatát. Időnként a mobil böngészők átméretezik a képet, hogy a képernyőn illeszkedjen, ha a kép nincs beállítva érzékenynek.
Az attribútumok HTML 4.01-vel és az újabb HTML5-kel való kompatibilitásakor a legtöbb címke működni fog, kivéve az igazítást, a border, a hspace és az vspace-t, amelyeket az utóbbi egyszerűen nem támogat.
Képek linkként:
Előfordulhat, hogy egy kép hivatkozásként működik egy másik oldalra. Ezt megteheti, ha hozzáteszi az IMG-címkét a címkébe.
Kép beállítása egy weboldal hátteréül
A képet a weblap háttérképének hozzárendeléséhez használja az oldal Test eleme háttérkép CSS tulajdonságát.
Háttérkép
A kép úszó beállítása a böngészőben
A CSS „float” tulajdonságával beállíthatjuk, hogy egy kép a böngészőablak bárhová lebegjen. Vessen egy pillantást egy példára, amely segít megérteni.
Itt az autó képe a szöveg jobb oldalán lebeg.
Itt az autó képe a szöveg bal oldalán lebeg.
A képcímke tulajdonságai
Az alábbiakban látható egy képcímke attribútumai.
1) Align
Lehetséges értékek: felső, alsó, középső, bal vagy jobb.
Az alight attribútum a kép igazításának megadására szolgál a weboldalon.
2) Alt
Érték típusa: Szöveg
Az Alt az egy weboldal képének alternatív szövegének meghatározására szolgál. Azokban az esetekben, amikor az IMG megjelenítése nem lehetséges, a böngésző megjeleníti ezt a szöveget a felhasználó számára. Az olyan keresőmotorok, mint a Google és a Bing, ezt az alt szöveget használják az eredmények megjelenítéséhez a Képkeresésben.
3) Határ
Érték típusa: pixel
A kép a felhasználó által meghatározott vastagságú szegély létrehozására szolgál. Ez nem működik a HTML5-ben.
4) Kereszt-Origin
Érték típusa: Anonim felhasználás - hitelesítő adatok
Ezt az attribútumot akkor használják, amikor meg akarjuk határozni, hogy miként kell kezelni a származási helyről származó fényképeket. Ezt leginkább azokban az esetekben használják, amikor a JavaScript webes alkalmazások vászon elemeit használják.
5) Magasság
Érték típusa: Százalék vagy képpont
Nyilvánvalóan ezt használják a kép magasságának jelölésére a HTML weboldalon.
6) hspace
Érték típusa: pixel
A HTML5 nem támogatja a hspace attribútumot pixelekben annak meghatározására, hogy mennyi fehér helyet kell hozzáadni a beillesztett kép bal és jobb oldalához.
7) ismap
Érték típusa: egy oldal URL-je
ismap, amelyet az említett kép kiszolgálóoldali képtérképként definiálunk. Amikor a felhasználó a képen belül rákattint (vagy megérinti), a böngészők URL-címként elküldik a kattintás (vagy megérintés) koordinátáit a webszerverre.
8) longdesc
Érték típusa: URL
A Longdesc segítségével egy képet URL-cím segítségével részletesen leírnak. Az attribútumban használt URL-t használják a kép leírására.
9) SRC
Érték típusa: URL
Az src a forrást jelenti, és annak a címnek a meghatározására szolgál, ahonnan a böngésző lekérdezi a képet, ez az URL alkalmazható egy képre ugyanazon kiszolgáló könyvtárában, és képes képet tárolni egy harmadik fél szerverén is. egy másik domain név.
10) usemap
Érték típusa: # térképnév
A usemap attribútumot a kép meghatározásához használjuk az ügyféloldali képtérképhez. A használati térképet mindig a térkép és a terület HTML címkékkel használják.
11) vSpace
Érték típusa: pixel
A HTML5 nem támogatja a Vspace attribútumot annak a pixelnek a számához, amelyet üres helyként kell használni a weboldal kép tetején és alján.
12) szélessége
Érték típusa: pixel
Ahogy a neve is sugallja, a szélesség-attribútumot egy kép szélességének meghatározására használják a HTML weboldalon.
Következtetés - HTML képcímkék
Most, hogy megvizsgáltuk, hogyan épülnek fel képek a HTML-oldalakhoz, és hogyan állíthatjuk be azok attribútumait, vonzó megjelenésű weboldalakat tudunk létrehozni egy webprojektben.
Amellett, hogy a weboldalhoz csak vizuális érzetet ad, a képek is értékesek, mert segítenek a keresőmotorok optimalizálásában is. A képekhez megfelelő alt-címkék és leírások hozzáadásával a keresőmotorok jobban megértik a weboldal tartalmát, és sok esetben javítják a weboldal rangsorolását.
Ajánlott cikkek
Ez egy útmutató a HTML képcímkékhez. Itt tárgyaljuk a képcímke tulajdonságait, valamint a böngésző támogatását és az attribútumokkal való kompatibilitást. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- Egyszerű útmutató a HTML parancsokhoz
- Bevezetés mi az XHTML?
- Oktatóanyagok a HTML attribútumokról
- Alkalmazások és a HTML legfontosabb felhasználásai
- Különböző listastílusok a HTML-ben
- HTML keretek
- HTML blokkok