Obrázky

Nyní se podíváme na další důležitou součást webových stránek, a to na obrázky. V minulé lekci jsme poznali prvek br, který má jen otevírací tag. Takovým prvkům bez obsahu a bez zavíracího tagu se říká nepárové prvky a obrázek je dalším z nich. Obrázek vytvoříme takto:

<img src="adresa-obrazku">

Prvek img (z anglického image, obrázek) má atribut src (source, zdroj), jehož hodnotou je adresa obrázku. Stejně jako u odkazů (prvku a) můžeme použít absolutní i relativní adresy.

Stejně jako br píšeme img bez lomítka. Můžete se setkat i se zápisem <img src="adresa-obrazku" />, to je starší způsob, jak napsat totéž.

Říkali jsme si, že v adrese ./pes.html znamená ./ „v aktuální složce“: prohlížeč hledá soubor pes.html ve složce, ve které je HTML soubor s odkazem.

Relativní adresa ale může začínat i samotným lomítkem, například /pes.html. Pak prohlížeč hledá soubor pes.html v kořenové složce projektu, tedy ve složce, ve které jsou všechny ostatní.

Náš obrázek má adresu /learn/html/cats.webp: je v kořenové složce webu startcoder.com, ve složce learn a v její podsložce html. (.webp je formát obrázků, podobně jako .jpg nebo .png.)