Jdi na obsah Jdi na menu
 

KKomplet návod

3. 4. 2007
  • Co je to WWW-stranka ?
    WWW-stranka je dokument (subor) napisany vo velmi jednoduchom jazyku HTML. Tento dokument obsahuje prikazy na formatovanie textu (farba, velkost, typ pisma), prikazy na vkladanie obrazkov a inych multimedialnych prvkov a prikazy na prepajanie sa na ine stranky - linky. V skratke mozno povedat: na stranke mozete mat cokolvek a odkazovat sa tiez na cokolvek.
    Ak si niekto pozrie Vasu stranku, znamena to, ze jeho prehliadac (klient) zasle poziadavku Vasmu serveru (procesu httpd, ktory potom prehliadacu zasle stranku, ktoru pozadoval.
  • Co je to HTML?
    HTML je skratka pre "HyperText Markup Language". Subory, ktore obsahuju prikazy HTML mavaju priponu (rozsirenie) ".html" alebo ".htm".
  • Ako spoznam HTML-dokument?
    Ako som uz napisal, podla pripony. Kazdopadne vsak podla toho, ze obsahuje prikazy jazyka HTML.
  • Co je prikaz HTML a ako sa pise?
    Prikazy HTML vam umoznuju s obycajnym textom robit rozne efekty, menit typ pisma, farbu, umoznuju vlozit obrazok a vselico ine. Prehliadac tieto prikazy spracuje a ukaze Vam (vacsinou ;-)) pozadovany vysledok.
    Poznamka: prehliadace ignoruju (alebo by aspon mali!) nezname prikazy a neexistujuce parametre alebo ich hodnoty. V niektorych pripadoch vsak mozu sposobit problemy - vidite nieco ine, ako ste povodne chceli.
    • Prikazy lahko spoznate pri prezerani zdrojoveho textu (su uzavrete v takychto zatvorkach: <PRIKAZ>). Ak ma PRIKAZ parametre, zadavame ich ZA menom prikazu:

      <PRIKAZ [PARAMETER1[="hodnota"] PARAMETER2[="hodnota"] ... ]>

      Parameter je potrebny na nastavenie niektorych vlastnosti prikazov, ak je nepovinny a neuvedieme ho, berie sa implicitne nastavenie. Parametre mozu byt navzajom oddelene lubovolnym poctom medzier i znakom konca riadku.

    • Hodnota byva vacsinou vyjadrenim velkosti (napriklad velkost pisma, tabulky, obrazku, atd) a udava sa v bodoch alebo v percentach. Ciselne vyjadrenie by malo byt uzavrete v "uvodzovkach". Niektore parametre hodnotu nemaju, staci, ze ich uvedieme. Priklad - parameter NOSHADE v prikaze HR hovori, ze nechceme tienovat a nepotrebuje k tomu ziadne dalsie informacie).

    • Text, ktory nie je v zatvorkach, bude vypisovany ako text s vlastnostami nastavenymi predchadzajucimi prikazmi

    • Vela prikazov ma charakter bloku - Zaciatok bloku platnosti je samotny <PRIKAZ> a koniec oznacime </PRIKAZ>, cize napriklad takto: 
      <PRIKAZ>
      pre tento blok (napriklad pre tento text) platia nastavenia prikazu PRIKAZ
      blablabla ;-)
      </PRIKAZ>

      Jeden konkretnejsi priklad:

      <B>bud si isty, ze tento text bude tucny!</B>


    • Okrem blokovych prikazov existuju aj take, ktore do dokumentu cosi "vkladaju", cize nemaju ukoncovaciu cast. Napriklad vlozenie horizontalneho oddelovaca (ciary):

      <HR>

    • Prikazy mozeme pisat malymi i velkymi pismenami a nemusia zacinat vzdy na novom riadku. Vsetko, co urobite, si po sebe budete musiet citat sami, preto si zdrojak radsej piste tak, aby ste vedeli, kde co mate ;-) Pre nazornost - takyto zapis 
      <HTML><HEAD><TITLE>Toto je moj prvy dokument</TITLE></HEAD></HTML>

      je identicky s tymto: 
      <html>
      <head>
      <title>Toto je moj prvy dokument</title>
      </head>
      </html>

      a samozrejme aj s tymto: 
      <Html>
      <Head>
      <Title>Toto je moj prvy dokument</Title>
      </Head>
      </Html>

       

      V tomto dokumente budem pisat prikazy HTML velkymi pismenami, co jednoznacne odporucam aj Vam.

    Myslim, ze uz prisiel cas ukazat si trochu praxe.

  • Ako teda zacat?

    Potrebujete vediet dve veci - meno podadresara, v ktorom sa maju HTML-dokumenty nachadzat (bude to vo Vasom domacom adresari) a meno indexoveho suboru. Vo vacsine pripadov je meno startovneho suboru index.html, adresar by mohol byt napriklad public-html. Mozete si to vyskusat, ak to nepojde, budete potrebovat tieto udaje naozaj zistit. Tu je niekolko moznosti, ako na to:

    1. Spytajte sa niekoho, kto uz ma stranku.
    2. Pozrite sa do domacich adresarov uzivatelov, ktori uz maju stranku. Hladajte "podozrive" podadresare (napriklad: "web-data, public-html, www, web" a pod.
    3. Kontaktujte webmastera nasho servera - poslite mail na "webmaster" (pripadne "webadmin", "www", ...)
    4. Trochu sikovnejsi Unixaci mozu skusit zistit tieto udaje aj z konfiguracneho suboru http-daemona (ak je pristupny na citanie). Mohlo by to ist napriklad takto: find / -name srm.conf -print a ak najdeme, vypisme si tento subor. Hladajme direktivy "UserDir" a "DirectoryIndex". Pripadne mozeme tieto riadky najst aj pomocou utility "grep" (grep UserDir /cesta/srm.conf resp. grep DirectoryIndex /cesta/srm.conf).
      Poznamka: subor "srm.conf" je sucastou webservera Apache, ktory patri k najpouzivanejsim.

    Adresar s HTML-dokumentami vasej stranky sa musi nachadzat vo vasom domacom adresari.

    Teraz chvilu predpokladajme, ze uz viete aj meno adresara aj meno indexoveho suboru. Tento adresar si musite vytvorit. V priklade, ktory mozete brat aj ako navod, budem predpokladat meno adresara web-data a meno suboru index.html.

    Priklad pre Unix (s nastavenim pristupovych prav, ktore je velmi dolezite): 

    cd
    mkdir web-data
    chmod 755 web-data resp. chmod 711 web-data
    cd web-data
    A mozeme editovat subor index.html. Prazdny dokument by vyzeral takto:
    <HTML>
    </HTML>

    Alebo, ak chceme byt celkom korektni (mali by sme specifikovat aj tieto casti:)

    <HTML>
    <TITLE>Toto je pokusna stranka</TITLE>
    <BODY>
    </BODY>
    </HTML>

    Tu v praxi vidite pouzitie prikazu, ktory ma ohranicenu platnost. Dokument zacina uplne na zaciatku suboru a konci jeho koncom. Preto vsetky ostatne prikazy budeme pisat medzi tieto dva prikazy.

    Odporucam teraz prerusit citanie a vyskusat si vytvorit takyto dokument. Potom skuste svoju "stranku" pozriet v prehliadaci. Hned zistite, ci je vsetko v poriadku. Ak nie, mozno vam pomoze, ked si posledne riadky prejdete znovu, inak skuste riesenie beznych problemov

     

    Blokova struktura HTML-dokumentov
    • HTML (oznacenie celeho dokumentu)
      • HEAD (oznacenie hlavicky - nepovinne)
        • TITLE (nazov dokumentu)
      • BODY (telo samotneho dokumentu)
      • ADDRESS (blok s adresou autora a pod. informaciami)

    Tematicke usporiadanie prikazov HTML

    Uprava textu:


    Prechod na ine dokumenty, ich casti, subory, stranky - linky:


    Obrazky:


    Zoznamy:


    Tabulky:


    Formulare


    Ramceky (Frames):

    Struktura HTML nie je zlozita - dokument sa sklada z niekolkych blokov, ktore si tu popiseme. Niektore bloky su povinne, ine zasa nie, ale takze je na Vas, aby ste si vyskusali, "co to urobi", ked ich tam (ne)date ;-)

    HTML

    Popis (co to robi):

    Tento prikaz oznacuje zaciatok a koniec celeho dokumentu. Je to najdolezitejsi blok, ktory je povinny. Medzi zaciatok a koniec tohto prikazu piseme vsetky ostatne prikazy a text.

    Syntax:

    <HTML> ... </HTML>

    Typ: blokovy, povinny

    Parametre: ziadne.

    Priklad:

    <HTML>
    tu budu dalsie prikazy a text
    ..
    ..
    </HTML>

    Pomocka:

    Ked zacnete editovat stranku, vytvorte si dokument, ktory uz obsahuje aj koniec tohto prikazu a vsetko ostatne piste medzi ne. Nestane sa Vam, aby ste dokument zabudli ukoncit, co niekedy moze byt pricinou toho, ze "to nefunguje".

    HEAD

    Popis (co to robi):

    Tento prikaz definuje hlavicku dokumentu, ktora vacsinou obsahuje poznamku o autorovi, ktoru sem uklada program, v ktorom vytvarame stranku, ak ju nerobime rucne. Dalej obsahuje TITLE, cize nazov dokumentu. Blok HEAD nie je povinny, ale TITLE sa odporuca nastavit.

    Syntax:

    <HEAD> ... </HEAD>

    Typ: blokovy, nepovinny.

    Parametre: ziadne.

    Priklad:

    Nas dokument teda bude: 
    <HTML>
    <HEAD>
    ...dokument...
    </HEAD>
    </HTML>

    TITLE

    Popis (co to robi):

    Definuje nazov dokumentu, ktory sa zobrazuje v kazdom prehliadaci stranky. Mal by byt uvedeny v kazdom dokumente. Tento prikaz musi byt uvedeny bud na zaciatku dokumentu (mimo bloku BODY alebo v bloku HEAD, ktory sme si prave popisali.

    Syntax:

    <TITLE>nazov dokumentu</TITLE>

    Typ: blokovy, nepovinny

    Parametre: ziadne.

    Priklad:

    <HTML>
    <HEAD>
    <TITLE>Nazov dokumentu</TITLE>
    ...dokument...
    </HEAD>
    </HTML>

    resp. ak vypustime hlavickovy blok HEAD:

    <HTML>
    <TITLE>Nazov dokumentu</TITLE>
    <BODY>
    ...dokument...
    </BODY>
    </HTML>

    BODY

    Popis (co to robi):

    Oznacuje telo dokumentu. Ak budete svoju stranku editovat v textovom editore pre textovy prehliadac, je zbytocne zatazovat sa parametrami. Inak Vam tento prikaz umozni nastavit farebne prostredie dokumentu (farba pozadia, tapeta na pozadi, farba textu a liniek).

    Syntax:

    <BODY [ [BACKGROUND="cesta/subor"] [BGCOLOR="farba"] [LINK="farba"] [VLINK="farba"] [ALINK="farba"] ]> ... </BODY>

    Typ: blokovy, povinny

    Parametre:

    BACKGROUND="cesta/subor" je subor, ktory sa pouzije ako tapeta na pozadi pod dokumentom v grafickom prezeraci. Ak cesta nezacina znakom "/", je relativna vzhladom na adresar aktualneho suboru. Ak sa subor nenajde, alebo nie je pozadovaneho formatu, parameter bude ignorovany.

    BGCOLOR="#farba" definuje farbu pozadia pod dokumentom. Dalsie informacie o zadavani farieb najdete tu.

    TEXT="#farba" definuje farbu textu. Dalsie informacie o zadavani farieb najdete tu.

    LINK="#farba" definuje farbu liniek, cize odkazov na ine subory, stranky alebo sluzby. Dalsie informacie o zadavani farieb najdete tu.

    VLINK="#farba" definuje farbu linky, ktoru sme uz navstivili (V = visited). Dalsie informacie o zadavani farieb najdete tu.

    ALINK="#farba" definuje farbu linky pri stlaceni tlacitka na mysi (A = activated).

    Dalsie informacie o zadavani farieb najdete tu.

    Priklad:

    (cierne pozadie, zeleny text, linky su svetlozlte, navstivene linky tmavozlte, aktivne linky biele) 
    <HTML>
    <TITLE>Nazov dokumentu</TITLE>
    <BODY BGCOLOR="#000000" TEXT="green" LINK="#f0f000" VLINK="#a0a000"
    ALINK="white">
    ... 
    </BODY>
    </HTML>

    Pomocka:

    V pripade, ze budete pouzivat len textovy prehliadac, nemusite sa trapit s nastavovanim farieb a pokojne pouzite prikaz BODY bez parametrov.

    ADDRESS

    Popis (co to robi):

    Tento nepovinny blok sa pouziva vacsinou za koncom bloku BODY na definovanie a vypisanie adresy autora (alebo akehokolvek textu) - lebo ako som si vsimol, tento blok neurobi vlastne nic ine, ako nastavenie urciteho typu pisma.

    Syntax:

    <ADDRESS> ... </ADDRESS>

    Typ: blokovy, nepovinny.

    Parametre: ziadne.

    Priklad:

    <HTML>
    <TITLE>Nazov dokumentu</TITLE>
    <BODY>
    ...dokument...
    </BODY>
    <ADDRESS>
    moja adresa alebo hocico ;-)
    </ADDRESS>
    </HTML>

    Nadpisy

    Popis (co to robi):

    Nadpisy, alebo tiez hlavicky (heading), mozete pouzivat na zvyraznenie niektorej casti dokumentu. Tento prikaz za vas sam nastavi velkost pisma a niektore jeho vlastnosti a da sa teda simulovat aj inym sposobom. Casto je to vsak najrychlejsia moznost, ako nieco zvyraznit. ;-)

    Nadpisy vyzeraju takto:

    Toto je nadpis H1

    Toto je nadpis H2

    Toto je nadpis H3

    Toto je nadpis H4

    Toto je nadpis H5
    Toto je nadpis H6

    Syntax:

    <H1 [ALIGN=["left" | "center" | right"] ]> ... </H1>
    <H2 [ALIGN=["left" | "center" | right"] ]> ... </H2>
    <H3 [ALIGN=["left" | "center" | right"] ]> ... </H3>
    <H4 [ALIGN=["left" | "center" | right"] ]> ... </H4>
    <H5 [ALIGN=["left" | "center" | right"] ]> ... </H5>
    <H6 [ALIGN=["left" | "center" | right"] ]> ... </H6>

    Typ: blokovy

    Parametre:

    ALIGN urcuje zarovnanie nadpisu (right - vpravo, center - v strede, left - vlavo) Implicitne je nastavene zarovnavanie "vlavo".

    Priklad:

    <H1>Hlavne menu:</H1>


    <H3>Male menu:</H3>

    Zmeny typu/vlastnosti pisma - standardne

    B

    Popis (co to robi):

    Text v tomto bloku bude tucny (b - bold).

    Syntax:

    <B> ... </B>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <B>zvyrazneny text - tucny</B>
    obycajny text

    I

    Popis (co to robi):

    Text v tomto bloku bude napisany kurzivou.

    Syntax:

    <I> ... </I>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <I>zvyrazneny text - kurziva</I>
    obycajny text

    U

    Popis (co to robi):

    Text v tomto bloku bude podciarknuty.

    Syntax:

    <U> ... </U>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <U>podciarknuty text</U>
    obycajny text

    Efekty fungujuce len v grafickych prehliadacoch

    TT

    Popis (co to robi):

    Text v tomto bloku bude napisany neproporcionalne - ako na pisacom stroji.

    Syntax:

    <TT> ... </TT>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <TT>text pisany strojom</TT>
    obycajny text

    CODE

    Popis (co to robi):

    Tento prikaz nastavi typ pisma vhodny na pisanie zdrojoveho kodu programu.

    Syntax:

    <CODE> ... </CODE>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <CODE>text v style "CODE"</CODE>
    obycajny text

    Poznamka:

    Toto pismo ma zrejme rovnake vlastnosti ako pismo <TT> ... </TT>.

    STRIKE

    Popis (co to robi):

    Pismo v tomto bloku bude preskrtnute!

    Syntax:

    <STRIKE> ... </STRIKE>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <STRIKE>preskrtnuty text</STRIKE>
    obycajny text

    STRONG

    Popis (co to robi):

    Pismo v tomto bloku bude zvyraznene (strong = silny).

    Syntax:

    <STRONG> ... </STRONG>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <STRONG>zvyrazneny text</STRONG>
    obycajny text

    Poznamka:

    Toto pismo ma zrejme rovnake vlastnosti ako pismo <B> ... </B>.

    SUB

    Popis (co to robi):

    Pismo v tomto bloku bude dolnym indexom

    Syntax:

    <SUB> ... </SUB>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <SUB>dolny index</SUB>
    obycajny text

    SUP

    Popis (co to robi):

    Pismo v tomto bloku bude hornym indexom

    Syntax:

    <SUP> ... </SUP>

    Typ: blokovy

    Parametre: ziadne:

    Priklad:

    obycajny text
    <SUP>horny index</SUP>
    obycajny text

    FONT

    Popis (co to robi):

    Tymto prikazom mozeme menit velkost, farbu a dokonca aj typ pisma.

    Syntax:

    <FONT COLOR="#farba" SIZE="velkost" FACE="meno pisma"> ... </FONT>

    Typ: blokovy

    Parametre:

    COLOR je nastavenie farby pisma. Ak sa chcete dozvediet nieco farbach v HTML, kliknite tu!

    SIZE dokaze zmenit velkost pisma v danom bloku. Mozeme ju zadat ako relativne cislo so znamienkom + alebo -, ktore urci, ci sa pismo zmensi, alebo zvacsi oproti standardu. Velkosti su z intervalu -2 az 4. Za znamienkom nasleduje velkost.

    Priklad:

    <FONT COLOR="#farba" SIZE="velkost">
    tento text bude celkom iste iny
    </FONT>

    Priklad: 

    <FONT SIZE="-2">pokus</FONT>
    <FONT SIZE="-1">pokus</FONT>
    <FONT SIZE="+1">pokus</FONT>
    <FONT COLOR="#f0f000" SIZE="+2" FACE="arial">pokus</FONT>
    <FONT SIZE="+3">pokus</FONT>
    <FONT SIZE="+4">pokus</FONT>

    bude vyzerat takto:
    pokus
    pokus
    pokus
    pokus
    pokus
    pokus

    BLINK

    Popis (co to robi):

    Tento prikaz rozblika Vas text.

    Syntax:

    <BLINK> ... </BLINK>

    Typ: blokovy

    Parametre: ziadne.

    Priklad:

    <BLINK>Uplna novinka!!!</BLINK>

    Poznamka:

    nefunguje pod textovymi prezeracmi

    Formatovanie odstavca

    P

    Popis (co to robi):

    Text mozeme rozdelit na odstavce, aby sme ho urobili prehladnejsim. Vlozenie odstavca sposobi, ze text bude zacinat na novom riadku a bude oddeleny od predchadzajuceho odstavca volnym riadkom.
    Odstavce mozu byt zarovnane vlavo, vpravo alebo do stredu.

    Syntax:

    <P [ALIGN=["left" | "center" | "right"] ]> ... [</P>]

    Typ: (ne)blokovy

    Prikaz moze, ale nemusi byt ukonceny. Zaciatok noveho odstavca automaticky ukoncuje predchadzajuci odstavec.

    Parametre:

    ALIGN urcuje typ zarovnavania. Implicitne je ALIGN="left".

    Priklad:

    <P>
    text bude zarovnavany k lavemu okraju az do konca odstavca
    </P>
    <P ALIGN="center">
    text bude zarovnavany do stredu az do zaciatku dalsieho odstavca
    <P>
    ...

    Zrusenie automatickeho formatovania

    PRE

    Popis (co to robi):

    Prikaz zabrani automatickemu formatovaniu textu v urcenom bloku. Automaticke formatovanie sposobuje ignorovanie medzier, koncov riadku a tabulatorov ("white spaces") a zabezpecuje vypis textu tak, aby slova na konci riadku neboli rozdelovane.
    Pouzitim tohto prikazu bude text zobrazovany v povodnom stave aj s 
    pripadnymi        medzerami     a znakmi
    pre
    koniec
    riadku.

    Syntax:

    <PRE> ... </PRE>

    Typ: blokovy

    Parametre: ziadne

    Pomocka:

    Tento prikaz sa casto pouziva, ked do suboru s dokumentom pri editacii vkladate text programu alebo ASCII-obrazok.

    Vlozenie konca riadku

    BR

    Popis (co to robi):

    Prejde na novy riadok. Vhodne, ked potrebujeme, aby automaticky formatovany text zacinal na novom riadku.

    Syntax:

    <BR [CLEAR=["all" | "left" | "right"] ]>

    Typ: neblokovy

    Parametre:

    CLEAR sposobi prejdenie na novy riadok POD objektom, okolo ktoreho text obteka.

    Priklad:

    text<BR>tento text zacina na novom riadku

    Text bez noveho riadku

    NOBR

    Popis (co to robi):

    Prikaz definuje blok textu, ktory bude za kazdych okolnosti napisany v jednom riadku (ako napriklad tento text) a nebude preruseny ani na konci obrazovky.

    Syntax:

    <NOBR> ... </NOBR>

    Typ: blokovy

    Parametre: ziadne.

    Priklad:

    <NOBR>text v tomto riadku nebude preruseny ani na konci
    obrazovky. Pojde dalej a dalej a dalej a dalej a dalej...
    </NOBR>

    Prechod na novy riadok v prikaze NOBR

    WBR

    Popis (co to robi):

    Analogicky ako <BR> za normalnych okolnosti, prejde na novy riadok v bloku <NOBR> </NOBR>.

    Syntax:

    <WBR>

    Typ: neblokovy

    Parametre: ziadne.

    Priklad:

    <NOBR>text v tomto riadku nebude preruseny ani na konci obrazovky.
    Pojde dalej a dalej a dalej a dalej a <WBR> prejde na novy riadok a
    pojde dalej...
    </NOBR>

    Horizontalny oddelovac

    HR

    Popis (co to robi):

    Vlozi horizontalny oddelovac (ciaru) a oddeli tak jednotlive casti dokumentu.

    Syntax:

    <HR [SIZE="velkost v bodoch"] [WIDTH="sirka"] [ALIGN="zarovnanie"] [NOSHADE]>

    Typ: neblokovy

    Parametre:

    SIZE urcuje hrubku ciary v bodoch, implicitne je 2

    WIDTH urcuje sirku oddelovaca bud v bodoch, alebo v percentach celkovej sirky stranky, implicitne je 100%

    ALIGN urcuje zarovnanie oddelovaca (LEFT, RIGHT, CENTER), implicitne je "center".

    NOSHADE je prepinac. Ak ho uvedieme, oddelovac nebude tienovany.

    Priklad:

    Tato cast bude oddelena od dalsej pomocou oddelovaca.
    <HR>
    Tato cast uz oddelena je ;-)

    Odsadenie bloku od laveho okraja

    BLOCKQUOTE

    Popis (co to robi):

    Odsadi text o "jednotku odsadenia" (nieco ako TAB v textovom editore). Mozete ho pouzivat viacnasobne za ucelom vacsieho odsadenia.
    Tento prikaz pouzivam aj v tomto dokumente na odsadenie nasledujucich informacii o prikaze.

    Syntax:

    <BLOCKQUOTE> ... </BLOCKQUOTE>

    Typ: blokovy, moznost viacnasobneho pouzitia

    Parametre: ziadne.

    Priklad:

    Tento text zacina normalne na zaciatku odstavca.<BR>

    <BLOCKQUOTE>Tento je odsadeny. Vsetko, co budem teraz pisat, mi bude
    zacinat od pozicie, ktoru mi nastavil prikaz BLOCKQUOTE. Skuste si to!
    </BLOCKQUOTE>

    Centrovanie textu

    CENTER

    Popis (co to robi):

    Vycentruje blok textu, obrazky, tabulky a akekolvek ine objekty v tomto bloku.

    Syntax:

    <CENTER> ... </CENTER>

    Typ: blokovy

    Parametre: ziadne.

    Priklad:

    <H1>
    <CENTER>
    Veeeelky centrovany nadpis!
    </CENTER>
    </H1>

    Pozri tiez:

    <P> ...</P>, Nadpisy...

    Vlozenie poznamky

    !

    Popis (co to robi):

    Umozni vytvorit komentar v zdrojovom texte stranky. Komentar nie je zobrazovany v prehliadaci a sluzi na komentare. Da sa pouzit aj na spracovanie specialnych direktiv (napr. SSI - Server Side Includes).

    Syntax:

    <! jednoprikazovy komentar>
    <!-- lubovolne dlhy komentar, ignoruju sa aj prikazy, napr. <CENTER> -->

    Typ: neblokovy

    Parametre: ziadne.

    Priklad:

    <!-- komentar -->

    Pomocka:

    Zapoznamkovanie urcitej casti dokumentu zjednodusi hladanie chyb v dokumentoch. Pouzivajte radsej rozsireny tvar <!-- ... -->.

    Linky

    A

    Popis (co to robi):

    Prikaz ma dve zakladne funkcie.
    1. Vlozi do dokumentu linku - odkaz na iny HTML-dokument. Po linkach sa pohybujeme mysou alebo kurzorovymi klavesami a aktivaciou sa dostaneme na ciel linky.
    2. Definuje navestie, na ktore sa moze odkazovat linka

    Syntax:

    <A HREF="[sluzba://][server.domena/][:port][/cesta/][subor][#navestie] [TARGET="frame"]> text linky </A>
    <A NAME="meno"></A>

    Typ: blokovy

    Parametre:

    HREF - urcuje adresu a/alebo cestu k dokumentu, na ktory sa odkazujeme (pre syntax 1.) Obsahuje:
    sluzba: oznacenie typu protokolu ("http" pre HTML-dokumenty, "ftp" pre subory na ftp, "telnet" pre telnetove spojenie, a ine)

    server.domena: predstavuje internetovsku adresu

    port: umoznuje urcit cislo portu, na ktory sa klient bude pripajat pri pouziti sluzby "telnet". Implicitne je to port "23" (login).

    cesta: predstavuje cestu k dokumentu

    subor: meno HTML-suboru. Ak nie je urcene, berie sa indexovy subor (ak existuje).

    navestie: umoznuje nastavit sa priamo na urcene navestie v danom subore

    TARGET umozni urcit okno, do ktoreho sa dokument zobrazi pri pouziti FRAMEs.

    NAME definuje navestie (pre syntax 2.)

    Priklad:

    Odkaz: 
    <A HREF="omne.html"> Nieco o mne </A><BR>
    <A HREF="dalsie/omne.html"> Nieco o mne2 </A><BR>
    <A HREF="pictures/fotka.gif"> Moja fotka </A><BR>
    <A HREF="http://fornax.elf.stuba.sk"> Fornax </A><BR>
    <A HREF="telnet://fornax.elf.stuba.sk:6666"> Crazy Talker </A><BR>
    <A HREF="#sos"> Prva pomoc </A><BR>

    Navestie: 
    <A NAME="menu"></A><BR>

    Pomocka:

    Tento prikaz umoznuje aj posielat e-mail. Vyskusajte si to: 
    <A HREF="mailto:vix@fornax.elf.stuba.sk"> Mail VIXovi </A>

    Vlozenie obrazku

    IMG

    Popis (co to robi):

    Vlozi do dokumentu obrazok, ktory musi byt v niektorom z podporovanych formatov (urcite funguje ".jpg" a ".gif", dalsie nemam odskusane).

    Syntax:

    <IMG SRC="cesta/subor" [ALIGN=["top" | "bottom" | "left" | "right" | "middle"]] [WIDTH="velkost"] [HEIGHT="velkost"] [VSPACE="velkost"] [HSPACE="velkost"] [BORDER="sirka"] [ISMAP] [USEMAP="#mapa"] [ALT="text"]>

    (alebo jednoduchsia a casto postacujuca syntax:)
    <IMG SRC="cesta/subor" ALIGN="zarovnanie" ALT="text">

    Typ: neblokovy

    Parametre:

    SRC je cesta ku grafickemu suboru

    ALIGN je zarovnanie okoliteho textu vzhladom na obrazok, da sa takto nastavit obtekanie obrazku textom:
    "top" text bude zarovnany vzhladom na horny okraj obrazku.

    Priklad: Pokusny text. [priklad nevidite] Pokusny text, na ktorom pozorujte vztah medzi typom zarovnania, obrazkom a textom.

    "bottom" text bude zarovnany vzhladom na dolny okraj obrazku

    Priklad: Pokusny text. [priklad nevidite] Pokusny text, na ktorom pozorujte vztah medzi typom zarovnania, obrazkom a textom.

    "left" text bude zarovnany vzhladom na pravy okraj obrazku - obtekanie

    Priklad: [priklad nevidite] Pokusny text. Toto je obtekanie textu okolo obrazku sprava (obrazok je nalavo od textu. Toto sa casto vyuziva pri umiestnovani obrazkov do textu.

    "right" text bude zarovnany vzhladom na lavy okraj obrazku - obtekanie

    Priklad: [priklad nevidite] Pokusny text. Teraz vidite obtekanie zlava, obrazok je napravo od textu. Tu by pokracoval vas text a vsetko ostatne. Ked skonci obrazok, text bude opat na celej povodnej sirke obrazovky.

    "middle" text bude zarovnany vzhladom na stred obrazku

    Priklad: Pokusny text. [priklad nevidite] Pokusny text je teraz s obrazkom vypisny tak, aby bol obrazok na "osi" textu.

    WIDTH urcuje sirku obrazku (mozeme ju zvacsit i zmensit bud uvedenim velkosti v bodoch, alebo v percentach povodneho obrazku)

    HEIGHT urcuje vysku obrazku (mozeme ju zvacsit i zmensit bud uvedenim velkosti v bodoch, alebo v percentach povodneho obrazku)

    VSPACE umoznuje nastavit okolie nad/pod obrazkom, ktore ma byt prazdne

    HSPACE umoznuje nastavit okolie vedla obrazku, ktore ma byt prazdne

    BORDER definuje hrubku okraja okolo obrazku (v bodoch). Okraj sa zobrazuje len vtedy, ak je obrazok sucasne linkou.

    ISMAP urcuje, ze obrazok je klikatelna mapa (niektore oblasti sme si zadefinovali ako linky). Nema vyznam pri normalnom obrazku.

    USEMAP urcuje meno tejto mapy. ISMAP a USEMAP su nevyhnutne pri praci s obrazkovymi mapami a nemaju vyznam pri normalnych obrazkoch

    ALT nastavuje text, ktory sa vypise v textovom prezeraci pri pokuse zobrazit tento obrazok, alebo pri vyskyte udalosti, ktora znemoznila zobrazit ho v grafickom prezeraci. Ak tento parameter nenastavite, Vas dokument bude v textovom prezeraci plny skaredych textov "[IMAGE]" resp. "[LINK]" podla toho, ci je Vas obrazok zaroven linkou alebo nie.
    Vrelo vam odporucam nastavit sem bud nejaky zmysluplny text alebo aspon prazdny retazec, co urobite takto:
    ALT="".

     

    Priklad:

    <IMG SRC="pictures/ikona.gif" ALT="">

    Pomocka:

    Obrazok nemusi byt len dekoracia, moze fungovat aj ako linka: 
    Vyber si, co sa ti paci:<BR>
    <A HREF="ktosom.html">Nieco o mne</A><BR>
    <A HREF="ktosom.html"><IMG SRC="pictures/ikona.gif" ALT=""> zaujimave
    linky</A><BR>

    Vlozenie obrazkovej mapy

    MAP, AREA

    Popis (co to robi):

    Obrazkova mapa umoznuje "rozdelit" obrazok na viac oblasti, ktore potom budu fungovat ako linky. Vybornym prikladom moze byt mapa, kde mesta budu obsahovat linku na blizsie informacie, alebo skupinova fotografia s linkami na jednotlive osoby.

    Syntax:

    <MAP NAME="meno mapy">
    <AREA SHAPE=["rect" | "circle" | "poly"] COORDS="x1, y1, x2, y2, ... xN, yN" HREF="cesta/subor" [TARGET="meno okna"]>
    </MAP>

    Typ: MAP - blokovy, AREA - neblokovy

    Parametre:

    SHAPE nam urcuje tvar oblasti, ktora funguje ako linka.
    rect = obdlznik, POLY = polygon - mnohouholnik, circle = kruh.

    COORDS ohranicuju citlivu oblast linky v obrazku. Suradnice [0,0] urcuju lavy horny okraj obrazku, ostatne suradnice su relativne.
    Pri "rect" musite urcit lavy horny a pravy dolny roh suradnicami x1,y1,x2,y2.
    Ak pouzivate "poly", oblast ohranicite lubovolnym poctom bodov, podla pozadovaneho tvaru klikatelnej oblasti.
    "circle" je pravdepodobne urceny suradnicami stredu a polomerom. Tuto moznost som zatial netestoval.

    HREF je, ako vsetci tusite, linka, ktora sa aktivuje pri kliknuti na tuto definovanu oblast. Plati pre nu to iste, ako pre beznu linku - prikaz <A HREF> ... </A>.

    TARGET ma ten isty vyznam, ako pri prikaze <A HREF> ... </A> - urcuje meno okna, do ktoreho sa nahra obsah linky pri pouziti FRAMEs.

    Priklad:

    <MAP NAME="menumap">
    <AREA SHAPE="RECT" COORDS="100, 0, 140, 15" HREF="slovak/vix.html" TARGET="main">
    <AREA SHAPE="RECT" COORDS="10, 10, 100, 30" HREF="slovak/hi100ry.html" TARGET="main">
    <AREA SHAPE="RECT" COORDS="150, 10, 230, 30" HREF="slovak/poviedky.html" TARGET="main">
    <AREA SHAPE="RECT" COORDS="30, 40, 110, 60" HREF="slovak/murphy.html" TARGET="main">
    <AREA SHAPE="RECT" COORDS="130, 40, 200, 60" HREF="slovak/homepage.html" TARGET="main">
    <AREA SHAPE="RECT" COORDS="90, 75, 140, 90" HREF="/" TARGET="_top">
    </MAP>

    <IMG SRC="/~vix/pictures/menumap.gif" ISMAP USEMAP="#menumap" ALT="" BORDER="0">

    Poznamka:

    Klikatelne obrazkove mapy su uz implementovane aj v novsich verziach Lynx-u. Samozrejme, ako menu bez obrazkov...

    Zoznamy

    Zoznamy sa skladaju z definicie typu zoznamu a jednotlivych poloziek.

    Polozka zoznamu

    LI

    Popis (co to robi):

    Tento prikaz urcuje polozku zoznamu. Polozka zoznamu zacina odrazkou alebo poradovym cislom (pismenom), podla typu zoznamu.

    Syntax:

    <LI> text polozky zoznamu [</LI>]

    Typ: (ne)blokovy

    Prikaz moze, ale nemusi byt ukonceny. Vlozenie dalsej polozky zoznamu automaticky ukoncuje predchadzajucu polozku.

    Parametre: ziadne.

    Priklad:

    ...
    <LI> toto je prva polozka<BR>
    <LI> toto je <A HREF="sem.html">druha polozka</A><BR>
    ...

    Pomocka:

    Polozka zoznamu, ktoru vlozime mimo samotneho zoznamu, nam moze posluzit ako rychla forma zvyraznenia/ozvlastnenia textu. Pridava nam pred text totiz odrazku.

    Cislovany zoznam

    OL

    Popis (co to robi):

    Vytvori zoznam s ocislovanymi polozkami.

    Syntax:

    <OL [ TYPE=["1" | "I" | "i" | "A" | "a"] ] [START="cislo"]>
    <LI> ...
    <LI> ...
    ...
    </OL>

    Typ: blokovy

    Parametre:

    TYPE nam nastavuje typ cislovania:
    1 - arabske cislice (implicitne nastavenie)
    I - velke rimske cislice
    i - male rimske cislice
    A - velke pismena
    a - male pismena

    START urci prve cislo v zozname (alebo pismeno)

    Implicitne je nastavene cislovanie od 1.

    Priklad:

    <OL TYPE="I">
    <LI> toto je prva polozka<BR>
    <LI> toto je <A HREF="sem.html">druha polozka</A><BR>
    </OL>

    Zoznam s odrazkami

    UL

    Popis (co to robi):

    Vytvori zoznam s odrazkami.

    Syntax:

    Okrem cislovaneho zoznamu si mozeme vytvorit aj zoznam, ktoreho polozky budu zacinat nejakym znakom. <UL [ TYPE=["disc" | "circle" | "square"] ]>
    <LI> ...
    <LI> ...
    ...
    </UL>

    Typ: blokovy

    Parametre:

    TYPE urcuje tvar odrazky. "disc" je plny kruzok (implicitne nastavenie), "circle" prazdny kruzok a "square" stvorcek. Ak zbadate nejake ine znaky, znamena to, ze moj Netscape 3.00 pouziva ine standardy ako Vas prehliadac a naopak ;-(

    Priklad:

    <UL>
    <LI> toto je prva polozka<BR>
    <LI> toto je <A HREF="sem.html">druha polozka</A><BR>
    </UL>

    Poznamka:

    Zoznamy mozu byt vnorene a tak sa Vam lahko podari vytvorit viacurovnovy "zoznam zoznamov"
    • Prva polozka
    • Druha polozka
      Vnoreny zoznam:
      • Prva polozka vo vnutornom zozname
      • A dalsia polozka vo vnutornom zozname
    • Tato polozka je opat v prvom zozname
    A tu zoznam skoncil.

    Vytvaranie tabuliek

    TABLE

    Popis (co to robi):

    Vytvori (vlozi) tabulku s definovanymi vlastnostami. V bloku oznacenom tymto prikazom mozete vkladat riadky a polozky tabulky.
    Tabulka sa sklada z riadkov, ktore sa skladaju z poloziek.

    Syntax:

    <TABLE [ [BGCOLOR="farba"] [WIDTH="velkost"] [ALIGN=["left" | "right" | center"]] [VALIGN=["top" | "bottom" | "center"]] [BORDER="velkost"] [CELLSPACING="velkost"] [CELLPADDING="velkost"] ]> ... </TABLE>

    Typ: blokovy:

    Parametre:

    BGCOLOR urcuje farbu pozadia tabulky. Viac o zadavani farby najdete tu. Implicitne je farba tabulky nastavena na hodnotu BGCOLOR v bloku <BODY> ... </BODY>.

    WIDTH urcuje sirku tabulky v bodoch alebo percentach sirky stranky. Implicitne sa nastavuje podla najvacsej sirky riadku.

    ALIGN urcuje typ zarovnania jednotlivych poloziek tabulky ("right", "center", "left"). Implicitne je nastavena hodnota "left".
    Tento parameter plati pre vsetky polozky tabulky, pokial ho nepredefinujeme v prikazoch <TR> ... </TR> resp. <TD> ... </TD>

    VALIGN urcuje typ vertikalneho zarovnania jednotlivych poloziek tabulky ("top", "bottom", "center"). Implicitne je nastavena hodnota "center".
    Tento parameter plati pre vsetky polozky tabulky, pokial ho nepredefinujeme v prikazoch <TR> ... </TR> resp. <TD> ... </TD>

    BORDER je sirka okraja okolo tabulky. Je dokonca tienovany. Ak date velkost "0", okraj okolo tabulky nebude.

    CELLSPACING urcuje sirku prazdneho okraja (v bodoch) okolo polozky tabulky (zvonka)

    CELLPADDING urcuje sirku prazdneho okraja (v bodoch) okolo polozky tabulky (zvnutra)

    Priklad:

    (tabulka polovicnej sirky, zarovnanie poloziek do stredu, okraj 4...)

     

    <TABLE WIDTH="50%" ALIGN="center" VALIGN="center" BORDER="4" CELLSPACING="3"
    CELLPADDING="10">
    ...
    </TABLE>

    Pomocka:

    Ak potrebujete tabulku v strede stranky, pouzite na jej vycentrovanie prikaz <CENTER> ... </CENTER>

    Vlozenie riadku tabulky

    TR

    Popis (co to robi):

    Oznacuje riadok tabulky.

    Syntax:

    <TR [ [BGCOLOR="#farba"] [ALIGN=["left" | "right" | center"]] [VALIGN=["top" | "bottom" | "center"] ]> ... </TR>

    Typ: blokovy

    Parametre:

    BGCOLOR je farba pozadia v riadku. Viac o zadavani farby najdete tu

    ALIGN urcuje typ zarovnania jednotlivych poloziek riadku tabulky ("right", "center", "left"). Implicitne je nastavena hodnota "left".
    Tento parameter plati pre vsetky polozky v riadku, pokial ho nepredefinujeme v prikaze <TD> ... </TD>

    VALIGN urcuje typ vertikalneho zarovnania jednotlivych poloziek riadku tabulky ("top", "bottom", "center").
    Tento parameter plati pre vsetky polozky v riadku, pokial ho nepredefinujeme v prikaze <TD> ... </TD>

    Priklad:

    (tabulka z predchadzajuceho prikladu, ukazka vlozenia riadkov...)

     

    <TABLE WIDTH="50%" ALIGN="center" VALIGN="center" BORDER="4" CELLSPACING="3"
    CELLPADDING="10">
    <TR ALIGN="left">
    ...
    </TR>
    <TR>
    ...
    </TR>
    ...
    </TABLE>

    Polozka tabulky

    TD

    Popis (co to robi):

    Vlozi polozku tabulky. V tomto bloku sa moze nachadzat lubovolny objekt jazyka HTML (text, obrazok, zoznam, ...)

    Syntax:

    <TD [ [BGCOLOR="#farba"] [NOWRAP] [VALIGN=["top" | "bottom" | "center"]] [ALIGN=["left" | "center" | "right"]] ]> ... </TD>

    Typ: blokovy

    Parametre:

    BGCOLOR definuje farbu pozadia polozky. Viac o zadavani farby najdete tu

    NOWRAP prepinac, ktory zapricini, ze text v tejto bunke sa nebude rozdelovanim na slova prisposobovat velkosti tabulky, ale ze sa bude zvacsovat tabulka. Doslova: NECHCEM ROZDELOVAT TENTO TEXT.

    ALIGN urcuje zarovnanie obsahu polozky. Ma vyssiu prioritu ako nastavenie pre riadok alebo celu tabulku.

    VALIGN urcuje vertikalne zarovnanie polozky. Ma vyssiu prioritu ako nastavenie pre riadok alebo celu tabulku.

     

    Priklad:

    Kompletny priklad priklad jednoduchej tabulky s ukazkou:

    Zdrojovy text:

    <CENTER>
    <TABLE WIDTH="50%" ALIGN="center" BORDER="4" CELLSPACING="3" CELLPADDING="10">
    <TR>
    <TD NOWRAP VALIGN="center" ALIGN="center">text polozky tabulky</TD>
    <TD NOWRAP VALIGN="center" ALIGN="center"></TD>
    <TD NOWRAP VALIGN="center" ALIGN="center">text inej polozky</TD>
    </TR>

    <TR ALIGN="left">
    <TD NOWRAP VALIGN="center">a zasa nieco ine</TD>
    <TD NOWRAP VALIGN="center">...</TD>
    <TD NOWRAP VALIGN="center">...</TD>
    </TR>
    <TR>
    <TD NOWRAP VALIGN="center" ALIGN="center">Polozka tabulky</TD>
    <TD NOWRAP VALIGN="center" ALIGN="center">Text</TD>
    <TD NOWRAP VALIGN="center" ALIGN="center">Polozka tabulky</TD>
    </TR>
    </TABLE>
    </CENTER>

     

    text polozky tabulky
    		linka na tento pokec
    a zasa nieco ine ... ...
    Polozka tabulky Text Polozka tabulky

    Pomocka:

    Ak chcete vedla seba umiestnit niekolko obrazkov, pouzite tabulku a obrazky nech tvoria jednotlive polozky.

    Vytvorenie formulara

    FORM

    Popis (co to robi):

    Vytvori formular, ktoreho vyplnenim a odoslanim mozeme spustit externu akciu.

    Syntax:

    <FORM METHOD=["post" | "get"] ACTION="url://cesta/subor"> ... </FORM>
    Poznamka: syntax tohto prikazu nie je uplna.

    Typ: blokovy

    Parametre:

    ACTION je cesta k CGI (Common Gateway Interface) - programu, ktory prevezme ulohu spracovania vysledkov formulara. CGI su obycajne ulozene v specialnom adresari (URL konci "/cgi-bin/") a prava na ich vytvaranie su kvoli bezpecnosti zvacsa obmedzene. Inokedy musia mat CGI-programy priponu ".cgi", ale musia byt napisane v "bezpecnom" skriptovom jazyku, napriklad Perl-e.
    Ak pouzijeme ACTION="mailto:login@adresa", vysledok formulara sa posle na zvolenu adresu v "trochu divokom, ale citatelnom" formate.

    METHOD definuje metodu spracovania formulara: POST posle vysledky formulara na standardny vstup (stdin) CGI-programu, ktory je definovany v "ACTION", GET "prilepi" vystup formulara za URL dokumentu v tvare:
    ACTION?premenna1=hodnota1&premenna2=hodnota2..., nastavia sa niektore environmentalne premenne, z ktorych najdolezitejsia je QUERY_STRING obsahuje vystup z formulara v tom istom tvare. Tieto environmentalne premenne su k dispozicii CGI-programu definovanom v "ACTION".

    Vstupne polozky formulara typu INPUT

    INPUT

    Popis (co to robi):

    Vlozi do formulara vstupny "box" a umozni uzivatelovi - navstevnikovi stranky - vyplnit polozky formulara. Hodnoty budu ulozene do internych "premennych", ktorych mena specifikujeme v kazdom prikaze (okrem odosielacieho a resetovacieho tlacidla).

    Syntax:

    <INPUT TYPE=["text" | "password"] NAME="premenna" [VALUE="text"] [SIZE="sirka"] [MAXLENGTH="maxsirka"]>

    <INPUT TYPE="checkbox" NAME="premenna" [CHECKED]>

    <INPUT TYPE="radio" NAME="premenna" VALUE="hodnota" [CHECKED]>

    <INPUT TYPE="hidden" NAME="premenna" VALUE="hodnota">

    <INPUT TYPE=["submit" | "reset"] VALUE="text">

    Typ: neblokovy

    Parametre:

    TYPE blizsie definuje typ vstupu:
    "text" - vstupom bude text zadany z klavesnice. Pocet znakov "boxu" bude dana parametrom SIZE, ukladanych bude maximalne MAXLENGTH znakov. Ak specifikujeme hodnotu VALUE, vypise sa do okienka ako implicitny text.
    Hodnotou premennej je text napisany v "boxe".

    "password" - ako "text", ale namiesto znakov z klavesnice sa zobrazuju "*" (hviezdicky).
    Hodnotou premennej je zadany text.

    "checkbox" - vytvori zaskrtavacie policko, ktore moze byt zaskrtnute. Implicitne zaskrnutie dosiahneme uvedenim parametra CHECKED.
    Hodnotou premennej je "ON", ak je policko zaskrtnute.

    "radio" - vytvori prepinac. Prepinac pozostava z viacerych prikazov tohto typu s rovnakym menom premennej v NAME. Zo vsetkych alternativ moze byt aktivna iba jedna. Implicitna hodnota sa oznaci parametrom CHECKED.
    Hodnotou tohto policka je VALUE toho prepinaca, ktory je aktivny v case odoslania formulara.

    "hidden" - vytvori "skrytu" polozku formulara, co znamena, ze sa nijako nezobrazi v prehliadaci stranky. Sluzi na doplnujucu informaciu napriklad pre cgi-script, ktory spracuje odoslany formular, lebo do premennej mozete nastavit akukolvek hodnotu a vyuzit ju v scripte.

    "submit" - vytvori odosielacie tlacidlo formulara. Text v tlacidle zavisi od hodnoty VALUE, implicitne je to "Submit". Po stlaceni tlacidla sa riadenie preda programu podla parametra ACTION prikazu FORM.

    "reset" - vytvori resetovacie tlacidlo formulara. Text v tlacidle zavisi od hodnoty VALUE, implicitne je to "Reset". Stlacenim tlacidla sa vsetky hodnoty formulara nastavuju na implicitne hodnoty.

    MENO definuje meno premennej formulara, ktora je potrebna pri spracovavani vstupu v CGI-programoch. Ako uz bolo uvedene, prepinace (radio-buttony) su viacere alternativy tej istej premennej.

    VALUE urcuje hodnotu premennej, ktoru bude mat pri spracovavani formulara CGI-programom. Hodnota je bud "on" (checkbox), "hodnota" (radio-button) alebo text zadany uzivatelom.

    CHECKED ma vyznam pri prepinacoch a zaskrtavacich polickach a definuje policko ako implicitne "zaskrtnute" (vybrate).

    SIZE urcuje velkost textoveho policka v znakoch

    MAXSIZE urcuje maximalnu velkost vstupneho textu v policku (pre istotu poznamenam, ze ak velkost vstupu prekroci velkost definovanu "SIZE", text sa roluje, aby ste ho v policku videli)

     

    Textove okno

    TEXTAREA

    Popis (co to robi):

    Vlozi okno na vstup textu do formulara.

    Syntax:

    <TEXTAREA NAME="meno" ROWS="r" COLS="s"> [implicitny text] </TEXTAREA>

    Typ: blokovy

    Parametre:

    NAME urcuje meno premennej reprezentujucej vystup okna

    ROWS a COLS urcuju velkost okienka (riadky, stlpce) v znakoch

     

    Priklad:

    Priklad formulara s komentarom: (tu klikni pre vysledok) 
    <FORM ACTION="/cgi-bin/vix/formreply" METHOD="get">
    Ako si sa dozvedel o tejto stranke? (prepinac)
    <P>
    <INPUT TYPE="radio" NAME="ako" VALUE="nahodou"> nahodou
    <BR>
    <INPUT TYPE="radio" CHECKED NAME="ako" VALUE="odkaz"> odkazom z inej stranky
    <BR>
    <INPUT TYPE="radio" NAME="ako" VALUE="kamos"> od znameho
    <P>
    Paci sa ti tato stranka? (zaskrtavacie policko)
    <P>
    <INPUT CHECKED TYPE="checkbox" NAME="ak_sa_ti_paci" VALUE="paci_sa_mi"> Ano
    <P>
    <INPUT TYPE="checkbox" NAME="ak_sa_ti_paci_velmi"
    VALUE="paci_sa_mi_velmi"> Aj toto policko sa mi paci!
    <P>
    Sem mozes napisat komentar k stranke: (textove pole TEXTAREA)
    <P>
    <TEXTAREA ROWS="10" COLS="32" NAME="komentar">
    Implicitny text
    </TEXTAREA>
    <P>
    Sem sa mozes podpisat, alebo nechat "guest" ak chces ostat
    anonymny: (textove pole) <P>
    <INPUT TYPE="text" NAME="odosielatel" VALUE="guest">
    <P>
    <INPUT TYPE="submit" VALUE="Poslat!"> (odosielacie policko)
    <P>
    <INPUT TYPE="reset" VALUE="Zrusit!"> (resetovacie policko)
    </FORM>

    Poznamka:

    Pre pripad, ze by ste takyto formular odoslali (Submit) bezo zmeny, metodou GET by boli CGI-cku poskytnute taketo udaje: http://fornax.elf.stuba.sk/cesta/htmlhelp.html?ako=nahodou&komentar=Implicitny+text &odosielatel=guest

    Frames (ramceky)

    Okrem dokumentov, ake sme si popisali, existuju aj take, ktore pouzivaju ramceky - frames. Takyto dokument je potom na obrazovke zobrazeny vo viacerych okienkach, pricom v kazdom mate iny dokument.

    Taketo dokumenty sa vytvaraju prikazom

    FRAMESET ROWS|COLS="velkost,velkost"

    ROWS nam rozdeli okno na dve casti pod sebou (akoby dva velke riadky, z toho pomenovanie rows)

    COLS zasa rozdeli okno na dve casti vedla seba (a z toho vyplyva aj nazov stlpceky - col(umn)s)

    Hodnota je uvedena ako dve velkosti oddelene ciarkou, kazda z nich vyjadruje velkost okna nam zabezpeci, ze nase dve okienka budu mat zadanu velkost bud v bodoch alebo percentach velkosti stranky.

    Este jedna zaujimavost: ak si chceme vytvorit jedno okno, ktore ma urcitu velkost a druhe bude zaplnat zvysnu cast priestoru, napiseme namiesto jeho velkosti znak * (hviezdicka)

    Teraz si ukazeme, ako do takto vytvorenych okien nahrame dokumenty:

    FRAME SRC="cesta/subor" NAME="meno" NOSCROLL NORESIZE

    SRC je ako vidite, subor, pripadne s cestou, ktory sa ma do okna nahrat. Nemusi to byt len .html subor, v praxi sa casto stretnete s tym, ze si do okienka nahrate obrazok.

    NAME nam pomenuje okno. To je dolezite pri pouziti prikazu <A HREF..>

    NOSCROLL nam, ak ho napiseme, zabrani vytvoreniu pretacacich pruhov na okraji obrazovky, ak sa obsah dokumentu vojde do okienka.

    NORESIZE, ak ho napiseme, zabranuje uzivatelovi zmenit velkost okna pomocou mysi

    Nie kazdy moze vo svojom prezeraci vidiet ramceky, napriklad, ak pouziva textovy browser. Na tieto ucely existuje prikaz

    NOFRAMES

    V tomto bloku napisete dokument, ktory sa ma vypisat, ak dotycny nemoze vidiet frames.

    A teraz konecne priklad: 
    <HTML>
    <TITLE>Priklad pre FRAMES</TITLE>
    <FRAMESET COLS="50%,*">	(casti budu vedla seba, kazda zabera 1/2)
    <FRAME SRC="example3.html" NAME="menu" NOSCROLL> (prve okno sa vola menu)
    <FRAME SRC="example4.html"  NAME="text"> (...druhe text)
    </FRAMESET>
    <NOFRAMES>
    Sem napisete, co chcete, aby sa napisalo, ak moj prezerac nepodporuje
    ramceky ...
    </NOFRAMES>
    </HTML>
    Tu kliknite, ked si chcete pozriet vysledok

    A teraz priklad pre ROWS: 
    <HTML>
    <TITLE>Priklad pre FRAMES</TITLE>
    <FRAMESET ROWS="50%,*">	(casti budu pod sebou, kazda zabera 1/2)
    <FRAME SRC="example3.html" NAME="menu" NOSCROLL> (prve okno sa vola menu)
    <FRAME SRC="example4.html"  NAME="text"> (...druhe text)
    </FRAMESET>
    <NOFRAMES>
    Sem napisete, co chcete, aby sa napisalo, ak moj prezerac nepodporuje
    ramceky ...
    </NOFRAMES>
    </HTML>
    Tu kliknite, ked si chcete pozriet vysledok

    To este zdaleka nie je vsetko. Prikazy FRAMESET mozete pouzivat viacnasobne, vnorene, takze mozete uz rozdelene bloky delit na dalsie!

    Jednoduchy priklad: 
    <HTML>
    <TITLE>Priklad pre FRAMES</TITLE>
    <FRAMESET ROWS="50%,*">	(casti budu pod sebou, kazda zabera 1/2)
    <FRAME SRC="example3.html" NAME="menu" NOSCROLL> (prve okno sa vola menu)
    <FRAMESET COLS="25%,*"> (teraz spodne okno zasa rozdelime!)
    <FRAME SRC="example3.html"  NAME="text1"> (na okno text1)
    <FRAME SRC="example4.html"  NAME="text2"> (a text2)
    </FRAMESET>
    </FRAMESET>
    <NOFRAMES>
    Sem napisete, co chcete, aby sa napisalo, ak moj prezerac nepodporuje
    ramceky ...
    </NOFRAMES>
    </HTML>
    Tu kliknite, ked si chcete pozriet vysledok

    Pomocky k HTML:

    Farby v HTML

    Ak zadavame farby v prikaze BODY alebo FONT, musime najprv vediet, ako su farby v prezeraci prekladane. Kazda farba moze byt zadana bud svojim menom alebo jej farebnym kodom.

    NetScape 3.00 Gold (testovana verzia pod Windows 3.x) pozna tieto mena farieb:

    aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanched, almond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgreen, lightgrey (to nie je preklep, naozaj grey namiesto gray), lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mocasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow, springgreen, steelblue, tan, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen

    Poznamka: tieto farby boli prepisane rucne a ak objavite nejaku chybu, prosim oznamte mi to, aby som ju mohol rychlo opravit...

    Ak vam tieto farby nestacia alebo nevyhovuju, mozete si namiesat/definovat farbu "na zakazku".

    Kazde vyjadrenie farby pozostava z takehoto zoskupenia troch hexadecimalnych dvojcisel. Nie, nebojte sa, pochopite to, aj ked Vam to nic nehovori.
    Farby sa skladaju z 3 zloziek: RED (cervena), GREEN (zelena) a BLUE (modra). Kazda zlozka moze mat nastavenu hodnotu 00 - ff hexadecimalne (cize 0 - 255 desiatkovo), cim je cislo vacsie, tym je zlozka vo farbe svetlejsia. Hexadecimalne cislovanie vam mozno bude pripadat prinajmensom divne, ale po chvili si zvyknete, ze po prvych 9 cislach nenasleduje 10, ako v desiatkovej, ale 0a, 0b, 0c, 0d, 0e a 0f. A az potom 10 ;-)
    Len na Vas je, aku kombinaciu si "namiesame". Hodnoty farieb sa uzatvaraju v uvodzovkach a zacinaju znakom '#', ktory urcuje, ze je to (hexadecimalne) cislo. Ukazeme si radsej priklad: 

    <BODY BGCOLOR="#000000" TEXT="#f0f000" LINK="#f00000">

    Nastavili sme pozadie cierne, farbu textu na zltu (cervena + zelena) a farbu linky na sytocervenu.

    Niektore farby:
    #000000 - cierna
    #f00000 - svetlo cervena
    #0000f0 - svetlomodra
    #f000f0 - svetlofialova (magenta)
    #00f000 - svetlozelena
    #00f0f0 - zelenomodra (cyan)
    #f0f000 - sytozlta
    #f0f0f0 - jasno biela
    #a0a0a0 - siva
    Farby, ktore teraz vidite, su taketo: TEXT="#00f0d0" LINK="#f0f000" VLINK="#a0a000"

    Poznamka: pokojne experimentujte!

    Pisanie specialnych znakov v HTML

    Kedze prikazy HTML su uzavrete v zatvorkach, nemozeme beznym sposobom napisat znaky < a >. Okrem tycho dvoch znakov casto potrebujeme aj ine specialne znaky. Na to sluzia v HTML specialne sekvencie a tu si ich ukazeme:
    (poznamka: v pripade chyby ma prosim upozornite, prepis tychto kodov do HTML trval asi 3/4 hodiny a mozno moje prsty neboli az take bezchybne...)

    Ziadany znak HTML-sekvencia
    < &lt;
    < &LT;
    > &gt;
    > &GT;
    & &amp;
    & &AMP;
    " &quot;
    " &QUOT;
      &nbsp;
    ® &reg;
    ® &REG;
    © &copy;
    © &COPY;
    ¡ &iexcl;
    ¢ &cent;
    £ &pound;
    § &sect;
    ° &deg;
    ± &plusmn;
    ² &sup2;
    ³ &sup3;
    µ &micro;
    &para;
    · &middot;
    ¸ &cedil;
    ¹ &sup1;
    º &ordm;
    » &raquo;
    ¼ &frac14;
    ½ &frac12;
    ¾ &frac34;
    ¿ &iquest;
    À &Agrave;
    Á &Aacute;
    Â &Acirc;
    Ã &Atilde;
    Ä &Auml;
    Å &Aring;
    Æ &AElig;
    Ç &Ccedil;
    È &Egrave;
    É &Eacute;
    Ê &Ecirc;
    Ë &Euml;
    Ì &Igrave;
    Í &Iacute;
    Î &Icirc;
    Ï &Iuml;
    Ð &ETH;
    Ñ &Ntilde;
    Ò &Ograve;
    Ó &Oacute;
    Ô &Ocirc;
    Õ &Otilde;
    Ö &Ouml;
    × &times;
    Ø &Oslash
    Ù &Ugrave;
    Ú &Uacute;
    Û &Ucirc;
    Ü &Uuml;
    Ý &Yacute;
    Þ &THORN;
    ß &szlig;
    à &agrave;
    á &aacute;
    â &acirc;
    ã &atilde;
    ä &auml;
    å &aring;
    æ &aelig;
    ç &ccedil;
    è &egrave;
    é &eacute;
    ê &ecirc;
    ë &euml;
    ì &igrave;
    í &iacute;
    î &icirc;
    ï &iuml;
    ð &eth;
    ñ &ntilde;
    ò &ograve;
    ó &oacute;
    ô &ocirc;
    õ &otilde;
    ö &ouml;
    ÷ &divide;
    ø &oslash;
    ù &ugrave;
    ú &uacute;
    û &ucirc;
    ü &uuml;
    ý &yacute;
    þ &thorn;
    ÿ &yuml;

    "Nefunguje to!" a ine problemy...


     

  • Spravil som si na skusku dokument, dokonca aj celkom prazdny, ale prehliadac hlasi chybu a nic nevidim
    Ulozili ste subor? Ulozili ste ho do spravneho adresara? Mate nastavene pristupove prava? (citaj neskor) Je Vas WWW-server v poriadku?

     

  • Prehliadac nehlasi chybu, ale aj tak nic nevidim... Mate nastavene rovnake farby pre pozadie aj text ;-) alebo nemate ulozeny prazdny startovny subor (index.html)... Pripadne skuste zmazat cache v NetScape (v lynxe prepinac "-reload")

     

  • A ako pisem text, ktory chcem vypisat?
    Jednoducho, vsetko, co nie je uzavrete v < a > sa vam vypise ako text. Samozrejme, tento text si mozete upravit. Najlepsie bude, ak si pozriete prikazy HTML usporiadane tematicky...

     

  • Ako si dam na stranku obrazky?
    Jednoducho. Na miesto v dokumente, kde chcete vlozit obrazok, napisete prikaz <IMG SRC="subor" ALIGN="zarovnanie" ALT="nahradny text"> Pozrite si prikaz IMG

     

  • Napriek mojim zmenam stranky sa pri prezerani zmeny neprejavuju.
    Skontrolujte nastavenia cacheovania dokumentov (v NetScape Memory & File cache), ak idete z lynxu, prepinac "-reload". Stranky su casto ukladane na proxyserveri, ktory vam ponuka starsie verzie...

     

  • Robi si to co chce, vobec sa mi neprejavuje ucinok prikazu...
     

     

  • Mate preklep v prikaze - prejdite si dokument a hladajte. Prehliadac vas na chybne prikazy neupozorni, len ich nebude vykonavat. Skontrolujte nielen samotne prikazy, ale i parametre. Priklad pekneho preklepu je <LU> namiesto <UL> a moze sa vam stat, ze to budete hladat velmi dlho...

     

  • Chyba zaciatok alebo koniec prikazu. Ak prikaz neskoncite, obycajne ma platnost do konca suboru, ale neda sa na to spolahnut. Ak prikaz skoncite skor, ako ste ho zacali, obycajne nerobi nic. Skontrolujte pomaly cely dokument alebo cast, v ktorej "to musi byt".
    Priklad: 
    <HTML>
    <BODY>
    ..
    <CENTER>
    text...
    ..
    toto nema byt centrovane
    </BODY>
    </HTML>
    Zabudli sme ukoncit prikaz <CENTER>

     

  • Chyba znak "/" v oznaceni konca prikazu.
    Priklad: 
    <HTML>
    <BODY>
    ..
    <CENTER>
    text...
    ..
    <CENTER>
    toto nema byt centrovane, ale mozes vziat jed na to, ze bude
    </BODY>
    </HTML>

     

  • Prikaz ste "ukoncili" inym prikazom.
    Priklad: 
    <B>toto pismo je tucne</I>
    a toto uz nie.
    Tucne pismo sme ukoncili koncom prikazu pre kurzivu. Aj tieto chyby sa tazko hladaju, ak mate vela textu, ako v tomto dokumente...

     

  • Ako prejdem na inu stranku/dokument/subor/sluzbu?
    Prechod sa robi pomocou odkazov na iny dokument/subor/sluzbu.
    Prechod na iny dokument:
    <A HREF="URL">meno linky</A>
    URL je bud meno suboru (.html), ak treba, urcite aj cestu.
    Subory, ktore chcete vo svojej stranke pouzivat, by ste mali mat v adresari spolu so strankou (alebo v jeho podadresaroch). Adresar vasej stranky je totiz pre prezerac hlavnym adresarom.
    Ak chcete prechod na inu sluzbu INTERNETu (ftp, gopher, http, news, telnet, wais), musite specifikovat jej typ.
    Priklad:
    http://adresa/alebo http://adresa/subor.html
    ftp://adresa/cesta/subor
    telnet://adresa[:port]

     

  • Urobil(a) som si stranku, ale prehliadac mi vypisuje chybu...
    Podla vypisu chyby vylucte moznost chyby servera. Ak prezerac vypisuje "File not found", asi mate niekde napisany odkaz na neexistujuci subor. Ak je "Permission denied", mate zle nastavene pristupove prava k suborom/adresarom.
    Prezerac sa totiz k vasej stranke dostane, len ak mate korenovy adresar, adresar so strankou a vsetky ostatne medzi nimi, ak nejake su, povolene na vykonanie a citanie, cize vo vypise adresara vyzeraju:
    drwxr-xr-x (chmod 755 meno_dir)ak ide o adresar, resp.
     rw-r--r-- (chmod 644 meno_fajlu) ak ide o subor.
    Vo vlastnom zaujme si nenechavajte nastavene atributy pre zapis (okrem seba). Mohli by ste sa cudovat, ze vam niekto nici stranku...
    Ked sa vam nejaka stranka zapaci a xceli by ste vediet, ako bola urobena, nic vam nebrani pozriet si jej zdrojovy text (v textovom prehliadaci stlacenim \ a v grafickom View Source). Mozete sa tak dozvediet vela zaujimaveho.

    V pripade nejasnosti posielajte otazky a komentare na webmaster@fornax.elf.stuba.sk (VIX).

    Myslim, ze tento subor by vam mal pomoct k vytvoreniu prvej vlastnej stranky. Budte ale pripraveni na to, ze to poziera vela casu, najma, ak sa tomu chcete venovat seriozne.

    Ak vam mozem poradit ako "webmaster", zamerajte sa skor na obsahovu stranku vasej stranky, ako na mnozstvo obrazkov zo siete, ktore sa ak tak natahuju velmi dlho. Tym nechcem povedat, ze si mate robit textove stranky, ale nezabudnite, ze nie kazdy pouziva graficky terminal a preto skuste svoju stranku obcas pozriet aj v textovom mode a pripadne ju upravit.

    Tento text nepredstavuje preklad HTML manualu, ale to, co som zistil, odskusal a snazil sa napisat tak, aby ste to mohli odskusat Vy. Ak vam tento dokument pomohol, nebolo to zbytocne.

    Vacsina prikazov bola zistovana priamo prezeranim binarky NetScape a testovanim prikazov. Niektore casti boli odskusane na zaklade dokumentacie HTML od anonymneho autora.

    Ak potrebujes tento manual pouzit na iny ucel ako samostudium, mailni mi prosim, alebo aspon uved niekde moje meno (nick). Dakuje