Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

Transkript

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. 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) <značka>. Většina značek je párových, uzavírací značka začíná znakem / (lomítko) tedy: <znacka>text uzavřený do značky</znacka>. Několik málo značek je nepárových, pokud bychom byli syntakticky důslední, mohli bychom je psát takto: <znacka /> 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 <br>, či lépe <br />. 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 <b> </b> Tučné písmo <b>toto bude napsáno tučně</b> <i> </i> Kurzíva <i>toto bude napsáno kurzívou</i> <p> </p> Odstavec <br> Nový řádek <a> </a> Odkaz na jinou stránku, bude vysvětlen podrobněji. <img> Obrázek, bude vysvětlen podrobněji <h1></h1> Nadpis 1. úrovně, se zvětšující se úrovní se zmenšuje velikost písma. <h2></h2> Nadpis 2. úrovně <h3></h3> Nadpis 3. úrovně <h4></h4> Nadpis 4. úrovně <h5></h5> Nadpis 5. úrovně <h6></h6> Nadpis 6. úrovně

2 Značka <a> - Odkaz Značka <a> označuje odkaz, tedy text, který nás přivede na jinou stránku. Použití vysvětlím na příkladu: <a href= title= Stránky Petra Petráše >Na moje stránky</a> Vidíme, že úvodní značka obsahuje v sobě další příkazy, správně řečeno atributy. Může ji mít i více, ale tyto jsou nejzajímavější. Atribut se skládá se svého názvu, znaku rovnítko a hodnoty, která by měla být uzavřena v uvozovkách. atribut href je povinný a obsahuje adresu stránky, na kterou se máme dostat. Může být samozřejmě i složitější, třeba <a href= > Při psaní složitějšího odkazu doporučuji překopírovat adresu odkazu z okna prohlížeče, neboť často záleží na velikosti písmen. atribut title je nepovinný a obsahuje text v bublině, která se objeví, pokud nad odkazem ponecháme myší kurzor. Text mezi koncem značkami <a.> a </> se zobrazí uživateli v prohlížeči. Tedy v tomto případě bude uživatel vidět text Na moje stránky, na který je možné kliknout Značka </a> ukončuje odkaz. Značka <img> - Obrázek Nepárová značka <img> označuje obrázek. Má celou řadu atributů, opět použiji příklad: <img src= fotka.jpg alt= moje fotka title= jen se mrkněte, jak vypadám width= 50 height= 100 > (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 <img src= 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.

3 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 <img>, ale specielní, tzv. PHPRS značkou. Ta má tvar: <obrazek id="cislo" zarovnani="zpusob_zarovnani" nahled="zobrazit"> 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 Všechny zde uvedené značky jsou párové. Fyzické formátování tag b i u sub sup Význam tučné písmo kurzíva podtržení textu dolní index horní index small zmenšení textu gig zvětšení písma strike přeškrtnutý text Logické formátování tag Význam Párový Obvyklý vzhled span ú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 ano strojopis Značka <code> vypíná mechanismus nahrazování řádkování mezerami a slučování více mezer do jedné.

4 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: <table> <tr><td>jmeno</td><td>příjmení</td><td>věk</td></tr> <tr><td>pavla</td><td>normální</td><td>35</td></tr> <tr><td>tereza</td><td>vohnutá</td><td>33</td></tr> <tr><td>veronika</td><td>křivá</td><td>26</td></tr> <tr><td>božena</td><td>červená</td><td>44</td></tr> </table> 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 <table></table> <tr></tr> <td></td> 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ř. Seznamy Seznamy představují automaticky odsazovanou skupinu textů. Seznam začíná značkou <ol> nebo značkou <ul> a pochopitelně končí značkou </ol> </ul>. Rozdíl mezi značkami je v tom, že <ul> udělá před položku seznamu značku (puntík), <ol> uvede pořadové číslo položky seznamu. Jednotlivé položky seznamu jsou uzavřeny ve značkách <li></li>. Např. <ul> <li>vejce</li> <li>mouka</li> <li>mléko</li> </ul>

5 Ú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ř: <table style="font-size: small;"> 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: <table style="font-size: small; color:blue;"> 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 <div>. 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 <div> 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ě</span>. 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: