Určitě jste již navštívili velké množství webových stránek. Napadlo vás někdy, co je v pozadí těchto stránek? Že tyto stránky mají svého autora? Stejně jako knihy. Každá webová stránka se skládá minimálně ze dvou věcí – z HTML a CSS. Stejně tak vaše stránka na Zombeekovi. Pojďme se podívat, co že to HTML a CSS vlastně je.
HTML neboli Hypertext Markup Language je značkovací jazyk. To znamená, že používá tzv. značky neboli tagy k označování obsahu. Pokud napíšete nadpis, tak musíte prohlížeči říct „toto je nadpis“. Předpokládejme, že nadpis bude znít Rychlé založení webu. Nemůžete prohlížeči napsat pouze:
Rychlé založení webu
Abyste prohlížeči dali najevo, že toto je skutečně nadpis, tak kolem něj napíšete značky (tagy) pro nadpis:
<h1>Rychlé založení webu</h1>
Značky „h“ znamená heading. To je v angličtině nadpis. Jednička je tam proto, že nadpisů existuje šest úrovní. Od <h1> až po <h6>.
Stejně tak je to s odstavcem. Nemůžete dát prohlížeči jen text.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Musíte napsat
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Znak p znamená paragraph tedy anglicky odstavec.
Pokud chcete přidat obrázek, tak použijeme tzv. nepárový tag. Zatím jsme používali párové tagy, které měli otevírací tag (např. <p>) a uzavírací tag (např. </p>). Uzavírací tag obsahuje lomítko. Nepárové tagy vypadají následovně:
<img src=“adresa obrázku“>
Img je od slova image tedy obrázek. Src znamná source, anglicky zdroj. Do src se umisťuje adresa obrázku.
Tady vidíte princip, jak html funguje. Je to opravdu jen obyčejný značkovací jazyk.
Oproti tomu CSS jsou tzv. styly (Cascading Style Sheets). Ty dávají html design – barvu, rámečky, umístění, typ písma, velikost písma atd. Jejich zápis není složitý. Např.
h1 {
background-color: blue;
}
Tento zápis říká, že h1 (tedy nadpis) by měl mít modré pozadí. Background znamená pozadí, color je anglicky barva a blue znamená modrá. Není to tak složité, že?
p {
font-size: 16px;
color: black;
}
Tento zápis říká, že odstavce by měli mít velikost písma 16 pixelů a barvu písma černou.
