Formátování HTML
6
Formátování HTML
Každý text má obsah a formu. Když mluvíme o formátu (formě) webových stránek,
myslíme tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co
nepatří do obsahu. To je formátování.
Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text.
Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit
text.
Starší způsob používá přímo HTML tagy.
(Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>).
Pomocí tagů se některé věci nedají udělat.
Novější způsob -- CSS styly -- používá tag <style> a obecný atribut "style",
kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné.
Dají se s tím dělat různé fígle, které budu popisovat níže.
Mimochodem, co je CSS?
CSS vzniklo někdy kolem roku 1997.
Je to kolekce metod pro grafickou úpravu webových stránek.
Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly".
Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta
poslední. To teď není důležité.
Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale v
nejrozšířenějším prohlížeči Internet Exploreru moc nefungují.
Za web budoucnosti se považuje tzv. sémantický web - web, ve kterém bude oddělen
obsah od formátovacích parametrů.
Tak co třeba CSS dovedou:
Nastavit libovolnou a přesnou velikost písma, p r o k l á d á n í, KÁPITÁLKY
Udělat odsazení prvního řádku odstavce, zvětšit řádkování
Zrušit nebo zvětšit prázdný prostor po odstavci
Automaticky formátovat nadpisy (například je všechny udělat zelené)
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 nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to 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.
Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se
vzhled celého webu deklaruje jedním souborem.
Bylo by ale nefér, kdybych zamlčel, že CSS mají někter chyby a omezení, kvůli
kterým jsou mnohými rejpaly zavrhovány.

Trojí použití CSS
Styl se může nadeklarovat třemi způsoby, níže uvádím příklady. Stačí, když se pro
začátek naučíte naučíte jeden ze tří způsobů:
1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tomu
říkám přímý styl. Je to nešikovné, ale občas se to používá.
2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi
seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například
že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy <style> a
</style>.
3. Použitím externího stylopisu -- to je soubor *.css, na který se stránka odkazuje
tagem <link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden
takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají
podobně.
Samozřejmě stačí ovládnout jenom jeden způsob.
Nejlepší je používat externí css soubor.
Ověření vlastností stránky (možnost použití stylů ve stránce)
Panel Editace
stylu
Vlastnosti stránky (CSS)
s CSS
bez CSS

Předefinování specifických Tagů
stránky v (HTML) pomocí CSS
separátně
Kaskádovým stylem si nadefinujeme tělo dokumentu (body)
Budeme CSS stylem modifikovat Tagy a použijeme k tomu nový externí .css soubor

uložíme
Editace podnadpisu h2
text
lem