NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov

Prezentace na téma: "NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov"— Transkript prezentace:

1 NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
AUTOR: Ivana Mačková NÁZEV: VY_32_INOVACE_SADA5_INF.9.11 TÉMA: HTML – členění textu ČÍSLO PROJEKTU: CZ.1.07/1.4.00/

2 Anotace Materiál HTML – členění textu Vzdělávací obor Informatika
Tematický okruh HTML – tvorba www stránek Anotace Výukový materiál slouží k vysvětlení příkazů pro členění textu v html dokumentech. Očekávaný výstup Žák se seznamuje s příkazy pro psaní nadpisů, odstavců, pro čáry oddělující text html dokumentů; jejich funkčnost si zkouší na příkladech. Druh učebního materiálu Prezentace Stupeň a typ vzdělávání Základní vzdělávání – druhý stupeň, 9. ročník

3 HTML – ČLENĚNÍ TEXTU

4 NADPISY To, že text má být nadpisem, v HTML dokumentu zajistíme párovými tagy <h1>, <h2>, <h3>, …, <h6>. největší nadpis nejmenší nadpis ÚKOL: Vytvořte HTML dokument podle předlohy, uložte jako nadpisy.html a zobrazte v prohlížeči.

5 Nadpisy v prohlížeči

6 JAK BUDEME TVOŘIT ODSTAVCE V HTML DOKUMENTECH?
Nejdříve si zopakujeme zásady pro členění textu ve Wordu. Jakou klávesou ukončujeme odstavec? Klávesou ENTER. Jak přejdeme v odstavci na nový řádek? Kombinací kláves SHIFT + ENTER. JAK BUDEME TVOŘIT ODSTAVCE V HTML DOKUMENTECH? Odstavce tvoříme v HTML pomocí párového tagu <p> …………. </p> Mezi tyto značky vkládáme text, který má tvořit odstavec.

7 Atribut pro zarovnání odstavce
Odstavec zarovnáváme pomocí atributu align. <p align="left">     odstavec zarovnán vlevo <p align="center">  odstavec zarovnán na střed <p align="right">   odstavec zarovnán vpravo <p align="justify">   odstavec zarovnán do bloku  Více odstavců můžeme zarovnat najednou jejich vložením mezi značky <div> …… </div>. Přechod na nový řádek V odstavci přejdeme na nový řádek pomocí tagu <br>.

8 ÚKOL: Vytvořte html dokument s těmito 2 odstavci – zarovnejte je do bloku Po jeho uložení jej zobrazte v prohlížeči.

9 A takto to vypadá v prohlížeči.

10 Speciální typ odstavce
Je tvořen párovým tagem <pre> …….. </pre> . Tímto tagem vytvoříme odstavec, kde se text formátuje přesně tak, jak je napsán v html dokumentu včetně mezer, nových řádků apod.  ÚKOL: Vytvořte html dokument přesně podle předlohy Po jeho uložení jej zobrazte v prohlížeči.

11 V prohlížeči se odstavec zobrazil úplně stejně jako v html dokumentu.

12 Oddělování textu vkládáním čar
Text můžeme oddělovat od sebe i graficky vkládáním čar. Vodorovnou čáru vložíme pomocí tagu <hr>. Jeho atributy jsou: size - tloušťka čáry (v bodech) color - barva čáry width - délka čáry (v bodech nebo procentech) align - zarovnání čáry  Například:

13 A takto vypadají čáry v prohlížeči.

14 Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora