Klíčem k úspěchu je skutečnost, že redakční systém Drupal užívá a rozeznává HTML kód, jako ve svém jádru de facto jakákoliv www stránka. Tím spíše, že tento programovací jazyk představuje samotný základ budování www stránek!

Pojmy jako 'programovací jazyk' či 'HTML kód' způsobí často u laického čtenáře panickou hrůzu, případně i třes, a rovněž tendenci okamžitě přestat číst dál. Zde se není čeho bát, zaplujeme jen do opravdových základů, týkajících se bezprostředně psaní našich příspěvků, kdy za nás beztak samotný systém většinu důležitých věcí řeší, aniž bychom o tom věděli. Pokud ale chceme něco extra, jako třeba jinou velikost písma v nadpisu, musíme naše přání systému sdělit. To se pro naše účely děje většinou umístěním určité zkratky do lomených závorek na začátek segmentu textu, jehož vlastnosti chceme měnit, a poté tutéž zkratku na konec. V druhém případě ovšem zkratce předchází symbol lomítka (/), značícího konec úseku, kde má daná změna být provedena (zhruba jako přeškrtnutá značka na konci úseku dopravního omezení). Nyní systematicky projdeme jednotlivé aspekty od změny velikosti písma po jeho styl a používaný font, definování horního a dolního indexu pro chemické vzorce, a skončíme změnou barvy písma.

Aby se změny textu, definované našimi zkratkami, mohly po uložení příspěvku projevit, je před uložením nutno u patřičného bloku textu zvolit v patřičné nabídce (viz. obrázek níže) možnost 'Full HTML'. Bez toho nebudou naše HTML značky brány v potaz a změny formátování neproběhnou! Já ovšem nyní musím u tohoto bloku textu tento krok záměrně vynechat a zvolit v dané nabídce jinou z možností a to sice 'Plain text' (prostý text), jinak by specielní HTML zkratky, které uvedu níže, nebyly brány jako prostý text k vypsání, ale jako pokyny pro systém, a nebyly by viditelné. Příklady toho, jak vypadá výsledek, jsou v dalším bloku textu, kde je opět vybrána možnost 'Full HTML'.

Ještě připomínám jednu veledůležitou skutečnost a to tu, že jakékoliv námi chtěné změny formátování textu budou viditelné teprve poté, co autor příspěvku ukončí jeho úpravy a použije tlačítko 'Uložit' (druhý obrázek níže). Nelze tedy čekat, že v bloku textu, pro který jsme zvolili možnost 'Full HTML', začne systém Drupal formátovat text přímo během úprav!

Při přechodu zpět do režimu úpravy příspěvku jsou namísto formátování opět zobrazeny zkratky HTML, což nám umožňuje mimojiné provádět jakěkoliv další změny. Poté je nutno opět příspěvek uložit.

HORNÍ A DOLNÍ INDEX

V naší branži často používáme chemické vzorce. Tyto jsou typické tím, že poměry atomů ve sloučenině jsou uváděny jako dolní index (například číslice 2 a 4 ve vzorci H2SO4), náboj molekuly naopak jako horní index (znaménko + jako horní index ve vzorci H3O+). Ovšem jak docílit toho, aby byla daná čísýlka brána jako horní či dolní index? Dvě HTML zkratky řeší tento problém. Například pro molekulu vody, H2O, je správná formulace vzorce, vedoucí k braní dvojky jako dolního indexu následující:

H₂O

HTML zkratka _{před číslicí '2' v tomto případě napovídá systému, že jakýkoliv následující text má být ve formě dolního indexu (zkratka 'sub' = 'subscript'), a to až do odvolání, kteréžto je označeno výrazem}, obsahující lomítko, tedy ukazující v analogii k silniční dopravě konec omezení či příkazu. Obdobný princip platí i pro případ molekuly H3O+, kde jsou ovšem nutna nařízení dvě - prvně trojka coby dolní index (analogicky k případu výše), a poté znaménko plus (+) coby horní index. Příkazová zkratka HTML pro horní index (angl. 'superscript') je zcela očekávaně ^{, konec její platnosti potom}. Správná formulace daného vzorce je posléze

H₃O⁺

Jak bude vidět u příkladů níže, indexy jsou sice nyní na svém místě, ale stále poněkud 'přerostlé'. Pro nápravu situace je nutno částečně předběhnout, a to dvěma skutečnostmi. První z nich, opět analogická k silniční dopravě, je ta, že pro určitý úsek silnice (nebo v našem případě textu) může platit i vícero příkazů zároveň. V tomto případě, a to je ona druhá skutečnost, použijeme ještě další HTML zkratku, a to sice <small>, jenž se vysvětluje sama o sobě. Tento příkaz dává systému vědět, že písmo počínaje touto značkou má vůči standardnímu stavu být zmenšené o určitou RELATIVNÍ hodnotu až do odvolání výrazem </small> (zas s tím lomítkem). Tuto skutečnost bude nutno definovat u OBOU indexů ve vzorci, protože písmeno 'O' mezi nimi má zůstat zcela normální. Správná formulace je tedy

H<small>_3</small>O<small>^+</small>

Níže jsou uvedeny výsledky. Výraz <small> je velmi užitečný tím, že zmenšuje patřičný blok textu vždy v konstantním poměru vůči standardnímu stavu. Při změně celkové velikosti textu daného chemického vzorce se velikost indexů automaticky přizpůsobí nové velikosti hlavního písma.

Výše uvedené příklady v režimu 'Full HTML'

Vzorec vody s dvojkou coby dolním indexem:
H₂O

Vzorec H3O+ s trojkou jako spodním indexem a plusem jako horním indexem:
H₃O⁺

Tentýž vzorec, ale s úpravou velikosti obou indexů pomocí příkazu 'small':
H₃O⁺

Změna velikosti písma

Celkem klasická potřeba kohokoliv, chtějícího mít výrazné nadpisy pro zlepšení viditelnosti struktury svého elaborátu, je změna velikosti písma. Zde ovšem budeme muset zabřednout lehce víc do hloubky HTML jazyka, a to sice jak tento chápe text...

Kdokoliv tvořící internetovou stránku do ní vpisuje text. Jazyk HTML člení (často pro uživatele bez viditelného rozdílu) text na nadpisy, probrané níže, a odstavce (vymezené HTML zkratkou <p> jako 'Paragraph'). Zatímco pro naše spisování zde je celkem jedno, zdali je určitá část textu brána jako nadpis či odstavec (systém Drupal si to od nás nějak přebere), není tomu již tak, chceme-li snadno změnit velikost našeho nadpisu či textu. Při tvorbě internetových stránek může být rozhodující, zdali je daný text nadpis, nebo odstavec. Pro nás též, v rámci snadné změny velikosti písma. To, že je daný kus textu nadpis (délka neomezena), rozpozná systém podle zkratky <h> před textem ('h' jako 'Header'), a zkratky </h> na jeho konci. Toto ovšem systému nestačí. Pro nadpisy, označené danou zkratkou, existuje v jazyce HTML šest úrovní, od <h1> po <h6>. Číslo ve výrazu označuje 'nadřazenost' daného nadpisu, a s jeho podřazeností od h2 do h6 klesá i velikost písma. Pro naše nadpisy je vhodné písmo dvakrát větší, tedy <h2>. Na konec nadpisu musí samozřejmě být umístěn patřičný konec příkazu, zde tedy </h2>. V příkladech níže jsou uvedeny velikosti nadpisu od <h2> po <h6>. Celková notace nadpisu je tedy

<h?>Nadpis</h?>, kde otazník značí číslo od 1 do 6.

Daný postup nám dopomůže k tomu, abychom dosáhli šesti konkrétních velikostí písma, ale jen šesti, navíc se kromě h2 neustále zmenšujících. Pokud chceme určitou jinou velikost, je postup poněkud náročnější. Zde užijeme výrazu pro nadpis <h1>, jenž doteď chyběl. V tomto případě je od nás ale očekáván další údaj, a to jak má být písmo skutečně velké, jinak bude jeho velikost analogická okolnímu textu. Tuto informaci lze definovat použitím funkce 'style', jíž poskytneme parametr 'font-size', jehož argument může být definován dvěma způsoby. Chtěnou velikost písma lze definovat buď buď relativně vůči jeho klasické velikosti (třeba jeho zvětšení na 300%), nebo jako výšku písma v pixelech (například 50px, kde jednotka 'px' značí pixel, tedy bodík, ze kterých sestává obrazovka).

Definice velikosti písma pro nadpis relativně vůči velikosti standardní je následující:

<h1 style="font-size:300%;">Velikost 300 procent </h1>

Definice velikosti písma pro nadpis relativně vůči velikosti standardní je následující, akorát je parametr font-size definován coby počet pixelů:

<h1 style="font-size:50px;">Výška písma 50 pixelů </h1>

Zde je několik důležitých poznatků. Kromě toho, že definujeme daný text jako nadpis, mu ještě přiřazujeme další vlastnosti pomocí funkce 'style', v tomto případě pouze měníme velikost písma pomocí parametru 'font-size'. Za povšimnutí stojí, že značka ukončující nadpis je normální, tedy prosté
</h1>. Tato vymezuje nejen ukončení nadpisu, ale i veškerého dalšího formátování textu, jež bylo danému nadpisu přiřazeno (zde pouze velikost písma).

V rámci odstavců je proces nastavení velikosti písma obdobný, akorát místo výrazu 'h1' až 'h6' použijeme prosté písmeno 'p' a odstavec ukončíme výrazem </p>, tedy například

<p style="font-size:50px;">Odstavec s písmem výšky 50 pixelů </p>

ZMĚNA BARVY PÍSMA

S přihlédnutím k předchozímu užívání funkce 'style' pro změnu velikosti písma je nejlépe již zde vhodné uvést, že velikost písma není to jediné, co funkce 'style' přijímá jako parametry. Jeden z jiných důležitých parametrů textu je jeho barva. Tu lze změnit pomocí funkce 'style' s použitím parametru 'color' namísto parametru 'font-size'. Vezmeme tedy předchozí příklad, kde jsme nastavovali výšku písma, a zaměníme parametr 'font-size' za parametr 'color', s tím, že zvolíme červenou barvu:

<p style="color:red;">Odstavec přeměněný na červené písmo </p>

HTML platformy mají určitou základní škálu 140 barev, definovanou názvy, jako je třeba výše uvedený argument parametru 'color' - 'red', jako červená. Další možnosti jsou třeba blue, green, nebo třeba i 'tomato', atd. Toto ovšem zpřístupní jen oněch 140 barev. Chceme-li přístup ke všem barvám, musíme parametru 'color' poskytnout údaj v RGB škále, tedy prostřednictvím definovaného poměru zelené modré a červené složky barevného spektra. Každá z těchto složek může být přítomna v množství 0 až 255. Více objasní příklad níže:

<p style="color:rgb(120, 50, 255);">Odstavec původně psaný červeným písmem, přeměněný na neurčitou purpurovou barvu písma na RGB škále</p>

Změna velikosti písma odstavce a zároveň barvy

Užívaná funkce 'style' pro definování charakteru písma v odstavci či nadpisu může příjmout i vícero parametrů zaráz, vzájemně oddělených středníkem (;). Tento je nutno z interních důvodů jazyka uvést nejen zde, ale vždy, i za poslední argument, byť další parametr nenásleduje. Takto lze například změnit zároveň barvu i velikost písma. Níže uvedený příklad dělá právě to: mění barvu písma na zelenou a jeho velikost na výšku 50 pixelů:

<p style="font-size:50px;color:green;">Odstavec nastavený na zelené písmo výšky 50 pixelů</p>

ZMĚNA SAMOTNÉHO PÍSMA NEBOLI 'FONTU'

Zatímco již v této fázi umíme měnit velikost a barvu písma, případně i zařídit, aby horní a dolní index vypadal, jak má, stále nám ještě chybí schopnost měnit styl (font) písma samotného, tedy například namísto na starehuti přednastaveného písma Arial používat třeba font Times new Roman, či okrasná písma, kdyby třebas bylo oznámeno, že se někdo žení (já ještě ne), nebo přání do nového roku, apod. Jak u odstavce, tak i u nadpisu, lze tohoto docílit opět pomocí funkce 'style', stejně jako jsme činili pro změnu barvy a velikosti textu na libovolnou hodnotu, které ovšem tentokrát poskytneme parametr 'font-family', tedy 'skupina fontů' a uvedeme argument, odpovídající jménu písma/fontu, jejž chceme používat. Tak například pro nadpis psaný písmem Times bude předpis vypadat takto:

<h1 style="font-family:Times;">Tohle je psáno písmem Times</h1>

Obdobně HTML předpis pro ODSTAVEC, psaný tentokrát písmem 'Algerian', bude vypadat takto:

<p style="font-family:Algerian;">Tohle je psáno písmem Algerian</p>

Lze měnit vícero parametrů textu naráz, jak bylo uvedeno již výše pro barvu a velikost písma měněnou zároveň, a to tak, že funkci 'style' poskytneme vícero parametrů zaráz. Zde změníme barvu, velikost, i písmo/font nadpisu zaráz:

<h1 style="color:blue; font-size:30px; font-family:Brush Script MT;">Tohle je psáno zvětšeným písmem Brush Script MT, v modré barvě</h1>

Níže jsou uvedeny všechny dané příklady. U příkladu posledního, kde je používáno písmo/font Brush Script MT v modré barvě, si povšimněte, že daný font nezná všechny naše české znaky, v tomto případě e s háčkem (ě), a toto konkrétní písmeno je uvedeno fontem standardním (arial). Ne každý font umí všechny znaky, a Jan Hus na vině není, tohle nemohl předpokládat, když navrhoval svůj systém 'nabodeníček'.

Příklady k velikosti nadpisu od h2 do h6

Velikost h2

Velikost h3

Velikost h4

Velikost h5

Velikost h6

Definice velikosti písma pro nadpis jako trojnásobek (300%) jeho standardní velikosti:

Velikost 300 procent písma

Definice velikosti písma pro nadpis tak, aby výška písmen byla 50 pixelů:

Velikost písma nadpisu 50 pixelů

Příklady ke změně barvy odstavce - nastavená červená barva pomocí argumentu 'red'

Odstavec přeměněný na červené písmo

Odstavec původně s červeným písmem, přeměněný na neurčitou purpuroidní barvu písma pomocí RGB škály

Odstavec nastavený na zelené písmo výšky 50 pixelů

Příklady změny písma

Font Times namísto Arial

Tohle je psáno písmem Times

Font Algerian namísto Arial

Tohle je psáno písmem Algerian

Font Brush Script MT psán modrou barvou a s výškou písma 30 pixelů (30px)

Tohle je psáno zvětšeným písmem Brush Script MT, v modré barvě

Změna písma na kurzívu, tučné, podtržené, zvýrazněné či přeškrtnuté

Kromě velikosti písma může být pro zdůraznění částí textu podstatné i to, zdali je písmo normální, či kurzíva, podtržené, a tak dále, či dokonce kombinace vícero těchto parametrů. Každý z daných parametrů má svoji zkratku, umisťovanou na počátek textu, jenž má být měněn, která definuje systému, jaké z těchto vlastností má písmo mít. Níže je uveden seznam patřičných zkratek.

<i> Kurzíva (italic), případně <em> (emphasized)
<b> Tučné (bold), případně <strong> (zdůrazněné)
<del> Přeškrtnuté (deleted)
<ins> Podtržené (inserted) - poněkud neintuitivní označení
<mark> Text podbarvený žlutým pozadím

Na konci měněného úseku textu musí pochopitelně následovat patřičná zkratka s lomítkem, například </i> pro ukončení psaní v kurzívě. V příkladech níže jsou uvedeny všechny varianty textu.

Kombinace vícero režimů

Pochopitelně lze použít vícero uvedených zkratek na jeden segment textu. Tak lze například nakonfigurovat písmo jako kurzívu a zároveň tučné zkratkami <i> a <b> současně:

<i><b>Tučná kurzíva</i></b>

<i><b><ins><mark>Podtržená tučná kurzíva se zvýrazněným pozadím</i></b></ins></mark>

Příklad základních režimů písma

Kurzíva
Tučné
Podtržené
Přeškrtnuté
Zvýrazněné

Kombinace vícero typů režimů

Tučná kurzíva
Podtržená tučná kurzíva se zvýrazněným pozadím

A teď všechno dohromady!

Jakožto finální příklad modifikace textu (absurdně komplexní) bude nadpis uvedený v příkladu níže, znějící 'Miluji hematit, Fe2O3'. Zde budou učiněny všechny následující kroky:

Číslice 2 a 3 ve vzorci hematitu převést na dolní indexy a zmenšit tak, aby to vypadalo k světu
Použít písmo/font 'Bookman Old Style'
Oranžová barva písma
Výška písma 40px (pixelů)
Podtržené
Psáno kurzívou

Takto zní HTML předpis:

<h1 style="font-family:Bookman Old Style; color:orange; font-size:40px;"><i><ins>Miluji hematit, Fe_<small>2</small>O_<small>3</small></i></ins></h1>

JAK ČINIT MEZERY V TEXTU

Zatímco jsme doteď řešili otázku modifikace písma, nevěnovali jsme se vůbec jedné podstatné věci, a to jak oddělit nadpis od odstavce či dva odstavce od sebe tak, aby v těle textu zkrátka byla mezera větší než pouze jeden jediný vynechaný řádek, což je maximum, jejž nám systém Drupal dovolí učinit pomocí klávesy ENTER. Případně lze takto zalomit(tedy ukončit) řádek dříve, než to za nás udělá systém. Toto vše se dělá prostřednictvím zkratky <br> (Break), která je specifická tím, že je to takzvaně 'otevřená' instrukce, není tedy nutno (ani možno) uvádět, kde daný příkaz končí. Zkratka </br> (s lomítkem) tedy neexistuje. Text bude zalomen přímo v místě, kde je zkratka <br> umístěna. Podle toho, jak má být široká mezera v textu, je možno užít tuto zkratku opakovaně několikrát po sobě, kdy toto de facto odpovídá několikačetnému stisknutí klávesy ENTER po sobě. V příkladu níže byla zkratka <br> použita dvakrát za sebou, odstavce jsou tedy od sebe odděleny výrazem <br><br> , odpovídající situaci ve Wordu po dvojím stisknutí klávesy ENTER.

Specifickým případem je touha odsadit text od vložených obrázků, na něž je tento často dosti 'nalepen'. Toto lze nejlépe udělat tak, že je na začátek (nebo na konec) daného textového bloku, kde je odsazení kýžené, umístěn 'prázdný' odstavec, obsahující akorát jednou či vícekrát uvedenou zkratku <br>. Vypadá to třeba takto, se zkratkou <br> použitou dvakrát:

<p><br><br></p>

Jazyk HTML nabízí mnoho jiných možností, jak i zde nadále měnit text v rámci textových bloků, do nichž vpisujeme naše příspěvky. Bohužel spousta z nich zde nefunguje. I tak uvádím níže pro inspiraci a pozlobení administrátora takový námět...

Příklad změny mnoha parametrů textu zaráz

Miluji hematit, Fe₂O₃

Příklad vyvolání mezery v textu mezi dvěma odstavci

Tohle je první odstavec, stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec,stále první odstavec, ještě první odstavec

A toto už odsazený druhý odstavec, druhý odstavec, a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále a tak dále

Příklad zlobení administrátora

Administrátora lze zlobit například obřími smajlíky:

😀 😄 😍 💗