Mamičkovská škola HTML

Svetlana Siarska, Gabriel Pavlík 101

Aj vám sa už na rôznych fórach isto stalo, že ste napísali obrovský príspevok do diskusie s veľa rôznymi myšlienkami, poslušne ste za každým odsekom odklepli enter a zrazu… Odseky sú fuč, text takmer cez celú obrazovku a zostáva len dúfať, že to celé vydrží čítať do konca aj Alexandra, ktorej patrili posledné dva riadky.

shutterstock

Ako text štruktúrovať?

Na niektorých diskusných fórach môžete text zadávať v tzv. HTML podobe. Znamená to, že do okienka pre príspevok vpíšete text s vhodne umiestnenými HTML tagmi, t.j. príkazmi. Browser (po slovensky azda prehliadač, t.j.  Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari,…) tomuto jazyku rozumie a príslušne ho interpretuje. Tým sa časť textu napr. zvýrazní tučnejším písmom a pod. 

V nasledujúcich riadkoch sa pokúsim uviesť zopár najdôležitejších HTML tagov, ktoré by vám mohli pomôcť písať prehľadnejší text. Nie je mojim cieľom napísať kompletnú HTML príručku, takých sa dá nájsť na internete kopec (napr. www.w3.org, www.w3schools.com). Budem sa skôr snažiť dať návod „ako začať“ absolútnym začiatočníkom, tí ostatní si už určite poradili/poradia sami.

Začíname s teóriou

Čo je čo:

browser – t.j. prehliadač, je softvér, ktorý beží u Vás na počítači a prezeráte si pomocou neho www-stránky

HTML – čiže hypertext markup language, je formátovací jazyk – množina príkazov (nazývame ich tagy), ktoré browser vykoná a tým sa z obyčajného textu stane text tučný, farebný, vloží sa na príslušné miesto link, obrázok, a pod.

HTML tagy – bývajú párové (majú otvárací a uzatvárací tag) a nepárové. Je to v podstate textová skratka v špicatých zátvorkách. Uzatvárací tag má navyše „lomítko“ ako označenie konca. Napr. <b>, </b>.

zdrojový HTML kód – text + HTML tagy, ktoré text formátujú

Teória bez praxe?

Úplne najlepšie bude, ak si zároveň s čítaním budete jednotlivé veci skúšať sami, starý známy AHA-efekt vám pomôže absolútne najlepšie.

Uvediem aspoň niektoré možnosti, ako na to:

Môžete to robiť niekde na internete, napr. v nejakej testovacej diskusii, oveľa lepšie bude skúšať všetko lokálne na svojom počítači, otestujete rýchlejšie oveľa viac vecí. Na to je najlepšie si stiahnuť nejaký HTML editor s podporou zvýrazňovania (teda toho, že tento editor rozpoznáva HTML tagy a zvýrazňuje ich farebne, čo je potom oveľa prehľadnejšie) a prehliadania v browseri (t.j. kliknutie na nejakú ikonu zobrazí váš editovaný HTML súbor tak, ako ho uvidíte v browseri). Hlavne tá posledná vec vám veľmi urýchli učenie: nemusíte sa stále preklikávať z editora do browsera, výsledok sa zobrazí jediným kliknutím.

 

HTML editor

Výber editorov je široký, ten svoj si môžete pohľadať napríklad na downloadovacom webe download.com, zadajte si do vyhľadávania pojem HTML editor a vyberajte.

EditPlus

Ja (autorka) na tieto účely používam EditPlus (tu si môžete stiahnuť jeho skúšobnú 30-dňovú verziu). Tento editor nemá podporu automatickejšieho generovania HTML tagov.

Notepad/Poznámkový blok

Ak sa vám nechce sťahovať a inštalovať nové programy a oželiete síce užitočné, ale nie nutné parádičky, pokojne použite jednoduchý predinštalovaný textový editor, vo Windowse napríklad Notepad, alias Poznámkový blok. Správne nazvaný súbor (napr. nazov_suboru.html) zakaždým uložíte a v browseri ho otvoríte alebo už otvorenú stránku obnovíte.

Na správny zápis HTML tagov si ale budete musieť dávať pozor sami. Našťastie chyby v browseri zbadáte hneď a oprava zvyčajne vôbec nie je náročná.

Tabuľková konvencia

V nasledujúcom texte budem používať na uvádzanie HTML kódu pre konkrétne formátovanie tabuľku rozdelenú na dva stĺpce. V prvom bude vidieť, ako vyzerá výsledok zobrazený browserom, v druhom, čo treba napísať do zdrojového HTML kódu, aby sa dosiahol požadovaný vzhľad.

HTML tagy na štruktúrovanie textu

Zalomenie textu

Jednou z dohôd pri interpretácii textu na webovú stránku je tá, že náš klávesový enter pre browser neznamená automaticky zalomenie textu. Na to sa používa jeden z nepárových tagov <br>. Kdekoľvek ho napíšete, nasledujúci text bude na novom riadku, nezávisle na tom, ako to vyzerá ostatný zdrojový HTML kód.

Vytvorenie odstavca

Trochu iný level zalomenia textu je vytvorenie samostatného odstavca. Na to použijeme párový tag <p> </p>, do ktorého uzavrieme predmetný blok textu.

Zmena fontu v texte

Pôvodne tu bol opis nastavenia typu a farby fontu. Vývoj však tento párový HTML tag <font face=”nazov fontu” color=”farba”> </font> poslal do histórie a o jeho náhrade sa dočítate v dieli nazvanom Štýlovanie.

Nadpisy…

…rôznej veľkosti:

ako to vyzerá*ako sa to napíše

Header1

<h1>Header1</h1>

Header2

<h2>Header2</h2>

Header3

<h3>Header3</h3>

Header4

<h4>Header4</h4>
Header5
<h5>Header5</h5>
Header6
<h6>Header6</h6>

Špeciálne typy písma

ako to vyzeráako sa to napíše
malé písmo <small>malé písmo</small>
veľké písmo <big>veľké písmo</big>
bold <b>bold</b>
kurzíva <i>kurzíva</i>
podčiarknuté písmo <u>podčiarknuté písmo</u>
hrubšie písmo <strong>hrubšie písmo</strong>
strojové písmo <tt>strojové písmo</tt>
prečiarknuté písmo <strike>prečiarknuté písmo</strike>
dolný index <sub>dolný</sub> index
horný index <sup>horný</sup> index
citácia <cite>citácia</cite>
programátorský kód <code>programátorský kód</code>

Komu sa máli, kliká ďalej…

1 Hviezdička2 Hviezdičky3 Hviezdičky4 Hviezdičky5 Hviezdičiek (Žiadne hodnotenia)
Loading...

Komentáre k článku

  1. <marquee>src=“http://www.mimibazar.sk/fotografie/769/fotka20051-s.jpg“</marquee><marquee>src=“http://www.mimibazar.sk/fotografie/769/fotka20050-s.jpg“</marquee>

  2. <marquee>src=“http://www.mimibazar.sk/fotografie/769/fotka20051-s.jpg“</marquee> <marque>src=““http://www.mimibazar.sk/fotografie/769/fotka20050-s.jpg</marquee>

  3. velka skuska

    <f“navy“>skusam ci mi to vsetko pojde

    som velmi zvedava ci to napisalo v kurzive a ci je toto podciarknute

  4. Internet je maly, Svetielko. Som rad, ze som Ta na nom (aspon virtualne) stretol… o to viac – ked vidim Tvoju snahu nezistne pomoct… Pozdravujem rodinku a… krasny den…

    p.

  5. <f“arial“ color=“red“> Už tomu konečne rozumiem.
    <f“arial“ color=“fuchsia“> Ďakujem, Svetlana.

  6. Nič sa mi nedarí,som úplný laik.Čo je to font arial?Ako mám napísať napr.moje meno vo farbe yellow?

  7. No napada ma akurat, ze aj ked clovek studuje nejaky papierovy text, tak si rad farebne podciarkuje. Ziadne umelecke dielo to nebyva, ale vadi to niekomu ? 🙂

    Neviem, mne rozhodne nevadi ani to, ked su prispevky napisane farebnejsie, s ikonou a pod. Nemusim vela citat, aby som minimalne vedela, kto to pisal. V kazdom pripade, keby to redakcii velmi vadilo, tak zakazu html-tagy v prispevkoch, zacnu ich jednoducho vyhazdovat.

    Saskii drzim pacle !

  8. No to je presne chyba bworseru. Ked som robila tu tabulku v clanku, tiez mi nic neblikalo, tak som to tam ani nedala a bolo to preto, ze som vtedy este pouzivala Explorer 5.5, tam niblika dodnes 🙂

    Ale teraz uz pouzivam Mozillu (1.2.1/5.0), ale blikalo uz aj v predchazdajucej verzii. No tu su tie browseri, co nepodporuju vsetko a poriadne. (no to netvrdim, ze Mozilla pracuje 100%)

  9. <fred>Svetlana, prosim Ta, co to tu melies? Ty mas blikajuci text v diskusii o peceni/nepeceni? Ja som tam dala prikaz na blikajuci text „DOBRU CHUT“, ale mne tam nic neblika. Aky mas browser? Ja mam Internet Explorer. Vdaka

  10. SOm grafik a robim podobne veci pre inu kategoriu citatelov…… len tak ma napadlo, nenarusite tym vizual celej tejto stranky, ked vsetci zacnu pouzivat ine farby, fonty,… ?

  11. Ahoj Svetlana, teda klobúk dolu. Moje znalosti siahajú maximálne po odoslanie textu vo Worde mailom, aj to patrím v mojej generácii medzi svetlé výnimky. Preklikala som sa obomi HTML diskusiami, ale mala som pocit, že hovoríte metajazykom, ktorému v živote neporozumiem. Hneď dnes to celé skúsim. Ak sa to podarí, máš dôkaz, že si vynikajúca učiteľka. Moje deti mi budú závidieť:-)))

  12. Kopirujem z diskusie HTML diskusia 2 :

    Mensi editor, co sa tyka diskoveho priestoru je FastHTML 1.1 (273.44K) – stiahnut podobne (vid spominana diskusia, moj prispevok z 24.2.2003), rozzipovat (kliknut nan pravym tlacidlom mysi a vybrat nieco ako extrahovat do adresara…) a spustit exe-subor. Editor sa neistaluje, exe-suborom sa rovno spusta. V menu ma kopu pomocok na vytvaranie html-tagov. Kliknuti File–>Test page in browser sa vam otvori externe okno s vytvaranou strankou.

  13. No mas pravdu, vela toho tam nie je … ale je to obrovske 🙂

    O tych obrazkoch to moze byt niekedy nabuduce,

    ale skor by som povedala, ze o ideach ako o samotnom html-kode.To,

    ako sa pise tag pre obrazok sa da najst kdekolvek,

    ale uz tazsie je najst niekde a pochopit, ze sa daju takto referencovat obrazky,

    ktore su kdekolvek na internete apdo.

    Len ma napadlo, ci by som si najprv nemala pytat dovolenie od Mirky a spol (sorry,

    ze pouzivam len toto jedno meno, je to posledne meno, co si pamatam v suvislosti s podobnymi konfkliktami)

    ….. Sorry, ze sa este stale k tomu vraciam, dost som v poslednych dnoch rozmyslala, ake pravo mam (a samozrejme aj ini, spomenme narp. Silviu, ktora je urcite vela ludom este vacsim trnom v oku) brat niekomu „stare dobre babetko“ vytvaranim roznych „elitarskych“ skupin, ktorych clenky si vedia urobit ikonu, vedia zvyraznovat text, ….. asi si budem musiet na podobne temy zalozit novu diskusiu 🙂
    No ale dnes ma dost dobre preliecila Adriana a jej blikajuci text v diskusii o peceni/nepeceni. Dakujem :-).

  14. Musim este dodat (aby nedoslo k omylu, lebo o sile slova sme sa uz neraz presvedcili :o)), ze Svetlana, dakujem ze si mi pomohla rozsirit moje obzory.

  15. SvetlanaMusim ocenit prinajmensom Tvoju velku odvahu nezistne naucit nieco absolutnych laikov (napr. mna :o)) a to uz nehovoriac o evidentnych uspechoch, ktore si dosiahla.
    Akurat sa mi chce, za vsetky, ktore este nemaju ikonku zakricat: „A kde je o obrazkoch?!“ Som ja to ale neskromna opica, co ?! :o)))

  16. Ahojte. Keď som pred troma týždňami prišla na bábetko, bola som na inetrnete absolútny nováčik, samouk bez základov. Svetlana poslala tento článok mailom a ja som naňho pozerala ako na „staroegyptské hieroglify“. Vôbec nie som technický typ, a povedala som si, že ak toto má byť pre začiatočníkov, tak som do kúpi počítača investovala zbytočne, vrátim sa ja k svojim knihám.
    Našťastie som to aspoň skúsila a na moje obrovské prekvapenie to fungovalo. Mala som radosť ako malé dieťa, a normálne ma to začalo baviť. Manžel mi pomohol stiahnuť Webfoot HTML 2.2, volám ho žabiak (kôli logu) a z môjho začiatočníckeho pohľadu je naozaj <big>skvelý</big>..

Pridaj komentár