Sprievodca vytvaranim stranky krok za krokom

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:

<HTML> .. </HTML>: oznacenie zaciatku a konca stranky
<HEAD> .. </HEAD>: oznacenie hlavicky stranky, pouzijeme kvoli TITLE.
<TITLE>Nadpis stranky</TITLE>: nadpis stranky, ktory sa vypise v liste okna prehliadaca.
<BODY> .. </BODY>: telo stranky - hlavny blok, v ktorom budeme pisat vsetky ostatne prikazy
<H1>Vitajte</H1>: nadpis najvyssej urovne (najvacsi) s defaultnym zarovnavanim (vlavo) s textom "Vitajte"
<P> .. </P>: odstavec s defaultnym zarovnavanim (vlavo)

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:

<H2>Prosim, vyberte si:</H2>: nadpis druhej urovne (najvacsi) s defaultnym zarovnavanim (vlavo) s textom "Prosim, vyberte si:"

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:

<H1 ALIGN="center">Vitajte!</H1>: nadpis najvyssej urovne (najvacsi) so zarovnavanim do stredu
<P ALIGN="justify"> .. </P>: odstavec so zarovnavanim do stredu

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:

<BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#f0f000" VLINK="#a0a000" ALINK="#ff0000"> .. </BODY>: telo stranky s definovanim farieb
<FONT COLOR="#f0d000">Vitajte </FONT>: nastavenie farieb pre vybranu cast stranky, v tomto pripade pre text "Vitajte"

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:

<B> .. </B>: oznacenie bloku, ktory ma byt pisany tucnym pismom
<I> .. </I>: oznacenie bloku, ktory ma byt pisany kurzivou

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:

<UL> .. </UL>: definuje zoznam s odrazkami
<LI> polozka zoznamu: urcuje polozku zoznamu. V nasom pripade bude polozkou text, neskor ho prepiseme na linky.

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:

<A HREF="sbs-ja.html"> Nieco o mne </A>: vlozi linku na subor "sbs-ja.html". Klikatelny bude text "Nieco o mne"
<A HREF="http://www.google.com">Vyhladavac GOOGLE </A>: vlozi linku na adresu www.google.com. Klikatelny bude text "Vyhladavac GOOGLE"

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:

<HR>: vlozi horizontalny oddelovac (ciaru)
<SMALL>(c) Ivan "VIX" Noris</SMALL>: zmensi text v tomto bloku, v nasom pripade "(c) Ivan "VIX" Noris
<BR>: zalomi riadok na tomto mieste, dalsi text bude vypisany na zaciatku noveho riadku

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:

<IMG SRC="pictures/sbs-logo.gif" ALT="">: vlozi obrazok umiestneny v "pictures/sbs-logo.gif" s alternativnym textom "" (cize prazdnym). To preto, ze obrazok predstavuje logo a v pripade, ze ho prehliadac nevie zobrazit, nemame co citatelovi ponuknut ako "nahradny opis obrazku".
Prosim, berte ten obrazok s rezervou, nemal som dost casu, aby som sa s nim pohral, najma, ked mi islo o nieco ine ako kreslit hodinku obrazky... :)
<CENTER> .. </CENTER>: urcuje, ze blok v tomto prikaze (nemusi to byt iba text, ale aj obrazky, tabulky a pod.) ma byt zarovnany do stredu

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.