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/21.2609

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

HTML – ČLENĚNÍ TEXTU

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.

Nadpisy v prohlížeči

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.

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>.

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

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

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.

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

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:

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

Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora www.office.microsoft.com www.office.microsoft.com