03 HTML a styly

Samotný HTML dokument se nemusí skládat jen z HTML tágů. Může obsahovat části které používají jiný než HTML jazyk. Například programová části požívá příkazy JavaScriptu a je ohraničená tágy <script> </script>. Podobně můžeme do HTML dokumentu umístit kaskádové styly, tedy část v které definujeme vzhled dokumentu. Ty umístíme mezi tágy <style></style>.

Tyto speciální tágy, fungují jako hranice - překročíme-li je, jsme v jiné zemi a musíme používat jiný jazyk (JavaScript, nebo CSS). Překročíme-li koncový tág </style>, nebo </script> zase jsme tuto zemi opustili a můžeme zase vesele používat jen HTML.

MujWeb.html - tuto šablonu můžeš využít jako základ k vytvoření vlastního webu.

CSS - kaskádové styly

Kaskádové styly slouží k nastylování (načačání) webu. Zatím co HTML samotné řeší jen obsahovou část, pomocí stylů dáváme webu vzhled. Můžeme tedy nastavit barvy textů, pozadí, velikost obrázku, odsazení, pozice, atd. atd.

Chceme-li nastylovat například velikost a barvu nadpisu <h1>, umstíme do hlavičky HTML dokumentu následující:

<HTML>
   <HEAD>
        <STYLE>
               H1 { color: blue; font-size: 20px; }
        </STYLE>
   <HEAD>
...

Tímto se nám všechny nadpisy označené tágem <h1>, zobrazí modře a budou mít velikost 20pixel. Vzhled jednotlivých tágů tedy definujeme:

název_tágu { název_vlastnosti : hodnota ; název_vlastnosti : hodnota; }

vlastnosti jsou ve složených závorkách odděleny středníkem.

Více o kaskádových stylech najdete například tady: https://www.jakpsatweb.cz/css/. Najdete tam mimo jiné seznam vlastností, které můžete při stylování webu používat.

Pro rychlé vyzkoušení stylů, doporučují tento online editor css - poměň hodnoty v kódu vlevo a klikni na zelené tlačítko Run (hodnoty css_vlastností jsou zvýrazněné modře).

 

Kam dál?