HTML 5 – Lekce 2
V dnešní lekci si povíme něco o tom jak vkládat nadpisy, texty a jak je zalamovat, formátovat atd…
Zde je přehled mluvnice lekce 2 (tagy které budeme v této lekci používat) :
<p> – párový (nepovinně) – odstavec
<br> – nepárový – ukončení řádku
<center>- párový – vycentrování (starý způsob, ukážeme si nový)
<h1> – párový – největší nadpis
<h2> – párový – velký nadpis
<h3> – párový – větší nadpis/střední nadpis
<h4> – párový – menší nadpis/střední nadpis
<h5> – párový – malý nadpis
<h6> – párový – nejmenší nadpis
<b> – párový – tučné písmo
<i> – párový – kurzíva
<u> – párový – podtržení textu
Méně používané tagy (nejsou zas tak důležité, ale mohou se hodit):
<sub> – párový – dolní index
<sup> – párový – horní index
První tag, který si předvedeme, je tag <p>, tedy odstavec… myslím, že si nic nemusíme vysvětlovat. Zde jen názorný příklad:
<html>
<head>
</head>
<body>
<p> odstavec </p> –
<p> odstavec </p> – Vytvořili jsme odstavce
<p> odstavec </p> –
</body>
</html>
(Poznámka: to co je v html zápisu napsáno kurzívou nepište, jsou to jen poznámky, které upřesňují zápis.)
Druhý tag, který si předvedeme je tag <br>. Tento tag nám způsobuje ukončení řádku.
Může se využít jak v textu, tak u odstavení obrázků, atd… Slouží jako klávesa „Enter“ v textovém editoru.
Názorný příklad:
<html>
<head>
</head>
<body>
<p> nějaký text </p> – Napsali jsme text do odstavce
<br> – Ukončili jsme řádek
<br> – Ukončili jsme další řádek
<p> nějaký text </p> – Napsali jsme další libovolný text do odstavce
</body>
</html>
Nyní si ukážeme jak by vypadalo zarovnání odstavce pomocí starého HTML způsobu a porovnáme ho s novým způsobem:
<html>
<head>
</head>
<body>
<p align=“left“> nějaký text </p> – Nyní jsme zarovnali odstavec pomocí atributu align
<center> <p> nějaký text </p> </center> – Nyní jsme zarovnali text pomocí elementu center
</body>
</html>
Tag <center> se již moc nepoužívá a nahrazuje se pomocí CSS vlastnostmi, např margin: auto. Stejně tak starší řešení zarovnání pomocí HTML je atribut align. Tento atribut lze napsat do čehokoliv, co chceme zarovnat (doleva= align=“left“; vpravo = align=“right“), např. do obrázků, odstavců, tabulek, a podobně. Samotný tag <center> a atributy jako align v dnešních prohlížečích ještě občas fungují, ale nejnovější verze HTML 5 je již oficiálně nepodporuje. Ukážeme si názorný příklad jak využití CSS vlastnosti text-align.
Tyto tagy a atributy jsou tedy nahrazeny zápisem CSS vlastnosti pomoci atributu style. Zápis takového atributu vypadá stejně jako zápis jakéhokoliv jiného atributu, s rozdílem že v atributu již používáme klasický zápis jako v CSS. Tento příklad by tedy nově zapsaný vypadal takto:
<html>
<head>
</head>
<body>
<p style=“text-align: left;“>Tento text jsme zarovnali doleva.</p>
<p style=“text-align:center;“>Tento text jsme zarovnali na prostředek. </p>
</body>
</html>
Pomocí tagů <h1> až <h6> se vkládají nadpisy. Číslo v tomto tagu označuje velikost nadpisu, s tím že <h6> je nejmenší a <h1> největší. Myslím že není co dodat, snad jen praktický příklad (pokud je vůbec zapotřebí):
<html>
<head>
</head>
<body>
<h1> Nadpis </h1> – Vytvořili jsme největší nadpis
<p> nějaký text v odstavci </p>
</body>
</html>
Následující tagy <b>, <i> a <u> jsou pro zformátování textu do podtrženého písma, do kurzívy a do tučného písma. Asi již víte jaký tag bude mít jakou funkci. Je to stejné jako v textových editorech – World, Open Off. Writer, atd…
Pro ty co to nevědí, tak tag <b> označuje ztučněné písmo, tag <i> označuje kurzívu a tag <u> podtržené písmo.
Názorný příklad:
<html>
<head>
</head>
<body>
<h1>
<u> Nadpis, který má být podtržený </u> – tento nadpis bude po vložení kódu podtržený
</h1>
<i> Text, který má být napsán kurzívou</i> – tento bude psán kurzívou
<b> <p> Odstavec, který chcete napsat tučným písmem </p> </b> – tento odstavec bude ztučněn
</body>
</html>
V praxi se dnes používají spíše výjimečně, většina se nahrazuje zapisováním CSS stylu pomocí atributu style.
Nově by tedy tento příklad vypadal takto:
<html>
<head>
</head>
<body>
<h1 style=“text-align:center;“>Nadpis na prostředku stránky</h1>
</body>
</html>