Co je to HTML Image Tags?
Následující článek poskytne přehled obrysových značek HTML. Znám jeho klišé, ale dovolte mi začít tím, že obrázek má hodnotu tisíc slov. V případě webových stránek to platí zejména. Obrázek může návštěvníka prodat s vaším nápadem, někoho zaujme, aby si koupil váš produkt, a může pomoci webové stránce vypadat mnohem lépe. V této příručce se podíváme na to, jak můžeme přidat IMG na webové stránky a jak je správně zarovnat spolu s přidáním odkazů na tyto stránky.
Přidávání obrázků na webové stránky
IMG můžete přidat na HTML stránku pomocí tag v dokumentu HTML, zde je syntax:
Zde IMG prozradí prohlížeči, že značka se týká přidání IMG do dokumentu a „src =“ určuje, odkud se má obrázek stáhnout.
Příklad stránky s obrázkem
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Zde je výstup kódu:
Jedním zajímavým faktem o těchto HTML stránkách je, že když používáte značku IMG, obrázek se na uvedenou webovou stránku nevloží, místo toho vytvoří úložný prostor, kam se po stažení stáhne.
Podpora prohlížeče a kompatibilita s atributy
Jak můžete očekávat, všechny moderní prohlížeče podporují obrázky a použití značek IMG. Mobilní prohlížeč někdy změní velikost obrázku tak, aby se vešel na obrazovku, pokud není nastaven jako citlivý.
Pokud jde o kompatibilitu atributů s HTML 4.01 a novějším HTML5, bude fungovat většina značek, s výjimkou zarovnání, ohraničení, hspace a vspace, které v posledně uvedeném nejsou podporovány.
Obrázky jako odkaz:
Budou časy, kdy budete chtít, aby obrázek fungoval jako odkaz na jinou stránku. To lze dosáhnout přidáním značky IMG do značky.
Nastavení obrázku jako pozadí webové stránky
Obrázek můžete přiřadit jako obrázek na pozadí webové stránky pomocí vlastnosti CSS na pozadí v prvku Tělo stránky.
Obrázek na pozadí
Nastavení plovoucího obrázku v prohlížeči
Pomocí vlastnosti „float“ CSS můžeme nastavit obrázek tak, aby se vznášel uvnitř kdekoli v okně prohlížeče. Pojďme se podívat na příklad, který vám pomůže pochopit.
Zde bude obrázek automobilu vznášet na pravé straně textu.
Zde bude obrázek automobilu vznášet na levé straně textu.
Atributy značky obrázku
Toto jsou atributy značky obrázku.
1) Zarovnejte
Možné hodnoty: Horní, Dolní, Střední, Levá nebo Pravá.
Atribut ALight se používá k určení zarovnání obrázku na webové stránce.
2) Alt
Typ hodnoty: Text
Alt se používá k určení alternativního textu obrázku webové stránky. V případech, kdy zobrazení IMG není možné, prohlížeč zobrazí tento text uživateli. Vyhledávací stroje jako Google a Bing používají tento alt text k zobrazování výsledků ve Vyhledávání obrázků.
3) Hranice
Typ hodnoty: Pixely
Používá se k vytvoření ohraničení uživatelem definované tloušťky kolem obrázku. V HTML5 nefunguje.
4) Křížový původ
Typ hodnoty: Anonymní identifikační údaje
Tento atribut se používá, když chceme určit, jak by se mělo nakládat s fotografiemi křížového původu. To se většinou používá v případech, kdy se používají prvky plátna webových aplikací JavaScriptu.
5) Výška
Typ hodnoty: Procenta nebo Pixely
Tento se samozřejmě používá k označení výšky obrázku na webové stránce HTML.
6) hspace
Typ hodnoty: Pixely
V HTML5 není podporován atribut hspace, který v pixelech určuje, kolik bílého prostoru má být přidáno vlevo a vpravo od vloženého obrázku.
7) ismap
Typ hodnoty: URL stránky
ismap jsme použili k definování uvedeného obrazu jako obrazové mapy na straně serveru. Když uživatel klepne (nebo klepne) uvnitř obrázku, prohlížeče odešlou souřadnice kliknutí (nebo klepnutí) na webový server jako URL.
8) Longdesc
Typ hodnoty: URL
Longdesc se používá k poskytnutí podrobného popisu obrázku pomocí adresy URL. URL použitá v atributu se používá jako popis obrázku.
9) src
Typ hodnoty: URL
src je zkratka pro zdroj a používá se k určení adresy, ze které prohlížeč načte obrázek, tuto adresu URL lze použít na obrázek uvnitř adresáře na stejném serveru a může také uložit obrázek na server třetí strany s jiné doménové jméno.
10) usemap
Typ hodnoty: #mapname
Atribut usemap se používá k definování obrázku pro obrazovou mapu na straně klienta. Usemap se vždy používá se značkami HTML mapy a oblasti.
11) vspace
Typ hodnoty: Pixely
Nepodporovaný v HTML5, atribut Vspace se používá k nastavení počtu pixelů, které mají být použity jako bílé znaky v horní a dolní části obrázku na webové stránce.
12) Šířka
Typ hodnoty: Pixely
Stejně jako název napovídá, atribut width se používá k určení šířky obrázku uvnitř webové stránky HTML.
Závěr - obrazové značky HTML
Nyní, když jsme se podívali na to, jak jsou obrázky přidávány na stránky HTML a jak nastavovat jejich atributy, můžeme ve webovém projektu vytvořit atraktivní vypadající webové stránky.
Kromě pouhého přidání vizuální atmosféry na webovou stránku jsou obrázky cenné, protože také pomáhají při optimalizaci vyhledávače. Přidání správných alternativních značek a popisů k obrázkům pomáhá vyhledávacím strojům lépe porozumět obsahu webové stránky a v mnoha případech zlepšuje hodnocení webové stránky.
Doporučené články
Toto je průvodce značkami obrázků HTML. Zde diskutujeme o atributech obrázkové značky spolu s podporou prohlížeče a kompatibilitou s atributy. Další informace naleznete také v následujících článcích -
- Jednoduchý průvodce příkazy HTML
- Úvod do toho, co je XHTML?
- Výukové programy o atributech HTML
- Aplikace a nejlepší využití HTML
- Různé styly seznamu v HTML
- Rámce HTML
- Bloky HTML