Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • HTML Tutorial

    Încărcat de

    Radu Trandafir
    18 vizualizări17 pagini
    Tutorial

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Tutorial

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    18 vizualizări17 pagini

    HTML Tutorial

    Încărcat de

    Radu Trandafir
    Tutorial

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 17

    Joaca cu HTML

    n acest capitol nelegerea bazelor HTML Folosirea tag-urilor pentru definirea textului Folosirea atributelor tag-urilor Crearea listelor Crearea hyperlink-urilor Folosirea graficii Crearea unei interfee utilizator WWW-ul adaug o interfaa utilizator grafic Internet-ului. Poi folosi Internetul fr a folosi WWW-ul, dar nu poi folosi WWW-ul fr a folosi Internet-ul. Iniial, WWW-ul consta numai n text, dar WWW-ul deasemenea permitea ceva numit hyperlink-uri (referine text ce indicau alte documente depozitate pe WWW). Deoarece textul vechi simplu arat plictisitor, eventual lumea a adugat imagini pentru a face WWW-ul mai uor i mai simpatic de utilizat. Deoarece Internet-ul const ntr-o varietate de calculatoare, programatorii aveau nevoie s fac interfaa grafic a WWW-ului un standard ce putea rula pe orice calculator. Fiecare calculator nelege codul ASCII, aa c programatorii au creat un limbaj bazat pe ASCII pe care l-au proclamat HyperText Markup Language sau HTML. Pentru a crea un website, scrii coduri HTML i le stochezi ntr-un fiier ASCII, care de obicei se termin cu extensia .htm sau .html. Dac un alt calculator vrea s vizualizeze pagina Web, folosete un program special cunoscut i sub numele de browser ce traduce condul HTML ntr-o simpatic interfa grafic. NELEGEREA BAZELOR HTML-ului Codul HTML definete modul n care textul i grafica apar n browser. O pagin Web de fapt const n cod HTML pe care l stochezi ntr-un fiier ASCII, de obicei cu extensia HTM sau HTML. Codul HTML const n ceva cunoscut ca tag-uri, ce apar n paranteze. Cele mai multe (dar nu toate) tag-uri apar n perechi, unde primul tag definete nceputul la ceva i al doilea definete sfritul la ceva, aa ca i definirea textului italic sau a unui antet ca n urmtorul exemplu : <I> This text appears in italics. </I> Un fiier ASCII conine nimic altceva dect caractere fr niciun fel de formatare cum ar fi fonturi sau subliniare. Deoarece toate calculatoarele neleg caractere (cum ar fi litere, cifre i simboluri pe care le poi scrie de la tastatur), poi transfera text de la un calculator la altul folosind fiiere ASCII. Tag-urile de sfrit ntotdeauna folosesc un caracter slash : </I> sau </BODY>. Poi include tag-uri n interiorul altor tag-uri, ca n urmtoarea linie : <B> This <I> text </I> appears in bold. </B> Cele dou tag-uri precedente afieaz ntreaga linie ngroat i afieaz cuvntul text ngroat i italic, care arat dup cum urmeaz : This text appears in bold. Tag-urile se comport ca recipiente pentru text. Gndete-te la tag-uri ca marcaje pentru nceputul i sfritul recipientului. Asigur-te c nu-i ncurci tag-

    urile sau vei avea parte de o formatare neateptat a textului ca n urmtoarul exemplu : <B> This <I> text appears </B> in bold. </I> Dac ai folosit amestecul de tag-uri de deasupra, textul tu va arta cum urmeaz : This text appears in bold. Ideal, vrei s amplasezi tag-urile complet n interiorul nceputului i sfritului altor tag-uri, dup cum este artat n Figura 23-1. Codurile HTML pot arat criptic dac le nghesui mpreun aa c simte-te liber s foloseti destule linii goale i spaii pentru a face codul tu HTML ct de ct lizibil. Adu-i aminte c atunci cnd un browser interpreteaz codul HTML ntr-o pagin Web, ignor linii goale i spaiile. Poi scrie cod HTML n orice editor de text ca Windows Notepad sau chiar editorul Liberty BASIC. Doar adu-i aminte s-i salvezi fiierul cu extensia HTM sau HTML. Dup ce ai creat un fiier folosind coduri HTML, poi ncrca acel fiier n browser-ul tu prin selectarea File -> Open din meniul browser-ului. NELEGEREA CELOR MAI IMPORTANTE TAG-uri HTML Urmtoarele sunt primele tag-uri HTML de care orice pagin Web are nevoie: <HTML> </HTML> Aceste dou tag-uri definesc pur i simplu o pagin Web goal. Orice apare n interiorul acestor dou tag-uri apare i pe pagina Web. Nimic nu trebuie s apar naintea tag-ului <HTML> sau dup </HTML>. Dac ceva apare n aceste locaii n editorul tu text, nu apare pe ecran dac vizualizezi pagina ntr-un browser Web. CREAREA UNUI ANTET I A UNUI TITLU Dup aceea, trebuie s defineti tot ce vrei s apar la antetul (susul) paginii tale Web prin folosirea tag-ului <HEAD> care arat dup cum urmeaz : <HTML> <HEAD> </HEAD> </HTML> Cel mai obinuit obiect de plasat ntre tag-urile <HEAD> i </HEAD> este un titlu. Dac cineva se decide s adauge ca preferin pagina ta Web, titlul este textul pe care browser-ul l stocheaz n lista ta de preferine a acelei persoane. Fr titlu, lista de preferine a utilizatorului conine numele real al fiierului, care de obieci este criptic i derutant. n cele din urm, ce este mai uor de citit ntr-o list de preferine un nume propriu zis de pagin Web ca Web Site Containing American Nuclear Secrets sau un nume de fiier, ca NK1999.htm ? Pentru a defini un titlu pentru pagina ta Web, bagi tag-urile titlu ntre tag-urile pentru antet, dup cum urmeaz: <HTML>

    <HEAD> <TITLE> Document title </TITLE> </HEAD> </HTML> O pagin Web necesit doar un titlu. DEFINIREA MAJORITII PAGINII TALE WEB Dup ce defineti un antet i un titlu pentru pagina ta Web ai nevoie s defineti restul paginii tale prin folosirea tag-urilor <BODY> i </BODY>, dup cum urmeaz : <HTML> <HEAD> <TITLE> Document title </TITLE> </HEAD> <BODY> </BODY> </HTML> ADUGAREA COMENTARIILOR n Libertz BASIC i n alte limbaje de programare, poi insera comentarii ce explic ce face programul tu, cnd ai modificat ultima dat programul i cine a modificat ultima dat programul. Pe msur ce scrii codul HTML, poi de asemenea s adaugi comentarii la pagina ta Web. Comentariile nu apar n browser; apar doar dac te uii la codul HTML. Un comentariu trebuie s apar ntre paranteze dup cum urmeaz : <!--This is a comment : Your mother is ugly and so are you.--> <!marcheaz nceputul tag-ului pentru comentarii i --> marcheaz sfritul tag-ului pentru comentarii. DEFINIREA TEXTULUI CU TAG-uri Tag-urile HTML de baz definesc pagina ta Web ca un ntreg, dar trebuie s adaugi text pentru a furniza ceva folositor pentru a fi citit de spectatori. HTML furnizeaz tag-uri speciale pentru crearea urmtoarelor elemente : Antetele separ seciuni ale textului i clasific buci de text sub o singur tem (similar cu modul n care antetele ce constau n una sau mai multe propoziii. Paragrafele sunt buci de text ce constau n una sau mai multe propoziii. Citatele sunt similare paragrafelor, dar tag-urile HTML pentru citate le indenteaz i le ncercuiete cu mai mult spaiu dect paragrafele obinuite. Accentuarea textului afieaz textul ntr-un anumit format sau stil pentru a scoate n eviden textul. Urmtoarele seciuni descrie fiecare din aceste tag-uri diferite pentru text. Crearea unui antet

    HTML i permit s alegi ntre ase tipuri de antet. Heading 1 semnific cel mai important antet i Heading 6 cel mai puin importante antet. Figura 23-2 arat un exemplu de fiecare tip de antet. Pentru a crea unul din aceste ase antente, folosii unul din urmtoarele seturi de tag-uri HTML : <H1> <H2> <H3> <H4> <H5> <H6> Heading Heading Heading Heading Heading Heading 1 2 3 4 5 6 </H1> </H2> </H3> </H4> </H5> </H6>

    De obicei, vrei cel puin dou subantete sub fiecare antet. Vrei, de exemplu, dou sau trei Heading 2 sub un singur Headin 1. Sau vrei dou sau trei Heading 6 sub un singur Heading 5. Definirea unui paragraf Un paragraf este o bucat de text pe care o separi de textul din jur cu o linie goal (ca i cu paragrafele pe care le vezi pe aceast pagin). Pentru a defini nceputul unui paragraf, folosete tag-ul <P> i pentru a defini sfritul paragrafului, folosete tag-ul </P> , dup cum urmeaz : <P> This text you can consider a paragraph. </P> Dac scrii text n interiorul unei perechi de tag-uri pentru paragraf, ntregul paragraf poate fi pe o singur linie, ntinzndu-se de la marginea din stnga a ecranului dincolo de marginea din dreapta a ecranului. Tag-urile pentru paragraf au grij automat ca afiarea textului s fie ntre marginile ecranului. Pentru a face paragraful tu mai uor de citit, ai putea s apei ENTER pentru a face ca liniile paragrafului s apar pe linii separate n loc s apar pe o singur linie. Dac vrei sa inserezi +++ n mijlocul paragrafului, poi folosi un tag special pentru ++++ tag-ul <BR>. Spre deosebire de alte tag-uri, tag-ul apare singur. Figura 23-3 arat cum tag-ul pentru paragraf <P> i tag-ul ***** <BR> pot crea o linie goal ntre paragrafe. Accentuarea unui citat Dac vrei ca un paragraf s ias n eviden, l poi defini ca citat n urmtorul mod : <BLOCKQUOTE> This text appears indentet. </BLOCKQUOTE> Adugarea accenturii la text

    Tag-urile pentru paragrafe separ textul tu n paragrafe (insernd automatic linii goale nainte i dup paragraf) i tag-urile blockquote indenteaz textul. Dar sar putea s vrei s accentuiezi anumite cuvinte sau fraze. Pentru a face aceasta, poi folosi unul din urmtoarele perechi de tag-uri HTML: <B> i </B> afieaz textul ngroat. <I> i </I> afieaz textul nclinat. <U> i </U> afieaz textul subliniat. <TT> i </TT> afieaz textul ca i cnd l-ai scris de la o main de scris. <HR> afieaz o linie orizontal. (Observa c tag-ul <HR> este un alt tag ce nu apare n pereche). Figura 23-4 arat o pagin Web ce folosete toate aceste moduri speciale de a accentua textul ntr-un browser. FOLOSIREA ATRIBUTELEOR TAG-urilor Pentru a spori cu adevrat nfiarea textului tu, poi folosi atribute. Un atribut este o comand special ce o ascunzi n interiorul unui tag HTML. Un atribut modific nfiarea oricrui text definit de tag-uri. Urmtoarele sunt nite atribute comune : ALIGN aliniaz paragraful sau antetul la dreapta, centru sau stnga. BGCOLOR schimb culoarea fundalului paginii tale Web. TEXT schimb culoarea textului. LINK schimb culoarea hyperlink-urilor. VLINK schimb culoarea hyperlink-urilor pe care utilizatorul le-a vizitat deja. Alinierea textului n mod normal aliniezi la stnga antetele i paragrafele, dar de asemenea le poi alinia la dreapta sau la centru prin folosirea atributului ALING n interiorul primului tag pentru antet sau paragraph, ca n exemplul urmtor : <P ALING=center> This text appears centered. </P> Pentru a alinia la centru textul, trebuie doar s foloseti cuvntul centre cu atributul ALIGN. Pentru a alinia textul la dreapta sau stnga, folosete cuvntul left sau right cu atributul ALIGN, dup cum urmeaz : <H1 ALIGN=right> This text appears right-aligned. </H1> Joaca cu culorile Pentru a defini culorile pentru fundal sau text, trebuie s setezi atributele BGCOLOR i TEXT la culoarea pe care vrei s o foloseti. Ultimele versiuni ale majoritii browserelor i permit s defineti culori prin folosirea numelor ca red, blue sau yellow, ca mai jos : <BODY BGCOLOR=white> (fundal alb)

    <BODYT TEXT=000000> (text negru) Pentru o mai mare flexibilitate, poi folosi un numr de 6 cifre (hexadecimal) ce reprezint valoarea RGB (Red-Green-Blue). O valoare RGB definete ct de mult rou, verde sau albastru apare. Prin modificarea cantitii de rou, verde sau albastru poi crea o varietate de diferite culori ce mov, alb , portocaliu, galben .a.m.d. Urmtorul cod este doar un exemplu : <BODY BGCOLOR=FFFFFF> (fundal alb) <BODY TEXT=000000> (text negru) Defineti culori RGB prin folosirea numerelor hexazecimal, care variaz de la 0 la F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Un zero (0) reprezint absena unei culori, n timp ce un F reprezint cantitatea maxim de culoare. Poi varia valori pentru rou, verde i albastru pentru a creea alte culori. Primele dou cifrele ale atributelor BGCOLOR i TEXT reprezint cantitatea de rou (R), urmtoarele dou cifre reprezint cantitatea de verge (G) i ultimele dou cifre reprezint cantitatea de albastru (B) din culoare. Dac vrei un fundal complet rou, folosete urmtoarea comand : <BODY BGCOLOR=FF0000> Pentru un fundal complet verde, folosete urmtoarea comand : <BODY BGCOLOR=00FF00> i pentru un fundal complet albastru, folosete urmtoarea comand : <BODY BGCOLOR=0000FF> Colorarea hyperlink-urilor tale De asemenea poate vrei s ajustezi culoarea pentru hyperlink-urile tale. Majoritatea paginilor Web afieaz hyperlink-urile n culori deschide pentru a le face evidente. Dup ce , un utilizator, viziteaz un hyperlink acel hyperlink poate s-i schimbe culorile pentru a-I arat utilizatorului c a vizitat deja acea pagin Web. Pentru a schimba culorile hyperlink-urilor tale, folosete unul din urmtoarele taguri: <BODY LINK=#hexadecimal_here> <BODY VLINK=#hexadecimal_here> Dac vrei s foloseti ambele atribute, LINK i VLINK, poi face dup cum urmeaz : <BODY LINK=#hexadecimal_here VLINK=#hexadecimal_here> Atributul LINK folosete aceleai numere hexazecimale ca la text sau fundal pentru a defini culoarea pentru hyperlink. Atributul VLINK definete n mod similar culoarea pentru a afia un hyperlink pe care utilizatorul l-a vizitat deja.

    CREAREA UNEI LISTE S creezi o pagin Web pentru a informa lumea despre ceva e ca i cum ai creea o reclam care atrage atenia. n ambele cazuri, vrei s ari ct mai mult informaiei spectatorului, ntr-un mod atractiv i digerabil. Mult lume gsete bucele mari de text intimidante i greu de citit, aa c considera s-i separi textul in liste. HTML asigur urmtoarele 3 tipuri de liste (folosesc o list s v art acele liste) : Liste neordonate afieaz textul cu semen n faa fiecrei linii, ca i lista din care face parte acest text. Liste ordonate numeroteaz fiecare linie a textului. Liste cu definiii indenteaz fiecare linie a textului.

    Liste neordonate Pentru a crea o list neordonat trebuie s foloseti dou tipuri de tag-uri HTML. Primele tag-uri HTML sunt <UL> i </UL> care definesc lista neordonat. Al doilea tag, <LI> (care nseamn obiect din list), marcheaz fiecare obiect nsemnat. Urmeaz un exemplu : <UL> <LI> Take out the trash. <LI> Develop a nuclear weapon. <LI> Borrow an expenside appliance from the neighbor. </UL> Tag-ul <LI> nu necesit un tag de sfrit. Poi folosi <LI> de unul singur, dac doreti sau poi folosi </LI> ca un tag de sfrit. Poi de asemenea crea o list neordonat cuibrit dup cum urmeaz: : <UL> <LI> Take out trash. <LI> Develop a nuclear weapon. <UL> <LI> Steal secrets from United States. <LI> Bomb our own embassy. <LI> Export more MSG to our enemies. </UL> <LI> Borrow an expensive appliance from the neighbor. </UL> Figura 23-5 arat cum precedentul cod HTML creeaz o list neordonat cuibrit. A se observa c lista neordonat cuibrit folosete semen unice pentru a o diferenia de lista neordonat exterioar.

    Liste ordonate n timp ce listele neordonate afieaz obiecte cu semen, o list ordonat afieaz obiecte numerotate. Primul obiect din list este numrul 1; al doilea este numrul 2; .a.m.d. Pentru a creea o list ordonat, foloseti tag-urile HTML <OL> i </OL> pentru a defini lista ordonat. Apo foloseti tag-ul <LI> pentru a marca fiecare obiect numerotat. n cele ce urmeaz este un exemplu : <OL> <LI> Turn left at the traffic light. <LI> Drive five blocks. <LI> Throw a rotten egg at the front door. </OL> Poi de asemenea creea o list cuibrit ordonat dup cum urmeaz : <OL> <LI> Turn left at the traffic light. <LI> Drive five blocks. <OL> <LI> Go past a burned down house. <LI> Drive through the next three traffic lights. <LI> Look for the house with toilet paper in the trees. </OL> <LI> Throw a rotten egg at the front door. </OL> Figura 23-6 arat o list ordonat cuibrit. A se observa c lista ordonat cuibrit folosete alta numerotare fa de lista ordonat exterioar. Poi cuibri lista ordonat i neordonat una n alta, n loc s cuibreti dou liste neordonate sau dou liste ordonate. Aa, poi avea o list cu semne n interiorul unei liste numerotate sau viceversa. Lista cu definiii Listele cu definiii i i-au numele de la faptul c lumea, deseori le folosete n glosare, unde o linie listeaz un termen i urmtoarea linie listeaz definiia acelui termen. Pentru a creea o list de definiii trebuie s foloseti urmtoarele tipuri de tag-uri HTML : Tag-urile <DL> i </DL> definesc nceputul i sfritul unei liste de definiii. Tag-ul <DT> afieaz o linie de text, ca un cuvnt sau termen. Tag-ul <DD> afieaz definiia cuvntului sau termenului pe care tag-ul <DT> l-a definit precedent. Pentru a vedea cum se creeaz o list de definiii uit-te la codul urmtor i apoi arunc o privire la Figura 23-7 care arat cum, urmtorul cod HTML, arat ntrun browser : <DL>

    <DT> Cat <DD> An animal that enslaves its owners. <DT> Flashlight <DD> A case for holding dead batteries. <DT> A moron <DD> A Boss or someone who doesnt know how to do anything but pretends to be important. </DL> CREAREA DE HYPERLINK-uri Orice pagina Web bun are nevoie de dou lucruri : informaie (de obicei text) care furnizeaz nite coninut folositor i hyperlink-uri care leag pagina ta Web de o pagin Web relaionat. O pagina Web de obiecei ofer urmtoarele dou tipuri de hyperlink-uri : Hyperlink-uri externe sunt legturi spre alte pagini care de obicei se afl pe un alt calculator (i de obicei este alta locaie geografic). Hyperlink-uri interne sunt legturi spre alte pagini ale Website-ului tu sau spre o alt parte a aceleiai pagini Web. Pentru a crea un hyperlink trebuie s o pereche de tag-uri anchor , ca <A> i </A>. n interiorul primului tag anchor trebuie s specifici un hyperlink extern sau intern. ntre cele dou tag-uri anchor trebuie s scrii textul sau grafica care se comport ca hyperlink-ul. Crearea de hyperlink-uri externe n definirea unui hyperlink extern, atribul HREF (care vine de la Hypertest REFerence) definete urmtoarele dou obiecte : Adresa hyperlink-ului extern care apare ntr-o form similar urmtorului exemplu: http://www.someadress.com. Textul sau grafica care se comport ca hyperlink-ul care este ceea pe care utilizatorul d click pentru a sri la hyperlink-ul extern. Pentru a folosi atributul HREF, trebuie s pui in interiorul primului tag anchor, dup se arat n urmtorul exemplu: <A HREF=http://www.dummies.com>Dummies Web page</A> n acest exemplu cuvintele Dummies Web page este textul pe care vizualizatorul l vede ca hyperlink. Dnd click pe hyperlink, l duce pe utilizator la Website-ul www.dummies.com. Hyperlink-urile externe sunt complet scpate de controlul tu aa c dac un Website spre care duce link-ul tu este offline, hyperlink-ul paginii tale Web duce vizualizatorul spre un punct mort. Crearea de hyperlink-uri interne

    Pentru a face un hyperlink spre o alt pagin Web de pe propriul tu site, folosete atributul HREF - dar n loc de listarea unei alte adrese de Website, doar scrie numele fiierului al paginii Web spre care vrei s faci legtura, ca n exemplul urmtor: <A HREF=index.html>Index</A> Aceasta creeaz un hyperlink al cuvntului Index. Dup ce utilizatorii dau click pe acest hyperlink, browser-erele lor afieaz pagina Web pe care o stochezi n fiierul index.html. Legarea de un anumit loc de pe o pagin Web O problem cu legarea de alt pagin Web este c utilizatorul s-ar putea s aib nevoie s parcurg pagina pentru a gsi informaie specific. Pentru a evita aceast problem poi creea un hyperlink pentru un loc anume de pe pagina Web ca mijlocul sau captul paginii Web. Aa hyperlink-ul direcioneaz vizualizatorul exact spre informaia pe care vrei s o afiezi. Crearea unui hyperlink care se leag de un punct anume de pe pagina Web este un proces de din doi pai, dup urmtorii pai descrie : 1. Creeaz un anchor n locul de pe pagina Web pe care ca hyperlink-ul s-l afieze. Dac vrei ca un hyperlink s direcioneze un vizualizator spre captul unei pagini Web, spre exemplu, poziionezi un anchor la captul acelei pagini. 2. Creeaz un hyperlink care direcioneaz un vizualizator spre un anchor pe care l defineti. Pentru a crea un anchor trebuie s foloseti atributul NAME, dup cum urmeaz : <A NAME=TOC>Table of Contents</A> Acest exemplu afieaz textul Table of Contents pe pagina Web i i atribuie numele TOC. Dup ce creezi un anchor, urmtorul pas este s creezi un hyperlink care indic spre acel anchor specific. Anchorele sunt case-sensitive ceea ce nseamn ca un anchor pe care l-ai denumit TOC este complet diferit de un anchor pe care l denumeti toc. Dac uii aceast diferen anchor-ul tu nu va funciona deloc. Pentru a face un hyperlink s indice spre un anchor predefinit folosete atributul HREF i include numele paginii Web i numele anchor-ului separat de numele fiierului paginii Web cu caracterul # dup cum urmeaz : <A HREF=index.html#TOC>Go to Page One</A> Codul precedent afieaz hyperlink-ul Go to Page One pe ecran. Dup ce utilizatorul d click pe acest hyperlink, browser-ul sare la pagina index.html i afieaz anchor-ul definit definit de numele TOC. n acest caz browserul afieaz coninutul n susul paginii indiferent dac cuvintele Table of Contents apar n mijlocul sau n josul paginii Web.

    Afiarea de grafic Doar afiarea de text pe o pagin Web poate fi destul de plictisitor aa c HTML i permite s afiezi imagini pe pagina ta Web pentru a face totul s arate mai drgu. Grafica poate aprea ca o parte a paginii sau n fundal. Singurele fiiere imagine pe care le poi folosi pentru pagini Web sunt fiierele GIF (Graphical Interchange Format) i JPG (pronunate i JPEG, care vine de la Joint Photographic Experts Group) deoarece acestea sunt cele dou formate de fiiere imagine ce pot fi afiate de orice calculator. Adugarea unei imagini de fundal n plus pe lng adugarea de culori la o pagin Web s-ar putea de asemenea s vrei s afiezi o poz pe fundal. Pentru a aduga o poz la o pagin Web, folosete atributul BACKGROUND n interiorul tag-ului BODY, ca n urmtorul exemplu : <BODY BACKGROUND=filename.GIF> CREAREA UNEI INTERFEE UTILIZATOR PE O FORM Dei poi folosi HTML pentru a afia text pe ecran, s-ar putea s vrei s creezi ceva mai flexibil ce este cunoscut ca form. O form i permite s afiezi csue de text, butoane de comand i csue de bifat pe ecran. Pentru a defini o form foloseti tag-urie <FORM> i </FORM> pe care le presezi ntre tag-urile <BODY> i </BODY> dup cum urmeaz : <HTML> <BODY> <FORM> </FORM> </BODY> </HTML> Asigurte c presezi tag-urile <FORM> i </FORM> interiorul tag-urilor <BODY> i </BODY>; altfel forma ta nu apare pe ecran. Desigur, tag-urile <FORM> i </FORM> pur i simplu definesc o form, aa c tot trebuie s adaugi obiectele interfeei utilizator la form, dup cum se arat n Figura 23-9. Urmtoarele sunt cteva obiecte de interfaa utliziator comun pe care poate ai vrea s le adaugi ntr-o form : Csue de text sunt csue n care utilizatorii pot scrie informaie. Butoane sunt butoane de comand pe care utilizatorii pot da click. Csue de bifat sunt csue pe care utilizatorii le pot bifa sau debifa pentru a selecta sau deselecta o opiune Butoane radio sunt butoane pe care utilizatorii le pot bifa sau debifa pentru a selecta o opiune. Poi selecta doar un buton radio deodat. MANIPULAREA EVENIMENTELOR

    Fiecare element al interfeei utilizator poate rspunde utilizatorului. De fiecare dat cnd utilizatorul face ceva unui element al interfeei utilizator, ca clickul pe un buton de comand, aceast aciune este cunoscut ca un eveniment. Dup ce un event are loc asupra unui element specific al interfeei utilizator, ca un buton de comand forma ta poate rspund prin afiarea unui text, dechiderea unei ferestre, .a.m.d. Urmtoarle sunt codurile HTML pentru cteva evenimente comune: onAbort se ntmpl dup ce un utilizator oprete ncrcarea unei imagini, fie dnd click pe un link, fie dnd click pe butonul Stop. onBlur se ntmpl dup ce un obiect, ca o cutie de text sau un buton de comand, pierde focalizarea. Acest eveniment se petrece de obicei dup ce utilizatorul da click pe alt obiect. onChange se intmpl dup ce coninutul unui obiect, ca cutia de text, se schimb onClick se ntmpl dupa ce utilizatorul d click pe un obiect anume, ca un buton radio sau buton de comand onFocus se ntmpl dup ce utilizatorul d click pe un obiect sau pune n eviden un obiect folosind tasta Tab. onMouseOut se ntmpl dup ce pointerul mouse-ului nu mai apare deasupra unui obiect anume. onMouseOver se ntmpl cnd pointerul mouse-ului se mic deasupra unui obiect anume. onSelect se ntmpl dup ce utilizatorul selecteaz text ntr-o csue text. Evenimentele sunt legate la un obiect al interfeei utilizator specific, ca un buton de comand sau csu de bifat. Un singur obiect la interfeei utilizator poate rspunde la mai multe tipuri de eveniment. Crearea unei csue text O csua text poate afia text i permite utilizatorului s scrie text. Pentru a crea o csua text, scrie urmtoarea comand n interiorul tag-urilor <FORM> i </FORM>: <FORM> <INPUT TYPE=text NAME=textboxName VALUE=Text inside the text box SIZE=integer [onBlur=command] [onChange=command] [onFocus=command] [onSelect=command] </FORM> Comanda TYPE=text spune calculatorului s creeze o casu text pe ecran. Comanda NAME desemneaz un nume la alegere pentru a reprezenta csua ta

    text. Comanda VALUE afieaz text n csua ta text. Comanda SIZE definete cte caracatere poate afia csua ta text fr a fi parcurs. O csua text poate rspunde la 4 tipuri de evenimente: onBlur, onChange, onFocus i onSelect. Urmtoarele arat cum s creezi o csu text care afieaz mesajul Ow! You click too hard! dup ce dai click n interiorul csuei text: <HTML> <BODY> <FORM> <INPUT TYPE=text NAME=textboxName VALUE=This appears inside the text box SIZE=30 onFocus=textboxName.value=Ow! You click too hard! > </FORM> </BODY> </HTML> A se observa folosirea ghilimelelor simple i duble dup evenimentul onFocus. Ghilimelele duble ngrdesc comanda pe care vrei s fie urmat de calculator dupa evenimentul onFocus. Orice comand n interiorul ghilimelelor duble trebuie s foloseasc ghilimele simple sau comanda ntreag nu va funciona. Crearea unui buton de comand Un buton comand afieaz un buton pe care utilizatorul poate da click pentru a performa o anumit aciune. Pentru a crea un buton de comand folosete urmtorul cod n interiorul tag-urilor <FORM> i </FORM>: <FORM> <INPUT TYPE=button NAME=buttonName VALUE=Text that appears on the button [onBlur=handlerText] [onClick=handlerText] [onFocus=handlerText]> </FORM> Comanda TYPE=button creeaz un buton de comand pe ecran. Comanda NAME desemneaz un nume butonului de comand. Comanda VALUE afieaz un text ce apare n interiorul butonului de comand, ca OK sau Click Me. Butoanele de comand pot rspunde la trei evenimente diferite: onBlur, onClick i onFocus. Urmtorul exemplu arat cum s creezi dou butoane de comand, unul care deschide o fereastr n care este afiat pagina Web stocat n index.html i unul care nchide fereastra: <HTML> <BODY>

    <FORM> <INPUT TYPE=button NAME=open VALUE=Open window onClick=mywindow=window.open(index.html) > <INPUT TYPE=butoon NAME=close VALUE=Close window onClick=mywindow.close()> </FORM> </BODY> </HTML> Remarcm c i comanda definit de evenimentul onClick folosete ghilimele pentru a cuprinde ntreaga comand. Tot ce apare n interior trebuie s foloseasc apostroafe sau ntreaga comanda nu va funciona. Crearea unei csue de bifare Csuele de bifare afieaz opiuni pe care utilizatorul le poate alege prin click n csu de marcare pentru a bifa sau debifa un semn de bifare. Ca s creezi o csu de bifare, pune urmtoare coimand n interiorul tag-urilor <FORM> i </FORM> : <FORM> <INPUT TYPE = checkbox NAME = checkboxName VALUE = checkboxValue [CHECKED] [onBlur = handlerText] [onClick = handlerText] [onFocus = handlerText] text to display </FORM> Comanda TYPE=checkbox creeaz o csu de bifare pe ecran. Comanda NAME desemeaz un nume s reprezinte csua de bifare. Comanda VALUE specific un numr sau un character care reprezint csua de bifare dac utilizatorul alege. Comanda CHECKED afieaz un semn de bifare n csua de bifare. Variabila text to display reprezint orice text care vrei tu s se afieze lng csua de bifare. O csu de bifare poate rspunde la trei evenimente diferite: onBlur, onClick i onFocus. Urmtorul exemplu creeaz trei csue de bifare : <HTML> <BODY> <H2> Where do you want your computer to go today ?</H2>

    <FORM> <INPUT> TYPE = checkbox NAME = check1 VALUE = 99 onClick = litterbox.value=Throw the computer in the trash!> In the trash can <BR> <INPUT TYPE = checkbox NAME = check2 VALUE = 99 onClick=litterbox.value=Toss the computer outside.> Out the Window <BR> <INPUT TYPE = checkbox NAME = check3 VALUE=99 onClick=litterbox.value=Wreck it, and the throw it away. > Smash it to pieces <BR> <INPUT TYPE = text NAME =litterbox VALUE= SIZE = 40> </FORM> </BODY> </HTML> Dup ce dai click pe un check box un mesaj apare ntr-o cutie text dedesubt, dup cum se vede in Figura 23-10. Dac scrii un text care s apara langa un check box nu e nevoie s-l pui ntre ghilimele. Dac l pui ntre ghilimele, ghilimelele apar de asemenea pe ecran. Creerea unui buton radio Un buton radio funcioneaz aproximativ ca un check box exceptnd ca poi alege un singur buton radio oricnd. Butoanele radio permit utilizatorilor s rspund la ntrebri la care doar un rspuns este posibil ca n urmtorul exemplu: What is your current marital status? Pentru a rspunde la aceasta ntrebare ai nevoie de butoane radio pentru fiecare din urmtoarele rspunsuri: Single Married Divorced

    Utilizatorul poate alege doar unul din rspunsuri. Dac utilizatorul apas pe butonul radio Single, se rzgndete i apoi apas pe butonul radio Divorced apare un punct in butonul radio Divorced pentru a arat c utilizatorul l selecteaz si butonul radio Single devine gol pentru a arta ca nu-l mai selecteaz. Pentru a vedea cum se creeaz un buton radio uit-te la urmtorul exemplu: <FORM> <INPUT TYPE=radio NAME=radioName VALUE=buttonValue [CHECKED] [onBlur=handlerText] [onClick=handlerText] [onFocus=handlerText] textToDisplay </FORM> Comanda TYPE=radio creeaz un buton radio pe ecran. Comanda NAME desemneaz un nume pentru a reprezenta acel buton radio. Dac vrei ca doar un buton s apar selectat dintr-un grup de butoane radio trebuie s dai tuturor butoanelor radio exact acelai nume. Cnd butoanele radio au acelai nume, calculatorul se asigur c doar un buton radio poate fi ales o dat. Comanda VALUE specific un numr sau un caracter pe care butonul radio l reprezint dac utilizatorul l-a ales. Comanda CHECKED afieaz butonul radio ca selectat dup cum apare pe ecran. Variabila textToDisplay reprezint orice text pe care vrei s apar lng butonul radio. Un buton radio poate rspunde la trei evenimente diferite: onBlur, onClick i onFocus. Dup ce ai dat click pe un buton radio, un mesaj apare sub buton. Urmtorul exemplu arat cum s creezi trei butoane radio: <HTML> <BODY> <H2>Where do you want your computer to go today?</H2> <FORM> <INPUT TYPE = radio NAME=group1 VALUE=99 onClick=litterbox.value=Throw the computer in the trash. > In the trash can <BR> <INPUT TYPE = radio NAME=group1 VALUE=99 onClick=litterbox.value=Toss the computer outside. > Out the window

    <BR> <INPUT TYPE = radio NAME=group1 VALUE=99 onClick=litterbox.value=Wreck it, and then throw it away. > Smash it to pieces <BR> <INPUT TYPE = text NAME=litterbox VALUE= SIZE = 40> </FORM> </BODY> </HTML> A se observa c toate butoanele radio din exemplu precednt au acelai nume, care este group1. Astfel calculatorul se asigur c doar un buton radio poate fi selectat o dat. Deciderea de a folosi caracteristici HTML adiionale Codurile HTML de baz descrise n seciunile precedente ale acestui capitol furnizeaz elementele fundamentale pe care ai nevoie s le cunoti pentru a creea i edtia pagini Web simple. Dar versiunile noi de HTML ofer trsturi adiionale pentru creeare de tabele, afiarea de fonturi sau divizarea paginii Web n cadre. Cadrele i permit s divizezi un ecran de browser Web n dou sau mai multe pri unde fiecare parte (cadru) poate afia o pagin Web diferit sau o parte diferit a aceleiai pagini Web. Dei aceste caracteristici par folositoare i distractive, ine cont c nu funioneaz cu toate versiunile de browsere. Dac vrei s te asiguri c toi utilizatorii pot vedea pagina ta Web, rmi fidel tag-urile HTML de baz descrise n acest capitol.

    S-ar putea să vă placă și