|
HTML Pagrindai |
| Tai va o cia Html Pagrindai.: (informacija paimta is tinklapiowww.HForce.cjb.net |
| Šiame tutoriale paaiškinsiu
pagrindus kuriuos turi žinoti visi norintys kurti savo puslapį arba tenori
tur..ti HTML programavimo pagrindus.
Pradedam Pagrinde yra du keliai sukurti puslap/..Pirmasis sukurti puslapius neprisijungus /. internet.. ir v..liau /.kelti sukurtus HTML failus /. turim.. laisv.. viet.. serveryje per FTP. Antrasis, sukurti puslapius prisijungus prie interneto ir naudojant Telneto program.. kurios d..ka prisijungiate prie savo turimo akaunto. Uj..siregistruoti nemokamai viet.. internete galite šiuose puslapiuose: http://www.fortunecity.com/ - 100 megabaits. nemokamai http://www.virtualave.net/ - 50 megabaits. nemokamai http://www.hypermart.net/ - 20 megabaits. nemokamai Na kurti puslap/. neprisijungus prie interneto tikrai n..ra sunku. Papras .iausiai tereikia tur..ti koki.. nors puslapis. kk.rimo program... Prie windows's. offiso yra prid..tas labai paprastas ir lengvai perprantamas puslapis. kk.rimo /.rankis - FrontPage. Kurdami su šia programa gal..site panaudoti visus .ia aprašomus HTML scriptus. Jeigu jk.s turite akaunt.. internete ir norite kurti puslapius internete tur..site pirmiausia gauti program.. kuria gal..site prisijungti prie savo turimo akanto. Rekomenduo .iau CoffeCup FTP Kai prisijungiate prie savo turimo akaunto jums reikia sukurti directoryj.. pavadinta "public_html".Tai jk.s galite padaryti /.rašydami: mkdir public_html Po viso šito pakeiskite savo direktorij.. i nauj.. pavadinta "public_html". cd public_html Jeigu jk.s norite galite sukurti dar direktorijs.,pavyzdj..iui viena jau kuri.. sukk.r..te visiem puslapiam,galite sukurti dar vien.. visokiem paveiksl..liam.Nor..dami tai padaryti darykite t.. pat/. kaip dar..te su "public_html". Toliau jums reikia pagalvoti apie pagrindinio puslapio pavadinim..(ne apie virsuje lango matom.. uj..raš..,o apie pa .io HTML failo pavadinim..).Daj..niausiai vartojamas pavadinimas pirmam interneto puslapio lapui yra "index".Jeigu jau nusprend..te kaip pavadinsit pagrindin/. fail.. parašykite(aš pa..miau index kaip pavyzd/.,jk.s tur..tum..t parašyti savo sugalvot.. pavadinm.. vietoj index): pico index.html Toliau jums reikia suj..inoti pagrindines HTML komandas.Toliau mes apie jas ir kalb..sime.Kai jau prad..jote išeikite iš savo puslapio.Tai galite padaryti paspausdami control-x.Tada jums reikia /.rašyti štai k..: chmod 744 index.html Bet darykite tai su savo sugalvotu pavadinimu,nebk.tinai su index nes aš j/. pa..miau tik kaip pavyzd/..Tai jums reik..s /.rašyti kas kart.. kai nor..site palikti savo puslap/..Ši komanda uj..tikrins,kad niekas negal..s. ištrinti jk.ss. puslapio.Jums reik..s tai padaryti su kiekvienu iš puslapis. kuriuos sukursite.Dabar pasij..iur..kim kaip atrodo jk.ss. puslapis internete.Tarkim, kad jk.ss. serveris yra "www.serveris.com" ,jk.ss. vartotojo vardas yra vartotojas,o pagrindinis puslapis index.html.URL atrodyts. maj..daug taip: www.serveris.com/vartotojas/index.html Jeigu jk.s sukk.r..te naujs. direktorijs.,pavyzdj..iui "Puslapiai",tada nor..dami per internet.. prieiti iki toje direktorijoje esan .io failo,pavyzdj..iui index.html,t.. direktorij.. taip pat tur..site /.vesti /. URL.Viskas atrodytu maj..daug taip: www.serveris.com/vartotojas/Puslapiai/index.html Antrašt.. Pirmas dalykas kur/. turite /.d..ti /. savo puslap/. yra antrašt...Antrašt.. yra tai k.. jk.s matote kiekvieno lango pa .iame viršuje.Tarkim,kad jk.s pasirinkote antrašt.. "Jono puslapis",jums reik..s parašyti štai k..: <title>Jono puslapis</title> HTML'e kiekviena komanda yra patalpinta /. < ir >.Ir daugelyje komands. jk.s tur..site pasakyti naršyklei kada baigti komand...Tai jk.s padarote iterpdami galin/. kirt/. (/) priekyje baigiamosios komandos.HTML'uose n..ra skirtumo ar bus parasyta <title> ar <TITLE. ar net TiTlE>. Tekstas HTML'as turi 6 lygius antraš .is.,kurios suj..ym..tos nuo 1 iki 6.Didj..iausia yra 1.Antrašt..s yra parodomos daj..niausiai didesniu arba maj..esniu šriftu ir daj..niausiai pastorintai.Jeigu nor..tum..te parašyti "Labas",viskas atrodytu štai taip ir koks bk.ts. rezultatas. <h1>Labas</h1> Labas<h2>Labas</h2> Labas<h3>Labas</h3> Labas<h4>Labas</h4> Labas<h5>Labas</h5> Labas<h6>Labas</h6> LabasParagrafaiNor..dami parašyti kok/. tekst.. savo puslapyje atskiram paragrafe jums reikts. rašyti štai k..: <P>HTML'as man patinka.O tau?</P> Rezultatas bk.ts.: HTML'as man patinka.O tau? S..rašai HTML'e yra dviejs. tips. s..rašai.Taškuotieji ir sunumeruoti.Nor..dami padaryti taškuot.. s..raš.. šiai sekai: mokymasis,programavimas,kompiuteris,miegas,darbas,valgymas,draugai, tur..tum..te rašyti štai k..: <UL> <LI> mokymasis <LI> programavimas <LI> kompiuteris <LI> miegas <LI> darbas <LI> valgymas <LI> draugai </UL> Rezultatas bk.ts. roks:
Norint padaryti sunumeruota s..raš.. su tais pa .iais j..odj..iais reikts. rašyti štai k..: <OL> <LI> mokymasis <LI> programavimas <LI> kompiuteris <LI> miegas <LI> darbas <LI> valgymas <LI> draugai </OL> Rezultatas atrodytu taip:
Priverstinis sakinio j..odj..is. paskirstymas Nor..dami sakinio tam tikr.. dal/. perkelti i kit.. eilut.. jk.s galite pasinaudoti viena paprasta komanda.Pavyzdj..iui jei jk.s turite sakin/.: "Labas, aš esu programuotojas." ir norite kad keikvienas jo j..odis bk.ts. naujoje eilut..je,jums tereikia parašyti: Labas,<BR>aš<BR>esu<BR>programuotojas. Rezultatas bk.ts.: Labas, Horizontalios linijos Manau,kad tikrai nor..site /.d..ti /. savo puslap/. linijs.,kurios išskirs kanors ar šiaip papuoš puslap/..Horizontalios linijos gali bk.ti /.vairis. storis. ir ilgis..Jk.s taip pat galite padaryti solidj..i.. juod.. linij..,parašydami NOSHADE....emiau pateikiu keleta pavyzdj..is.: <HR SIZE=1 WIDTH=100%> <HR SIZE=5 WIDTH=50%> <HR SIZE=25 WIDTH=75%> <HR SIZE=3 WIDTH=100%> <HR NOSHADE SIZE=1 WIDTH=100%> <HR NOSHADE SIZE=3 WIDTH=100%> <HR NOSHADE SIZE=10 WIDTH=20%> Teksto formatavimas Dabar paaiškinsiu ka reikia daryti jei norite
kaj..kurias teksto dalis parašyti /.mantriau.Yra keli tekto tipai kuriuos jk.s
galite naudoti:
pastorintas,itališkas,pabrauktas, <b>,</b> kad pastorintas <i>,</i> kad itališkas <u>,</u> kad pabrauktas <strike>,</strike> kad
<sup>,</sup> kad paaukštintas <sub>,</sub> kad paj..emintas Jk.s taip pat galite maišyti šriftus. Jungimas Nuorodos Na beveik visuose puslapiuose yra nuorods. /. kitus puslapius ar /. kaj..kuri.. jk.ss. puslapio dal/..Tarkim,kad jk.s norite padaryti nuorod.. /. delfi puslap/..Delfi puslapio adresas yra: http://www.delfi.lt, kad tai padaryti,jums reik..s parašyti štai k..: <A HREF="http://www.delfi.lt">O .ia rašomas tekstas ant kurio paspaudus,lankytoj.. nuves /. delfi puslap/.</A> Rezultatas bk.ts.: O .ia rašomas tekstas ant kurio paspaudus lankytoj.. nuves /. delfi puslap/. Elektroninio pašto nuorodos Daugelis j..monis. savo puslapiuose palieka savo elektronin/. pašt..,kad su jais gal..tu susisiekti.Tarkim,kad jk.ss. vardas yra Piliponis,o elektroninis paštas [email protected],jums reikts. /.rašyti štai k..: <A HREF="mailto:[email protected]">Piliponis</A> Štai rezultatas: Grafika Puslapio papildymas paveiksl..liais Beveik kiekvienas puslapis internete turi kaj..koki.. grafikos detal...Aš irgi rekomenduo .iau jum tur..ti savo puslapyje bent viena paveiksl..l/..Yra du pagrindiniai bk.dai kaip laikyti puslapyje esan .ius paveiksl..lius.Pirmasis, naudoti paveiksl..l/. esant/. kaj..kur kitame puslapyje.Antrasis,/.kelti paveiksl..lius /. jk.ss. asmenin/. akount...Aš asmeniškai naudoju antr..j/. bk.d...Jeigu naudojate pirm..j/. visada yra rizika ,kad paveiksl..l/.,kur/. jk.s naudojate, perkels /. kit.. viet.. ir tuomet jk.ss. puslapyje taip pat neras to paveiksl..lio ir rodis X simbol/.. Jeigu norite naudotis pirmuoju bk.du, jums reik..s susirasti vis.. keli.. iki to paveiksl..lio.tai padaryti aš rekomenduo .iau Netscape Navigator naršykl...Paspauskite dešin/.j/. pal..s klaviš.. arba paspauskite ir laikykite kol pasirodis meniu.Pasirinkite "View this image".Tada nukopijuokite URL,kur/. pamatysite lokacijos r..muose.Tarkim, kad paveiksl..lis yra : www.members.fortunecity.com/sqz/hacked.jpg,jums reikts. rašyti: <IMG SRC="http://www.members.fortunecity.com/sqz/hacked.jpg"> Rezultatas bk.ts. tas paveiksl..lis jk.ss. puslapio kairiajame šone. Jeigu paveiksl..lis yra /.keltas /. jk.ss. akaunt..,tai viskas k.. jk.s tur..site padaryti tai parašyti failo pavadinim... jeigu jk.s nesukk.r..te atskirs. direktorijs. paveiksl..liams ir HTML'ams,tai jums tereik..s parašyti paveiksl..lio pavadinim...(pvz: <IMG SRC="hacked.jpg">) Tekstas vietoj paveiksl..lis. Kai kurios interneto naršykl..s negali atidaryti paveiksl..lis. arba kai kurie vartotojai patys atsijungia paveiksl..lis. rodymo funkcij.. (pvz: jeigu js. modemai labai l..ti).HTML'as turi toki.. komand..,kuri leidj..ia vartotojams matyti uj..raš.. vietoje paveiksl..lio.Komanda "ALT" leidj..ia jums sukurti savo tekst..,kur/. vartotojai matys vietoje paveiksl..lio. Pavyzdj..iui: <IMG SRC="hacked.jpg" ALT="Kaip sukurti nuosav.. interneto puslap/."> hacked.jpg yra jk.ss. /.keltas paveiksl..lis,o tekstas "Kaip sukurti nuosav.. interneto puslap/." yra tas tekstas, kur/. vartotojai matys,jei jie atjung.. paveiksl..lis. rodymo funkcij.. arba jei js. interneto naršykl.. negali rodyti paveiksl..lis..Jeigu viskas tvarkoje tai vartotojai matys paveiksl..l/.. Judantys paveiksl..liai Visi judantys paveiksl..liai yra su galk.ne GIF.Nor..dami susikurti savo judant/. paveiksl..l/. jk.s turite tur..ti tam skirtas programas.Jeigu jk.s naudojate Windows OS, tai jums reikts. nueiti .ia ir parsisis.sti tam skirt.. program...Aš rekomenduo .iau "GIF Animator". Fono,teksto ir nuorods. spalvos Kaip ir kiekviename puslapyje jk.s nor..site tur..ti specifin.. spalv.. fonui,tekstui,nesilankytoms nuorodoms, apsilankytoms nuorodoms ir aktivioms nuorodoms.Kad tai padarytum..te jk.s tur..site susirasti kodin/. spalvos numer/...ia rasite labai didel/. saraš.. kodinis. spalvs. numeris..Pastaba: jums reikia parašyti # simbol/. prieš spalvos kod...
Jk.s taip pat galite sujungti dvi ar daugiau komandas kartu. Fono paveiksl..liai Vietoje solidj..ios fono spalvos jk.s galite pasidaryti paveiksl..l/...ia rasite keleta paveiksl..lis. kurie tiks jk.ss. puslapio fonui.Tarkim,kad fono nuotrauka vadinasi "fonas.jpg".Nor..dami puslapio fone matyti ši.. nuotrauk..,/.rašykite: <body background="fonas.jpg"> Jungimas paveiksl..liais Jeigu uj..sinor..site savo puslapyje padaryti paveiksl..l/., kuris nuvests. /. kaj..kok/. tai puslap/.,jk.s labai lengvai gal..site tai /.gyvendinti.Tarkim,kad jk.s norite padaryti nuorod.. /. yahoo puslap/..Nor..dami, kad /. š/. puslap/. vartotoj.. nuvests. jam paspaudus ant paveiksl..lio,jk.s turite rašyti: <A href="http://www.yahoo.com"><IMG SRC=http://www.infohost.com/members/web/Images/yahoo.gif"></A> Rezultatas bk.ts. yahoo puslapio emblema kairiajame jk.ss. puslapio šone,o kai ant jos kas nors paspaus,juos nuves /. yahoo puslap/.. Uj..pildymo formos Uj..pildymo formos leidj..ia lankytojui pateikti kaj..koki.. tai informacij..,kuri scripts. ir ivairis. programs. d..ka pasieks jus.Pavyzdj..iui: leidj..ia visiem norintiems palikti savo emailus /. kuriuos jk.s v..liau gal..site sis.sti naujienas.Daugelis serveris. turi jau iškart paruoštus skriptus kuriuos gali naudoti serveris. vartotojai. ..sivaizduokim, kad aš naudosiu skript.. pavadinimu "fb.pl".Jisai nusis.s /. mano email.. visus duomenis kuriuos vartotojai paliks uj..pildymo formuose.Pastaba: šis skriptas n..ra tikras ir jisai neveikia,aš j/. naudoju tik kaip pavyzd/.. Veiksmo/Bk.do forma Veiksmo ir bk.do forma yra pats pirmas dalykas kur/. turi mok..ti nor..damas kurti sve .is. knyg...Tai yra vieta kur jk.s /.vedate Perl'o skript...Tarkim,kad skripto kur/. aš naudoju adresas yra: http://www.domain.com/cgi-bin/fb.pl.Toliau paaiškinsiu k.. reikia rašyti norint gauti vartotojo atsakym.. /. savo email...Sakykim,kad jk.ss. emailas yra [email protected],jums tereik..s parašyti šias dvi eilutes: <FORM METHOD="POST" ACTION="http://www.domain.com/cgi-bin/fb.pl"> <INPUT TYPE="input" NAME="gav..jas" [email protected]">TO:<P> Štai kaip tai atrodis: Pavieniai arba besikartojantys laukeliai Savo sve .is. knygoje jk.s galite paklausti klausims. /. kuriuos atsakymas yra vienas j..odis.Pavyzdj..iui: jei norite paklausti vartotjo emailo,vardo,pavard..s,temos.Štai k.. jums reikia rašyti,norint to paklausti: <INPUT TYPE="input" NAME="nuo"> Jk.ss. elektroninis paštas<P> <INPUT TYPE="input" NAME="vardas">Jk.ss. vardas<P> <INPUT TYPE="input" NAME="pavard..">Jk.ss. pavard..<P> <INPUT TYPE="input" NAME="tema">Tema<P> Štai rezultatas Jk.ss. elektroninis paštas Jk.ss. vardas Jk.ss. pavard.. Tema Didesni laukeliai Aš rekomenduo .iau jums tur..ti viena didesni laukel/., gale jk.ss. sve .is. knygos, /. kur/. lankytojai rašyts. komentarus. Pirmiausia jums reikia nuspr..sti kiek eilis. ir kiek stulpelis. jums reikia. Tarkim, kad jk.s norite tur..ti 7 eilutes ir 45 stulpelius.Štai k.. jk.s tur..site /.rašyti: Prašau rašyti visus klausimus,pasik.limus ir komantarus .ia: <TEXTAREA Rows=7 Cols=45 NAME="pasik.lymai"></TEXTAREA><P> Štai rezultatas: Prašau rašyti visus klausimus,pasik.limus ir komantarus .ia:
Checkbox'ai Tarkim, kad jk.s norite paklausti "K.. jk.s m..gstate daryti?".Jk.s galite padaryti s..raš.. su variantais kuriuos patinka daryti.Jeigu vartotojas paj..ym..s variant..,tai reikš,kad jis m..gsta tai daryti.Tarkim,kad atsakyms. variantai yra: ...ik.r..ti televizij..,j..aisti internete,skaityti knyg..,sportuoti,studijuoti.Jums reikts. /.rašyti: K.. jk.s m..gstate daryti? <INPUT TYPE="checkbox" NAME="m..gstu"
VALUE="Televizija">...ik.r..ti televizij..<P> Rezultatas: K.. jk.s m..gstate daryti? ...ik.r..ti televizij.. ...aisti internete Skaityti knyg.. Sportuoti Studijuoti
Apvalk.s mygtukai Jeigu norite paklausti klausimo su vienu atsakymu,galite naudoti apvalius mygtukus.Pavyzdj..iui jeigu norite paklausti "Koki.. interneto naršykl.. dabar naudojate?" ir norite pateikti atsakyms. variantus: Netscape Navigator 4.x,Netscape Navigator 3.x,Netscape Communicator,Mosaic ar Microsoft'o Internet Explorer'/.,jums reikts. parašyti: Koki.. interneto naršykl.. naudojate dabar? <INPUT TYPE="radio" NAME="naršykl.." VALUE="Navigatorius 4.x">Netscape Navigator 4.x<P> <INPUT TYPE="radio" NAME="naršykl.." VALUE="Navigatorius 3.x">Netscape Navigator 3.x<P> <INPUT TYPE="radio" NAME="naršykl.." VALUE="Communikatorius">Netscape Communicator<P> <INPUT TYPE="radio" NAME="naršykl.." VALUE="Mozaic">Mozaic<P> <INPUT TYPE="radio" NAME="naršykl.." VALUE="InternetExplorer">Internet Explorer<P> Rezultatas: Koki.. interneto naršykl.. naudojate dabar? Netscape Navigator 4.x Netscape Navigator 3.x Netscape Communicator Mozaic Internet Explorer Išlendantys s..rašai Kitas bk.das pateikti klausimo variantus yra išlendantis s..rašas.Jeigu jk.s norite paklausti "Kokia jk.ss. m..gstamiausia spalva?" ir norite sudaryti s..raš.. iš šis. galims. atsakyms. variants.: raudona,geltona,j..alia, m..lyna, juoda,ruda,violetin.. ir oranj..in..,iš kuris. pradj..ioje bk.ts. paj..ym..ta juoda,jums reik..s /.rašyti štai k..: Kokia jk.ss. m..gstamiausia spalva? <SELECT NAME="spalva"> <OPTION>Raudona <OPTION>Geltona <OPTION>...alia <OPTION>M..lyna <OPTION SELECTED>Juoda <OPTION>Ruda <OPTION>Violetin.. <OPTION>Oranj..in.. </SELECT><P> Rezultatas bk.ts.: Kokia jk.ss. m..gstamiausia spalva? Raudona Geltona ...alia M..lyna Juoda Ruda Violetin.. Oranj..in.. Ritin..jamasis s..rašas Tokie s..rašai pad..s lankytojams paj..ym..ti daugiau nei vien.. atsakyma iškart.Jk.s tai pat galite nuspr..sti kiek linijs. bus matoma....emiau pateikiu du pavyzdj..ius su tais pa .iais dalykais.Pirmame jk.s galite paj..ym..ti tik vien.. variant.. ir yra matomos trys linijos.Antrajame jk.s galite paj..ym..ti daugiau variants. laikydami Ctrl arba Shift. Antrajame matomos keturios eilut..s.Tarkim,kad klausimas yra: "Koks jk.ss. m..giamiausias video j..aidims. kompiuteris?".Atasakymai yra: Nintendo 64,Sony playstation,Sega Dreamcast arba Ziliton.Štai k.. jums reikia /.rašyti: Koks jk.ss. m..giamiausias video j..aidims. kompiuteris? <SELECT NAME=video j..aidimas" SIZE=3> <OPTION VALUE ="nintendo">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="sega">Sega Dreamcast <OPTION VALUE="ziliton">Ziliton </SELECT><p> Rezultatas bk.ts.: Koks jk.ss. m..giamiausias video j..aidims. kompiuteris? Nintendo 64 Sony Playstation Sega Dreamcast Ziliton Koks jk.ss. m..giamiausias video j..aidims. kompiuteris?(Laikykite shift,kad paj..ym..tum..te daugiau nei vien.. variant..) <SELECT NAME=video j..aidimas" MULTIPLE SIZE=4> <OPTION VALUE ="nintendo">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="sega">Sega Dreamcast <OPTION VALUE="ziliton">Ziliton </SELECT><p> Rezultatas: Koks jk.ss. m..giamiausias video j..aidims. kompiuteris?(Laikykite shift,kad paj..ym..tum..te daugiau nei vien.. variant..) Nintendo 64 Sony Playstation Sega Dreamcast Ziliton
Išvalyti form.. Beveik visuose sve .is. knygouse yra "Išvalyti" mygtukas.Norint tur..ti "Išvalyti" mygtuk..,jums reikia /.rašyti štai k..: Norint panaikinti viss. forms. atsakymus paspauskite š/. mygtuk..:<INPUT TYPE="reset" VALUE="Išvalyti"> Rezultatas: Norint panaikinti viss. forms. atsakymus paspauskite š/. mygtuk..: Patvirtinti /.vestus duomenis Kai visk.. uj..baig..te jk.s turite padaryti mygtuk..,kad j..mon..s j/. paspaude gal..ts. pateikti duomenis.Kad tai padarytum..te parašykit: Nor..dami pateikti savo /.vestus duomenis paspauskite š/. mygtuk..:<INPUT TYPE="submit" VALUE="Pateikti"> Rezultatas bk.ts.:(Pastaba: nespasukite šio mygtuko nes jis buvo padarytas neviksmingu ir dabar neveiks) Nor..dami pateikti savo /.vestus duomenis paspauskite š/. mygtuk..: Pastaba:Prie kiekvienos jk.ss. formos galo jk.s turite darašyti </FORM> arba jk.ss. formos neveiks. Iš angls. kalbos vert.. ir savo mintimis papild.. MadH. www.HForce.cjb.net 2001 Lithuania |