Prečo?
blog Filipa Likavčana

Kategórie

• Bužamó
• Čo sa inde nezmestilo
• Čo som zažil
• Duma bratislavská
• Fígle
• IT
• Pekné na svete
• Politika
• Slovensko
• Všimol som si
• Zaujímavosti

Vyhľadávanie

Toto si pozrite

• Rodinkárstvo v štátnej správe
  
• Matka detí Holocaustu
  
• Pomoc ženám, ktoré prežívajú nechcené tehotenstvo
  
• Monitoring bratislavských náckov
  
• Stop diktátorovi Lukašenkovi!
  
• Zločiny komunismu v obrazech
  
• Sloboda voľby
  
• Einsteinové výroky
  

Blogy, ktoré čítam

• Karol Sudor
  
• La Trine
  
• Zuza Oros
  

Stránky, ktoré čítam

• Don Quichotte
  
• Impulz revue
  
• Pravé spektrum
  
• Prirodzené plánovanie rodičovstva
  

---

---

Ako som učil veľmi talentovanú spolublogerku formátovať

Veľmi rád čítam príspevky Marianny "Maryše" Varjanovovej. Majú vtip, pointu a svoje posolstvo. Navyše sú mi sympatické tým, že z jej rozprávania o práci (šéfuje stredisku Makovica) srší snaha niečo činiť a nesedieť len tak na zadku a nadávať. Jedna vec ma však na jej príspevkoch rušila. A tou bolo nesprávne formátovanie a rôzne menšie typografické chyby. Po prečítaní jej (zatiaľ) posledného príspevku o (ne)koncepcii rozvoja cestovného ruchu v SR som jej navrhol, že ju naučím základné pravidlá HTML. A keď už som sa natrápil s ňou ;-) prečo sa nepodeliť aj s ostatnými, všakže?

Najprv teda krátka omáčka o HTML pre nezasvätených. Prvé a veľmi doležité pravidlo je, že HTML nie je žiadny bubák pod posteľou, ktorý Vás zje, keď sa na neho pozriete. Určite má každý skúsenosť s buzerovaním. Buzeruje nás šéf, sprievodca vo vlaku, predavačka, susedka zhora,... HTML umožňuje vrátiť úder a byť buzerantom (od slova buzerovať, nie označenie homosexuála) každému z nás. Pomocou HTML totiž buzerujeme internetový prehliadač a nútime ho, aby robil to čo chceme. "Zobraz linku!", "Ukáž obrázok!", "Vytvor nový odstavec!" - to sú niektoré z pokynov, ktoré prehliadače počúvajú každý deň. Je na tomto niečo tažké? Nie je! Tak žiadne výhovorky a hor sa buzerovať prehliadače (a prípadne aj čitateľov) cez naše weblogy.

Je jasné, že internetový prehliadač nerozumie bežnej ľudskej reči. Rozumie však jazyku HTML. Tento jazyk každý z Vás dokáže začať používať aj bez toho, aby ste museli ísť robiť au-pair do krajiny, kde sa ním rozpráva. Na začiatok nám stačí toto jednoduché pravidlo:

Prehliadač je hlúpy. Čo mu prikážem, to urobí. Stačí, že poviem odkiaľ má začať a kde má skončiť.

Praktické príklady:

Prehliadač, buď taký láskavý a zobraz od písmena B po písmeno D podčiarknuté písmo.

ABCDEFG

Jazyk HTML sa skladá s jednoduchých slov (nazývaných značky), ktorými určujeme, čo má prehliadač vykonať. Tieto príkazy vkladáme do napíseného textu, a tak ovplyvňujeme spôsob, akým bude zobrazený.

Ukážka rôzneho spôsobu zobrazenia jedného textu:

Mama kúpila kilo kyslej kapusty.
Mama kúpila kilo kyslej kapusty.
Mama kúpila kilo kyslej kapusty.

Mama kúpila kilo kyslej kapusty.

• Mama kúpila kilo kyslej kapusty.

Keď píšete svoj príspevok napríklad vo Worde a používate rôzne štýly písma, odrážky, odstavce, a pod. Word vkladá do textu HTML značky automaticky. Rovnako to robia aj iné programy, pomocou ktorých je možné písať texty a vytvárať stránky. Problém je v tom, že toto automatické vkladanie nie je dokonalé (je priam zlé), čo spôsobuje častokrát rôzne problémy. Prvý a najdôležitejší je ten, že takto vytvorený príspevok môže byť niekoľkonásobne väčší ako samotný text. Ďalším nezanedbateľným rizikom je, že v prípade chybného zobrazovania neviete (alebo je to tažké) určiť, čo spôsobuje chybu. Ešte ste napríklad nikdy neriešili dilemu, prečo je tam jeden prázdny riadok navyše? Je teda výhodné poznať niekoľko základných HTML značiek. Ste sami sebe pánmi, viete presne identifikovať problémy a do profesných životopisov si môžete napísať, že ovládate základy HTML.

Poďme si teda prebrať tých niekoľko HTML značiek. Po krátkej omáčke vždy nasleduje príklad, z ktorého by malo byť všetko jasné.

Značky v HTML majú takýto tvar: <NAZOV> Ak prehliadač nájde takúto značku v texte, tak vie, že chceme, aby niečo vykonal. Toto vykonáva dokým nenatrafí na rovnakú značku, avšak so znakom konca </NAZOV>.

Nový riadok

Text, ktorého šírka je dlhšia ako riadok sa automaticky zalomí a pokračuje na ďalšom riadku. Niekedy však potrebujeme pokračovať v texte na novom riadku a nechceme čakať až na koniec pôvodného. V takom prípade potrebujeme prehliadaču pomocou HTML povedať, aby text zalomil a zvyšný text začal zobrazovať v novom riadku.

Značka:

<br />

Príklad:

Tento text je zalomený tu<br /> a toto je už na novom riadku.

Tento text je zalomený tu
a toto je už na novom riadku.

Táto značka má jednu zvláštnosť a tou je, že priamo obsahuje aj jej ukončenie. Vyplýva to z bodového charakteru danej operácie zalomenia. Inými slovami povedané zalomenie sa deje na jednom mieste a preto nemá význam definovať nejaký jeho začiatok a koniec.

Odstavec

V škole nás učili, že je vhodné členiť texty na odstavce. Myšlienky sú logicky člené a lepšie sa to číta. Pri písaní textu v textovom editore (napríklad Word) vytvárame odstavce jednoducho tak, že dvakrát stlačíme ENTER, čím nám vnikne jeden voľný riadok. Toto nás môže zvádzať k tomu, aby sme v HTML na vytvorenie odstavca dvakrát použili značku pre nový riadok (<br />). Takýto postup nie je správny práve preto, že odstavec združuje logický podcelok textu. V HTML preto existuje značka, ktorá text "obalí", a tak prehliadaču povie, že text je logickým celkom - odstavcom.

Značka:

<p></p>

Príklad:

<p>Kto zapríčinil tento úpadok, zosurovenie, zdivočenie mravov? Čo ľudstvo zviedlo s ducha veličavou vbŕsť do bahna? Ký upír to a mlok,</p>
<p>z pŕs sajúci mu i dnes žitia mok, krvižíznivec s večnou záhou žhavou? Ech, sebectvo! to! - a niet, nad ohavou tou zvíťaziť, vojsk, rekov po dnešok.</p>

Kto zapríčinil tento úpadok, zosurovenie, zdivočenie mravov? Čo ľudstvo zviedlo s ducha veličavou vbŕsť do bahna? Ký upír to a mlok,

z pŕs sajúci mu i dnes žitia mok, krvižíznivec s večnou záhou žhavou? Ech, sebectvo! to! - a niet, nad ohavou tou zvíťaziť, vojsk, rekov po dnešok.

Tučné písmo

Tučné písmo je tučné písmo, čo k tomu dodať? Snáď len malú poznámku, že by malo byť používané s mierou, keďže podstatné nie je to, že je tučné, ale to, že má niečo zdôrazňovať.

Značka:

<strong></strong>

Príklad:

Kto zapríčinil <strong>tento úpadok,</strong> zosurovenie, zdivočenie mravov?

Kto zapríčinil tento úpadok, zosurovenie, zdivočenie mravov?

Šikmé písmo - kurzíva

O kurzíve platí to isté, čo pre tučné písmo. To znamená, že by sa mala používať s mierou a v opodstatnených prípadoch.

Značka:

<em></em>

Príklad:

Kto zapríčinil <em>tento úpadok,</em> zosurovenie, zdivočenie mravov?

Kto zapríčinil tento úpadok, zosurovenie, zdivočenie mravov?

Podčiarknuté a prečiarknuté písmo

Podčiarknutie textu je podobne ako tučné písmo a kurzíva spôsob na zdôraznenie istej časti textu. Neodporúča sa používať, keďže podčiarknuté by mali byť linky. Prečiarknuté písmo na blogu slúži na označenie neaktuálneho (chybného) textu. Ako zvýraznenie sa nepoužíva.

Značka:

<u></u> <del></del>

Príklad:

Kto zapríčinil <del>tento padák</del> <u>tento úpadok</u>, zosurovenie, zdivočenie mravov?

Kto zapríčinil tento padák tento úpadok, zosurovenie, zdivočenie mravov?

Linka

Linka slúži na vytvorenie odkazu na inú stránku. Značka HTML reprezentujúca linku má jeden rozdiel oproti doteraz popísaným HTML značkám. Linka v sebe nesie informáciu o tom, na ktorú stránku ma prehliadač prejsť po kliknutí na odkaz ňou definovaný. Táto informácia musí byť niekde zaznamenaná, ale pritom sa nezobrazuje. Na to slúži takzvaný atribút href, ktorý obsahuje adresu odkazovanej stránky.

Značka:

<a href="adresa stránky"></a>

Príklad:

V tejto vete sa nachádza odkaz na <a href="http://www.sme.sk/">stránku SME</a>.

V tejto vete sa nachádza odkaz na stránku SME.

Teraz, keď už viete niečo o HTML značkách, jedno upozornenie: Je potrebné dávať si pozor na to, aby sa jednotlivé značky navzájom "nekrížili". To znamená, že ak chcete napríklad vytvoriť dva odstavce tak, že posledné slovo v prvom bude tučné a prvé slovo v druhom odstavci bude tiež tučné, musíte to spraviť takto:

<p>Kto zapríčinil tento úpadok, zosurovenie, zdivočenie mravov? Čo ľudstvo zviedlo s ducha veličavou vbŕsť do bahna? Ký upír to a <strong>mlok</strong>,</p>
<p><strong>z pŕs</strong> sajúci mu i dnes žitia mok, krvižíznivec s večnou záhou žhavou? Ech, sebectvo! to! - a niet, nad ohavou tou zvíťaziť, vojsk, rekov po dnešok.</p>

Niekomu by sa mohlo zdať, že je zbytočné uzatvárať značku strong, keď hneď na ďalšom slove ju znovu použijem. To by však bola chyba, pretože všetky HTML značky v texte vytvárajú jeho logickú a hierarchickú štruktúru. To znamená, že každá značka musí byť celá vnorená (čiže ak je definovaný začiatok, musí byť definovaný aj koniec) do neuzavretej značky, ktorá je zadefinovaná nad ňou.

Milé spolublogerky, milí spolublogeri, som presvedčený, že každý z Vás sa dokáže naučiť týchto pár značiek. Potom stačí pri editovaní článkov použiť editor "Priamo HTML". V takto upravenom článku máte prehľad a dokážete ho aj lepšie a detailnejšie formátovať.

Plánujem ešte popísať značky na vytváranie odrážkových a číselných zoznamov a rôzne finty, ktoré pomocou vizuálneho editora nie je možné uskutočniť.

---

© 2006 Prečo? blog Filipa Likavčana. Design by Massive Blue.
RSS Feed