Comunicarea are întotdeauna un obiectiv. Chiar dacă nu-l conştientizăm, de fiecare
dată, el există. A-l conştientiza este imperios necesar. A vorbi fără să ştii ce vrei, este ca şi
cum ai trage cu puşca fără să ştii unde-i ţinta. Obiectivul ultim, aflat în spatele oricărei intenţii
de comunicare, este influenţarea atitudinii, gândirii şi comportamentului interlocutorului.
Aceasta ţine de nivelul pragmatic al comunicării verbale (relaţia semn-om) şi nu de nivelul
semantic (relaţia semn-semnificat) sau de cel sintactic (relaţia semn-semn). Am putea spune
„Este curent aici” şi cineva s-ar ridica să închidă fereastra sau uşa. Efectul obţinut nu este
regăsit nici în sintaxa şi nici în semantica mesajului meu.
Comunicarea are întotdeauna un obiectiv. Chiar dacă nu-l conştientizăm, de fiecare
dată, el există. A-l conştientiza este imperios necesar. A vorbi fără să ştii ce vrei, este ca şi
cum ai trage cu puşca fără să ştii unde-i ţinta. Obiectivul ultim, aflat în spatele oricărei intenţii
de comunicare, este influenţarea atitudinii, gândirii şi comportamentului interlocutorului.
Aceasta ţine de nivelul pragmatic al comunicării verbale (relaţia semn-om) şi nu de nivelul
semantic (relaţia semn-semnificat) sau de cel sintactic (relaţia semn-semn). Am putea spune
„Este curent aici” şi cineva s-ar ridica să închidă fereastra sau uşa. Efectul obţinut nu este
regăsit nici în sintaxa şi nici în semantica mesajului meu.
Modelarea datelor via XML. Design patterns in contextul specificarii document...Sabin Buraga
An introduction to XML (Extensible Markup Language), including several considerations regarding the use of design patterns in the context of semi-structural data modeling.
Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).
Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).
Patrimoniul cultural PROIECT clasa a 6 a IECHEI SORAYA GABRIELA
Curs html
1. 1
Lecţia 1: Structura unui document HTML. Notiuni de baza.
1.1 Ce este HTML?
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.
Se remarca cateva trasaturi cum ar fi:
independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe
care se realizeaza afisarea);
structurarea formatarii;
posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate
face referinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre
documente diferite).
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_marcaj optiune1=valoare1 optiune2=valoare2 ...>
................</nume_marcaj>
Exista doua tipuri de marcaje:
- individuale (ex. <br>)
- perechi (ex. <p>...</p>) - de mentionat ca sfarsitul unui marcaj este indicat prin
utilizarea caracterului '/' in fata numelui de marcaj
In functie de modul de formatare a paginii, avem marcaje de tip:
- block: este afisat sub elementul anterior (ex. <p>)
- inline: este afisat dupa elementul anterior (ex. <span>)
- table: este afisat sub forma unui tabel
Marcajele perechi pot fi imbricate:
<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Browserele vor ignora marcajele si optiunile pe care nu le recunosc.
1.2 Structura unui document HTML
Un document HTML 4 are urmatoare structura:
1. o linie continand versiunea HTML
2. sectiunea HEAD, delimitata de marcajele <HEAD> </HEAD>
3. sectiunea BODY, delimitata de marcajele <BODY> </BODY> sau <FRAMESET> </FRAMESET>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<body>
...........
</body>
4. 4
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).
<DIV [ ALIGN="left|center|right"] style="..">
.................................
</DIV>
1. Conform specificatiilor HTML 4.01, este recomandata folosirea marcajului <div> pentru centrarea textului,
in locul marcajului <center> exemplu.
2. <div> poate fi folosit ca un container pentru alte elemente de tip "block".
Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj <div>, insa pentru a se evita formatarea
explicita pe fiecare paragraf in parte (ex. fontul), se va defini stilul de formatare pentru marcajul <div>, stil care
va fi preluat de paragrafele mentionate.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate marcajele prezentate
in aceasta lectie. Valideaza pagina la adresa http://validator.w3.org/
Lecţia 2: Liste si referinte
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:
1. liste de tip definitie
2. liste ordonate (numerotate)
3. liste neordonate (marcate)
2.1.1 Liste de tip definitie
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.
Lista de tip definitie este introdusa de marcajele:
<dl>...</dl> - lista definitii (definition list)
<dt> - termenul definit (definition term)
<dd> - definitie (definition)
<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>
Poti vizualiza exemplul de mai sus in browserul tau aici.
5. 5
2.1.2 Liste neordonate
Sunt introduse de marcajele:
<ul>...</ul> - lista neordonata (unordered list)
<li> - element lista
<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>
Poti vizualiza exemplul de mai sus in browserul tau aici.
Atributul square precizeaza tipul maracatorului
2.1.3 Liste ordonate
Sunt introduse de marcajele:
<ol>...</ol> - lista ordonata (ordered list)
<li> - element lista
<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>
Poti vizualiza exemplul de mai sus in browserul tau aici.
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.
Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
1. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste. Valideaza pagina la adresa
http://validator.w3.org/
2.2 Referinte (link-uri)
Marcajul HTML principal pentru introducerea referintelor catre alte pagini HTML sau catre elemente din cadrul
aceleiasi pagini web este <a>. El trebuie sa contina atribute, in caz contrar neafectand formatarea documentului.
Exemplul urmator nu va afecta formatarea documentului:
<a>Aici</a> ar trebui sa fie un link !
6. 6
Pentru a activa linkul de mai sus vom adauga atributul href.
Exemplul urmator arata formatarea documentului:
<a href="pagina.html">Aici</a> este un link !
Referintele pot fi
absolute (ex.<ahref="http://www.domeniu.ro/pagina.html">http://www.domeniu.ro/pagina.html<a>) sau
relative (ex. <a href="pagina.html">pagina.html<a>).
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.)
Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.
Presupunem ca ai un site cu urmatoare structura de directoare:
/director1
/director2
Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi urmatoarea secventa:
<a href="../director2/pagina.html">Un link oarecare</a>
Pentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul superior al sitului) voi
folosi urmatoarea secventa:
<a href="director1/pagina.html">Un link oarecare</a>
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.
Ancorele asigura usurinta in navigare in paginile de dimensiuni mari.
O ancora are urmatorul format
<a name="nume_ancora">...</a>
Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva !
In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor:
<a name="xxx">...</a>
<a name="XXX">...</a>
In HTML xxx si XXX inseamna acelasi lucru!
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>
Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.
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>
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza o pagina HTML (folosind NotePad) pe baza unui text existent, care sa includa ancore. Folosind
pagina realizata la exercitiul precedent (liste) si insereaza linkuri catre ancorele create.
Lecţia 3: Imagini si sunete
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.
7. 7
3.2 Ce trebuie sa stiu despre imagini ?
Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:
imaginea aceasta da "valoare" paginii mele?
o dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cu
mesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu
este suficient pentru a face o pagina atractiva.
pot sa "imprumut" imaginea?
o voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care
sunt oferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite
contra cost (din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este
improbabil sa verifice cineva provenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat
in judecata (chiar si in Romania) este real.
o nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil.
Responsabilitatea in a determina cui ii apartine imaginea respectiva iti apartine in intregime.
ce dimensiunea are imaginea?
o pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari
(> 25-30 k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii
si vor abandona vizualizarea paginii.
culorile sunt "portabile"?
o o problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare
sau browsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau sa
arate roz pe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite
culori care arata la fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista
impreuna cu codurile lor in format hexa aici.
ce format de imagine sa folosesc?
o Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva
sunt universal recunoscute de browsere:
GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fara pierdere de
calitate.
JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de
compresie cu pierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va
pierde din calitate, devenind in final inutilizabila.
PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fara pierdere de
calitate. Are in general dimensiuni mai mari decat primele doua formate mentionate.
3.3 Cum se introduce o imagine intr-o pagina HTML?
Introducerea unei imagini intr-o pagina HTML se face prin marcajul <img>
<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>
8. 8
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100" border="0"
hspace="10" vspace="10">
</body>
</html>
Poti vizualiza exemplul de mai sus in browserul tau aici.
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.
<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>
Poti vizualiza exemplul de mai sus in browserul tau aici.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi de un text
pe care sa il formatezi folosind marcajele studiate in primele doua lectii. Modifica valorile atributelor
marcajului <img> si vizualizeaza pagina in browser.
3.4 Inserarea de fisiere audio in paginile HTML
In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii).
Dimensiunile mari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la
infinit sunt cateva din argumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile,
existand multe pagini web care combina in mod fericit parte audio cu cea vizuala.
Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:
sub forma unei referinte(link)
prin intermediul marcajelor embed sau bgsound
<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>
<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200">
9. 9
</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! Poti vizualiza exemplul de mai sus in browserul tau aici.
Marcajul embed are urmatoarele atribute:
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> Poti vizualiza exemplul de mai sus in browserul tau aici.
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.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Cauta pe Internet o secventa audio in format midi. Realizeaza apoi o pagina HTML (folosind NotePad) care sa
includa aceasta secventa audio. Modifica valorile atributelor marcajului <embed> si vizualizeaza pagina in
browser.
Lecţia 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>
10. 10
Semnificatiile atributelor marcajului <table> sunt:
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.
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.
Cea mai simpla forma a unui tabel se prezinta astfel:
<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>
11. 11
<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> </table>
Poti vizualiza exemple de tabele in browserul tau, aici.
<thead>...</thead> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta
antetul tabelului. Poate aparea o singura data in cadrul unui tabel.
<tbody>...</tbody> este un marcaj care contine unul sau mai multe randuri de celule. Pot fi definite mai
multe astfel de sectiuni in cadrul aceluiasi tabel (ex. in cazul in care exista stiluri de formatare diferite pentru
sectiuni diferite ale tabelului).
<tfoot>...</tfoot> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta subsolul
tabelului. Poate aparea o singura data in cadrul unui tabel. Este obligatoriu sa apara inaintea marcajului
<tbody>.
Continutul fiecarei celule poate fi formatat individual:
<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>
12. 12
Poti vizualiza exemplele de mai sus in browserul tau, aici.
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.
Are urmatoarele atribute:
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).
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu utilizare caption </caption>
<tr>
<th>
<font color=black>Col 1</font>
</th>
<th>
<font color=red>Coloana 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>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Marcajul <tr> defineste o linie intr-un tabel. Are urmatoarea sintaxa:
<tr [align=left|center|right] [valign=top|middle|bottom|baseline]
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]
[bordercolorlight="#rrggbb"|culoare]>
....
</tr>
Poate avea urmatoarele atribute:
align - specifica modul in care va fi aliniat pe orizontala continutul liniei de tabel.
valign - specifica modul in care va fi aliniat pe verticala continutul liniei de tabel.
bgcolor - specifica culoarea pentru fundalul liniei de tabel.
bordercolor - specifica culoarea chenarului celulelor din linie de tabel.
13. 13
bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului
de tabel.
Marcajul <th> defineste o celula din antetul tabelului. Sintaxa este:
<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>
Poate avea urmatoarele atribute:
align, valign - indica alinierea orizontala si verticala a continutului celule, in celula.
colspan - specifica numarul de coloane peste care se intinde celula curenta spre dreapta.
rowspan - specifica numarul de linii peste care se intinde celula curenta in jos.
nowrap - impiedica "ruperea" textului din celula pe mai multe linii.
bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor
mentionate mai sus.
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<thead>
<tr>
<th>
<font color=black>Col 1</font>
</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>
Poti vizualiza exemplele de mai sus in browserul tau, aici.
Marcajul <td> defineste o celula din tabel.
Are urmatoarea sintaxa:
<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>.
14. 14
Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane,
respectiv linii ale tabelului.
Exemplu utilizare colspan:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td colspan="2"><s>Celula 2.1</s></td>
</tr>
</table>
Exemplu utilzare rowspan:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tr>
<td rowspan="2"><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td ><s>Celula 2.2</s></td>
</tr>
</table>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
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 !
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza (folosind NotePad) un tabel cu latimea 80%, chenar 1, aliniat la dreapta in browser si avand cel
putin 4 randuri a cate 3 celule, fiecare celula cu un fundal diferit. Incearca apoi sa modifici acest tabel
combinand doua coloane.
Lecţia 5: Cadre
Incepand cu Netscape Navigator 2, autorii paginilor HTML au posibilitatea de a imparti fereastra browserului
in cadre, fiecare cadru afisand un document HTML diferit. Foarte rapid, cadrele au castigat popularitate, fiind
adoptate de Internet Explorer, iar mai tarziu incluse in specificatiile HTML 4.
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:
unele motoare de cautare nu indexeaza siturile realizate cu cadre
autorul trebuie sa tina evidenta unui numar mare de pagini HTML
exista unele browsere care nu pot afisa pagini realizate cu cadre
este dificil de printat intreaga pagina
Cadrele sunt introduse prin perechea de marcaje <frameset>...</frameset>, respectiv marcajul <frame>.
Frameset defineste modul de impartire al ferestrei (spatiul alocat fiecarui cadru in parte).
15. 15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset cols="30%, 70%">
<frameset rows="200, 200">
<frame src="continut_cadru1.html">
<frame src="continut_cadru2.html">
</frameset>
<frame src="continut_cadru3.html">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.html">continut</a>
<li><img src="continut_cadru2.html" alt="imagine">
<li><a href="continut_cadru3.html">continut</a>
</ul>
</noframes>
</frameset>
</html>
Asa cum se vede mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc marcaje frameset
imbricate.
Poti vizualiza exemplul de mai sus in browserul tau, aici.
<frameset [border=n] [bordercolor=#rrggbb]
[cols=x,y,..] [rows=x,y,..]
...
</frameset>
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
Cadrele propriu-zise sunt introduse prin marcajul <frame>.
<frame [frameborder=yes|no] [longdesc=URL]
[src=URL] [name=identificator] [noresize]
[scrolling = auto|yes|no] [marginwidth=x]
[marginheight=y]
...
</frame>
Marcajul <frame> are urmatoarele atribute:
16. 16
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.
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.
Exemplul de mai jos defineste un <frameset> cu doua coloane:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset cols="30%, 70%">
<frame src="continut_cadru1.html">
<frame src="continut_cadru2.html">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.html">continut</a>
<li><img src="continut_cadru2.html" alt="imagine">
</ul>
</noframes>
</frameset>
</html>
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.
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Exemplul de mai jos defineste un <frameset> cu doua randuri:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset rows="30%, 70%">
<frame src="continut_cadru1.html">
<frame src="continut_cadru2.html">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.html">continut</a>
17. 17
<li><img src="continut_cadru2.html" alt="imagine">
</ul>
</noframes>
</frameset>
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
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%:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset rows="*,3*">
<frame name="navigare" src="navigare.html">
<frame name="continut" src="continut.html">
<noframes>
text...
</noframes>
</frameset>
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza o pagina HTML (folosind NotePad), care sa contina 2 cadre verticale. Primul cadru (stanga) trebuie
sa contina 3 meniuri (linkuri), fiecare facand trimitere catre o pagina HTML diferita, care se va incarca in
cadrul 2 (dreapta). Toate paginile din cadrul 2 vor avea bara de scroll; schema de culori va fi diferita de la
pagina la pagina (font + fundal).
Lecţia 6: Formulare
Formularele HTML reprezinta o modalitate de comunicare intre utilizatori si server; prezinta o utilitate
deosebita in momentul in care sunt folosite in combinatie cu scripturi server-side (ex. PHP, Perl).
Intr-un limbaj mai "normal", formularele permit administratorului unui site sa adune informatii, respectiv sa intre
in contact cu utilizatorii site-ului sau.
Formularele sunt introduse prin marcajul <form>...</form>. Perechea <form>...</form> este o sectiune a
paginii HTML (container) care include mai multe controale (elemente). In general, utilizatorii modifica aceste
elemente (introducand text, selectand diferite optiuni, etc.); in final, aceste informatii sunt trimise serverului
pentru a fi prelucrate.
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplu formular</title>
</head>
<body>
<form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post">
Nume: <input type="text" id="nume">
Prenume: <input type="text" id="prenume">
<input type="radio" name="sex" value="Masculin"> Masculin
<input type="radio" name="sex" value="Feminin"> Feminin
<input type="submit" value="Trimite"> <INPUT type="reset">
</form>
</body>
18. 18
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Exista doua metode (method) prin care un browser poate transmite informatiile catre server:
metoda "get" - informatiile din formular sunt adaugate la URL
metoda "post" - informatiile din formular nu sunt adaugate la URL
Atributul action specifica fisierul sau aplicatia de pe server careia ii vor fi trimise informatiile din formular, pentru
prelucrare.
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]
Marcajul <input> are urmatoarele atribute:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplu formular</title>
</head>
<body>
<form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post">
Nume: <input type="text" id="nume">
Prenume: <input type="text" id="prenume">
<input type="radio" name="sex" value="Masculin"> Masculin
<input type="radio" name="sex" value="Feminin"> Feminin
Ce masina ai:
<input type="checkbox" name="alegere1" value="Dacia"> Dacia
<input type="checkbox" name="alegere2" value="Trabant"> Trabant
<input type="submit" value="Trimite"> <INPUT type="reset">
</form>
</body>
19. 19
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Un alt marcaj in cadrul formularelor este <textarea>...</textarea>. El permite realizarea unor spatii largi pentru
introducerea de informatii (de tip text).
<textarea [cols=x] [rows=y]
[name=nume] [wrap] [readonly]
...
</textarea>
Atributele rows si cols specifica dimensiunea (numarul de randuri, respectiv coloane) ale campului de tip text
rezultat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body>
<title>Exemplu formular</title>
</head>
<form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post">
<textarea cols="9" rows="9">....text....</textarea>
<input type="submit" value="Trimite"> <INPUT type="reset">
</form>
</body>
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Ultimul marcaj pe care il voi prezenta este <select>...</select>. El este folosit pentru afisarea meniurilor
derulante.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplu formular</title>
</head>
<body>
<form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="get">
<select name="meniu">
<option>hamburger</option>
<option>hotdog</option>
<option selected>mici</option>
</select>
<input type="submit" value="Trimite"> <INPUT type="reset">
</form>
</body>
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
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.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
2. Realizeaza o pagina HTML (folosind NotePad), care sa contina un formular avand o structura asemanatoare
cu cel din pagina de inscriere la Academia Online. Elementele formularului vor fi integrate intr-un tabel.
Impreuna cu colegii tai de echipa, construiti un site cu 5 pagini care sa relationeze intre ele. Folositi
in mod logic notiunile invatate in acest curs: inserare de imagini, liste, cel putin un
formular, cadre (optional), tabele.
Incercati sa imbinati armonios notiunile de formatare a paginilor cu cele de prezentare
20. 20
vizuala.
Alegeti un subiect/scop/tematica/destinatie pentru site-ul realizat. Validati fiecare pagina in parte din
computerul personal.
Gazduiti gratuit site-ul realizat (ex: home.ro)
Lecţia 7: Continut executabil (Java, JavaScript, VBScript)
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>.
7.1 Cum functioneaza ?
Pe scurt, continutul executabil dintr-o pagina HTML are urmatorul "ciclu de viata":
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
In timpul executiei, applet-urile sau script-urile pot:
genera sau modifica continutul paginii HTML
interactiona cu utilizatorul
valida informatiile dintr-un formular
crea noi ferestre sau rula aplicatii independente
Probabil ca te intrebi ce inseamna applet sau script.
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.
7.2 Cum introduc un applet intr-o pagina HTML?
<applet code="MissileCommando.class" name="Joc" align="left"
width="300" height="300">
<param name="bgColor" value="black">
</applet>
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)
Poti vizualiza exemplul de mai sus in browserul tau aici.
7.3 Cum folosesc marcajul object?
Scopul marcajului object este de a introduce intr-o pagina HTML tipuri de date care nu sunt suportate in mod
normal de un browser (o secventa de film, o animatie FLASH, etc.).
<object data="film.mpeg" type="application/mpeg">
<object data="aternativ.jpg" type="image/jpeg">
</object>
</object>
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>
7.4 Cum introduc o secventa de cod JavaScript sau VBScript intr-o pagina HTML?
In general, secventele de cod JavaScript sau VBScript se gasesc in sectiunea HEAD, insa pot fi declarate si in fisiere
externe.
<script type="text/javascript" language="JavaScript">
function Test() {
21. 21
alert("Atentie");
}
</script>
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.
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 !
Incepand cu lunea viitoare, timp de 2 saptamani, ai acces la testarea online.
Intra la testul online atunci cand stii ca esti bine pregatit!
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