1 Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. T...
Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími konstrukcemi.
Co je HTML značka? HTML značka (HTML tag) je příkaz prohlížeči jak má chápat následující text. Protože www stránky byly původně vymyšleny pro jaderné fyziky a ne jako prostředek výtvarného vyjádření, většina značek neoznačuje konkrétní vzhled ale obsahově typ textu. (Např. Nadpis, důležitý text, tabulka,…). HTML značka se uzavírá do špičatých závorek (většítko, menšítko) . Většina značek je párových, uzavírací značka začíná znakem / (lomítko) tedy: Text uzavřený do značky. Několik málo značek je nepárových, pokud bychom byli syntakticky důslední, mohli bychom je psát takto: aby bylo jasné, že jde o nepárovou značku. Mezi názvem značky a lomítkem je mezera. Značky je možné psát malými i velkými písmeny, obecně správnější je psát je malými.
Web nezná text formátovaný mezerami a konci řádku! Když prohlížeč dostane od webového serveru stránku, všechny znaky konce řádku (Enter) nahradí mezerami a všechny vícenásobné mezery nahradí mezerou jedinou. Konec řádku si automaticky vloží na konci fyzického prostoru, do kterého text vypisuje. To je standardní chování všech webových prohlížečů, proto dělat úpravu mezerováním a řádkováním nemá smysl a je vhodné jen pro autora článku.
Ale já potřebuji psát více mezer a určovat zalomení řádku! Pro zalomení řádku se používá značka , či lépe . Když na ni prohlížeč narazí, zalomí řádek. Pro určení pevné mezery, kterou prohlížeč nikdy nezruší se používá konstrukce Více mezer za sebou pak napíšeme jako opakování
Nejdůležitější značky pro náš web
Tučné písmo toto bude napsáno tučně Kurzíva toto bude napsáno kurzívou Odstavec Nový řádek Odkaz na jinou stránku, bude vysvětlen podrobněji. Obrázek, bude vysvětlen podrobněji Nadpis 1. úrovně, se zvětšující se úrovní se zmenšuje velikost písma. Nadpis 2. úrovně Nadpis 3. úrovně Nadpis 4. úrovně Nadpis 5. úrovně Nadpis 6. úrovně
Značka - Obrázek Nepárová značka označuje obrázek. Má celou řadu atributů, opět použiji příklad: (mimochodem , protože se v HTML konce řádků nahrazují mezerou, lze obsah značky libovolně řádkovat.) Atribut src je jediný povinný, určuje uložení obrázku. Lze odkazovat i obrázek, který se nenachází na našem disku, takže i konstrukce je správná. S atributem title jsme se už setkali, jeho obsah se vypíše do bubliny, pokud nad obrázkem ponecháme myší kurzor. Text atributu alt se zobrazí těm, kdo mají vypnuté obrázky. Obecně se považuje za slušné atribut alt uvádět. Atributy width a height určují šířku a výšku obrázku. Uvedeme-li jiný rozměr než má obrázek, prohlížeč ho do těchto rozměrů zdeformuje. Je vrcholně neslušné mít na webu fyzicky velký obrázek a atributy width a height ho zmenšovat. K uživateli se totiž musí přenést v původní velikosti a teprve u něj proběhne zmenšení. Tím vyvoláme zbytečné přenosy na lince do internetu. Atributy width a height nejsou povinné, prohlížeč si je z obrázku zjistí. Uvedeme-li je však, prohlížeč vykreslí stránku rychleji.
Obrázky ve školním redakčním systému Ve školním redakčním systému mohou být obrázky uloženy v galerii obrázků. Ty se pak nevyvolávají značkou , ale specielní, tzv. PHPRS značkou. Ta má tvar: CISLO ... na místo této proměnné je nutné vložit ID požadovaného obrázku ZPUSOB_ZAROVNANI ... možné varianty jsou: "nastred", "vlevo" nebo "vpravo" ZOBRAZIT ... možné varianty jsou: "ano", "ne" ... případně lze atribut "nahled" úplně vynechat = nezobrazit.
Některé další formátovací značky Pro formátování textu lze využít i další značek. Využito textu na stránkách www.jakpsatweb.cz Všechny zde uvedené značky jsou párové.
Fyzické formátování tag
Význam
b
tučné písmo
i
kurzíva
u
podtržení textu
sub
dolní index
sup
horní index
small zmenšení textu gig
zvětšení písma
strike přeškrtnutý text
Logické formátování tag span
Význam
Párový Obvyklý vzhled
úsek textu
ano
normální
strong zvýraznění (tučně)
ano
tučné
em
zvýraznění (kurzíva) ano
kurzíva
code
výpis kódu
strojopis
ano
Značka vypíná mechanismus nahrazování řádkování mezerami a slučování více mezer do jedné.
Tabulky Tabulky představují často používanou možnost formátování textu. V dnešní době se sice tabulky moc nedoporučují, ale pro běžného uživatele je to nejjednodušší a zároveň nejpohodlnější způsob. Opět použiji příklad Jméno Příjmení Věk Pavla Normální 35 Tereza Vohnutá 33 Veronika Křivá 26 Božena Červená 44 Zapsáno HTML značkami:
Jmeno
Příjmení
Věk
Pavla
Normální
35
Tereza
Vohnutá
33
Veronika
Křivá
26
Božena
Červená
44
Opět připomínám, že vícenásobné mezery ani řádkování nic neznamená, proto si můžeme zápis tabulky naformátovat pro naši lepší čitelnost. Vysvětlení značek
Začátek, konec tabulky Začátek, konec řádku Začátek, konec buňky
Všechny značky mohou mít řadu atributů, jejich vysvětlování je nad rámec tohoto textu. Pro zájemce např. http://www.jakpsatweb.cz/html/tabulky.html
Seznamy Seznamy představují automaticky odsazovanou skupinu textů. Seznam začíná značkou nebo značkou
a pochopitelně končí značkou
. Rozdíl mezi značkami je v tom, že
udělá před položku seznamu značku (puntík), uvede pořadové číslo položky seznamu. Jednotlivé položky seznamu jsou uzavřeny ve značkách . Např.
Vejce
Mouka
Mléko
Úvod do pokročilého formátování Většina značek může obsahovat atribut style, kterým se určuje styl – vzhled následujícího obsahu. Popisu stylů se věnuje řada knih a práce se styly je základem současného webdesignu. Proto uvedu jen několik konkrétních příkladů: Příklad s tabulkou. Uděláme-li v článku tabulku, bude nejspíš jiným písmem než zbytek stránky. Je to proto, že tabulka „nezdědí“ styl článku a drží si svůj. Ale pomocí atributu styl ji přikážeme některé vlastnosti změnit. Např:
Přikázali jsme tabulce aby použila velikost písma small. Máme ale možnost ovlivnit i další vlastnosti, tak například uvedením:
použije tabulka písmo small a bude modrá. Příklad s běžným textem Pro běžný text se hodí párová značka <span> nebo
. Jsou to obsahově neutrální značky sloužící jen k tomu, aby bylo kam zapsat atribut style. Značka <span> je určena pro průběžné formátování textu, značka
určuje blok textu a před a za blokem se udělá jistá, stylem ovlivnitelná mezera. Například, chceme část textu napsat zeleně. Třeba takto: Například, chceme část textu napsat <span style=“color:green“>zeleně. Třeba takto: Zápis barev V předchozím příkladu byla použita barva. Ta se dá zapsat jejím anglickým názvem, je-li takový, nebo ve formátu #RRGGBB, tedy hexadecimálním vyjádření intenzity barvy červené (RR), zelené (GG), a modré (BB). Např. #B1F836. Tím úvod do pokročilého formátování končí, neb není příliš žádoucí zasahovat do formátování nastaveného v redakčním systému.
Speciální entity V úvodu jsme narazili na entitu , která označuje pevnou mezeru. Takových entit je celá řada. Lze tak zapsat třeba značku pro stupeň, copyright, atd. Všechny začínají znakem & a končí znakem ; (středník). Seznam entit nalezneme třeba na adrese: http://www.jakpsatweb.cz/html/entity-vsechny.html
(mimochodem , protože se v HTML konce řádků nahrazují mezerou, lze obsah značky libovolně řádkovat.) Atribut src je jediný povinný, určuje uložení obrázku. Lze odkazovat i obrázek, který se nenachází na našem disku, takže i konstrukce 
je správná. S atributem title jsme se už setkali, jeho obsah se vypíše do bubliny, pokud nad obrázkem ponecháme myší kurzor. Text atributu alt se zobrazí těm, kdo mají vypnuté obrázky. Obecně se považuje za slušné atribut alt uvádět. Atributy width a height určují šířku a výšku obrázku. Uvedeme-li jiný rozměr než má obrázek, prohlížeč ho do těchto rozměrů zdeformuje. Je vrcholně neslušné mít na webu fyzicky velký obrázek a atributy width a height ho zmenšovat. K uživateli se totiž musí přenést v původní velikosti a teprve u něj proběhne zmenšení. Tím vyvoláme zbytečné přenosy na lince do internetu. Atributy width a height nejsou povinné, prohlížeč si je z obrázku zjistí. Uvedeme-li je však, prohlížeč vykreslí stránku rychleji.