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ů?

  1. .htm
  2. .www
  3. .html
  4. .web

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

  1. Nepárová značka má na konci zakončovací značku s lomítkem.
  2. Párová značka se skládá jen z počáteční značky.
  3. 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.

  1. Normální text <b>tučný text, <i>tučný text s kurzívou</i></b>
  2. Normální text <b>tučný text<i></b>, tučný text s kurzívou</i>
  3. 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?

  1. Ano
  2. Ne

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

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

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

  1. <fontsize="2"color="blue">Modrý text</font>
  2. <font size=2 color=blue>Modrý text</ font>
  3. <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 04 si stáhněte a rozbalte soubor cv04.zip.
  • Ze složky 03 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í:

  1. Vymezení části HTML souboru pro tabulku
  2. Hlavička tabulky
  3. Tělo tabulky
  4. Řádek tabulky
  5. 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}

Tři možnosti zápisu CSS

Styl lze nadefinovat trojím způsobem.

  1. Přímým zápisem jako atribut u vybraného HTML prvku (tzv. přímý styl).
  2. Zápisem tzv. stylopisu v hlavičce HTML souboru.
  3. 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.

  1. anglické pojmenování barvy
    • např.: red, green, blue, yellow,
    • nejjednodušší, ale omezené množství barev
  2. 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
  3. 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:
    • 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:
    • 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:
    • 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:
    • 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 nastavce vlastní třídu s názvem "doprava".
  • Soubor style.css upravte takto:
    • 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:
    • 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:
    • 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.

  1. 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>.
  2. 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:
    • 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:
    • šíř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 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,