Mezi volitelné atributy značky img patří: HTML tagy pro vkládání obrázků, obrázků v HTML

Štítek IMG určené k zobrazování obrázků na webové stránce v grafické podobě formát GIF, JPEG nebo PNG. Tato značka má jeden povinný parametr src , který určuje adresu souboru s obrázkem. V případě potřeby lze výkres vytvořit odkazem na jiný soubor umístěním značky IMG do kontejneru A. Zároveň se kolem obrázku zobrazí ohraničení, které lze odstranit přidáním parametru border=0 do tagu IMG.

Obrázky lze také použít jako obrázkové mapy, kde obrázek obsahuje aktivní body, které fungují jako odkazy. Taková mapa vzhled se neliší od běžného obrázku, ale zároveň jej lze rozdělit do neviditelných zón různých tvarů, kde každá z oblastí slouží jako spojnice.

Syntax

Uzavírací štítek
Není vyžadováno.

Možnosti
zarovnat – určuje, jak bude obrázek zarovnán podél okraje a jak se bude text obtékat.
alt - alternativní text pro obrázek.
border - tloušťka rámečku kolem obrázku.
výška - výška obrázku.
hspace - horizontální prostor od obrázku k okolnímu obsahu.
ismap – sděluje prohlížeči, že obrázek je obrázková mapa na straně serveru.
lowsrc - cesta ke grafickému souboru s nízkým rozlišením pro předběžné zobrazení.
src - cesta ke grafickému souboru.
vspace - vertikální prostor od obrázku k okolnímu obsahu.
šířka - šířka obrázku.
usemap - odkaz na značku MAP obsahující souřadnice pro obrazovou mapu klienta.

Příklad 1: Použití značky IMG

Lorem ipsum dolor sit amet...

Popis parametrů IMG tagu

Parametr ALIGN

Popis
U obrázků můžete určit jejich polohu vzhledem k textu nebo jiným obrázkům na webové stránce. Způsob zarovnání obrázků je určen parametrem zarovnání tagu IMG.

Syntax

Argumenty
Tabulka 1 uvádí možné hodnoty parametru align a výsledek jeho použití.

Nejoblíbenější možnosti jsou vlevo a vpravo , které vytvářejí obtékání textu kolem obrázku. Aby text těsně nezapadal do obrázku, doporučuje se přidat do značky IMG parametry hspace a vspace, které určují vzdálenost k textu v pixelech.

Přestože všechny hodnoty parametru align jsou podporovány prohlížeči, argumenty absbottom , absmiddle , baseline a texttop nejsou ve specifikaci HTML 4 popsány.

Výchozí hodnota
dno

Příklad 2: Zarovnání obrázku

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Parametr ALT

Popis
Parametr alt nastavuje alternativní text pro obrázky. Tento text vám umožní získat textové informace o kresbě, když je v prohlížeči zakázáno načítání obrázků. Protože se obrázky načítají poté, co o nich prohlížeč obdrží informace, náhradní text obrázku se zobrazí dříve. A při načítání bude text nahrazen obrázkem.

Prohlížeče také zobrazují alternativní text jako nápovědu, když najedete myší na obrázek.

Syntax

Argumenty
Jakýkoli vhodný textový řetězec. Musí být uzavřen ve dvojitých nebo jednoduchých uvozovkách.

Výchozí hodnota
Žádný.

Příklad 3: Přidání alternativního textu

alt="Zpět na hlavní stránku" !}>

parametr BORDER

Popis
Obrázek umístěný na webové stránce lze umístit do rámečku s různou šířkou. To se provádí pomocí parametru border tagu IMG. Ve výchozím nastavení není kolem obrázku žádné ohraničení, pokud obrázek není odkazem. Barva ohraničení v tomto případě odpovídá barvě textu zadané pomocí parametru stylu nebo textu tagu BODY.

Syntax

Argumenty

Výchozí hodnota
0

Příklad 3. Rámeček kolem obrázku

zelený rámeček o tloušťce 2 pixelů

Parametry HEIGHT a WIDTH

Popis
Chcete-li změnit velikost obrázku pomocí HTML, jsou k dispozici parametry width a height. Můžete použít hodnoty v pixelech nebo procentech. Pokud je nastaveno procentuální zadání, pak se rozměry obrázku počítají vzhledem k nadřazenému prvku – kontejneru, kde je umístěn tag IMG. Pokud nadřazený kontejner neexistuje, chová se jako něj okno prohlížeče. Jinými slovy width=100% znamená, že obrázek bude roztažen přes celou šířku webové stránky. Přidáním pouze jednoho parametru šířky nebo výšky zachováte proporce a poměr stran obrazu. Prohlížeč čeká, dokud se obrázek zcela nenačte, aby určil jeho původní výšku a šířku.

Nezapomeňte nastavit rozměry všech obrázků na webové stránce. Díky tomu je načítání stránky poněkud rychlejší, protože prohlížeč nemusí počítat velikost každého obrázku po jeho přijetí. Toto tvrzení je důležité zejména pro obrázky umístěné uvnitř tabulky.

Šířku a výšku obrázku lze změnit buď menší nebo větší. To však nijak neovlivňuje rychlost načítání obrázku, protože velikost souboru zůstává nezměněna. Proto oddalujte opatrně, protože... To může mezi čtenáři způsobit zmatek, proč se tak malý obrázek načítá tak dlouho. Zvětšení velikosti však vede k opačnému efektu – velikost obrázku je velká, ale soubor se načítá rychleji než obrázek stejné velikosti. Ale kvalita kresby se zhoršuje.

Syntax

Argumenty
Jakékoli kladné celé číslo v pixelech nebo procentech.

Výchozí hodnota
Původní šířka nebo výška obrázku.

Příklad 4: Rozměry obrázku

Parametry HSPACE a VSPACE

Popis
Pro jakýkoli obrázek můžete nastavit neviditelné vodorovné a svislé okraje pomocí parametrů hspace a vspace. To platí zejména tehdy, když text obtéká obrázek. V tomto případě, aby text „neběžel“ těsně na obrázek, je nutné kolem něj přidat prázdný prostor.

Syntax

Argumenty
Jakékoli kladné celé číslo v pixelech.

Výchozí hodnota
0

Příklad 5. Odsazení z obrázku

Parametr ISMAP

Popis
Parametr ismap sděluje prohlížeči, že obrázek je obrázková mapa na straně serveru. Obrazové mapy umožňují propojit odkazy na různé oblasti stejného obrázku. Realizováno ve dvou různé možnosti- server a klient. Při použití volby server odešle prohlížeč serveru požadavek na získání adresy vybraného odkazu a čeká na odpověď s požadovanými informacemi. Tento přístup vyžaduje další čas na čekání na výsledek a samostatné soubory pro každou obrázkovou kartu.

Odesílání dat na server probíhá následovně. Tag IMG je potřeba umístit do kontejneru A, kde je potřeba zadat adresu CGI programu jako hodnotu parametru href. Program analyzuje přijaté souřadnice kliknutí myší, které jsou vypočteny z levého horního rohu obrázku, a vrátí požadovanou webovou stránku.

Syntax

Argumenty
Žádný.

Výchozí hodnota
Ve výchozím nastavení je tato možnost zakázána.

Příklad 6. Kresba jako obrazová mapa

Pokud uživatel nastavil souřadnice myši na obrázku na 100, 50, pak se po kliknutí na odkaz otevře soubor na http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Poslední číslice jsou přeneseny do programu CGI pomocí metody GET a interpretovány na serveru.

parametr LOWSRC

Popis
Parametr lowsrc se používá k zobrazení nekvalitního obrázku před úplným načtením finálního obrázku. Tento přístup je určen ke zkrácení doby čekání uživatele. Nejprve se mu zobrazí obrázek s nízkým rozlišením nebo černobílá kresba, která se rychle načte kvůli malé počáteční velikosti souboru. Zatímco si jej uživatel prohlíží, obrázek se načítá dobrá kvalita, který postupně nahrazuje ten původní. Velikosti těchto obrázků musí být stejné.

Syntax

Argumenty

Výchozí hodnota
Žádný.

Příklad 7. Cesta k nekvalitnímu výkresu

Parametr SRC

Popis
Adresa grafický soubor, který se zobrazí na webové stránce. Nejoblíbenější soubory jsou ve formátu GIF a JPEG.

Syntax

Argumenty
Hodnota je úplná nebo relativní cesta k souboru.

Výchozí hodnota
Žádný.

Příklad 8. Cesta ke grafickému souboru

Popis

Štítek navržený pro zobrazení obrázků v grafickém formátu GIF, JPEG nebo PNG na webové stránce. Adresa souboru obrázku je určena pomocí atributu src. V případě potřeby lze z výkresu vytvořit odkaz na jiný soubor umístěním značky do kontejneru . .

Pomocí atributu, který již znáte zarovnat můžete ovládat zarovnání obrázků vzhledem k ostatním prvkům html stránky. Při atributu zarovnat existuje několik významů, ale my jsme nejvíce momentálně Zajímají mě dva:

• vlevo- obrázek je umístěn na levém okraji stránky a text obtéká obrázek vpravo;


• právo- obrázek je umístěn na pravém okraji stránky a text a další prvky obtékají obrázek vlevo.

Například HTML kód

prohlížeč se zobrazí takto

A tento HTML kód:

bude vypadat takto:

Chcete-li zabránit obtékání textu kolem obrázku, můžete použít značku BR(známé z předchozí části o). Na štítku BR existuje atribut jasný, který může nabývat tří hodnot:

• vlevo- zastavit obtékání textu kolem obrázků zarovnaných doleva;


• právo- zastavit obtékání textu kolem obrázků zarovnaných vpravo;


• vše- zastavit obtékání textu kolem obrázků zarovnaných doleva i doprava.

Vložte obrázek:

Popis a použití

Štítek vloží obrázek do dokumentu HTML.

Všimněte si, že obrázky se do stránky technicky nevkládají. Obrázky ve skutečnosti odkazují na stránky HTML. Štítek vytvoří kontejner pro obrázek.

Na štítku dva povinné atributy: src a alt.

Rozdíl mezi HTML a XHTML

V HTML tagu nemá uzavírací značku.

V XHTML tagu musí být řádně uzavřena.

Atributy „align“, „border“, „hspace“ a „vspace“ prvku img jsou zastaralé a nejsou podporovány v XHTML 1.0 Strict.

rada: Atribut alt se používá jako alternativní text, když není k dispozici žádný obrázek, spíše než jako text po přejetí myší. Chcete-li zobrazit text, když najedete na obrázek, použijte atribut title. Takhle: .

Požadované atributy

Volitelné atributy

Standardní atributy

Atributy události

V dnešní době se téměř žádný web neobejde bez použití obrázků na HTML stránkách, protože jak říká lidová moudrost: „Je lepší jednou vidět, než stokrát slyšet.“ Po přečtení tohoto článku se naučíte používat značku IMG, která se používá k přidávání obrázků na webové stránky. Zvážíme příklady pro HTML 5, ale budou fungovat i pro dřívější verze hypertextového značkovacího jazyka.

Jak vložit obrázek do HTML stránky

Pro vložení obrázku na stránku použijte HTML tag IMG. U obrázku je třeba zadat alespoň dva atributy: src (cesta k souboru s obrázkem) a alt (alternativní text, který uživatel uvidí, pokud se obrázek nenačetl). Atribut alt může být prázdný, ale musí být přítomen. Můžete také nastavit atribut title a poté, když najedete na obrázek, zobrazí se text uvedený v tomto atributu.

Pokud je soubor s obrázkem ve stejné složce jako stránka, na které je načten, pak atribut src Můžete zadat pouze název souboru, například:

Pokud je stránka umístěna na adrese http://www..html a obrázek je http://www..jpg, pak je cesta k obrázku určena následovně:

Pokud je stránka umístěna ve složce http://www..site/logo.jpg, bude cesta vypadat takto:

Pokud je obrázek ve složce http://www.site/images/, pak bez ohledu na to, ve které složce se nachází stránka na stejném webu, do kterého je obrázek vložen, cestu k souboru lze zadat následovně:

Nebo můžete zadat úplnou cestu k souboru obrázku, pokud je umístěn na jiném webu:

Šířka a výška obrázku

V dřívějších verzích HTML byly výška a šířka nastaveny pomocí atributů width a height, ale nyní je vše, co ovlivňuje zobrazení obrázku, nastaveno pomocí pomocí CSS v atributu style. Nejčastěji se šířka a výška zadávají v pixelech:

Pokud není šířka a výška zadána, obrázek se zobrazí v původní velikosti. Pokud jsou hodnoty menší než původní rozměry, prohlížeč zobrazí obrázek ve zmenšené podobě, pokud jsou hodnoty větší, prohlížeč obrázek roztáhne na zadané rozměry, ale v v tomto případě obraz bude méně jasný. Aby nedocházelo k náhodnému zkreslení obrazu, můžete nastavit například pouze výšku a poté se šířka zmenší nebo zvětší úměrně zadané hodnotě výšky.

Šířku a výšku lze také zadat jako procento šířky nebo výšky okna prohlížeče nebo libovolného prvku bloku, ve kterém se obrázek nachází:

Obtékání obrázku do textu a odsazení

Ve výchozím nastavení se text zobrazuje pod obrázkem. Aby text obtékal obrázek, používá se vlastnost float CSS, která nahrazuje atribut align. Pokud chceme, aby byl obrázek nalevo od textu a text kolem něj obtékal vpravo a níže, pak nastavte hodnotu vlevo pro Vlastnosti CSS float, a pokud by měl být obrázek vpravo, pak je uvedena hodnota vpravo:

Můžete také nastavit odsazení v horní, pravé, dolní a levé části obrázku:

Totéž lze uvést ve zkrácené podobě:

Alternativně můžete nastavit svislé a vodorovné okraje pomocí dvou hodnot vlastnosti okraje namísto starších atributů vspace a hspace. Řekněme, že potřebujeme okraj 10 pixelů nahoře a dole a 8 pixelů vlevo a vpravo:

Jak udělat z obrázku odkaz na stránku

Nebo si můžeme nastavit vlastní barvu, typ a tloušťku rámu obrazu:

Obrazové formáty pro web

Webové stránky obvykle používají více formátů obrázků. Používá se pro fotografie formát JPEG, pokud potřebujete, aby byl obrázek s průhledné pozadí, pak se použije formát PNG. Dříve se místo formátu PNG používal GIF, ten je však již zastaralý – jeho jedinou výhodou je možnost vytvářet animované obrázky. PNG a GIF se obvykle používají pouze jako prvky návrhu a pouze v případech, kdy obrázek potřebuje mít průhledné oblasti nebo být průsvitný. Vzhledem k tomu, že soubory v těchto formátech jsou velmi velké, nedoporučujeme je používat pro běžné fotografie – existuje pro to formát JPEG. Před nahráním obrázků na web se vyplatí zmenšit jejich šířku a výšku na velikost, ve které se budou na webu zobrazovat, aby se uživatelům rychleji načítaly.

Kopírování článku je zakázáno.