Toto je 7. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 7. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Obrázky vložíme do HTML dokumentu pomocí tagu <img>. Tento tag musíme rozšířit o několik důležitých atributů. První a nejdůležitějším je atribut src (source = zdroj), který udává adresu k obrázku. Ten může být uložen ve stejné nebo i jiné složce, případně na vzdáleném serveru.
Dalším atributem je alt neboli alternativní text, který se udává především pro vyhledávače nebo pro čtečky obsahu. Také se zobrazuje v prohlížeči pokud není možné obrázek načíst. Neméně důležitým atributem je width a height, tedy šířka a výška obrázku. Tento atribut lze vložit dvěma způsoby. Buď jako čistý parametr width="125" nebo jako CSS styl style="width:125px". Hodnoty velikosti se udávají v pixelech.
<!-- v ukázce nezobrazen --><img src="obrazek.jpg" alt="Obrázek uložený ve stejné složce" width="152" height="152"><!-- v ukázce zobrazeny --><img src="/_sample/img.png" alt="Obrázek uložený ve složce img" style="width:152px; height:152px;"><img src="http://cs.webdev.wiki/_sample/img.png" alt="Obrázek uložený na vzdáleném serveru" style="width:152px; height:152px;">
Výsledek:
Obrázky pro HTML dokumenty se obvykle ukládají ve třech základních formátech.
.jpg - vhodné pro ukládání velkých fotek, nepodporuje průhlednost
.gif - vhodné pro ukládání malých obrázků (ikon, tlačítek) nebo animací
.png - vhodné pro ukládání vetších grafických prvků nebo obrázků s průhledností
Zrekapitulujme si všechny dnes probrané tagy a atributy.
Atribut src udává umístění obrázku v adresářové struktuře nebo adresu na vzdálený server.
Alternativní text je povinný atribut. Popisek obrázku přebírají vyhledávače a také čtečky obsahu.
Šířku a výšku obrázku udáváme pomocí atributu width nebo height, definované jako samostatný atribut nebo pomocí atributu style a css vlastností. Tento zápis je doporučován.
Komentáře
Přidat komentář