Laborator HTML

Introducere in tehnologii Web

1. Reteaua Internet.
2. World Wide Web (www). Pagini Web.
3. HTML.
4. Tema proiect.

1. Reteaua Internet

1. 1 Scurt istoric

In 1969 apare prima retea cu comutare de pachete, denumita ARPAnet (Advanced

Research Projects Agency network), fondata de Pentagon, punctul de start al retelei Internet
actuale.
In anul 1980, NSF (National Science Foundation) reproiecteaza modelul ARPAnet,
transformindu-l intr-o retea moderna, arhitectura primind numele de Internet, interconectind la
inceput super-calculatoare guvernamentale, institutii academice si centre de cercetare si utilizind
o suita standard de protocoale de comunicatie reprezentata de TCP/IP. In anii care urmeaza,
Internetul se dezvolta spectaculos, intr-o maniera exponentiala.
Serviciile traditionale ale Internetului se rezumau in anii '80 la posta electronica (e-mail),
accesul la grupuri de stiri (usenet), conectare la distanta (telnet) si transfer de fisiere (FTP). In
1990-1991 apar doua noi servicii: Archie utilizat pentru cautarea fisierelor pe Internet si Gopher,
structura de meniuri ierarhizate facilitind organizarea documentelor pe Internet.
Unul dintre cele mai importante si de succes servicii ale Internetului, World Wide Web-
ul - sau, mai pe scurt, Web ori spatiul WWW - a fost creat la CERN (Centrul European de
Cercetari Nucleare de la Geneva) în anul 1989 de catre fizicienii Tim Berners-Lee, Robert
Caillau si echipa lor, cu scopul de a avea acces mai usor la informatiile tehnice ale manualelor
de utilizare a calculatoarelor. Data de 12 noiembrie 1990 se considera a fi ziua de nastere oficiala
a Web-ului. Dezvoltarea ulterioara a sistemului a fost facilitata de programul Mosaic, sub mediul
X Window, foarte simplu de folosit si poseda facilitati multimedia, de la NCSA (Centrul National
pentru aplicatiile supercalculatoarelor, Universitatea Urbana-Champaign) furnizat gratuit pe
Internet începind din 1993.
Web-ul reprezinta un sistem de distributie locala sau globala a informatiilor hipermedia.
Din punct de vedere tehnic, spatiul Web pune la dispozitie un sistem global si standardizat de
comunicare multimedia, informatiile fiind organizate asociativ si fiind distribuite in functie de
cererile utilizatorilor, functionind conform modelului client-server. Web-ul, cu toata dezvoltarea
lui spectaculoasa, nu trebuie confundat cu Internetul, ci poate fi vazut drept cea mai dinamica si
"minunata" componenta software a acestuia, neputind exista insa fara infrastructura hardware a
retelelor mondiale interconectate.
Cresterea masiva a numarului de servicii si produse Web este data de utilizarea unui tot
mai bogat continut informational: imagini, video si sunet.Combinarea si integrarea acestor medii
formeaza multimedia, utilizata pe scara larga in reprezentarea si interschimbarea informatiilor.
Autoritatile care se ocupa de reteaua INTERNET:
- administrativ: ISOC (Internet SOCiety)
- tehnic: IETF (Internet Engineering and Task Force)
- furnizarea de IP-uri(adrese), informatii si statistici: InterNIC
Laborator HTML

In ROMANIA serviciile de Internet sunt asigurate de Institutul Central de Informatica

(ICI) si ROMTELECOM. Costurile implicate de extinderea retelei in tara noastra sunt
suportate la nivel regional si local, astfel ca legatura dintre ICI si INTERNET este asigurata din
fonduri guvernamentale, insa fiecare abonat suporta costurile liniei telefonice inchiriate sau
comutate, prin care se aboneaza la nodul ICI.

Cu alte cuvinte o definitie a Internetului ar trebui sa cuprinda urmatoarele:

- mediu informational si de calcul, cu bogate resurse si servicii
- mediu de comunicare, de schimb al ideilor, de instruire dar si de autoinstruire
- mediu de partajare a informatiilor
- educare, e-learning = invatamant la distanta
- mediu al comertului electronic si e-business = magazine virtuale
- divertisment
- pe Net poti participa la licitatii, poti cauta un job, poti face bani navigand sau citind
emailuri

Arhitectura INTERNET de tip client/server permite oricarei persoane fizice sau juridice
sa utilizeze instrumentele informatice in doua directii opuse, dar complementare: ca sistem
informational intern si ca instrument de comunicare externa.
Arhitectura client/server consta in faptul ca un calculator ce navigheaza pe Internet cu
ajutorul unui browser este client-el utilizeaza resursele puse la dispozitie, partajate de
calculatoarele server. De retinut: serverele sunt calculatoare performante ce functioneaza pe
baza unui soft special si ele pot fi pe de o parte server dar pot rula ca si client. Astfel un browser
de web este CLIENT.

1. 2 Functionarea Internetului
Transmisia datelor in INTERNET se supune unui set de reguli, incluse in protocoalele
TCP/IP (Transmission Control Protocol / Internet Protocol). Principalele caracteristici ale
acestora sunt:
- Standardele de protocoale deschise , disponibile gratuit si independente de tipul
calculatorului sau a sistemului de operare utilizat;
- Independenta fata de tipul relelei, ceea ce perrnite interconectarea unor retele de tipuri
diferite;
- Protocoale de inalt nivel standardizate, serviciile fiind disponibile in toata lumea.

Adresarea
Calculatoarea care sunt conectate la INTERNET poarta denumirea de hosturi si sunt
identificate unic printr-o adresa si un nume. O adresa INTERNET este reprezentata pe 32 de
biti. In mod uzual, o adresa de retea se regaseste intr-un format zecimal cu punct:
nl.n2.n3.n.4 Prin aceasta notatie, in fiecare din cei patru octeti se reprezinta o valoare cuprinsa
intre 0 si 255.
Reteaua este partajata in domenii si subdomenii sub forma unei structuri arborescente.
Avand in vedere aceasta partajare, numele unui calculator (host) se constituie dupa urmatorul
model: nume host . nume subdomeniu . nume domeniu Exemple: ccp.pub.ro, amcsit.ro,
fin.ase.ro, snr.ro, etc.

1. 3 Protocolul TCP/IP
TCP/IP a fost lansat in anul 1980 de Departamentul Apararii al SUA in proiectul
DARPA (Defence Advanced Research Project Agency). Ulterior acesta a fost integrat in
Laborator HTML

sistemul de operare UNIX, permitand astfel interconectarea calculatoarelor in reteaua

INTERNET.
TCP/IP este organizat patru nivele :
- Aplicatie (FTP, TELNET, WEB, SMTP)
- Transport (TCP, UDP)
- Internet (IP)
- Acces

Acces
Din punct de vedere al conexiunilor fizice exista trei posibilitati: reteaua telefonica,
legaturi pe linii numerice si linii specializate. Reteaua telefonica ajunge pana la un debit de
33600 biti-s, ceea ce inseamna ca un fisier de 1Mb se poate transfera teoretic in 8-10 minute, iar
un CD de 640 Mb, in 4 zile. Deoarece pe liniile telefonice informatiile sunt analogice, iar in
calculator informatiile sunt reprezentate prin semnale digitale, este necesar un
modulator/demudulator (modem) care sa realizeze conversia. Legaturile pe linii numerice (ISDN
in SUA sau RNIS in Franta) utilizeaza doua canale cu un debit de 64Kb/s fiecare. Deoarece
informatiile se transmit digital pe liniile numerice nu mai avem nevoie de modem ci de
adaptoare. Liniile specializate (LS) au un debit mult mai mare care incepe de la 1.5 Mb/s (liniile
numite T1) pana la 45 Mb/s (liniile numite T3)

1. 4 Servicii de Internet

Serviciile de INTERNET furnizate utilizatorilor pot fi grupate in cinci categorii:

a. Servicii pentru administrare (protocoalele TCPlIP, SMTP, SNMP);
b. Serviciile pentru comunicarea dintre persoane (E-mail, News, Usenet);
c. Servicii pentru comunicarea dintre calculatoare (Telnet);
d. Servicii pentru difuzarea informatiei (FTP, Web, Gopher, Mosaic);
e. Servicii pentru cautarea informatiei (Archie, Veonica, Wais).

1.4.1 Serviciul de posta electronica

Posta electronica(e-mail) functioneaza dupa principiul postei clasice, astfel ca daca o

persoana scrie o scrisoare si o introduce in plic pe care scrie atat adresa destinatarului cat si
adresa sa si o depune intr-o cutie postala, ea va ajunge intr-o anumita perioada de timp la
destinatar, prin intermediul postasului.
Standardul actual folosit pentru trimiterea de astfel de mesaje prin INTERNET se
bazeaza pe standardul RFC. Utilizatorii sunt identificati prin adrese de e-mail unice in lume,
care au urmatoarea structura: nume_utilizator@nume_host
La ora actuala standardul RFC 822 a fost completat de standardul RFC 1521 numit
MIME (Multipurpose Internet Mail Extension), introdus pentru a permite transmiterea de mesaje
si in alte limbii decat engleza, mai ales cele ce necesitau caractere nelatine, cat si posibilitatea de
a transmite imagini si sunete atasate de scrisori.

Din punct de vedere functional, serviciul de posta are doua parti:

- interfata cu utilizatorul prin care se pregatesc scrisorile, se expediaza si se citesc cele primite;
- agentul de transmitere, care asigura transportul corespondentei la destinatar.
Laborator HTML

Exista mai multe programe de posta electronica, dintre care cele mai utilizate sunt
Microsoft Outlook, Pine, Pegasus, Eudora, etc. Mai exista si browsere de INTERNET care
contin servicii de mail incorporate, asa cum este si browser-ul NETSCAPE.
Fiecare utilizator are o cutie postala unde se primesc scrisorile expediate pe adresa sa. In
momentul pregatirii unei scrisori campurile ce contin data si adresa de expeditie sunt completate
automat de sistem, conform cu informatiile precizate la instalarea programului sau la crearea
contului de utilizator. Restul campurilor din antetul scrisorii au structura urmatoare:
To: adresa destinatarului/destinatarilor;
Subject: subiectul scrisorii;
Cc: lista cu alte adresa de destinatie, unde se vor expedia copii ales scrisorii (Carbon copy);
Bcc: lista cu alte adrese de destinatii, unde se vor expedia copii oarbe ale scrisorii (Blind carbon
copy).

Lista de adrese specificata in campul Cc face parte din scrisoare si va fi transmisa la toti
destinanatarii acestia. Lista de adrese din campul Bcc nu face parte din scrisoare, deci nu va fi
vazuta de toti destinatarii, de unde si denumirea de copii oarbe.
Dupa receptia scrisorilor, conform unei reguli de politele, destinatarul trebuie sa raspunda in
maxim 24 de ore. Exista posibilitatea ca scrisorile care sosesc la un destinatar sa fie reexpediate
catre alte persoane din retea.
In anumite situatii utilizatorii nu sunt conectati direct la INTERNET, spre exemplu
acestia lucreaza intr-o retea locala de PC-uri care au acces la un server de e-mail, capabil sa
expedieze si sa receptioneze scrisori. Comunicarea dintre PC-uri si server se face prin
intermediul a trei protocoale:
POP3 (Post Office Protocol). O data transferate mesajele se pot citi de pe calculatorul
local fara a mai fi nevoie de conectarea la server.
IMAP (Interactive Mail Access Protocol). Cand se doreste citirea unui mesaj acesta e
copiat temporar, citit, dupa care sters. Dezavantajul este ca trebuie o conectarea de lunga durata
la INTERNET.
DMSP (Distributed Mail System Protocol). Acesta permite transferul scrisorilor catre o
statie de lucru, dupa care are loc deconectarea. Utilizatorul poate citi scrisorile si compune altele
in timp ce este deconectat. Ulterior dupa. ce se reconecteaza, scrisorile sunt retransferate si
sistemul este resincronizat.

1.4.2 FTP

FTP (File Transfer Protocol) permite transferul fisierelor intre doua noduri ale retelei
INTERNET. Acest transfer este implementat dupa arhitectura client server, in care pe server se
executa procesul ftpd (demon), iar clientul foloseste un program tip linie de comanda sau cu
interfata grafica.
Din punct de vedere al accesului sunt doua posibilitati:
· Clientul care emite comanda a fost introdus ca utilizator pe serverul de la distanta; (MS-
DOS prompt)
· Clientul nu este introdus ca utilizator pe serverul la distanta, dar acesta este un server
public, la care utilizatorii au drepturi restranse (eventual, numai de citire). (Windows
Commander)
Fiecare dintre programele FTP, tip comanda sau cu interfata grafica, executa aceleasi
operatii:
Deschiderea unei conexiunii pe un server la distanta (open). Identificarea serverului se
face fie prin adresa sa sau prin numele anonymous, urmat de adresa de e-mail in loc de parola.
Laborator HTML

Vizualizarea continutului directoarelor (folder-elor) de pe server (comanda dir). La unele

versiuni de FTP, aceasta operatie se face mai mult sau mai putin automat. Cu aceasta ocazie se
pot vedea numele fisierelor si proprietatile acestora (tip, dimensiune). In general, fisierele
accesibile publicului larg se gasesc memorate intr-un director cu numele pub si sunt comprimate
pentru a ocupa cat mai putin spatiu.
Deplasarea in cadrul directoarelor (comanda dir).
Controlul transferului de fisiere in functie de modul de reprezentare. Exista doua moduri
standard in acest sens: ASCII si binar. Tipul ASCII este cel presupus si se foloseste in general
pentru fisiere text, programe sursa, posta electronica, arhive, fisiere postscript. Aceste fisiere sunt
supuse unor transformari de adaptare la caracteristicile calculatoarelor sursa si destinatie. Tipul
binar sau imagine se foloseste in general pentru fisierele din baze de date, procesoare de tabele,
programe executabile.
Copierea unuia sau mai multor fisiere de pe un server la distanta pe un calculator local
(get, mget).
Copierea unui sau mai multor fisiere de pe un calculator local pe un server la distanta
(put, mput).

1.4.3 TELNET

Al treilea protocol de aplicatie, definit oficial si utilizat in reteaua Internet, este TELNET
(terminal emulation). Standardul TELNET a fost definit in SUA de catre Agentia de Comunicatii
a Apararii ca Protocol TELNET Standard Militar, MIL-STD-1782. Protocolul TELNET permite
conectarea unui terminal utilizator local la un server aflat la distanta. Practic comunicarea intre
doua persoane sau calculatoare.
Intr-o retea cu un grad ridicat de conectivitate si un numar mare de tipuri de terminale, in
masura in care este posibil, este necesar sa existe un protocol de terminal virtual, ca intermediar
intre terminalul real si servere, cu scopul de a oferi un limbaj comun acestora. Acest protocol
foloseste trei concepte principale: asocierea, negocierea si profitul

1.4.4 Alte aplicatii:

Finger permite cunoasterea caracteristicilor unui utilizator conectat la retea. Acest

serviciu este inclus in alte instrumente Internet sau poate fi dat ca o comanda DOS, sub forma
urmatoare: finger [nume utilizator@nume host]
Daca nu se specifica nici un argument, se afiseaza o lista cu toti utlilizatorii conectati la
sistemul local. Daca se specifica argumentul, se afiseaza informatiile aferente utilizatorului
respectiv, daca este conectat la retea. Uneori, retelele locale conectate la Internet sunt protejate
printr-un "firewall", care nu permite accesul din exterior la adresele IP ale acestuia.Astfel,
comanda telnet sau comanda finger nu vor merge.
Ping permite testarea conexiunii cu un anumit host din Internet. Ea poate fi specificata ca
o comanda DOS sau UNIX sub forma: ping -s [nume host]
Traceroute afiseaza o lista cu toate serverele aflate pe traseul de retea care conecteaza
serverul destinatie specificate ca argument. Sub DOS se specifica urmatoarea comanda:
traceroute [nume host] Aceasta comanda este utila pentru a afla care este hostul in pana, daca
apare o eroare de conexiune.
Whois permite accesul al o baza de date care se gaseste pe serverul aflat la Network
Information Center. Astfel, se pot obtine informatii privind hosturile INTERNET si utilizatorii
acestora.
Laborator HTML

Web sau WWW (World Wide Web) reprezinta unul din serviciile de informare pe
Internet. Un serviciu Web combina tehnologiile noi cu serviciile Internet disponibile. Web este o
adevarata colectie de documente multimedia, calculatoare, retele si evident soft client si server
Web.

2. World Wide Web(www.). Pagini Web.

2.1 Browser

Elementele la care face Web apel sunt:

· Identificatorul uniform al resurselor, URL (Universal Resource Locators), care
permite recuperarea tuturor tipurilor de informatie din orice punct de Internet.
· Protocolul de transfer hipertext, HTTP (HyperText Transfer Protocol), care permite
comunicarea intre serverul si navigatorul Web. HTTP reprezinta un ansamblul de reguli relativ
simple pentru a fi utilizate in cadrul sistemelor hipermedia distribuite.
· Limbajul de realizare a hipertextelor, HTML (HyperText Markup Language), care
permite crearea documentelor hipertext, care vor fi vizualizate cu ajutorul navigatoarelor Web.
Web se deosebeste de alte servicii Internet, deoarece prin conceptia sa inglobeaza alte servicii
cum ar fi: FTP, Gopher, Telnet, Wais, News.
Serverul Web reprezinta sistemul pe care ruleaza un soft, numit demon httpd, ce are ca
scop distributia informatiei stocate, sub forma unor documente. Accesul la informatia de pe
serverul Web se obtine prin intermediul unui soft client numit navigator sau browser.
Browser-ul si serverul Web coopereaza dupa modelul client-server. Browser-ul emite
cererile si receptioneaza datele care vor fi afisate. Dupa receptia datelor, browser-ul formateaza
documentele tinand seama de tag-urile HTML(un fel de instructiuni) si apoi le afiseaza.
Primul navigator Web grafic a fost Mosaic de la NCSA. Navigatoarele Netscape si
Internet Explorer sunt cele mai utilizate. Netscape poate fi folosit atit in sistemul de operare
Windows cit si Unix(Linux).
Sub sistemul de operare Windows mai putem rula si alte browsere ca Opera, Mozzila,
Mozaic etc; in sistemul de operare DOS mai putem rula Dos Lynx; in Xwindows se poate rula
Xmosaic.

2.2 Universal Resource Locators (URL)

Accesul la un anumit document se face prin specificarea adresei acestuia. Forma

standardizata a unui URL contine:
· protocolul de schimb;
· serverul;
· directorul ce contine fisierul;
· fisierul.
Sintaxa folosita pentru specificarea unei adrese in scopul accesarii unui document pe
WWW este urmatoarea: protocol://nume server/cale/nume document.
Exemplul unui URL catre un motor de cautare: http://www.yahoo.com.
Exista mai multe tipuri de protocoale (tipuri de URL), fiecare reprezentand un serviciu
dat. Astfel avem:
Laborator HTML

· ftp://nume:parola@server/dirl/dir2 acest tip de URL permite accesul la un server

FTP pentru vizualizarea ansamblului de fisiere dintr-un director, daca nu s-a specificat un fisier
sauincarcarea fisierului pe discul local, daca a fost specificat un nume de fisier;
· file://server/fisier, pentru accesarea unui fisier prezent pe discul local;
· gopher://server permite deschiderea unui meniu Gopher, pentru regasirea informatiei;
· telnet://nume:parola@server:port perrnite deschiderea unei sesiuni telnet pe masina
de la distanta;
· news://grup.articol permite deschiderea unei sesiuni News pe un server News dat ca
parametru in softul client.
· wais://server/ permite accesul la un server baza de date Wais;
· mailto://nume@server perrnite deschiderea unei sesiuni de posta electronica, pentru
scrierea si transmiterea unui mesaj catre utilizatorul a carui adresa figureaza in URL.

2.3 Hipertext

Web face apel la conceptul hipertext. Hipertextul este o metoda de prezentarea a

informatiei, unde anumite cuvinte ale textului pot fi apelate in orice moment pentru a furniza alte
informatii. Respectivele cuvinte reprezinta legatura catre alte documente, ce pot fi texte, imagini
sau alte fisiere.
Dezvoltarea rapida a comunicatiilor numerice si a sistemelor de afisarea grafica a
determinat o evolutie a hipertextului catre hipermedia, in care legaturile se realizeaza catre texte,
imagini, sunete si filme.
Informatia tranzitata sub Web este organizata sub forma documentelor multimedia, cu
legaturi catre alte documente. Informatia pe care un server Web este in masura sa o elibereze este
structurata ierarhic intr-un arbore. Radacina arborelui constituie punctul de intrare.

Informatiile eliberate prin Web pot fi:

· documente HTML (.html sau .htm);
· textele ASCII (.txt);
· documentele performante, cum ar fi PostScript (.ps);
· imagini fixe, su diferite reprezentari GIF, JPEG, TIFF;
· inregistrari sonore in format AU sau AIFF.
· filme in format QuickTime (.mov) sau MPEG;
· reprezentarea VRLM a unei scheme tridimensionale;
· un microprogram sau applet JAVA.

2.4 Publicarea documentelor

Pentru a se stabili in linii mari, care este publicul interesat de ideile, produsele sau
serviciile care vor fi lansate prin Web, trebuie sa ne punem urmatoarele intrebari:
~ Catre cine ne adresam?
~ Pentru ce-i intereseaza produsul sau serviciul?
~ Cum facem sa-i depistam pe cei interesati?
Inainte de a crea documentul, trebuie stabilita structura acestuia. Un document bine
structurat va fi urmarit mult mai usor de catre cititor.
Intr-un document trebuie sa se regaseasca urmatoarele elemente:
~ partea introductiva: prezentare
~ documentul pe scurt (organizare, continut);
~ corpul documentului: continutul site-ului;
Laborator HTML

~ elementul de incredere: ofera cititorului argumentul de a mai reveni;

Laborator HTML

2.5 Doua exemple de programe pentru crearea de pagini Web.

Programul FrontPage este creatia concernului Microsoft in scopul de a realiza o

puternica unealta in creatia si managementul resurselor Web, fara a fi necesara cunoasterea unui
limbaj de programare, dar avand suficienta robustete pentru realizari deosebite. Acest program
detine toate elementele strict necesar pentru proiectarea si realizarea unui site World Wide Web,
foarte atractiv si foarte usor de navigat.
Una din calitatile programului este faptul ca include un browser de web, denumit
FrontPage Explorer, unde creezi, proiectezi si intretii un intreg site Web, include un editor numit
FrontPage Editor, unde se pot crea si edita pagini Web, iara a fi nevoie de cunoasterea limbajului
HyperText Markup Language (HTML). De asemenea programul mai include si alte optiuni si
unelte care fac ca design-ul de pagini Web sa se faca cat mai usor pentru orice tip de utilizator.

Produsele Macromedia - Dreamwaver, Flash

Macromedia este unul din cele mai inalte standarde in privinta proiectarii, constructiei si
realizarii de prezentari multimedia si design Web. De fapt Macromedia este o corporatie similara
cu Windows.
Misiunea lor este de a permite o viata usoara, persoanelor ce lucreaza sau proiecteaza in
Web, asigurandu-le cele mai eficiente si mai moderne modalitati de a atrage clienti sau
utilizatori.
Programele din pachetele Macromedia (Dreamweaver, Fireworks, Flash, Freehand,
Authorware, Macromedia Director etc.) au fost create pentru a inzestra designer-ul de Web si
dezvoltatorii de multimedia cu unelte capabile sa raspunda oricarei cerinte din noua generatie.
Astazi, Macromedia Flash si Macromedia Dreamweaver sunt unelte foarte importante
in domeniul design-ului profesional de Web. Standardul Macromedia Flash (ce include
Macromedia Flash, FreeHand si Generator) este liderul pe piata dezvoltatorilor de multimedia.
Programul Macromedia Dreamweaver (care integreaza Macromedia Dreamweaver,
Dreamweaver UltraDev si Fireworks) stapaneste peste 70% din piata produselor de gen si a
comunitatii de peste un milion de dezvoltatori de gen.

3. Metalimbajul HTML

HTML nu este chiar un limbaj de programare asa cum unii ar putea crede. Este mai
degraba un metalimbaj intrucat nu foloseste comenzi ci niste marcatori(tag-uri) care sunt
interpretate de catre browser in vederea executarii unor comenzi.
Un document HTML se poate realiza prin intermediul unui editor de texte ASCII(de
exemplu Notepad), procesor de texte, editor HTML sau convertor HTML.
Limbajul HTML include o mare diversitate de tag-uri (marcatori), sub forma:
<Nume Tag> Text --------------------------- (</Nume Tag>)
Dupa cum se vede un tag se pune intre semnele <>. Majoritatea tagurilor au o zona de
actiune. Un tag se sfirseste cind apare </Nume Tag>. Dupa cum se vede sfirsitul unui tag e
marcat cu /
Tag-urile sunt:
singulare, cand se regaseste numai tag-ul de inceput (<BR>);
Laborator HTML

pereche, reprezentat prin tag-ul de inceput (<HEAD>) si de tag-ul de sfarsit (</HEAD>).

Unele tag-uri detin atribute (parametri) care pot lua anumite valori, in acest caz sintaxa
este: <Nume tag atrib1="valoare1" atrib2="valoare2">
Este complet indiferent pentru browser daca numele tagului este scris cu litere mari sau
mici. Se recomanda totusi ca intr-un acelasi document sa se pastreze acelasi mod de folosire a
acestora(de exemplu scriem tagurile cu litere mari) pentru o mai rapida recunoastere a acestora.

Structura documentelor

Orice document HTML include un antet si un corp. Pentru structurarea documentului se

utilizeaza tag-urile:

<HTML> defineste inceputul si sfarsitul documentului;

<HEAD> defineste inceputul si sfarsitul antetului documentului;
<TITLE> defineste inceputul si sfarsitul titlului documentului;
<BODY> defineste inceputul si sfarsitul documentului propriu-zis.

Iata un prim exemplu de pagina web:

<html>
<head>
<title>Acesta este titlul paginii si va apare pe bara de titlu
</title>
</head>
<body>
Acesta este corpul paginii si va apare in zona de lucru(de aplicatie) a ferestrei browser-
ului. Iata prima pagina de internet.
</body>
</html>

Dupa scrierea secventei de mai sus intr-un editor de texte ASCII(de exemplu Notepad) se
salveaza fisierul cu extensia .htm sau .html
Iata rezultatul:

In cadrul limbajului HTML exista o serie de tag-uri ce permit aranjarea in pagina si

formatarea documentelor. Mentionam ca unele browsere recunosc toate tagurile de mai jos,
altele insa nu. Ca atare, in functie de browserul rulat aspectul general al paginii poate fi usor
diferit ca aliniere, marime.
Laborator HTML

<Hi> .... </Hi> indicele i=1, 2, 3, 4, 5, 6 stabileste dimensiunea caracterelor pentru textul din
interiorul tag-ului. Dimensiunea cea mai mica se obtine pentru i=6 si cea mai mare pentru i=1.
<EM> .... </EM> text scos in evidenta (Emphasis).
<STRONG> ... </STRONG> text puternic scos in evidenta.
<ADDRESS> ... </ADDRESS> textul specifica o adresa postala, o adresa e-mail sau un numar
de telefon.
<B> ... </B> textul este bolduit (ingrosat).
<I> .... </I> textul este italic (inclinat).
<TT> ... </TT> textul este monospatiat.
<BR> interupe linia curenta si trece pe urmatoarea, indiferent daca urmeaza text sau imagine.
<P> ... [</p>] trece la paragraful urmator, care incepe cu o noua linie, dar spre deosebire de BR
lasa si o linie libera ca separator de paragrafe.
<! ...Text ... > comentariu, fiind ignorat de navigator.
<HR [SIZE=n] [WIDTH=n] [ALIGN=left/right/center] [NOSHADE]> traseaza o linie
orizontala de separare, care poate avea urmatoarele caracteristici: grosime (SIZE), lungime
(WIDTH), aliniere (ALIGN) si fara umbra (NOSHADE).
<DIV ALIGN="left/center/right"> .... </DIV> alinierea textului.
<PRE [WIDTH=n]> ... </PRE> permite conservarea formatarii textului din intervalul tag-ului.
Atributul WIDTH fixeaza numarul de coloane in care se afla textul formatat, valoarea implicita
fiind de 80 de coloane.
<FONT SIZE=n COLOR=x FACE=t1, t2, t3> ... </FONT> efectul atributelor acestui tag
actioneaza asupra textului situat inaintea acestui tag. Atributele componente sunt urmatoarele:
* atributul SIZE=n stabileste dimensiunea caracterelor, n poate lua valori cuprinse intre 1 si 7.
Daca valoarea atributului este precedata de semnul + atunci n reprezinta cresterea in raport cu
dimensiunea curenta a caracterelor.
* atributul COLOR=x, stabileste culoarea caracterelor dupa modelul RGB: rrggbb (rr-rosu,
gg-verde, bb-bleu). Valorile rr, gg, bb sunt date in hexazecimal. Valoarea 00 da o intensitate
minima, iar FF o intensitate maxima. Astfel combinatia FF0000 corespunde pentru culoarea rosu
intens, FFFFFF pentru alb, iar 000000 pentru negru. O lista de culori predefinite le puteti gasi pe
Internet la adresa http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.htrnl.
* atributul FACE=t1, t2, t3 permite stabilirea tipului de font, care. trebuie sa existe pe masina
clientului.
<MULTICOL COLS=n GUTTER=1 WIDTH=d> ... </MULTICOL> permite scrierea textului
pe mai multe coloane (gen ziar). Numarul de coloane, dimensiunea acestora si spatiul dintre ele
se specifica prin atributele: COLS, WIDTH, GUTTER.
<CENTER> ... </CENTER> centreaza pe orizontala textul sau imaginile.
<SPACER TYPE=tip SIZE=n> permite controlul vertical si orizontal al spatiului dintre
elementele unei pagini HTML. Atributul TYPE poate lua valorile HORIZONTAL, VERTICAL
sau BLOCK. Daca atributul TYPE ia valoarea BLOCK atunci sintaxa este: <SPACER
TYPE="BLOCK" WIDTH=n HEIGHT=j ALIGN=a> atunci se pot specifica si atributele latime
WIDTH, inaltimea HEIGHT si ALIGN cu valorile TOP, BOTTOM, CENTER sau MIDDLE.
<BR CLEAR=c> permite spatierea unei imagini fata de textul documentului HTML. Atributul
CLEAR poate lua valorile LEFT, RGIHT sau ALL. Valoare LEFT lasa liber locul din stanga
imaginii, RIGHT lasa liber locul din dreapta imaginii, iar ALL se foloseste cand avem doua
imagini in pagina si vrem ca una sa fie aliniata la stanga, cealalta, la dreapta si spatiul dintre ele
sa fie liber.
<BODY BGCOLOR=c text=t LINK=1 VLINK=v ALINK=a> controleaza culorile pentru fondul
ecranului, text si legaturi. Toate valorile atributelor din tag-ul BODY (c, t, 1, v si a) se specifica
dupa modelul RGB sub forma "#rrggbb". Atributul BGCOLOR da culoarea fontului de ecran,
TEXT culoarea textului (altul decat legaturile hipertext), LINK, culoarea legaturile care nu au
Laborator HTML

fost inca vizitate si ALINK, culoarea temporara a legaturii din momentul activarii acesteia
(culoarea implicita este rosu).
Exista posibilitatea ca fondul ecranului sa contina o imagine care trebui sa fie simpla si
monocroma, pentru a permite o vizualizare usoara a paginii gazduite. Specificarea unei imagini
ca fond de ecran se face prin: <BODY BACKGROUND="fisier imagine.gif'>

Iata un exemplu de pagina web ce foloseste elemente de formatare a textului:

<html>
<head>
<title>Exemplul de folosire a tagurilor
</title>
</head>
<body bgcolor=”#993366”>
<center>
<H2> Acesta este un text scris central cu marimea H2 </H2>
</center>
<br>Trecem pe alt rind si lasam alt 2 rinduri libere<br><br><br>
<B> Iata un text cu bold</B><br>
<I>si unul italic</I><br>
<B><U>Iata un text bold si subliniat</u></b><br>
<div>Iata si un paragraf nou.acesta poate avea propriile caracteristici, daca este
cazul</div><br>
<font color=”#00ff00” size=”12”> Iata un text scris cu marimea 12 si alta culoare</font>
</body>
</html>

Rezultatul este:

Liste
In limbajul HTML se pot realiza mai multe tipuri de liste: ordonate, neordonate sau cu
definitii. De asemenea continutul listei poate cuprinde orice sintaxa enumerata anterior.

Sintaxa pentru aceste tipuri de liste este urmatoarea:

Laborator HTML

<OL TYPE=t START=s>

<LI> text1
<LI> text2
<LI> test3
</OL>

Atributul TYPE defineste tipul numerotarii elementelor listei, care pot fi: t=1 pentru cifre, t=A
pentru caractere majuscule, t=a pentru numerotarea romana cu Iitere mari gi t=i pentru
numerotarea romana cu litere mici, iar atributul START defineste valoarea de inceput.

Liste neordonate
Sintaxa pantru acesle lipuri de liste esta urmatoarea:

<UL TYPE=t>
<LI> text1
<LI> text2
<LI> text3
</UL>

Atributul TYPE definesle semnul care va precede elementele listei t=SQUARE(patrat),

t=CIRCLE(cerc vid) si t=DISC(cerc plin).

Liste cu definitii
Sintaxa pentru aceste lipuri de liste este urmatoarea:

<DL>
<DT><B> Termen1 pentru definitie </B>
<DD> Definirea termenului
<DT ><B> Termen2 pentm definitie </B>
<DD> Definirea termenului
</DL>

Iata un exemplu de pagina web ce foloseste liste:

<html>
<head>
<title>Exemplul de folosire a listelor
</title>
</head>
<body>
<center>
Urmatoarele elemente sunt intr-o lista:
<UL TYPE=1>
<LI> text1
<LI> text2
<LI> text3
</UL>
</body>
</html>

Rezultatul este:
Laborator HTML

Legaturile hypertext
Legaturile hipertext permit vizualizarea prin clic pe un cuvant fraza sau imagine, a altor
fisiere decat cel curent. Pentru a realiza o legatura hipertext se utilizeaza tag-u1 ancora: <A> ...
</A>, care include si atribute. Unul dintre aceste atribute este HREF (Hypemext REFerence),
utilizat pentru a specifica URL-ul documentului tinta.
Sintaxa este nrmatoarea:
<A HREF ="localizarea documentulni"> text de legatura </A>

Legaturile se pot realiza in trei feluri:

• intem, in cadrul aceluiasi document
• local, catre un document situat pe acelasi server
• extern, eatre un document aflat pe alt server.

Legatura locala
Sintaxa in cazul legaturii locale este urmatoarea:
<A HREF="Fisier local"> text de legatura </A>
Valoarea fisier local reprezinta adresa fisierului local catre care se face legatura, acesta va
fi incarcat. Fisierul local se poate preciza folosind, una din urmatoarele doua metode:
-calea relativa, serverul va cauta documentul incepand din acelasi director
ca si documentul de 1a care a fost apelata legatura.
-calea absoluta, cand documentul va fi identificat incepand cu directorul
radacina.

Legatura interna
Se realizeaza intre elementele aceluiasi document sau catre un anumit punct tinta al altui
document. Aceasta implica:

- crearea unei ancore in punctul tinta, folosind sintaxa urmatoare:

<A NAME="cuvant_cheie">Paragraf tinta</A>
Ancorele din punctul tinta nu sunt afisate diferit fata de restul documentului.

- realizarea unei legaturi prin care se specifica numele fisierului (daca legatura se face intr-un
punct al altui fisier) si paragraful:
<A HREF="[nume fisier]#cuvant_cheie">Paragraf tinta</A>
Laborator HTML

Se utilizeaza acest tip de legatura in cadrul unui document organizat pe sectiuni. La

inceputul documentului poate fi prezentat continutul.

Legatura externa
Sintaxa in cazul legaturii externe este urmatoarea:
<A HREF='http://www.kappa.ro"> text de legatura </A>
Tinta unei legaturi hipertext poate fi: un fisier HTML, o imagine externa (GIF, JPEG sau
POSTSCRIPT), un film sau text (caruia i s-a marcat o ancora). In cazul in care legatura hipertext
puncteaza spre un fisier HTML, exista doua situatii posibile:
1. documentul apelat apartine unui ansamblu de documente omogene care sunt dirijate
dintr-un document principal. In aceasta situatie se poate prevedea in documentul apelat o ancora
de retur spre documentul principal pentru a facilita navigarea in ansamblul respectiv. Acest lucru
trebuie facut cu multa atentie, deoarece intr-un alt context s-ar putea sa deruteze utilizatorul.
Fiecare document are un buton de revenire spre documentul principal.
2. documentul apelat se afla pe un server independent de documentul in curs de realizare;
dupa consultare, utilizatorul va reveni in documentul de apel prin actionarea butonului BACK
din navigator.

Este posibila definirea unor legaturi catre celelalte servicii Internet: FTP,
TELNET,NEWS, MAILTO, JavaScript. Spre exemplu, o legatura de forma: mailto:adresa e-
mail, va apela un program de scriere si expediere a scrisorilor, catre destinantarul a carui adresa
a fost specificata.

Iata un exemplu de pagina web ce foloseste liste:

<html>
<head>
<title>Exemplul de folosire a ancorelor pt legaturi
</title>
</head>
<body bgcolor=”#993366”>
<center>
Aceasta este o <a href=”fis.htm”>legatura locala</a> deci catre un alt fisier html<br>
Aceasta este o <a href=”http://yahoo.com”>legatura externa</a> deci catre o alta adresa
de internet<br>
<br><br><br>
Pentru legatura interna exemplificarea este mai jos, fiind luata din site-ul Casa Noastra
<a name="#up"><center>ACTIVITATI DESFASURATE IN CADRUL
CENTRULUI</CENTER></a>
<br>
<center>
<a href="#A1">[Activitati culturale]</a>
<a href="#A2">[Activitati gospodaresti]</a>
<a href="#A3">[Activitati spirituale]</a>
<a href="#A4">[Activitati psihopedagogice]</a>
</center>
<br>

<a name="#A1">
<center><p>1.Activitati culturale</p></center>
<p>Actiunile din cadrul centrului, in care sunt implicati voluntari romani si straini sunt
bine primite de copii si incununate de succes. Manifestarea de imagine reprezinta
Laborator HTML

initiativa unui grup de studenti la pshiologie din Anglia. Deseori in incinta Muzeului
Teatrului ne-a fost gazda unei manifestari prilejuite de diferite ocazii precum Ziua
Copilului, serbarile zapezii etc.</p></a>
<br><br>
<a name="#A2">
<center><p>2.Activitati gospodaresti</p></center>
<p>Implicarea copiilor in activitati gospodaresti reprezinta una din conditiile integrarii cu
succes in structuri de viata normale dobandirii sentimentului utilitatii si a
responsabilitatii.</p></a>
<br><br>
<a name="#A3">
<center><p>3.Activitati spirituale</p></center>
<p>Centrul ce poarta numele Sfantul Andrei, este dominat de atmosfera ecumenica.
Religia fiecarui copil este respectata. Ei sunt prezenti in fiecare Liturghie de Sfintele
Sarbatori, prilej in care canta la strana cantece religioase.</p> </a>
<br><br>
<a name="#A4">
<center>4.Activitati psihopedagogice</p></center>
<p>Copii sunt permanent asistati la pregatirea lectiilor punandu-se un mare accent pe
recuperarea deficientelor si completarea lacunelor in procesul invatarii.
Jocurile de toate tipurile sunt initiate in vederea compensarii unor deficiente, dobandirii
de indemnare , dezvoltarii spiritului competitiv.</p></a>
<br><br>
</body>
</html>

Rezultatul este:
Laborator HTML

Includerea imaginilor in document

Imaginile pot fi:
- afisate direct in documentul Web, imagini on-line (in ideea ca exista un browser grafic).
Pentru a putea fi afisate imaginile trebuie sa fie salvate in format gif sau jpeg.
- incarcate si afisate la cererea utilizatorului prin tag-ul <A>, imagini externe.
Imaginile incluse in paginile Web pot avea diverse surse: fotografii preluate dintr-un scanner,
fotografii preluate de pe un CD-photo, prin captarea imaginilor de pe un video-disc sau imagini
realizate printr-un soft specializat. In sistemele informatice, descrierea unei imagini se poate
realiza in mod bitmap sau vectorial.
In modul bitmap imaginea este realizata punct cu punct. Dimensiunea si rezolutia sunt
stabilite de la inceput. In acest caz este dificil sa se modifice marimea fara a se altera calitatea
imagini. Preluarea unei imagini cu un scanner genereaza imagini bitmap. Photoshop, SuperPaint,
XV reprezinta produse software capabile sa creeze si sa returneze imagini bitmap. GIF este un
format pentru reprezentarea imaginilor in format bitmap. In modul vectorial, fiecare forma,
fiecare curba este delinita printr-o formula matematica.
O astfel de reprezentare are avantajul ca desenele pot fi usor redimensionate sau
deformate. Fisierele in care sunt inregistrate imaginile vectoriale sunt de capacitate mai mica
decat cele cu imagini bitmap. Cele mai cunoscute tipuri de imagini vectoriale sunt cele
POSTSCRIPT (ILLUSTRATOR fiind softul pentru desen). Daca se doreste utilizarea imaginilor
Postscript in paginile Web, pentru afisarea lor este necesara conversia in modul bitmap.

Imaginile on-line sunt specificate prin tag-ul IMG:

<IMG SRC="nume_img.gif' ALIGN=a HSPACE=n1, VSPACE=n2 WIDTH=n3
HEIGHT=i BORDER=n3 ALT="nume">

Atributul SRC indica URL-ul imaginii care se va insera in document. Imaginile sc pot
alinia cu ajutorul atributului ALIGN, care poate lua valorile TOP, MIDDLE, BOTTOM, LEFT,
RIGHT. Incarcarea si dimensionarea imaginilor se face prin atributele HSPACE (spatiu
orizontal), VSPACE (spatiu vertical), BORDER (cadru), WIDTH (latimea) si HEIGHT
(inaltimea).
O imagine poate fi un punet de legatura catre alte informatii. In acest caz se utilizeaza
sintaxa:
<A HREF="URL informatii"><IMG SRC="URL imagine"></A>
Proprietatile obiectului imagine sunt: SRC, HEIGHT, WIDTH si COMPLETE, o valoare
logica care exprima starea de afisare a imaginii: totala sau partiala.
Iata un exemplu de pagina web ce foloseste liste:
<html>
<head>
<title>Exemplul de folosire a imaginilor
</title>
</head>
<body>
Aceasta este o poza:<br>
<IMG SRC="img.jpg' ALIGN=”TOP” WIDTH=”100” HEIGHT=”50” BORDER=”3”
ALT="Numele pozei il puteti pune aici">
</body>
</html>
Laborator HTML

Rezultatul este:

Formulare

Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a

generarea pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezinta doar o
interfata pentru captarea informatiilor, el necesitand elemente pentru tratarea datelor colectate.
Prelucrarea finala a datelor se executa pe server, prin programele denumite CGI (Common
Gateway Interface). Astfel spus, CGI asigura interactiunea server-navigator in sensul
personalizarii rezultatelor prin diversele prelucrari asupra elementelor din paginile Web.
Scriptul CGI este lansat in executie pe baza unor parametrii transmisi de client. Dialogul intre
client si server, pentru prelucrarea unui formular, se deruleaza dupa urmatorul scenariu:
* Clientul lanseaza o cerere catre un URL., ce include un formular.
* Serverul lanseaza in executie scriptul CGI, care realizeaza o anumita prelucrare asupra
datelor din formular (interogheaza o baza de date, calculeaza niste valori etc-) si pregateste
rezultatele obtinute.
* Scriptul transmite in final rezultatele catre un server intr-un format care poate fi inteles
de acesta.
*Server-ul receptioneaza rezultatele si le transmite mai departe clientului.
Scripturile CGI sunt inregistrate in mod curent pe server, intr-un director care se creaza la
instalarea acestuia (demonul httpd). Un script poate fi scris intr-un limbaj de programare ca:
C, FORTRAN, PERL, VISUAI. C++, VISUAL BASIC, JAVA.
Sintaxa generala pentru deschiderea unui formular este:
<FORM METHOD=tip_m AC'TION=URL_cgi NAME=nf TARGET=cadr>
unde:
• atributul METHOD=tip_m specifica modul cum se emite informatia catre server.
Valorile cel mai frecvent utilizat sunt: GET si POST. Cand se utilizeaza metoda GET
sirul de caractere constituit din ansamblurile nume camp si valoare este adaugat la URL-
ul scriptului cgi care se va executa. Separatorul intre numele scriptului si restul sirului de
caractere il reprezinta caracterul ?. Deoarece majoritatea browserelor afiseaza
URL-ul curent, acest sir de caractere va fi vizibil. Din aceasta cauza se prefera metoda
POST, cand sirul de caractere trimis catre server printr-o secventa HTTP speciala.
• atributul ACTION=URL_cgi indica locul unde se trimite informatia, unde se gaseste
scriptul care se va executa. Valoarea sa este reprezentata prin URL-ul scriptului.
Laborator HTML

• atributul NAME=nf detine doua functii particulare:

--> indica scriptul CGI numele fonnularului care a trimis datele, in situatia cand mai
multe formulare exista in acelasi document.
--> identifica un fomular, prin numele sau, pentru a putea fi referit prin functiile
JavaScript.
• atributul TARGET=cadr specifica fereastra sau cadrul (frame) in care se va afisa
rezultatul executiei scriptului CGI. In absenta atributului TARGET se inlocuieste pagina
curenta.

Textul incadrat de <FORM> si </FORM> va contine un ansamblu de comenzi: INPUT,

SELECT, etc. Sintaxa generala a tag-ului care defineste un camp pentru introducerca datelor
intr-un formular este:
<INPUT TYI'E="tip" NAME="nume_camp" VALUE="val" SIZE="n"
MAXLENGHT="m">
unde:
* atributul TYPE specifica tipul intrarii, care poate fi:
-->text: text simplu, parola, ascuns, multilinie
-->meniu: cu selectarca unei intrari sau selectarea multipla
-->butoane: casete, (checkboxes), radio, reset si submit.
* atributul NAME permite definirea numelor, in scopul identificarii datelor care vor fi trimise
catre server. Intr-un formular se utilizeaza o singura data acelasi nume. Celelalte atribute sunt
dependente de tipul intrarii. Intrarea text este cel mai simplu tip de intrare intr-un formular. Zona
de introducere date accepta un cuvant sau o linie de text. Atributele sunt:
- VALUE="val", atribut optional care permite predefinirea continutului din campul text, cu alte
cuvinte, ceea ce o sa apara pe ecran la prima activare a formularului;
- SIZE="n", atribut optional prin care se defineste lungimea campului de intrare text (in
caractere).
- MAXLENGHT="m", atribut optional prin care se limiteaza numarul caracterelor care pot fi
introduse (daca se depaseste acest numar apare un semnal sonor/de avertizare).
Intrarea password utilizeaza aceleasi atribute ca si intrarea text. Intrarea textarea se utilizeaza
pentru introducerea unui text na aceasta tag-ul

<INPUT TYPE="text"> este inlocuit cu:

<TEXTAREA NAME="nume_camp" ROWS="r" COLS= "c">[Text implicit]
</TEXTAREA>

atributele sunt:
-ROW'S="r", specifica numarul de randuri care pot fi afisate din textul care se va introduce.
-COLS="c", specifica numarul de coloane care pot fi afisate.
-Text implicit, reprezinta textul afisat prin lipsa.
Cand numarul liniilor si al coloanelor introduse depasesc pe cele prevazute a fi se
utilizeaza scrollbars (bare de defilare). Intrare meniu SELECT are loc selectia unei intrari din
meniu. De data aceasta se utilizeaza tag-ul SELECT in urmatorul context:
<SELECT NAME="nume_camp">
<OPTION [VALUE="v"] [SELECTED]> Nume optiune1
<OPTION> Nume optiune2
.............................
</SELECT>

Atributele sunt:
- OPTION, prin care se specifica o optiune a meniului.
Laborator HTML

- VALUE="v", atributul optional prin care se specifica valoarea optiunii emise spre server (daca
nu se regaseste acest parametru, numele optiunii va fi emis ca valoare);
- SELECTED, atribut optional prin care se specifica prima optiune afisata a meniului (daca acest
atribut lipseste se va afisa prima. optiune din lista meniu).
Intrare meniu SELECT cu SIZE permite alegerea multipla dintr-o lista de optiuni. Diferenta fata
de situatia anterioara consta in utilizarea optiunilor: SIZE, prin care se specitica numarul dc linii
afisate si MULTIPLE, care permite o selectie multipla.
Intrarea buton ckeckbox (caseta de control) principiul de introducere a datelor ca daca se
bifcaza, atunci textul aferent se completeaza in formular. Pentru acest tip de se foloseste tag-ul:
<INPUT TYPE="checkbox" VALUE="v" CHECKED> unde:
-VALUE="v", atribut optional prin care se specilica valoarea trimisa catre server, in cazul
selectarii (daca nu este definita, o valoare "on" se emite catre server).
-CHECKED, atribut optional pentru selectarea in mod implicit a casetei. Intrarea buton radio
selecteaza una dintre posibilitatile existente. Sunt cazuri cand trebuie aleasa o optiune din mai
multe, tipul campului de intrare este definit prin atributul TYPE="radio". Alte atribute sunt:
-VALUE="v", atribut necesar pentru a indica valoarea butonului, daca acesta este selectat.
Valoarea specificata prin atributul NAME identifica blocul de butoane.
-CHECKED, butonul radio sclectat (se recomanda sa se foloseasca acest atribut). Intrarea buton
reset/submit prin activarea acestor campuri are loc stergerea tuturor zonelor de intrare din
formular, regasindu-se doar valorile implicite, respectiv transmiterea datelor catre server.
Butonul SUBMIT transfera informatiile din fonnularul completat, la URL-ul specificat prin
atributul ACTION al tag-ului <FORM ...>. Atributul optional VALUE se utilizeaza pentru
afisarea unui text pe buton.
Intrarea hidden transmite informatiile ascunzand textul. Atributul VALUE="v" este
necesar pentru a se specifica valoarea textului ascuns care va fi emis catre server.

Iata un exemplu de folosire a formularelor(Exemplul este luat din pagina de Internet

Cross Cultural Connection)
<html>
<head>
<title>LOGIN</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<center>
<font size="4" face="Arial, Helvetica, sans-serif" color="#666666"><i>CROSS
CULTURALL CONNECTION</i></font></b><br>
<br><br><br>
<form name=inregistrare action=index.php method=post>
<input type=hidden value=1 name=auth_>
<b>Administrator: </b>
<input maxlength=15 size=15 name=user><br>
<b>Password: </b>
<input type=password maxlength=15 size=15 name=pass><br>
<input type=button value=" Login " name=Trimite>
</form>
</center>
</body>
</html>
Laborator HTML

Iata rezultatul:

Tabelele

HTML permite descrierea tabelelor intr-o maniera amanuntita ca si in cazul listelor.

Un tabel poate contine un alt tabel. 0 celula dintr-un tabel poate contine: text, liste, imagini,
legaturi hipertext sau elemente ale unui formular. Sintaxa generala pentru crearea unui tabel este:
<TABLE BORDER=m CELLPADING=n1 CELLSPACING=n2 WIDTH=n3%> ..
................descrierea tabelului .........
</TABLE>

Proprietatile generale ale unui tabel se specilica prin atributele:

- BORDER, grosimea bordurii de incadrare a tabelului.
-CELLPADING, spatiul din jurul textului unei celule.
- CELLSPACING, spatiul intre celule.
- WIDTH specifica in procente cat la suta din suprafata ferestrei ocupa tabelul.

Tabelul este descris rand cu rand cu ajutorul tag-ului:

<TR VALIGN=TOP~BOTTOM~MIDDLE ALIGN=RIGHT~LEFT~CENTER>... </TR>
Atributul VALIGN specifica alinierea verticala a textului in toate celulele randului,
ALIGN da alinierea orizontala.
Definirea unei celule in cadrul unui rand se face prin:
<TD VALIGN=v1 ALIGN=v2 COLSPAN=n1 ROWSPAN=n2 NOWRAP> ...</TD>
Toate celule unui rand mostenesc valorile atributului VALIGN definit in tag-ul <TR>, cu
exceptia cazului cand acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar fata
de primul.
Atributul COLSPAN specifica latimea celulei, ca multiplu de latimea coloanei de baza,
iar ROWSPAN specifica inaltimea celulei, ca multiplu de inaltimea randului de baza.
Dimensionarea celulelor unui tabel se face automat la lungimea maxima a textului din celule.
Daca textul introdus intr-o celula este mai lung de 64 de caractere, navigatorul il imparte automat
in mai multe randuri. Atributul NOWRAP permite inhibarea acestei reguli, lasand textul pe un
singur rand, indiferent de lungimea acestuia.
Antetul tabelului se descrie prin tag-ul <TH> </TH> care are aceleasi atribute ca si
<TD>. Textul din acest tag este automat centrat si bolduit. Titlul tabelului se specifica prin
tag-ul: <CAPTION ALIGN=TOP~BOTTOM> .... </CAPTION>
Laborator HTML

Se poate colora intregul tabel, o linie sau o celula cu ajutorul atributului BGCOLOR din
tag-urile <TABLE>, <TR> sau <TD>.

Exemplu de folosire a tabelelor(folsit in siteul www.cssg.ro. &nbsp defineste un spatiu-

space.)
<html>
<head>
<title>Exemplu de folosire a tabelelor</title>
</head>
<body>
<font color="#000066" size="6"><b><center>
<p>Centrul de Studii pentru Stiinte de Granita</p>
</center></b>
</font>
<p align="center">&nbsp;</p>
<p align="center"><font size="5">Membrii&nbsp; Centrului de Studii pentru Stiinte de
Granita</font></p>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="714" id="AutoNumber1" height="466">
<tr>
<td align="center" width="24" height="38"><b>Nr. Crt.</b></td>
<td align="center" width="22" height="38">&nbsp;</td>
<td align="center" width="327" height="38"><b>Numele si prenumele</b></td>
<td align="center" width="99" height="38">&nbsp;</td>
<td align="center" width="202" height="38"><b>Telefon fix</b></td>
<td align="center" width="172" height="38"><b>Telefon mobil</b></td>
<td align="center" width="241" height="38"><b>Adresa de e-mail</b></td>
<td align="center" width="394" height="38"><b>Observatii</b></td>
</tr>
<tr>
<td align="center" width="24" height="25">&nbsp;</td>
<td width="22" height="25">&nbsp;</td>
<td width="327" height="25">&nbsp;</td>
<td width="99" align="right" height="25">&nbsp;</td>
<td width="202" align="right" height="25">&nbsp;</td>
<td width="172" align="right" height="25">&nbsp;</td>
<td width="241" align="center" height="25">&nbsp;</td>
<td width="394" align="center" height="25">&nbsp;</td>
</tr>
<tr>
<td align="center" width="24" height="19">1</td>
<td width="22" height="19">&nbsp;</td>
<td width="327" height="19" bgcolor="#CCFFFF">Bojor Ovidiu</td>
<td width="99" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td>
<td width="202" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td>
<td width="172" align="right" height="19" bgcolor="#CCFFFF"></td>
<td width="241" align="center" height="19" bgcolor="#CCFFFF">
<td width="394" align="center" height="19" bgcolor="#CCFFFF">&nbsp;</td>
</tr>
Laborator HTML

<tr>
<td align="center" width="24" height="20">2</td>
<td width="22" height="20">&nbsp;</td>
<td width="327" height="20" bgcolor="#FFFFCC">Banc Andrei</td>
<td width="99" align="right" height="20" bgcolor="#FFFFCC">&nbsp;</td>
<td width="202" align="right" height="20" bgcolor="#FFFFCC"></td>
<td width="172" align="right" height="20" bgcolor="#FFFFCC">&nbsp;</td>
<td width="241" align="center" height="20" bgcolor="#FFFFCC">
<td width="394" align="center" height="20" bgcolor="#FFFFCC">&nbsp;</td>
</tr>
<tr>
<td align="center" width="24" height="19">3</td>
<td width="22" height="19">&nbsp;</td>
<td width="327" height="19" bgcolor="#CCFFFF">Constandache G</td>
<td width="99" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td>
<td width="202" align="right" height="19" bgcolor="#CCFFFF"></td>
<td width="172" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td>
<td width="241" align="center" height="19" bgcolor="#CCFFFF">
<td width="394" align="center" height="19" bgcolor="#CCFFFF">
&nbsp;</td>
</tr>
<tr>
<td align="center" width="24" height="19">4</td>
<td width="22" height="19">&nbsp;</td>
<td width="327" height="19" bgcolor="#FFFFCC">Cristea Aurelia</td>
<td width="99" align="right" height="19" bgcolor="#FFFFCC">&nbsp;</td>
<td width="202" align="right" height="19" bgcolor="#FFFFCC"></td>
<td width="172" align="right" height="19" bgcolor="#FFFFCC">&nbsp;</td>
<td width="241" align="center" height="19" bgcolor="#FFFFCC">&nbsp;</td>
<td width="394" align="center" height="19" bgcolor="#FFFFCC">&nbsp;</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Iata rezultatul:
Laborator HTML

Cadre

Conceptul de cadru (frame) consta in divizarea ecranului in mai multe zone, fiecare
dintre acestea putand gazdui un document HTML. Obtinem astfel un ecran multifereastra pe care
se pot vizualiza simultan mai multe documente HTML diferite, ca si in cazul ecranului unui
televizor pe care se pot vedea simultan mia multe posturi. Fiecare zona este identificata printr-un
nume propriu, ceea ce permite modificari punctuale la nivelul unei zone, fara a afecta pe
celelalte. In mod standard, navigatorul incarca documentele unul peste altul, cel vizibil fiind cel
curent. Deplasarea inainte sau inapoi se face cu ajutorul butoanelor back si forward. Cu ajutorul
cadrelor se poate depasi aceasta limita, dedicand anumite zone ale ecranului (cadre) pentru
realizarea unor sarcini precise.
Crearea cadrelor se face cu ajutorul a trei tag-uri FRAMESET, FRAME si NOFRAME.
Structura unui document partajat in cadre difera de cea unui document clasic (figura 5.5.).
Intr-un document clasic se pot introduce orice tag-uri prin care se definesc texte, imagini,
formulare, tabele. Pentru a se obtine un document partajat, in cadre se pot utiliza numai cele trei
tag-uri amintite mai sus, care nu sunt destinate utilizatorului ci navigatorului (pentru structurarea
ecranului in conformitate cu cerintele formulate). Asa cum se oberva din figura 5.5., in locul tag-
ului <BODY> se foloseste tag-ul:
<FRAMESET COLS=vl, v2, ..... v" [FRAMEBORDER="no~yes"]
[MARGINWIDTH="n"] [BORDERCOLOR="rrggbb"J> ...
</FRAMESET>

<FRAMESET ROWS=v,, vz, ..... v" [FRAMEBORDER="no~yes"J

[MARGINWIDTH="n"] [BORDERCOLOR="rrggbb"J> ...
</FRAMESET>

care divizeaza ecranul in cadre verticale (atributul COLS) sau orizontale (ROWS).
Valorile v1, v2, ...., vn reprezinta dimensiunea cadrelor sub forma:
- n, numarul de pixeli pentru latimea (COLS) sau inaltimea (ROWS) cadrului.
- n%, procentul din latimea (COLS) sau inaltimea (ROWS) zonei parinte pe care i1 va ocupa
cadrul.
- n*, (n este optional) va aloca pentru cadru toata suprafata disponibila, daca mai multe elemente
din lista se specifica sub aceasta forma, zona disponibila va fi impartita in mod egal intre acestea.
Numarul de cadre este egal cu numarul de valori vi, v2, . , vn specificate prin atributele COLS
sau ROWS.
Atributul FRAMEBORDER specifica daca separarea cadrelor se face printr-o bordura cu
efect 3D (cu umbra), valoarea implicita pentru FRAMEBORDER=yes. Daca
FRAMEBORDER=no latimea bordurii dintre cadre se specifica prin atributul
MARGINWIDTH="n", valoarea 0 suprima bordura. Daca FRAMEBORDER="yes", atributul
BORDERCOLOR="rrggbb" reprezinta culoarea bordurii.
Descrierea efectiva a unui cadru se face prin tag-ul:
<FRAME [SRC="URL"] NAME="nume cadru" [MARGINWIDTH="n"]
[MARGINHEIGHT="m"] [SCROLLING="yes~no~auto"] [NORESIZEJ>
cu urmatoarele atribute:
- SRC indica URL-ul de unde se incarca documentul HTML ce va fi gazduit de cadru,
daca nu se specifica, cadrul va fi gol.
- NAME, specifica numele cadrului, care va fi folosit ca tinta intr-o legatura hipertext
prin noul atribut TARGET din tag-urile <A> si <FORM>.
- MARGINWIDTH si MARGINHEIGHT definesc spatiul intre document si marginea
din stanga, respectiv cea de sus a cadrului.
Laborator HTML

- SCROLLING="yes" defineste o bara de defilare, ce este necesara pentru vizualizarea

documentelor care pot fi afisate in totalitate in fereastra asociata cadrului. Daca atributul nu este
specificat, navigatorul decide, in functie de dimensiunea documentului, afisarea barei de defilare.
- NORESIZE inhiba posibilitatea redimensionarii ferestrei cadrului cu ajutorul mouse-
ului (ca orice fereastra).
Tag-ul <NOFRAMES></NOFRAMES> permite afisarea unui text explicativ pentru
navigatoarele care nu suporta cadre. Acest text este ignorat in cazul celorlalte navigatoare.
Cadrele pot fi imbircate pe mai multe niveluri.
O data definite cadrele, acestea pot fi utilizate pentru a gazdui documente HTML apelate
prin intermediul legaturilor hipertext. In acest sens, tag-urile <A> si <FORM> au fost dotate cu
un atribut nou TARGET, care specifica cadrul in care se va afla documentul asociat legaturii.
<A HREF="URL_document" TARGET="nume cadru">Text de legatura</A>
<FORM ACTION="/cgi-bin/test" 'I'ARGET="nume cadru" METHOD="POST
................
</F0RM>
Numele cadrului poate fi definit de utilizator sau predefinit. Numele predefinite sunt:
· blank, documentul va fi afisat intr-o fereastra noua.
· self, documentul va fi incarcat in cadrul unde se regaseste legatura hipertext de apel.
· top, sterge toate cadrele existente si afiseaza documentul pe toata suprafata rezervata
navigatorului (modul clasic).
· parent, afiseaza documentul pe suprafata zonei in care a fost afisat documentul
care a lansat legatura hipertext.
Iata un exemplu de folosirea a cadrelor(s-au folosit elemente din site-ul www.fcrr.ro)

<html>
<head>
<title>Fundatia Culturala Renasterea Romana</title>
</head>
<frameset rows="150,*" frameborder="0" border="0" framespacing="0">
<frameset cols="166,*" frameborder="NO" border="0" framespacing="0">
<frame name="stema" scrolling="NO" noresize src="html/stema.htm" frameborder="NO" >
<frameset rows="110,*" frameborder="0" border="0" framespacing="0">
<frame name="imag" scrolling="NO" noresize src="html/imag.htm" frameborder="NO" >
<frame name="titlu" scrolling="NO" noresize src="titlu.htm" frameborder="NO" >
</frameset>
</frameset>
<frameset cols="170,*" frameborder="NO" border="0" framespacing="0">
<frame name="menu" noresize scrolling="auto" src="menu.htm" frameborder="NO">
<frame name="main" src="html/prezentare.htm" scrolling="auto" noresize frameborder="NO">
</frameset >
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000" topmargin="1" leftmargin="1">
</body>
</noframes>
</html>
Laborator HTML

Rezultatul este:

Imagini reactive

Imaginil reactive sunt imagini in care anumite zone pot deveni sensibile la mouse, in
sensul ca, prin activitatea acestora, se genereaza hipertext catre alte documente HTML. Altfel
spus, ele pot inlocui tag-ul ancora din exprimarea textuala a limbajului HTML. Foarte multe
servere Web au ca pagina principala o imagine reactiva cu mai multe zone click-abile, de unde se
realizeaza conexiuni catre celelalte pagini de prezentare in detaliu.
Realizarea unei imagini reactive se objine in doua etape:
· aducerea imaginii la dimensiunea dorita, prin simulari succesive si alegerea variantei potrivite.
· stabilirea coordonatelor pentru zonele reactive ale imaginii, zonele reactive pot fi: patrate,
cercuri sau poligoane.
Suprafata unei imagii se masoara in pixeli si are un sistem de coordonate cu originea altul
din stanga sus (figura 5.6.).
Problema cea mai importanta in realizarea unei imagini reactive este trecerea de la
coordonatele zonei click-abile la URL-ul care gazduieste documentul apelat. Acest lucru se
realizeaza prin intennediul unor programe specializate. In acest sens exista doua metode:
* imagemap, cand programul de trecere al coordonatelor zonei click-abile catre URL-ul
asociat se executa pe server, ceea ce mareste timpul de acces si traficul in retea
* usemap, cand progrmaul de trecere se excuta pe calculatorul clientului, reducand astfel
timpul de acces si traficul pe retea. Pentru metoda imagemap dupa stabilirea coordonatelor
zonelor click-abile se creaza un fisier in care acestea se inregistreazit sub forma:
Zona URL XI, Y1 X2, Y2 Xn, Yn Punctul 1 Punctul 2 Punctul n
Numarul de puncte necesar pentru descrierea unei zone click-abile este dependent de
forma acesteia, dupa cum urmeaza:
* Patratul (RECT) se defineste prin 2 puncte: coltul din stanga sus, coltul din dreapta jos.
* Cercul (CIRCLE) se defineste prin 2 puncte: centrul si un punct de pe circumferinta.
* Poligonul (POLY) se defineste prin maximul 100 de puncte care sunt colturile acestuia.
Gestiunea imaginilor reactive nu este o functie intriseca a server-ului Web.
Laborator HTML

Programul imagemap, care se ocupa cu aceasta operatie, trebuie instalat in zone CGI a serverului
Web.Descrierea in pagina HTML a unei imaginii reactive este:
<A HREF="/cgi-bin/imagemap/zonec">
<IMG SRC="imaginer.gif' ISMAP>
</A>
In momentul in care navigatorul intalneste aceasta secventa HTML, fisierul imaginer.gif
va fi incarcat si afisat pe ecran. Daca utilizatorul executa clic pe una din cele 3 zone declarate ca
zone click-abile, deoarece este inclus atributul ISMAP, navigatorul inregistreaza coordonatele
mouse-ului si apeleaza programul imagemap din cgi-bin de pe server.
In momentul apelului se transmit catre server numele fisierului de descriere a zonelor
click-abile zonec.map si coordonatele x si y ale mouse-ului. Metoda usemap este mai simpla
decat imagemap, deoarece toate operatiile se executa pe calculatorul client. Astfel, imaginea
reactiva se specifica fn documetnul HTML prin tag-ul <IMG> cu ajutorul atributului USEMAP,
astfel: <IMG SRC="imaginer.gif' USEMAP="zonec">
Descrierea zonelor clickabile se obtine cu ajutorul tag-urilor MAP si AREA, dupa
urmeaza:
<MAP NAME="zonec">
<AREA SHAPE="rect" FIREF="http://wvv......" COORD="50,60 70,80">
<AREA SHAPE="circle" HREF="http://www......" COORD="50,60 70,80">
<AREA SHAPE="poly" HREF="http://www......" COORD="50,60 70,80 .....">
</MAP>
In contextul limbajului JavaScript, imaginile reactive pot capata un comportament
dinamic, in functie de cele doua evenimente posibile pe tag-ul AREA: onMouseOver sau
onMouseOut.

Un exemplu de folosire a imaginilor reactive este mai jos(secventa din situl www.anffpa.ro):

<html>
....................
<body>
....................
<div align=center><br><br>
<img src=img/harta.jpg border="0" usemap="#Map" width="482" height="335"></div>
<div align=center>&nbsp;</div>

<map name="Map">
<area shape="poly" coords="105, 50, 108, 57, 110, 62, 118, 62, 122, 66, 137, 63, 147, 64, 140,
60, 147, 49, 152, 53, 157, 44, 152, 37, 163, 38, 170, 31, 150, 15, 130, 33, 124, 38, 115, 37"
href="html/sm.htm">
....................
<area shape="poly" coords="309, 290, 314, 274, 308, 271, 301, 276" href="b.htm">
</map>
....................
</body>
</html>
Laborator HTML

Iata rezultatul:

Dind clik pe un judet se va activa o noua pagina de internet.

4. Tema de proiect.

Sa se realizeze o pagina de internet care sa va reprezinte.

Aceasta va cuprinnde un CV detaliat in care veti trece datele personale, scolile
urmate(date despre scoala in care ati invatat), obiectele la care ati dat Bacalaureatul, hobyuri-le
dumneavoastra(cu detalii despre acestea).Va exista o sectiune link-uri utile in care dvs. Veti
recomanda colegilor anumite site-uri de internet.
Din punct de vedere tehnic trebuie sa folositi cadre, tabele, elemente grafice(imagini,
culori), link-uri interne, locale si externe.

OBS.
Folosirea de elemente sau tehnologii web pe care studentul nu stie sa le explice duce la
depunctarea dumneavoastra.

Bibliografie:
Sabin Corneliu Buraga – Aplicatii internet.
*** Microinformatica – Introducere in Internet
www.referate .ro
www.e-referate.ro
www.legi-internet.ro
www.wikipedia.org