XHTML a CSS
Vytvoření strukturovaného dokumentu
Pomocí tagů XHTML vytvořte dokument, který obsahuje nadpis úrovně 1, odstavec textu s libovolně velkou
částí vyznačenou jako tučný text, s odrážkovým seznamem (4 položky), obrázkem a hypertextovým odkazem.
TEORIE
Doporučení: rozsáhlým zdrojem informací týkajících se tvorby webových stránek je web www.jakpsatweb.cz
Základním stavebním prvkem XHTML je element, ten může být:
Značky – tagy slouží k označení elementu.
nesmí se křížit, ale mohou se vnořovat!!!
Struktura internetové stránky:
DOCTYPE
Každý správně formátovaný XHTML dokument by měl na začátku obsahovat informace o verzi použitého
HTML a typu DTD (Document Type Definition). DTD je jinými slovy návod pro prohlížeč zpracovávající dokument.
Říká mu, jaké elementy dokument používá a jak s nimi zacházet. Element DOCTYPE není součástí XHTML
dokumentu, není elementem XHTML a nemusí mít koncovou značku.
ZDROJOVÝ KÓD
Vše mezi <html> a </html>
HLAVIČKA
Obsah se nezobrazuje (vyjímka: <title> titulek stránky v záhlaví prohlížeče</title>), jsou zde ale informace,
které vyhodnocuje prohlížeč (použitá znaková sada) nebo vyhledávače (seznam klíčových slov).
TĚLO
To, co se objeví v okně prohlížeče. Prostor pro zápis všech elementů dané stránky.
<body>
.
.
Obsah stránky
.
.
</body>
Často používané tagy:
<h1>, <h2>, <h3> ... – nadpisy různých úrovní – blokové, párové tagy
<p> – odstavec (paragraph) – blokový, párový tag. Pozor! Dva odstavce za sebou prohlížeč vždy odděluje
odřádkováním (toto chování lze měnit pomocí stylů).
<br/> – řádkový zlom (break) = vynucené zalomení řádku – řádkový, nepárový tag (lomítko je za klíčovým slovem!)
<hr/> – horizontální čára (horizontal rule) – řádkový, nepárový tag
<ul>; <ol> – nečíslovaný seznam (unordered list) = odrážkový seznam; číslovaný seznam (ordered list) – b
lokové, párové tagy
<li> – položka seznamu (list item) – blokový, párový tag
Příklad: <ul>
<li>První položka</li>
<li>Druhá položka</li>
</ul>
<img/> – obrázek (image) – řádkový!, nepárový tag. Má dva povinné parametry: src (source) –
URL cesta k obrázku a alt (alternate) – alternativní text, ten se zobrazí v případě, kdy se obrázek načítá,
nebo když se nenačte vůbec (je špatně zadán parametr src).
Příklad: <img src="pictures/obrazek.jpg" alt="Obrázek"/>
Pozn.: Často používaným (a rozumným) postupem pro práci s obrázky je vytvořit pro ně v rámci webu
zvláštní složku (např. s názvem pictures). Je třeba mít dopředu nachystány obrázky přesných velikostí a
správných formátů (JPEG, GIF, PNG), neboť XHTML (na rozdíl od HTML) nedovoluje úpravu jejich velikostí
pomocí parametrů!
<a> – hypertextový odkaz (anchor) – párový tag. Má jeden povinný parametr href – cíl odkazu. Doporučuje se
používat i parametr title – popis cíle odkazu.
Příklad: <a href="http://www.kostka-skola.cz" title="Kostka Škola s.r.o.">www.kostka-skola.cz</a>
Typy odkazů:
<table> – začíná a končí tabulku – párový tag.
<tr> – začíná a končí řádek tabulky (table row) – párový tag.
<td> – tag buňky tabulky – párový tag.
<div> – blokový element bez významu – párový tag. Má klíčový význam při formátování velkých (navigace, záhlaví...)
i menších částí stránky pomocí CSS (viz dále). Ve výchozím stavu nemá žádné okraje!
<span> – řádkový element bez významu – párový tag. Používá se pro formátování části, či celého řádku pomocí CSS.
Taktéž nemá žádné výchozí okraje!
Pozn! Chci-li část kódu XHTML zakomentovat:
Všechno, co je v XHTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se!
<!-- je tedy začátek poznámky, --> její konec!
Formátování XHTML dokumentu
V dobách před kaskádovými styly se k formátování používalo prostředků HTML. Jednotlivé tagy mají definovány
řadu atributů (viz. www.jakpsatweb.cz ), prostřednictvím kterých lze obsah internetové stránky formátovat.
Dnes je tato filozofie považována za zastaralou a důrazně se doporučuje ji nepoužívat.
Příklad: <body bgcolor="yellow"> – barvou pozadí celé stránky bude žlutá
lépe <body style="background-color: yellow; "
Výjimkou je použití tagů pro základní úpravu textu: <b> – tučné písmo (bold), <i> – kurzíva (italica),
<u> – podtržený text (underline), <strike> - přeškrtnutý text, <sup> - horní index, <sub> - dolní index.
Všechny tyto značky jsou řádkovými elementy s párovými tagy.
Pozn:   – pevná mezera (not breaking space)
Tip! Zadej do Google „ “ -> nalezená stránka http://typografie.dero.name/typografie-entity.phtml =
pravidla pro použití různých entit (tj. speciálních znaků)
CSS
Kaskádové styly jsou technologie používaná pro formátovaní HTML dokumentů. Je to značkovací jazyk.
Historie
Kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. První návrh normy byl zveřejněn v roce 1994
, v roce 1996 byla pak vydána specifikace CSS 1, v roce 1998 CSS 2, nyní se pracuje na verzi CSS 3.
K čemu je to dobré?
CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s formátováním pomocí
atributů v HTML jsou formátovací schopnosti CSS mnohem větší. Styly umožňují přesně určit, jak bude který
element vypadat. Na rozdíl od atributů můžeme stylem definovat jednotný vzhled elementu pro celý dokument
(např. že všechny nadpisy úrovně 1 budou červené) a to jediným zápisem pro příslušný element (nikoli v každém
tagu příslušného elementu). Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný
výskyt určitého elementu. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód stane mnohem
přehlednější. Navíc pokud se jednou rozhodneme změnit například barvu písma všech odstavců, bude to pro
nás otázka několika málo vteřin, měnit každý atribut u každého elementu v HTML by byla katastrofa.
Jeden styl můžeme snadno použít pro libovolné množství stránek!
Nástin možností CSS
Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
Udělat odsazení prvního řádku odstavce, zvětšit řádkování
Zrušit nebo zvětšit prázdný prostor po odstavci
Zvýrazňovat odkazy po přejetí myší
Udělat automaticky grafické odrážky
Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít
přesnou pozici!
Umístit objekt (třeba kus textu) kamkoliv do stránky, objekty se mohou i překrývat
Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.
Možnosti umístění stylů:
h1 {color: green}
p {color: red}
</style>
Zápis stylu (platí pro možnosti umístění 2., 3.)
Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo
má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit).
V deklaraci určujeme vlastnost a její hodnotu. Následující styl zajistí, že všechny odstavce budou zobrazeny bíle s černým pozadím:
p {color:white; background-color:black;}
POZN! Z důvodu přehlednosti se často setkáme s formou zápisu kde každá vlastnost je na samostatném řádku:
p {
color:white;
background-color:black;
}
V každém případě: vše se musí zapisovat jako v příkladu - nejdříve selektor a pak deklarace, deklarace musí
být uzavřena do složených závorek { }, každá vlastnost se od hodnoty odděluje dvojtečkou (:), pokud zapisujete
více vlastností, musí se oddělit středníkem (;). I za poslední vlastností se píše středník! Proč? Viz…
Chceme-li pro více selektorů napsat stejnou deklaraci, napíšeme selektory za sebou a oddělíme je čárkami.
Následující příklad zajistí, že nadpisy h1-h4 se budou zobrazovat zeleně se zlatým pozadím.
h1, h2, h3, h4 {
color:green;
background-color:gold;
}
Třídy a identifikátory (class, id)
Pokud potřebujeme pro určitý element nastavit jiné zobrazení, například když všechny nadpisy nastavíme
nazeleno a jeden budeme chtít modrý, můžeme použít třídu (class), nebo identifikátor (id) jako selektor.
U každého elementu v XHTML můžeme přidat atributy class a id pomocí kterých můžeme na daný element
navázat styl, jako hodnoty se uvádí libovolné jméno (nesmí začínat číslicí!).
Pokud např. u nadpisu použijeme třídu a jako hodnotu uvedeme "modre"
<h1 class="modre">Nadpis</h1>
pak si můžeme vytvořit styl:
.modre { /*tomuto se říká globální třída – lze ji přiřazovat více značkám*/
color:blue;
}
nebo
h1.modre {
color:blue;
}
Stejným způsobem můžeme použít identifikátor. Pokud jako hodnotu id v hlavním nadpisu napíšeme např.
"modre" můžeme pak použít styl následovně:
#modre {
color:blue;
}
nebo
h1#modre {
color:blue;
}
Pozor!!! Identifikátor id s určitým jménem by měl být (dle specifikace XHTML) na stránce, na rozdíl od třídy,
jen jednou! (Z tohoto důvodu je první způsob deklarace identifikátoru jako globálního vlastně zcestný –
neodpovídá specifikaci – a proto se nepoužívá!)
Rozdíl mezi třídou a identifikátorem? Oba prvky je možné použít v identických situacích a výsledek v prohlížeči
bude vždy stejný. Třída se však typicky používá k volnému pojmenování elementů na stránce a lze ji použít
vícekrát, tedy tolikrát kolikrát chceme! Identifikátor se naopak používá pro jednoznačné pojmenování bloků
stránky jako je záhlaví, obsah, navigace či zápatí – tedy takových prvků stránky (obalených v elementu div),
které se na stránce vyskytují pouze jednou. Někteří vývojáři identifikátory vůbec nepoužívají a vše řeší pomocí tříd…
Vlastnosti a hodnoty CSS
Ty definují formát elementů stránky – jak to vlastně bude všechno vypadat! Existuje jich celá řada viz.
http://www.jakpsatweb.cz/css/
Komentáře
Aby byl styl více čitelný a jasný, můžeme si do něj přidávat komentáře, které prohlížeč ignoruje. Komentář se
vkládá mezi znaky /* a */ a může být i přes několik řádků. Je dobré se v komentářích vyvarovat psaní písmen
s diakritikou (ě š č ř ž), protože některé prohlížeče s tím mají problémy.
Dědičnost
Zásadní vlastnost kaskádových stylů – proto se jmenují kaskádové! Podřízený element přebírá – dědí vlastnosti
elementu nadřízeného. Co je definováno v <body> platí pro <p> i pro <a>, který je uvnitř <p>.
Podrobnosti: http://www.jakpsatweb.cz/css/css-kaskadovani.html
Požadavek! Vysvětli:
Chyby a omezení CSS
viz. http://www.jakpsatweb.cz/css/css-omezeni.html
Tagy <div> a <span>
Neutrální tagy, v HTML nic neznamenají, nijak se neformátují. Slouží jako obálky, které se formátují výhradně
pomocí kaskádových stylů.
<div> – blokový element. Jinak řečeno udělá před sebou a za sebou konec řádku. Časté použití pro pozicování
elementů.
<span> - řádkový element. Používá se pro formátování části řádku.
Příklad:
<p>Normální text a najednou <span title="text žluté bubliny">text, který má bublinu</span></p>
(Toto je vyjímečný příklad použití v HTML!)
Podrobnosti: http://www.jakpsatweb.cz/div-span.html
-
-
řádkový - působí v jednom řádku (např. kurzíva: <i> text kurzívou </i>), nezalamuje se za
nimi řádek -
blokový – působí na více řádků (např. odstavec: <p> .text odstavce, běžně na více řádcích</p>),
je za ním automaticky odřádkováno (zalomení řádku) - nahrazovaný – není součástí zdrojového kódu, jen na něj odkazujeme (např. obrázek)
- existují párové (viz. výše kurzíva, odstavec) a nepárové (např. <br/>
- každá značka se musí uzavřít (i nepárová)
- píšeme je malými písmeny
- na jinou stránku téhož webu (relativní odkaz)
- na jiné stránky v internetu (absolutní odkaz)
- na jiný soubor – dokument (akce otevřít/uložit)
- na záložku – odkaz na konkrétní místo na téže nebo i jiné stránce
- na e-mailovou adresu (mailto)
- obrázkový odkaz
- Styl u prvku stránky (řádkový styl)
-
Je uveden přímo ve zdrojovém kódu u formátovaného elementu pomocí atributu style.
<p style="font-size: 20pt">text zformátovaný pomocí CSS</p> -
V praxi se používá ve výjimečných případech (např. odlišný formát jediného slova v odstavci).
<p>Tady je jen toto <span style="font-size: 20pt">slovo</span>velikostí 20 bodů</p>- Styl na stránce (stránkový styl, interní styl)
-
Je uveden v hlavičce stránky mezi tagy <style> a </style> ve formě tzv. tabulky stylů (stylopisu).
Je to soupis stylů pro jednotlivé prvky stránky, které píšeme za sebe na jednotlivé řádky. Tabulka stylů platí pro celou stránku. Prohlížeč si nejdříve načte informace ze stylu a potom už jen stránku sestavuje.
<style>
- Styl v samostatném souboru (externí styl)
-
Tabulka stylů (stylopis) je zapsána v externím souboru s příponou *.css uloženém v adresářové
struktuře webu. Jednotlivé stránky jsou pak propojeny s tímto souborem. Změna v souboru se
styly se automaticky promítne do všech stránek, jejichž formát je založen na tomto souboru. -
Propojení stylu se stránkou je zajištěno v hlavičce dokumentu!!! pomocí nepárového tagu
<link/> s parametry rel (říká, že propojujeme stránku na styl), type (určuje typ stylu – css
(v budoucnosti mohou totiž existovat i jiné typy stylů)) a href (relativní cesta k souboru se
stylem).
<link rel="stylesheet" type="text/css" href="styl.css" /> - Nejčastěji používaný způsob umístění stylů!
- Zvyk je železná košile.
- Jablko nepadá daleko od stromu (dědičnost).
- Bližší košile než kabát.
- Kdo se směje naposled, ten se směje nejlíp.
- Proti gustu žádnej dišputát.
-
řádkový - působí v jednom řádku (např. kurzíva: <i> text kurzívou </i>), nezalamuje se za