HTML, CSS učebnice

Odkazy

Struktura projektu

Vytvořte si u sebe na disku projekt (adresář) s vaším uživatelským jménem, kam si budete postupně přidávat práci. Tu pak budeme nahrávat na webový server.
Struktura adresáře:

        vouska
            - index.html          - stránka vašeho profilu
            - projekt01           - složka prvního projekt
                - index.html
            - projekt02           - složka druhého projekt
                - index.html
                - dalsi.html

Co je to HTML stránka

HTML stránka je textový soubor, který pomocí značek (tagů) definuje strukturu dokumentu. Čili můžeme vyznačit nadpisy, odstavce, tabulky atd. Dále nám stránka umožňuje do dokumentu vložit jiné zdroje - například obrázky, videa atd. Podstatnou součástí HTML stránky jsou též hypertextové odkazy, pomocí kterých můžeme přecházet na jinou část stránky, nebo na stránky jiné.

Dřívější verze HTML v sobě také obsahavaly formátování - čili popis, jak mají jednotlivé části stránky vypadat (barva, pozadí, odsazení, font atd.). V HTML verze 5 se budeme snažit popisovat pouze strukturu dokumentu. Formátování budeme provádět pomocí jiného nástroje, který se budeme učit později. Tento nástroj se nazývá CSS - Kaskádové styly.

Kostra stránky

Takto vypadá základní kostra každé HTML stránky. Zobrazí se pouze ten text, který je v elementu body. To, co se nachází v elementu head je spíše pro prohlížeč, či vyhledávač. Můžeme zde uvádět, jakým jazykem je stránka psaná, jaké má kódování (to je důležité kvůli správnému zobrazení diakritických znaků), kdo je autorem stránky a také klíčová slova, která jsou podstatná pro vyhledávání stránky.

Vlastnosti HTML stránky

skládá se z elementů - tagů
tagy mohou mít atributy
většina tagů je párových - otevírací a zavírací tagy se liší lomítkem html a /html
závorková struktura - tagy se nesmí křížit ~~p a /p /a~~
nezáleží na velikosti písmen tagů, ale pojďme psát malá
ignorují se mezery, nové řádky atd. - prázdné znaky

Syntaxe HTML elementu

Většina HTML elementů je zapsána pomocí počátečního (otevíracího) a koncového (zavíracího) tagu. To co je mezi těmito tagy, nazýváme obsah elementu. Elementy mohou také obsahovat dodatečné atributy, které se zapisují do otevíracího tagu. Většina atributé se skládá ze jména a hodnoty atributu.

Ne všechny elementy jsou párové. Některé mají pouze otevírací tag a nemohou mít tudíž žádný obash (ovšem to neznamená, že nemohou mít atributy). Takovým říkáme prázdné elementy. Mezi takové patří například br, hr a jiné.

HTML elementy můžeme rozdělit do dvou skupin:

blokové - zabírají 100% dostupné šířky a prohlížeč před nimy i za nimy uddělá novou řádku.
inlinové - zaberou pouze tolik místa, kolik zabírá jejich obsah. Neprobíhá u nich k odřádkování.

Platí pravidlo, že Blokové elementy by neměly být vkládány do inlinových elementů.

Atributy definují dodatečnou vlastnost elementu jako šířka, výška atd. Atributy se vždy uvádějí v otevíracím tagu a většinou se sestávají z názvu atributu a hodnoty tag atribut1="hodnota" atribut2="hodnota". U některých tagů jsou některé atributy povinné - například u obrázku musíme definovat, odkud se má obrázek nahrát img src="letadlo.png" alt="Obrázek letadla na letišti".

Základní tagy

Následuje seznam HTML5 tagů, které budeme používat. Pokud byste chtěli, můžete si projít úplný seznam HTML5 tagů.

Nadpisy
Odstavec
Obrázky
Odkazy
Video

Zalomení řádky
Čára
Seznamy
Tabulky

Nadpisy

Nadpisy zapisujeme pomocí blokových párových tagů hx. Za x můžeme dosadit číslo podle úrovně odkazu. Čím menší číslo, tím důležitější nadpis.

Odstavec

Text v HTML stránce můžeme uzavřít do tagu p, který představuje odstavec. Do odstavce bychom neměli míchat jiné blokové tagy. Výjimku tvoří vynucené odřádkování (zalomení řádky), které je uváděno dále.

Zalomení řádky

Pokud někdy v textu potřebujeme vynutit zalomení řádky, můžeme použít nepárový tag br.

Vodorovná čára

Pro vizuální oddělení textu nebo sekcí můžeme použít nepárový tag pro horizonrálná čáru tag hr.

Obrázek

Pokud chceme do dokumentu vložit obrázek, použijeme tag img. Tento tag má dva povinné atributy, které říkají, odkud se má obrázek nahrát src a jaký text se má zobrazit v případě, že z nějakého důvodu není možné obrázek zobrazit alt. U obrázku také můžeme uvést jeho rozměry pomocí atributu width a height.

Místo, odkud chceme obrázek nahrát, můžeme uvést buďto pomocí absolutní nebo relativní cesty. Absolutní cesta obsahuje celé URL obrázku - tedy příklad src="https://www.gymtrebon.cz/skin/img/logo.png". Pokud máme obrázek uložený ve stejném adresáři jako html soubor, můžeme uvést pouze relativní cestu src="logo.png". Popřípadě, pokud by byl obrázek v podadresáři images, tak takto src="images/logo.png".

Odkazy

Hypertextové odkazy nám umožňují plynule přecházet z jednoho místo na druhé. A to v rámci buď jedné stránky nebo i celého webu. Odkaz se skládá ze dvou částí. Popisek odkazu se zapisuje mezi otevírací a zavírací tag a. Adresa, na kterou nás kliknutí na odkaz přenese, se zapisuje do atributu href.

Adresu hypertextové odkazu, který odkazuje na novou stránku, můžeme zadat (podobně jako u obrázků) pomocí absolutní nebo relativní adresy.

Můžeme také řídit to, jakým způsobem se odkaz otevře - zda ve stejném nebo v novém okně prohlížeče. Toho můžeme docílit pomocí atributu target. Hodnoty tohoto atributu jsou následující:

_blank - otevře odkaz v novém okně
_self - otevře odkaz ve stejném okně

V případě, že se chceme pohybovat v rámci jedné stránky, musíme na začátek adresy přidat znak #. Místo, kam nás má odkaz přenést, pak označíme pomocí atributu id.

Video

Do stránky můžeme vkládat i jiné zdroje - například video. Následující ukázku můžete použít, pokud máte URL adresu přímo mp4/avi/mpeg souboru. A to buď někde na webu nebo u sebe v počítači.

Pokud chcete vkládat video z youtube, tak to musíte udělat trochu jinak. Na youtube u konkrétního videa klikněte na SDÍLET. Otevře se dialog, kde vyberete možnost vložit - ikona se zobákama. Vygeneruje se vám HTML kód (tag iframe) a ten si vložte do té své stránky.

Zvýrazňovací tagy

Důležitost některých částí textu můžeme zvýraznit pomocí "tučných" tagů b či strong. Pro zvýraznění kurzívou můžeme použít i či em.

Seznamy

Pomocí HTML můžeme text strukturovat do seznamů několika typů.

Nečíslované seznamy

Pro nečíslovaný seznam použijeme párový tag ul. Do něho pak vpisujeme jednotlivé položky pomocí párového tahu li. Prohlížeč pro každou položku zobrazí odrážku na začátku řádky. Zkratka ul doslova znamená nečíslovaný seznam. Zkratka li znamená položka seznamu.

Číslované seznamy

Pro číslovaný seznam použijeme párový tag ol. Do něho pak vpisujeme jednotlivé položky pomocí párového tahu li. Prohlížeč pro každou položku zobrazí na začátku řádky pořadové číslo. Zkratka ol doslova znamená číslovaný seznam. Zkratka li znamená položka seznamu.

Tabulky

Pomocí HTML můžeme definovat tabulky. Tabulky by se měly využívat pouze pro skutečná tabulková data (třeba naměřené hodnoty fyzikálního pokusu) a nikoli pro formátování celé stránky do sloupců atd. Pro hlavní tag Tabulky použijeme párový tag table. Jelikož implicitně jsou tabulky bez rámečku, ukážeme si jeden atribut, pomocí kterého rámeček vykreslíme. Nicméně až budeme umět používat Kaskádové styly, tak bychom i rámeček měli definovat pomocí nich. Prozatím tedy k tabulce uvedeme atribut border="1".

Každá řádka pak bude zabalena do párového tagu tr (Table Row). Každá buňky na každém řádku pak bude označena tagem td (Table Data) nebo th (Table Header) v případě, že se jedná o záhlaví tabulky.

Každá tabulka může mít svůj nadpis zapsaný do tagu caption.

V případě, že potřebujeme, aby nám jedna buňka zasahovala do více řáků/sloupců (v terminologii MS Excelu by se jednalo o sloučení buňky), můžeme toho docílit pomocí atributu rowspan (počet řádek, které buňka zabírá) nebo colspan (počet sloupců, které buňka zabírá).

Tagy pro rozložení stránky

V HTML5 byly zavedeny nové tagy, které mají za úkol více strukturovat obsah na stránce. Mají ale asi spíše smysl pro vyhledávače, protože neimplikují žadné specifické chování. Pokud pomocí nich chceme naformátovat vzhled stránky, stejně musíme formátování docílit pomocí kaskádových stylů. Jedná se o Tagy

header - typicky logo a záhlaví stránky
footer - typicky copyright a zápatí stránky
main - specifikuje hlavní obsah dokumentu, může být jen jeden
nav - navigace webu - odkazy v navigačním menu
section - hlavní část

Zde naleznete podrobnější český popis těchto strukturních tagů.

Krom toho v HTML velice často používáme dva párové tagy, které nemají žádný hierarchický význam. Slouží pouze pro rozdělení struktury stránky pro potřeby formátování - více v kaskádových stylech.

div - obecný blokový tag
span - obecný inlinový tag

CSS

CSS je zkratka pro technologii Kaskádové styly. Jedná se o nástroj pro formátování HTML stránek. Dříve se formát (jako třeba barva písma, pozadí, tloušťka rámečku, font atd.) uváděl přímo do HTML ke každému tagu zvlášť. Ale to se ukázalo jako nepraktické hlavně v následujícíh případech:

V momeňtě, kdy například chcete naráz změnit barvu pro všechny odstavce v dokumentu - musíte to měnit na několika místech.
Chcete stejný formát používat na několika stránkách.
Chtěli byste mít několik formátů pro jednu stránku a chcete formát měnit v závislosti na tom, zda si stránku prohlížíte v mobilu nebo na PC.

S řešením těchto problémů přišly právě kaskádové styly.

Co jsou kaskádové styly?

Kaskádové styly nám umožňují formátovat HTML stránky díky dvěma nástrojům.

Formátovací vlastnosti - CSS zavádějí množinu vlastností (barva, font, velikost, odsazení atd.), které můžeme přiřadit jednotlivým tagům. Podle těchto vlastností se pak obsah HTML tagů bude vykreslovat v prohlížeči. Každý tag má stanovenou množinu vlastností, které mu můžeme přiřadit. Množinu nejčastějších vlastností můžeme vidět v doc dokumentu CSS styly nabo na JakPsatWeb nebo www.tutorialrepublic.com nebo www.w3.org.
Výběr formátovaných tagů - CSS zavádějí možnost, jak vybrat množinu tagů, kterým chceme formátovací vlastnost nastavit. V CSS se to dělá pomocí tzv. selektorů, což jsou pravidla, jak hromadně vybrat tagy, které chceme formátem postihnout - např. vybrat všechny tagy, které se mají zobrazit červenou barvou.

Jak můžeme kaskádové styly připojit k HTML stránce?

CSS nabízí tři možnosti jak připojit styl ke stránce. Jednotivé možnosti si budeme ukazovat na vlastnosti color.

Inline styl - vlastnosti můžeme zapsat zvlášť ke každému tagu pomocí atributu style

Embedded styl - pravidla a vlastnosti můžeme definovat v hlavičce HTML stránky pomocí tagu style

Externí styl - pravidla a vlastnosti můžeme definovat v externím souboru, který v hlavičce HTML stránky připojíme přes tag link.

U prvního způsobu je vidět, že musíme stejný formát opakovat u každého odstavce. A to není šikovné. Proto tento způsob nebudeme používat. Hodí se maximálně k tomu, když potřebujeme nějakou vlastnost u konkrétního tagu dočasně vyzkoušet - když ladíme vzhled HTML dokumentu.

Druhý a třetí způsob se liší akorát v tom, že formátovací pravidla buď zapisujeme přímo do hlavičky HTML stránky, nebo do externího souboru, kterému se říká CSS sheet a má příponu .css. Třetí možnost je nejlepší, protože nabízí možnost, jak jeden CSS soubor připojit do více stránek. A pak tedy například změna v definici barev se projeví ve všech stránkách naráz. Samozřejmě lze přilinkovat i více CSS souborů do jedné stránky a pak vybírat příslušný CSS soubor podle potřeb. Vzhled stránky se pak může úplně lišit. Zkuste se podívat na následující web CSSZenGarden, kde můžete přepínat použité CSS soubory pro jednu a tu samou stránku.

Jak prohlížeč pozná, jaký formát má pro vykreslení obsahu HTML elementu použít?

Otázka z nadpisu se dá přeložit například takto: když má prohlížeč vykreslit odstavec na mé stránce, jak pozná, jakou barvou a jakým fontem má text odstavce vykreslit? Přesná odpověď na tuto otázku je celkem složitá. My si ukážeme alespoň základní postup, podle kterého se můžete řídit.

Jestliže jsme v CSS souboru pro konkrétní HTML element napsali nějaká formátovací pravidla, vybere se pravidlo s největší prioritou a jeho hodnota se použije.
Pokud se žádné takové pravidlo nenašlo, prohlížeč vybere vlastnost následovně:
- Pokud jde o vlastnost, která se dědí, použije se hodnota z nadřazeného elementu - viz obrázek. U každé vlastnosti je uvedeno, zda se dědí nebo ne. Například barva písma se dědí, kdežto velikost odsazení se nedědí.
- Pokud jde o vlastnost, která se nedědí, použije se její výchozí hodnota. Každá vlastnost má svou výchozí hodnotu.

Takže zkráceně se dá říct, že do hry vstupují dva aspekty: dědičnost a přiřazení vlastností pomocí pravidel kaskády. Přiřazení má před dědičností přednost. Pokud pro potomka neuvedeme konkrétní pravidlo, které by elementu přiřazovalo hodnotu vlastnosti, zdědí element tuto hodnotu od svého rodiče. Jinými slovy, pokud pro odstavec nenastavím barvu pozadí, zdědí barvu pozadí od elementu, ve kterém se nachází. Graficky se dá tento algoritmus zobrazit takto:

Jak vybrat tagy, kterým chceme nastavit formátovací vlastosti?

Existuje celá řada možností, jak napsat pravidla pro výběr tagů, které chceme naformátovat. Tato pravidla vyjadřujeme pomocí tzv. selektorů. Selektory nabízejí několik možností, jak tagy v HTML dokumentu určit.

Abychom to lépe pochopili, představíme si kód HTML stránky pomocí grafu - tzv. stromu. Na začátku jsme si řekli, že HTML musíme zapisovat tak, jako kdyby se jednalo o závorky matematického výrazu - každou závorku musíme otevřít a pak ve správném pořadí zase zavřít. A zároveň se závorky nesmí křížit. Čili HTML kód lze graficky zobrazit tak, jak to ukazuje obrázek. Je vidět, že každý element má svého rodiče a rodič může mít několik potomků. To budeme potřebovat. Je to vidět na následující ukázce HTML kódu. Zároveň můžeme stromovou strukturu vidět v prohlížeči pomocí nástrojů pro vývojáře.

Práci se selektory si ukážeme na příkladu nastavování barvy pozadí na červeno. Vlastnost barvy pozadí se v CSS zapíše následovně background-color: red;.

Univerzální selektor

Pomocí znaku * můžeme zacílit na všechny tagy v dokumentu. Čili všem elementům se nastaví stejná vlastnost. Tento selektor se ani moc nepoužívá.

Tag selektor

Pomocí názvu tagu můžeme zacílit na všechny tagy tohoto jména v dokumentu. Čili následující příklad nastaví všem odstavcům v dokumentu červené pozadí.

ID selektor

Tagy v dokumentu můžeme označit unikátním identifikátorem pomocí atributu id - hodnota tohoto atributu musí být v celém dokumentu unikátní. Ve stylech se pak na tento tag můžeme pomocí znaku # odkázat. Pokud bychom tedy měli tag p id="xyz", můžeme jeho pozadí (a pouze jeho) nastavit následovně.

Class selektor

Tagy v dokumentu můžeme přiřazovat do logických celků pomocí atributu class="xyz" - každý tag, který má tento atribut uvedený patří do skupiny xyz. Tagy mohou patřit i do několika skupin najednou. Například tento odstavec patří do skupiny abc i do xyz - p class="abc xyz". Ve stylech se pak na tyto skupiny tagů můžeme odkázat pomocí znaku .. První řádka v ukázce nastaví červené pozadí všem tagům patřící do třídy prv. Druhá řádka dělá to samé, ale pouze pro odstavce patřící do třídy prv.

Skupinový selektor

Tento selektor je vlastně kombinace všech předchozích selektorů. Použijeme ho, když chceme stejné vlastnosti uvést najednou pro všechny tagy definované několika selektory. Zapisuje se pomocí znaku čárky ,, která odděluje jednotlivé selektory. Ukázka nastaví červené pozadí všem nadpisů, první i druhé úrovně a zároveň všem odstavcům spadajícím do třídy prv.

Potomkový selektor

Tento selektor, který se zapisuje pomocí znaku mazery , je také kombinací všech předchozích selektorů ovšem místo aby rozšiřoval množinu tagů, tak ji naopak omezuje pouze na ty, které jsou potomkem nadřazených tagů. Pro tento selektor si potřebujeme představit HTML jako strom z obrázku výše. Například zápis z ukázky znamená, že chceme nastavit červené pozadí pouze těm odstavcům p, které se nacházejí jako potomek tagu section, který je potomkem tagu main. Žádný jiný odstavec červeně nastaven nebude.

Priorita selektorů

Samozřejmě se může stát, že v našem css souboru můžeme vytvořit konflikt. To znamená, že více selektorů nastavující různé vlastnosti se trefí do jednoho tagu. Které pravidlo se tedy použije? Obecně platí, že selektory mají své priority. Například uvedení # má větší prioritu než . a ten má větší prioritu než selektor se jménem tagu. Dá se to vyzkoušet na stránce výpočtu priority. Pokud se stane, že jsme nadefinovali dva selektory se stejnou prioritou, použije se ten selektor, který je v souboru css uveden později.

Do priorit též vstupuje fakt, kde je css pravidlo uvedeno. Největší prioritu má v tomto směru inlinový zápis, pak embedded a nejmenší má zápis v externím souboru.

Které formátovací vlastnosti můžeme tagům přiřadit?

Podle dokumentu.

Písmo

Pozadí

background-color: red;
background-image: url('http://example.com/image.png');

Rozměry

Rozměry se řídí podle BOX modelu

K použití jsou varianty těchto tagů:

display: block | inline | none;
margin: 50px;
padding: 50px;
border: 1px solid black;
width: 50px;
height: 50px;

Tabulky

Seznamy

list-style-type: upper-roman | square | circle | none;

Pozicování

width: 10px | 1em | 55% | auto;
height: 10px | 1em | 55% | auto;
max-width: 10px | 1em | 55% | auto;
max-height: 10px | 1em | 55% | auto;
float: left | right | none;
clear: left | right | both;

Fixní menu v horní části stránky

Někteří se ptali, jak udělat fixní menu v horní části stránky jen pomocí CSS. Tady je příklad, jak by to šlo udělat - zároveň je tam ukázáno, jak změnit vlastnosti odkazu po najetí myší - v selektoru za a přidáme :hover.