1. sada: Základy HTML a CSS

1. HTML - základy syntaxe

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_01

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - základy syntaxe

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Seznámení se základními pravidly zápisu jazyka HTML

Klíčová slova: webová stránka, HTML, syntaxe, značky, kód, element, objekt

Metodické zhodnocení: Žáci se seznámí se základními pravidly zápisu jazyka HTML.

Ověřeno: 7. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

1.1 HTML - základy syntaxe (studijní text)

Značkový jazyk HTML

značkový jazyk HTML (HyperText Markup Language) je určen pro tvorbu webového obsahu, jinými slovy - je stavebním kamenem či cihlou celého webu,
HTML jazyk je kombinací normálního textu a speciálních klíčových slov, tzv. "značek" nebo též "tagů",
každá HTML značka určuje typ obsahu (například pro odstavec, nadpis, obrázek či tabulku)

HTML soubor

HTML jazyk (kód) se zapisuje do souboru, který má většinou příponu HTML či HTM
každá webová stránka potřebuje svůj samostatný soubor
pokročilejší tvůrci webových stránek zapisují značky HTML do souborů příponou PHP, kde využívají pokročilé metody programování webových stránek pomocí jazyka PHP

HTML prvek

každá webová stránka se skládá z jednotlivých HTML prvků ("cihel"), které jsou popsány pomocí značek jazyka HTML
používá se též výraz HTML objekt či HTML element.

Jak se značky zapisují neboli syntaxe?

všechny značky jsou od ostatního textu odděleny špičatými závorkami < nebo >
HTML značky se rozdělují na párové (většina) a nepárové
- párové značky mají počáteční a koncovou značku (obalují zobrazovaný obsah)
- nepárové značky znační mají jen počáteční značku
koncová značka má předřazeno lomítko /
každá značka má navíc své atributy s různými hodnotami, které se zapisují do počáteční značky
atribut se odděluje od značky mezerou, totéž platí při oddělování více atributů,
mezi atribut a jeho hodnotu se vkládá znak "=" (bez mezer),
hodnota je vymezena uvozovkami.

Obecný zápis HTML

<značka atribut1="hodnota" atribut2="hodnota">Zobrazený obsah</značka>

Příklad zápisu HTML

<p align="center" size="3">Text zarovnaný na střed</p>

Vnoření značek

značky se mohou vnořovat do jiné značky, ale zápis se řídí jistými pravidly
značka nesmí mít koncovou značku dříve, než ji mají všechny vnořené značky (stejný princip jako např. závorky v matematice)

Správný zápis vnořené značky

<P>Normální text <STRONG>tučný text, <EM>tučná kurzíva</EM></STRONG>.</P>

Nesprávný zápis vnořené značky

<P>Normální text <STRONG>tučný text, <EM>tučná kurzíva</STRONG></EM>.</P>

Velikost znaků

při zápisu značek se nerozlišují velká a malá písmena
není rozdíl mezi <značka> nebo <ZNAČKA>
je dobré vybrat si jeden způsob (nejlépe malými písmeny)
totéž platí u atributů (není rozdíl mezi <značka atribut="hodnota"> nebo <ZNAČKA ATRIBUT="HODNOTA">)
u zobrazovaného textu je ovšem nutné dodržovat pravidla českého pravopisu
velká či malá písmena je též nutné dodržet u zápisu cesty k existujícímu souboru

Klávesy Enter a Tab při zápisu HTML

znak konce řádku (klávesa Enter) a znak tabulátoru (klávesa Tab) nejsou zpracovány při zobrazování, tudíž nehrajou při zápisu důležitou roli

1.2 HTML - základy syntaxe (cvičení)

Odpovězte na otázky

1. Jaká je správná přípona HTML souborů?

.htm
.www
.html
.web

2. Vyber jediné správné tvrzení.

Nepárová značka má na konci zakončovací značku s lomítkem.
Párová značka se skládá jen z počáteční značky.
Párová značka má počáteční značku a koncovou značku s lomítkem.

3. Vyber jediný správný zápis vnořených značek.

Normální text <b>tučný text, <i>tučný text s kurzívou</i></b>
Normální text <b>tučný text<i></b>, tučný text s kurzívou</i>
Normální text <i>tučný text, </i>tučný text s kurzívou<b></b>

4. Rozlišují se malá a velká písmena při zápisu samotné HTML značky?

5. V jakých případech se vždy zobrazí jen jedna mezera?

Pokud je v zápise znak konce řádku.
Pokud je v zápise znak tabulátoru.
Pokud jsou v zápise dvě a více mezer.

6. Vyber jediný správný zápis HTML.

<fontsize="2"color="blue">Modrý text</font>
<font size=2 color=blue>Modrý text</ font>
<font size="2" color="blue">Modrý text</font>

2. HTML - základní struktura

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_02

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - základní struktura

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Pochopení základní struktury HTML souborů

Klíčová slova: html, head, body, title, meta, link, style, script, hlavička dokumentu, tělo dokumentu

Metodické zhodnocení: Žáci pochopí základní strukturu HTML souborů

Ověřeno: 10. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

2.1 HTML - základní struktura (studijní text)

Mezi základní značky vymezující strukturu HTML souboru patří: <HTML>, <HEAD>, <BODY>.

HTML dokument

<HTML>

značkami <HTML> a </HTML> se vymezuje celý HTML soubor a jsou nadřízené všem ostatním značkám
každý HTML soubor musí tedy začínat a končit těmito značkami
HTML dokument se skládá ze dvou částí:
- hlavičky (záhlaví)
- těla

Hlavička (záhlaví) dokumentu

<HEAD>

značkami <HEAD> a </HEAD> se vymezuje tzv. hlavička, která se v prohlížeči nezobrazuje (netvoří obsah),
jsou podřízené značce <HTML> a </HTML>,
slouží pro nastavení webové stránky pro webový prohlížeč,
obsahuje další podřízené značky: TITLE, LINK, META, STYLE, SCRIPT.

<TITLE>

titulek webové stránky (zobrazí se v titulkovém pruhu okna nebo panelu prohlížeče)

<title>Titulek webové stránky</title>

<LINK>

slouží pro propojení s jiným souborem, nejčastěji CSS stylem
má atributy: rel, type, href

<link rel="stylesheet" type="text/css" href="soubor.css">

<STYLE>

slouží pro zapsání CSS stylu

<style>CSS stylopis</style>

<SCRIPT>

slouží pro zapsání skriptu jazyka JavaScript

<script>skript jazyka JavaScript</script>

Tělo HTML dokumentu

<BODY>

značky <BODY> a </BODY> se vymezuje samotné tělo webové stránky, tudíž veškerý obsah, který se zobrazí v prohlížeči,
jsou podřízené značce <HTML> a </HTML>.

Příklad základní struktury HTML souboru

<HTML>
  <HEAD>
    <TITLE>Moje stránky</TITLE>
  </HEAD>
  <BODY>
    <H1>Vítejte</H1>
  </BODY>
</HTML>

2.2 HTML - základní struktura (cvičení)

Úkol

Vytvořte nový HTML soubor se základní strukturou.
Upravte hlavičku HTML souboru podle následujícího klíče:
- titulek bude obsahovat text "Moje první webová stránka".
Do těla HTML souboru opište následující text:

Soubor uložte do složky CV02 ve složce WWW pod názvem index.html.

3. HTML - blokové prvky

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_03

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - blokové prvky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření vybraných HTML blokových prvků, jako jsou odstavce, nadpisy, oddíly, řádkové zlomy, vodorovné čáry.

Klíčová slova: blokový element, odstavec, nadpis, oddíl, řádkový zlom, vodorovná čára

Metodické zhodnocení: Žáci se naučí vytvářet vybrané HTML blokové prvky, jako jsou odstavce, nadpisy, oddíly, řádkové zlomy, vodorovné čáry.

Ověřeno: 17. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

3.1 HTML - blokové prvky (studijní text)

Základní stavebními kameny obsahu v HTML jsou tzv. blokové prvky. Blokem se rozumí HTML prvky, který je ukončen znakem pro konec řádku (standardně nelze zobrazit více bloků na jeden řádek).

Na druhé straně jsou potom tzv. řádkové prvky, které nejsou ukončeny koncem řádku (mohou být několikrát na jednom řádku).

Blokové prvky

<P>

odstavec - základní blok obsahující převážně text
párová značka
odstavce jsou od sebe oddáleny vertikální mezerou pro lepší přehlednost

<p>Tento odstavec obsahuje jen jednu větu.</p>

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>

nadpisy 1. až 6. úrovně - graficky odlišeny velikostí písma
praktické využití mají jen nadpisy do 4. úrovně
párová značka
stejně jako odstavce jsou od sebe oddáleny vertikální mezerou

<h1>Hlavní nadpis stránky (vel. 24 px)</h1>
<h2>Podnadpis, kapitoly (vel. 18 px)</h2>
<h3>Mezinadpisy (vel. 16 px)</h3>
<h4>Důležité odstavce (vel. 14 px)</h4>

<DIV>

oddíl - zahrnuje libovolnou část HTML obsahu,
párová značka,
na rozdíl od odstavců a nadpisů nejsou nijak předformátovány,
využívají se při rozdělování HTML dokumentu do několika nezávislých částí, které lze poté formátovat odděleně.

<div>
  <h1>Nadpis</h1>
  <p>Tento odstavec obsahuje jen jednu větu.</p>
</div>

<BR>

řádkový zlom - vloží zalomení řádku (tzv. měkký Enter)
nepárová značka
na rozdíl od odstavce není oddálen vertikální mezerou

<p>Text se zobrazí na první řádce,<br>
  toto už bude na druhé řádce,<br>
  ale pořád je to jeden odstavec</p>

3.2 HTML - blokové prvky (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV03.
Do této složky si stáhněte a rozbalte soubor cv03.zip (1).
Otevřete si rozbalený soubor cv03.txt v HTML editoru (např. PSPad).
Převeďte si tento soubor do HTML souboru a uložte jej pod názvem index.html .
- nápověda pro menu PSPadu: HTML > Konverze > Text na HTML.

Úkol č. 2

Upravte pomocí editoru soubor index.html podle následujícího klíče:
- nastavte titulek stránky na "Česká republika"
- převeďte text na nadpisy podle čísla v závorkách na začátku (čísla znamenají příslušnou úroveň nadpisu),
- ostatní text (bez čísla na začátku) převeďte na běžný odstavec,
- odstraňte všechny zbylé řádkové zlomy <br>.

Použité zdroje

1. Česko. In: Wikipedie: otevřená encyklopedie [online]. 2011. vyd. [cit. 2011-10-19]. Dostupné z: http://cs.wikipedia.org/wiki/Česko.

4. HTML - řádkové prvky

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_04

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - řádkové prvky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření vybraných HTML řádkových prvků, jako jsou obálka, zvýrazněný text, silně zvýrazněný text, tučné písmo, písmo kurzíva, dolní a horní index.

Klíčová slova: obálka, span, silné zvýraznění, strong, zvýraznění, em, dolní index, sub, horní index, sup.

Metodické zhodnocení: Žáci se naučí vytvářet vybrané HTML řádkové prvky, jako jsou obálka, zvýrazněný text, silně zvýrazněný text, tučné písmo, písmo kurzíva, dolní a horní index.

Ověřeno: 17. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

4.1 HTML - řádkové prvky (studijní text)

Pro připomenutí, řádkové prvky nevkládají na konec znak pro konec řádku, tudíž je lze zobrazovat v libovolném množství na jednou řádku.

Řádkové prvky

Řádkových prvků existuje celá řada, ale dnes se používají jen některé (jsou nahrazeny kaskádovými styly).

<STRONG>

silné zvýraznění - zvýrazní označenou část textu tučným písmem,
párová značka,
pokud chcete silně zvýraznit celý blokový prvek (celý nadpis nebo odstavec), nahraďte tuto značku CSS vlastností font-weight.

<p>Normální text <strong>silně zvýrazněný text</strong>.</p>

<EM>

zvýraznění - zvýrazní text kurzívou,
párová značka,
pokud chcete zvýraznit kurzívou celý blokový prvek (celý nadpis nebo odstavec), nahraďte tuto značku CSS vlastností font-style.

<p>Normální text <em>zvýrazněný text kurzívou</em>.</p>

<B>

tučné písmo - označení části textu tučným písmem
zastaralé, doporučuje se nahradit značkou <strong>
párová značka

<p>Normální text <b>tučný text</b>.</p>

<I>

písmo kurzíva - označení části textu kurzívou
zastaralé, doporučuje se nahradit značkou <em>
párová značka

<p>Normální text <i>zvýrazněný text kurzívou</i>.</p>

<SUB>

dolní index (subscript) - zmenšení a snížení textu (chemické vzorce)
párová značka

<p>Kyselina sírová - H<sub>2</sub>SO<sub>4</sub>.</p>

<SUP>

horní index (superscript) - zmenšení a zvýšení textu (mocniny)
párová značka

<p>Rozloha ČR je 78 866 km<sup>2</sup>.</p>

<SPAN>

obálka - zahrnuje libovolnou část textu, obrázků, tabulek
má stejné využití jako <div>, jen se řadí mezi řádkové prky
párová značka

<p>Text, <span>část odstavce, lze formátovat odděleně</span>.</p>

4.2 HTML - řádkové prvky (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV04.
Do složky CV04 si stáhněte a rozbalte soubor cv04.zip.
Ze složky CV03 si navíc zkopírujte soubor index.html do složky 04.

Úkol č. 2

Upravte pomocí editoru soubor index.html ze složky CV04 podle následujícího postupu:
- ze souboru cv04.txt zkopírujte všechen text a vložte jej před nadpis "Dějiny",
- z textu "Porovnání..." vytvořte nadpis 3. úrovně,
- z ostatního textu vytvořte odstavce,
- názvy států zvýrazněte silně,
- údaje o rozlohách zvýrazněte kurzívou,
- přidejte správné nastavení horního indexu.
Zkontrolujte na případné chyby a uložte.

5. HTML - vytváření seznamů

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_05

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vytváření seznamů

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření pomocí jazyka HTML netříděných (odrážkových) a tříděných (číslovaných) seznamů.

Klíčová slova: netříděný (odrážkový) seznam, ul, tříděný (číslovaný) seznam, ol, položka seznamu, li

Metodické zhodnocení: Žáci se naučí vytvářet pomocí jazyka HTML netříděné (odrážkové) seznamy a tříděné (číslované) seznamy.

Ověřeno: 4. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

5.1 HTML - vytváření seznamů (studijní text)

V HTML se rozlišují dva typy seznamů (stejně jako v textovém editoru). Prvním je netříděný seznam (odrážkový seznam) a druhým je tříděný seznam (číslovaný seznam).

Netříděný (odrážkový) seznam

Netříděný seznam se skládá ze dvou značek. První je párová značka <UL>, která vymezuje začátek a konec seznamu. Druhou je párová značka <LI>, která definuje jednotlivé položky seznamu a je vnořena do značky <UL>.

výchozím typem odrážky je puntík
typ odrážky lze nastavit pomocí CSS vlastnosti
za značkou <ul> musí být hned značka <li>, avšak uvnitř značky <li> už mohou být další značky
samozřejmě, že lze seznamy vnořovat do sebe tak, že uvnitř jedné značky <li> budete definovat nový seznam

Příklad č.1

Příklad zobrazuje netříděný (odrážkový) seznam, který má tři položky a navíc první položka je silně zvýrazněná.

Kód:

<ul>
  <li><strong>položka</strong></li>
  <li>položka</li>
  <li>položka</li>
</ul>

Výsledek:

položka
položka
položka

Příklad č. 2

Příklad zobrazuje vnoření netříděného seznamu do jiného netříděného seznamu. Všimněte si, že u první položky seznamu, za kterou následuje vnořený seznam není koncová značka s lomítkem.

Kód:

<ul>
  <li>položka
    <ul>
      <li>položka vnořeného seznamu</li>
      <li>položka vnořenoho seznamu</li>
    </ul>
  <li>položka</li>
</ul>

Výsledek:

položka
- položka vnořeného seznamu
- položka vnořeného seznamu
položka

Tříděný (číslovaný) seznam

Tříděný seznam se skládá ze dvou značek. První je párová značka <OL>, která vymezuje začátek a konec seznamu. Druhou je párová značka <LI>, která definuje jednotlivé položky seznamu.

výchozím typem je desítkové
typ číslování a lze nastavit pomocí CSS vlastnosti
u značky <OL> lze využít atribut START, který nastavuje počáteční číslo seznamu (výchozí je hodnota "1")
uvnitř značky <OL> musí být pouze značky <LI>, avšak uvnitř značky <LI> už mohou být další značky
samozřejmě, že lze seznamy vnořovat do sebe tak, že uvnitř jedné značky <LI> budete definovat nový seznam

<ol>
  <li><strong>položka</strong></li>
  <li>položka</li>
  <li>položka</li>
</ol>

Příklad zobrazuje tříděný (číslovaný) seznam, který má tři položky a navíc první položka je silně zvýrazněná.

<ol start="5">
  <li>položka</li>
  <li>položka</li>
  <li>položka</li>
</ol>

Příklad zobrazuje tříděný (číslovaný) seznam, který má tři položky a navíc první položka je nastavena na číslo "5".

<ol>
  <li>položka
    <ol>
      <li>položka vnořeného seznamu</li>
      <li>položka vnořenoho seznamu</li>
    </ol>
  <li>položka</li>
</ol>

Příklad zobrazuje vnoření tříděného seznamu do jiného tříděného seznamu. Všimněte si, že u první položky seznamu, za kterou následuje vnořený seznam není koncová značka s lomítkem.

5.2 HTML - vytváření seznamů (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV05.
Do této složky si stáhněte a rozbalte soubor cv05.zip.
Ze složky CV04 si zkopírujte soubor index.html.

Úkol č. 2

Upravte soubor index.html podle následujícího postupu:
- ze souboru cv05.txt si zkopírujte seznam národních parků a vložte jej před nadpis "Obyvatelstvo",
- z textu "Seznam národních..." vytvořte nadpis 3. úrovně,
- z ostatního textu vytvořte netříděny "odrážkový" seznam,
- ze souboru cv05.txt si dále zkopírujte seznam největších měst a vložte jej před nadpis "Politický systém",
- z textu "Seznam deseti..." vytvořte nadpis 3. úrovně,
- z ostatního textu vytvořte tříděny "číslovaný" seznam.
Za poslední odstavec "Použité zdroje" vložte další odstavec s textem: "Upravil: Jméno a příjmení, rok"
Zkontrolujte na případné chyby a uložte.

6. HTML - vkládání obrázků

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_06

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vkládání obrázků

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vkládání obrázků pomocí jazyka HTML.

Klíčová slova: obrázek, img, vodorovné zarovnání.

Metodické zhodnocení: Žáci se naučí vkládat obrázky pomocí jazyka HTML.

Ověřeno: 7. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

6.1 HTML - vkládání obrázků (studijní text)

obrázky se vkládání do HTML souboru pomocí nepárové značky <IMG>
značka má velké množství atributů, avšak používá se jich jen několik

<IMG>

SRC

povinný atribut určující cestu k obrázku (musí být definován pokaždé)
cesta může být relativní nebo absolutní (např. webová adresa)
značka <IMG> podporuje typy obrázků s příponami *.jpg, *.gif, *.png

<img src="obrazek.gif">

Příklad ukazuje vložení obrázku, který je umístěný ve stejné složce, jako je upravovaný HTML soubor.

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

Příklad ukazuje vložení obrázku, který je umístěný ve složce "img", která je umístěna spolu s upravovaným HTML souborem.

<img src="http://www.seznam.cz/logo.png">

Příklad ukazuje vložení obrázku, který je umístěn na serveru www.seznam.cz (vždy se musí uvést protokol http://).

ALT

povinný atribut, který definuje alternativní popisek obrázku
definuje se proto, aby v případě chybného načtení obrázku (špatná cesta, obrázek vymazán), se zobrazil alespoň popisek
tento atribut též využívají čtečky textu a obrázků pro slabozraké

<img src="obrazek.gif" alt="jakýkoliv text">

TITLE

nepovinný atribut definuje titulek obrázku (zobrazí se ve žluté bublině po najetí na obrázek
není povinný, ale doporučuje se pro přehlednost používat

<img src="obrazek.gif" alt="jakýkoliv text" title="jakýkoliv text">

WIDTH, HEIGHT

atributy definující šířku (width) a výšku (height) obrázku
šířku a výšku lze definovat i pomocí CSS, ale není chybou, pokud použijete atribut v HTML
hodnota se udává číslovkou vyjadřující příslušný rozměr v pixelech
pokud chcete zachovat poměr mezi šířkou a výškou obrázku, zadejte pouze jeden rozměr (druhý rozměr se automaticky přizpůsobí)

<img src="obrazek.gif" width="200" alt="jakýkoliv text" title="jakýkoliv text">
<img src="obrazek.jpg" height="100" alt="jakýkoliv text" title="jakýkoliv text">

6.2 HTML - vkládání obrázků (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV06.
Dále si vytvořte podsložku IMG (pozor na velká písmena).
Do této složky si stáhněte a rozbalte soubor cv06.zip. (1-6)
Ze složky CV05 si zkopírujte soubor index.html.

Úkol č. 2

Vložte obrázky do souboru index.html následujícím způsobem:
- Obrázek Sněžky vložte před nadpis "Vodstvo",
- Obrázek soutoku Labe a Vltavy vložte před nadpis "Podnebí",
- Obrázek Prahy vložte před nadpis "Hustota zalidnění",
- Obrázek Brna vložte před nadpis "Národnostní složení",
- Obrázek Ostravy vložte před nadpis "Náboženské složení",
- Obrázek Plzně vložte před nadpis "Seznam deseti...",
Pod každý obrázek vložte popis obrázku pomocí odstavce s textem: Obrázek: ....
Všem obrázkům nastavte šířku na 500 pixelů.
K obrázků nezapomeňte doplnit atributy ALT a TITLE.
Zkontrolujte na případné chyby a uložte.

Použité zdroje

1. Brno. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:Brno-Cathedral_of_St._Peter_and_Paul_1.jpg

2. Praha. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:Prague_old_town_square_panorama.jpg

3. Ostrava. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:Ostrava,_pohled_z_Nov%C3%A9_radnice_2.jpg

4. Plzeň. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:Plze%C5%88_12.3.2012.jpg

5. Soutok Labe a Vltavy. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:Melnik_-_soutok1.jpg

6. Sněžka. [citováno 2013-01-08]. Dostupný pod licencí Wikipedia Commons na WWW: http://cs.wikipedia.org/wiki/Soubor:%C5%9Anie%C5%BCka_z_zachodu.jpg

7. HTML - vytváření odkazů

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_07

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vytváření odkazů

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření hypertextových odkazů pomocí jazyka HTML.

Klíčová slova: hypertextový odkaz.

Metodické zhodnocení: Žáci se naučí vytvářet hypertextové metody pomocí jazyka HTML.

Ověřeno: 14. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

7.1 HTML - vytváření odkazů (studijní text)

Hypertextové odkazy (zkráceně odkazy) jsou hlavní podstatou webových stránek. Odkazem může být text, ale i obrázek, který po kliknutí zobrazí jinou HTML stránku. Odkazovat můžete i na libovolné soubory (dokumenty, obrázky, videa, zvuky, atd.), poté se však nezobrazí webová stránku, ale nabídne se možnost uložení či otevření daného souboru.

<A>

párová značka pro vkládání hypertextových odkazů
patří mezi řádkové elementy
uvnitř značky <a> může být jakýkoliv jiný HTML element s výjimkou: jiného odkazu <a> formuláře <form> a tabulky <table>

HREF

nejdůležitější a také povinný atribut definující cíl odkazu (URL)
cílem může být jiný HTML soubor, jakýkoliv jiný soubor, webová adresa na jiném serveru

<a href="index.html">Odkaz na hlavní stránku</a>
<a href="http://www.seznam.cz">Odkaz na server Seznam.cz</a>
<a href="ukazka.zip">Stáhněte si tento soubor</a>

TARGET

atribut určující, kde se má cíl otevřít
má několik hodnot
- _blank: otevře odkaz v novém okně či záložce (používá se při odkazování na jiný server)
- _parent: otevře odkaz nadřazeném HTML prvku (používá se při tvorbě hlavního menu)

<a href="http://www.google.cz" target="_blank">Odkaz na hlavní stránku Googlu</a>

Odkaz pomocí obrázku

samozřejmě lze místo textu vložit obrázek
odkazem se poté stane celý obrázek

<a href="index.html"><img src="obrazek.jpg" alt="text"></a>

7.2 HTML - vytváření odkazů (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV07.
Do této složky si stáhněte a rozbalte soubor cv07.zip.
Otevřete si rozbalený soubor cv07.txt v HTML editoru (např. PSPad).
Převeďte si tento soubor do souboru mesta.html a uložte.
Ze složky CV06 si zkopírujte soubor index.html a složku IMG.

Úkol č. 2

Soubor index.html upravte podle následujícího postupu:
- kapitolu o přírodních poměrech přesuňte do nového souboru a uložte jej pod názvem "priroda.html",
- přesunutý text nahraďte následujícím:
  - nadpis 2. úrovně "Přírodní poměry",
  - odstavec s textem "Více o přírodních poměrech" a s odkazem na soubor "priroda.html",
- kapitolu o obyvatelstvu přesuňte do nového souboru a uložte jej pod názvem "obyvatelstvo.html",
- přesunutý text nahraďte následujícím:
  - nadpis 2. úrovně "Obyvatelstvo",
  - odstavec s textem "Více o obyvatelstvu" a s odkazem na soubor "obyvatelstvo.html",
- kapitolu o administrativním členění přesuňte do nového souboru a uložte jej pod názvem "cleneni.html",
- přesunutý text nahraďte následujícím:
  - nadpis 2. úrovně "Administrativní členění",
  - odstavec s textem "Více o administrativním členění" a s odkazem na soubor "cleneni.html",
- v posledním odstavci se zdrojem vytvořte z URL adresy funkční odkaz, který se bude otevírat v novém okně či kartě,
Zkontrolujte na případné chyby a uložte.

Úkol č. 3

Soubory priroda.html, obyvatelstvo.html a cleneni.html upravte podle následujícího postupu:
- upravte jednotlivé titulky stránek podle hlavního nadpisu,
- z původního nadpisu 2. úrovně vytvořte nadpis 1. úrovně,
- z nadpisů 3. úrovně vytvořte nadpisy 2. úrovně,
- za poslední odstavec vložte nový odstavec s textem: "Zpět na hlavní stránku", a vytvořte funkční odkaz na soubor index.html.
- navíc v souboru obyvatelstvo.html přidejte za číslovaný seznam s největšími městy nový odstavec s textem: "Více o městech ČR",
- z tohoto textu vytvořte funkční odkaz na soubor mesta.html.
Zkontrolujte na případné chyby a uložte.

Úkol č. 4

Soubor mesta.html upravte podle následujícího postupu:
- upravte titulek stránky na "Města ČR"
- z hlavního nadpisu vytvořte nadpis 1. úrovně,
- z nadpisů měst vytvořte nadpisy 2. úrovně,
- z ostatního textu vytvořte odstavce,
- za nadpisy jednotlivých měst vložte příslušný obrázek ze složky IMG a obrázkům nastavte šířku 300 pixelů,
- z URL adres uvedených ve zdrojích vytvořte funkční hypertextové odkazy, které se navíc budou otevírat v novém okně/kartě,
- za poslední odstavec vložte nový odstavec s textem: "Zpět na stránku o obyvatelstvu", a vytvořte funkční odkaz na soubor obyvatelstvo.html,
- za poslední odstavec vložte nový odstavec s textem: "Zpět na hlavní stránku", a vytvořte funkční odkaz na soubor index.html.
Zkontrolujte na případné chyby a uložte.

8. HTML - vytváření tabulek

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_08

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vytváření tabulek

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření tabulek pomocí jazyka HTML.

Klíčová slova: tabulka, table, řádek, tr, buňka, td, hlavička tabulky, thead, tělo tabulky, tbody.

Metodické zhodnocení: Žáci se naučí vytvářet tabulky pomocí jazyka HTML.

Ověřeno: 4. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

8.1 HTML - vytváření tabulek (studijní text)

Vytváření tabulek pomocí HTML není až tak jednoduché, je potřeba dodržet požadovanou strukturu. Tabulka se skládá z několika částí:

Vymezení části HTML souboru pro tabulku
Hlavička tabulky
Tělo tabulky
Řádek tabulky
Buňka tabulky

1. Vymezení části HTML souboru pro tabulky

tabulka se vymezuje párovou značkou <TABLE> (stejně jako HTML soubor se vymezuje značkou <html>)
v podstatě tím říkáte: "Tady začíná tabulka a tady tabulka končí."

libovolný obsah
<table>
  obsah tabulky
</table>
libovolný obsah

2. Hlavička tabulky

každá tabulka obsahuje hlavičku (záhlaví), která se vymezuje párovou značkou <THEAD>
v hlavičce jsou většinou uvedeny popisy sloupců tabulky

<table>
  <thead>
    obsah hlavičky
  </thead>
</table>

3. Tělo tabulky

tělo tabulky obsahuje hlavní obsah tabulky a vymezuje ho párová značka <TBODY>

<table>
  <thead>
    obsah hlavičky
  </thead>
  <tbody>
    hlavní obsah tabulky
  </tbody>
</table>

4. Řádek tabulky

každá tabulka se skládá z jednotlivých řádků, které vymezuje párová značka <TR>
alespoň jeden řádek musí obsah hlavička tabulky, tělo tabulky a patička tabulky (pokud je definována)

<table>
  <thead>
    <tr>
    první řádek
    </tr>
  </thead>
  <tbody>
    <tr>
    druhý řádek
    </tr>
    <tr>
    třetí řádek
    </tr>
  </tbody>
</table>

5. Buňka tabulky

buňka tabulky je nejmenší nedělitelná část tabulky
rozděluje každý řádek na požadovaný počet buněk neboli sloupců
existují dva typy buněk:
- buňka záhlaví tabulky se vymezuje párovou značkou <TH>
- buňka těla tabulky se vymezuje párovou značkou <TD>

<table>
  <thead>
    <tr>
      <th>první buňka prvního řádku</th>
      <th>druhá buňka prvního řádku</th>
      <th>třetí buňka prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>první buňka druhého řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>první buňka třetího řádku</td>
      <td>druhá buňka třetího řádku</td>
      <td>třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Vodorovné sloučení buněk

Vodorovné sloučení buněk (neboli sloučení v řádku) se provádí pomocí atributu COLSPAN s hodnotou uvádějící počet sloučených buněk. Atribut colspan lze použít jen u značek <td> nebo <th>.

<table>
  <thead>
    <tr>
      <th colspan="3">sloučené všechny tři buňky prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>první buňka druhého řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>první buňka třetího řádku</td>
      <td colspan="2">sloučená druhá a třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Výsledek

Svislé sloučení buněk

Svislé sloučení buněk (neboli sloučení v sloupci) se provádí pomocí atributu ROWSPAN s hodnotou uvádějící počet sloučených buněk. Atribut ROWSPAN lze použít jen u značek <TD> nebo <TH>.

<table>
  <thead>
    <tr>
      <th>první buňka prvního řádku</th>
      <th>druhá buňka prvního řádku</th>
      <th>třetí buňka prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">sloučené první buňky druhého a třetího řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>druhá buňka třetího řádku</td>
      <td>třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Výsledek

8.2 HTML - vytváření tabulek (cvičení)

Úkol č.1

Založte si ve složce WWW novou složku CV08.
Ze složky CV07 si zkopírujte všechny HTML soubory a složku IMG.

Úkol č.2

V souboru cleneni.html vytvořte před nadpisem "Použité zdroje" jednoduchou tabulku podle následujícího klíče:
- tabulka bude vyjmenovávat kraje České republiky, jejich krajská města a písmeno registrační značky,
- bude tedy tvořit 3 sloupce a odpovídající počet řádků,
- záhlaví (hlavička) tabulky se bude skládat ze dvou řádků,
- první řádek záhlaví tabulky bude obsahovat text "Kraje České republiky" a bude vodorovně sloučený přes celý řádek (celkem 3 buňky),
- druhý řádek záhlaví bude obsahovat text "Název kraje", "Krajské město", "RZ",
- pro zobrazení ohraničení doplňte do značky <table> atribut border="2".
Zkontrolujte na případné a chyby a uložte.

9. CSS - základy syntaxe

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_09

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - základy syntaxe

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Seznámení se základními pravidly zápisu kaskádových stylů CSS.

Klíčová slova: CSS, kaskádový styl, syntaxe, selektor, vlastnost, CSS kód

Metodické zhodnocení: Žáci se seznámí se základními pravidly zápisu kaskádových stylů CSS.

Ověřeno: 10. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

9.1 CSS - základy syntaxe (studijní text)

Co je to CSS?

CSS je systém metod pro grafickou úpravu dnešních webových stránek,
CSS znamená Cascading Style Sheets, česky "kaskádové styly,
kaskádové styly proto, že se definice mohou vrstvit jedna na druhou (tzv. dědičnost)

Proč používat s HTML i CSS?

důležité je si uvědomit, že dnes se vzhled webových stránek tvoří odděleně od obsahu,
HTML jazyk se tedy používá tvorbu samotného obsahu (text, obrázky, tabulky, atd.) a CSS se používá na definování vzhledu tohoto obsahu (jinými slovy: HTML jsou cihly, CSS omítka),
hlavní a největší výhodou CSS je možnost definovat vzhled určitým částem webových stránek najednou a pouze jednou (stejně jako styly v textovém editoru Word).

Dědičnost

dědičnost u CSS znamená, že když nadřízenému HTML prvku nastavíte jistou barvu textu, není již potřeba nastavovat barvu textu u podřízených HTML prvků.
například: pokud nastavíte styl například HTML prvku <body>, nemusíte již nastavovat stejný styl např. <h1> nebo <p>.

Syntaxe CSS

CSS není HTML, proto se zapisují jinak,
zápis se skládá ze tří částí: selektor, vlastnost, hodnota,

selektor {vlastnost_1: hodnota; vlastnost_2: hodnota}

Selektor

selektorem se určuje, čeho se definovaný vzhled týká,
na výběr je několik možných selektorů, těmi základními jsou:

Selektor univerzální

týká se úplně všeho, co se zobrazuje, zapisuje se symbolem hvězdičky,
avšak tento selektor se moc nepoužívá,

* {color: green}

Selektor značkový

týká se jen určitého HTML prvku (např.: odstavce, nadpisu či obrázku),

body {background-color: navy}
h2 {font-size: 16pt}
p {font-family: Tahoma, sans-serif}

Selektor vnořený

týká se vnořeného HTML prvku do jiného HTML prvku (např.: tabulky nebo oddílu), zapisuje v pořadí nadřízený - podřízený HTML prvek

h2 a {color: red}
table td {width: 100px}

Selektor složený

týká se více HTML prvků u kterých se používá jedna tatáž vlastnost se stejnou hodnotou, HTML prvky se oddělují čárkou

h1, h2, h3 {font-family: Arial, sans-serif}

Selektor třídy a identifikátorů

slouží pro definici vlastních stylů, třída se zapisuje tečkou před názvem stylu, identifikátor mřížkou,
například: pokud chcete různý styl pro jednotlivé odstavce,

.muj_styl_1 {background-color: black}
#muj_styl_2 {background-color: black}

Vlastnost

je klíčové slovo, které je přesně specifikované a vymezuje grafickou úpravu (např.: barva, šířka, velikost, atd.)
zapisuje se do složených závorek { a }
v závorkách může být několik vlastností najednou, jednotlivé vlastnosti se oddělují středníkem ;

Hodnota

vlastní hodnota pro danou vlastnost
odděluje se od vlastnosti dvojtečkou :

Zápis více vlastností

k jednomu selektoru lze zapsat nekonečně různých vlastností
jedinou podmínkou je, že se vlastnosti odděluje od sebe středníkem ;

h1 {color: blue; font-size: 24pt; font-family: Arial}

Psaní komentářů

Pro přehlednější kód lze do kódu vkládát tzv. komentáře. Podmínkou je, že text, který má být v komentáři musí být na začátku uvozen /* a na konci */.

Tři možnosti zápisu CSS

Styl lze nadefinovat trojím způsobem.

Přímým zápisem jako atribut u vybraného HTML prvku (tzv. přímý styl).
Zápisem tzv. stylopisu v hlavičce HTML souboru.
Zápisem do externího souboru s příponou *.css.

1. Přímý styl

používá se zřídka, protože popírá největší výhodu CSS, ale občas se využívá,
zapisuje se jako atribut style k vybranému HTML prvku.

Příklad zápisu v HTML:

<html>
  <head>
    <title>Titulek stránky</title>
  </head>
  <body>
    <p style="color: blue">Tento odstavec bude modrý.</p>
    <p>Tento už ne.</p>
  </body>
</html>

2. Stylopis v hlavičce HTML souboru

využívá se častěji, ale je nepraktický při práce s více HTML soubory (definuje vzhled pouze konkrétnímu HTML souboru),
zapisuje se mezi HTML značky <style> a </style> do hlavičky HTML souboru.

Příklad zápisu v HTML:

<html>
  <head>
    <title>Titulek stránek</title>
    <style type="text/css">
      p {color: blue}
    </style>
  </head>
  <body>
    <p>Tento odstavec bude modrý.</p>
    <p>Tento také, protože modré budou všechny.</p>
  </body>
</html>

3. Zápis v externím souboru

nejpoužívanější způsob
vytvoří se externí soubor (mimo HTML soubor) s příponou *.css, například: pokus.css,
tento soubor bude obsahovat pouze definici vzhledu

Příklad zápisu v CSS souboru:

p {color: blue}

v hlavičce HTML souboru je poté nutné "nalinkovat" tento soubor pomocí značky <link>

Příklad zápisu v HTML souboru:

<html>
  <head>
    <title>Titulek stránek</title>
    <link rel="stylesheet" type="text/css" href="cesta k CSS souboru">
  </head>
  <body>
    <p>Tento odstavec bude modrý.</p>
    <p>Tento také, protože modré budou všechny.</p>
  </body>
</html>

Důležité je i zmínit se o pořadí načítání stylů, což je dobré si uvědomit. Po otevření HTML souboru se nejprve načte styl z externího souboru, poté ze stylopisu v hlavičce a nakonec se načte přímý styl. (lidově řečeno poslední slovo má přímý styl).

9.2 CSS - základy syntaxe (cvičení)

Úkol

Vytvořte ve složce WWW novou složku CV09.
Ze složky CV08 zkopírujte všechny HTML soubory a složku IMG.
V HTML editoru si vytvořte nový CSS soubor a uložte je do složky CV09 pod názvem style.css.
Propojte soubor style.css se všemi HTML soubory.

10. CSS - nastavení barev

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_10

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení barev

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Použití vybraných CSS vlastností pro nastavení barvy.

Klíčová slova: barva, color, background-color

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení barvy.

Ověřeno: 14. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

10.1 CSS - nastavení barev (studijní text)

Zápis barev

Barvy se dají zapisovat různými způsoby. Důležité je určit si jeden způsob a toho se držet.

anglické pojmenování barvy
- např.: red, green, blue, yellow,
- nejjednodušší, ale omezené množství barev
RGB kódem s hexadecimální (šestnáctkovým) číslem 00 až FF
- např.: #FF00FF, zkráceně při stejných hodnotách v páru: #F0F = #FF00FF),
- na začátku se vždy píše křížek #,
- nejpoužívanější, přes 16 milionů možných barev
RGB kódem s desítkovým číslem 0 až 255:
- např.: rgb(128,0,255),
- totéž jako v předchozím případě.

Na druhou stranu je však nutné říci, že v praxi nelze použít všech 16 milionů možných barev, jelikož lidské oko není schopno všechny odstíny odlišit a také z důvodu kompatibility různých zobrazovacích zařízení. Proto se určil systém tzv. bezpečných barev, které se na 100% zobrazí na všech zařízení. Na odkazech níže najdete články o pojmenovaní barev.

Generátor RGB kódů barev

Barva popředí (text)

color

barva čehokoliv se definuje vlastností COLOR a hodnotou barvy (viz výše)

selektor {color: #FF0000}
selektor {color: yellow}
selektor {color: rgb(128,128,128)}

Barva pozadí

background-color

barva pozadí čehokoliv se definuje vlastností BACKGROUNG-COLOR a hodnotou barvy

selektor {background-color: #FF0000}
selektor {background-color: yellow}
selektor {background-color: rgb(128,128,128)}

10.2 CSS - nastavení barev (cvičení)

Úkol

Ve složce WWW si vytvořte složku CV10.
Ze složky CV09 si zkopírujte všechny HTML a CSS soubory a složku IMG.
Soubor style.css upravte podle následujícího klíče:
- přidejte komentář "cv10"
- barva pozadí těla dokumentu: HEX kódem barva LightBlue,
- barva nadpisu 1. úrovně: HEX kódem barva MidnightBlue,
- barva nadpisu 2. úrovně: HEX kódem barva DarkBlue,
- barva nadpisu 3. úrovně: HEX kódem barva MediumBlue,
- barva nadpisu 4. úrovně: HEX kódem barva Blue,
- barva odstavců, odkazů, seznamů a tabulky: HEX kódem barva Navy.
Zkontrolujte na případné chyby a uložte.

11. CSS - vlastnosti písma

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_11

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastnosti písma

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Použití vybraných CSS vlastností pro nastavení písma.

Klíčová slova: font, font-family, font-style, font-variant, font-size, font-weight.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení písma.

Ověřeno: 21. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

11.1 CSS - vlastnosti písma (studijní text)

Vlastnosti písma

font-family

nastaví typ písma (font)
hodnotou je přesný název písma (např. Arial, Verdana, Tahoma, Times New Roman, atd.)
písmo musí být nainstalované v počítači (pozor na exotická písma), doporučuje se používat běžná písma (viz. Bezpečné webové fonty II. (CZ-pro.cz)
lze zapsat více typů písma najednou, použije se vždy první v pořadí (oddělují se čárkou)
doporučuje se uvádět i skupinu písma (serif - patkové, sans-serif - bezpatkové, monospace - strojopis)

selektor {font-family: Arial, Verdana, sans-serif}

font-size

nastaví velikost písma
hodnotou může být:
- klíčové slovo (xx-small, x-small, small, medium, large, x-large, xx-large),
- procento (vzhledem k nadřazenému prvku),
- obrazový bod (px) - velikost záleží na rozlišení monitoru,
- textový bod (pt) - jako ve Wordu (není stejné jako pixel), jeden textový bod je 0,35 mm.

selektor {font-size: 14pt}
selektor {font-size: 18px}
selektor {font-size: medium}
selektor {font-size: 125%}

font-weight

ztuční písmo (nahrazuje HTML element <b> nebo <strong>)
hodnotou může být:
- klíčové slovo (lighter, normal, bold, bolder)
- číslo (100, 200, ... , 900)

selektor {font-weight: bold}

font-style

nastaví písmu kurzívu (nahrazuje HTML element <i> nebo <em>)
hodnotou může být
- italic (nastaví kurzívu)
- normal (zruší kurzívu) - není povinné

selektor {font-style: italic}

font-variant

nastaví písmu kapitálky (malá písmena zobrazí jako velká písmena, ale jejich výška bude zachována)
hodnotou může být:
- small-caps (nastaví kapitálky)
- normal (zruší kapitálky) - není povinné

selektor {font-variant: small-caps}

Jednotný zápis vlastnosti písma

Vlastnosti písma lze nastavit přímo pomocí jednoho zápisu, je však potřeba dávat si pozor na přesné pořadí zápisu hodnot.

font

přesné pořadí: [font-style] [font-variant] [font-weight] [font-size] [font-family]
lze vynechat, ale dodržet následné pořadí

selektor {font: italic small-caps bold 16pt Tahoma, sans-serif}
selektor {font: bold 12pt Arial, sans-serif}

11.2 CSS - vlastnosti písma (cvičení)

Úkol

Ve složce WWW si vytvořte složku CV11.
Ze složky CV10 si zkopírujte všechny soubory a složku IMG.
Soubor style.css upravte podle následujícího klíče:
- přidejte komentář "CV11",
- formát nadpisu 1. úrovně: tučně, velikost 26 bodů (pt), typ písma Verdana,
- formát nadpisu 2. úrovně: kapitálky, tučně, velikost 18 bodů (pt), typ písma Verdana,
- formát nadpisu 3. úrovně: tučně, velikost 12 bodů (pt), typ písma Verdana,
- formát nadpisu 4. úrovně: kurzíva, velikost 12 bodů (pt), typ písma Verdana,
- formát odstavců, odkazů, seznamů: velikost 11 bodů (pt), typ písma Arial,
- formát tabulky: velikost 10 bodů (pt), typ písma Verdana.
Zkontrolujte na případné chyby a uložte.

12. CSS - vlastnosti textu

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_12

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastnosti textu

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení textu.

Klíčová slova: text-align, line-height, text-decoration, text-indent, text-transform, letter-spacing.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení textu.

Ověřeno: 28. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

12.1 CSS - vlastnosti textu (studijní text)

Vlastnosti textu

text-align

nastaví vodorovné zarovnání všech blokových prvků
hodnotou může být:
- left (zarovnání k levému okraji)
- center (zarovnání na střed)
- right (zarovnání k pravému okraji)
- justify (zarovnání do bloku)

selektor {text-align: center}

line-height

nastaví výšku řádku neboli řádkování
hodnotou může být:
- desetinným číslem (pozor používá se desetinná tečka),
- procento (150% odpovídá 1,5 řádkování),
- délka (px, pt)

selektor {line-height: 1.5}
selektor {line-height: 150%}
selektor {line-height: 12pt}
selektor {line-height: 16px}

text-decoration

nastaví různé efekty pro písmo
hodnotou může být:
- underline (podtržení)
- overline ("nadtržení")
- line-through (přeškrtnutí)
- none (žádné)
upozornění: tato vlastnost se doporučuje používat jen u hypertextových odkazů (podle zásad správného webu nemá být text, který není hypertextovým odkazem, jakkoliv podtržený)

selektor {text-decoration: underline}

text-indent

nastaví odsazení prvního řádku v odstavci
hodnotou může být
- délka (px, pt)
- procento (podle nadřazeného prvku)

selektor {text-indent: 15px}

text-transform

nastaví různou velikost textu
hodnotou může být:
- capitalize (první písmena slov budou velká)
- uppercase (všechna písmena se zobrazí jako velká)
- lowercase (všechna písmena se zobrazí jako malá)
- none (žádné)

selektor {text-transform: uppercase}

text-shadow

nastaví stín textu
hodnoty se zapisují v přesném pořadí: posunX posun Y rozmázání barva
lze vynechat hodnotu rozmazání (stejné jako hodnota 0px)
- délka (px, pt)
- barva (slovně, hexa-kódem,...)

selektor {text-shadow: 5px 10px 3px #00FF00}
selektor {text-shadow: 3px 3px black}

letter-spacing

nastaví větší mezeru mezi písmeny
hodnotou může být:
- délka (px, pt)

selektor {letter-spacing: 5pt}

Problematika zarovnání obrázků a odkazů

jelikož obrázky <IMG>, odkazy <A> a tabulky <TABLE> jsou chápány jako řádkové prvky, nefunguje přímo vodorovné zarovnání pomocí vlastnostini text-align,
řešením je "obalení" blokovým prvkem, nejčastěji pomocí oddílu <DIV>,
poté lze nastavit CSS vlastnosti pro vodorovné zarovnání "obalujícímu" HTML prvku.

12.2 CSS - vlastnosti textu (cvičení)

Úkol

Ve složce WWW si vytvořte složku CV12.
Ze složky CV11 si zkopírujte všechny soubory a složku IMG.
Soubor style.css upravte podle následujícího klíče:
- přidejte komentář "CV12",
- formát odstavců: řádkování 150 %, zarovnání do bloku,
- formát nadpisů: všechna písma velká,
- formát tabulky: zarovnání na střed.
Zkontrolujte na případné chyby a uložte.

13. CSS - vlastnosti seznamů

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_13

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastnosti seznamů

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení seznamů.

Klíčová slova: list-style-type, list-style-position, list-style-image.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení seznamů.

Ověřeno: 4. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

13.1 CSS - vlastnosti seznamů (studijní text)

Jelikož oba dva typy seznamů obsahují převážně text, platí na ně stejné CSS vlastnosti jako pro písmo či text.

list-style-type

nastaví požadovaný typ odrážky nebo číslování
hodnotou pro netříděné seznamy může být:
- disc (puntík)
- circle (kolečko)
- square (čtvereček)
hodnotou pro tříděné seznamy může být
- decimal (desítkové číslování)
- upper-alpha (velká písmena)
- lower-alpha (malá písmena)
- upper-roman (velká římská číslice)
- lower-roman (malá římská číslice)
pro oba dva typy seznamů
- none (vypne odrážky nebo číslování)

ul li {list-style-type: circle}
ol li {list-style-type: upper-alpha}

list-style-position

nastaví, zda se má odrážka zobrazit mimo úroveň textu nebo v úrovni textu
praktické využití je minimální
hodnotou může být:
- outside (mimo úroveň textu - výchozí, není potřeba definovat)
- inside (v úrovni textu)

ul li {list-style-position: inside}

list-style-image

nastaví místo odrážky obrázek
pozor: obrázek musí mít správné rozměry (malé rozměry v řádu jednotek pixelů)
hodnotou je URL neboli cesta k obrázku (cesta je v závorce oddělena anglickými uvozovkami)

ul li {list-style-image: url('img/odrazka2.gif')}

Podmínkou umístění obrázku "odrazka2.gif" ve složce "img".

13.2 CSS - vlastnosti seznamů (cvičení)

Ve složce WWW si vytvořte složku 13.
Ze složky 12 si zkopírujte všechny soubory, včetně složky IMG.
Soubor style.css upravte podle následujícího klíče:
- přidejte komentář "CV13",
- formát netříděného seznamu: typ odrážky čtverec, řádkování 1,25;
- formát tříděného seznamu: typ číslování desítkové, řádkování 1,25;
Zkontrolujte na případné chyby a uložte.

14. CSS - vlastní a složené styly

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_14

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastní a složené styly

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vlastních a složených kaskádových stylů CSS.

Klíčová slova: třída, class, identifikátor, id, vlastní styl, složený styl.

Metodické zhodnocení: Žáci se naučí používat vlastní a složené kaskádové styly CSS.

Ověřeno: 18. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

14.1 CSS - vlastní a složené styly (studijní text)

Doposud jste se setkali s kaskádovými styly, které upravovali vzhled určitého HTML prvku (selektorem byla HTML značka). Nevýhodou značkového selektoru je, že upravuje veškerý výskyt těchto HTML prvků.

Může však nastat situace, kdy potřebujete nastavit styl pouze některé části (např. pouze některým odstavcům). Řešením může být stylovat každý odstavec přímým CSS stylem, avšak je to zdlouhavé a nepřehledné.

Nejlepším řešením je vytvořit si vlastní pojmenovaný styl a poté pouze odkazovat na tento styl. V CSS se rozlišují dva druhy vlastních stylů. První z nich jsou třídy a druhé jsou identifikátory. Rozdíl mezi nimi je jen v jejich používání. Třídy se mohou na jedné HTML stránce vyskytovat mnohokrát, identifikátory pouze jednou.

Vlastní styly

Třídy

místo značkového selektoru (např. h1, p, img,...) lze napsat libovolný text pomocí znaků anglické abecedy (bez háčků a čárek) a číslic
zakázané jsou i mezery a interpunkce (tečky, dvojtečky, vykřičníky, otazníky, středníky, atd.), povoleny jsou podtržítka (_) nebo spojovníky (-)
důležité je uvést před libovolným textem tečku (tím se odlišuje třída od značkového selektoru)

.muj-styl {color: white; background-color: black}

aby HTML dokument věděl, který vlastní styl má použít, musíte u vybraného HTML prvku uvést pomocí atributu class název vlastního stylu (pozor, uvádí se bez tečky)

<p class="muj-styl">Text odstavce</p>

Identifikátory

řídí se stejnými pravidly jako třídy s tím rozdílem, že místo tečky na začátku se uvádí mřížka #

#menu {width: 250px; background-color: blue}

v HTML dokumentu se poté u příslušného HTML elementu uvede atribut id a název identifikátoru bez křížku

<div id="menu">Hlavní menu</div>

Složené styly

Hromadný zápis

může nastat situace, kdy potřebujete například nastavit stejný typ písma všem nadpisům do třetí úrovně
lze to napsat standardně:

h1 {font-family: Verdana, sans serif}
h2 {font-family: Verdana, sans serif}
h3 {font-family: Verdana, sans serif}

nebo můžete využít hromadný zápis, kdy jednotlivé selektory oddělíte čárkou (je to určitě přehlednější a rychlejší)

h1, h2, h3 {font-family: Verdana, sans-serif}

Kontextový zápis

kontextový zápis se používá v situacích, kdy chcete stylovat určitý HTML element, který je uvnitř jiného elementu

h3 a {font-weight: bold}

to znamená, že veškeré odkazy, které jsou uvnitř nadpis h3 budou ztučněny, ostatních odkazů umístěných mimo nadpis h3 se toto nastavení netýká
kontextový zápis se velmi často využívá u seznamů nebo tabulek

Pseudotřídy hypertextových odkazů

Pseudotřídy jsou další variantou CSS selektoru, které mají předdefinovanou nějakou funkci. Tuto funkci však nelze měnit.

link

tato pseudotřída upravuje vzhled dosud nenavštíveného odkazu
váže se pouze k HTML značce <a>

a:link {color: red}

to znamené, že veškeré nenavštívené (neprokliknuté) odkazy budou zbareveny červeně

visited

tato pseudotřída upravuje vzhled již navštíveného odkazu.
váže se pouze k HTML značce <a>

a:visited {color: green}

to znamené, že veškeré již nenavštívené (prokliknuté) odkazy budou zbareveny zeleně

Dynamické pseudotřídy

hover

tato pseudotřída se použije pokud uživatel na vybraný element najede kurzorem myši.
lze ji přiřadit libovolnému HTML prvku (nejen odkazu)

h1:hover {color: yellow}

active

tato pseudotřída se použije pokud uživatel klikne ukazetelem myši nad vybraným elementem.
lze ji přiřadit libovolnému HTML prvku (nejen odkazu)

h1:active {color: orange}

14.2 CSS - vlastní a složené styly (cvičení)

Úkol

Ve složce WWW si vytvořte složku 14.
Ze složky 13 si zkopírujte všechny potřebné soubory.
Soubor priroda.html upravte podle následujícího postupu:
- každý obrázek a jeho popis v odstavci "obalte" novým oddílem <DIV>,
- tomuto oddílu nastavte vlastní třídu s názvem "na-stred".
Soubor mesta.html upravte podle následujícího postupu:
- všem odstavcům, které obsahují zdroj s URL odkazem nastavte vlastní třídu s názvem "doprava".
Soubor style.css upravte takto:
- přidejte komentář "CV14",
- pro vlastní třídu "na-stred" nastavte vlastnost zarovnání na střed,
- pomocí kontextového zápisu nastavte odstavcům uvnitř vlastní třídy "na-střed" zarovnání na střed a velikost písma na 10 bodů (pt),
- pro vlastní třídu "doprava" nastavte vlastnost zarovnání k pravému okraji,
- všechny odkazy nastavte tak, aby po najetí ukazatelem myši změnily barvu textu na červenou (barvu zapište RGB kódem).
Zkontrolujte na případné chyby a uložte.

15. CSS - nastavení ohraničení

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_15

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení ohraničení

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení ohraničení.

Klíčová slova: border, border-left, border-right, border-top, border-bottom.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení ohraničení.

Ověřeno: 11. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

15.1 CSS - nastavení ohraničení (studijní text)

Každému blokovému HTML prvku lze nastavit pomocí CSS stylů různá ohraničení. Lze nastavit ohraničení okolo nebo jen z některých stran. K nastavení ohraničení slouží CSS vlastnost "border".

border

tato vlastnost nastaví ohraničení ze všech stran
zápis vlastnosti border se skládá z více hodnot najednou
musí se dodržet přesné pořadí jednotlivých hodnot
první se udává tloušťka ohraničení
hodnotami může být:
- thin (slabé ohraničení),
- medium (střední ohraničení),
- thick (silné ohraničení)
- nebo rozměr (px, pt, em,...)
druhý se udává styl (typ) ohraničení
hodnotami může být:
- none (žádný),
- 2D efekt: dotted (tečkované), dashed (čárkované), solid (plné), double (dvojité),
- 3D efekt: groove (příkop), ridge (val), inset (ďolík), outset (návrší)
třetí se udává barva ohraničení
hodnotami může být:
- anglický název barvy
- hexadecimálně RGB kód
- desítkově RGB kód
- percentuálně RGB kód

Příklady CSS syntaxe

selektor {border: 2px solid black}
selektor {border: 8pt dotted #00FFFF}
selektor {border: thin inset rgb(255,255,255)}
selektor {border: none}

border-left, border-right, border-top, border-bottom

tato vlastnost nastaví ohraničení jen pro požadovanou stranu
můžete nastavit různá ohraničení pro jednotlivé strany
- border-left (levý ohraničení)
- border-right (pravé ohraničení)
- border-top (horní ohraničení)
- border-bottom (dolní ohraničení)
lze definovat jen tu stranu, kterou potřebujete ohraničit
zápis hodnot se posléze řídí stejnými pravidly jako vlastnost "border"

Příklady CSS syntaxe

selektor {border-left: 1px solid blue}
selektor {border-top: 2px dotted #00FFFF}
selektor {border-right: thick outset rgb(255,255,255)}
selektor {border-bottom: none}

border-radius

umožní nastavit zaoblení rohů ohraničeného prvku
hodnotou je poloměr zaoblení
- rozměr v pixelech
- procento z výšky nebo šířky prvku
lze zapsat i formou 4 hodnot (pro každý roh zvlášť)
- poté platí pořadí: horní levý roh - horní pravý roh - dolní pravý - dolní levý (ve směru hodinových ručiček)

Příklady CSS syntaxe

selektor {border-radius: 6px}
selektor {border-radius: 10%}
selektor {border-radius: 3px 3px 6px 6px}

15.2 CSS - nastavení ohraničení (cvičení)

Úkol

Ve složce WWW si vytvořte složku 15.
Ze složky 14 si zkopírujte všechny potřebné soubory.
Soubor style.css upravte podle následujícího postupu:
- přidejte na konec komentář "CV15"
- nadpisu 1. úrovně nastavte barvu pozadí RGB kódem na MidnightBlue, změňte barvu písma na bílou (RGB kódem),
- dále tomuto nadpisu nastavte plné ohraničení ze všech stran o šířce 4 pixely barvy MidnightBlue a zaoblení rohů na 8 pixelů,
- nadpisu 2. úrovně nastavte dolní plné ohraničení o šířce 2 pixely barvy stejné jako text,
- pomocí kontextového zápisu nastavte obrázkům plné ohraničení o šířce 5 pixelů barvy SteelBlue (RGB kódem), a zaoblení rohů na 5 pixelů.
Zkontrolujte na případné chyby a uložte.

16. CSS - nastavení okrajů

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_16

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení okrajů

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení vnitřních a vnějších okrajů.

Klíčová slova: vnitřní okraj, padding, vnější okraj, margin.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení vnitřních a vnějších okrajů.

Ověřeno: 14. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

16.1 CSS - nastavení okrajů (studijní text)

Při tvorbě webových stránek rozlišujeme dva typy okrajů HTML elementů:

vnější okraj - vzdálenost mezi ohraničením daného prvku a ohraničením jiného prvku
vnitřní okraj - vzdálenost mezi obsahem elementu a jeho ohraničením

Základním rozdílem mezi těmito okraji je vykreslování pozadí. Pod vnějším okrajem se pozadí elementu nevykresluje, naopak pod vnitřním okrajem ano.

Vnější okraj

margin

nejčastěji se definuje vnější okraj v pixelech (lze ho definovat i v jiných jednotkách)
hodnota okrajů se zapisuje po směru hodinových ručiček od horního okraje (top), dále pravý okraj (right), spodní okraj (bottom) a poslední levý okraj (left)

obecný zápis: selektor {margin: top right bottom left}

selektor {margin: 10px 15px 5px 20px}

Nastaveno bude: horní okraj 10 pixelů, pravý okraj 15 pixelů, spodní okraj 5 pixelů, levý okraj 20 pixelů.

pokud nastane situace, kdy potřebujete nastavit shodné okraje horní a dolní okraji nebo pravému a zároveň levému okraji, lze to zapsat zkráceně

obecný zápis: selektor {margin: top/bottom left/right}

selektor {margin: 10px 15px}

Nastaveno bude: horní okraj 10 pixelů, pravý okraj 15 pixelů, spodní okraj 10 pixelů, levý okraj 15 pixelů.

pokud nastane situace, kdy potřebujete nastavit shodné okraje pro všechny strany, lze to zapsat pouze jednou hodnotou

obecný zápis: selektor {margin: top/right/bottom/left}

selektor {margin: 20px}

Nastaveno bude: horní okraj 20 pixelů, pravý okraj 20 pixelů, spodní okraj 20 pixelů, levý okraj 20 pixelů.

Vodorovné zarovnání obsahu na střed

u pravého a levého okraje lze použít i hodnotu "auto", kdy budou vnější okraje automaticky dopočítány podle šířky nadřazeného prvku (okno prohlížeče, atd.)
toto se používá například při vycentrování blokových elementu na střed stránky, když nefunguje vlastnost text-align

selektor {margin: 0px auto}

margin-top, margin-right, margin-bottom, margin-left

vlastnosti pro jednotlivé vnější okraje
zapisuje se pouze jedna hodnota

selektor {margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;}

je totožné jako

selektor {margin: 10px 15px 20px 25px}

Vnitřní okraj

padding

zapisuje se též nejčastěji v pixelech
pravidla zápisu jsou totožná se zápisem vnějšího okraje "margin" (viz výše)

selektor {padding: 10px 15px 5px 20px}

selektor {padding: 10px 15px}

selektor {padding: 20px}

padding-top, padding-right, padding-bottom, padding-left

úplně stejné jako v případě vnějšího okraje

selektor {padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px;}

je totožné jako

selektor {padding: 10px 15px 20px 25px}

Blokový model CSS

Dále je důležité si uvědomit celkové rozměry blokového HTML prvku, kterému nastavíme vnější okraj, vnitřní okraj a navíc ohraničení.

Vysvětlíme si na příkladu:
Pokud nastavíte např. obrázku šířku (width) 400 pixelů, přidáte vnitřní okraj (padding) 10 pixelů, ohraničení (border) 5 pixelů a vnější okraj (margin) 20 pixelů, výsledná celková šířka, kterou HTML prvek zabere na stránce, bude součet těchto hodnot, tedy 470 pixelů !!! (levý vnější okraj 20 px + levé ohraničení 5 px + levý vnitřní okraj 10 px + šířka 400 px + pravý vnitřní okraj 10 px + pravé ohraničení 5 px + pravý vnější okraj 20px).

V praxi to znamená, že pokud máte omezený prostor na umístění blokového HTML prvku (např. šířka 400 pixelů), musíte zmenšit šířku daného HTML prvku o součet vnějšího, vnitřního okraje a ohraničení (v našem příkladu o 70 pixelů na výsledných 330 pixelů).

Obr. 1: Zvětšení rozměrů při použití okrajů a ohraničení.

Chybná interpretace vlastnosti width v Internet Exploreru

Internet Explorer chybně počítá celkové rozměry v blokovém modelu CSS tak, hodnoty ohraničení (border) a vnitřního okraje (padding) započítává do šířky (width), místo toho, aby je přípočítával k šířce.

Příčinou je to, že IE má jako výchozí nastaven nestandardní mód zobrazení (tzv. quirk mód). Ostatní prohlížeče (Firefox, Chrome, Opera) mají jako výchozí tzv. standardní mód, který správně interpretuje šířku (width).

Řešením je změna typu HTML dokumentu <!DOCTYPE> úplně na prvním řádku HTML kódu.

Standardní mód zobrazení

<!DOCTYPE HTML PUBLIC>

Nestandardní mód (quirk mód)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

16.2 CSS - nastavení okrajů (cvičení)

Úkol

Ve složce WWW si vytvořte složku 16.
Ze složky 15 si zkopírujte všechny potřebné soubory.
Soubory HTML upravte podle následujícího:
- veškerý obsah (vymezen značkou BODY) "obalte" novým oddílem DIV a přiřaďte mu vlastní identifikátor s názvem "obal"
Soubor style.css upravte takto:
- přidejte na konec komentář "CV16"
- nadpisu 1. úrovně nastavte horní a dolní vnitřní okraj na 5 pixelů,
- všem odstavcům nastavte vnější okraj na 10 pixelů,
- identifikátoru "obal" nastavte horní a dolní vnitřní okraj na 5 pixelů a pravý a levy vnitřní okraj na 20 pixelů,
Zkontrolujte na případné chyby a uložte.

17. CSS - nastavení rozměrů a obtékání

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_17

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení rozměrů a obtékání

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení šířky, výšky a obtékání.

Klíčová slova: width, height, float, clear.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení šířky, výšky a obtékání.

Ověřeno: 7. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

17.1 CSS - nastavení rozměrů a obtékání (studijní text)

Definování rozměrů (šířky a výšky) pomocí CSS stylů je velmi důležité pro úpravu webových stránek do požadované podoby (například nahoře záhlaví, vlevo menu, vpravo obsah,...).

rozměr lze nastavit prakticky jakémukoliv HTML prvku (odstavci, nadpisu, tabulce, obrázku)
pro práci s rozměry existují dvě základní CSS vlastnosti: width (šířka) a height (výška)

Rozměry

width

vlastnost určující šířku prvku
pozor na správné pořadí písmenek: width
hodnotou může být:
- délka (px)
- procento (%)
- auto (automatické dopočítání šířky)
v případě použití procenta se šířka vypočítává ze šířky nadřízeného prvku (okno prohlížeče, obalující blokový prvek)
hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)

selektor {width: 500px}

height

vlastnost určující výšku prvku
pozor na správné pořadí písmenek: height
hodnotou může být:
- délka (px)
- auto (automatické dopočítání výšky)
hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)

selektor {height: 300px}

Příklady použití rozměrů

Definování rozměrů se při tvorbě webových stránek řídí několika pravidly.

Pokud chceme ovlivnit šířku nebo výšku vložených obrázků, je vhodnější použít přímý styl CSS nebo příslušné HTML atributy u značky <img>.
Pro definování rozměrů univerzálních oddílů <div> je vhodné použít naopak externí zápis do CSS souboru ve spojení s vytvořením vlastní třídy CSS.

<img src="obrazek.jpg" width="350">

Příklad nastavení rozměrů obrázku pomocí atributu HTML.

<img src="obrazek.jpg" style="width: 350px;">

Příklad nastavení rozměrů obrázku pomocí přímého stylu CSS.

<img src="obrazek.jpg" style="width: 50%; height: auto;">

U takto nastaveného rozměru obrázku se šířka vždy automaticky přizpůsobí na polovinu šířky okna prohlížeče.

<h1 style="width: 350px; font-size: 24pt; background-color: yellow;">Nadpis</h1>

Příklad zobrazí nadpis 1. úrovně, který bude mít žluté pozadí, velikost písma 24 textových bodů a šířku 350 pixelů.

Obtékání

Obtékání textu (stejně jako v textovém editoru) funguje v omezené míře v HTML. HTML prvek, kterému nastavíte obtékání, se posune k pravému nebo levému okraji nadřazeného prvku. Na uvolněné místo se posune HTML element, který je za ním (jsou mu zkráceny řádky o šířku obtékaného prvku).

float

nastaví obtékání vybranému HTML prvku, který však musí mít nastavenu šířku vlastností "width"
lze nastavit hodnotu left (prvek se posune k levému okraji a prvek za ním ho bude obtékat zprava) nebo right (prvek se posune k pravému okraji a prvek za ním ho bude obtékat zleva)
obtékáním se z prvku stává blokový prvek

selektor {float: left}
selektor {float: right}

clear

na konci každého prvku, který obtéká jiný prvek (je mu nastavena vlastnost "float"), se musí nastavit tzv. "ukončení obtékání"
nejčastěji se používá prázdný oddíl (<div>), kterému je přímým stylem přiřazena vlastnost "clear"
za tímto prvkem se všechen další obsah vykresluje bez obtékání
vlastnost "clear" má tři hodnoty:
- left (ukončí levé obtékání)
- right (ukončí pravé obtékání)
- both (ukončí oba dva typy obtékání)

selektor {clear: left}
selektor {clear: both}

Příklad použití obtékání

<h1>Nadpis</h1>
<div style="width: 300px">
  <img src="obrazek.jpg" style="float: left">
  <p>Běžný text v odstavci</p>
</div>
<div style="clear: left"></div>

Příklad nejprve zobrazí nadpis, pod ním u levého okraje obrázek a text odstavce zobrazí u pravého okraje obrázku, oddíl ukončí obtékání.

17.2 CSS - nastavení rozměrů a obtékání (cvičení)

Úkol

Ve složce WWW si vytvořte složku 17.
Ze složky 16 si zkopírujte všechny potřebné soubory.
Soubor mesta.html upravte následujícím způsobem:
- vložené obrázky "obalte" oddílem <DIV> a nastavte mu třídu s názvem "obtekani".
Soubor style.css upravte následujícím způsobem:
- na konec vložte komentář "CV17"
- identifikátoru "obal" nastavte šířku 800 pixelů, barvu pozadí bílé (RGB kódem), zaoblení ohraničení na 10 pixelů a vycentrujte pomocí vnějšího okraje,
- třídě "obtekani" nastavte typ obtékání vlevo, pravý vnější okraj 10 pixelů a dolní vnější okraj 5 pixelů,
- pomocí kontextového zápisu nastavte obtékaným obrázkům zaoblení ohraničení na 10 pixelů,
- třídě "doprava" nastavte ukončení levého obtékání.
Zkontrolujte na případné chyby a uložte.

18. CSS - formátování tabulky

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_18

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - formátování tabulky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro formátování tabulky.

Klíčová slova: formát tabulky, border-collapse, border-spacing.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro formátování tabulky.

Ověřeno: 7. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

18.1 CSS - formátování tabulky (studijní text)

Při formátování tabulky je potřeba dbát na to, kterou část tabulky chcete upravovat. Jak už víte, tabulka se skládá z několika částí (hlavička, tělo, řádek, buňka, atd.).

Podle toho, jakou část chcete upravovat, musíte přizpůsobit značkové selektory pomocí kontextového zápisu (viz. CSS - vlastní a složené styly).

Kontextový zápis podle části tabulky

Upravovaná část tabulky	Kontextový zápis selektoru
Celá tabulka	table {...}
Celá hlavička tabulky	table thead {...}
Celé tělo tabulky	table tbody {...}
Všechny buňky hlavičky	table th {...}
Všechny ostatní buňky	table td {...}

Pokud byste chtěli upravovat jen některé řádky nebo sloupce tabulky musíte si vytvořit vlastní styly a tyto styly přiřadit daným částem.

<table>
  <thead>
    <tr>
      <th>řádek 1, sloupce 1</th>
      <th class="druhy-sloupec">řádek 1, sloupce 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="druhy-radek">
      <td>řádek 2, sloupce 1</td>
      <td class="druhy-sloupec">řádek 2, sloupec 2</td>
    </tr>
    <tr>
      <td>řádek 3, sloupce 1</td>
      <td class="druhy-sloupec">řádek 3, sloupec 2</td>
    </tr>
  </tbody>
</table>

Všimněte si, že pokud chcete upravit jeden řádek, stačí přiřadit vlastní styl pouze jednou (třída stylu "druhy-radek"). Naopak, pokud chcete upravit jeden sloupec, musíte vlastní styl přiřadit v každém řádku tabulky (třída stylu "druhy-sloupec").

CSS vlastnosti použitelné při formátování tabulky

border-collapse

ohraničení buněk v tabulce se standardně vykresluje s mezerou
pokud chcete sloučit ohraničení (odstranit mezeru) použijte vlastnost border-collapse
funguje jen pro HTML značku <table>
hodnoty této vlastnosti jsou jen dvě:
- collapse (sousední buňky mají společné ohraničení)
- separate (výchozí oddělené ohraničení buněk)

table {border-collapse: collapse}

border-spacing

nastavení vzdálenosti mezi buňkami (v pixelech)
nahrazuje HTML atribut cellspacing
funguje jen pro HTML značku <table> a pokud není nastaveno společné ohraničení border-collapse

table {border-spacing: 5px}

Další formátování tabulky

Formátování	CSS vlastnost
Písmo a text	vlastnosti pro písmo a text (font-size, font-family, atd.)
Ohraničení tabulky nebo buněk	vlastnost *border* (nahrazuje HTML atribut border)
Pozadí tabulky nebo buněk	vlastnost *background-color* či *background-image*
Zarovnání textu v buňkách	vlastnost *text-align* (nahrazuje HTML atribut align)
Šířka tabulky nebo buněk	vlastnost *width* (nahrazuje HTML atribut width)
Výška tabulky nebo buněk	vlastnost *height* (nahrazuje HTML atribut height)
Vzdálenost tabulky od okolního obsahu	vlastnost *margin*
Vzdálenost obsahu buňky od jejího ohraničení	vlastnost *padding* (nahrazuje atribut cellpadding)
Vzdálenost mezi jednotlivými buňkami	vlastnost *border-spacing* (nahrazuje cellspacing)

Problematika vodorovného zarovnání tabulky vůči okolnímu obsahu

stejně jako u obrázků, tak tabulku nelze vycentrovat pomocí vlastnosti text-align
řešením je nastavit tabulce automatický levý a pravý vnější okraj (margin)
aby bylo možné automaticky dopočítat vnější okraj, tabulka musí mít nastavenu šířku (width)

table {width: 500px; margin: 0px auto}

bohužel toto nefunguje v Internet Exploreru
zde je řešení upravit první řádek HTML dokumentu zapnutím standardního módu

<!DOCTYPE HTML>

18.2 CSS - formátování tabulky (cvičení)

Úkol

Ve složce WWW si vytvořte složku 18.
Ze složky 17 si zkopírujte všechny potřebné soubory.
Souborem style.css upravte vloženou tabulku takto:
- přidejte na konec komentář "CV18",
- šířka tabulky: 600 pixelů,
- tabulka bude vycentrovaná na střed okna,
- horní a dolní vnější okraj tabulky: 10 pixelů,
- výška řádků: 30 pixelů,
- šířka 1. sloupce: 45 % (pomocí vlastního stylu: "prvni-sloupec"),
- šířka 2. sloupce: 40 % (pomocí vlastního stylu: "druhy-sloupec"),
- šířka 3. sloupce: 15 % (pomocí vlastního stylu: "treti-sloupec"),
- ohraničení tabulky: 4 pixely, plné, barva Navy (RGB kódem),
- ohraničení buněk: 1 pixel, plné barva Navy (RGB kódem),
- barva pozadí záhlaví tabulky: Navy (RGB kódem),
- barva textu záhlaví tabulky: White (RGB kódem),
- font záhlaví tabulky: tučně, velikost 11 bodů (pt) typ písma Verdana,
- sousední buňky nebudou mít společné ohraničení.
Zkontrolujte na případné chyby a uložte.

19. CSS - nastavení pozadí

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_19

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení pozadí

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení pozadí stránky.

Klíčová slova: background-image, background-position, background-repeat, background-attachment.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení pozadí stránky.

Ověřeno: 7. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

19.1 CSS - nastavení pozadí (studijní text)

Obrázek na pozadí

background-image

obrázek na pozadí čehokoliv se definuje vlastností BACKGROUNG-IMAGE a cestou k obrázku (tzv. URL)

selektor {background-image: url('img/obr1.jpg')}

v tomto příkladu to znamená, že obr1.jpg musí být uložen ve složce img (složka img je umístěna společně s HTML či CSS souborem)

Směr opakování obrázku na pozadí

background-repeat

každý obrázek na pozadí se vykreslí ve svislé i vodorovné ose tolikrát, kolik mu umožní šířka okna
pomocí vlastnosti BACKGROUND-REPEAT lze nastavit možnosti opakování obrázku na pozadí
funguje pouze při použití background-image
tato vlastnost má čtyři možné hodnoty
- repeat: obrázek se opakuje ve všech směrech (výchozí hodnota, není potřeba definovat)
- repeat-x: obrázek se opakuje jen ve vodorovném směru
- repeat-y: obrázek se opakuje jen ve svislém směru
- no-repeat: obrázek se zobrazí jen jednou a neopakuje se

selektor {background-image: url('img/obr1.jpg'); background-repeat: repeat-x}

Zákaz posouvání obrázku na pozadí

background-attachment

lze též obrázku na pozadí nastavit, zda se má posouvat spolu s obsahem nebo má zůstat zafixovaný na místě
funguje opět pouze při použití obrázku na pozadí
tato vlastnost má dvě možné hodnoty
- scroll: obrázek se posouvá spolu s obsahem (výchozí hodnota, není potřeba definovat)
- fixed: obrázek zůstává při posunu obsahu na místě

selektor {background-image: url('img/obr1.jpg'); background-attachment: fixed}

Pozice obrázku na pozadí

background-position

pomocí této vlastnosti lze ovlivnit pozici obrázku na pozadí daného prvku
vlastnost je funkční jen při současném použití vlastnosti background-image
k dispozici je vodorovné zarovnání v ose X
- left: obrázek bude zarovnán k levému okraji prvku
- center: obrázek bude zarovnám na střed prvku
- right: obrázek bude zarovnán k pravému okraji prvku
lze samozřejmě ovlivnit i svislé zarovnání v ose Y
- top: obrázek bude zarovnán k hornímu okraji prvku
- center: obrázek bude zarovnán na střed prvku
- bottom: obrázek bude zarovnán

selektor {background-image: url('img/obr1.jpg'); background-position: left top}
selektor {background-image: url('img/obr1.jpg'); background-position: center center}

Velikost obrázku v pozadí

background-size

vlastnost umožňuje roztažení nebo smrsknutí obrázku na pozadí
vlastnost je funkční jen při současném použití vlastnosti background-image
k dispozici je několik možných hodnot
- auto: obrázek na pozadí zobrazí neupravený, výchozí hodnota
- 100%: obrázek na pozadí se zvětší nebo zmenší tak, aby se na šířku vešel přesně jednou (výška obrázku se přizpůsobí), obrázek nebude deformován
- 100% 100%: obrázek na pozadí se zvětší nebo zmenší tak, aby se na šířku i výšku vešel přesně jednou, obrázek bude deformován
- contain: obrázek pozadí se zmenší nebo zvětší tak, aby se celý vešel do prvku (delší rozměr obrázku odpovídá delšímu rozměru prvku), obrázek se nedeformuje (pozadí se zobrazí celé)
- cover: obrázek pozadí se zmenší nebo zvětší tak, aby se kratší rozměr vešel do prvku, obrázek se nedeformuje, ale vede k tomu, že část pozadí není vidět

selektor {background-image: url('img/obr1.jpg'); background-size: 100%}
selektor {background-image: url('img/obr1.jpg'); background-size: cover}

19.2 CSS - pozice prvku na stránce (cvičení)

Úkol

Ve složce WWW si vytvořte složku 19.
Ze složky 18 si zkopírujte všechny potřebné soubory.
Soubor style.css upravte takto:
- přidejte na konec komentář "CV19",
- přidejte do pozadí obrázek, který si stáhněte zde a rozbalte jej do složky IMG,
- obrázek v pozadí nastavte tak, aby se neopakoval,
- dále aby obrázek nepohyboval při scrollování,
- a jeho pozice na stránce byla nastavena nahoře a na střed.
Zkontrolujte na případné chyby a uložte.

20. HTML - vnořené rámy a multimédia

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_20

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vnořené rámy a multimédia

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření vnořených rámů pomocí jazyka HTML a vkládání audia a videa do HTML.

Klíčová slova: iframe, vnořený rám, div, oddíl, html5, audio, video.

Metodické zhodnocení: Žáci se naučí vytvářet vnořené rámy pomocí jazyka HTML a vkládat audio a video přímo do HTML.

Ověřeno: 11. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

20.1 HTML - vnořené rámy a multimédia (studijní text)

Všechny moderní prohlížeče umožňují vložit do HTML stránky rám přesné velikosti a zobrazit v něm jinou stránku (této stránce říkáme "vnořená"). Obsah takto vnořené stránky může být zcela libovolný (textový i obrazový). Pro vnořené rámy se používá HTML značka <iframe> (čte se ajfrejm).

Použítí iframe je různé. Velice často se používá pro vkládání okna streamovaného videa z jiného serveru do vlastních stránek nebo mapové výřezu z mapových serverů.

Iframe není sice nejmodernější způsob tvorby webu, ale pro začínajícího tvůrce je vhodným startovacím způsobem tvorby stránek s více HTML soubory.

<iframe>

značka párová
povinnými atributu jsou src, width a height

<iframe src="priklad.html" width="400" height="200">
</iframe>

Atributy prvku

iframe má celou řadu dalších atributů, které je potřeba často uvádět, jelikož nejdou nahradit CSS stylem

src

obsahuje URL k souboru vnořené stránky

width a height

šířka a výška,
hodnotou může být velikost v pixelech nebo v procentech

scrolling

hodnota "no" nezobrazí rolovací lišty a vnořenou stránkou nepůjde rolovat,
hodnota "yes" zobrazí pravou rolovací lištu bez ohledu na to, je-li potřeba.

frameborder

hodnota 0 vypne zobrazování rámečků kolem vnořeného rámu.

marginheight, marginwidth

vnitřní okraje vnořené stránky v pixelech,
doporučenými hodnotami je 0,

align

nastavení obtékání (hodnoty right a left)

name

jméno vnořeného rámu, použitelné u odkazů (atribut target), které mají mířit do vnořeného rámu.

<iframe src="priklad.html" width="400" height="200" scrolling="no" frameborder="0"
marginheight="0" marginwidth="0" name="mujiframe">
</iframe>

Odkazy tam i zpět

odkazy se dají nasměrovat do různých rámů pomocí atributu target u odkazu.

Z nadřazené stránky do vnořeného rámu

v odkazu se použije u targetu jméno vnořeného rámu (atribut name)

<a href="stranka.htm" target="muj_iframe">Odkaz do vnořeného rámu</a>
<iframe name="muj_iframe" ...></iframe>

Z vnořeného rámu do nadřazené stránky

ve vnořené stránce bude

<a href="jina_stranka.html" target="_parent">Odkaz z vnořeného rámu</a>

Na závěr ochutnávka z nového HTML5

HTML5 je nový standard pro psaní v jazyce HTML
reaguje na změny ve struktuře webu, zejména na vkládání multimediálního obsahu
HTML5 dnes již podporuje většina moderních webových prohlížečů

Multimediální obsah na webu

Audio

pro přímé vložení audio do stránek slouží párová značka AUDIO
tato značka má několik povinných a nepovinných atributů
první z povinných je atribut CONTROLS, který vám zobrazí v prohlížeči ovládací panel
dalším povinným je atribut SRC, ve kterém určujete cestu k audio souboru (může to být relativní odkaz nebo URL odkaz na jiný web) a atribut TYPE, ve kterém uvádíte typ audio souboru
oba dva tyto atributy se zapisují do nepárové značky SOURCE
uvádí se navíc i alternativní text v případě, že někdo používá nepodporovaný webový prohlížeč

Ukázka kódu

<audio controls>
  <source src="http://www.server.cz/audio.mp4" type="audio/mp4">
  <source src="http://www.server.cz/audio.mp3" type="audio/mp3">
  <source src="http://www.server.cz/audio.ogg" type="audio/ogg">
  <p>Váš prohlížeč nepodporuje HTML5 audio element.</p>
</audio>

Podporované formáty

bohužel ne všechny webové prohlížeče podporují všechny audio formáty
nejlepší volbou je formát MPEG (.mp3) nebo AAC (.mp4, .m4a, .aac), který podporují všechny nejpoužívanější prohlížeče vč. Internet Exploreru a Edge
dalším hojně používaným formátem je OGG (.ogg, .oga), ten však nepodporuje Internet Explorer a Edge

Video

pro přímé vložení videa do stránek slouží párová značka VIDEO
tato značka má několik povinných a nepovinných atributů
první z povinných je atribut CONTROLS, který vám zobrazí v prohlížeči ovládací panel
dalším povinným je atribut SRC, ve kterém určujete cestu k audio souboru (může to být relativní odkaz nebo URL odkaz na jiný web) a atribut TYPE, ve kterém uvádíte typ audio souboru
oba dva tyto atributy se zapisují do nepárové značky SOURCE
uvádí se navíc i alternativní text v případě, že někdo používá nepodporovaný webový prohlížeč
přidat lze i atribut POSTER, kterým nastavíte úvodní snímek před spuštěním videa

Ukázka kódu

<video poster="http://www.server.cz/movie.jpg" controls>
  <source src="http://www.server.cz/movie.ogv" type="video/ogg">
  <source src="http://www.server.cz/movie.mp4" type="video/mp4">
  <p>Váš prohlížeč nepodporuje HTML5 video element.</p>
</video>

Podporované formáty

bohužel ne všechny webové prohlížeče podporují všechny video formáty
nejlepší volbou je formát H.264 (.mp4, .m4v), který podporují všechny nejpoužívanější prohlížeče vč. Internet Exploreru a Edge, avšak jedná se o komerční formát
možnou alternativou je svobodný formát OGG (.ogg, .ogv), ten však nepodporuje Internet Explorer, Edge nebo Safari

Skládání jednoduché webové stránky z blokových prvků

Většina webových stránek v dnešní době je vytvořena tak, že obsah je složen pomocí HTML blokových prvků (DIV, atd.) a vzhled je definován pomocí CSS šablony (tzv. layout).

každá stránka má záhlaví (angl. header), ve kterém je umístěn hlavní nadpis charakterizující obsah stránek
pod záhlavím je většinou umísěno menu a obsah
hlavní menu se nejčastěji nachází vpravo nebo vlevo od hlavního obsahu (může být i nad hlavním obsahem pod záhlavím)
na konci stránky je zápatí (angl. footer), ve kterém jsou informace o autorovi stránek, atd.
celé stránky bývají většinou vycentrované na střed a nezabírají celou šířku obrazovky, z důvodů lepší čitelnosti textu

Příprava HTML souboru index.html

vytvořte si nový HTML soubor a pojmenujte jej INDEX.HTML
upravte první řádek souboru s deklarací "!doctype" podle ukázky níže
v souboru index.html si vytvořte nový oddíl DIV a přiřaďte mu identifikátor "page"
tento oddíl bude sloužit pro vycentrování stránek na střed obrazovky
dále si uvnitř toho oddílu vytvořte 4 nové oddíly DIV
přiřaďte jim identifikátory: "header", "menu", "content", "footer", přesně v tomto pořadí

Příprava CSS souboru

vytvořte si nový CSS soubor a pojmenujte jej STYL.CSS
nalinkujte tento soubor do hlavičky souboru INDEX.HTML (viz ukázka výše)

Úprava CSS souboru

Oddíl "page"

tento oddíl slouží pro nastavení základní šířky a vycentrování na střed okna
šířka by neměla přesáhnout 1000 pixelů (zachování čitelnosti textu)
můžete zde též nastavit typ písma pro celou stránku

Oddíl "header"

hlavička zabírá většinou celou šířku stránky
má pevně nastavenou výšku
doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

Oddíl "menu"

tento oddíl obsahuje jen položky hlavního menu
jednotlivé položky lze vytvořit opomocí odstavců, seznamů či tabulky
má pevně stanovenou šířku
nastavuje se mu obtékání podle požadovaného umístění menu (vpravo nebo vlevo od obsahu)
doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

V případě, že požadujete umístění menu při pravém okraji, změňte hodnotu "left" na "right".

Oddíl "content"

tento oddíl obsahuje hlavní obsah stránek
obtéká oddíl menu zprava nebo zleva (podle nastavení)
nastavuje se mu šířka, která je zmenšená o šířku menu (např. 760 px - 200 px = 560 px)
doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

V případě, že požadujete umístění menu při pravém okraji, změňte hodnotu "right" na "left".

Oddíl "footer"

tento oddíl se vkládá proto, aby ukončil obtékání, které je aktivní kvůli menu a obsahu
šířka je většinou shodná s celkovou šířkou a může mít pevně stanovenou výšku
doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

Vytvoření menu pomocí <iframe>

vytvořte si nový HTML soubor a uložte si jej pod názvem MENU.HTML,
nezapomeňte nalinkovat do těchto HTML souboru CSS soubor STYL.CSS,
do souboru INDEX.HTML vložte do oddílu s identifikátorem "menu" nový IFRAME odkazující na výše vytvořené HTML soubory,
šířku IFRAME nastavte na "100%" (rozměry jsou již vyřešeny v CSS souboru) a výšku IFRAME nastavte na 500 pixelů.

Příklad kódu v souboru index.html

Příklad kódu v souboru menu.html

Teď už je celá šablona webové stránky hotová. Následujícími kroky jsou doplnění obsahu, menu, atd. a nastavení konečného barevného vzhledu. :-)

20.2 HTML - vnořené rámy a multimédia (cvičení)

Vytvořte sadu webových stránek za použití postupu popsaného ve studijním materiálu.

Povinný obsah

záhlaví (header)
menu (alespoň 10 položek, umístěné vlevo nebo vpravo od hlavního obsahu)
hlavní obsah
zápatí (footer)

Téma webových stránek

podle zadání vyučujícího

Hlavní obsah budou tvořit:

nadpisy minimálně H2 a H3
text v odrážkách (minimálně 10 řádků)
alespoň 3 obrázky
audio ukázka se zobrazeným přehrávačem

Stránky budou doplněny o obrázek v pozadí o šířce 1920 pixelů, umístěné tak, aby se pozadí neposouvalo s obsahem.

Barevné schéma stránek libovolné, avšak v barvách vzájemně ladících. Pro výběr vhodných barev využijte např. Paletton.com.

Formální požadavky

hlavní stránka bude pojmenována index.html,
veškeré styly CSS budou zapsány v externím souboru: style.css,
položky menu budou zapsány v souboru: menu.html,
veškeré cesty k multimediálnímu obsahu (obrázky, zvuk) budou tvořeny URL odkazem na server Wikipedia Commons a řádně odcitovány,

1. sada: Základy HTML a CSS

9. ročník

1. HTML - základy syntaxe

Název: HTML - základy syntaxe

1.1 HTML - základy syntaxe (studijní text)

Značkový jazyk HTML

HTML soubor

HTML prvek

Jak se značky zapisují neboli syntaxe?

Obecný zápis HTML

Příklad zápisu HTML

Vnoření značek

Správný zápis vnořené značky

Nesprávný zápis vnořené značky

Velikost znaků

Klávesy Enter a Tab při zápisu HTML

1.2 HTML - základy syntaxe (cvičení)

Odpovězte na otázky

1. Jaká je správná přípona HTML souborů?

2. Vyber jediné správné tvrzení.

3. Vyber jediný správný zápis vnořených značek.

4. Rozlišují se malá a velká písmena při zápisu samotné HTML značky?

5. V jakých případech se vždy zobrazí jen jedna mezera?

6. Vyber jediný správný zápis HTML.

2. HTML - základní struktura

Název: HTML - základní struktura

2.1 HTML - základní struktura (studijní text)

HTML dokument

<HTML>

Hlavička (záhlaví) dokumentu

<HEAD>

<TITLE>

<LINK>

<STYLE>

<SCRIPT>

Tělo HTML dokumentu

<BODY>

Příklad základní struktury HTML souboru

2.2 HTML - základní struktura (cvičení)

Úkol

3. HTML - blokové prvky

Název: HTML - blokové prvky

3.1 HTML - blokové prvky (studijní text)

Blokové prvky

<P>

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>

<DIV>

<BR>

3.2 HTML - blokové prvky (cvičení)

Úkol č. 1

Úkol č. 2

Použité zdroje

1. Česko. In: Wikipedie: otevřená encyklopedie [online]. 2011. vyd. [cit. 2011-10-19]. Dostupné z: http://cs.wikipedia.org/wiki/Česko.

4. HTML - řádkové prvky

Název: HTML - řádkové prvky

4.1 HTML - řádkové prvky (studijní text)

Řádkové prvky

<STRONG>

<EM>

<B>

<I>

<SUB>

<SUP>

<SPAN>

4.2 HTML - řádkové prvky (cvičení)

Úkol č. 1

Úkol č. 2

5. HTML - vytváření seznamů

Název: HTML - vytváření seznamů

5.1 HTML - vytváření seznamů (studijní text)

Netříděný (odrážkový) seznam

Příklad č.1

Příklad č. 2

Tříděný (číslovaný) seznam

5.2 HTML - vytváření seznamů (cvičení)

Úkol č. 1

Úkol č. 2

6. HTML - vkládání obrázků

Název: HTML - vkládání obrázků

6.1 HTML - vkládání obrázků (studijní text)