Documente Academic
Documente Profesional
Documente Cultură
HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989,
ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a
evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recent HTML 4.01), fiecare versiune oferind
noi facilitati.
HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text
pentru a adauga informatii despre formatare. Este derivat din SGML (Standard Generalized Markup
Language), un sistem pentru definirea tipurilor de documente structurate, destinat sa reprezinte
instante ale acestor tipuri de documente. La baza SGML si a HTML se afla acelasi principiu:
descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca
aceste fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad).
In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma <nume_marcaj> .
Parantezele unghiulare sunt elementele care indica prezenta unui marcaj; numele marcajelor poate
fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit
utilizarea unor atribute care se vor scrie in marcajul de inceput:
<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin
intermediul DTD (document type definition). Pe scurt, fisierul DTD contine definitiile marcajelor
din versiunea respectiva de HTML.
HTML 4.01 specifica 3 variante DTD :
HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt "invechite"
(elemente si atribute a caror utilizare nu este recomandata deoarece se doreste renuntarea la
acestea pe viitor) sau care nu apar in documentele ce contin cadre.
HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele "invechite".
HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).
3
<META> - poate contine cuvinte cheie, o descriere a paginii, numele autorului paginii,
frecventa (teoretica) cu care motoarele de cautare ar trebui sa reindexeze pagina, etc.
Declaratiile META implica in general declararea unei proprietati si a valorii asociate acelei
proprietati.
<style>- cascading style sheets - stiluri pentru formatarea textului din documentul HTML.
<style type="text/css">...</style>
<head>
<base href="http://www.xprim.ro/index.php" target="_top">
</head>
4
In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini, etc.)
(<body>.... </body>).
</body>
</html>
In exemplul de mai sus a aparut un nou marcaj <p> (paragraf). Alaturi de el trebuie mentionate
marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (headings - toate necesita marcaj de inchidere)
care sunt folosite in general pentru evidentierea titlurilor. (exemplu)
Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele <span> si
<div>(ambele necesita marcaj de inchidere):.
<span> este un marcaj de tip "inline". Se foloseste in general in interiorul marcajelor de tip
"block" (ex. <p>) in combinatie cu stilurile CSS, pentru a impune o formatare diferita de
restul continutului din marcajul "block" respectiv (exemplu).
spre deosebire de <span>, marcajul <div> este de tip "block". Se foloseste in general pentru
pozitionare in cadrul documentului si pentru specificarea unor proprietati CSS care sa fie
aplicate textului din interiorul lui (exemplu).
2.1 Liste
HTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste,
fiecare tip trebuie sa includa cel putin un element:
Unul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau
indexuri. Un exemplu concret il reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de
definitiile termenilor respectivi.
<html>
<head>
<title>Lista de tip definitie</title>
</head>
<body>
<dl>
<dt>Applet Java
<dd>Aplicatie Java inclusa intr-un document
HTML
<dt>Cookie
<dd>Mecanism de comunicare intre client si
server
<dt>Domeniu
<dd>Nume unic prin care se identifica un site
pe Internet
</dl>
</body>
</html>
<html>
<head>
<title>Lista neordonata</title>
</head>
<body>
<p>In HTML sunt disponibile 3 tipuri de liste:</p>
<ul type="square">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ul>
</body>
</html>
<html>
<head>
<title>Lista ordonata</title>
</head>
<body>
<p>In HTML sunt disponibile 3 tipuri de liste:
<ol start="2">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ol>
</body>
</html>
Atributul start seteaza numarul de inceput pentru primul element al listei ordonate.
Diferenta dintre listele ordonate si cele neordonate consta in inlocuirea punctelor din enumerare cu
numere. Vizualizand in browser exemplele mentionate anterior, vei intelege diferentele in modul de
afisare a fiecarui tip de lista.
9
Referintele relative sunt folosite in interiorul siturilor. Ele functioneaza pe baza faptului ca browserul
adauga automat numele domeniului la fiecare referinta (presupunand ca exista o pagina la adresa
http://www.hostx.ro/director/pagina.html si o referinta relativa catre pagina2.html, browserul va
construi referinta http://www.hostx.ro/director/pagina2.html in momentul in care pagina2.html este
solicitata)
Referintele absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un alt site (domeniu); pot fi
folosite si in interiorul unui site, insa va implica un efort mai mare in scrierea paginilor (pe scurt, ai
mai mult de tastat), iar in cazul in care muti situl pe un alt domeniu vei fi nevoit sa re-editezi toate
referintele.
Referintele pot fi catre pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere audio, video,
documente in alte formate, etc.)
10
2.2.1 Ancore
Pana acum am prezentat modul de realizare a referintelor externe, catre alte pagini sau catre alte
situri. Ce se intampla insa in cazul in care avem un document de dimensiuni mari si vrem sa
introducem referinte catre anumite sectiuni ale sale? Solutia consta in utilizarea ancorelor.
<a name="nume_ancora">...</a>
<a name="xxx">...</a>
<a name="XXX">...</a>
Odata definita ancora trebuie definita si legatura activa catre ancora respectiva. Ea va fi o referinta
hypertext in formatul urmator: <a href="#nume_ancora">Link catre ancora</a>
Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe: <a
href="pagina.htm#nume_ancora">Link catre ancora externa</a>
3.1 De ce imagini ?
In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea
modului de transmitere a mesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara
imagini !
O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o
pagina care contine doar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva
imagini care "clipesc" nu sunt suficiente pentru a face o pagina atractiva.
<html>
<head>
<title>Pagina mea</title>
</head>
<body>
<img src="imagine.gif">
</body>
</html>
Atributul src specifica locatia imaginii. Alaturi de src, marcajul <img> are urmatoarele atribute:
alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si
pentru motoarele de cautare.
border - traseaza un chenar in jurul imaginii.
width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor
este recomandata deoarece va reduce timpul de procesare a paginii web de catre browser.
hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.
Poti vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste sau calea catre
imagine este gresita, aici.
<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100"
border="0"
hspace="10" vspace="10">
</body>
</html>
In general, atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea inferioara a
imaginii. Va ramane un spatiu neutilizat, dupa cum ai vazut probabil in exemplul de mai sus. Pentru
evitarea "pierderii" acestui spatiu poti folosi atributul align, cu valorile left, right.
14
<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100"
border="0"
hspace="10" vspace="10" align="left">
</body>
</html>
Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua
modalitati:
<html>
<head>
<title>Inserare referinta audio</title>
</head>
<body>
Apasa pe linkul de mai jos.
<a href="sunet.au">
Fisierul audio va fi rulat intr-o aplicatie
instalata
in calculatorul tau (ex. Media Player)
</body>
</html>
15
<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200">
</body>
</html>
Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi.
Daca esti interesat de fisierele midi iti recomand http://www.ifni.com/ sau http://www.midifarm.com.
Atentie insa la drepturile de autor!
autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML
hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata
loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"
volume - seteaza volumul cu care va fi redata secventa audio
<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200"
autostart=false hidden=false loop=true volume=50>
</body>
</html>
Marcajul bgsound va rula o secventa audio in fundal. Este o extensie Microsoft, deci va functiona
numai in Internet Explorer.
<html>
<head>
<title>Inserare secventa audio cu bgsound</title>
</head>
<body>
<bgsound src="aaa.wav" loop=10>
</body>
</html>
In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.
16
Lecia 4: Tabele
Prezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si
sistematizarii. Marcajele HTML dedicate formatarii tabelelor permit operatiuni asemanatoare celor
din procesoarele de texte (ex. MS Word).
Definirea unui tabel in HTML se face folosind perechea de marcaje <table>...</table>. Prin
intermediul acestei perechi de marcaje se definesc atribute valabile pentru intregul tabel. Majoritatea
acestor atribute pot fi insa redefinite pentru anumite celule ale tabelului.
<table [border=n]
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void]
[rules=none|groups|rows|cols|all] [width=abs|rel]
[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"]
[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"]
[background="URL-imagine"] [cellspacing=n] [cellpadding=n]
[align=left|center|right] [valign=top|middle|bottom]
[summary="sumar"]>
...
</table>
border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu
va avea chenar.
frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului
"border". Atributul frame poate avea urmatoarele valori:
o above - afiseaza latura superioara a chenarului;
o below - afiseaza latura inferioara a chenarului;
o border - afiseaza chenarul complet;
o box - afiseaza chenarul complet (la fel ca si border);
o hsides - afiseaza partile inferioara, respectiv superioara ale chenarului;
o vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului;
o lhs - afiseaza latura stanga a chenarului;
o rhs - afiseaza latura dreapta a chenarului;
o void - fara bordura exterioara.
rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in
prezenta atributului "border". Atributul rules poate avea urmatoarele valori:
o none - nu se afiseaza chenar interior;
o groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col,
tfoot;
o rows - afiseaza chenar ntre linii;
o cols - afiseaza chenar ntre coloane;
o all - afiseaza chenar intre toate celule interioare.
18
width, height - specifica latimea, respectiv inaltimea tabelului. In cazul in care valorile specificate nu
sunt suficiente pentru afisarea continutului celulelor, valorile vor fi modificate automat de catre
browser astfel incat tot continutul sa fie afisat. Valorile se pot exprima absolut, in pixeli, sau relativ la
latimea ecranului (width), respectiv la inaltimea ecranului (height). Trebuie mentionat ca atributul
"height" nu face parte din specificatiile HTML.
Este recomandat sa lasi browserul sa calculeze valoarea pentru "height" in functie de continutul
tabelului.
bgcolor - specifica culoarea pentru fundalul tabelului.
bordercolor - specifica culoarea chenarului.
bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra
chenarului. Este recomandata folosirea de culori complementare pentru a obtine efectul scontat.
Sunt extensii Microsoft.
background - URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul in care dimensiunile
imaginii sunt mai mici decat cele ale tabelului, ea va fi repetata astfel incat sa acopere intregul fundal
al tabelului. Este extensie Microsoft.
cellspacing - specifica distanta dintre celule.
cellpadding - specifica marginea interioara a celulelor.
align - specifica alinierea pe orizontala a tabelului (stanga|centru|dreapta).
valign - specifica alinierea pe verticala a tabelului (sus|mijloc|jos).
summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.
<table>
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</table>
O forma mai complexa a unui tabel este:
<table>
<thead>
<tr>
<th>Nr. Crt</th>
<th>Nume Autor</th>
<th>Denumire Lucrare</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
19
</table>
<table>
<tr>
<th><font color=black>Col 1</font></th>
<th><font color=red>Col 2</font></th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
In cazul in care vrei ca tabelul din exemplul anterior sa fie afisat cu chenar:
<table border=1>
<tr>
<th>Col 1</th>
<th><font color=red>Col 2</th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
20
Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmatoarea sintaxa:
<caption [align=top|bottom|left|center|right]
[valign=top|bottom]>
...
</caption>
Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui
marcaj <table>, imediat dupa acesta.
align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In
HTML 4.0 atributul align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).
valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).
<tr [align=left|center|right]
[valign=top|middle|bottom|baseline]
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]>
....
</tr>
<th [align=left|center|right]
[valign=top|middle|bottom|baseline]
[background="url-imagine"] [colspan=n] [rowspan=m]
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]
[bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]>
....
</th>
<th>
<font color=red>Coloana 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td><center>Celula 1.1</center>;</td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</td>
</tr>
</tbody>
</table>
<td [align=left|center|right]
[valign=top|middle|bottom|baseline]
[background="url-imagine"] [colspan=n] [rowspan=n]
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]
[bordercolordark="#rrggbb"|culoare]
[nowrap] [abbr="text"]>
...
</td>
Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, in cazul marcajului <th>.
Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe
coloane, respectiv linii ale tabelului.
</table>
Exemplu utilzare rowspan:
Probabil ca multi se vor intreba de ce am prezentat atat de multe marcaje si atribute. In cele mai
multe cazuri, marcajele <table>, <tr>, <td> sunt suficiente pentru a construi un tabel. Pe masura ce
paginile HTML pe care le vei realiza vor deveni mai complexe, vei vedea singur de ce marcaje sau
atribute ai nevoie. Succes !
Lecia 5: Cadre
Cadrele ofera autorilor de pagini HTML posibilitatea de a pastra vizibila o parte a informatiei, in
timp ce o alta parte a informatiei este derulata (scroll) sau inlocuita.
Avantaje:
dimensiunea (KB) mai mica a fiecarui cadru in parte, comparativ cu cazul in care ar fi existat o singura
pagina, determina un timp de incarcare mai redus.
Dezavantaje:
Frameset defineste modul de impartire al ferestrei (spatiul alocat fiecarui cadru in parte).
Asa cum se vede mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc marcaje
frameset imbricate.
Dupa cum se poate observa mai sus, marcajul <frameset> are urmatoarele atribute:
border - defineste latimea chenarului; numai frameset-ul exterior va raspunde la valoarea acestui
atribut. Este o extensie Microsoft/Netscape.
bordercolor - specifica culoarea chenarului, in format RGB. Este o extensie Microsoft/Netscape.
cols - defineste (pe verticala) dimensiunile sau proportiile cadrelor in cadrul unui <frameset>.
Dimensiunile pot fi precizate ca:
o valoare absoluta (in pixeli)
o valoare relativa (in procente)
o * - semnifica spatiul ramas disponibil dupa afisarea cadrelor anterior definite
rows - defineste (pe orizontala) dimensiunile sau proportiile cadrelor in cadrul unui <frameset>.
Dimensiunile pot fi precizate ca:
o valoare absoluta (in pixeli)
o valoare relativa (in procente)
o * - semnifica spatiul ramas disponibil dupa afisarea cadrelor anterior definite
frameborder - specifica daca un cadru va afisa sau nu chenar. In cazul in care un cadru are setat
frameborder=no, iar cadrele adiacente au specificata afisarea chenarului, acest atribut nu va avea
efect pentru cadrul cu frameborder=no.
longdesc - specifica un link catre o descriere "lunga" a cadrului respectiv. Scopul acestei descrieri
este de a completa descrierea realizata prin atributul title.
src - specifica linkul catre continutul initial care va fi incarcat in elementul <frame>. Linkul poate fi o
cale absoluta (http://www.domeniu.ro/pagina.html) sau relativa (pagina.html).
name - atribuie un nume cadrului curent. Acest nume poate fi folosit in combinatie cu marcajul a (<a
href="pagina.html" target="RightFrame">...</a>) pentru a incarca o pagina intr-un anumit cadru.
26
noresize - cadrele pot fi redimensionate de catre utilizatori. Prin folosirea atributului noresize
browserul va bloca redimensionarea cadrelor de catre utilizator.
scrolling - specifica browserului afisarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate
lua urmatoarele atribute:
o auto - afisarea barei de scroll se face atunci cand este necesar (continutul depaseste spatiul
afisabil)
o yes - bara de scroll este permanent afisata
o no - bara de scroll nu va fi afisata, chiar si in eventualitatea in care este necesara.
marginwidth, marginheight - specifica distanta dintre marginea interioara a cadrului si continutul
afisabil. Atributul marginheight stabileste distanta pentru marginea superioara/inferioara a cadrului.
Atributul marginwidth stabileste distanta pentru marginea stanga/dreapta a cadrului.
Marcajul <noframes> reprezinta alternativa (codul HTML) care va fi afisata in browserele care nu
suporta cadre. Browserele care pot afisate cadre vor ignora acest marcaj.
<ul>
<li><a href="continut_cadru1.html">continut</a>
<li><img src="continut_cadru2.html" alt="imagine">
</ul>
</noframes>
</frameset>
</html>
Exemplul de mai jos defineste un <frameset> cu doua cadre orizontale, primul cadru avand alocat
25% din spatiul disponibil pe verticala, iar cel de al doilea cadru 75%:
text...
</noframes>
</frameset>
</html>
Lecia 6: Formulare
Intr-un limbaj mai "normal", formularele permit administratorului unui site sa adune informatii,
respectiv sa intre in contact cu utilizatorii site-ului sau.
Intr-o pagina HTML pot exista mai multe formulare, insa numai informatiile dintr-un singur formular
pot fi trimise la un anumit moment catre server.
Exista doua metode (method) prin care un browser poate transmite informatiile catre server:
Atributul action specifica fisierul sau aplicatia de pe server careia ii vor fi trimise informatiile din
formular, pentru prelucrare.
29
In general, campurile unui formular destinate introducerii datelor, se specifica prin intermediul
marcajului <input>.
<input [type=button|checkbox|file|hidden|image|
password|radio|reset|submit|text] [name=nume]
[value=valoare] [size=identificator]
[maxlength=x] [checked] [disabled]
[readonly]
type
o button - un buton pe care poti face "click", declansand astfel o actiune prin intermediul unui
script (ex. JavaScript)
o checkbox - caseta de validare. Optiunea checked iti permite sa specifici daca aceasta caseta
este "marcata" sau nu
o file - permite utilizatorului sa selecteze un fisier din computerul propriu, pentru a-l incarca pe
server
o hidden - este "invizibil" utilizatorului. Pastreaza o pereche variabila/valoare care nu este
vizibila utilizatorului.
o submit - informatiile din formular sunt trimise catre server
o image - un buton avand o imagine "aplicata", avand o functie asemanatoare cu submit.
o password - un camp de tip text, care inlocuieste fiecare caracter tastat cu un asterix (*), din
motive de securitate
o radio - buton cu interblocare; un grup de elemente radio au acelasi nume, insa numai un
singur element poate fi selectat
o text - permite introducerea de text de catre utilizator
o reset - "curata" intregul formular, revenind la valorile implicite
name - numele controlului (elementului)
value - valoarea atribuita elementului
size - numarul de caractere care vor fi vizibile intr-un camp de tip text sau password
maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau password
disabled - dezactiveaza un element
readonly - un element poate fi citit, dar nu poate fi modificat
Un alt marcaj in cadrul formularelor este <textarea>...</textarea>. El permite realizarea unor spatii
largi pentru introducerea de informatii (de tip text).
Atributele rows si cols specifica dimensiunea (numarul de randuri, respectiv coloane) ale campului
de tip text rezultat.
Ultimul marcaj pe care il voi prezenta este <select>...</select>. El este folosit pentru afisarea
meniurilor derulante.
31
Este posibil ca unii dintre voi sa considere utilizarea formularelor greu de realizat, atata vreme cat nu
au cunostintele necesare pentru a prelucra pe server informatiile preluate de la utilizatori. In parte este
adevarat, insa in acelasi timp este necesara cunoasterea mecanismului client - server, a modului in
care se realizeaza transferul de informatii. Pentru cei vor fi interesati sa studieze un limbaj de
programare web, formularele vor reprezenta un punct de plecare.
Folositi in mod logic notiunile invatate in acest curs (exclusiv cadre) si incercati sa imbinati
armonios notiunile de formatare a paginilor cu cele de prezentare vizuala.
ATENTIE:
- numai site-urile care au minim continutul cerut mai sus si vor fi incarcate pe Internet vor fi
verificate de tutor!
- trimiteti tutorului doar linkul catre adresa unde ati incarcat proiectul.
Orice arhiva cu proiectul, atasata la emailul catre tutor va genera stergerea automata a emailului
respectiv!!!
33
Paginile HTML reprezinta o combinatie statica de text si imagini; odata incarcat in browser,
continutul paginilor HTML nu poate fi modificat decat prin folosirea unor tehnologii (sau limbaje)
precum JAVA, JavaScript, VBScript, DHTML, FLASH.
Prin intermediul acestor tehnologii poti obtine efecte interesante, prin care sa captezi interesul celor
care viziteaza pagina ta. HTML contine o serie de marcaje dedicate introducerii continutului
executabil in paginile HTML: <applet>, <object>, <script>.
este introdus in pagina HTML prin intermediul marcajelor mentionate mai sus, sub forma unui
applet, script, etc.
pagina HTML este incarcata pe server
serverul trimite pagina HTML catre client (browser)
browserul executa scriptul sau applet-ul din pagina HTML
Applet-ul este un program scris in limbajul JAVA care este rulat (in general) intr-un browser.
Browserul din computerul care ruleaza applet-ul trebuie sa suporte JAVA.
Script-ul este o secventa de cod JavaScript, VBScript sau DHTML care este rulata intr-un browser.
Un applet va ocupa o zona dreptiunghiulara in browser; in unele cazuri, prin intermediul marcajului
<param> pot fi transmisi parametri catre applet. Daca esti interesat sa utilizezi applet-uri in paginile
tale, insa nu stii sa programezi in JAVA, poti gasi applet-uri gratuite pe Internet (ex. www.free-
applets.com)
In exemplul de mai sus, in cazul in care secventa de film nu poate fi rulata in browser, se va incerca
afisarea celui de-al doilea marcaj <object>
In cazul in care secventele de cod nu sunt declarate ca functii, ele vor fi executate in momentul
incarcarii paginii in browser. In acelasi timp, secventele de cod declarate ca functii pot fi apelate de
anumite evenimente (onLoad, onClick, onMove, etc.) asociate anumitor marcaje.
Poate unii dintre voi vor fi dezamagiti, insa aceasta lectie nu contine decat un singur exemplu. De ce?
Inserarea continutului executabil intr-o pagina HTML implica cunostinte de JavaScript, VBScript,
FLASH sau JAVA, cunostinte care nu fac obiectul acestui curs; mi-ar fi imposibil sa prezint
facilitatile oferite de fiecare tehnologie sau limbaj in parte. In acelasi timp, este bine sa stii care sunt
posibilitatile si alternativele pe care le ai atunci cand realizezi o pagina HTML.
35
In final, iti recomand sa folosesti echilibrat efectele pe care le poti introduce intr-o pagina HTML
folosind tehnologii precum JavaScript, FLASH, JAVA, etc.
IMPORTANT !
Testul online are 20 de intrebari grila, fiecare intrebare avand 4 variante de raspuns din care
doar una singura este corecta.
Odata accesat testul online, acesta poate fi sustinut o singura data. Pentru rezolvarea lui ai la
dispozitie 20 de minute din momentul accesarii/inceperii testului.
Inchiderea ferestrei in care este afisat testul online, fara a salva raspunsurile, va duce la
anularea accesului tau la test si inscrierea automata a unui punctaj nul.
Nu uita sa salvezi rezultatele cand ai terminat testul sau inainte ca timpul acordat testarii sa
expire!
MULT SUCCES!
Echipa AcademiaOnline.ro