Curs HTML

HTML (Hyper Text Markup Language )

Introducere
Ultima versiune a HTML-ului folose te unele idei i modific ri propuse pentru HTML 3, care au fost abandonate la apari ia HTML 3.2. HTML 4 propune separarea stilurilor fizice de marcarea con inutului printr-o folosire mai intens a foilor de stil. Elementul frame este acum definit oficial altundeva decât în produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru încorporarea foilor de stil. Eticheta object este de asemenea extins , astfel s includ practic orice fi ier extern care se dore te introdus într-o pagin Web. Sunt introduse etichetele ins i del, acronym, colgroup, fieldset, button. HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = ´Limbaj Standard Generalizat de Marcare´) care este un standard interna ional ce a fost aprobat în 1986 i care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale limbajului SGML sunt: 1. 2. 3. 4. Descrierea structurii documentului; Nu este descris aranjarea în pagin ; Permite fiec rui navigator s aib propria prezentare; Un document HTML poate fi reutilizabil.

Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este afiliat la Internet Engineering Task Force (IETF). W3C a enun at câteva versiuni ale specifica iei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 i, cel mai recent, HTML 4.01. Fiecare din aceste standarde este mai mult sau mai pu in suportat de c tre toate sau o parte din browsere. La ora actual HTML 4.0 este larg utilizat i au fost deja publicate specifica iile HTML 4.01. Limbajul HTML ofer proiectan ilor de pagini Web urm toarele posibilit i: 1. S publice documente cu headere, texte, tabele, liste, fotografii, etc; 2. S reg seascã on-line informa iile prin intermediul hiperlink-urilor printr-un simplu click de mouse; 3. S proiecteze formulare pentru realizarea tranzac iilor cu servere aflate la distan ã pentru c ut ri de informa ii sau pentru activit i specifice comer ului; 4. S includã foi de calcul tabelar, clipuri video, sunete i alte aplica ii direct în documente. Elementul esen ial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2 este posibilitatea separ rii structurii unui document de prezentarea lui prin introducerea ³stilurilor de documente´ (style sheet). Prin utilizarea limbajului HTML pentru structurarea unui document i style sheet-urile pentru a stiliza prezentarea acestuia, se poate ob ine mult mai u or independen a de periferic/computer/platforma hard-soft. Limbajul HTML a fost preferat pentru publica ii pe Web în primul rând datorit simplit ii sale i în al doilea rând deoarece permite formatarea textului ASCII cu tag-uri în format ASCII.

1

Curs HTML

Cap. 1: HTML DE BAZ -----------------------------------------------------------------1.1. STRUCTURA UNUI DOCUMENT HTML -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> -----------------------------------------------------------------1.2. FORMATAREA PARAGRAFELOR 1.2.1. Trecerea la linie noua Marcajul <BR>. El se poate folosi si in combinatie cu parametrul CLEAR=optiune, optiune ce forteaza trecerea la linie noua fata de marginea specificata. Valorile posibile pentru optiune sunt left, right, all. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <BR CLEAR=all> Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. <BR> Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul,viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </BR> Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> ----------------------------------------------------------------------------------------------------------------------------------1.2.2. Specificarea unui paragraf Marcajul <P>...<P/P> -----------------------------------------------------------------<HTML>
2

Curs HTML

<HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------1.2.3. Alinierea unui paragraf Marcajul <P>...<P/P> se imbogateste cu optiunea align. Optiunea align poate primi ca valoare unul din cuvintele: left, right, center. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> <P align="center">Salut!</P> <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> ----------------------------------------------------------------------------------------------------------------------------------1.2.4. Centrarea textului Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a textului. {Are acelasi efect ca marcajul <P align="center">...</P>} -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD>
3

Curs HTML

<BODY> <CENTER> Salut! </CENTER> <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------1.3. FORMATAREA FONT-URILOR -----------------------------------------------------------------Un font reprezinta un set de caractere (256) cu un aspect grafic unitar. Stiluri de afisare: ingrosat, inclinat, subliniat. Marcajul <B>...</B> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <I>...</I> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <U>...</U> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara subliniat. 1.3.1. Nivele de titlu Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al unui document; n poate lua valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 fiind cel mai mic nivel. 1.3.2. Alegerea tipului de font Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu care dorim sa fie afisat textul. <FONT face="Courier, Arial">...</FONT> 1.3.3. Alegerea dimensiunii caracterelor Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va primi ca valoare un numar incadrat intre ghilimele). <FONT face="Courier,Arial" size="4">...</FONT> 1.3.4. Alegerea culorii font-ului Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea acestei optiuni va fi numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de asemenea, de ghilimele. <FONT face="Courier,Arial" size="4" color="red">...</FONT> <FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT>

4

Curs HTML

-----------------------------------------------------------------1.4. LINII DE DELIMITARE SI COMENTARII -----------------------------------------------------------------1.4.1. Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii orizontale. Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune, ALIGH=optiune si NOSHADE. - optiunea parametrului SIZE este un numar ce stabileste grosimea liniei; - optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla respectiva; - parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept efect fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right. - optiunea COLOR stabileste culoarea riglei; - prin prezenta parametrului NOSHADE, fara nici o optiune, se dezactiveaza afisarea umbrei pentru rigla orizontala. 1.4.2. Comentarii Comentariile sunt texte incadrate intre <!-- si -->. Rolul comentariilor este de a face un document HTML mai usor de inteles prin plasarea unor expicatii din loc in loc. Ele nu vor fi afisate in cuprinsul paginii Web creata prin documentul respectiv.

TAG-uri HTML
În limbajul de marcare a hipertextului totul se rezum la structur . Un limbaj de marcare este folosit pentru a descrie care este rolul fiec rei p r i din document în raport cu celelalte. Terminologia HTML: a) atribut: furnizeaz instruc iuni adi ionale despre o etichet . Informa iile variaz de la etichet la etichet i pot include subiecte cum ar fi loca ia fi ierelor, m rimea, numele lor sau stiloul lor; b) browser: este un motor de parcurgere special care evalueaz etichetele i con inutul unui fi ier HTML, pe care îl afi eaz în concordan cu posibilit ile i regulile platformei i capacit ile sale; c) element: o component distinctiv a structurii unui document, cum ar fi titlul, un paragraf sau o list . Când ne referim la forma sa aplicat în cadrul unui document, un element se mai nume te etichet (tag); d) etichet : un cod care identific un element pentru ca browserul sau alt program de parcurgere s tie în ce mod s afi eze con inutul. Etichetele sunt încadrate de caractere de delimitare (paranteze ascu ite) Ele sunt întotdeauna cuprinse între paranteze unghiulare (<>) iar utilizarea literelor mici sau mari în scriere nu au importan . Documentele HTML sunt fi iere text (ASCII). În text sunt inserate o serie de coduri a a numitele tag-uri sau marcaje care stau la baza modurilor de afi are a documentului. Un document HTML este compus din tag-uri i text curat. Documentele au componente asem n toare cum ar fi titluri, tabele, liste, paragrafe etc. Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot con ine text, grafic sau alte elemente. Tag-urile sunt de forma ± pereche început-sfâr it:

5

..alegerea dimensiunilor paginii 6 ..Curs HTML <tag>...... Culori.. Chiar dac nu sunt special delimitate. HTML presupune existen a lor...alegerea culorii textului i ......... Prima identific versiunea de HTML folosit pentru pagina respectiv i regulile pe care acestea le respect ....alegerea culorii de fond ...</tag> con inut arbitrar tagul de început Scrierea perechilor de leg turi: CORECT tagul de sfâr it care are caracterul slash (/ ) INCORECT CORECT <tag1> <tag2> <tag1> <tag2> </tag2> </tag1> </tag1> </tag2> Tag-uri din cadrul documentului HTML Fiecare document HTML. HTML ofer de asemenea ansa de a ad uga i alte componente func ionale paginii.. Documentul HTML se indic prin tag-ul HTML <HTML>..</HTML> Vom prezenta numai o parte din tag-urile HTML.. A doua etichet identific un limbaj global i direc ia textului pentru documentul respectiv.... în plus marcheaz începutul i sfâr itul con inutului HTML... Se considera ca limbajul HTML este stapinit de catre student.... dou etichete exist în afara structurii documentului: doctype i html. avindu-se in vedere ca au absolvit cursul de Tehnici multimedia... care sunt importante in realizarea unui design atragator. fonturi..... scripturilor i seturilor de cadre....... margini O pagin Web poate fi setat prin: ... sub forma foilor de stil... înc de la creare are dou p r i principale: un antet i un corp.. De i fac parte din definirea unui document HTML.

navy.g sau b sunt cifre hexazecimale i pot lua valorile din multime {0.Curs HTML Culoarea de fond Culoarea se obtine din amestecul a celor trei culori fundamentale: ro u. silver. 2. b. Exemplu a unei pagini Web cu fondul de culoare ³cyan´: Culoarea textului Definirea culorii textului pentru o pagini Web se face prin intermediul atributului text al etichetei <body> Sintaxei: <body text = culoare>. aqua. black. 8. B.2«255} Culoare pentru tag-ul body Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichete <body>. fuchsia. e. unde culoare se stabile te dup modelul precizat mai sus.b). A. Culoarea de fond a unei pagini Web se specific utilizand : y nume de culoare. unde culoare se precizeaz la fel ca la exemplul precedent. f. D. 5. 3. 9. blue. c. 1. 7. unde r. E.g si b iau valori din multimea numerelor naturale {0. maroon. teal. 4.g. Pagina de Web urm toare are textul de culoare ro ie: 7 . verde i albastru. 6. F}.astfel se pot defini 65536 de culori. y functia rgb(r. Sintaxa: <body bgcolor = culoare>. d. gray. olive. green. a. Astfel sunt disponibile cel pu in 16 nume de culori. white i yellow.1. C. y secventa hexazecimala ³#rrggbb´ unde r. lime. astfel avem urmatoarele nume: red. purple.

O eticheta cu trei attribute are urmatoarea sintaxa: Sintaxa: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3> Exemplu: Pagin Web cu textul de culoare albastr i fondul de culoare galben : Textul de baz (basefont) Atributele textului de baza dintr-o pagina Web sunt:  M rime (size)  Culoare (color)  Font (style) 8 .Curs HTML Atribute multiple O eticheta poate sa aiba mai multe atribute.

6. În cazul în care eticheta <basefont> lipse te . care indica distan a dintre continutul ferestrei si fereastra browserului. ³sans serif´. ³Helvetica´. distanta m surat în pixeli  un procent. textul din pagina Web are atributele prestabilite si anume: size=3. ce reprezinta procent din l imea. respectiv. ³Arial´ } Semantica: Eticheta (Tag-ul) basefont este valabil pân la sfâr itul paginii sau pân apare urm toarea etichet <basefont>. ´Times New Roman´. 2. ´cursive´. 7 } (valoarea 1 fiind pentru fontul cel mai mic si valoarea 7 ± pentru fontul cel mai mare) culoare se precizeaz prin nume sau prin RGB font poate fi un font generic din multimea {Äserif´. 3. ´fantasy´. ´monospace´.Curs HTML Sintaxa: <basefont size = num r color = culoare style = font> unde: num r poate lua una dintre valorile din multimea {1. 5. color=´black´ style=´Times New Roman´ Marginile paginii Web Se face cu ajutorul a dou atribute ale etichetei <body>:  leftmargin ± distan a dintre marginea din stânga a ferestrei browserului i marginea din stânga a con inutului paginii  topmargin ± distan a dintre marginea de sus a ferestrei browserului i marginea de sus a con inutului paginii Valorile care se pot atribuii celor doua atribute sunt :  numere întregi pozitiv. 4. în l imea ferestrei browserului 9 .

10 . Caractere: îngro ate (tag-ul b).Curs HTML Stilurile blocurilor de text Stiluri fizice Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web. Un bloc de text inclus între etichetele <i> text </i> este scris cu caractere cursive. cursive (tag-ul i) Un bloc de text apare îngro at în pagin dac este inclus între <b> text </b> .

Un text inclus între etichetele <small> text </small> este scris cu caractere mai mici cu o unitate decât dimensiunea curente. 11 .Curs HTML Caractere: m rite (tag-ul big). micsorate( tag-ul small). Un text inclus între etichetele <big> text </big> este scris cu caractere mai mari cu o unitate decât dimensiunea curenta.

Eticheta <strike> si </strike> sau <s> si </s> insereaz un bloc de caractere sec ionate la mijloc cu o linie orizontal . 12 . Secven ele de text aliniate ca indice superior (super-script) sunt incluse între etichetele <sup> i </sup>.Curs HTML Caractere:Äindice superior´ i Ä indice inferior´ Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele <sub> i </sub>. Caractere: subliniate i sec ionate Eticheta de tip bloc <u> text </u> insereaz un bloc de caractere subliniate.

Curs HTML Stiluri logice Stilurile logice sunt bazate pe cele fizice. Modul lor de ac iune depinde de browserul utilizat. Blocuri de caractere eviden iate Urm toarele dou etichete pun în eviden prin stilul cursiv fragmente de text: <cite> text </cite> (³cite´ = citat) <em> text </em> (³emphasize´ = a eviden ia) Aceste dou etichete sunt echivalente cu eticheta <i> «</i>. 13 .

se stabile te cu atributul ³face´ m rimea .se define te cu atributul ³weight´ Culoarea fontului Pentru a scrie un text cu o anumita culoare se încadreaz acest text între delimitatorii <font> text</font> în felul urm tor: Sintaxa: <font color = culoare>text de culoarea specificat </font> 14 .se stabile te cu atributul ³color´ tipul sau stilul .Curs HTML Blocuri de caractere monospa iate Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospa iate de tipul celor utilizate de o ma in de scris.se stabile te cu ³size´ m rimea în puncte tipografice (este stabilit prin atributul Äpoint-size´) grosimea . <code> text </code> (³code´ = cod sau surs ) <kbd> text </kbd> (³keyboard´ = tastatur ) <tt> text </tt> (³teletype´ = teleprinter) Configurarea fonturilor Un font are urm toarele atribute:      culoarea .

Fonturile pot fi separate prin virgul . Cele cinci familii generice de fonturi sunt:  serif  sans serif  cursive  monospace  fanatasy Pot fi utilizate si alte fonduri specifice cum ar fi:  Times (tip particular de font serif)  Helvetica (tip particular de font sans serif)  Arial  Courier (tip particular de font monospace)  Western (tip particular de font fantasy) . monospace´>. Browserul va utilize primul font pe care il recunoaste. Exemplu: <font face=´Arial.Curs HTML Familia fontului Tipul de font se stabileste prin atributul ³face´ al etichetei <font>. 15 . etc. serif.

+2. +3. O alt metod de stabilire a m rimii unui font este prin utilizarea atributului Äpoint-size´ al etichetei <font> i reprezint m rimea fontului în puncte tipografice.Curs HTML M rimea fontului Marimea fontului se indica cu atributul ³size´ al etichetei <font>. 2. 16 .. pentru a mic ora dimensiunea fontului cu -1. +2.  -1. Atributul ³point ± size´ func ioneaz numai cu Netscape Comunicator. 7= cel mai mare font). etc. -2. etc. 5. 4. fata de dimensiunea curenta. 6. Acest atribut poate lua ca si valori orice numar natural pozitiv. -2 « fata de dimensiunea curenta. 7 (1= cel mai mic font.  +1. Acest atribut poate lua urm toarele valori:  1.. pentru a m ri dimensiunea fontului cu +1. -3. 3.

17 . 200. 300. 500. Valorile pe care le poate lua atributul weight sunt: 100. 900 ± fontul cel mai gros) . Blocuri de texte a) Inserarea unei adrese Inserarea unei adrese se face cu ajutorul etichetei <address> « </address>. 700. b) Indentarea unui bloc de text Un bloc de text indentat este un bloc de text la care marginea din stânga a textului este deplasat la o anumit distan de marginea paginii. 400. 800 i 900 (100 ± fontul cel mai sub ire. 600.Curs HTML Grosimea unui font Grosimea poate fi definit cu cu atributul ³weight´ al etichetei <font>. Textul este afi at cu caractere cursive.

Curs HTML Blocuri <div> Delimitarea i formatarea unui bloc de text se face cu delimitatorii <div> text</div>. Blocul <div> are urmatoarele atribute :  ³align´ (aliniere). Valorile atributului ³align´ sunt:  ³left´ ± aliniere la stânga  ³center´ ± aliniere central  ³right´ ± aliniere la dreapta 18 .

Blocul preformatat Etichetele <pre> « </pre> permit pastrarea caracteristicilor textului asa cum a fost introdus in fisier. pentru a putea fi luat în considerare trebuie precizat prin Ä&nbsp´... </pre> poate fi folosit pentru a insera randuri vide. ³center´ sau ³right´ 19 . Blocuri paragraf (tag-ul <p>) Trecerea la o linie noua se face cu eticheta <br>. Blocul <pre> . ³tab´ i ³CR/LF´ (enter la sfarsit de linie). dar eticheta <p> permite:  inserarea unui spa iu suplimentar inainte de blocul paragraf. Atributul ³align´ are efect asupra tuturor subblocurilor incluse in blocul <div>. deci ia in considerare caracterele ³spa iu´.Curs HTML Blocul <div>text </div> are posibilitatea sa includa si alte subblocuri. cu valorile ³left´. Caracterul spatiu..  ³nowrap´ care permite intreruperea randurilor acolo unde este precizat acest lucru.  alinierea textului cu ajutorul atributului ³align´.  inserarea unui spa iu suplimentar dupa blocul paragraph. (br de la break=pauz ). La fel si eticheta <p> face trecerea la o linie nou .

4.5.6} Exemplu: <h3>«(bloc de text)«</h3> Se accept atributul align de c tre aceste etichete pentru alinierea titlului blocului de text la stânga (modul prestabilit). Ele pot fi introduce cu tagul <hx> text </hx> unde x poate lua valori din multimea {1.3. în centru i la dreapta. Tag-ul <h6> folose te caracterele cele mai mici.2. 20 . Tag-ul <h1> scrie titlul cu caracterele cele mai mari i cele mai îngro ate. Linii orizontale Se pot insera linii orizontale intr-o pagina web cu ajutorul etichetei <hr>.Curs HTML Blocuri de titlu Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni.

 Änoshade´ ± define te o linie f r umbr . Imagini GIF si JPG Formele grafice permise de HTML sunt: GIF(imagini. ³center´.2. în pixeli.256 culori) i JPG (imagini. Valori posibile: ³left´. Valori posibile: y numere întregi pozitive care reprezint lungimea liniei.Curs HTML Configurarea unei linii orizontale Atribute ale etichetei <hr> sunt:  ³align´ .ÎMBUN T IREA PAGINII WEB CU IMAGINI.permite alinierea. Valorile posibile sunt numere întregi pozitive reprezentând grosimea liniei în pixeli (valoarea prestabilit este ³2´).permite alegerea lungimii liniei.1. milioane de culori).  ³size´ ± permite alegerea grosimii liniei. reprezint procentul din l imea paginii pe care se întinde linia. LISTE I TABELE 2. 2.  ³width´ . Inserarea imaginilor Marcajul <IMG SRC=nume_imagine> 21 .  ³color´ ± permite definirea culorii liniei Cap 2 . y numere între 1 i 100 urmate de semnul %. ³right´.

</OL> Ex. Liste in pagini Web y Liste Ordonate (elementele sunt automat numerotate). Nr.html) <OL> <LI>element 1 <LI>element 2 <LI>element 3 22 Efect 1.html) <HTML> <HEAD> <TITLE> Includerea unei imagini </TITLE> </HEAD> <BODY> <HR SIZE=30 color=RED> <IMG SRC=C:\catel.ro 2.jpg> <H1><CENTER> Salut!</CENTER></H1> <CENTER><FONT face="Courier.Curs HTML Exemplu (PISICA.ro</I><HR COLOR=red> </BODY> </HTML> Efect Salut! Ma numesc Motanel! pisica@k.jpg></CENTER> <HR SIZE=30 color=RED> <I>pisica@k. element 1 2.3. Arial" color="RED" size="6"><P> Ma numesc Motanel!</P></FONT></CENTER> <CENTER><IMG SRC=C:\pisica. Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>.1 (LO1. element 3 .. element 2 3.

Ex. <LI VALUE=10>element 2 <LI VALUE=20>element 3 XX. element 2 C. Nr.1 (UL1. Nr. element 3 Efect III.. Nr.html) <UL> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Ex.html) <OL TYPE=A> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex.2 (LO2.2 (UL2.</UL>. circle i square.html) <UL TYPE=circle> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Efect y y y element 1 element 2 element 3 Efect o o o element 1 element 2 element 3 {Schimbarea simbulului care preced elementele din lista se poate face utilizand parametrul TYPE al marcajului <UL>.html) Efect A.4 (LO4.3 (LO3. caruia i se pot asocia una dintre urmatoarele valori> disc. </OL> III. V. Nr.</DL> utilizat impreuna cu marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa. Declararea unei liste ordonate se face cu ajutorul marcajului <DL>. Exemplu (DL.html) <DL> <DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate prin caractere mai 23 .. IV.Curs HTML </OL> Ex.html) <OL TYPE=I START=3> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex.. Declararea unei liste neordonate se face cu ajutorul marcajului: <UL>. element 1 B.} y Liste de Definitii de termeni si definitiile lor asociate. element 1 element 2 element 3 Efect element 1 element 2 element 3 element 4 <OL TYPE=I START=3> <LI>element 1 X.</UL>. Nr. <LI>element 4 XXI. y Liste Neordonate ± sau liste marcate (elementele sunt marcate printr-un semn special).

Curs HTML ingrosate. <P><LI><H3>Preocupari actuale</H3> Saptamana viitoare trebuie s prezint la ora de engleza un referat cu urmatoarele caracteristici> <UL> <LI>Tema.html) <HTML> <HEAD> <TITLE>Liste in pagini Web</TITLE> </HEAD> <BODY> <HR SIZE=30 COLOR=RED> <IMG SRC=c:\Alina. Internetul in viata omului viitorului 24 . Font Utilizarea particulara a unui anumit stil de caractere. in special."Internet viitorul omenirii?" <LI>Continutul:-implicatiile pe care le are informatica si. <DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere. În proiectarea unei pagini Web trebuie avut în vedere urm torul lucru foarte important: informa ia con inut în pagin s fie structurat astfel încât s poat fi u or de urm rit i de g sit. În acest sens combinarea celor trei tipuri de liste este foarte util . <DT>Prenume:<DD>Alina <DT>Data nasterii:<DD>18_01_1987 <DT>Profesia:<DD>Eleva anul II la Colegiu Andrei Saguna Brasov </DL> <LI><H3>Stare emotionala</H3> Acum este tarziu. <DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet.jpg allign=right> <H1><CENTER>Salut!</CENTER></H1> <HR WIDTH=50%> <UL> <LI><H3>Date personale</H3> <DL> <DT>Nume:<DD>Voilean. dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet. Liste in liste ± liste imbricate y Listele pot fi con inute una într-alta. Date Flux nesfarsit de materiale care apar pe Internet. Exemplu (Liste_imbricate. </DL> Efect Aldine Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate. Documentul va fi salvat sub numele Agenda.html în directorul Elev al directorului r d cin . Exerci iu: Construi i o pagin Web în care s redacta i propria agend telefonic utilizând listele de defini ii.

Internetul in viata omului viitorului o Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie y Sugestii Daca tu. <P> </UL> <HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P> <I>alina@k. y Preocupari actuale Saptamana viitoare trebuie sa prezint la ora de engleza un referac cu urmatoarele caracteristici> o o Tema. m-ai putea ajuta cu cateva sugestii in realizarea 25 .Curs HTML <LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie </UL> <LI><H3>Sugestii</H3> Daca tu. dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet.ro</I><HR COLOR=RED> </BODY> </HTML> Efect Salut! y Date personale Nume: Popescu Prenume: Alina Data nasterii: 18_01_1987 Profesia: Eleva anul I la Colegiul din Brasov y Stare emotionala Acum este tarziu. draga prietene de pe Internet. m-ai putea ajuta cu cateva sugeestii in realizarea acestui referat ti-as ramane indatorata."Internet viitorul omenirii?" Continutul:-implicatiile pe care le are informatica si. in special. draga prietene de pe Internet.

în pixeli sau în procente).Inserarea tabelelor Marcajul pentru definirea unui tabel este: <TABLE>..</TH> pentru definirea antetului tabelului. Alina alina@k. <TD>. în pixeli sau în procente).</TD> pentru definirea datei unei cellule a tabelului.Curs HTML acestui referat ti-as ramane indatorata.pixeli). Nr. Center. Parametrii marcajului <TABLE>  BORDER=n ± permite definirea zonei umbrite din jurul tabelului (n. Ex.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> 26 Efect Nume Prenume Media Petcu Ionut 8. întreg). nr. nr.  BORDER COLOR=cod_culoare ± permite definirea culori zonei umbrite. Parametrii marcajului <TD>  COLSPAN=n ± permite unei celule s se extind pe mai multe coloane. Right.  CELLPADDING=n .  BACKGROUND=fisier_imagine permite specificarea unei imagini grafice de fond în interiorul unei cellule.  HEIGHT=n permite definirea în l imii dorite a tabelului (n.  ROWSPAN=n ± permite unei celule s se extind pe mai multe rînduri..  ALIGN=pozitie ± specific alinierea orizontal a datei din celul . întreg pixeli). 1 (Tabel1. nr.</TABLE> iar în interiorul acestui marcaj se utilizeaz marcajele: <TR>. Op iunile posibile sunt: Left.  WIDTH=n ± permite definirea l imii dorite a tabelului (n.</TR> pentru definirea unei linii a tabelului..  GBCOLOR=culoare ±permite definirea culorii de fond a unei celule.define te spa iul l sat dintre data din celul i chenarul celulei (n.ro 2. <TH>.  CELLSPACING=n ± define te spa iul l sat între celule (n.20 . întreg ..

20</TD> </TABLE> </BODY> </HTML> Efect Candidat Nume Prenume Media Petcu 27 Ionut 8.20 .20</TD> </TABLE> </BODY> </HTML> Ex. Nr. 3 (Tabel3.20</TD> </TABLE> </BODY> </HTML> Ex.Curs HTML <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8. Nr. 2 (Tabel2.html) Efect Nume Prenume Media Petcu Ionut 8.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE BORDER COLOR=RED> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20 <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE BORDER HEIGHT=100 WIDTH=100> <TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH> <TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.

Curs HTML Cateva exemple de creare a unor tabele:  Un tabel fara chenar  Un tabel cu chenar 28 .

Curs HTML Alinierea tabelului in pagina de Web 29 .

se vor lua in considerare in ordinea : <td>.Curs HTML Precizarea culorilor de fond pentru un tabel Culoarea de fond se stabileste cu atributul ³bgcolor´. <tr>. Tag-ul <table> are prioritatea cea mai mica. Culoarea de fond poate fi ata at unei celule de tabel prin eticheta <td>. Culoarea de fond poate fi ata at întregului tabel prin eticheta <table>. Atentie: Daca avem definite mai multe atribute bgcolor. <table>. Culoarea de fond poate fi ata at unei linii de tabel prin eticheta <tr>. Culoarea textului din fiecare celula se indica in tag-ul < font > text </font> <font color=´valoare´>«</font> 30 .

Valorile lui Äcellpadding´ pot fi numere întregi pozitive.Curs HTML Dimensionarea celulelor unui tabel Distan a dintre dou celule vecine se define te cu ajutorul atributului ³cellspacing´ al etichetei Ätable´. inclusiv 0. Valoarea prestabilit este 2. Valoarea prestabilit este 1. Valorile lui Äcellspacing´ pot fi numere întregi pozitive. Distan a dintre marginea unei celule i con inutul ei se definie te cu atributul ³cellpadding´ al etichetei <table>. 31 .

Aceste atribute pot lua valorile: numere intregi pozitive. respectiv în l imea. ³height´ ale etichetei <table>. total a paginii. reprezint l imea. 32 .Curs HTML Dimensionarea unui tabel Dimensiunile unui tabel ± l imea i în l imea ± se stabilesc cu atributele ³width´. urmate de semnul %. respectiv în l imea în pixeli a tabelului. numere întregi între 1 i 100. reprezint o frac iune din l imea.

REFERIN E ÎN PAGINI WEB 3. acesta trebuie s con in parametrul HREF=valoare. Referin e externe 3. 3. Link-uri i imagini Principala caracteristic a hipertextelor o constituie leg turile (links).Curs HTML Exerci iu: Construi i o pagin Web de prezentare a ora ului în care locui i.1. Documentul va fi salvat sub numele Oras. resurs care poate fi accesat din fereastra browser ± ului printr-un singur clic. prin utilizarea parametrului name al marcajului <A>«</A>: 33 .1. în cadrul documentului HTML.html în directorul Elev al directorului r d cin . Locurile în care dorim s se fac deplasarea se numesc intele salturilor interne din paginile Web sau ancore cu nume i sunt specificate. Un links este o conexiune c tre alt resurs Web. CAP. Referin e interne 3.3. Folosi i pentru antetul tabelului o culoare de fundal pastelat. Însera i imagini cu monumente semnificative ale ora ului. f r de care nu are nici un sens. Referin e interne S presupunem c dorim s ad ug m un cuprins unei pagini Web de dimensiune mare pentru a permite utilizatorului s se deplaseze într-un anumit loc din aceea i pagin .ancor ). Structura i pagina utilizând un tabel f r chenar.3. Link-urile pot fi de dou tipuri: interne i externe.2. Marcajul principal atât pentru referin ele interne cât i pentru cele externe este: <A>«</A> (anchor.

: <A nume="baza">Baza material </A> Unde valoarea parametrului name poate fi orice secven de caractere. Bostan Mihaela</I></h2> <Font color="green" size="5"> <P><a href=#jos name=sus>Du-te jos</a> <P><A HREF="#baza">Baza materiala</A> <P><A HREF="#profile"> Profile</A> <P><A HREF="#profesori"> Profesori</A> <P><A HREF="#elevi"> Elevi</A> <A NUME="baza"><h2>BAZA MATERIALA</h2></A> <br>27 sali de clasa <br>14 laboratoare si sali specializate <br>un atelier scoala <br>o biblioteca <br>laboratoare de informatica cu retea de calculatoare si acces la Internet <br>cabinet metodic de perfectionare <br>dispensar medical scolar <br>cabinet stomatologic scolar <br>un bazin de inot in constructie <br>baza sportiva proprie <br>o cantina <br>un camin <br><a name=jos href=#sus>Du-te sus</a> <A NAME="profile"><h2>PROFILE</h2> <br>Profil Pedagogic <br>Invatatori-Educatoare <br>Profil Bibliotecar si Pedagog scolar <br>Bibliotecar documentarist <br>Instructor animator <br>Pedagog scolar <br>Profil Matematica-Informatica <br>Profil Stiinte ale naturii 34 .gif" text="steelblue"> <h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1> <h2><I>Prof. ing.Curs HTML <A name=valoare>Mesaj</A> Ex. Ad ugarea leg turilor c tre inte din cadrul paginii Web Corespondentul unei ancore cu nume care define te saltul c tre aceast int este: <A HREF=#NumeAncor CuNume>Mesaj</A> <A HREF="#baza">Baza materiala</A> Exemplu care ilustreaz cum ar ar ta un set de ancore cu nume într-un document HTML destinat s afi eze o pagin Web a unei coli. <html> <body background="C:\Documents and Settings\andye\My Documents\My Pictures\404. numere sau semen de punctua ie.

Arsinte <br>6C-Dir.: Prof. iar valoarea acestui atribut este adresa URL a imaginii. etc. Mirzac <br> « <br><a name=jos href=#sus>Du-te sus</a> </body> </html> Imagini Formatele acceptate de browsere pentru fi ierele de imagini sunt: GIF (Graphics Interchange Format) ± extensia .jpg  BMP (BitMap) cu extensia .gif JPEG (Joint Photographic Experts Group) cu extensia . Dac se dore te ad ugarea unui chenar în jurul imaginii se folose te atributul border al etichetei <img> care poate lua valori numere întregi pozitive. Inserarea într-o pagin Web a unei imagine se face utilizand eticheta <img> cu atributul ³src´.: Prof. Cuciureanu <br>6B-Dir. reprezint procente din l imea..jpeg sau . Dimensiunile unei imagini pot fi modificate prin intermediul atributelor ³width´ i ³height´ ale etichetei <img>.: Prof..: Prof.: Prof. Mocanu <br>5C-Dir. respectiv din în l imea blocului în care se afl imaginea. Escu <br>7B-Dir. Acestea pot avea ca si valori :  numere întregi positive ce reprezint num rul de pixeli  numere de la 1 la 100 urmate de %. Costea <br>7C-Dir. Negrea <br>5B-Dir.: Prof.: Prof. Vintila <br>6A-Dir.: Prof. <br> <br><a name=jos href=#sus>Du-te sus</a> <A NAME="elevi"><h2>ELEVI</h2> <br>5A-Dir.bmp (este întâlnit numai cu browserul Internet Explorer.   35 . Bibire <br>7A-Dir.Curs HTML <br>Profil Filologie <br><a name=jos href=#sus>Du-te sus</a> <A NAME="profesori"><h2>PROFESORI</h2> <br>Gorbanescu <br>Stoica <br>Negrea <br> . Precizarea dimensiunilor spa iului ocupat de o imagine duce la la cre terea vitezei de înc rcare a paginii.: Prof.

Curs HTML Alinierea unei imagini în pagina Web Alinierea se face prin intermediul atributului ³align´ al etichetei <img>.Partea de sus a imaginii se aliniaz cu partea de sus a textului ce precede imaginea. care ia valorile:  ³left´ ± aliniere la stânga  ³right´ ± aliniere la dreapta  ³top´ ± aliniere deasupra .  ³middle´ ± aliniere la mijloc  ³bottom´ sau ³baseline´ ± aliniere la baz Alinierea textului în jurul unei imagini Se face cu atributele ³hspace´ i ³vspace´ ale etichetei <img> care precizeaz distan a în pixeli pe orizontal i pe vertical . dintre imagine si elementele din pagin . 36 .

37 .Curs HTML Imaginea pentru fondul unei pagini Web Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului ³background´ al etichetei <body> care ia ca valoare adresa URL a imaginii.

 Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMSET> se define te spa iul din cadrul ferestrei browser-ului. Bazele organiz rii cadrelor  Fiecare pagin afi at într-un cadru se specific utilizând marcajul <FRAME> ce este inserat în marcajul <FRAMSET>.4. CADRE Cadrele (frames) sunt sec iuni ce ofer posibilitatea de a vizualiza simultan în fereastra browserului mai multe pagini Web.Curs HTML Imagini ca legaturi Imaginea trebuie sa apara ca element de legatura in cadrul tagulul <a> imagine </a> Cap. 38 . alocat fiec rei pagini Web în parte.

50. procentul se refer la cât la sut din fereastra browser-ului este alocat fiec rei pagini Web în parte.html <HTML> <FRAMESET COLS="80.*"> <FRAME SRC ="unu. 4.2. *"> <FRAME SRC ="unu.html"> <FRAME SRC ="trei. Cadre orizontale Exemplul1: Împ r irea browser-ului în dou sec iuni orizontale.html"> </FRAMESET> </HTML> Exemplul2: Împ r irea browser-ului în trei sec iuni orizontale.50.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="doi.*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="doi.Curs HTML  Definirea spa iului alocat fiec rei pagini Web se poate face în pixeli sau în procente. Cadre4. Cadre3.html"> </FRAMESET> </HTML> 4. <HTML> <FRAMESET COLS="80%.1.html <HTML> <FRAMESET COLS="80. Cadre2.70%*"> <FRAME SRC="unu. Cadre verticale Exemplul1: Împ r irea browser-ului în dou sec iuni verticale.html"> </FRAMESET> </HTML> Exemplul2: Împ r irea browser-ului în trei sec iuni verticale.html"> </FRAMESET> </HTML> 4. *"> <FRAME SRC ="unu. Cadre1. Cadre în cadre Exemplul1: Putem afi a în aceea i fereastr a browser-ului simultan atât cadre orizontale cât i cadre verticale.html"> <FRAME SRC ="trei.html <HTML> <FRAMESET ROWS="80.html"> <FRAME SRC ="doi.html <HTML> <FRAMESET ROWS="80.3.*"> <FRAMESET ROWS="30%.html"> </FRAMESET> 39 .

html"> </FRAMESET> </FRAMESET> </HTML> Exemplul2: Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al marcajului <FRAME>.html .html <HTML> <FRAMESET COLS="30%.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLACK"TEXT=#FFFFFF"> <H1><CENTER>PAGINA NEAGRA</CENTER></H1> </BODY> </HTML> Documentul verde.html"> <FRAME SRC ="galben.*"> <FRAME SRC ="NEGRU.33%.*"> <FRAME SRC ="ROSU.*"> <FRAME SRC ="rosu.html"> <FRAME SRC ="ALB.html"> <FRAMESET ROWS="30%.html" NAME=REFER> </FRAMESET> </FRAMESET> </HTML> <HTML> <HEAD> </HEAD> <BODY BGCOLOR="RED"TEXT="#FFFFFF"> <A HREF="VERDE.html 40 Documentul negru.html Documentul rosu. Documentul prima.Curs HTML <FRAMESET ROWS="33%.html"TARGET=REFER>Referire catre pagina Web albastra</A> </BODY> </HTML> <HTML> <HEAD> </HEAD> <BODY BGCOLOR="WHITE"TEXT=#000000"> <H1><CENTER>PAGINA ALBA</CENTER></H1> </BODY> </HTML> Documentul alb.html"> <FRAME SRC ="verde.html" TARGET=REFER>Referire catre pagina Web verde</A> <BR> <A HREF="ALBASTRU.

html. Atributele pentru aceasta sunt: NAME ± define te numele câmpului. 2. albastru. Formularele HTML v ofer posibilitatea de a aduna informa ii sau impresii de la cei care v viziteaz pagina Web. Ce constata i? Cap. FORMULARE Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide Web (WWW). alb.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLUE"TEXT=#000000"> <H1><CENTER>PAGINA ALBASTRA</CENTER></H1> </BODY> </HTML> Exercitii: 1. Vizita i pe rând referin ele: ÄReferire c tre pagina Web verde´ i ÄReferire c tre pagina Web albastr ´. verde.html´ <HTML> <FORM> <TEXTAREA NAME="Comentariu" ROWS=5 COLS=40> </TEXTAREA> </FORM> </HTML> 2. 3.html. 41 .Curs HTML <HTML> <HEAD> </HEAD> <BODY BGCOLOR="GREEN"TEXT=#000000"> <H1><CENTER>PAGINA VERDE</CENTER></H1> </BODY> </HTML> Documentul albastru. <SELECT> . Atributele pentru aceasta sunt: NAME ± define te numele câmpului. <TEXTAREA> -define te un câmp în care utilizatorul poate introduce un text pe mai multe linii.html) creând paginile Web corespunz toare. Acesta are trei componente principale: <TEXTAREA>. Vizualiza i pagina Web prima. COLS ± stabile te num rul de coloane din câmp.html.html.html. rosu. ROWS ± stabile te num rul de linii de câmp. Pentru a prelucra datele dintr-un formular. Scrie i codurile HTML anterioare (prima. 5. 1.ofer utilizatorului posibilitatea de a alege dintr-o list de op iuni.html. Exemplul1: Fi ierul ÄForm1. <SELECT> i <INPUT>. ave i nevoie de un script. negru.

c su e de bifare i butoane de trimitere sau de anulare a informa iilor din formulare. CHECKED ± activeay un buton radio sau o c su de bifare. MULTIPLE ± permite selectarea mai multor op iuni în acela i timp. Max. VALUE ± define te pentru un câmp de text.este un câmp pentru o singur op iune ce permite colectarea de informa ii. textul implicit ce va fi afi at. Exemplul2: Fi ierul ÄForm2.html´ <HTML> Alegeti o optiune din lista <FORM> <SELECT NAME="Optiuni"> <OPTION SELECTED VALUE="Optiune1">Optiune1 <OPTION VALUE="Optiune2">Optiune2 <OPTION VALUE="Optiune3">Optiune3 </SELECTED> </FORM> </HTML> 3.html´ <HTML> <FORM> <INPUT TYPE="checkbox" NAME=""checkbox1" VALUE="Optiune1">Optiune1 <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="Optiune2" CHECKED>Optiune2 </FORM> </HTML> Exemplul5 ± pentru butoane radio: Fi ierul ÄForm5.html´ <HTML> <FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> </FORM> </HTML> Exemplul4 ± pentru c su a de bifare : Fi ierul ÄForm4. SIYE ± dimensiunea câmpului specificat în num r de caractere text. <INPUT> . MAXLENGHT ± specific nr. Valorile pentru aceast etichet sunt: VALUE ± reprezint valoare ce este atribuit op iunii i care apoi este trimis c tre script.Curs HTML SIZE ± stabile te câte op iuni sunt afi ate în acela i timp. De caractere ce pot fi citite pentru un câmp de text. butoane radio. SELECTED ± stabile te o op iune ca fiind implicit . incluzând câmpuri simple de text.html´ <HTML> 42 . Op inile sunt delimitate de marcajele <SELECT> i </SELECT> i sunt listate în cadrul etichetei <OPTION>. Atributele pentru aceasta sunt: NAME ± define te numele câmpului.pentru un câmp simplu de text: Fi ierul ÄForm3. TYPE ± define te tipul câmpului de intrare. Exemplul3 .

Curs HTML <FORM> Intrebarea 1: Va placut pana acum? <br> <INPUT TYPE="radio" NAME=choice" VALUE"Optiune1">Da <INPUT TYPE="radio" NAME=choice" VALUE"Optiune2">Nu </FORM> </HTML> Exemplul6 ± pentru butoane de trimitere i anulare: Fi ierul ÄForm6.ro <P> <INPUT TYPE="checkbox" NAME="secret" VALUE="da"> Nu vreau sa faceti publica adresa mea.ro METHOD=POST ENCTYPE="text/plain"> Adresa dumneavoastra de e-mail: <INPUT TYPE="text" NAME="E-mail" VALUE=login@provider.html.html´ <HTML> <FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> <br><br> <INPUT TYPE="Submit" VALUE="Trimite"> <INPUT TYPE="Reset" VALUE="Anuleaza"> </FORM> </HTML> Exerci iu: 1. care s con in un formular pentru sugestiile i întreb rile vizitatorilor site-ului din care va face parte pagina respectiv . Programul pentru Formularul pe WEB: Äsondaj. Crea i o pagin Web numit Formular. <P> Cum va conectati la Internet? <BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="modem" CHECKED>Modem <BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="RNIS">RNIS<BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="LS">legatura specificata<BR><P> Unde va aflati? <SELECT NAME="Regiune"> <OPTION VALUE="Romania SELECTED">Romania <OPTION VALUE="SUA">SUA 43 .html´ <HTML> <HEAD> <TITLE>Sondaj</TITLE> </HEAD> <BODY> <H1>SONDAJ</H1> Multumim pentru timpul alocat raspunsului la urmatoarele intrebari: <FORM ACTION="mailto:eu@provaiderul meu.

Curs HTML <OPTION VALUE="Europa">Europa <OPTION VALUE="Restul lumii">Restul lumii </SELECT> <P> Ce cautati prin pagina mea de web?<BR> <SELECT NAME="Interes" SIZE=4MULTIPLE> <OPTION VALUE="Informatii">Informatii <OPTION VALUE="Sport">Sport <OPTION VALUE="Divertisment">Divertisment <OPTION VALUE="Cultura">Cultura <OPTION VALUE="Slujba">Slujba </SELECT> <P> Aveti vreo observatie de facut?<BR> <TEXTAREA NAME="Comentarii" COLS=40 ROWS=4 WRAP=physical> </TEXTAREA> <P> <INPUT TYPE="submit" VALUE="Trimite"> <INPUT TYPE="reset" VALUE="Initializare"> </FORM> </BODY> </HTML> 44 .

Are 2 atribute importante : name si size. unde: name numele listei de selectie size este un numar intreg pozitiv. precizeaza cate elemente din lista sunt vizibile la un moment dat <option > este tag-ul care include elementele listei. 45 . Server-ul primeste perechea Continutul din value si valoarea dupa option selected permite selectarea prestabilita a unui element al listei Lista de selectie cu selectii multiple Are aceiasi sintaxa cu lista de selectie descrisa mai sus. <option value = valoare_3> Element_3 </select>. Sintaxa: <select name = nume size = numar> <option value = valoare_1 selected> Element_1 <option value = valoare_2 > Element_2. </select> O lista de selectie permite alegerea unuia sau mai multor elemente dintr-o lista finita. dar in plus are atributul multiple in tag-ul select. Elementele dintr-o lista se introduc cu tag-ul <option>.Curs HTML Liste de selectie <select> <option >«.

46 . y wrap care determina comportamentul campului de editare fata de sfarsitul de linie. soft. Atributul poate lua valorile: off. hard. y name (permite atasarea unui nume)..Curs HTML Campuri de editare multiple Se fac cu tag-ul <textarea > Sintaxa: <textarea liste de atribute> text </textarea> Din lista de atribute enumeram: y cols (nr de caractere afisate intr-o linie). y rows (nr de linii afisate simultan).

In acest caz imaginea se insereaza in documentul HTML intre etichetele <a> si </a>. 47 . mascat cu "*" submit Activare (pentru a transmite informa iile completate de utilizator) reset Activare (pentru a restabili valorile ini iale ale tuturor controalelor formularului) checkbox Bifare radio Bifare textarea Introducere a unui volum mare de text menu Alegere a unei op iuni dintr-un meniu TAG Input Input Input Input Input Input Textarea Select option Harti de imagini O imagine poate fi folosita ca si zona activa. care apare. Putem prezenta conform tabelului de mai jos principalele controale într-un formular HTML prezentate mai sus: CONTROL AC IUNE A UTILIZATORULUI text Introducere a unui text de volum redus password Introducere a unui text de volum redus. pe ecran. Un control este o form de interac iune a utilizatorului cu formularul. în principal. controalele formularului.Curs HTML Între tag-ul de intrare i cel de ie ire ale formularului sunt inserate. Exista insa posibilitatea de a crea harti de imagini (Äimage maps´) care permite ca diferite zone ale unei imagini sa fie definite drept legaturi catre diverse pagini WEB.

.Curs HTML Crearea unei harti de imagini presupune trei etape: y Definirea unei imagini ca harta de imagini.x2.y1.jpeg. y Äpoly´ (pentru zone de forma poligonala). Programul este freeware si se poate descarca de pe Internet. program care defineste regulile pentru o imagine .xn. Eticheta <area> are trei atribute obligatorii: 1.. Se v a utiliza tag-ul <img> cu atributele src si usemap. precedat de semnul#. care primeste ca si valoare numele hartii ( numele din usemap). Pentru obtinerea automata a coordonatelor se poate folosi programul MAP This..y2). (x3.. y2) este coordonata coltului dreapta jos. Numele dat pozei in usemap. (x2. Tag-ul are un atribut obligatoriu si anume Äname´...y2. Äcoords´ determina coordonatele zonei 3.yn´ ± poligonul cu varfurile de coordonate (x1. Äshape´ care poate lua una din valorile: y Ärect´ (pentru zone de forma dreptunghiulare).x2. y default´ (pentru portiunile imaginii care nu se incadreaza in nici una dintre categoriile anterioare) 2.y3). y Definirea hartii in interiorul unui bloc special definit cu tag-ul <map> si </map>. y1) este coordonata coltului stanga sus si (x2.y2´ ± dreptunghi unde (x1. se va regasi obligatoriu in tagul map.y1. y Crearea zonelor pe harta. y1. href primeste adresa URL a paginii indicate de legatura zonei respective. in atributul name. y Äcircle´ (pentru zone de forma circulara).y1).. Poly coords=´x1.gif sau .y1) este centrul cercului de raza r. 48 . Valorile atributului Äshape´: y rect coords=´x1. Fiecare zona se introduce cu eticheta <area>.r´ ± (x1. y y circle coords=´x1..

</SCRIPT> <br>Text scris cu HTML </BODY> </HTML> Rezultat: Text scris cu JavaScript Text scris cu HTML 10. introducerea datelor într-un formular de navigare în pagin . Instruc iunile JavaScript sunt cuprinse în interiorul documentului HTML în interiorul marcajului: <SCRIPT>.. Evenimente Un eveniment este o ac iune generat de utilizator: click pe un obiect. fie în corpul s u.2. trecerea mouse-ului pe un obiect. Apelarea unei func ii presupune punerea în aplicare a acelor ac iuni. De exemplu.Curs HTML Cap6. trimiterea unui formular etc.</SCRIPT> Acesta poate ap rea. Elementele limbajului JavaScript Definirea i apelarea func iilor: Definirea unei func ii presupune doar specificarea ac iunilor ce se vor efectua.INTRODUCERE ÎN JAVASCRIPT JavaScript este un limbaj de programare creat de Netscape. cu ajutorul c ruia se pot realiza pagini web interactive. fie în antetul documentului. se pot scrie func ii care s verifice dac datele introduse într-un formular sunt valide. <SCRIPT language=´JavaScript´> //codul JavaScript </SCRIPT> Exemplu: java. Sintaxa sa este asem n toare cu cea a limbajelor C/C++ sau Java.html <HTML> <BODY> <SCRIPT language="JavaScript"> document. JavaScript poate recunoa te i r spunde la evenimentele utilizatorului cum ar fi efectuarea unui clik cu mouse-ul.html´ <HTML> <BODY> <FORM> <INPUT type="Button" value="Apasati-ma" onClick="alert('Salut')"> </FORM> </BODY> </HTML> Rezultat: 10.1. Exemplu: ³even..write("Text scris cu JavaScript"). 49 .

</SCRIPT> </BODY> </HTML> Variabile: Variabilele se declar cu ajutorul cuvântului cheie var. numar2) { return numar1+numar2. variabila2.. } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> document.. Acestea î i pot schimba tipul pe parcursul programului. scrie(). Exemplu ce define te o func ie în antet i o apeleaz apoi în corpul documentului HTML: fct.html <HTML> <HEAD> <SCRIPT language="JavaScript"> function suma(numar1. f r a se preciza tipul acestora.10)).html <HTML> <HEAD> <SCRIPT language="JavaScript"> var nume='Toma' var prenume function scrie() { var prenume='Elena' document. </SCRIPT> </BODY> </HTML> 50 . } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> document.write(prenume).write("Suma returnata de functie este ". . Func iile pot returna unul sau mai multe rezultate ori nici unul în urma apelului. Sintaxa de declarare a variabilellor este: var variabila1.Curs HTML Definirea func iilor se face în antetul documentului HTML. variabile. suma(5.write(nume+' '+prenume+' '). sau var variabila=valoare Variabilele sunt de dou tipuri: locale (sunt declarate în interiorul func iilor) i globale) sunt declarate în afara func iilor).

Sign up to vote on this title
UsefulNot useful