Obrázky se vkládají pomocí tagu img, jak už jste měli zjistit minule. Při ověřování správnosti kódu validátorem zjistíme, že u obrázků musí být povinně uvedena vlastnost (tzv. atribut) alt, což je alternativní text, který se zobrazí, pokud v prohlížeči nelze zobrazit obrázek. Ne každý totiž používá grafický prohlížeč a pro orientaci na stránkách bývá důležité vědět, co obrázky představují, zvlášť pokud mají nějaký symbolický význam.
MSIE (Microsoft Internet Explorer) po najetí myší nad obrázek tento alternativní text zobrazuje. Je to ovšem jeho svévole, podle specifikace k tomuto účelu slouží atribut title.
Ve složce s html stránkou chybí soubor snehulak3.gif. Podívejte se, jak zafunguje následující kód.
<img src="snehulak4.gif" alt="tady má být obrázek prvního sněhuláka" title="Pěknej, žejo?" />
<img src="snehulak3.gif" alt="tady má být obrázek druhého sněhuláka" title="Taky pěknej..." />
Obrázky se mohou vyskytovat v mnoha formátech. Formát bmp není pro web vhodný, protože obrázky v tomto formátu bývají zbytečně veliké (na disku). Pro fotografie používáme formát jpeg (jpg), pro grafiku png (nebo starší gif).
Lištu lze naistalovat do prohlížeče FF (FireFox) - zadáním klíčových slov "web developer toolkit mozilla" do Googlu naleznete stránky, z nichž se dá stáhnout a nainstalovat.
Ode dneška vždy používejte validátor kódu a udržujte své stránky validní. Budu známkovat také tohle.
Oproti předchozím dvěma stránkám je tato třetí poněkud více formátována. Jsou zde barvy, různé stupně písma, rámečky okolo textu... Jak je to uděláno? Podívejte se sami (na "zdroják" této stránky).
Všimněte si, že v hlavičce (head) přibyl tag <style>. V něm jsou obsaženy informace o použitých stylech. V těle stránky (body) už žádné další informace o stylech nejsou, pouze přiřazujeme některým částem textu tzv. třídy (class). Pokud je tedy např. v tagu p atribut class="prohloubave", ví prohlížeč, že text v tomto odstavci má být vysázen stupněm písma 8pt.
<style type="text/css" media="screen">
.nadoma {
border: 1px solid black;
padding: 2px;
line-height: 160%;
}
.ukol {
border: 1px solid black;
padding: 2px;
background-color: grey;
line-height: 160%;
}
.prehled {
color: blue;
list-style-image: url('zarovka.png');
}
.prohloubave {
font-size: 8pt;
}
a {
font-weight: bold;
}
a:visited {
color: blue;
}
}
</style>
Všimněte si dále, že ve stránce jsou použity tagé tagy div a span. První slouží k označení nějakého bloku stránky (může obsahovat například několik odstavců), druhý k označení části textu (v odstavci).
Ve zdrojovém kódu této stránky jsou použity také komentáře. Najdete je?
Ve FF klikněte na vývojářské liště na CSS -> Edit CSS a otevřete si v novém okně (shift + kliknutí) online referenční příručku.
V prohlížeči FF nyní máte možnost zkusmo editovat kaskádové styly a dívat se, co to udělá se vzhledem stránky. Pohrajte si :o). Vyzkoušejte si přiřazovat a měnit nejrůznější styly u nejrůznějších prvků. Pozor, je to jen na zkoušku, s obnovením stránky to zase zmizí, takže pokud chcete nastavený styl zachovat, zkopírujte si jej a vložte přímo do zdrojáku stránky.
Předchozí úkol obsahuje dva odstavce uzavřené do tagu <div class="ukol"></div>. Jak by to vypadalo, kdybychom místo toho přiřadili třídu "ukol" jednotlivym odstavcům?
Takto:
Ve FF klikněte na vývojářské liště na CSS -> Edit CSS a otevřete si v novém okně (shift + kliknutí) online referenční příručku.
V prohlížeči FF nyní máte možnost zkusmo editovat kaskádové styly a dívat se, co to udělá se vzhledem stránky. Pohrajte si :o). Vyzkoušejte si přiřazovat a měnit nejrůznější styly u nejrůznějších prvků.
Vyvěste kopii této stránky na internet a proveďte tyto změny:
Pro hloubavé: prozkoumejte (aktivně vlastním experimentováním, s pomocí internetu, knih...), jak fungují atributy colspan a rowspan.
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
| spojené | :o) | |
| ... | ... | |
Nejprve je třeba mít ikonku, což je obrázek 16×16 pixelů ve formátu ico. K vytváření ikon lze použít třeba program Icon sushi, který si můžete stáhnout ze serveru slunečnice.cz. Existují i další grafické programy zdarma, například GIMP.
Všimněte si, že také slunečnice.cz má svou oblíbenou ikonku. Jak se ikonka přidá do stránek, na to už jistě dokážete přijít sami. Pokud ne, připomínám pravé myšítko a volbu Zobrazit zdrojový kód.