4. lekce - obrázky a multimédia
V dnešní lekci se naučíme vkládat obrázky, jak s ním pracovat na stránce. A jak vkládat videa na stránku.
Obrázky
Obrázky se vkládají pomocí nepárové značky <img>.
Pokud vkládáme obrázek, je třeba uvést správně cestu kde se nachází. Máme dvě možnosti:
1) Odkázat na obrázek na internetu. Musíme znát jeho adresu. Má to nevýhodu, že tvůrce stránek může obrázek smazat a pak se nám již nic nezobrazí
2) Obrázek umístit do námi vytvořené složky a odkázat na něj. To to budeme používat. Vytvoříme si složku s názvem img, zde si budeme ukládat obrázky na které budeme odkazovat.
Navážeme na naší osobní stránku a vytvoříme si stránku s naším oblíbeným filmem. Jako první krok si stáhneme fotku k našemu oblíbenému filmu do složky: img.
Nejprve v naší osobní složce, vytvoříme nový HTML dokument: film.html a do něj vložíme staženou fotku. Kód vypadá takto:
<h1>Duna</h1>
<img src="img/duna_film.jpg" alt="Duna plakát">
Důležitý je pro nás atribut src za který do uvozovek napíšeme odkaz kde se nachází obrázek. Další atribut je alt, ten slouží jako popis obrázku, kdyby nedošlo k jeho zobrazení. Když si zobrazíme stránku vidíme obrázek v celé velikosti. K změne velikosti obrázku se používají atributy width pro šířku a height pro výšku obrázku. Pozor, je třeba zachovávat správný poměr stran!
Upravíme si tedy kód a zmenšíme obrázek takto:
<h1>Duna</h1>
<img src="img/duna_film.jpg" alt="Duna plakát" width="640" height"360">
Stránka s vloženou fotkou vypadá takto:
Pokračuj na 5. lekci.