FM saitas  
Name: Pass : Background:
Parama Mano Puslapiui
Wideo Anekdotai Muzika Radijas Mano avatar'as
  • Mano Blogas
  • Išvaizda
  • Siuntiniai
  • Bendravimo Forma
  • Nuorodos
  • Flash
  • Technologijos.lt verta užsukti
  • Parodo IP
  • Puslapio statistika
  • Html pagrindai
  • Drauziama zona
  • gryzti



    Mokomės.....

    Web puslapiu kurimui naudojamas paprastas textinis redaktorius, tox kaip notepad ar Wordpad. Saugant faila, reikia nurodyti SAVE AS TYPE: all types, o uzvardyti faila failas.html .  Komandos HTML vadinamos zymemis. Jos apskliaudziamos <> ir nesvarbu parasyta didziosiomis ar mazosiomis raidemis. <pradzios zyme>…</pabaigos zyme>. Atributai rasomi kabutese “…”

     

    Privalomos zymes

     

    Kiekviename HTML puslapyje turi buti 4 pagrindines zymes:

    <HTML>, <HEAD>, <TITLE>, <BODY>.

    Bet kuris HTML puslapis dalinamas i 2 dalis: antraste ir pagrindine dalis. Antraste talpinama tarp zymiu <HEAD><TITLE>ANTRASTE</TITLE></HEAD> ir narsykleje atvaizduojama kaip lango pavadinimas. HTML puslapio pagrindine dalis talpinama tarp zymiu <BODY> </BODY>. HTML puslapio pabaigoje butinai turi buti uzdarancioji zyme </HTML>.

     

    HTML dokumento struktura:

     

     

    <HTML>

                <HEAD>

                            <TITLE> Antraste </TITLE>

                </HEAD>

                <BODY>

    …Pagrindinis textas…

                </BODY>

    </HTML>

     

     

    Grieztai tariant pakanka ir vienos zymes <HTML> </HTML> , o taip ir buvo numatyta pirmajame standarte.

     

    Antrastes, pastraipos ir perejimas i nauja eilute

     

    HTML puslapyje galima naudoti 6 antrasciu lygius, kurie skiriasi savo dydziu. Pati didziausia – pirmo lygio antraste, o pati maziausia – sesto. Paprastai naudojami tik pirmi trys antrasciu lygiai, kiti naudojami labia retai. Antrastes textas talpinamas tarp zymiu <H1> </H1> arba <H2> </H2> irt.t.

     

    Pvz.:

    <H1>Tai pirmo lygio antraste</H1>

     

    Skirtingai nei iprastiniuose textiniuose redaktoriuose cia perejimas i kita texto eilute paprastu paspaudimu ENTER neveikia. Taip pat ignoruojama tabuliacija, keli tarpai vaizduojami vienu. Taigi redaguojant dokumenta, texta galima isdestyti kaip jums patogiau, ekrane jis bus vaizduojamas priklausomai nuo nurodytu zymiu.

                Naujos pastraipos uzrasymui, pries pastraipos texta naudojama zyme <P> , o zyme uzdaromos zymes </P> pastaripos gale galima nenaudoti.

    Tam, kad pereiti i nauja eilute, pries naujos eilutes texta, iterpiama nauja zyme <BR> .

                Kartais, norint puslapiui suteikti vaizdingumo, HTML puslapio teksto dalys atskiriamos horizontaliomis linijomis. Tam naudjama zyme <HR> .

     

    Rysiai su kitais puslapiais

     

                Visu web dokumentu charakteringas tipas – ju rysys su kitais puslapiais. Tokie rysiai (link) HTML kalba uzrasomi taip:

     

                <A HREF=”URL adresas”>nuorodos textas</A>

                 Jei jus norite savo puslapius susieti nuorodomis, tai pakanka norodyti puslapio, i kuri tures pereiti nuoroda, pavadinima, o jei jis yra ne tame paciame kataloge, kur pagrindinis puslapis, tai reikia nurodyti pakatalogi.

     

    Tekstas web puslapyje

     

    Teksto formatavimas ir lygiavimas

     

    Teksto formatavimui naudojamos sios zymes:

    <B> arba <STRONG> - pusiau pastorintam shriftui.

    <I> arba <EM> pasvirusiam shriftui.

    <SMALL> - smulkus textas.

    <BIG> - Stambus textas.

    <SUP> - laipsnis

    <SUB> - koficiantas.

    <STRIKE> - perbrauktas textas.

    <U> - pabrauktas textas.

    <TT> - bus naudojamas shriftas su pastoviu raidziu plociu, textas bus isplestas.

    <PRE> - suformatuotas textas (performatted) issaugo iprastinio tekstinio redaktoriaus formatavima – perejus i kita eilute, tabuliacija, tarpus it t.t.

                Isplesto ir suformatuoto teksto atvaizdavimui naudjamas sriftas curier arba curier new.

                Pastraipos tekstui islygiuoti pagal kairiji ar desiniji sona ar centra, i zyme <P> irasomas atributas ALIGN=”right” center ar left.

    PVZ.: <P ALIGN=”right”> tai lygiavimas pagal desine.

                Pagal nutylejima, lygiuojama pagal kairi krasta.

                Jei norite, kad butu lygiuojama daugiau kaip viena pastraipa, naudokite zyme  <DIV> su atributu ALIGN

     

    <DIV ALIGN=”center”>

    <p>Taip lygiuojama pagal centra

    <p>visos

    <p>pastraipos

    </DIV>

     

    Atributa ALIGN galima naudoti su <H1>,<H2>,<H3>.

     

    Darbas su shriftais ir specialiais simboliais

     

                Kartais norint atvaizduoti tam tikro dydzio texta, zymiu <BIG> ir <SMALL> nepakanka. HTML kalboje dar be minetu zymiu yra zyme <FONT>, kuri leidzia pasirinkti tam tikra srifto tipa, jo matmenis ir spalva. Pavyzdziui,

     

    <FONT FACE=”arial Cyr” SIZE=10 COLOR=”RED”>Tekstas bus parasytas Arial sriftu, jo dydis bus 10, o spalva -  raudona </FONT> .

     

                Atributas color gali tureti sias , standartiniu spalvu reiksmes: black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, aroon, navy, olive, silver, teal..

     

                Kartais i texta tenka iterpti specialiusius simbolius, kuriu ne visada yra klaviaturoje. Tuo atveju nurodomas simbolio kodas.

     

    Aprasymas

    Shrifto kodas

    Kabutes

    &#34

    Loginis jungtukas “ir” (&)

    &#38

    Mazhiau

    &#60

    Daugiau

    &#62

    Centas

    &#162

    Vertikalus rbruksnys

    &#166

    Autorines teises ©

    &#169

    Prekinis zenklas ®

    &#174

    Plius/minus

    &#177

    Laipsnis 2

    &#178

    Laipsnis 3

    &#179

    Apostrofas

    &#189

    Didziosios apjungtos AE

    &#198

    Mazosios apjungtos ae

    &#230

    Didzioji kirciuota E

    &#201

    Mazoji kirciuota e

    &#233

    Daugyba

    &#215

    Dalyba

    &#247

     

    Texto isdestymas saraso pavidalu

     

                HTML kalboje yra trys baziniai sarasu tipai:

    • Sutvarkyti(sunumeruoti)
    • Nesutvarkyti(isvardijimo simbolis)
    • Nustatomieji

    Sutvarkyti sarasai patalpinami tarp zymiu <OL></OL> . Numeravimo tipas nustatomas zymeje <OL> atributu TYPE=”…” ir gali tureti viena is reiksmiu: A, a, I, i, 1. Jei numeracija prasideda ne nuo pirmos reiksmes, tai naudojamas atributas START=”…, kuris nuroodo kuriuo numeriu prasideda saraso elementu vardijimas.

     

    Reikia nurodyt numeri (skaiciu), nuo kurio turi buti pradetas numeravimas, nepriklausomai nuo numeruojamojo saraso tipo.

     

    Nesutvarkyti sarasai talpinami tarp zymiu <UL></UL> ir pazymimi vienu is isvardinimo simboliu, kuris nurodomas atributu TYPE=”…” ir gali tureti reiksme “disc”, “circle” arba “square”.

    Kaip sutvarkytuose sarasuose taip ir nesutvarkytuose sarasuose perejimas i nauja eilute nurodomas zyme <LI>, kuriai nurodomi atributai “TYPE=”…” ir VALUE=”…” (analogishkas START).

    Nustatomiesiems sarasams naudojamos zymes <DL>…</DL>. Nustatomasis elementas arba terminas naudojamas zyme <DT>, o jam skirtas atitinkamas aprasymas – zyme <DD>.

    Pavyzdys:

    <b>numeracija didziosiomis lotyniskos abeceles raidemis</b>

    <ol type=A>

    <li>pirmasis sutvarkyto saraso elementas

    <li>antrasis sutvarkyto saraso elementas

    <li>treciasis sutvarkyto saraso elementas</ol>

    <p align=center><b>saraso elementu isvardijimas simboliu “disc”</b>

    <ul type=”disc”>

    <li>pirmasis nesutvarkyto saraso elementas

    <li>antrasis nesutvarkyto saraso elementas

    </ul>

    <p align=center><b>Apibrezimu sarasas</b>

    <dl>

    <dt>Citrusinai – tai

    <dd>Citrinos

    <dd>Apelsinai

    <dd>mandarinai

    </dl>

    Visa tai atrodo:

     

    Numeracija didziosiomis lotyniskos abeceles raidemis

    1. pirmasis sutvarkyto saraso elementas
    2. antrasis sutvarkyto saraso elementas
    3. treciasis sutvarkyto saraso elementas

    Saraso elementu isvardijimas simboliu “disc”

    • pirmasis nesutvarkyto saraso elementas
    • antrasis nesutvarkyto saraso elementas

    Apibrezimu sarasas

    Citrusinai – tai

    Citrinos

    Apelsinai

    mandarinai

     

     

    Galite naudoti sarasus kitu sarasu viduje, nepriklausomai nuo ju tipo, pvz., numeruotame sarase naudoti zenklinta arba atvirksciai ir pan. Svarbiausia, nepamirskite uzdaranciu zymiu reikiamose vietose.

     

    Rysiai puslapio viduje. Pranesimo siuntimas tiesiai is puslapio naudojant E-mail

     

                Rysiams puslapyje, kaip ir rysiams tarp puslapiu naudojama zyme <A> . Tam, kad patekti i tam tikra puslapio vieta, ja butina pazymeti. Zyme nurodoma pries texta:

    <A NAME=”#zyme1></A>

    Perejimas prie sios zymes atliekamas sio HTML uzraso pagalba:

    <A HREF=”#zyme1”>pereiti prie zymes1</A>

    Jus galite nurodyti perejima prie betkurios zymes, esancios kitame puslapyje. Tam reikia nurodyti puslapio, i kuri pageidaujate pereiti, pavadinima ir zyme jame:

    <A HREF=”puslapis2html#zyme”>Detaliau…</A>

    J           jeigu jus norite suzinoti kitu nuomone apie jusu puslapi arba paprasciausiai susirasti draugu, tai suteikite jiems galimybe tai atlikti elektroninio pasto pagalba:

    <A HREF=mailto:uxuz@one.lt>Rasykit mums</A>

    Spragtelejus ant tokio uzraso, bus iskviesta pasto programa, kur adreso laukelyje “To:” bus jusu nurodytas adresas.

     

    Paveixleliai Web-puslapiuose

     

    Skiriami 4 apibendrinti grafikos tipai:

    1.      Fotografijos (zmoniu, produktu, vietu);

    2.      Grafiniai baneriai ir amblemos

    3.      Patrauklus mygtukai arba piktogramos

    4.      Fonines strukturos puslapio apipavidalinimui

     

    Kai kurie reikalavimaigrafikai web-puslapiuose

     

    Dazniausiai naudojami failai su pletiniu JPG ir GIF, kitos rusies failai per dideli(juos ilgai krauna narsykle).

     

    Kaip patalpinti paveixlelius Web puslapiuose?

     

    Paveixlelio byla turi buti patalpinta servery, kaip ir puslapis. Nuoroda, kad ja reikia parodyti puslapyje atrodo taip:

    <IMG SRC=”image.jpg”>

    Patarimas: paeiksliukus zymeti trumpu tekstu i zyme <IMG> itraukti artributa ALT=”mano photo . Kodel??? Ats: Vartotojas pastates zymekli ant photo matys jos trumpa aprasyma arba jei vartotojas atsijunges paveixliuku rodymo funkcija, jam parodys jusu itraukta trumpa texta.

     

    Horizontalus piesineliu lygiavimas

     

    Horizontaliai piesineliai lygiuojami naudojant tuos pacius atributus, kaip ir textui. Jus galite naudoti zymes <DIV ALIGN=”center”> left ar right ir tada, piesinelis iterptas i zyme <IMG>, paklus bendroms taisyklems, nurodytoms sriciai, kuria riboja zymes <div>…</div>. Textas bus islygiuotas pagal centra, kaire arba desine.

          Be to jus galite patalpinti paveixleli atitinkamai desinio ar kairiojo krasto taip, kad textas bus aplink ji (funkcija wrap). Tam tixlui, atributas ALIGN=”…” talpinamas zymeje <IMG> .

    PVZ:

    <IMG SRC=”lala.jpg” ALIGN=”LEFT”><IMG SRC=”gaga” ALIGN=”RIGHT”>tekstas

     

    <IMG SRC=”lalala.jpg” align=”center”> naudoti negalima, nes paveixleliu apgaubti textas is abieju pusiu negali.

     

    Vertikalus piesineliu lygiavimas

     

    Kartais smulku paveixleli reikia islygiuoti auksciau ar zemiau teksto linijos. Tam jus galite panaudoti sias operacijas:

    ·        Paveixleli lygiuoti pagal virsutine texto linija <IMG ALIGN=”top”>

    o       Pagal apatine texto linija <IMG ALIGN=”bottom”>

    o       Paveixlelio apatines dalies lygiavimas pagal apatine texto linija <IMG ALIGN=”absbottom”> (Jei ant jusu texto linijos yra kitas, didesnis objektas, tai jusu paveixellio apatine dalis bus islygiuota pagal objekto apatine linija).

    o       Paveixleli lygiuoti pagal texto linijos viduri <IMG ALIGN=”middle”>

    o       Paveixlelio viduri lygiuoti pagal texto vidurine linija <IMG ALIGN=”absmiddle”> (Jei ant jusu texto linijos yra kitas, didesnis objektas, tai jusu paveixlio vidurys bus lygiuojamas pagal to objekto vidurine lnija.

     

    Paveixleliai, kaip nuorodos I kitus puslapius.

    Paveixleliai irgi gali buti nuorodomis I kitus puslapius. Tarkime,  kad jsu norite pereiti is savo pusslapio I tam tikra vieta kitame puslapyje, mygtuko (piesinelis button.gif) pagalba. Tai atliekama taip:

     

    <A HREF=puslapis2.htm#zyme><Img src=”botton.gif” ALT=”spausk cia”>

     

    Piesinelio plocio ir aukscio nustatymas, isankstinis piesineliu perziurejimas

     

    Tam, kad vartotojo nekankinti ilgu piesinelio krovimusi, naudojamos kaikurios plonybes.

    Jus galite keisti kraunamo piesinelio dydi, i zyme <IMG> itrauke atributus WIDTH ir HEIGHT su tixliais rodomo paveixlelio matmenimis:

     

    <IMG SRC=”myimage.gif” WIDTH=200 HEIGHT=100>

     

    Jus galite I zyme <IMG> itarukti mazesne piesinelio byla atributo LOWSRC pagalba. Pirma karta narsyklei perejus jusu puslapi, pasirodys paveixlelio remelis. Antra – mazesne byla ir poto pasikraus pilnas vaizdas.

     

    <IMG SRC=”bigfile.gif” LOWSRC=”smallfile.gif”>

     

     

    WEB puslapio modeliavimas

     

    Puslapio modeliavimas ir patalpinimas

     

    Jus turite kelis paruostus puslapius, taciau jie labai skiriasi nuo tu, kuriuos matete internete. Pries rodant juos kitiems, patartina juos “sushukuoti”.

    • Pasirinkite puslapius. Kuriuose yra grafika
    • Puslapi pradekite puosti parinkdami jam fona.
    • Stenkites grafine ir textine informacija saugoti skirtinguose kataloguose.

    Projektuojant puslapius, svarbu tureti ne tik texta ar grafika, reikia apgalvoti ir judejima puslapiais bei kaip patogiau juos skaldyti.

     

    Taisytiniai elementai

    Siulomi principai

    Texto turinys

    Nuo 100 iki 500 zodziu puslapyje

    Texto nutraukimai

    Antraste arba paveixliukas, skirtas 40-100 zodziu (isskyrus ilgus straipsnius ir istorijas)

    Puslapio plotis

    Leistinas dydis 640x480 pikseliu

    Bylos dydis

    Ne daugiau 50 kb, iskaitant paveixliukus (Animacinis GIF gali buti iki 100 kb puslapiui).

    Greitaeigiskumas

    Pirmas texto ir vaizdo ekranas turi pasirodyti ne veliau, kaip po 5 sekundziu, esant 28.8KBs modemo greiciui.

    Spalvos

    Dominuoja nuo 2 iki 4 teminiu spalvu.

    Shriftai

    Grafikoje ir texte ne daugiau triju tipu.

    Tuscia erdve

    Fonas turi buti matomas ne maziau , akip ant 75% puslapio.

    Kontrastas

    Fono spalva neturi buti artima srifto spalvai.

    Tonas ir stilius

    Visas textas ir grafika turi tarpusavyje nepriestarauti, atitikti bendranuotaika ir tema.

    Bendras poveikis

    Galutinis puslapio variantas turi but subalansuotas ir patrauklus.

     

    Fono ir spalvos reguliavimas

     

                Specifinis puslapio fonas rasomas zymeje <BODY> atributu BGCOLOR=”…”. Galima naudoti 16 windows spalvu. Taip pat zymeje <BODY> galima taikyti nustatytas spalvas textui ir nuorodoms.

     

    <BODY BGCOLOR=”red” TEXT=”yellow” LINK=”white” VLINK=”gray” ALINK=”green”>

    • LINK=”white” neaplankytos baltos spalvos nuorodos
    • VLINK=”gray” neseniai aplankytos pilkos spalvos nuorodos
    • ALINK=”green” nuoroda mirksi zalia spalva ja paspaudus

    Jei jums mazai 16 spalvu, galima spalvas maisyti pagal RGB sistema. Maisymo formatas: #rrggbb, kur rr, gg, bb – tai du sesioliktainiai skaiciai raudonos zalios ir melynos spalvos komponentams. FFtai spalvos komponento maximumas, 00 – minimumas.

    • FF – pilnas spalvos ryskumas;
    • B0 – 75% spalvos ryskumas
    • 80 – 50% spalvos ryskumas
    • 40 – 25% spalvos ryskumas
    • 00 – spalvos komponentas nenaudojamas

     

    Pvz., ryskiai raudona #FF0000, tamsiai zalia - #004000, melsvai violetine - #8000B0 ir t.t.

    Kadangi spalvos nustatomas zymeje <BODY> ir galioja visam textui, tai spalvos pakeitimas texto daliai atliekamas zymeje <FONT> atributu COLOR.

    Kaip fona mes galime naudoti ne tik spalva, bet ir grafini vaizda.

    <BODY BACKGROUND=”image.gif”>

     

    Intervalai tarp piesineliu

     

    Kaip galima padidinti tarpus tarp piesinelio ir texto? Yra 3 boodai:

    • Jus galite naudoti visai permatomus vaizdelius, laisvai vietai sukurti.
    • Kai jus textu apgaubiate paveixleli, naudodami <img align=left> arba <img align=right>, uz paveixlelio galite iterpti eilutes pabaiga, su atributais <BR Clear=right> arba <br clear=left>, o jei paveixlelis is desines ir kaires, tai - <br clear=all>, jus galite padeti paveixleliui tuscia erdve is kaires ir desines , naudodami <img hspace=20> arba is virsaus ir apacios, naudodami <img vspace=5>
    • Zymei <IMG> galma suteikti atributa BORDER=10, kuris padidina stachiakampi remeli aplink paveixleli. Paprastai BORDER=1 (atitinka 1 pixeli)

    Jei atributas BORDER itrauktas i zyme <A>, tai remelio spalva bus tokia, kaip ir nuorodos iki ir po apsilankymo.

     

    Horizontaliu liniju nustatymas

     

    Zymeje <HR> naudojami atributai skirti liniju perziurejimui ir valdymui:

    <HR SIZE=10 width=”70%” color=”green”>

     

    Liniju aukstis (dydis vertikaliai) pixeliais nustatomas atributu WIDTH arba % santykiniai lango dydziui. Aribute color nustatoma linijos spalva (tik internet explorer).

    Dazniausiai horizontali linija centruojama, taciau galima naudot atributa align=right arba align=left zymeje <hr> arba <div>

     

    Texto ir piesineliu talpinimas lentelese.

     

    Vienas is web-puslapiu dizaino pagerinimo irankiu yra lenteles. Kurios leidzia isdestyti tekstus ir iliustracijas eilutese bei stulpeliuose. Kokiais atvejais tixlinga naudoti lenteles:

    • Naturalu, kad kai turi buti pateikiama lenteline informacija, tai vardu sarasai, numeracija it t.t.
    • Jeigu jus norite glaudziau susieti teksta ir piesinelius, ir jums nepakanka <IMG align=left> arba <IMG align=right>, tai galima pasinaudot lentele
    • Lenteles gali buti naudojamos iliustraciju ar texto ireminimui.
    • Taip pat norint texta padalint i daug stulpeliu.

     

    Kaip betkuris kitas HTML elementas, lentele turi prasideti ir baigtis zyme <TABLE>…</TABLE>. Jei norite lentele ireminti, tai panaudokite atributa BORDER ir nurodykite linijos stori pixeliais.. Reiksme 0 – remelio ner ir lentele nematoma.

    Po zymes <TABLE> seka zyme <TR>. Ji skirta lenteles eilutems, kuriose gali buti keletas lasteliu,skirtu informacijai, aprasymui. Kiekvienai informacijos lasteliai (langeliui) sudaryti naudojama zyme <TD>…</TD>. I lastele jus galite patalpinti betkuria kita zyme su atributais, taciau ji galios tik tai lastelei, o kitai lastelei reix nustatymus pakartoti.

    Pvz. Jei jus norite parasyti vienoje lasteleje ZODIS1, 6-o dydzio sriftu, o kitoje lasteleje zodis2 to paties dydzio sriftu, tai jusu html eilute atrodytu taip:

     

    <TABLE><TR>

    <TD><FONT SIZE=”6”>ZODIS1</FONT></TD>

    <TD><FONT SIZE=”6”>ZODIS2</FONT></TD>

    <TR></TABLE>

     

    Paprastai lenteliu ir atskiru lasteliu dydziai nustatomi automatiskai, tokiu budu, kad jose matytume visus duomenis. Taciau jus galite nustatyti ir tixlesnius lenteliu matmenis – I zyme <TABLE> ivede atributus WIDTH ir HEIGHT. Siuos atributus nustacius zymeje <TD>, galiam nustatyti ir atskiru lasteliu dydi.

    Lenteles aukscio ir plocio reiksmes galima uzrasyti pixeliais arba % nuo bendro lenteles dydzio.

    <TABLE WIDTH=”500” HEIGHT=”400”><TR><TD WIDTH=”20%>siaura lastele</TD><TD WIDTH-“80%”>Plati lastele</TD></TR></TABLE>

     

    Pagal nutylejima, visa informacija pazymeta lasteleje, bus islygiuota pagal kairiji krasta ir centruojama vertikaliai pagal centra. Jus galite lygiuoti lasteliu turini horizontaliai ir vertikaliai zymese <TD> (lygiuojama visa eilute) atributais ALIGN ir VALIGN. Atributo ALIGN reiksmes left, right, center. O VALIGN top ir bottom.

    Kartais reikia lasteles apjungti I kelias eilutes ar kelis stulpelius. Tam naudojami atributai COLSPAN=”3” (lastele uzims 3 stulpelius) ir rowspan=”2” lastele uzims 2 eilutes).

    PVZ:

    <TABLE WIDTH=”90”>

    <TR><TD ROWSPAN=”2”>Auksta lastele</TD><TD>Pirmos eilutes siaura lastele</TD></TR>

    </TABLE>

     

    Jus galite suteikti visai lentelei ar atskirom lastelem savo fona, I zymes <TABLE>, <TR> arba <TD> patalpintus atributus BGCOLOR arba BACKGROUND

    <TABLE BGCOLOR=”yellow”>

     

    Atributo CELLSPACING pagalba galima reguliuoti atstumus pixeliais tarp lenteles lasteliu, o atributu CELLPADDING – informacijos vieta lasteles krasto atzvilgiu.

    <TABLE WIDTH=”90%” BGCOLOR=”yellow” CELLSPACING=”2” CELLPADING=”3”>

     

    Formos kurimas

     

    Formos – tai gana svarbus interaktyvus HTML elementai, leidziantys puslapiu kurejams interaktyviai bendrauti su vartotojais. Ju pagalba vartotojas gali siusti komentarus, persiusti uzsakymus arba registruotis. Kurejas, kurdamas forma, uzduodamas klausimus, o vartotojas atsako I juos zpildydamas forma. Formos turinys arba persiunciamas gavejui elektroniniu pastu arba perduodamas I serveri formos apdorojimo programai. Pats formos kurimo procesas sudarytas is dvieju etapu. Pirmame etape sukuriama pati forma, o antrame – sios formos apdorojimo programa serveryje.

    Aptarsime formos sukurimo procesa.

    Forma sukuriama zymes <FORM>…</FORM> ir jos atributu pagalba:

     

    • Method – nurodo duomenu persiuntimo formos apdorotojui buda. Daugeliu atveju duomenu apdorotojai naudoja protokola POST, kuris leidzia perduoti didelius duomenu kiekius, o kita reiksme – GET naudojama tuo atveju, kai duomenu apdorojimas atliekamas nustatytu serveryje kintamuju pagalba.
    • Action – nurodo kelia iki apdorojimo programos arba elektroninio pasto adresa.

     

    Tarkim, kad norime sukurti apklausos forma, bei jos duomenis siusti i pasto dezute. HTML eilutes sintaxe atrodys taip:

    <FORM method=”post” action=”mailto:webmaster@nkkm.lt”></FORM>

    Bet vienos zymes <FORM> formai nepakanka. Tarp zymiu <FORM>…</FORM> reikia patalpinti formos elementus (zymes, texto ivedimo laukus, jungiklius, mygtukus irk t.)

    Egzistuoja tokie formos elementai:

     

    • Iprastinis textinis laukas, skirtas texto ivedimui;
    • Keliu eiluciu textinis laukas;
    • Slaptazodzio laukas;
    • Issiskleidziantis sarasas;
    • Radio mygtukai arba opciju perjungejai;
    • Jungiklis, skirtas vienai is 2 reiksmiu pasirinkti (TAIP/NE);
    • Patvirtinimo arba atsaukimo mygtukai;

     

    Vienos elutes textinis laukas (pvz vardui ar pavardei ivesti) kuriamas zymes <INPUT type=”text” name=”name” size=”30”> pagalba, kur atributas type nurodo sio lauko tipa, name – lauk varda, size – lauko ilgi simboliais.

    Slaptazodzio laukas, kuriame duomenys atvaizduojami taskeliais arba zvaigzdutemis, kuriamas analogiskai kaip ir vienos eilutes textinis laukas, tik atributui type priskiriama reisksme “password”. Pavyzdys:

    <INPUT type=”password” name=”passw” size=”20”>

     

    Keliu eiluciu textinis laukas paprastai naudojamas tais atvejais, kai reikia ivesti didesni kieki informacijos, pvz., komentara arba aprasyma, Jis kuriamas zymes <TEXTAREA> su atributais ROWS, kuris nurodo lauko auksti eilutems ir COLS, kuris nurodo lauko ilgi simboliais, pagalba. Pavyzdys:

    <TEXTAREA type=”text” name=”comments” rows=”5” cols=”50”>Pradinis textas lauke</textarea>

    Jei tarp zymiu <TEXT> </TEXTAREA> uzrasysite texta, jis bus iskart ivedamas i lauka.

    Issiskleidziantis sarasas leidzia is saraso pasirinkti viena ar kelias reiksmes. Sarasas kuriamas zymes <SELECT> pagalba, o kiekvienas elementas sarase aprasomes zme <option>. Pavyzdys:

    <Select name=”choose” size=”5” multiple>

    <OPTION value=”Jan”>Sausis

    <OPTION value=”Feb”>Vasaris

    <OPTION value=”Mar”>Kovas

    <OPTION value=”Apr”>Balandis

    <OPTION value=”May”>Geguze

    </Select>

     

    kur

    • name – nurodo varda.
    • Size – nurodo maximalu saraso elementu, vienu metu rodomu ekrane, kieki.
    • Multiple – nurodo keliu reiksmiu pasirinkimo galimybe
    • Value – nurodo parinkto zodzio reiksme gautu duomenu apdorojimui.

     

    Atributai size ir multiple nebutini ir gali buti nevartojami.

     

    Jungiklis arba Checkbox dazniausiai naudojamas tuomet, jei reikia pasirinkti viena is dvieju reiksmiu, pvz., Taip/Ne, Tiesa/Melas. Varianto pasirinkimas zymimas kryziuku arba varnele. Sukurti jungikli galima zymes <INPUT type=”checkbox”> pagalba. Pavyzdys:

    <INPUT type=”checkbox” name=”send_mail” value=”yes” checked>

    • value – nurodo parinkto zodzio reiksme gautu duomenu apdorojimui.
    • Checked – nurodo pradini jungiklio statusa pagal nutylejima.

     

    Perjungikliai arba radio mygtukai primena jungiklius, o skiriasi nuo ju platesnemis funkcionaliomis pasirinkimo galimybemis. Perjungikliu grupeje gali buti pasirinktas tik vienas perjungiklis. Kiekvienam perjungikliui atskiras elementas nurodomas zyme <INPUT type=”radio”>. Pavyzdys:

    Visa <INPUT type=”radio” name=”payment” value=”visa”>

    Matercard <INPUT type=”radio” name=”payment” value=”mastercard”>

    Maestro <INPUT type=”radio” name=”payment” value=”maestro” checked>

     

    Atkreipkite demesi I tai, kad mygtukai, priklausantys vienai grupei, turi vienoda pavadinima (name) ir tik reiksmes (value) – skirtingos.

     

    Mygtukai formoje skiriasi savo funkcionalumu. Yra mygtukas patvirtinantis forms uzpildyma, ir atsaukimo mygtukas, kuris istrina duomenis is formos lauku.

    Patvirtinimo mygtukas kuriamas zymes <input type=”submit”value=”siusti”> pagalba. Pavyzdys:

    <input type=”submit” value=”siusti”>

    Atsaukimo mygtukas kuriamas zymes <INPUT type=”reset” value=”Tinti”>

    Atributas type nurodo mygtuko vykdoma funkcija, o value nurodo uzrasa ant mygtuko.

     

    Zymes ir atributai placiai naudojami HTML

     

    Zyme

    Atributas

    Aprasymas

    <HTML>…</HTML>

     

    HTML – dokumentas

    <HEAD>…</HEAD>

     

    Reiskia HTML – dokumento antraste

    <TITLE>…</TITLE>

     

    Narsykles lango pavadinimas

    <BODY>…</BODY>

     

    Pagrindine HTML dokumento dalis

     

    BACKGROUND=”…”

    Bylos, skirtos puslapio fonui adresas ir pavadinimas

     

    BGCOLOR=”…”

    Puslapio fono spalva

     

    TEXT=”…”

    Texto puslapyje spalva

     

    var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20888995-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();