Čo sú to obrázkové značky HTML?
Nasledujúci článok poskytuje prehľad o obrázkových značkách HTML. Poznám jeho klišé, ale dovoľte mi začať tým, že poviem, že obrázok stojí za tisíc slov. V prípade webových stránok je to najmä pravda. Obrázok môže predať návštevníkovi vašu predstavu, niekoho zaujme, aby si kúpil váš produkt, a pomôže webovej stránke vyzerať oveľa lepšie. V tejto príručke sa pozrieme na to, ako môžeme pridať IMG na webové stránky a správne ich zarovnávať spolu s pridaním odkazov na ne.
Pridávanie obrázkov na webové stránky
IMG môžete pridať na HTML stránku pomocou v dokumente HTML, je tu syntax:
Tu IMG oznámi prehliadaču, že značka sa týka pridania IMG do dokumentu a „src =“ určuje, odkiaľ sa má obrázok stiahnuť.
Príklad stránky s obrázkom
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Tu je výstup kódu:
Jedným zaujímavým faktom o týchto HTML stránkach je, že keď použijete značku IMG, obrázok sa na uvedenú webovú stránku nevloží, namiesto toho vytvorí úložný priestor, do ktorého sa po stiahnutí vloží.
Podpora prehliadača a kompatibilita s atribútmi
Ako môžete očakávať, všetky moderné prehliadače podporujú obrázky a používanie značiek IMG. Mobilné prehliadače niekedy veľkosť obrázka upravia tak, aby sa zmestil na obrazovku, ak nie je nastavený ako responzívny.
Pokiaľ ide o kompatibilitu atribútov s HTML 4.01 a novším HTML5, väčšina značiek bude fungovať, s výnimkou zarovnania, orámovania, hspace a vspace, ktoré v ňom nie sú jednoducho podporované.
Obrázky ako odkaz:
Niekedy budete chcieť, aby obrázok fungoval ako odkaz na inú stránku. Môžete to dosiahnuť pridaním značky IMG do značky.
Nastavenie obrázka ako pozadia webovej stránky
Obrázok môžete priradiť k obrázku na pozadí webovej stránky pomocou vlastnosti CSS na pozadí v elemente Body na stránke.
Obrázok na pozadí
Nastavenie vznášania obrázka v prehliadači
Pomocou vlastnosti „float“ CSS môžeme nastaviť obrázok tak, aby plával vnútri kdekoľvek v okne prehľadávača. Pozrime sa na príklad, ktorý vám pomôže porozumieť.
Tu bude obrázok automobilu vznášať na pravej strane textu.
Tu bude obrázok auta plávať na ľavej strane textu.
Atribúty značky obrázka
Toto sú atribúty značky obrázka.
1) Zarovnanie
Možné hodnoty: Horná, Dolná, Stredná, Ľavá alebo Pravá.
Atribút zapaľovania sa používa na určenie zarovnania obrázka na webovej stránke.
2) Alt
Typ hodnoty: Text
Alt sa používa na určenie alternatívneho textu obrázka webovej stránky. Ak zobrazenie IMG nie je možné, prehliadač zobrazí tento text používateľovi. Vyhľadávacie nástroje ako Google a Bing používajú tento alternatívny text na zobrazenie výsledkov vo vyhľadávaní obrázkov.
3) Hraničný
Typ hodnoty: pixely
Používa sa na vytvorenie hranice užívateľom definovanej hrúbky okolo obrázka. V HTML5 to nefunguje.
4) Cross-Origin
Typ hodnoty: Anonymné používateľské poverenia
Tento atribút sa používa, keď chceme určiť, ako by sa malo zaobchádzať s fotografiami krížového pôvodu. Toto sa väčšinou používa v prípadoch, keď sa používajú prvky plátna webových aplikácií JavaScript.
5) Výška
Typ hodnoty: Percentá alebo pixely
Tento sa samozrejme používa na označenie výšky obrázka na webovej stránke HTML.
6) hspace
Typ hodnoty: pixely
V HTML5 nie je podporovaný, atribút hspace sa používa na špecifikovanie toho, v koľko pixelov sa má vľavo a vpravo od vloženého obrázka pridať.
7) ismap
Typ hodnoty: URL stránky
ismap sme použili na definovanie uvedeného obrazu ako obrazovej mapy na strane servera. Keď používateľ klikne (alebo ťukne) na obrázok, prehliadače odošlú súradnice kliknutia (alebo ťuknutia) na webový server ako URL.
8) longdesc
Typ hodnoty: URL
Longdesc sa používa na poskytnutie podrobného popisu obrázka pomocou adresy URL. URL použitá v atribúte sa používa ako popis obrázka.
9) src
Typ hodnoty: URL
src je skratka pre zdroj a používa sa na určenie adresy, z ktorej prehliadač načíta obrázok, túto adresu URL možno použiť na obrázok vo vnútri adresára na rovnakom serveri a môže tiež uložiť obrázok na server tretej strany s iný názov domény.
10) USEMAP
Typ hodnoty: #mapname
Atribút usemap sa používa na definovanie obrázka pre obrazovú mapu na strane klienta. Usemap sa vždy používa so značkami HTML máp a oblasti.
11) vspace
Typ hodnoty: pixely
Atribút Vspace, ktorý nie je podporovaný v HTML5, sa používa na nastavenie počtu pixelov, ktoré sa majú použiť ako biely priestor v hornej a dolnej časti obrázka na webovej stránke.
12) Šírka
Typ hodnoty: pixely
Tak ako naznačuje jeho názov, atribút width sa používa na určenie šírky obrázka vo vnútri webovej stránky HTML.
Záver - Značky obrázkov HTML
Keď sa teraz pozrieme na to, ako sa obrázky pridávajú na stránky HTML a ako nastavujeme ich atribúty, môžeme vo webovom projekte vytvoriť atraktívne vyzerajúce webové stránky.
Okrem pridania vizuálnej atmosféry na webovú stránku sú obrázky cenné, pretože pomáhajú aj pri optimalizácii vyhľadávacích nástrojov. Pridanie správnych značiek a popisov k obrázkom pomôže vyhľadávacím nástrojom lepšie porozumieť obsahu webovej stránky a v mnohých prípadoch zlepšuje hodnotenie webovej stránky.
Odporúčané články
Toto je sprievodca značkami obrázkov HTML. Tu diskutujeme o atribútoch obrázkovej značky spolu s podporou prehliadača a kompatibilitou s atribútmi. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- Jednoduchý sprievodca príkazmi HTML
- Úvod do toho, čo je XHTML?
- Výukové programy o atribútoch HTML
- Aplikácie a najčastejšie použitia HTML
- Rôzne štýly zoznamu v HTML
- Rámčeky HTML
- Bloky HTML