HTML

LIIMMBBAAJJUULL HHTTMMLL L
1. Prezentare general
Publicarea informaiei pentru o distribuie global, necesit un limbaj care s fie universal neles. Limbajul utilizat prin World Wide Web este HTML (HyperText Markup Language). HTML ofer urmtoarele posibiliti: publicarea documentelor on-line, acestea conin: titlu, texte, tabele, liste, imagini etc.; regsirea on-line a informaiei prin legturi hipertext; proiectarea formularelor pentru a se realiza tranzacii prin servicii de la distan, pentru cutarea de informaie, rezervri, cereri de bunuri; includerea de clipuri video, clipuri sonore i alte aplicaii n document. HTML reprezint o implementare simpl a limbajului exemplu de limbaj de marcare (document HTML): Exemplul 1. <HTML> <HEAD> <TITLE>Document </HEAD> <BODY> <P>Salut! </BODY> </HTML> HTML</TITLE> SGML (Standard Generalized Markup
Language) care permite crearea de documente hipertext pentru paginile Web. HTML este un
Un document HTML, la modul general, este divizat n: seciunea antet (ntre <HEAD> i </HEAD>) care include i titlul documentului; seciunea corp (ntre <BODY> i </BODY>) care include coninutul. Orice limbaj de marcare definit prin SGML este denumit aplicaie SGML. O aplicaie SGML este n general caracterizat prin: Declara SGML - prin care se specific caracterele i delimitatorii ce pot apare n ia aplicaie. Definire a tipului de document (Document Type Definition - DTD) - definete sintaxa de construire a marcajelor. DTD poate include definiii suplimentare, cum ar fi referene la entitile caracter. O specificaie ce descrie semantica asociat marcajelor. Aceast specificaie impune anumite restricii de sintax care nu pot fi definite prin DTD. Instanele document conin date i marcatori. Fiecare instan conine o referin ctre DTDul care poate fi utilizat pentru interpretare. Prin definirea tipului de document SGML se declar tipurile de elemente prin care se reprezint structurile sau modul de afiare dorit. HTML include tipurile de elemente pentru paragrafe, legturi hipertext, liste, tabele, imagini etc. Fiecare declarare a tipului de element, n general, conine trei pri: tag de nceput; coninutul; tag de sfrit. Limbajul HTML include o mare diversitate de elemente. Sintaxa general a unui element este: <Nume_element> Coninut -------------- [</Nume_element>]
Numele elementelor nu sunt case-sensitive. De exemplu, tagurile de nceput i de sfrit ale tipului de element UL delimiteaz obiectele unei liste: <UL> <LI><P>Examen <LI><P>Verificare pe parcurs <LI><P>Colocviu </UL> Tag-urile sunt: singulare, cnd se regsete numai tag-ul de nceput (<P>); pereche, reprezentat prin tag de nceput (<HEAD>) i tag de sfrit (</HEAD>). Elementele pot avea asociate proprieti, denumite atribute, care au valori. Sintaxa tagului de start este: <Nume_element atrib1="valoare1" atrib2="valoare2" . Exemplu <IMG SRC="coperta2.jpg" BORDER=4 HEIGHT=300 WIDTH=200> atribi="valoarei" >
Principalele caracteristici ale HTML sunt: descrie structura documentului; nu este descris aranjarea precis n pagin; permite fiecrui navigator s aib propria prezentare; un document HTML poate fi reutilizabil. Ciclul de via al unui document Web include: concepia: cnd se utilizeaz instrumente de editare; gestiunea: stocarea n fiiere; difuzarea: fiind permis vizualizarea de ctre utilizatori; utilizarea: prin editare, copiere, imprimare. Coninutul unui document se caracterizeaz prin: natura informaiei: texte, grafic, tabele, ecuaii; structura: - numele: titluri capitole, paragrafe, legende; - concepia obiectelor imbricate; prezentare: operaia de formatare.
Un document HTML se poate realiza printr-un: editor de texte (n ASCII); procesor de texte; editor HTML; convertor HTML. Specificaia limbajului conine urmtoarele informaii: Ce caractere pot aprea ntr-un document HTML; Tipurile de date de baz dintr-un document; Elementele care guverneaz structura unui document HTML, incluznd text, liste, tabele, legturi, obiecte, imagini, applet-uri; Elementele care guverneaz prezentarea unui document HTML, incluznd stiluri, seturi de caractere, reguli i alte prezentri vizuale, precum i frame-uri pentru prezentrile cu ferestre multiple; Elementele care guverneaz interactivitatea printr-un document HTML, incluznd chestionare pentru introducerea informaiei utilizatorului i scripturile pentru documentele dinamice.
2. Structura documentelor
Pentru structurarea documentului se utilizeaz, n general, tag-urile: <HTML> ----------</HTML> <HEAD> ----------</HEAD> definete nceputul i sfritul documentului; nceput/sfrit antet document;
<TITLE> ---------</TITLE> nceput/sfrit titlu document; <BODY> ----------</BODY> nceput/sfrit coninut document;
Un document HTML este compus din trei pri: linia care conine informaii despre versiunea HTML declararea seciunii de antet - delimitat prin elementul HEAD
corpul documentului, care include coninutul curent al documentului. Corpul poate fi implementat prin elementul BODY sau elementul FRAMESET. Elementul HTML delimiteaz un document, incluznd cele dou seciuni - antet i corp.
Dup declararea tipului de document, restul documentului HTML este inclus n elementul HTML.
Dac elementele HTML i HEAD sunt opionale, orice document HTML trebuie s includ un element TITLE n seciunea de antet. Elementul TITLE se utilizeaz pentru a se identifica coninutul documentului. Titlul poate include entiti caracter, dar nu poate conine ali marcatori. n unele situaii se poate utiliza atributul TITLE, cnd se elementul pe care se gsete. ofer informaii consultative despre
3. Aranjarea n pagin i formatarea documentelor

Tag
<Hi> </Hi>
Semnificaia indicele i=1, 2, 3, 4, 5, 6 stabilete dimensiunea caracterelor pentru textul din interiorul tag-ului; dimensiunea cea mai mic se obine pentru i=6 i cea mai mare pentru i=1. text scos n eviden (Emphasis) text puternic scos n eviden.
<EM> </EM> <STRONG> </STRONG>
<ADDRESS> </ADDRESS> <B> </B> <I> </I> <TT> </TT> <BR> <P> [</P>]
<! --Text --> <HR [SIZE=n] [WIDTH=n] [ALIGN=left|right| center] [NOSHADE]> <DIV </DIV> ALIGN="left|center|right">
textul specific o adres potal, o adres e-mail sau un numr de telefon text bolduit text italic text monospaiat ntrerupe linia curent i trece pe urmtoarea, indiferent dac urmeaz text sau imagine trece la paragraful urmtor, care ncepe cu o nou linie, dar spre deosebire de BR las i o linie liber ca separator de paragrafe comentariu, fiind ignorat de navigator transeaz o linie orizontal de separare, care poate avea urmtoarele caracteristici: grosime (SIZE), lungime (WIDTH), aliniere (ALIGN) i fr umbr (NOSHADE) alinierea textului.
<PRE [WIDTH=n]> </PRE>
<FONT SIZE=n FACE=t1,t2,t3>..</FONT> <MULTICOL COLS=n WIDTH=d >.</MULTICOL>
permite conservarea formatrii textului coninut n element. Atributul WIDTH fixeaz numrul de coloane n care se afl textul formatat, valoarea implicit fiind de 80 de coloane. COLOR=x Efectul atributelor acestui element acioneaz asupra textului situat naintea tag-ului </FONT>
GUTTER=l
<CENTER>. </CENTER> <SPACER TYPE=tip SIZE=n> <SPACER TYPE="BLOCK" WIDTH=n HEIGHT=j ALIGN=a>
Permite scrierea textului pe mai multe coloane (gen ziar). Numrul de coloane, dimensiunea acestora i spaiul dintre ele se specific prin atributele: COLS, WIDTH i GUTTER Centreaz pe orizontal textul sau imaginile Permite controlul vertical i orizontal al spaiului dintre elementele unei pagini HTML. Atributul TYPE poate lua valorile HORIZONTAL, VERTICAL sau BLOCK. Dac atributul TYPE ia valoarea BLOCK, atunci se pot specifica i atributele: WIDTH (limea), HEIGHT (nlimea) i ALIGN cu valorile TOP, BOTTOM, CENTER sau MIDDLE. Permite poziionarea unei imagini fa de textul
<BR CLEAR=c>
documentului HTML. Atributul CLEAR poate lua valorile: LEFT, RIGHT sau ALL. LEFT las liber locul din stnga imaginii, RIGHT las liber locul din dreapta imaginii, iar ALL se folosete cnd avem dou imagini n pagin i vrem ca una s fie aliniat la stnga, cealalt, la dreapta i spaiul dintre ele s fie liber.
<BODY BGCOLOR=c VLINK=v ALINK=a> text=t LINK=l
Controleaz culorile pentru: fondul ecranului, text i legturi. Toate valorile atributelor din tag-ul BODY (c, t, l, v i a) se specific dup modelul RGB sub forma "#rrggbb". Atributul BGCOLOR d culoarea fondului de ecran, TEXT, culoarea textului (altul dect legturile hipertext), LINK, culoarea legturilor care nu au fost nc vizitate, VLINK, culoarea legturilor care au fost vizitate i ALINK, culoarea temporar a legturii din momentul activrii acesteia (culoarea implicit este rou).
<BODY BACKGROUND="fisier_imagine.gif" >
Fondul ecranului conine o imagine
Atribute FONT: SIZE=n stabilete dimensiunea caracterelor, valoarea atributului este precedat de semnul dimensiunea curent a caracterelor. COLOR=x, stabilete culoarea caracterelor dup modelul RGB: rrggbb (rr - rou, gg - verde, bb - bleu). rr, gg, bb sunt valori hexazecimale. Valoarea 00 d o intensitate minim, iar FF o intensitate maxim. Astfel, combinaia FF0000 corespunde pentru culoarea rou intens, FFFFFF pentru alb, iar 000000, pentru negru. FACE=t1,t2,t3 permite stabilirea tipului de font, care trebuie s existe pe maina clientului. Numele culorilor i valorile RGB: n poate lua valori cuprinse ntre 1 i 7. Dac
+ atunci n reprezint creterea n raport cu
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = "#00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = "#000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF
4. Liste
a) Liste ordonate <OL TYPE=t START=s> <LI> Text1 <LI> Text2 <LI> Text3 </OL>
atributul TYPE definete tipul numerotrii elementelor listei: t=1 pentru cifre, t=A pentru caractere majuscule, t=a pentru caractere minuscule, t=I pentru numerotarea roman cu litere mari t=i pentru numerotarea roman cu litere mici, atributul START definete valoarea de nceput.

Exemplul 2. <OL> <B> <LI> Matematic <LI> Fizic <LI> Limba romn </B> </OL>
Exemplul 3. <OL> <B> <LI><A href="URL_M">Matematic </A> <LI><A href="URL_F">Fizic </A> <LI><A href="URL_L">Limba romn </A> < /B> </OL> b) Liste neordonate <UL TYPE=t>
<LI> Text1 <LI> Text2 </UL> atributul TYPE definete semnul care va precede elementele listei: t=SQUARE (ptrat) t=CIRCLE (cerc vid) t=DISC (cerc plin). Exemplul 4. <UL> <B> <LI><A href="URL_M">Matematic </A> <LI><A href="URL_F">Fizic </A> <LI><A href="URL_L">Limba romn </A> < /B> </UL> c) Liste cu definiii <DL> <DT><B> Termen1 pentru definit </B> <DD> Definirea termenului <DT><B> Termen2 pentru definit </B> <DD> Definirea termenului </DL>
Exemplul 5. <DL> <DT><B>server</B> <DD>un calculator care ofer servicii ntr-o retea; <DT><B>client</B> <DD>calculatorul care solicit servicii ntr-o retea. </DL>
5. Legturi hipertext
Legturile hipertext permit vizualizarea prin clic pe un cuvnt, fraz sau imagine a altor fiiere dect cel curent. Pentru a realiza o legtur hipertext se utilizeaz tag-ul ancor: <A> </A>, care include i atribute. Unul dintre aceste atribute este: HREF (Hypertext REFerence), utilizat pentru a specifica URL-ul documentului int. Sintaxa este:
Legturile se pot realiza: intern, n acelai document; local, ctre un document situat pe acelai server; extern, ctre un document aflat pe alt server. a) Legtura local
<A HREF="fisier_local"> text de legtur </A> Valoarea "fiier_local" reprezint adresa fiierului local ctre care se face legtura, acesta va fi ncrcat. Fiierul local se precizeaz folosind: calea relativ , serverul va cuta documentul ncepnd din acelai director ca i documentul de la care a fost apelat legtura; calea absolut, cnd documentul va fi identificat ncepnd cu directorul rdcin. b) Legtura intern se realizeaz ntre elemente ale aceluiai document sau ctre un anumit punct int al altui document. Aceasta implic: b1) crearea unei ancore n punctul int: <A NAME="cuvnt_cheie">Paragraf int</A> Ancorele din punctul int nu sunt afiate diferit fa de restul documentului. b2) realizarea unei legturi prin care se specific numele fiierului (dac legtura se face ntrun punct al altui fiier) i paragraful: <A HREF="[nume fisier]#cuvnt_cheie">Paragraf int</A> Se utilizeaz acest tip de legtur n cadrul unui document organizat pe seciuni. La nceputul documentului poate fi prezentat coninutul.
Exemplul 6. <HTML> <HEAD> <TITLE>Pagin Web</TITLE> </HEAD> <BODY> <H1 align=center> EXEMPLUL DE PAGIN WEB</H1> <P>Prin <P> <P><A NAME="CCC"></A> <OL> <LI> <H1> <A HREF="#AAA"> Materiile anului I <LI> <H1> <A HREF="#BBB"> Materiile anului II <LI> <H1> <A HREF="#DDD"> Materiile anului III </OL> <HR><P> <H2> <A name="AAA"> Materiile anului I <UL> <LI>Economia politic <LI>Algebr liniar <LI>Analiz matematic <LI>Bazele programrii <LI>Sisteme de calcul si operare <LI>Bazele statisticii </A></H2><BR> </A></H1> </A></H1> </A></H1> coninutul acestui document se exemplific legtura ctre un paragraf al documentului.
</UL> <HR> <A HREF="#CCC"> Revenire nceput </A> < HR> <P> <H3> <A NAME="BBB"> Materiile anului II <UL> <LI>Bazele contabilittii <LI>Drept civil <LI>Programarea calculatoarelor <LI>Management <LI>Baze de date <LI>Cercetri operationale <LI>Finante-Moned <LI>Analiza sistemelor </UL> <HR> <A HREF="#CCC">Revenire nceput <HR><P> <H4> <A NAME="DDD"> Materiile anului III <UL> <LI>Sisteme de operare <LI>Structuri de date <LI>Limbaje evoluate de programare </A></H4><BR> </A> </A></H3><BR>
<LI>Algoritmi si logica matematica <LI>Contabilitatea ntreprinderii <LI>Dreptul afacerilor </UL> <HR> <A HREF="#CCC">Revenire nceput <HR> <BODY> </HTML> b) Legtura extern </A>
inta unei legturi hipertext poate fi: un fiier HTML, o imagine extern (GIF, JPEG sau PostScript), un film sau text (cruia i s-a marcat o ancor).
6. Includerea imaginilor n document

Imaginile pot fi: afiate direct n documentul Web, imagini on-line. trebuie s fie n format GIF sau JPEG. ncrcate i afiate la cererea utilizatorului prin elementul <A>, imagini externe. Pentru a putea fi afiate, imaginile
n modul bitmap imaginea este realizat punct cu punct.
Dimensiunea i rezoluia sunt
stabilite de la nceput. n acest caz este dificil s se modifice mrimea fr a se altera calitatea imagini. Preluarea unei imagini cu un scanner genereaz imagini bitmap. Photoshop, SuperPaint, XV reprezint produse soft capabile s creeze i s returneze imagini bitmap. GIF este un format pentru reprezentarea imaginilor n modul bitmap. n modul vectorial, fiecare form, fiecare curb este definit printr-o formul matematic. O astfel de reprezentare are avantajul c desenele pot fi uor redimensionate sau deformate. bitmap. Cele mai cunoscute tipuri de imagini vectoriale sunt cele PostScript fiind softul pentru desen). Dac se dorete utilizarea imaginilor PostScript n pentru afiarea lor este necesar conversia n modul bitmap. Imaginile on-line sunt specificate prin tag-ul IMG: <IMG SRC="nume_img.gif" ALIGN=a HSPACE=n1 VSPACE=n2 WIDTH=l HEIGHT=i BORDER=n3> atributul SRC indic URL-ul imaginii care se va insera n document; atributului ALIGN - pentru alinierea imaginii, poate lua valorile: TOP, MIDDLE , BOTTOM, LEFT, RIGHT; ncadrarea i dimensionarea imaginilor se face prin atributele HSPACE (spaiu orizontal), VSPACE (spaiu vertical), BORDER (cadru), WIDTH (limea) i HEIGHT (nlimea). O imagine poate fi un punct de legtur ctre alte informaii. n acest caz se utilizeaz sintaxa: Fiierele n (Illustrator paginile Web, care sunt nregistrate imaginile vectoriale sunt de capacitate mai mic dect cele cu imagini
7. Formulare
Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a genera pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezint doar o interfa pentru captarea informaiilor, el necesit elemente pentru tratarea datelor colectate. Gateway Interface). Altfel spus, CGI asigur interaciunea server-navigator n personalizrii rezultatelor prin diverse prelucrri asupra elementelor din paginile Web. Prin intermediul tag-urilor HTML se descriu zonele formularului, care vor fi completate de utilizator. Sintaxa general pentru deschiderea unui formular este: <FORM METHOD=tip_m ACTION=URL_cgi NAME=nf TARGET=cadr> unde: Atributul METHOD=tip_m specific modul cum se emite informaia ctre server. Valorile cel mai frecvent utilizate pentru tip_m sunt: GET i POST. Cnd se utilizeaz metoda GET irul de caractere constituit din ansamblurile nume cmp i valoare este adugat la URL-ul scriptului care se va executa. Separatorul ntre numele scriptului i restul irului de caractere l reprezint caracterul ?. Deoarece majoritatea browserelor afieaz URL curent, acest ir de caractere va fi vizibil. Din aceast cauz se prefer metoda POST, cnd irul de caractere este trimis ctre server printro secven HTTP special. Prelucrarea sensul final a datelor se execut pe server, de exemplu, prin programele denumite CGI (Common
Atributul ACTION=URL_cgi indic locul unde se emite informaia, unde se gsete scriptul care se va executa. Valoarea sa este reprezentat prin URL-ul scriptului. Atributul NAME=nf deine dou funcii particulare:
indic scriptului numele formularului care a trimis datele, n situaia cnd mai multe formulare exist n acelai document; identific un formular, prin numele su, pentru a putea fi referit prin funciile JavaScript. TARGET=cadr specific fereastra sau cadrul (frame) n care se va afia
Atributul curent.
rezultatul execuiei scriptului. n absena atributului TARGET se nlocuiete pagina Textul ncadrat de SELECT etc. Tag-uri pentru definirea intrrilor ntr-un formular Sintaxa general a tag-ului care definete un cmp pentru introducerea datelor ntr-un formular este:
<INPUT TYPE="tip" NAME="nume_cmp" VALUE="val" SIZE="n" MAXLENGHT="m">
< FORM>
i </FORM > va conine un ansamblu de comenzi:
INPUT ,
Atributul TYPE specific tipul intrrii, care poate fi:

text: text simplu, parol, ascuns, multilinie; meniu: cu selectarea unei intrri sau selectare multipl; butoane: caset de control, radio, reset i submit.
Atributul NAME permite definirea numelor, n scopul identificrii datelor care vor fi trimise ctre server. ntr-un formular se utilizeaz o singur dat acelai nume. Celelalte atribute sunt dependente de tipul intrrii.
Intrarea text este cel mai simplu tip de intrare ntr-un formular. Zona de introducere date accept un cuvnt sau o linie de text. Atributele sunt: VALUE="val", atribut opional care permite predefinirea coninutului din cmpul text, cu alte cuvinte, ceea ce o s apar pe ecran la prima activare a formularului; SIZE="n", atribut opional prin care se stabilete lungimea cmpului de intrare text (n caractere); MAXLENGTH ="m", atribut opional prin care se limiteaz numrul caracterelor care pot fi introduse (dac se depete acest numr apare un semnal sonor). Exemplul 7. <FORM METHOD="Post" ACTION="http://www.infocib . "> Care este numele de familie? <INPUT TYPE="text" NAME="Nume_familie" SIZE="10" MAXLENGTH="15"> </FORM> VALUE="Nastase"
Intrarea: password utilizeaz aceleai atribute ca i intrarea text. Exemplul 8. <FORM <INPUT METHOD="Post" ACTION="http://www.infocib NAME="parola" . SIZE="8"
"> Introdu 8 caractere pentru parola: TYPE="password" MAXLENGTH="8"> </FORM>
Intrare: textarea se utilizeaz pentru introducerea unui text multilinie. De data aceasta tag-ul <INPUT TYPE="text"> este nlocuit cu: NAME="nume_cmp" ROWS="r"
<TEXTAREA </TEXTAREA> Atributele sunt:
COLS="c"> [Text implicit]
ROWS="r" , specific numrul de rnduri care pot fi afiate, din textul care se va introduce; COLS="c", specific numrul de coloane care pot fi afiate; Text implicit, text afiat iniial.
Exemplul 9. <FORM METHOD="Post" ACTION="http://www.infocib.. ROWS="3" "> Transmiteti eventualele reclamatii <TEXTAREA NAME = "Reclamatie" </TEXTAREA> </FORM> COLS="40"> Reclamatii despre activitatea de seminar
Cnd numrul liniilor i al coloanelor introduse depesc pe cele prevzute a fi afiate se utilizeaz scrollbars. Intrarea meniu: SELECT are loc selecia unei intrri din meniu. De data aceasta se utilizeaz tag-ul SELECT n contextul:
<SELECT NAME="nume_cmp"> <OPTION .. </SELECT> Atributele sunt: OPTION, prin care se specific o opiune a meniului; VALUE="v", atribut opional prin care se specific valoarea opiunii emise spre server (dac nu se regsete acest parametru, numele opiunii va fi emis ca valoare); SELECTED, atribut opional prin care se specific prima opiune afiat a meniului (dac acest atribut lipsete se va afia prima opiune din lista meniu). Exemplul 10. <FORM METHOD="Post" ACTION="http://www.infocib . "> Cum evaluati cunotintele dumneavoastra n domeniul calculatoarelor? <SELECT NAME="evaluare"> <OPTION>Foarte bun <OPTION SELECTED>Bun <OPTION VALUE="acceptabil">Mediu spre bun <OPTION>Mediu <OPTION>Slab <OPTION>Foarte slab </SELECT> </FORM> [VALUE="v"][SELECTED] > Nume_Optiune1
<OPTION > Nume_Optiune2
Intrare meniu: SELECT cu SIZE permite alegerea multipl dintr-o list de opiuni. Diferena fa de situaia anterioar const n utilizarea opiunilor: SIZE, prin care se specific numrul de linii afiate i MULTIPLE, care permite o selecie multipl. Exemplul 11. <FORM <SELECT METHOD="Post" ACTION="http://www.infocib. MULTIPLE
"> Doreti sa cumperi: NAME="cumparaturi" SIZE="5"> < OPTION> mbracaminte <OPTION VALUE="AL" SELECTED> <OPTION> Rechizite colare <OPTION SELECTED> Carti de specialitate <OPTION> Echipament sportiv <OPTION> ncaltaminte </SELECT> </FORM> Alimente
Intrarea buton: checkbox (caset de control), principiul de introducere a datelor este: dac da, completeaz caseta. Pentru acest tip de intrare se revine la tag-ul: <INPUT TYPE="checkbox" VALUE="v" CHECKED> unde: VALUE="v", atribut opional prin care se specific valoarea trimis ctre server, n cazul selectrii (dac nu este definit, o valoare on se emite ctre server); CHECKED, atribut opional pentru selectarea n mod implicit a casetei.
Exemplul 12. <FORM METHOD="Post" ACTION="http://www.infocib. "> <INPUT TYPE="checkbox" NAME="donatie" CHECKED>Da, daca vrei sa faci o donatie <P> <INPUT TYPE="checkbox" NAME="lista e-mail">Da, daca vrei sa fii inclus n lista de pota </FORM>
Intrare buton: radio selecteaz una dintre posibilitile existente. Sunt cazuri cnd trebuie aleas o opiune din mai multe, tipul cmpului de intrare este definit prin atributul TYPE="radio". Alte atribute: VALUE="v", atribut necesar pentru a indica valoarea asociat butonului, dac acesta este selectat. Valoarea specificat prin atributul NAME identific blocul de butoane; CHECKED, buton radio selectat (se recomand s se foloseasc acest atribut).
Exemplul 13. <FORM METHOD="Post" ACTION="http://www. "> Calculatorul ruleaza sub: <DL><DD> Sistemul de operare: <P><INPUT <INPUT WIN_NT <P><DD> Ieirea se face la:<P> TYPE="radio" NAME="Sistem_operare" VALUE="DOS"> DOS <INPUT TYPE="radio" NAME="Sistem_operare" VALUE="WIN"> WINDOWS TYPE="radio" NAME="Sistem_operare"VALUE="W_NT" CHECKED>
<INPUT TYPE="radio" NAME="Ieire" VALUE="ecran">Ecran <INPUT </DL> </FORM> TYPE="radio" NAME="Ieire" VALUE="Imprim">Imprimanta
Intrarea buton: reset/submit, prin activarea acestor cmpuri are loc tergerea tuturor zonelor de intrare din formular (se vor regsi valorile iniiale), respectiv transmiterea datelor ctre server. Butonul SUBMIT transfer informaia, din formularul completat, la URL specificat prin atributul ACTION al tag-ului < FORM>. Atributul opional VALUE se utilizeaz pentru afiarea unui text pe buton. Exemplul 14. <FORM METHOD="Post" ACTION="http://www.infocib. "> <INPUT TYPE="reset" VALUE="terge
cmpurile"> < INPUT TYPE="submit" VALUE="Trimite datele"> </FORM> Intrarea: hidden transmite informaie ascunznd textul. Atributul VALUE="v" este necesar pentru a se specifica valoarea textului ascuns, care va fi emis ctre server. Exemplul 15. <FORM <INPUT METHOD="Post" ACTION="http://www.infocib. NAME="nume" "> Nu se va vedea nimic TYPE="hidden" VALUE="ABCD"> < /FORM>
Exemplul 16. Chestionar <HTML> <HEAD> <TITLE> *** Chestionar *** </TITLE> <BODY> <H1 <UL> <LI><P><H2>Care este domeniul dumneavoastra de activitate:</H2> <FORM METHOD="post" ACTION="http://www.infocib" > <SELECT MULTIPLE NAME="domeniu" SIZE="6"> <OPTION>EDUCATIE/INVATAMINT <OPTION>INFORMATICA <OPTION>SANATATE <OPTION>COMERT <OPTION>SERVICII PUBLICE <OPTION>FINANTE <OPTION>CHIMIE <OPTION>CONSTRUCTII <OPTION>ALTE DOMENII </SELECT> <LI><P><H2>Care este functia pe care o ndepliniti: </H2> <SELECT MULTIPLE NAME="functie" SIZE="6"> <OPTION>DIRECTOR <OPTION>PROFESOR <OPTION>ADMINISTRATOR <OPTION>INGINER ALIGN=CENTER>CHESTIONAR</H1>
<OPTION>MUNCITOR <OPTION>CERCETATOR <OPTION>SEF COLECTIV <OPTION>ALTE </SELECT> <P> <INPUT </FORM> </HTML> TYPE=SUBMIT VALUE=Tasteaza_pentru_Validare>
Figura 3. Formular n pagina HTML
8. Tabele
HTML permite descrierea tabelelor ntr-o manier amnunit ca i n cazul listelor. Un tabel poate conine un alt tabel. O celul dintr-un tabel poate conine: text, liste, imagini, legturi hipertext sau elemente ale unui formular. Sintaxa general pentru crearea unui tabel este: <TABLE </TABLE> Proprietile generale ale unui tabel se specific prin atributele: BORDER, grosimea bordurii de ncadrare a tabelului; CELLPADING, spaiul din jurul textului unei celule; CELLSPACING, spaiul ntre celule; WIDTH specific n procente ct la sut din suprafaa ferestrei ocup tabelul. Tabelul este descris rnd cu rnd cu ajutorul tag-ului: <TR VALIGN=TOP|BOTTOM|MIDDLE ALIGN=RIGHT|LEFT| BORDER=m CELLPADING=n2 CELLSPACING=n3
WIDTH=n4%> --- descrierea tabelului---
CENTER> < /TR> Atributul VALIGN specific alinierea vertical a textului n toate celulele rndului, iar ALIGN d alinierea orizontal. Definirea unei celule n cadrul unui rnd se face prin: <TD VALIGN=v1 ALIGN=v2 COLSPAN=n1 ROWSPAN=n2 NOWRAP> </TD>
Toate celulele unui rnd motenesc valorile atributului VALIGN definit n tag-ul <TR>, cu excepia cazului cnd acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar n raport cu primul. Atributul COLSPAN specific limea celulei, ca multiplu de laimea coloanei de baz, iar ROWSPAN specific nlimea celulei, ca multiplu de nlimea rndului de baz. Dimensionarea celulelor unui tabel se face automat la lungimea maxim a textului din celule. Dac textul introdus ntr-o celul este mai lung de 64 caractere, navigatorul l mparte singur rnd, indiferent de lungimea acestuia. automat n mai multe rnduri. Atributul NOWRAP permite inhibarea acestei reguli, lsnd textul pe un
Exemplul 17.
<TABLE border="1"> <CAPTION><EM>Exemplu de tabel</EM></CAPTION> <TR><TH rowspan="2">Disciplina<TH colspan="2">Anul de studiu <TH rowspan="2">Forma de <BR>evaluare <TR><TH>An I<TH>An II <TR><TH>Sisteme de calcul<TD>sem I<BR>sem II<TD> -<TD>Examen <TR><TH>Tehnologii Web<TD> -<TD>sem II<TD>Colocviu </TABLE>
Figura 4. Rezultatul afirii codului anterior Antetul tabelului se descrie prin tag-ul <TH> Textul din acest tag este automat centrat i bolduit. Titlul tabelului se specific prin tag-ul: <CAPTION ALIGN=TOP|BOTTOM> </CAPTION> </TH> care are aceleai atribute ca i <TD>.
Exemplul 18 . Tabel ale crui celule conin elemente de tipuri diferite: legturi hipertext, imagini, formular, liste i text. <HTML><HEAD> <TITLE>Tabel in pagina HTML</TITLE> </HEAD>
<BODY> <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=10 > <TR ALIGN=CENTER> <TD><A STATISTICA SI </A> <BR><A HREF="http://ie.ase.ro">INFORMATICA <BR>facultatii</TD> ECONOMICA</A></TD> <TD>Catedrele <TD></TD> </TR> <TR> <TD><IMG SRC="WWW.GIF"></TD> <TD> <UL> <LI>Informatica Economica</LI> <LI>Matematica</LI> <LI>Statistica</LI> </UL></TD> <TD ALIGN=CENTER> <A HREF ="http://www.infocib.ase.ro"> <IMG SRC="Revenire.gif" ></A></TD> </TR> <TR> <TD ALIGN=CENTER><I>Introduceti numele</I> <BR><I>dumneavoastra</I></TD> <TD ALIGN=LEFT><FORM method="post" action=" "><INPUT name="nume"></TD> <TD ALIGN=CENTER><INPUT type="submit" HREF="http://www.infocib.ase.ro">CIBERNETICA,
value="OK"></FORM></TD> </TR> <CAPTION </TABLE> </BODY> </HTML> align="bottom">Exemplu de <B>tabel</B></CAPTION>
Figura 5. Tabel n pagin HTML
9. Cadre
Generarea cadrelor se face cu ajutorul a trei tag-uri FRAMESET, FRAME i NOFRAMES. Structura unui document partajat n cadre difer de cea a unui document HTML clasic.
Figura 6. Structuri ale documentelor HTML Sintaxa tag-ului FRAMESET: <FRAMESET COLS|ROWS =v1,v2,vn [FRAMEBORDER="no|yes"] [MARGINWIDTH="n"] [BORDERCOLOR="rrggbb"]> </FRAMESET> FRAMESET divizeaz ecranul n cadre verticale (atributul COLS) sau orizontalele ( ROWS). v1,v2,vn reprezint dimensionarea cadrelor sub forma: n, numrul de pixeli pentru limea (COLS) sau nlimea (ROWS) cadrului; n%, procentul din limea (COLS) sau nlimea (ROWS) zonei printe pe care l va ocupa cadrul;
n , (n este opional) va aloca pentru cadru toat suprafaa disponibil; dac mai multe elemente din list se specific sub aceast form, zona disponibil va fi mprit n mod egal ntre acestea. Atributul FRAMEBORDER specific dac separarea cadrelor se face printr-o bordur cu efect 3D (cu umbr). Dac FRAMEBORDER=no limea bordurii dintre cadre se specific prin atributul MARGINWIDTH ="n", valoarea 0 suprim bordura. Dac FRAMEBORDER = "yes", atributul BORDERCOLOR="rrggbb" reprezint culoarea bordurii. <FRAME [SRC="URL"] NAME="nume_cadru"[MARGINWIDTH="n"] [MARGINHEIGHT="m"] [SCROLLING="yes|no|auto|] [NORESIZE]> SRC indic URL de unde se ncarc documentul HTML; NAME specific numele cadrului, care va fi folosit ca int ntr-o legtur hipertext prin atribut TARGET din tag-urile <A> i <FORM>; MARGINWIDTH i MARGINHEIGHT definesc spaiul ntre document i marginea stng, respectiv cea de sus a cadrului; SCROLLING="yes" definete o bar de defilare; NORESIZE inhib posibilitatea redimensionrii ferestrei cadrului cu ajutorul mouse-ului ( ca orice fereastr). Tag-ul <NOFRAMES> </NOFRAMES > permite afiarea unui text explicativ pentru navigatoarele care nu suport cadre. O dat definite cadrele, acestea pot fi utilizate pentru a gzdui documente HTML apelate prin intermediul legturilor hipertext. n acest sens, tag-urile <A> i <FORM> au fost dotate cu atributul TARGET, care specific cadrul n care se va afia documentul asociat legturii.
<A HREF="URL_document" TARGET="nume_cadru"> Text de legatura </A> <FORM ACTION="/cgi-bin/test" TARGET="nume_cadru METHOD=POST> ...</FORM>
Figura 7. Cadre imbricate Numele cadrului poate fi definit de utilizator sau predefinit. Numele predefinite sunt: _blank, documentul va fi afiat ntr-o fereastr nou; _self, documentul va fi ncrcat n cadrul unde se gsete legtura hipertext de apel; _top terge toate cadrele existente i afieaz documentul pe toat suprafaa rezervat navigatorului (modul clasic); _parent afieaz documentul pe suprafaa zonei n care a fost afiat documentul care a lansat legtura hipertext. Exemplul 19. Fiierul cadre.htm <html><head><title>Frame</title></head>  <frameset cols="*,3*">
<frame
name="fr_menu"
src="MENU.HTM">
<frameset rows="*,*"> <frame name="fr_sus" src="VID.HTM"> <frame name="fr_jos" src="VID.HTM"> </frameset> </frameset> </html> Fiierul menu.htm <html><head><title>inta</title></head> <body> <a <a <a href="IMAGINE.HTM" href="ex2.HTM" target="fr_sus">imagine</a> <p><hr> target="fr_jos">text</a> target="_blank">cuprins</a> <p><hr> href="Cuprins.HTM" </body> </html>
Figura 8. Pagin Web cu frame-uri

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

LIIMMBBAAJJUULL HHTTMMLL L

3. Aranjarea n pagin i formatarea documentelor

<EM> </EM> <STRONG> </STRONG>

<PRE [WIDTH=n]> </PRE>

<FONT SIZE=n FACE=t1,t2,t3>..</FONT> <MULTICOL COLS=n WIDTH=d >.</MULTICOL>

<BODY BACKGROUND="fisier_imagine.gif" >

Fondul ecranului conine o imagine

+ atunci n reprezint creterea n raport cu

6. Includerea imaginilor n document

n modul bitmap imaginea este realizat punct cu punct.

Dimensiunea i rezoluia sunt

i </FORM > va conine un ansamblu de comenzi:

Atributul TYPE specific tipul intrrii, care poate fi:

"> Introdu 8 caractere pentru parola: TYPE="password" MAXLENGTH="8"> </FORM>

<TEXTAREA </TEXTAREA> Atributele sunt:

COLS="c"> [Text implicit]

<OPTION > Nume_Optiune2

Figura 3. Formular n pagina HTML

WIDTH=n4%> --- descrierea tabelului---

value="OK"></FORM></TD> </TR> <CAPTION </TABLE> </BODY> </HTML> align="bottom">Exemplu de <B>tabel</B></CAPTION>

Figura 5. Tabel n pagin HTML

navigatorului --> <frameset cols=",3">

Figura 8. Pagin Web cu frame-uri

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