HTML #1: Úvod do problematiky tvorby webových stránok

Rozhodol som sa pripravovať pre vás postupný návod ako vytvoriť webovú stránku pomocou HTML. V tejto úvodnej (prvej) časti vám priblížim, akými spôsobmi si môžete zaobstarať vlastnú webovú stránku. Nebojte sa nie je to zložité, len treba mať chuť a radosť z toho, že sa učíte niečo nové. Táto séria článkov bude určená pre úplných začiatočníkov. Ak budete mať nejaké pripomienky alebo mi nájdete chybu, neváhajte a upozornite ma v komentároch. Som len človek a môžem sa pomýliť.

Akými spôsobmi sa dá vytvoriť webstránka?

A. Vytvoriť webovú stránku dnes už neznamená, že musíte vedieť programovať. Existuje veľa webstránok na ktorých si môžete (dokonca zadarmo) vytvoriť osobné, firemné či nakúpovacie stránky (eshopy). Samozrejme na tých bezplatných máte určité obmedzenia, a to napríklad ich reklamu alebo názov domény druhého až tretieho rádu (vasnazov.poskytovatel.sk). Komu nevadia tieto podmienky, za jeden deň môže mať webstránku. Editácia je jednoduchá, tj. nepotrebujete znalosť žiadneho programovania. Ak nechcete používať ich predvolené témy, (u niektorých poskytovateľov) máte možnosť nahrať na FTP server svoj vlastný kód a budete mať skutočne to, čo potrebujete.

Webstránku zadarmo vám poskytnú

• webnode
• internetcentrum
• webgarden
• estranky
• blogcz
• blogger
• a mnohí ďalší

B. Ak sa chcete naučiť rozumieť základnému kódu stránky môžete použiť WYSIWYG HTML editor. To je program, v ktorom tvoríte webovú stránku takmer ako nejakú prezentáciu v powerpointe, alebo prácu vo worde. S tým rozdielom, že každý krok vám program automaticky zapisuje do kódu a môžete si tak porovnať, ktorá akcia ma aký zápis. Tu tiež platí, že nemusíte vedieť programovať nato, aby ste si vytvorili web. Ak sa však chcete venovať programovaniu aj ďalej začnite s budovaním stránky pomocou HTML od úplných základov. Kód týchto editorov je veľmi škaredý, síce funkčný ale nájsť v ňom potom niečo, čo chcete zmeniť je problematické a určite sa natrápite.

Zopár WYSIWYG editorov

• Front Page 2003
• XStandard
• Tinymce
• HTML 2006
• Actual Drawing
• WYSIWYG Web Builder
• a mnohé ďalšie

C. Osobne pokladám za najlepšiu voľbu začať písať čistý kód HTML do textového programu. Bude tam iba to, čo napíšete a orientácia je potom na oveľa lepšej úrovni ako cudzí kód, ktorý vytvoril niekto iný (tým myslím aj iný program, nie len človek). Aby sme to zasa nemali úplne zložité, nebudeme písať do wordu alebo poznámkového bloku. V podstate by to šlo aj tam, ale ja odporúčam program PSPad. Pozná HTML príkazy a tak vám mnohokrát pomôže s ich dokončovaním alebo opravou. Rôzne farebne označuje aj tagy, vďaka čomu je v kóde oveľa lepšia orientácia. Prípadne je dobrý aj Notepad++. Vyskúšajte, čo vám vyhovuje viac. V podstate je to jedno, ktorý si vyberiete, pretože kód bude musieť byť rovnaký v hocijakom editore. Ja preferujem PSPad, pretože má jednoduchú funkciu rozpoznávania kódu farieb a práca sa mi tak oveľa menej komplikuje, akoby som to mal hľadať v grafických a iných programoch.

Čo je HTML?

Aby ste vedeli s čím vôbec pracujeme, spomeniem ešte krátku poučku. HTML znamená HyperText Mark-up Language. Je to jazyk, ktorý umožňuje vytvárať dokumenty obsahujúce text, hypertextové odkazy, multimediálny a iný obsah, formuláre, skripty a metainformácie prehliadateľné vo webovom prehliadači. Zjednodušene, webový prehliadač vie čítať tento kód (musíte sa to naučiť aj vy, čo je vlastne našim cieľom v tejto sérii návodov) a zobrazí presne to, čo je v ňom zapísané – vašu webovú stránku.

Čo všetko je potrebné aby sme mohli začať?

• Chuť učiť sa niečo úplne neznáme
• Textový editor na písanie kódu
• Webový prehliadač na kontrolu

Ukážku webovej stránky, ktorá bude korešpondovať s posledným najaktuálnejším článkom nájdete na html.endy.sk
Otvorte si teda textový editor a poďme nato:

1. Každá webová stránka musí mať určité pravidlá, tak ako má v podstate celý kód. Akonáhle zabudnete čo i len jedno znamienko, nastáva problém v zobrazení a príkaz je nefunkčný. Prvé pravidlo je, že dokument ukladáme pod názvom index.html – je to úvodná stránka, ktorá sa zobrazí pri načítaní zadanej domény do prehliadača www.vasadomena.sk.

2. Ďalšie pravidlo – každý dokument .html musí mať zadeklarovaný začiatok a koniec dokumentu. Ten zapíšeme príkazom: <html> je začiatok a </html> je koniec. Sú to tzv. párové značky, ktorých je v HTML kóde najviac. Párová značka musí mať začiatok zapisovaný takto <značka> a koniec sa zapisuje nasledovne </značka>. Medzi značky <html> vložíme hlavičku, kde bude zapísaný názov našej stránky a telo, kde už bude samotný text, ktorý sa zobrazí v prehliadači. Takže ak zapíšete tento kód, uložíte ho pod index.html a otvoríte cez webový prehliadač uvidíte svoj prvý text.

<html>
  <head>
     <title>Názov vašej stránky</title>
  </head>
  <body>
    Prvý text vášej webovej stránky
  </body>
</html>

Toto bol začiatočný článok len na objasnenie o čo vlastne ide. V druhej časti si povieme viac o možnostiach zadávania textu. Jeho úpravy a formy, či dokonca si môžme spraviť aj URL link ako odkaz na inú stránku. Dúfam, že sa vám tieto návody budú čítať dobre.

aktualizácia: PATWIST ďakujem za komentár, doplnil som to do článku.