Uncategorized

Co je to HTML a CSS – jak na tvorbu webových stránek

Zkoušeli jste někdy tvořit webové stránky? Není to až tak náročné. Chce to trochu cviku a píle, ale není to nic, co by se kdokoli nedokázal naučit.

Všechna videa na YouTube kanále Zgrade

Za svůj život jsem vytvořil přes 1.500 video tutoriálů a návodů. Lidé se mě ptali, jestli nechci udělat návody na to, jak se naučit tvořit webové stránky. Tak jsem si řekl, proč ne.

Webové stránky se tvoří pomocí dvou jazyků:

  • html jazyk (tzv. značkovací jazyk),
  • css jazyk (tzv. kaskádové styly).


Pokud jste se s tvorbou webovek ještě nikdy nesetkali, tak vám tyto pojmy přijdou asi zvláštní. Není to ale nic složitého. Prvním jazykem, který se musíte naučit, je HTML jazyk. Jedná o značkovací jazyk. Představte si následující situaci. Budete chtít, aby prohlížeč zobrazil následující větu “10 nejvíce sledovaných videí na YouTube”. Jak to dopadne? Asi takto.

html v prohlížeči

Prohlížeč větu sice zobrazí, ale vůbec netuší, co je to za větu. Je to odstavec, nadpis nebo jiný text? Proto používáme tzv. značky v HTML jazyce, abychom dali prohlížeči jasně najevo, co za text má zobrazit. To můžete udělat následovně.

H1 v html jazyce

Značky h1 říkají, že se jedná o tzv. heading první úrovně = nadpis první úrovně. Prohlížeč (v našem případě Google Chrome) text vezme a zobrazí ho větším písmem a tučně. Proč? Protože s ním nakládá jako s nadpisem. A takto postupně říkáte prohlížeči, co má zobrazit. Používáte k tomu HTML značky. Na obrázku výše vidíme tzv. párové značky. To znamená, že určují začátek <h1> a konec </h1>. Všimněte si, že otevírací a uzavírací značky se od sebe ničím neliší. Jen tím, že uzavírací značka má u sebe lomítko.

A takto bychom v HTML prohlížeči řekli, že daný text je odstavec. Odstavec se anglicky řekne paragraph, takže značkou bude písmo “p”. Na obrázku vidíte, že se text zobrazil normálně – není tučný, ani větší. Je to jen obyčejný text v odstavci. Tedy tak s ním prohlížeč nakládá.

Odstavec v html

No jo, ale co ten druhý jazyk? CSS jazyk. To jsou tzv. styly. Asi jste si všimli, že HTML jazyk nevypadá nic moc. Bylo by fajn, kdybychom přidali barvy, stíny, zarovnání apod. A to můžeme pomocí CSS jazyka. Jeho zápis je jednoduchý.

CSS a barva nadpisu

Nejdříve napíšete tzv. selektor – v tomto případě h1. Tím říkáte, že z HTML jazyka se budete zabývat značkou h1. Poté napíšete složené závorky (pravý Alt + B) a dovnitř zadáte, co se má s elementem HTML stát. My jsme zadali, že se má obarvit červeně (color = barva, red = červená). Nesmíme zapomenout na konci střední, který slouží pro ukončení pokynu. A je to. Vidíme, že nadpis h1 se skutečně červeně obarvil. Snadné, že?

Pojďme si u odstavce obarvit pozadí na barvu aqua (takže něco jako vodová barva). Zápis je naprosto stejný. Výsledek také vidíme.

CSS a barva pozadí

Není to tak hrozné, že? Podstatu HTML a CSS tedy známe. Jen ještě doplním, že učit se HTML a CSS jazyk je to samé, jako učit se jakýkoli cizí jazyk. Prostě ho musíte používat. V tomto případě psát, psát a psát. No jo, ale kam se HTML a CSS píše? To si povíme v následujícím videu a článku. Nyní nám šlo jen o pochopení podstaty.

David Šetek

David Šetek

Před sedmi lety jsem založil projekt ekospace.cz, kde jsem zdarma vzdělával studenty z celé ČR a SR. Od ekonomie, přes matematiku až po management. Rozhodl jsem se posunout vzdělání na vyšší úroveň a založil jsem nový projekt setekcollege.cz. Cílem je ukázat školám, jak může vzdělání na vysokých a středních školách vypadat. Může být zábavné, praktické a smysluplné. Tento blog patří k projektu setekcollege, kde se budu formou článků a videí s lidmi dělit o novinky ve vzdělání, názory a zkušenosti získané praxí. Již přes 5 let pracuji v online marketingu a poslední rok trávím tím, že se učím informačním technologiím.

Budu rád, pokud mi napíšete své názory