Tagy , ,

<img>

Nepárový tag, který vkládá do html stránky obrázek.

Zdroj tohoto obrázku (vlastnost src) může být buď už umístěný na internetu (pak odkazujeme na jeho adresu začínající http://… a končící koncovkou obrázku) a nebo na pozici relativní k danému html souboru. (odkazujeme na název obrázku s koncovkou, případně jeho složku). Vždy potřebujeme kompletní adresu s koncovkou souboru (i na webu, i v počítači).

Zdroj uvnitř počítače ve stejné složce

<img src="obrazek.jpg">

Zdroj uvnitř počítače v podřízené složce

<img src="obrazky/obrazek.jpg">

Zdroj dostupný na internetu

<img src="http://www.mojestranka.cz/obrazek.jpg">

Další vlastnosti tagu img

• šířka – width (pixely nebo procenta)
• výška – height (pixely nebo procenta)
  • Tyto vlastnosti můžeme uvádět v číslech – tyto čísla pak znamenají pixely – nebo v procentech
  • Výška a šířka určí velikost rámce obrázku
  • šířka a výška neupravují obrázek, ale jen jeho kontejner, nevytváří miniatury

<img src="obrazek.jpg" width="200" height="100">

<img src="obrazek.jpg" width="20%" height="20%">

•  alt – alternativní text
  • popisuje obsah obrázku, pokud obrázek nejde zobrazit, nebo pokud je zobrazovaný na zařízeních zpracovávajících jen text
  • slouží i k vyhledávání obrázků

<img src="obrazek.jpg" alt="Fotka autora">

• název – title

<img src="obrazek.jpg" title="Název">

• rámeček – border (pixely) černý nebo modrý (s odkazem)

<img src="obrazek.jpg" border="2">

• zarovnání i zalamování – align
• zalamování textu – left, right
• zarovnání, pozicování na řádku – top, center, bottom, middle aj.
• style – styl
  • dá se nastavit skoro všem objektům
  • platí jen pro jeden konkrétní objekt
  • v podstatě kaskádový styl
  • margin – odsazení, mezera mezi objekty – px

     style="margin:15px"

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • padding – vnitřní odsazení, odděluje obsah od rámce, udává se v px

     style="padding:5px"

• barva rámce – border-color

style="border-color:red";
border-top-color, border-left-color...

• styl rámce – border-style
  • border-style:none; – není žádný obrys
  • solid – pevný obrys – musí se nastavit u všech objektů kromě obrázku
  • dotted – tečkovaný obrys
  • dashed – čárkovaný obrys
  • double – dvojitý obrys
  • inset – vnitřní stín (bez nastavení barvy)
  • outset – vnější stín (bez nastavení barvy)

<a> – odkazy

<a href="http://www.google.com">tohle je odkaz</a>

• target – cílové okno
•  _self – nastavené automaticky, odkáže do okna nebo rámce, kde je odkaz napsaný
•  _blank – nové okno
• _top – odkáže na stejné okno
• _parent – odkáže na nadřazený rámec
• poslání emailu přes mailto:adresa

   <a href="mailto:adresa@email.cz">tohle je odkaz</a>

• textová kotva – ID
  někde v textu musí být napsáno uvnitř tagu id=“jmeno“

   <a href="#jmeno">tohle je odkaz</a>