HTML 5 – Lekce 2

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

Leave a Reply