Sprievodca vytvaranim stranky Vixova prirucka webelopera

Teraz si ukazeme vytvorenie jednoduchej stranky skutocne najjednoduchsim sposobom - pojdeme pekne krok za krokom a uvidite, ako postupne pridavame nove a nove prikazy. Ak niecomu nebudete rozumiet, vratte sa o krok spat. Ak budete chciet o novych prikazoch vediet viac, mozete skusit pozriet si ich v dokumentacnej casti.

Na vyskusanie potrebujete lubovolny textovy editor - napr. aj Notepad (len nesmiete zabudnut pri ukladani kliknut na moznost "Ulozit ako *.*", inak by vam notepad vzdy doplnal priponu .txt!). Ulozte subor tak, aby mal priponu ".html", napr. "test.html". Po ulozeni si vysledok pozriete dvojklikom na subor.

Stranka, ktoru sa budeme snazit vytvorit, sa nachadza tu!

Krok 1

Co budeme robit:

Najprv si vytvorime zakladnu stranku s nadpisom a jednym odstavcom.

Nove prikazy:

Zdrojovy text (krok 1):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY>
    <H1>Vitajte!</H1>

    <P>
    Tak vas pekne vitam na tejto mojej prvej stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s jazykom HTML. Vobec to nie
    je tazke, ako vidite!
  </BODY>
</HTML>

Vysledok (krok 1): tu


Krok 2

Co budeme robit:

Pridame nadpis druhej urovne, aby bol menej vyrazny. Tento nadpis vyuzijeme ako sucast "hlavneho menu" na vasej stranke.

Pre vacsiu prehladnost rozdelime text zatial jedineho odstavca na dva.

Nove prikazy:

Zdrojovy text (krok 2):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY>
    <H1>Vitajte!</H1>

    <P>
    Tak vas pekne vitam na tejto mojej prvej stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P>
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s jazykom HTML. Vobec to nie
    je tazke, ako vidite!
    
    <H2>
    Prosim, vyberte si:
    </H2>
  </BODY>
</HTML>

Vysledok (krok 2): tu


Krok 3

Co budeme robit:

Teraz si stranku mierne upravime - nastavime zarovnavanie textu v odstavcoch do bloku, aby sa dal lahsie citat a nadpisy zarovname do stredu.

Nove prikazy:

Zdrojovy text (krok 3):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY>
    <H1 ALIGN="center">Vitajte!</H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej prvej stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s jazykom HTML. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>
  </BODY>
</HTML>

Vysledok (krok 3): tu


Krok 4

Co budeme robit:

Nasa stranka zacina pomaly ziskavat svoju podobu. Pomozeme jej tym, ze si ju trochu zafarbime. Nastavime si farbu pre pozadie, text stranky, farbu liniek a zafarbime aj hlavny nadpis. Vsimnite si, ako skombinujeme dva prikazy tak, aby platili sucasne - pouzijeme farbu na uz existujuci nadpis!

Nove prikazy:

Zdrojovy text (krok 4):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej prvej stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s jazykom HTML. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>
  </BODY>
</HTML>

Vysledok (krok 4): tu


Krok 5

Co budeme robit:

Ak sa vam text stranky zda fadny, mozete pridat rozne efekty, ktore sluzia na jeho zvyraznenie. Teraz si ukazeme, ako napisat tucny text a kurzivu.

Nove prikazy:

Zdrojovy text (krok 5):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej <B>prvej</B> stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s <I>jazykom HTML</I>. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>
  </BODY>
</HTML>

Vysledok (krok 5): tu


Krok 6

Co budeme robit:

Doteraz sme vsetky udaje pisali na prvu stranku, ale lepsie je, ak si ju rozdelite na viacero suborov, medzi ktorymi vybudujete prepojenia (linky), pomocou ktorych si jednotlive subory spristupnite. Kazdy z tychto suborov predstavuje zasa dalsiu stranku napisanu v HTML, takze vedomosti ziskane pri pisani tohto suboru pouzijete aj tam.

Najprv si vytvorime jednoduchy zoznam s odrazkami, ktory bude neskor fungovat ako menu. Najprv bez liniek:

Nove prikazy:

Zdrojovy text (krok 6):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej <B>prvej</B> stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s <I>jazykom HTML</I>. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>

    <UL>
      <LI> Nieco o mne
      <LI> Kto su moji priatelia
      <LI> Zaujimave linky
      <LI> Ukazka mojej basnickej tvorby
    </UL>
  </BODY>
</HTML>

Vysledok (krok 6): tu


Krok 7

Co budeme robit:

Blizime sa k finale: pred chvilou sme definovali zoznam a ja som slubil, ze si urobime menu. Je to jednoduche: vsetky polozky zoznamu premenime na linky, ktore budu fungovat ako prepojenia medzi subormi. Po kliknuti na vybranu linku sa teda otvori dalsi subor. Ten si vsak budete musiet napisat :)

Okrem prepojeni na vase subory vsak mozete vytvorit linku, ktora vedie na nejaku WWW stranku. V tomto pripade treba uviest kompletnu URL adresu (napr. www.google.com).

Nove prikazy:

Zdrojovy text (krok 7):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej <B>prvej</B> stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s <I>jazykom HTML</I>. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>

    <UL>
      <LI> <A HREF="sbs-ja.html">Nieco o mne</A>
      <LI> <A HREF="sbs-priatelia.html">Kto su moji priatelia</A>
      <LI> <A HREF="sbs-linky.html">Zaujimave linky</A>
      <LI> <A HREF="sbs-basne.html">Ukazka mojej basnickej tvorby</A>
      <LI> <A HREF="http://www.google.com">Vyhladavac GOOGLE</A>
    </UL>
  </BODY>
</HTML>

Vysledok (krok 7): tu


Krok 8

Co budeme robit:

Pre ozivenie textu si ukazeme, ako vlozime horizontalny oddelovac (ciaru). Takato ciara nam nadherne oddeli velmi hutny text a da sa pouzit aj v pripade hlavicky a paty stranky. Teraz si ukazeme patu stranky, v ktorej pouzijeme zmensene pismo zarovnane doprava.

V tomto kroku pouzijeme tiez prikaz, ktory "prinuti" prehliadac zobrazit dalsi text na novom riadku. Za normalnych okolnosti sa totiz text zalamuje na konci riadku podla potreby.

Nove prikazy:

Zdrojovy text (krok 8):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej <B>prvej</B> stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s <I>jazykom HTML</I>. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>

    <UL>
      <LI> <A HREF="sbs-ja.html">Nieco o mne</A>
      <LI> <A HREF="sbs-priatelia.html">Kto su moji priatelia</A>
      <LI> <A HREF="sbs-linky.html">Zaujimave linky</A>
      <LI> <A HREF="sbs-basne.html">Ukazka mojej basnickej tvorby</A>
    </UL>

    <HR>
    <P ALIGN="right"><SMALL><I>(c) Ivan "VIX" Noris, 2001</I><BR>
    pre potreby VPW</SMALL></P>
    
  </BODY>
</HTML>

Vysledok (krok 8): tu


Krok 9

Co budeme robit:

Konecne dozrel cas na obrazky, takze si jeden vlozime. Pri obrazkoch plati pravidlo, ze problemom je skor vytvorit ho ako vlozit do stranky. Obrazok vsak mozete pouzit viacerymi sposobmi, napriklad okolo neho moze obtekat text. (Na toto vam velmi odporucam pozriet si dokumentacnu cast!).

Obrazok umiestnime do stredu stranky - tak sa logo najlepsie vynima.

Nove prikazy:

Zdrojovy text (krok 9):

<HTML>
  <HEAD>
    <TITLE>Moja pokusna stranka</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000"
  ALINK="#ff0000">
    <CENTER><IMG SRC="pictures/sbs-logo.gif" ALT=""></CENTER>
    
    <H1 ALIGN="center"><FONT COLOR="#f0d000">Vitajte!</FONT></H1>

    <P ALIGN="justify">
    Tak vas pekne vitam na tejto mojej <B>prvej</B> stranke! Ja viem, ze je este dost
    jednoducha, ale dokazal som si ju urobit celkom sam a tak som rad, ze vam
    ju mozem ukazat. Dufam, ze tu najdete nieco zaujimave.
    <P ALIGN="justify">
    Pre zaujimavost dodam, ze tuto stranku som pisal v obycajnom textovom
    editore a ze som sa pri tom naucil pracovat s <I>jazykom HTML</I>. Vobec to nie
    je tazke, ako vidite!
    
    <H2 ALIGN="center">
    Prosim, vyberte si:
    </H2>

    <UL>
      <LI> <A HREF="sbs-ja.html">Nieco o mne</A>
      <LI> <A HREF="sbs-priatelia.html">Kto su moji priatelia</A>
      <LI> <A HREF="sbs-linky.html">Zaujimave linky</A>
      <LI> <A HREF="sbs-basne.html">Ukazka mojej basnickej tvorby</A>
    </UL>

    <HR>
    <P ALIGN="right"><SMALL><I>(c) Ivan "VIX" Noris, 2001</I><BR>
    pre potreby VPW</SMALL></P>
    
  </BODY>
</HTML>

Vysledok (krok 9): tu


Zaverom

Tak, kratky kurz tvorby stranky mame za sebou. Zostava vytvorit subory, na ktore sa odkazuju linky z hlavneho menu a funkcna stranka je na svete. Snad mi nebudete nadavat, ak tuto pracu necham uz na vas - postup je uplne rovnaky pre kazdy dalsi subor.

Tymto sa moj sprievodca konci. Ak sa chcete dozvediet viac o zlozitejsich prvkoch, ako su tabulky ci formulare, odporucam vam pozriet si priklady (pre tabulky, pre formulare). Nie je vsak vylucene, ze sa na tomto mieste v buducnosti budem zaoberat aj nimi.