Suport Curs WebStarter

CUPRINS
WORLD WIDE WEB

DEFINIREA SI INTELEGEREA TERMENULUI DE HYPERLINK
FUNDAMENTELE HTML-ULUI
CREAREA I PUBLICAREA UNUI SITE WEB
NOIUNI LEGATE DE DREPTURI DE AUTOR
SECURITATEA DOCUMENTELOR
DEFINIREA I NELELGEREA TERMENULUI DE COOCKIE
CERTIFICAT DIGITAL
CATEVA CUVINTELA FINAL
Motto: Deoarece n ultimii ani comunicarea online a luat amploare,
specialitii din domeniu acord o importan tot mai mare
strategiei web. Aceasta se bazeaz pe calitatea conceptului i
a coninutului.
WORLD WIDE WEB
World Wide Web (sau Web) este cel mai mare rezervor de informatie electronica din lume. Cu
alte cuvinte este o colectie de milioane de documente legate intre ele, care se gasesc pe calculatoare
raspandite in intreaga lume. Cand vizionam site-uri din Web cu ajutorul browserului, putem vedea
elemente de tip text, grafica, video sau audioWeb-ul este deci un sistem de comunicatie global care
permite calculatoarelor sa transfere date in Internet.
retea este componenta principala a Internet-ului (sau a orcarei inter-retele). In forma sa de
baza, o retea de calculatoare este reprezentata de doua calculatoare care comunica intre ele. Cand
conectam doua sau mai multe calculatoare pentru ca acestea sa poata comunica, alcatuim o retea.
!utem conecta doua sau mai multe retele pentru a forma o inter-retea.
!entru a naviga in Web, trebuie sa avem un calculator prevazut cu un modem si o legatura
telefonica (sau calculatorul trebuie sa fie conectat direct la Internet). "aca calculatorul nu este conectat
direct la Internet trebuie obtinut un cont de la un furnizor de servicii Internet (Internet #ervice !rovider
- I#!). "e asemenea, avem nevoie de un browser, de exemplu Internet $xplorer, %etscape %avigator
sau &pera.
Browser-ul este un program cu ajutorul c'ruia se poate (naviga( prin Web. $l afi)eaz'
informa*ii plasate pe diferite calculatoare )i situri conectate prin World Wide Web la re*eaua Internet.
+n browser este alc'tuit dintr-un set de programe care permite manevrarea informa*iilor bazate pe text,
imagini )i sunet precum )i rularea unor programe pe care siturile )i documentele le pot include (applet-
uri, scripturi). ,iecare browser are o caset' de text unde utilizatorul poate introduce adresa
documentului sau a sitului dorit, adres' care este unic' pe lume.
URL (-n englez' +niform .esource /ocator, tradus 0dresa uniform' pentru localizarea
resurselor) este solu*ia aleas' de World Wide Web Consortium, prescurtat W1C, pentru specificarea
unei resurse (unui sit sau a unei pagini) -n Internet. 0 fost creat prima dat' de 2im 3erners-/ee pentru a
fi utilizat' -n World Wide Web. +./-ul este un caz particular al unei specifica*ii mai ample numite
+.I (+niform .esource Identifier), specifica*ie a aceluia)i W1C. #c4ema care este folosit' este5
<protocol>://<nume_DNS>/<nume_local>, unde
- protocol este protocolul folosit (de cele mai multe ori 4ttp),
- nume_DNS este numele domeniului pe care se afl' resursa,
- nume6local este format din calea )i numele resursei de pe discul local.
"aca ati navigat in Web, cunoasteti grupul de litere http care apare la inceputul fiecarei adrese
Web (cum ar fi 4ttp577www.google.ro). /iterele http provin de la HvperText Transfer Protocol, un
protocol de retea proiectat special pentru Web. !e scurt, 822! dicteaza toate intructiunile dintre
browser si serverul Web.
!entru generarea unui document Web, trebuie urmat setul de reguli acceptate de un browser
Web. !entru afisarea corecta a documentului, browserul cauta structura furnizata de 829/. /imbajul
de 9arcare a 8:per2ext-ului (829/), este un limbaj special de marcare utilizat pentru crearea de
documente cu 4iperlegaturi (legaturi catre alte documente Web). 829/ nu este un limbaj de
programare, ci un set de reguli utilizate pentru formatarea unui document Web.
Protocoale Web
"upe cum stim, calculatoarele comunica printr-un limbaj universal compus din elemente binare
care reprezinta ; sau . "iverse calculatoare au diverse sisteme de operare si 4ardware diferit, deci nu
seamana intre ele. "in nefericire, formatele de date nu runt intotdeuna compatibile de la un sistem de
operare la altul. !entru a acoperi aceasta incompatibilitate in comunicatia prin Internet, se utilizeaza un
set de protocoale. 9odelul de referinta pentru Interconectarea #istemelor desc4ise al &rganizatiei
Internationale de #tandarde (I#&7&#I) reprezinta un model ce poate fi utilizat pentru proiectarea
retelelor.
TCP si IP sunt doua protocoale utilizate pentru interconectarea retelelor.
- TCP este Protocolul de Control al Transportului, iar
- IP este Protocolul Internet.
Impreuna reprezinta mai mult decat doua protocoale. 2C!7I! este o suita de protocoale care a
fost transformata in standard pentru Internet.
ilor clientului.
HTTP-ul se bazeaza pe actiuni de tip cerere-client si raspuns-server. Clientul (programul
solicitant) stabileste o conexiune 2C!7I! cu serverul (programul care raspunde) prin transmiterea unui
mesaj de cerere de conectare catre server. "aca serverul este disponibil, acesta receptioneaza mesajul
de la client si stabileste o conexiune. "upa ce browser-ul a stabilit o conexiune 2C!7I! cu serverul Web
si a transmis o cerere, incepe procesul de regasire a documentului. #erverul raspunde cu o linie de stare,
care include versiunea sa de protocol si un cod de succes sau de eroare.
HTTPS reprezint' protocolul 822! -ncapsulat -ntr-un flux ##/72/#. ##/ -nseamn' protocolul
#ecure #oc<ets /a:er, un protocol de securitate care asigur' comunica*ii confiden*iale prin Internet. $l
permite aplica*iilor client7server s' comunice -n a)a fel -nc-t s' fie evitat' interceptarea, modificarea sau
falsificarea mesajelor. 2/# este un acronim pentru 2ransport /a:er #ecurit:.
FTP este un cablu +2! -n care conductorii sunt -nveli*i -ntr-o folie exterioar' de ecranare -n
scopul protej'rii -mpotriva interferen*elor externe. ,olia exterioar' are, de asemenea, rolul de conductor
de -mp'm=ntare.
+n client FTP (File Transer !rotocol) este o aplica*ie prin intermediul c'reia se poate realiza
transferul fi)ierelor de pe un sistem pe altul. !ute*i copia fi)iere de pe computerul personal pe un alt
computer (opera*ie denumit' "pload) dup' cum pute*i prelua fi)iere de pe un alt computer, pe
computerul personal (opera*ie denumit' Download).
DEFINIREA SI INTELEGEREA TERMENULUI DE HYPERLINK
+n 4:perlin< (se folose)te foarte des forma sa simpl' - lin<), este o referin*', leg'tur', element
de naviga*ie -ntr-un document c'tre alte par*i ale aceluia)i document, alte documente sau sec*iuni din
alte documente, spre care este trimis un utilizator, atunci c=nd elementul de naviga*ie este accesat de
c'tre acesta. 2ermenul 4:perlin< a ap'rut -n ;>?@-;>?A, fiind lansat de 2ed %elson, -n cadrul
proiectului s'u intitulat B!roject CanaduD
Tipuri de hyperlink-uri
Link-uri integrate in text
0ceste lin<-uri sunt cele mai frecvente pe Internet. +ltimul cuv=nt din aceast' fraz' este un lin<
incorporat -n text. (daca se execut' un clic< pe leg'tura de tip text se va desc4ide pagina
www.google.ro). +tilizatorul trebuie s' selecteze (de obicei un singur clic< este de ajuns) lin<-ul pentru
a fi trimis spre informa*ia sau con*inutul pe care aceasta (lin<-ul) -l desemneaz'.
Harta de imagini
& 4art' de imagini (-n englez' Bimage mapD) este o arie invizibil' care acoper' un element
grafic sau o por*iune din aceasta.
Cum funcioneaz hyperlink-urile in codul HTML?
+n lin< are dou' capete, numite ancore )i destinaie. +n lin< porne)te de la prima ancor'
(ancor' surs'), trimi*=nd utilizatorul la a doua ancor' (destina*ie). Cel mai comun tip de 4:perlin<
folosit este +./-ul.
Cum funcioneaz hyperlink-urile n ro!"ere?
+n browser web (de ex. Internet $xplorer) afi)eaz' un lin< fie subliniat, fie cu o alt' culoare
)i7sau stil. 0ceste afi)aje se pot crea, modifica, )terge prin intermediul limbajului C## (prescurtarea din
engleza a Cascading #t:le #4eets).
/eg'turile (lin<-urile) sunt pur )i simplu adresele unor altor pagini (+./-uri). !arcurgerea
acestor leg'turi permite utilizatorului s' Bnavig4eze pe InternetD. Eeneric, o trimitere poart' numele de
4:perlin<.
/eg'turile pot fi de dou' tipuri5
F -n interiorul acelea)i pagini
F c'tre o alt' pagin'
FUNDAMENTELE HTML-ULUI
Definirea si n(elegerea termenului de HTML
!entru utilizatorul obi)nuit, Internetul se prezint' sub forma unei colec*ii de pagini care con*in
informa*ii diverse5 texte, imagini, uneori sunete )i anima*ie. 0ceste pagini, numite Bweb pagesD
sauBweb sitesD sunt realizate -n mare parte prin intermediul unui limbaj special, numit 829/,
prescurtare de la 8:pertext 9ar<up /anguage.
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afi)ate -ntr-un browser (sau navigator). #copul 829/ este mai degrab'
prezentarea informa*iilor G paragrafe, fonturi, tabele ).a.m.d. G dec=t descrierea semanticii
documentului.
Specifica(iile HTML sunt dictate de World Wide Web Consortium
1
(W1C). 829/ este un
format text proiectat pentru a putea fi citit )i editat de oameni utiliz=nd un editor de text simplu. 2otu)i
scrierea )i modificarea paginilor -n acest fel solicit' cuno)tin*e solide de 829/ )i este consumatoare
de timp. $ditoarele grafice cum ar fi 9acromedia "reamweaver, 0ce8tml sau 9icrosoft ,ront !age
permit ca paginile web sa fie tratate asem'n'tor cu documentele Word, dar cu observa*ia c' aceste
programe genereaz' un cod 829/.
#tandardul oficial 829/ este World Wide Web Consortium (W1C), acesta enun*=nd c=teva
versiuni ale specifica*iei 829/, cum ar fi 829/ H., 829/ 1., 829/ 1.H, 829/ @. si, cel mai
recent, 829/ @.;.
829/ H., elaborat in Iunie ;>>@, este standardul pe care ar trebui s'-l suporte toate browserele
curente. "aca dori*i sa fi*i siguri ca to*i vizitatorii vor vedea paginile a)a cum trebuie, folosi*i tagurile
829/ H..
Con"truirea unei pagini "imple
!entru realizarea unei pagini web avem nevoie de 1 componente (H strict necesare)5
;. un editor 4tml utilizat in etapa de scriere sau compunere a paginii web.
H. un procesor grafic necesar pentru construirea con*inutului grafic al paginii respective
1. o aplica*ie client tip browser necesara pentru interpretarea codului 829/ scris.
#ditorul html$ 0cesta permite scrierea codului sursa si salvarea acestuia sub forma unui fi)ier
829/ (cu extensia I.4tml sau I.4tm).
$ditorul 4tml poate fi reprezentat de un simplu editor de text precum aplica*ia %otepad, caz in
care nu ve*i avea la dispozi*ie nici o func*ie specifica pentru lucrul cu fi)iere 829/, sau poate fi o
aplica*ie dedicata edit'rii fi)ierelor 4tml, caz in care sunt oferite func*ii suplimentare care sa asiste
utilizatorul in editarea paginii.
&rice document 829/ -ncepe cu nota*ia <html> si se termina cu nota*ia </html>. 0cestea se
numesc in literatura de specialitate J20E-uriD sau J9arcajeD. !rin conven*ie, toate informa*iile 829/
-ncep cu o paranteza ung4iulara desc4isa "<" si se termina cu o paranteza ung4iular' -nc4is' ">".
2ag-urile -ntre aceste paranteze transmit comenzi c'tre browser pentru a afi)a pagina -ntr-un
anumit mod. +nele blocuri prezint' delimitator de sf=r)it de bloc, -n timp ce pentru alte blocuri acest
delimitator este op*ional sau c4iar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sec*iuni5
- sec*iunea de antet <head>...</head> si
- corpul documentului <body>...</body>.
3locul <body>...</body> cuprinde con*inutul propriu-zis al paginii 829/, adic' ceea ce va fi
afi)at -n fereastra browser-ului.
& etic4et' poate fi scris' at=t cu litere mici, c=t )i cu litere mari. 0dic' <HTML> <HtmL>
<html>. Caracterele (spa*iu( ce apar intre etic4ete sunt ignorate de c'tre browser.
"eci un prim document 829/ ar fi ceva de genul asta5
<html>
<head></head>
<body></body>
</html>
;
Consor(iul Web (World Wide Web Consortium, W3C) reprezint' un consor*iu interna*ional, format din membri permanen*i )i
parteneri, care are ca scop dezvoltarea de standarde pentru World Wide Web.
0)a arat' primul document 829/. Copia*i-l folosind Cop:7!aste -ntr-un fi)ier nou si salva*i-l
ca !.I9.829 sau !.I9.829/. 0poi porni*i 9ozilla ,irefox sau Internet $xplorer, da*i C2./K& si
introduce*i calea spre fi)ier. "a*i &L si ... nimic.
#' nu disperam ... vom ad'uga primele elemente la pagina noastr'. Mn primul r=nd, titlul unei
pagini se ob*ine inser=nd -n sec*iunea <head>...</head> urm'toarea linie5
<title>Aceasta este prima mea pagina de Web</title>
Mn plus, -n sec*iunea <body>...</body> putem scrie texte cat dorim. "aca nu -nt=lnim nici un
marcaj < sau > atunci interpretorul 829/ le va lua ca texte simple si le va afi)a pe ecran. #a vedem o
noua versiune a paginii noastre5
N4tmlO
N4eadO
NtitleO0ceasta este prima mea pagina de WebN7titleO
N74eadO
Nbod:O
3ine ati venit in pagina mea de WebP
N7bod:O
N74tmlO Qezi exemplul
Con*inutul blocului <title>...</title> va ap'rea -n bara de titlu a ferestrei browser-ului.
"aca acest bloc lipse)te intr-o pagina 829/, atunci in bara de titlu a ferestrei browser-ului va ap'rea
numele fi)ierului.
"ac' introducem mai multe linii intr-o pagina browser-ul va afi)a -ntr-un singur r=nd. 2recerea
pe o linie noua se face cu un marcajul <br>, care trebuie sa apar' in pagina 4tml.
,olosind acelea)i opera*ii ca mai sus, vizualiza*i noua paginaP Qe*i vedea textul ce apare in
fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
N4tmlO
N4eadO
NtitleO titlul paginiiN7titleO
N74eadO
Nbod:O
3ine ati venit in NbrO pagina mea de WebP
N7bod:O
Culoarea de fond
& culoare poate fi precizat' -n dou' moduri5
!rintr-un nume de culoare.
#unt disponibile cel pu*in ;? nume de culori5 aRua, blac<, fuc4sia, gra:, green lime, maroon,
nav:, olive, purple, red, silver, teal, w4ite si :ellow.
!rin construc*ia ( Srrggbb ( unde r (red), g (green), sau b (blue) sunt cifre 4exazecimale )i pot
lua valorile5 , ;, H, 1, @, A, ?, T, U, >, a, 0, b, 3, c, C, d, ", e, $, f, ,V se pot defini astfel ?AA1? de
culori.
Culoarea unei pagini se precizeaz' prin intermediul unui atribut al etic4etei <body>.
Culoarea fondului paginii Web se stabile)te cu atributul bgcolor al etic4etei <body> astfel5
<body bgcolor culoare>.
+rm'torul exemplu realizeaz' o pagin' cu fondul de culoare gri.
N4tmlO
N4eadO
NtitleOculoare de fond N7titleO
N74eadO
Nbod: bgcolorWgra:O
& pagina Web cu fondul E.IP
N7bod:O
Culoarea textului
0cest lucru se face prin intermediul atributului text al etic4etei <body> dup' sintaxa Nbod:
textWculoareO. Mn urm'torul exemplu textul are culoarea ro)ie.
N4tmlO
N4eadO
NtitleOculoare textului N7titleO
N74eadO
Nbod: textWredO
+n text de culoare rosie.
N7bod:O
& etic4eta poate avea mai multe atribute. "e exemplu, o etic4eta cu trei atribute arat' astfel5
Netic4eta atribut; W valoare; atributH W valoareH atribut1 W valoare1O. +rm'torul exemplu prezint' o
pagin' cu fondul de culoare albastra si textul de culoare galbena.
N4tmlO
N4eadO
NtitleOatribute multiple N7titleO
N74eadO
Nbod: bgcolorWblue textW:ellowO
,ond de culoare albastra si text de culoare galbena.
N7bod:O
&bserva*ie5 atributele prestabilite pentru un text sunt5 size W 1, color W blac<, si st:le W ( 2imes
%ew .oman ( .
!ozi*ionarea con*inutului paginii Web fa*' de marginile ferestrei browserului se poate face cu
ajutorul a doua atribute ale etic4etei <body>5
leftmargin (stabile)te distanta dintre marginea st=ng' a ferestrei browserului )i marginea st=ng'
a con*inutului paginii)V
topmargin (stabile)te distanta dintre marginea de sus a ferestrei browserului )i marginea de sus a
con*inutului paginii)V
N4tmlON4eadONtitleOConfigurarea textului si stabilirea marginii N7titleO
N74eadO
Nbod: leftmarginW(;( topmarginW(A(O
2extul are atribute implicite. NbrONbasefont st:leW(0rial( colorW(blue( sizeW(?(O
2extul este scris cu fontul (0rial(, culoare albastru si marime ?. N7bod:O
%tiluri pentru locurile de text
!entru ca un bloc de text sa apar' -n pagin' eviden(iat (cu caractere aldine), trebuie inclus -ntre
delimitatorii <b>...</b> (b vine de la (bold().
!entru ca un text sa fie scris cu caractere mai mari cu o unitate dec=t cele curente acesta
trebuie inclus intr-un bloc delimitat de etic4etele <big>...</big>.
!entru ca un text sa fie scris cu caractere mai mici cu o unitate dec=t cele curente acesta
trebuie inclus intr-un bloc delimitat de etic4etele <small>...</small>.
!entru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de
etic4etele <i>...</i> (i vine de la ( italic ().
!entru a insera secven*e de text aliniate ca indice (sub-script) sau ca exponent (super-script),
aceste fragmente trebuie delimitate de etic4etele <sub>...</sub>, respectiv <sup>...</sup>.
!entru a insera un bloc de caractere subliniate se utilizeaz' etic4etele <u>...</u> (u vine de la
underline ().
!entru a insera un bloc de caractere subliniate se utilizeaz' etic4etele <strike>...</strike> sau
<s>...</s>.
Mn exemplul urm'tor vom utiliza toate etic4etele men*ionate anterior.
N4tmlO
N4eadO
NtitleO#tiluri pentru blocuri de text N7titleO
N74eadO
Nbod:O
NbO2ext scris cu caractere ingrosate.N7bO
NbrO NbigO2ext cu caractere marite cu o unitate NbigOmai mareNbigO si mai mareNbigO
si mai mare.N7bigON7bigON7bigON7bigONbrO
NsmallO2extul este scris cu caractere micsorate cu o unitate NsmallOmai
mic.N7smallON7smallONbrO NiO2ext scris cu caractere italice.N7iONbrO In aceasta linie
NsupOsusN7supO este superscript iar NsubOjosN7subO este subscirpt.NbrONstri<eO0ceasta
linie este in intregime sectionata de o linie orizontala.N7stri<eO NbrO
In aceasta linie urmatorul cuvant este NuOsubliniatN7uO, iar cuvantul NsOstri<eN7sO
sectoinat.
N7bod:O
+n font este caracterizat de urm'toarele atribute5
culoare (stabilita prin atributul color)V
tipul sau stilul (stabilit prin atributul face)V
mrimea (definita prin atributul size)V
mrimea in puncte tipografice (stabilita prin atributul point-size)V
grosime (definita prin atributul weight).
2oate aceste atribute apar*in etic4etei, care permite inserarea de blocuri de texte personalizate.
Culori
& culoare poate fi precizata in doua moduri5
;. printr-un nume de culoare.
H. printr-o constanta conform standardului de culoare .E3 (.ed, Ereen, 3lue). & astfel de
constanta se formeaz' astfel5 Srrggbb, unde r, g si b sunt cifre 4exazecimale.
Culorea fontului unui text
!entru a scrie un fragment de text cu caractere de o anumita culoare se -ncadreaz' acest fragment
intre delimitatorii NfontO...N7fontO av=nd stabilit atributul color la valoarea necesara. "e exemplu5
Nfont colorWredOfragment de text de culoare rosieN7fontO
%tilul fontului unui text
!entru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). $xista
cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor5
serif, sans serif, cursive, monospace si fantas:.
2ipul de font necesar poate fi stabilit prin atributul face al etic4etei. !ot fi introduse mai multe
fonturi separate prin virgula.
Nfont faceW(0rial, #erif, 2imes %ew .oman, Courier, 8elvetica(O
Mn acest caz browserul va utiliza primul font pe care -l cunoa)te.
N4tmlO
N4eadO
NtitleO Culoarea si familia fontuluiN7titleO
N74eadO
Nbod:O
0ceasta linie este scrisa cu caractere normale.
NbrO Nfont colorW(red(O0ceasta linie este rosie.N7fontO
NbrO0iciNfont colorW(green(OfiecareN7fontO
Nfont colorW(blue(OcuvantN7fontO
Nfont colorW(:ellow(OareN7fontO
Nfont colorW(c:an(OaltaN7fontO
Nfont colorW(S1@TUfa(Oculoare.N7fontO
NbrONfont faceW(monospace(O/inie scrisa cu caractere monospatiate.N7fontO
NbrO Nfont faceW(arial(O/inie scrisa cu caractere arial.N7fontO
N7bod:O
Mrimea fontului unui text
!entru a stabili m'rimea unui font se utilizeaz' atributul size al etic4etei. Qalorile acestui atribut pot fi5
;, H, 1, @, A, ?, T ( ; pentru cel mai mic font si T pentru cel mai mare)V
K;, KH, etc. pentru a mari dimensiunea fontului cu ;, H, etc. fata de valoarea curentaV
-;, -H, etc. pentru a micsora dimensiunea fontului cu ;, H, etc. fata de valoarea curenta.
9'rimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Qalorile acceptate de
acest atribut pot fi orice numere naturale pozitive. %um'rul astfel precizat reprezint' m'rimea fontului
in puncte tipografice. Acest atribut unctioneaza numai cu #etscape $ommunicator
N4tmlO
N4eadO
NtitleO 9arimea fontuluiN7titleO
N74eadO
Nbod:O
0ceste linie este scrisa cu caractere normale. NbrO
Nfont sizeW(A(O,onturi de marime A.N7fontO NbrO
Nbasefont sizeW(@(O,onturi de marime @.N7fontO NbrO
Nfont sizeW(-1(O,onturi de marime ;.N7fontO NbrO
Nfont sizeW(KH(O,onturi de marime ?.N7fontO NbrO
Nfont point-sizeW(1(O,onturi de marime 1 pt (numai cu %etcape Communicator).N7fontO
NbrO
Nfont point-sizeW(A(O,onturi de marime A pt (numai cu %etcape Communicator).N7fontO
N7bod:O
&n"erarea unei adre"e
"aca intr-o pagina web trebuie inclusa o adresa, atunci putem utiliza facilit'*ile oferite de o
etic4eta dedicata5 <address>...</address>.
N4tmlO
N4eadO
NtitleO 0dresaN7titleO
N74eadO
Nbod:O
0dresa institutiei noastre este 5NaddressO Colegiul +niversitarNbrO
#tr5 Qictor 3abes , %r5?H70 NbrO
3aia 9are .omania N7addressO
N7bod:O
'locuri paragraf
Cu ajutorul etic4etei paragraf <p> este posibil trecerea la o linie noua si permite5
inserarea unui spa*iu suplimentar -nainte de blocul paragrafV
inserarea unui spa*iu suplimentar dup' blocul paragraf, dac' se folose)te delimitatorul </p>
(acesta fiind optional)V
alinierea textului cu ajutorul atributului align, av=nd valorile posibile ( left (, ( center ( sau (
rig4t (.
N4tmlO
N4eadO
NtitleO 3locuri paragrafN7titleO
N74eadO
Nbod:O
!rima linie
NpO /ini generata de un paragraf (implicit paragraful este aliniat la stanga).
Np alignW(rig4t(O !aragraf aliniat la dreapta. !aragraf aliniat la dreapta. !aragraf aliniat la
dreapta. !aragraf aliniat la dreapta. !aragraf aliniat la dreapta. !aragraf aliniat la dreapta.
!aragraf aliniat la dreapta.
Np alignW(center(O !aragraf aliniat in centru. !aragraf aliniat in centru. !aragraf aliniat in
centru.!aragraf aliniat in centru. !aragraf aliniat in centru. !aragraf aliniat in centru. !aragraf
aliniat in centru.
N7bod:O
'locuri de titlu
Mntr-un text titlurile (4eaders) de capitole pot fi introduse cu ajutorul etic4etelor <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>.
2oate aceste etic4ete se refera la un bloc de text si trebuie -nso*ite de o etic4eta de -nc4eiere
similara. 0ceste etic4ete accept' atributul align pentru alinierea titlului blocului de text la st=nga (in
mod prestabilit), -n centru )i la dreapta.
2ag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine, pe c=nd <h6> folose)te
caracterele cele mai mici.
N4tmlO
N4eadO
NtitleO 3locuri de titluN7titleO
N74eadO
Nbod:O
N4; alignW(center(O 2itlu de marime ; aliniat in centru N74;O
N4H alignW(rig4t(O 2itlu de marime H aliniat la dreapta. N74HO
N4@O 2itlu de marime @ aliniat la stanga (implicit) N74@O
N7bod:O
Linii orizontale
Mntr-o pagina Web pot fi inserate linii orizontale. 0cest lucru se face cu ajutorul etic4etei <hr>.
!entru a configura o linie orizontala se utilizeaz' urm'toarele atribute ale etic4etei <hr>5
align permite alinierea liniei orizontala. Qalorile posibile sunt ( left ( ,( center ( si ( rig4t (V
widt4 permite alegerea lungimii linieiV
size permite alegerea grosimii linieiV
nos4ade c=nd este prezent define)te o linie f'r' umbr'V
color permite definirea culorii liniei.
N4tmlO
N4eadO
NtitleO /inii orizontaleN7titleO
N74eadO
Nbod:O
N4; alignW(center(O 2ipuri de linii orizontale N74;O & linie implicita alinierea stanga,
latime ;X, grosime H cu umbra. N4rO
+rmeaz' o linie aliniata in centru , de latime AX, grosime A pixeli , fara umbra.
N4r alignW(center( widt4W(AX( sizeW(A( nos4adeO +rmeaza o linie aliniata la dreapta ,
de latime ;A de pixeli, grosime ;H pixeli , de culoare rosie.
N4r alignW(rig4t( widt4W;A sizeW;H colorW(red(O
N7bod:O
'locuri (center)
3locul introdus de etic4etele <center>...</center> aliniaz' centrat toate elementele pe care le
contine.
N4tmlO
N4eadO
NtitleO /inii orizontaleN7titleO
N74eadO
Nbod:O
NcenterO N4r widt4W;XO N4r widt4W@XO N4r widt4WTXO N4r widt4W;XO N4r
widt4WTXO N4r widt4W@XO N4r widt4W;XO N7centerO
N7bod:O
'locuri (di*)
9odalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. +n parametru foarte util pentru stabilirea caracteristicilor unui bloc
<div> ( diviziune ) este align ( aliniere ).
Qalorile posibile ale acestui parametru sunt5
( left ( ( aliniere la st=nga )V
( center ( ( aliniere centrala )V
( rig4t ( ( aliniere la dreapta ).
+n bloc <div>...</div> poate include alte subblocuri. Mn acest caz, alinierea precizat' de
atributul align al blocului are efect asupra tuturor subblocurilor incluse -n blocul <div>V
+n bloc <div>...</div> admite atributul ( nowrap ( care interzice -ntreruperea r=ndurilor de
c'tre browser.
N4tmlO
N4eadO
NtitleO 3locul NdivON7titleO
N74eadO
Nbod:O
0ceasta linie este o linie normala.+rmatorul bloc este aliniat la dreapta.
Ndiv alignW(rig4t(O
& singura linie.& singura linie.& singura linie.& singura linie.NbrO
& singura linie.& singura linie.& singura linie.& singura linie.NbrO
& singura linie.& singura linie.& singura linie.& singura linie.NbrO N7divO
Ndiv alignW(center(O
3loc aliniat pe centru.3loc aliniat pe centru.NbrO
3loc aliniat pe centru.3loc aliniat pe centru.NbrO
3loc aliniat pe centru.3loc aliniat pe centru.NbrO N7divO
N7bod:O
&magini
Imaginile sunt stocate in fi)iere cu diverse formate. ,ormatele acceptat de browsere pentru
fi)ierele imagine sunt5
EI, (Erap4ics Interc4ange ,ormat) cu extensia .gifV
Y!$E (Yoint !4otograp4ic $xperts Eroup) cu extensia .jpeg sau .jpgV
C!9 (C !ix9ap) cu extensia .xmpV
C39 (C 3it9ap) cu extensia .xbmV
39! (3it9ap) cu extensia .bmp (numai cu Internet $xplorer)V
2I,, (2agged Image ,ile ,ormat) cu extensia .tif sau .tiffV
Cele mai r'sp=ndite formate sunt EI, (Ubiti pentru o culoare, HA? culori posibile) si Y!$E (H@biti
pentru o culoare, ;?TTTH;? de culori posibile).
+dre"a ,-L a unei imagini
+./ ( (+niform .esourse /ocator( W identificator unic al resursei ) este un standard folosit in
identificarea unica a unei resurse in Internet.
2oate imaginile cu care vom lucra vor avea adresa +./ exprimat' -n func*ie de directorul ce
con*ine documentul 829/ care face referire la imagine.
!entru a insera o imagine -ntr-o pagina, se utilizeaz' etic4eta <img> (de la (image(Wimagine).
!entru a putea fi identificat' imaginea care va fi inserata, se utilizeaz' un atribut al etic4etei <img> si
anume src (de la (source(Wsursa).
"aca imaginea se afl' -n acela)i director cu fi)ierul 829/ care face referire la imagine, atunci
adresa +./ a imaginii este formata numai din numele imaginii, inclusiv extensia.
N4tmlO
N4eadO
NtitleO & pagina cu imagineN7titleO
N74eadO
Nbod:O
& pagina care contine o imagine
Nimg srcW(w1.gif(O 2ext dupa imagine.
N7bod:O
Chenarul "i dimen"ionarea unei imagini
"ac' dori*i s' ad'uga*i un chenar -n jurul imaginii, folosi*i atributul border al etic4etei <img>.
Qalorile acestui atribut este un num'r -ntreg pozitive.
& imagine are anumite dimensiuni pe orizontala si verticala, stabilite -n momentul cre'rii ei.
"aca nu se cere altfel, aceste dimensiuni sunt respectate in momentul afi)'rii ei in pagina Web.
"imensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor widt4 si 4eig4t.
N4tmlO
N4eadO
NtitleO Imagine cu c4enar si maritN7titleO
N74eadO
Nbod:O
& imagine cu c4enar si de H pixeli C ;A X
Nimg srcW(w1.gif( borderW(A( widt4W(1A( 4eig4tW(HAX(O 2ext dupa imagine.
N7bod:O
+linierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori5
( left ( - aliniere la stangaV celelalte componente sunt dispuse pe in partea dreaptaV
( rig4t ( - aliniere la dreaptaV celelalte componente sunt dispuse pe in partea stangaV
( top ( - aliniere deasupraV partea de sus a imaginii se aliniaza cu partea de sus a textului ce
precede imagineaV
( middle ( - aliniere la mijlocV mijlocul imaginii se aliniaza cu linia de baza a textului ce
precede imaginea.
( bottom ( - aliniere la bazaV partea de jos a imaginii se aliniaza cu linia de baza a textului.
N4tmlO
N4eadO
NtitleO 0linierea unei imaginiN7titleO
N74eadO
Nbod:O
0linieri5
NbrO !e verticala5
Nimg srcW(w1.gif( alignW(top(O
/a mijloc5 Nimg srcW(w1.gif( alignW(center(O
Yos5 Nimg srcW(w1.gif( alignW(bottom(O 2ext dupa imagine.
N7bod:O
+linierea textului in .urul imaginii
0tributele hspace si vspace precizeaz' distanta in pixeli pe orizontala , respectiv pe verticala,
dintre imagine si restul elementelor din pagina.
0tributul alt admite ca valoare un text care va fi afi)at in locul imaginii.
N4tmlO
N4eadO
NtitleO 0linierea textuluiN7titleO
N74eadO
Nbod:O
N4AOImagine aliniat la stanga inconjurata de text la distanta de 1 de pixeli.
N74AONpO 2ext inainte de imagine.2ext inainte de imagine.2ext inainte de imagine.2ext
inainte de imagine. 2ext inainte de imagine.2ext inainte de imagine.2ext inainte de
imagine.2ext inainte de imagine.
Nimg srcW(w1.gif( alignW(left( 4spaceW(1( vspaceW(1( altW(+niversitatea de %ord
3aia 9are(O
2ext dupa imagine.2ext dupa imagine.2ext dupa imagine.2ext dupa imagine.2ext dupa
imagine. 2ext dupa imagine.2ext dupa imagine.2ext dupa imagine.2ext dupa
imagine.2ext dupa imagine.
N7bod:O
&magini pentru fondul unei pagini
& imagine poate fi utilizat' pentru a stabili fondul unei pagini Web. Mn acest scop se folose)te
atributul background al etic4etei <body>, av=nd ca valoare adresa +./ a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.
N4tmlO
N4eadO
NtitleO !agina cu imagine de fondN7titleO
N74eadO
Nbod: bac<groundW(w1.gif(O
;NbrOHNbrO1NbrO@NbrO ANbrO?NbrOTNbrOUNbrO >NbrO N7bod:O
&magini folo"ite ca legaturi
& leg'tura (lin<) introduce in pagina Web o zona activa. $fectu=nd clic< cu butonul mouse-ului
pe aceasta zona in browser se va -nc'rca o alta pagin'.
!entru a utiliza imaginea (ubm;.jpg( drept leg'tur' c'tre pagina index.4tml utiliz'm sintaxa5
Na 4ref W(index-H.4tml(ONimg srcW (w1.gif(ON7aO
Mn mod prestabilit imaginea utilizata pe post de zon' activ' este -nconjurat' de un c4enar av=nd
culoarea unei leg'turi.
"aca stabilim pentru atributul border al etic4etei <img> valoarea acest c4enar dispare.
N4tmlO
N4eadO
NtitleO Imagini folosite ca legaturiN7titleON74eadO
Nbod:O
N4AOImagini folosite ca legaturiN74AO
2ext inainte de imagine.Na 4refW(index-H.4tml(ONimg srcW(w1.gif(ON7aO
2ext dupa imagine.
N7bod:O
/ormate curente de fi"iere de imagine
1PEG
Y!$E este o extensie a unui fisier de tip imagine. #e poate realiza o comprimarea a unei imagini
care are alta extensi cu extensia Y!$E, dar acest lucru se face cu pierderi de informatie ((loss:
compression sc4eme(), adica o parte din informa*iile de*inute de imaginea ini*iala sunt -nl'turate
definitiv. "ac' ave*i nevoie de toate informatiile din fotografia initiala, alegeti o metoda fara pierderi
(lossless), cum este 2I,,V dar in aceasta situatie, fisierul va fi mult, mult mai mare.
/a prima comprimare a imaginilor, c4iar si pentru un grad mediu, pierderea de calitate este
minora. Cat de mult se poate comprima o imagineZ "aca plecam de la un fisier imagine de tip 2I,, de
; 93 (sa presupunem), putem obtine un fisier jpg de ; L (rata de compresie ;5;), fara alterari
importante ale calitatii vizibile a imaginii. & comprimare la o rata de ;5@ - ;5A aduce fisierul-imagine
la H - HA L cu pierderi perceptibile dar moderate. $ste posibila comprimarea de pana la ;5;,
imaginea obtinuta avind doar ; L si pastreaza mai multe detalii decat ofera multe programe de
manipulare a imaginilor in modul (t4umbnail(.
GIF
9ai vec4i decat Y!$E, pentru unele tipuri de imagini, EI, (Erap4ic Interc4ange ,ormat) este
superior in privinta calitatii imaginii, a ratei de comprimare sau a ambelor, dar are un pacat5 o paleta
redusa de culori, deoarece, prin conventie, EI, are maximum HA? culori (codificare pe U biti).
Imaginile optime pentru comprimare prin metoda EI, sunt cele cu linii si cu suprafete uniform
colorate, cum sunt cele desenate cu programe de grafica (de exemplu 9icrosoft !aint). Cu cat imaginea
contine mai multe nuante, cu atat Y!$E se descurca mai bine.
EI, comprima bine marginile netede, cum ar fi c4enarele fotografiilor sau conturul literelor
aplicate peste o imagine, pe care Y!$E le reda mai difuz.
In plus, formatul EI, permite animatii simple. ,ormatul EI, este foarte folosit pentru realizarea
site-urilor Internet (butoane, bare de defilare, logo-uri, etc).
PNG
In incercarea de a corecta deficientele fisierelor de tip EI,, a aparut formatul !%E (!rotable
%etwor< Erap4ic) si care prezinta codificare pe U biti (!%E-U) sau pe H@ biti (!%E-H@), inclusiv
gestionarea transparentei pe HA? nivele. ,ormatul !%E este recunoscut de practic toate programele
moderne de prelucrare si nagivare pe Internet. !entru aceeasi imagine, fisierele !%E sunt mai mici
decat cele in varianta EI,. ,ormatul !%E-H@ suporta si imagini cu tonuri continue, dar dimensiunile
fisierelor sunt mai mari decat cele Y!$E.
TIFF
2agged Image ,ile ,ormat (2I,,) este un format de fisiere de imagine, creat de compania 0ldus
si a devenit rapid suportat de toate programele de prelucrare si vizionare a imaginilor digitale, atat sub
Windows cat si pe 9acIntos4. Initial a fost creat pentru transmiterea faxulurilor, ulterior a fost utilizat
pentru toate imaginile digitale.
Calitatea imaginii digitale in format 2I,, este foarte buna. ,isierele 2I,, pot suferi prelucrari
repetate, fara alterarea calitatii, deoarece informatia este stocata fara comprimare si fara pierderi
((lossless().
"ezavantajul major al formatului este dimensiunea enorma. 2eoretic, o imagine de 1 x H
pixeli ar avea ;U 93 in format 2I,,
,ormatul 2I,, este recomandat ca fisier de salvare intre etapele de prelucrare ale imaginilor pe
calculator (unde spatiul nu este o problema), deoarece permite salvari repetate, fara alterarea calitatii
imaginii.
&maginile 0i timpul de ncrcare al paginii
+nul dintre cele mai importante aspecte care trebuie luate -n considerare la includerea
imaginilor -ntr-un document este timpul de ncrcare a documentului.
"urata de -nc'rcare a paginilor depinde de mul*i factori. "epinde de modemul )i conexiunea
vizitatorului, de performan*ele serverului gazd', de trafic, de l'*imea de band', etc. Cum nu pute*i avea
control asupra acestora, singurul lucru care v' r'm=ne de f'cut este s' v' construi*i paginile astfel -nc=t
s' aib' o bun' vitez' de -nc'rcare c4iar )i -n cazul unui vizitator care de*ine o conexiune modest' ca
performan*e.
!e l=ng' alegerea cu foarte mult' grij' a imaginilor care vor fi incluse -n document, mai exist'
c=teva modalit'*i prin care poate fi ameliorat' durata de -nc'rcare a paginii5
&ptimizarea imaginilor. ,olosi*i-v' -n mod judicios de instrumentele de control al imaginilor puse
la dispozi*ie de editorul grafic folosit, optimiza*i dimensiunile imaginii )i num'rul de culori la c=t mai
pu*ine posibil. Mncerca*i s' g'si*i un raport optim -ntre dimensiunea fi)ierului )i calitatea imaginii.
$vita*i fotografiile sau imaginile de fundal de dimensiuni foarte mari.
.eutilizarea imaginilor. 0ceast' metod' este eficient' mai ales -n cazul icon-urilor sau elementelor
grafice de naviga*ie care sunt prezente -n mai multe pagini pe parcursul unui site. Cele mai multe
browsere re*in -n memoria cac%e elementele documentelor care urmeaz' a fi afi)ate. 0stfel, dac' o
imagine este utilizat' -n mai multe pagini aceasta nu trebuie -nc'rcat' de fiecare dat' -n memorie ci este
disponibil' pentru a fi afi)at' oric=nd se face referirea la ea.
"ivizarea documentelor de dimensiuni mari -n mai multe documente de dimensiuni reduse. 0ceast'
regul' general' include )i paginile care con*in imagini in&line. 9ai multe documente de dimensiuni mai
mici legate -ntre ele prin leg'turi sunt mai bine acceptate de vizitatori dec=t un singur document foarte
mare care necesit' un timp de -nc'rcare -ndelungat. .egula general acceptat' este men*inerea
dimensiunilor unui document Web -n jurul valorii de ALb, incluz=nd aici )i imaginile, desigur.
,olosirea imaginilor t%umbnail. "ac' pagina con*ine un mare num'r de imagini, folosi*i imagini
miniaturale care s' refere imaginile originale. Mn plus, -ntruc=t imaginea original' referit' prin imaginea
t%umbnail se poate desc4ide -ntr-o nou' fereastr', nefiind asociat' cu restul elementelor din pagin',
este mai comod pentru vizitator s' o salveze pe computerul propriu pentru o vizualizare ulterioar'.
#pecificarea dimensiunile imaginilor. Mn acest mod este evitat' etapa calcul'rii de c'tre browser a
spa*iului necesar pentru afi)area imaginii, -mbun't'*indu-se viteza de -nc'rcare a paginii.
Legturi
/eg'turile (lin<-urile) reprezint' partea cea mai importanta a unei pagini Web.
$le transform' un text obi)nuit -n %iperte't sau %iperlegtur, care permite trecerea rapida de la o
informa*ie aflat' pe un anumit server la alt' informa*ie memorat' pe un alt server aflat oriunde -n lume.
/eg'turile sunt zone acti(e -ntr-o pagina Web, adic' zone de pe ecran sensibile la ap'sarea butonului
st=ng al mouse-ului.
1 legtura ctre o pagina aflata n acela0i director
& leg'tur' c'tre o pagina aflata -n acela)i director se formeaz' cu ajutorul etic4etei <a> (de la
(anc4or(Wancora).
!entru a preciza pagina indicata de leg'tur' se utilizeaz' un atribut al etic4etei <a> numit href,
care ia valoare numele fi)ierului 829/ aflat -n acela)i director. [ona activa care devine sensibila la
ap'sarea butonului st=ng al mouse-ului este format' din textul cuprins intre etic4etele <a>...</a>.
!rezen*a etic4etei de sf=r)it </a> este obligatorie.
N4tmlO
N4eadO
NtitleO Comutarea intre doua paginiN7titleO
N74eadO
Nbod:O
N41O!agina ; N741O
Na 4refW(exHH6exH1.4tml(O/in< catre pagina H N7aO
N7bod:O
1 legtur ctre o pagin aflat pe acela0i di"c local
"aca pagina referita se afla pe acela)i disc local, dar -ntr-un alt director atunci pentru a preciza
pozi*ia ei -n structura de directoare se poate folosi adresarea relativ'.
N4tmlO
N4eadO
NtitleO Comutarea intre doua pagini aflate pe acelasi disc localN7titleO
N74eadO
Nbod:O
N41O!agina pricipala N741O
Na 4refW(listex6;;.4tml(O /in< catre o pagina N7aO
N7bod:O
N74tmlOQezi exemplul
1 legtur ctre un "ite particular
Mn exemplul urm'tor se utilizeaz' adresa +./ www.netscape.com care -ncarc' pagina de start
din site-ul firmei %etscape Corporation.
N4tmlO
N4eadO
NtitleO /in< catre site-ul firmei %etscapeN7titleO
N74eadO
Nbod:O
N41O/in< catre site-ul firmei %etscape N741O
Na 4refW(4ttp577www.netscape.com(O %etscape Corporation N7aO
N7bod:O
+ncore
Mntr-o pagin' foarte lung' pot exista puncte de reper c'tre care se definesc leg'turi.
& ancora se define)te de asemenea prin etic4eta <a>. !entru a defini ancora se utilizeaz' atributul
name care prime)te ca valoare un nume atribuit ancorei (de exemplu (leg;().
!entru a insera o leg'tur' c'tre (leg;( definit' -n aceea)i pagin' se utilizeaz' etic4eta <a>
av=nd atributul 4ref de valoare (Sleg;(.
!entru a introduce o leg'tur' c'tre o ancor' definit' -n alt document (alt' pagin') aflat -n acela)i
director, atributul 4ref prime)te o valoare de forma (nume6fisier.4tmlSnume6ancora(.
N4tmlO
N4eadO
NtitleO 0ncore definite in acelasi document si in alt doocumentN7titleO
N74eadO
Nbod:O
N41O0ncore definite in acelasi document si in alt document N741O
Na 4refW(Sancora;(O /in< catre ancora ; N7aO
Na 4refW(..7..7legaturi.p4pSanc(O /in< catre o ancora din alt document N7aO
NbrO ;NbrOHNbrO1NbrO@NbrO ANbrO?NbrOTNbrOUNbrO >NbrO;NbrO;;NbrO;HNbrO
;1NbrO;@NbrO;ANbrO;?NbrO ;TNbrO;UNbrO;>NbrOHNbrO
H;NbrOHHNbrOH1NbrOH@NbrO
Na nameW(ancora;(Oancora ;
N7bod:O
+legerea culorilor pentru legaturi
Mn mod prestabilit se utilizeaz' trei culori pentru leg'turi5
o culoare pentru leg'turile nevizitate (nu s-a efectuat nici un clic pe ele)
o culoare pentru leg'turile vizitate (s-a efectuat cel pu*in un clic pe ele)
o culoare pentru leg'turile active (deasupra c'rora se afla mouse-ul la un moment dat).
0ceste atribute pot fi stabilite cu ajutorul a trei atribute ale etic4etei <body>5
o lin< pentru leg'turile nevizitateV
o vlin< pentru leg'turile vizitateV
o alin< pentru leg'turile active.
Qalorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului .E3.
N4tmlO
N4eadO
NtitleO Culori pentru lagaturiN7titleO
N74eadO
Nbod: lin<W(blue( vlin<W(green( alin<W(red(O
N41O#etarea culorilor pentru lin<-uri5NbrOrosu pentru legaturi active, verde pentru
legaturi vizitate si albastru pentru legaturi nevizitate N741O
Na 4refWleg6ex;.4tmlO/in< catre pagina ; NbrO
Na 4refWleg6exH.4tmlO/in< catre pagina H NbrO N7aO
......................NbrO
Na 4refWleg6exU.4tmlO /in< catre pagina ;; N7aO
N7bod:O
N74tmlOQezi exemplul
,tilizarea po"tei electronice
Mntr-o pagina Web se poate afla leg'turi care permit lansarea -n execu*ie a aplica*iei de
expediere a mesajelor electronice.
!entru aceasta se utilizeaz' -n construc*ia adresei +./ serviciul Internet mailto5 urmat de o
adresa e-mail valida.
!entru ca exemplul urm'tor s' func*ioneze trebuie ca5
pe calculator sa fie instalat o aplica*ie de expediere a mesajelor electronice (&utloo< $xpress pe
calc. Windows, !ine pe calc. +nix)V
adresa sa fie valida si calculatorul sa fie conectat la Internet.
N4tmlO
N4eadO
NtitleO $xpediere de mesaje electroniceN7titleO
N74eadO
Nbod:O
N41O$xpediere de mesaje electroniceN741ONbrO
Na 4refW(mailto5stoica6al\:a4oo.com(O
9esaje catre autorul paginii
N7bod:O
Legaturi catre fi"iere oarecare
& pagina Web poate con*ine leg'turi c'tre orice tip de fi)iere aflate pe orice servere din Internet.
!entru aceasta se utilizeaz' etic4eta <a> av=nd valoarea atributului 4ref egal' cu adresa +./ a
fi)ierului destina*ie.
0tunci c=nd se efectueaz' clic pe leg'tura din exemplul urm'tor, browserul va desc4ide o caseta
de dialog - ,ile download - care va permite5
s' salva*i pe discul local fi)ierul
s' lansa*i -n execu*ie aplica*ia capabil' s' interpreteze corect fi)ierele de tipul respectiv
N4tmlO
N4eadO
NtitleO /egaturi catre fisiere oarecareN7titleO
N74eadO
Nbod:O
N41O/egaturi catre fisiere oarecareN741ONbrO
Na 4refW(fisier.zip(O /in< catre fisierul fisier.zip N7aO
N7bod:O
+triutul title
0tributul title apar*ine etic4etei <a> )i comand' apari*ia unei mici ferestre -n pagina Web c=nd
mouse-ul se afla pe o leg'tur'. 0cest atribut are astfel menirea de a furniza informa*ii suplimentare
despre semnifica*ia unei leg'turi.
N4tmlO
N4eadO
NtitleO 0tributul titleN7titleO
N74eadO
Nbod:O
N41O0tributul titleN741ONbrO
Na 4refW(mailto5stoica6al\:a4oo.com( titleW(adresa mea de e-mail(O 9esaje catre
autorul paginii N7aO
N7bod:O
Legturi ctre fi0iere de "unet
#unetele pot fi stocate -n fi)iere -n diverse formate5
0+7m-law cu extensia .auV
0I,,70I,C cu extensiile .aiff, .aifV
W0Q$7W0Q cu extensia .wavV
9!$E 0udio cu extensia .mpegH, sau .mpHV
9I"I cu extensia .mid sau .midiV
& leg'tur' c'tre un fi)ier de sunet se realizeaz' folosind etic4eta <a> destinat' leg'turilor c'tre
orice tip de fi)iere, unde atributul 4ref va avea valoarea egala cu adresa +./ a fi)ierului de sunet.
"e exemplu5
Na 4refW(numefisier.au(O/in< catre fisierul de sunetN7aO
Legturi ctre fi0iere *ideoclipuri
Qideoclipurile sunt stocate -n fi)iere diverse formate. ,ormatele si extensiile corespunz'toare
pentru fi)ierele utilizabile -n paginile Web sunt urm'toarele5
9!$E cu extensia .mpeg sau mpgV
]uic<2ime cu extensia .movV
0QI cu extensia .avi.
& leg'tur' c'tre un fi)ier de sunet se realizeaz' folosind etic4eta <a> destinat' leg'turilor c'tre
orice tip de fi)iere, unde atributul 4ref va avea valoarea egala cu adresa +./ a fi)ierului videoclip.
"e exemplu5
Na 4refW(numefisier.avi(O/in< catre fisierul videoclipN7aO
Li"te
+nul din cele mai obi)nuite elemente din documentele cu mai multe pagini este un set de
defini*ii, referin*e sau indexuri. Elosarele sunt exemple clasice -n acest sensV cuvintele sunt listate in
ordine alfabetica, urmate de defini*ii ale termenilor respectivi. Mn 829/, -ntreaga sec*iune a unui
glosar va fi gestionat' printr-o lista de deiniii, care este inclus' -ntr-o perec4e de marcaje de list de
deiniii5 <dl>...</dl> (de la (definition list( W lista de definitii).
&bservatii5
- +n termen al listei este ini*iat de etic4eta <dt> (de la (definition term( W termen definit)V
- "efini*ia unui termen este ini*iat' de etic4eta <dd> (de la (definition description( W descrierea
defini*iei)V
- "efini*ia unui termen -ncepe pe o linie noua )i este indentat'V
N4tmlO
N4eadONtitleOlistex6;N7titleON74eadO
Nbod:ON4; alignW(center(O& lista de definitiiN74;ON4rO
NdlO Elosar de termeni de World Wide Web
NdtONbO4:pertextN7bO
NddO- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate
face legatura catre un alt punct din document sau catre un alt document
NdtONbOdateN7bO
NddO- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de inormatii
care sunt date cu un anumit inteles sau valoare
NdtONbOinformatieN7bO
NddO- sub-setul de date care are efectiv semnificatie si care este util la momentul curent
N7dlO
N7bod:O
Li"te neordonate
& list' neordonat' este un bloc de text delimitat de etic4etele corespondente <ul>...</ul> (( ul (
vine de la ( unordered list ( W lista neordonata). ,iecare element al listei este ini*iat de etic4eta <li> (list
item).
/ista va fi indentat' fa*' de restul paginii Web si fiecare element al listei -ncepe pe un r=nd
noua.
N4tmlO
N4eadONtitleOlistex6HN7titleON74eadO
Nbod:O
N4; alignW(center(O& lista neordonataN74;O
N4rOElosar de termeni de World Wide Web
NulOCulori uzuale disponibile prin nume
NliO3lac< NliOW4ite NliO.ed NliOEreen NliO3lue NliO^ellow NliO!urple NliO0Rua
N7ulO
N7bod:O
2ag-urile <ul> si <li> pot avea un atribut t:pe care stabile)te caracterul afi)at -n fa*a fiec'rui
element al listei. Qalorile posibile al acestui atribut sunt5
o (circle( (cerc)
(disc( (disc plin) (valoarea prestabilita)V
(sRuare( (p'trat)
/istele neordonate pot fi imbricate pe mai multe niveluri
N4tmlO
N4eadONtitleOlistex61N7titleON74eadO
Nbod:O
N4; alignW(center(O& lista neordonata de liste neordonateN74;ON4rO
Elosar de termeni de World Wide Web
NulO$lemente si atribute a unei pagini 829/
NliO,rameset
NulO0tribute5 NliOcols NliOrows NliOborderN7ulO
NliO,rame
NulO0tribute5 NliOsrc NliOname NliOscrollingN7ulO
N7ulO
N7bod:O
Li"te ordonate
& list' ordonat' de elemente este un bloc de text delimitat de etic4etele corespondente
<ol>...</ol> (( ol ( vine de la ( ordered list ( W lista ordonata). ,iecare element al listei este ini*iat de
etic4eta <li> (list item).
/ista va fi indentat' fa*' de restul paginii Web )i fiecare element al listei -ncepe pe un r=nd
noua.
N4tmlO
N4eadO
NtitleOlistex6@N7titleON74eadO
Nbod:O
N4; alignW(center(O& lista ordonataN74;ON4rO
NolOCulori uzuale disponibile prin nume
N7olO
N7bod:O
2ag-urile <ol> si <li> pot avea un atribut t:pe care stabile)te tipul de caractere utilizate pentru
ordonarea listei. Qalorile posibile sunt5
( 0 ( pentru ordonare de tipul 0 , 3 , C , " etc. ( litere mari )V
( a ( pentru ordonare de tipul a , b , c , d etc. ( litere mici )V
( I ( pentru ordonare de tipul I , II , III , IQ etc. ( cifre romane mari )V
( i ( pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici )V
( ; ( pentru ordonare de tipul ; , H , 1 , @ etc. ( cifre arabe - op*iune prestabilita )V
+rm'torul exemplu este o lista ordonata cu cifre romane
N4tmlO
N4eadONtitleOlistex6AN7titleON74eadO
Nbod:O
N4; alignW(center(O& lista ordonata cu cifre romaneN74;ON4rO
Nol t:peW(I(OCulori uzuale disponibile prin nume
N7olO
N7bod:O
2ag-ul <ol> poate avea un atribut start care stabile)te valoarea ini*ial' a secven*ei de ordonare.
Qaloarea acestui atribut trebuie s' fie un num'r -ntreg pozitiv.
+rm'torul exemplu este o lista ordonata cu litere mari, -ncep=nd de la valoarea C.
N4tmlO
N4eadONtitleOlistex6?N7titleON74eadO
Nbod:ON4; alignW(center(O& lista ordonata cu litere mari, incepand de la valoarea CN74;ON4rO
Nol t:peW(0( startW(1(OCulori uzuale disponibile prin nume
NliO.ed NliOEreen NliO3lue NliO^ellow NliO!urple NliO0Rua
N7olO
N7bod:O
2ag-ul <li> poate avea un atribut value care stabile)te valoare pentru elementul respectiv al
listei. Qaloarea acestui atribut trebuie s' fie un num'r -ntreg pozitiv (vezi urm'torul exemplu).
N4tmlO
N4eadO
NtitleOlistex6TN7titleON74eadO
Nbod:ON4; alignW(center(O& lista ordonata avand itemi setati individualN74;ON4rO
Nol startW(1(O.epetati urmatorii pasi ai algoritmului
NliOsalvati fisierulV
Nli valueW(?(Oincarcati fisierul in browserV
NliOsc4imbati browserul utilizat
NliOincarcati din nou fisierul
N7olO
N7bod:ON74tmlO Qezi exemplul
/istele ordonate pot fi imbricate -ntre ele sau cu liste neordonate, ca -n exemplul urm'tor.
N4tmlO
N4eadONtitleOlistex6UN7titleON74eadO
Nbod:ON4; alignW(center(O& lista ordonata de liste ordonate si neordonateN74;ON4rO
NolO+n sistem informatic include5
NliO8ardware5
NolO
NliOplaca de baza NliOprocesor NliOmemorie NliO4arddis<
N7olO
NliO#oftware5
NulO
NliO/inux NliOWindows NliO&#7H NliO+nix
N7ulO
NliO#oftware de aplicatie5
Nul t:peW(disc(O
NliOQisualCKK NliOYava NliO#]/ NliOCorel"raw
N7ulO
N7olO
N7bod:O
Taele
2abelele ne permit s' cre'm o re*ea dreptung4iular' de domenii, fiecare domeniu av=nd
propriile op*iuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
!entru a insera un tabel se folosesc etic4etele corespondente <table>...</table>. +n tabel este format
din r=nduri. !entru a insera un r=nd -ntr-un tabel se folosesc etic4etele <tr>...</tr> ( de la ( table row
(W r=nd de tabel ). ,olosirea etic4etei de sfarsit </tr> este op*ional'.
+n r=nd este format din mai multe celule ce con*in date. & celula de date se introduce cu
etic4eta <td>..</td>.
N4tmlO
N4eadONtitleOtabelex6;N7titleON74eadO
Nbod:ON4; alignWcenterO+n tabel simplu format din @ linii si H coloaneN74;ON4rO
NtableO
NtrO NtdOcell ;;N7tdO NtdOcell ;;N7tdON7trO
NtrO NtdOcell H;N7tdO NtdOcell HHN7tdON7trO
NtrO NtdOcell 1;N7tdO NtdOcell 1HN7tdON7trO
NtrO NtdOcell @;N7tdO NtdOcell @HN7tdON7trO
N7tableO
N7bod:O
Mn mod prestabilit, un tabel nu are c4enar. !entru a ad'uga un c4enar unui tabel, se utilizeaz' un
atribut al etic4etei <tabel> numit border. 0cest atribut poate primi ca valoare orice num'r -ntreg
( inclusiv ) )i reprezint' grosimea -n pixeli a c4enarului tabelului.
"ac' atributul border nu este urmat' de o valoare atunci tabelul va avea o grosime prestabilit'
egala cu ; pixel, o valoare egala cu a grosimii semnific' absen*a c4enarului.
C=nd atributul border are o valoare nenul' c4enarul unui tabel are un aspect tridimensional.
N4tmlO
N4eadONtitleOtabelex6HN7titleON74eadO
Nbod:ON4; alignWcenterO+n tabel simplu cu c4enarN74;ON4rO
Ntable borderW(@(O
NtrO NtdOcell 1;N7tdO NtdOcell 1HN7tdON7trO
NtrO NtdOcell @;N7tdO NtdOcell @HN7tdON7trO
N7tableO
N7bod:O
+linierea taelului
!entru a alinia un tabel -ntr-o pagin' Web se utilizeaz' atributul align al etic4etei <table>, cu
urm'toarele valori posibile5 ( left ( ( valoarea prestabilit' ), ( center ( si (rig4t (. 0linierea este
important' pentru textul ce -nconjoar' tabelul.
0stfel 5
dac' tabelul este aliniat st=nga ( Ntable alignW(left(O ), atunci textul care urmeaz' dup' punctul
de inserare al tabelului va fi dispus -n partea dreapta a tabelului.
dac' tabelul este aliniat dreapta ( Ntable alignW(rig4t(O ), atunci textul care urmeaz' dup'
punctul de inserare al tabelului va fi dispus in partea st=ng' a tabelului.
daca tabelul este aliniat pe centru ( Ntable alignW(center(O ), atunci textul care urmeaz' dup'
punctul de inserare al tabelului va fi afi)at pe toat' l'*imea paginii, imediat sub tabel.
N4tmlO
N4eadONtitleOtabelex61N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel aliniat la dreaptaN74;O
N4rO 2ext inainte de tabel. 2ext inainte de tabel. 2ext inainte de tabel. 2ext inainte de
tabel.
Ntable borderW(( alignW(rig4t(O
N7tableO
2ext dupa tabel.2ext dupa tabel.2ext dupa tabel.2ext dupa tabel.2ext dupa tabel.2ext dupa
tabel.
N7bod:O
"istan*a dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu ajutorul
atributelor 4space si vspace al etic4etei <table>. Qaloarea atributului 4space poate fi orice num'r
pozitiv, inclusiv , )i reprezint' distan*a pe orizontal' dintre tabel )i celelalte elemente ale paginii Web.
Qaloarea atributului vspace poate fi orice num'r pozitiv, inclusiv , )i reprezint' distan*a pe
vertical' dintre tabel )i celelalte elemente ale paginii Web.
0ceste atribute func*ioneaz' numai cu %etscape Communicator.
2efinirea culorilor de fond pentru un tael
Culoarea de fond se stabile)te cu ajutorul atributului bgcolor, care poate fi ata)at -ntregului tabel
prin etic4eta <table>, unei linii prin etic4eta <tr> sau celule de date prin etic4eta <td>.
Qalorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
"ac' -n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmatoarea5 <td>, <tr>,
<table> ( cu prioritate cea mai mic' ).
N4tmlO
N4eadONtitleOtabelex6@N7titleON74eadO
Nbod:ON4; alignWcenterO+n tabel simplu coloratN74;ON4rO
Ntable borderW(1( bgcolorW(green(O
NtrO NtdOverde ;;N7tdO Ntd bgcolorW(red(Orosu ;;N7tdON7trO
Ntr bgcolorW(blue(O NtdOalbastru H;N7tdO Ntd bgcolorW(:ellow(Ogalben HHN7tdON7trO
Ntr bgcolorW(c:an(O NtdOcell 1;N7tdO NtdOcell 1HN7tdON7trO
NtrO NtdOcell @;N7tdO Ntd bgcolorW(w4ite(Ocell @HN7tdON7trO
N7tableO
N7bod:O
Culoarea textului din fiecare celul' se poate stabili cu ajutorul expresiei5
Nfont colorW(valoare(O...N7fontO.
2imen"ionarea celulei unui tael
"istanta dintre dou' celule vecine se define)te cu ajutorul atributului cellspacing al etic4etei
<table>. Qalorile acestui atribut pot fi numere -ntregi pozitive, inclusiv , )i reprezint' distan*a -n pixeli
dintre doua celule vecine.
Qaloarea prestabilit' a atributului cellspacing este H.
N4tmlO
N4eadONtitleOtabelex6AN7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel fara c4enar de celule alipiteN74;ON4rO
Ntable cellspacingW((O
NtrO Ntd bgcolorW(gra:(Ogri ;;N7tdO Ntd bgcolorW(red(Orosu ;HN7tdON7trO
Ntr bgcolorW(blue(O NtdOalbastru H;N7tdO Ntd bgcolorW(:ellow(Ogalben HHN7tdON7trO
N7tableO
N7bod:O
"istan*a dintre marginea unei celule )i con*inutul ei poate fi definit' cu ajutorul atributului
cellpadding al etic4etei <table>. Qalorile acestui atribut pot fi numere -ntregi pozitive, )i reprezint'
distan*a -n pixeli dintre celule )i con*inutul ei.
Qaloarea prestabilit' a atributului cellpadding este ;.
N4tmlO
N4eadONtitleOtabelex6?N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel de celule mariN74;ON4rO
Ntable borderW(( cellpaddingW(H(O
NtrO NtdOgri ;;N7tdO NtdOrosu ;HN7tdON7trO
NtrO NtdOalbastru H;N7tdO NtdOgalben HHN7tdON7trO
N7tableO
N7bod:O
2imen"ionarea unui tael
"imensiunile unui tabel - l'*imea )i -n'l*imea - pot fi stabilite exact prin intermediul a doua
atribute, widt4 si 4eig4t, ale etic4etei <table>.
Qalorile acestor atribute pot fi5
numere -ntregi pozitive reprezent=nd l'*imea respectiv -n'l*imea -n pixeli a tabeluluiV
numere -ntregi -ntre ; si ;, urmate de semnul X, reprezent=nd frac*iunea din l'*imea )i
-n'l*imea total' a paginii.
N4tmlO
N4eadONtitleOtabelex6TN7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel de de H pixeli C A XN74;ON4rO
Ntable borderW(( widt4W(H( 4eig4tW(AX(O
NtrO NtdOcell ;;N7tdO NtdOcell ;HN7tdON7trO
N7tableO
N7bod:O
Mn exemplul urm'tor se utilizeaz' un truc care permite afi)area -ntr-o pagina Web a unui text
pozi*ionat -n centrul paginii.
N4tmlO
N4eadONtitleOtabelex6UN7titleON74eadO
Nbod:O
N4; alignWcenterO+n text centrat intr-o paginaN74;O
Ntable widt4W(;X( 4eig4tW(;X(O
NtrO Ntd alignW(center(O
N4HO2ext centrat.N74HO
N7tableO
N7bod:O
Titlul unui tael
+nui tabel i se poate ata)a un titlu cu ajutorul etic4etei <caption> ( de la (table caption( W titlu
tabel ).
0ceast' etic4et' trebuie plasat' -n interiorul etic4etelor <table>...</table>, dar nu -n interiorul
etic4etelor <tr> sau <td>. 2itlul unui tabel poate fi aliniat cu ajutorul atributului align al etic4etei
<caption> care poate lua una dintre valorile5
( bottom ( ( sub tabel )V
( top ( ( deasupra tabelului )V
( left ( ( la st=nga tabelului )V
( rig4t ( ( la dreapta tabelului ).
N4tmlO
N4eadONtitleOtabelex6>N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel cu titluN74;O
Ntable borderW((ONcaption alignW(top(O9asini
NtrONtdO9ercedes N7tdONtdOCitroen N7tdONtdOYaguar N7tdON7trO
NtrONtdO39W N7tdONtdOQolvo N7tdONtdO.enault N7tdON7trO
N7tableO
N7bod:O
Cap de tael
+n tabel poate avea celule cu semnifica*ia de cap de tabel. 0ceste celule sunt introduse de
etic4eta <th> ( de la ( tabel 4eader ( W cap de tabel ) -n loc de <td>.
2oate atribute care pot fi ata)ate etic4etei <td> pot fi de asemenea ata)ate etic4etei <th>. Con*inutul
celulelor definite cu <th> este scris cu caractere aldine si centrat.
N4tmlO
N4eadONtitleOtabelex6;N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel cu titlu si cap de tabelN74;O
Ntable borderW((ONcaption alignW(bottom(O!returile masinii
NtrO
Nt4O!retN7t4ONt4OCitroenN7t4ONt4OYaguarN7t4ONt4O39WN7t4ONt4OQolvoN7t4O
N7trO
NtrO
Nt4OIn dolariN7t4ONtdOAN7tdONtdO;N7tdONtdOAN7tdONtdOUN7tdO
N7trO
NtrO
Nt4OIn leiN7t4ONtdO;AN7tdONtdO1N7tdONtdO;AN7tdONtdOH@N7tdO
N7trO
N7tableO
N7bod:O
+linierea coninutului unei celule
0linierea pe orizontal' a con*inutului unei celule se face cu ajutorul atributului align care poate
lua valorile5
( left ( ( la stanga )V
( center ( ( centrat , valoarea prestabilita )V
( rig4t ( ( la dreapta )V
( c4ar ( ( alinierea se face fata de un caracter ).
0linierea pe verticala a con*inutului unei celule se face cu ajutorul atributului valign care poate
lua valorile5
( baseline ( ( la baza )V
( bottom ( ( jos )V
( middle ( ( la mijloc, valoarea prestabilita )V
( top ( ( sus ).
0ceste atribute pot fi ata)ate at=t etic4etei <tr> pentru a defini tuturor elementelor celulelor unui
r=nd, c=t )i etic4etelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula.
N4tmlO
N4eadONtitleOtabelex6;;N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel avand continutul celulelor aliniateN74;O
Ntable borderW(( widt4W(AX( 4eig4tW(AX(O
Ntr alignW(rig4t(O
NtdO0iciN7tdO NtdOaliniereaN7tdONtdOeste centruN7tdONtdOdreaptaN7tdO
N7trO
NtrO
Ntd alignW(left(OstangaN7tdONtd alignW(center(OcentruN7tdONtd
alignW(top(OsusN7tdO Ntd valignW(bottom(OjosN7tdO
N7trO
Ntr alignW(left(O
NtdOaiciN7tdONtdOaliniereaN7tdO NtdOeste centruN7tdONtdOstanga
(implicita)N7tdO
N7trO
N7tableO
N7bod:O
2imen"ionarea exacta a celulelor unui tael
"imensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a dou'
atribute ale acestor etic4ete5 widt4 pentru l'*ime )i 4eig4t pentru -n'l*ime.
Qalorile posibile ale acestor atribute sunt5
numere -ntregi pozitive ( inclusiv ) reprezent=nd dimensiunea -n pixeli a l'*imii, respectiv a
-n'l*imii unei celuleV
procente din l'*imea, respectiv -n'l*imea tabelului.
N4tmlO
N4eadONtitleOtabelex6;HN7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel cu celule de ;x;A de pixeliN74;ON4rO
Ntable borderW((O
NtrO
Ntd widt4W(;( 4eig4tW(;A(Ocell ;;N7tdO Ntd widt4W(;(
4eig4tW(;A(Ocell ;;N7tdO
N7trO
NtrO
Ntd widt4W(;( 4eig4tW(;A(Ocell H;N7tdO Ntd widt4W(;(
4eig4tW(;A(Ocell HHN7tdO
N7trO
N7tableO
N7bod:O
+triutul 3 no!rap 3
0tributul nowrap apar*ine elementelor <td> si <th>V el interzice -ntreruperea unei linii de text.
0stfel, -n tabel pot ap'rea coloane cu o l'*ime oric=t de mare.
N4tmlO
N4eadONtitleOtabelex6;@N7titleON74eadO
Nbod:O
N4; alignWcenterO+n tabel cu celule de latime mareN74;ON4rO
Ntable borderW((O
NtrO NtdOcell ;;N7tdO NtdOcell ;HN7tdON7trO
NtrO Ntd nowrapOcell H;N7tdO NtdOcell HH este foarte lata,aceasta celula este
foaret lata.N7tdON7trO
N7tableO
N7bod:O
/ere"tre n HTML
,erestrele sau (cadrele) ne permit s' definim -n fereastra browserului subferestre -n care s' fie
-nc'rcate documente 829/ diferite. ,erestrele sunt definite -ntr-un fi)ier 829/ special, -n care blocul
<body>...</body> este -nlocuit de blocul <frameset>...</frameset>. Mn interiorul acestui bloc, fiecare
cadru este introdus prin etic4eta <frame>. +n atribut obligatoriu al etic4etei <frame> este src, care
prime)te ca valoare adresa +./ a documentului 829/ care va fi -nc'rcat -n acel frame. "efinirea
cadrelor se face prin -mp'r*irea ferestrelor ()i a subferestrelor) -n linii )i coloane5
-mp'r*irea unei ferestre -ntr-un num'r de subferestre de tip coloan se face cu ajutorul
atributului cols al etic4etei <frameset> ce descrie acea fereastr'V
-mp'r*irea unei ferestre -ntr-un num'r de subferestre de tip linie se face cu ajutorul atributului
rows al etic4etei <frameset> ce descrie acea fereastr'V
valoare atributelor cols )i rows este o list' de elemente separate prin virgul', care descriu modul
-n care se face -mp'r*irea.
$lementele listei pot fi5
;. un num'r -ntreg de pixeliV
H. procente din dimensiunea ferestrei (num'r intre ; si >> terminat cu X)V
1. n
I
care -nseamn' n p'r*i din spa*iul r'masV
Exemplu 1:
colsWH,I,AX,I -nseamn' o -mp'r*ire -n @ subferestre, dintre care prima are H pixeli, a treia ocup'
jum'tate din spa*iul total disponibil, iar a doua )i a patra ocup' -n mod egal restul de spa*iu r'mas
disponibil.
Exemplu 2:
colsWH,;I,AX,HI -nseamn' o -mp'r*ire -n @ subferestre, dintre care prima are H pixeli, a treia
ocup' jum'tate din spa*iul total disponibil, iar a doua )i a patra ocup' -n mod egal restul de spa*iu
r'mas disponibil, care se -mparte -n trei p'r*i egale, a doua fereastr' ocup=nd o parte, iar a patra
ocup=nd H p'r*i.
&bserva*ii5
- dac' mai multe elemente din list' sun configurate cu `, atunci spa*iul disponibil r'mas pentru ele se
va -mp'r*i -n mod egal.
- o subfereastr' poate fi un cadru (folosind NframeO) -n care se va -nc'rca un document 829/ sau
poate fi -mp'r*it' la r=ndul ei la alte subferestre (folosind NframesetO).
N4tmlO
N4eadONtitleOferex6;N7titleON74eadO
Nframeset colsW(I,I(O
Nframe srcW(4ttp577www.:a4oo.com(O
Nframe srcW(4ttp577www.google.ro(O
N7framesetO
Mn exemplul urm'tor este creat' o pagina Web cu trei cadre orizontale. !entru al doilea cadru
valoarea atributului src este adresa +./ a unei imagini.
N4tmlO
N4eadONtitleOferex6HN7titleON74eadO
Nframeset rowsW(;,I,;X(O
Nframe srcW(4ttp577www.unitbv.ro(O
Nframe srcW(imagine.4tml(O
Nframe srcW(4ttp577www.:a4oo.com(O
N7framesetO
Mn exemplul urm'tor este creat' o matrice de @ cadre (H x H). !entru a realiza acest lucru, se
folosesc simultan cele doua atribute cols si rows.
N4tmlO
N4eadONtitleOferex61N7titleON74eadO
Nframeset rowsW(I,I( colsW(I,I(O
Nframe srcW(4ttp577www.protv.ro(O
Nframe srcW(4ttp577www.antena;.ro(O
Nframe srcW(4ttp577www.acasatv.ro(O
Nframe srcW(4ttp577www.google.ro(O
N7framesetO
Mn exemplul urm'tor este creat' o pagin' Web cu trei cadre mixte. !entru a o crea se procedeaz'
din aproape -n aproape. 9ai -nt=i, pagina este -mp'r*it' -n dou' subferestre de tip coloan, dup' care a
doua subfereastr' este -mp'r*it' -n dou' subferestre de tip linie.
N4tmlO
N4eadONtitleOferex6@N7titleON74eadO
Nframeset colsW(HX,I(O
Nframeset rowsW(I,I(O
N7framesetO
N7framesetO
Culori pentru chenarele cadrelor 0i dimen"ionarea chenarului unui cadru
!entru a stabili culoarea c4enarului unui cadru se utilizeaz' atributul bordercolor. 0cest atribut
prime)te ca valoare un nume de culoare sau o culoare definit' -n conformitate cu modelul de culoare
.E3. 0tributul bordercolor poate fi ata)at at=t etic4etei <frameset> pentru a stabili culoarea tuturor
c4enarelor cadrelor incluse, c=t )i etic4etei <frame> pentru a stabili culoarea c4enarului pentru un
cadru individual.
0tributul border al etic4etei <frameset> permite configurarea l'*imii c4enarelor tuturor
cadrelor la un num'r dorit de pixeli. Qaloarea prestabilit' a atributului border este de A pixeli. & valoare
de pixeli va defini un cadru f'r' c4enar.
N4tmlO
N4eadONtitleOferex6AN7titleON74eadO
Nframeset colsW(HX,I( bordercolorW(green( borderW(;A(O
Nframe srcW(4ttp577www.acasatv.ro( bordercolorW(blue(O
N7framesetO
!entru a ob*ine cadre f'r' c4enar se utilizeaz' borderW((. Mn mod prestabilit, c4enarul unui
cadru este afi)at )i are aspect tridimensional. 0fi)area c4enarului unui cadru se poate dezactivata dac'
se utilizeaz' atributul frameborder cu valoare (no(. 0cest atribut poate fi ata)at at=t etic4etei
<frameset> (dezactivarea fiind valabil' pentru toate cadrele incluse) c=t )i etic4etei <frame>
(dezactivarea fiind valabil' numai pentru un singur cadru). Qalorile posibile ale atributului frameborder
sunt5
(:es( - ec4ivalent cu ;V
(no( - ec4ivalent cu V
N4tmlO
N4eadONtitleOferex6A6;N7titleON74eadO
Nframeset colsW(HX,I( borderW((O
N7framesetO
N4tmlO
N4eadONtitleOferex6A6HN7titleON74eadO
Nframeset colsW(HX,I( frameborderW(no(O
N7framesetO
'are de defilare
0tributul scrolling al etic4etei <frame> este utilizat pentru a ad'uga unui cadru o bar' de
derulare care permite navigarea -n interiorul documentului afi)at -n interiorul cadrului.
Qalorile posibile sunt5
(:es( - barele de derulare sunt ad'ugate -ntotdeaunaV
(no( - barele de derulare nu sunt utilizabileV
(auto( - barele de derulare sunt vizibile atunci c=nd este necesar
N4tmlO
N4eadONtitleOferex6?N7titleON74eadO
Nframeset colsW(I,I,I(O
Nframe srcW(4ttp577www.acasatv.ro( scrollingW(:es( noresizeO
Nframe srcW(4ttp577www.acasatv.ro( scrollingW(no( noresizeO
Nframe srcW(4ttp577www.acasatv.ro( scrollingW(auto( noresizeO
N7framesetO
0tributul noresize al etic4etei <frame> (f'r' nici o valoare suplimentara) dac' este prezent,
in4ib' posibilitatea prestabilit' a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.
4oziionarea documentului intr-un cadru
0tributele margin4eig4t si marginwidt4 ale etic4etei <frame> permit stabilirea distan*ei -n
pixeli dintre con*inutul unui cadru )i marginile verticale, respectiv orizontale ale cadrului.
Qalori posibile5
-num'r de pixeliV
-procent din l'*imea, respectiv din -n'l*imea cadruluiV
N4tmlO
N4eadONtitleOferex6TN7titleON74eadO
Nframeset colsW(I,I,I(O
Nframe srcW(4ttp577www.unitbv.ro(O
Nframe srcW(4ttp577www.unitbv.ro( margin4eig4tWHO
Nframe srcW(4ttp577www.unitbv.ro( marginwidt4WHO
N7framesetO
$xist' browsere care nu suport' cadre pentru aceasta se utilizeaz' -n interiorul blocului
<frameset> etic4eta <noframes>.
"ac' programul de navigare )tie s' interpreteze cadre, va ignora ce se g'se)te -n aceast' por*iune, iar
dac' nu, materialul cuprins in zona <noframes>...</noframes> va fi singurul care va fi -n*eles )i afi)at.
"e precizat este faptul c' -ntre <noframes> ... </noframes> se pot introduce orice alte tag-uri
829/ (inclusiv imagini, 4iperlin<-uri, tabele).
Cadre interne
+n cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. +n cadru intern
se insereaz' -ntr-o pagina Web -n mod asem'n'tor cu o imagine sau -n modul -n care se specific'
marcajul <frame>, a)a cum rezult' din urm'torul exemplu5
Niframe srcW(ferex6U.4tml( 4eig4tW@X widt4WAXO N7iframeO
Mn acest caz, am specificat c' doresc o fereastr' de cadru intern care are @X din -n'l*imea )i
AX din l'*imea paginii curente.
0tributele acceptate de etic4eta <iframe> sunt -n parte preluate de la etic4etele <frame> )i
<frameset>, cum ar fi5 src, border, frameborder, bordercolor, margin4eig4t, marginwidt4, scrolling,
name, noresizeV sau de la etic4eta
<img> vspace,4space,align,widt4,4eig4tV
N4tmlO
N4eadO N74eadO
Nbod:O
Na 4refW(4ttp577www.unitbv.ro( targetW(icad(O
,isierul;N7aONbrO Na 4refW(4ttp577www.acasatv.ro( targetW(icad(O
,isierulHN7aONbrO Na 4refW(4ttp577www.google.ro( targetW(icad(O
,isierul1N7aONbrO Na 4refW(4ttp577www.:a4oo.com( targetW(icad(O
8omeN7aONbrO NcenterONiframe widt4W(?X( 4eig4tW(AX( borderWH
bordercolorWred nameW(icad( srcW(4ttp577www.protv.ro(O "aca vedeti acest text
inseamna ca browserul dumnevoastranu suporta cadre interne. 0r fi preferabil sa
reveniti, folosind %etscape %avigator versiune @. (7ulterioara) sau I.$xplorer @..
(7ulterioara)
Na 4refW(4ttp577www.antena;.ro(O!agina fara cadre interneN7aO N7iframeON7centerO
N7bod:O
5inte pentru legturi
Mn mod prestabilit, la efectuarea unui clic pe o leg'tur' nou', pagina (c'tre care indic' leg'tura)
o -nlocuie)te pe cea curent' -n aceea)i fereastr' (acela)i cadru). 0cest comportament se poate sc4imba
-n dou' moduri5
prin plasarea -n blocul <head>...</head> a unui element NbaseO care precizeaz', prin atributul
target numele ferestrei (cadrului) -n care se vor -nc'rca toate paginile noi referite de leg'turile din
pagina curenta conform sintaxei5
Nbase targetW(nume6ferastra7frame6de6baza(O
prin plasarea -n etic4eta <a> a atributului target, care precizeaz' numele ferestrei (cadrului) -n
care se va -nc'rca pagina nou referit' de leg'tura, conform sintaxei5
Na 4refW(legatura( targetW(nume6fereastra7frame(O...N7aO
&bserva*ie5
- dac' este prezent at=t un atribut target -n <base> c=t )i un atribut target -n <a>, atunci cele precizate
de atributul target din <a> sunt prioritare.
%umele unui cadru este stabilit prin atributul name al etic4etei <frame> conform sintaxei5
Nfarme nameW(nume6frame(O
6alori pentru atriutul target
0tributul target al etic4etei <frame> accepta anumite valori predefinite de o valoare deosebit'
pentru creatorii de pagini Web. 0ceste valori sunt5
(6self( (-nc'rcarea noii pagini are loc -n cadrul curent)V
(6blan<( (-nc'rcarea noii pagini are loc -ntr-o fereastra nou' anonim')V
(6parent( (-nc'rcarea noii pagini are loc -n cadrul curent dac' acesta exist', altfel are loc in
fereastra browserului curent)V
(6top( (-nc'rcarea noii pagini are loc -n fereastra browserului ce con*ine cadrul curent)V
/ormulare
+n formular este un ansamblu de zone active alc'tuit din butoane, casete de selec*ie, c=mpuri
de editare etc.
,ormularele v' asigur' construirea uneori pagini Web care permit utilizatorilor s' introduc'
efectiv informa*ii )i sa le transmit' serverului. ,ormularele pot varia de la o simpl' caseta de text,
pentru introducerea unui )ir de caractere pe post de c4eie de c'utare - element caracteristic tuturor
motoarelor de c'utare din Web - p=n' la o structur' complex', cu multiple sec*iuni, care ofer' facilit'*i
puternice de transmisie a datelor. & sesiune cu o pagina web ce con*ine un formular cuprinde
urm'toarele etape5
;. +tilizatorul completeaz' formularul )i -l expediaz' unui server.
2. & aplica*ie dedicat' de pe server analizeaz' formularul completat )i (daca este necesar) stoc4eaz'
datele -ntr-o baza de date.
3. "ac' este necesar serverul expediaz' un r'spuns utilizatorului.
+n formular este definit -ntr-un bloc delimitat de etic4etele corespondente <form> si </form>.

+triute e"eniale ale elementului (form)
$xist' dou' atribute esen*iale ale elementului <form>.
1. 0tributul action precizeaz' ce se va -nt=mpla cu datele formularului odat' ce acestea ajung la
destina*ie. "e regul', valoarea atributului action este adresa +./ a unui script aflat pe un server, care
prime)te datele formularului, efectueaz' o prelucrare a lor )i expediaz' c'tre utilizator un r'spuns.
Nform actionW(4ttp577www.:a4oo.com7cgi-bin7nume6fis.cgi(O.
#cript-urile pot fi scrise in limbajele !erl, C, !8!, +nix s4ell.
2. 0tributul method precizeaz' metoda utilizat' de browser pentru expedierea datelor formularului.
#unt posibile urm'toarele valori5
get (valoarea implicit')V -n acest caz, datele din formular sunt ad'ugate la adresa +./ precizat'
de atributul actionV
- nu sunt permise cantit'*i mari de date (maxim ; Lb)
- -ntre adresa +./ si date este inserat un (Z(.
"atele sunt ad'ugate conform sintaxei5 nume6c=mp W valoare6c=mp. Mntre diferite seturi de date
este introdus un (_(.
$xemplu5 (4ttp577www.:a4oo.com7cgi-bin7nume6fis.cgiZnume; W valoare;_numeH W valoareH(V
post; -n acest caz datele sunt expediate separat. #unt permise cantit'*i mari de date (ordinul
93)
!entru ca un formular s' fie func*ional, trebuie precizat ce se va -nt=mpla cu el dup' completarea
)i expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronic'
(e-mail).
!entru aceasta se folose)te un atribut al etic4etei <form> )i anume action care prime)te ca
valoare ( mailto5 ( concatenat cu o adresa valida de e-mail c'tre care se va expedia formularul
completat.
,n formular cu un c7mp de editare 0i un uton de expediere
9ajoritatea elementelor unui formular sunt definite cu ajutorul etic4etei <input>. !entru a
preciza tipul elementului se folose)te atributul t:pe al etic4etei <input>. !entru un c=mp de editare,
acest atribut prime)te valoarea (text(. 0lte atribute pentru un element <input> sunt5
atributul name, permite ata)area unui nume fiec'rui element al formularului.
atributul value, care permite atribuirea unei valori ini*iale unui element al formularului.
+n buton de expediere al unui formular se introduce cu ajutorul etic4etei <input>, -n care
atributul t:pe este configurat la valoarea (submit(. 0cest element poate primi un nume prin atributul
name. !e buton apare scris (#ubmit ]uer:( sau valoarea atributului value, dac' aceast' valoare a fost
stabilit'.
N4tmlO
N4eadONtitleO,orm$x6; N7titleON74eadO
Nbod:O
N4;O +n formular cu un camp de editare si un buton de expediereN74;O N4rO
Nform actionW(mailto5stoica6al\:a4oo.com( met4odW(post(O
%umele5Ninput t:peW(text( nameW(numele( valueW(%umele si prenumele(ONbrO
Ninput t:peW(submit( valueW(expedieaza(O
N7formO
N7bod:O
!entru elementul NinputO de tipul c=mp de editare (t:pe W (text(), alte dou' atribute pot fi utile5
atributul size specific' l'*imea c=mpului de editare dac' dep')e)te aceast' l'*ime, atunci se
executa automat o derulare a acestui c=mpV
atributul maxlengt4 specific' num'rul maxim de caractere pe care le poate primi un c=mp de
editareV caracterele tastate peste num'rul maxim sunt ignorate.
&bserva*ii5
- dac' atributul t:pe lipse)te -ntr-un element <input>, atunci c=mpul respectiv este considerat -n mod
prestabilit ca fiind de tip (text(.
- formularele cu un singur c=mp (de tip text) nu au nevoie de un buton de expediere, datele sunt
expediate automat dup' completarea )i ap'sarea tastei $%2$..
'utonul -e"et
"ac' un element de tip <input> are atributul t:pe configurat la valoarea (reset(, atunci -n
formular se introduce un buton pe care scrie (.eset(. /a ap'sarea acestui buton, toate elementele din
formular primesc valorile prestabilite (definite odat' cu formularul), c4iar dac' aceste valori au fost
modificate de utilizator.
+n buton .eset poate primi un nume cu ajutorul atributului name )i o valoare printr-un atribut
value. +n asemenea buton afi)eaz' textul (.eset( dac' atributul value lipse)te, respectiv valoarea
acestui atribut -n caz contrar.
N4tmlO
N4eadONtitleOformex6HN7titleON74eadO
Nbod:O
N4;O+n formular cu un buton resetN74;ON4rO
Introduceti numele5Ninput t:peW(text( nameW(nume( valueW(%umele(ONbrO
Introduceti prenumele5Ninput t:peW(text( nameW(prenume(
valueW(!renumele(ONbrO
Ninput t:peW(reset( valueW(sterge(O Ninput t:peW(submit(O
N7formO
N7bod:O
C7mp de editare de tip 3pa""!ord3
"aca se utilizeaz' etic4eta <input> av=nd atributul t:pe configurat la valoarea (password(,
atunci -n formular se introduce un element asem'n'tor cu un c=mp de editare obi)nuit (introdus prin
t:peW(text().
2oate atributele unui c=mp de editare r'm=n valabile. #ingura deosebire const' -n faptul c' acest
c=mp de editare nu afi)eaz' caracterele clar, ci numai caractere `, care ascund de privirile altui
utilizator aflat -n apropiere valoarea introdus' -ntr-un asemenea c=mp. /a expedierea formularului -ns',
valoarea tastat' -ntr-un c=mp de tip (password( se transmite clar.
N4tmlO
N4eadONtitleOformex61N7titleON74eadO
Nbod:O
N4;O+n formular cu un buton resetN74;ON4rO
%ume5Ninput t:peW(text( nameW(nume( valueW(%umele(ONbrO
!renume5Ninput t:peW(text( nameW(prenume( valueW(!renumele(ONbrO
!assword5Ninput t:peW(password( nameW(parola( ONbrO
Ninput t:peW(reset( valueW(sterge(O Ninput t:peW(submit( valueW(trimite(O
N7formO
N7bod:O
'utoane radio
3utoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe
posibile. 3utoanele radio se introduc prin etic4eta <input> cu atributul t:pe av=nd valoarea (radio(.
N4tmlO
N4eadONtitleO N7titleON74eadO
Nbod:O
N4;O+n formular cu butoane radioN74;ON4rO
0legeti sexul5Ninput t:peW(radio( nameW(sex( valueW(b(ONbrO
,emeiesc5Ninput t:peW(radio( nameW(sex( valueW(f(ONbrO
Ninput t:peW(reset(O Ninput t:peW(submit(O
N7formO
N7bod:O
/a expedierea formularului se va transmite una dintre perec4ile (sexWb( sau (sexWf(, -n func*ie
de alegerea f'cut' de utilizator.
Ca"ete de *alidare
& caseta de validare (c4ec<box) permite selectarea sau deselectarea unei op*iuni.
!entru inserarea unei casete de validare se utilizeaz' etic4eta <input> cu atributul t:pe configurat la
valoarea (c4ec<box(.
&bserva*ii5
- fiecare caset' poate avea un nume definit prin atributul name.
- fiecare caset' poate avea valoarea prestabilit' (selectat( definit' prin atributul c4ec<ed.
N4tmlO
N4eadONtitleON7titleON74eadO
Nbod:O
N4;O+n formular cu casete c4ec<boxN74;ON4rO
0legeti meniul5NbrO
!izza Ninput t:peW(c4ec<box( nameW(pizza( valueW(o portie(O
%ectar Ninput t:peW(c4ec<box( nameW(nectar( valueW(un pa4ar(O
3ere Ninput t:peW(c4ec<box( nameW(bere( valueW(o sticla(O
Cafea Ninput t:peW(c4ec<box( nameW(cafea( valueW(o ceasca(ONbrO
Ninput t:peW(reset(O Ninput t:peW(submit(O N7formO
N7bod:O
Ca"ete de fi0iere
Mntr-o perec4e (name W value( a unui formular se poate folosi -ntregul con*inut al unui fi)ier pe
post de valoare.
!entru aceasta se insereaz' un element <input> -ntr-un formular, cu atributul t:pe av=nd
valoarea (file( (fi)ier).
0tributele pentru un element de tip caset' de fi)iere5
atributul name permite ata)area unui nume
atributul value prime)te ca valoare adresa +./ a fi)ierului care va fi expediat o dat' cu
formularul. 0ceast' valoare poate fi atribuit' direct atributului value, )i poate fi tastat' -ntr-un c=mp de
editare ce apare o data cu formularul sau poate fi selectat' prin intermediul unei casete de tip ,ile
+pload sau C4oose ,ile care apare la ap'sarea butonului 3rowse... din formularV
atributul enctype precizeaz' metoda utilizat' la criptarea fi)ierului de expediat. Qaloarea acestui
atribut este (multipart 7form-data(.
N4tmlO
N4eadONtitleO N7titleON74eadO
Nbod:O
N4;O+n formular cu caseta de fisiereN74;ON4rO
Nform actionW(mailto5stoica\:a4oo.com( met4odW(post(O
0legeti fisierul5Ninput t:peW(file( nameW(fisier( enct:peW(multipart7form-data(ONbrO
N7formO
N7bod:O
N74tmlO vezi acest exemplu
Li"te de "electie
& list' de selec*ie permite utilizatorului s' aleag' unul sau mai multe elemente dintr-o list'
finit'. /ista de selec*ie este inclus' -n formular cu ajutorul etic4etelor corespondente <select>
</select>.
& lista de selec*ie poate avea urm'toarele atribute5
atributul name, care ata)eaz' listei un nume (utilizat -n perec4ile (nameWvalue( expediat
serverului)V
atributul size, care precizeaz' (printr-un num'r -ntreg pozitiv, valoarea prestabilit' fiind ;) c=te
elemente din list' sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin ac*ionarea
barei de derulare ata)ate automat listei).
$lementele unei liste de selec*ie sunt incluse -n list' cu ajutorul etic4etei <option>. "ou' atribute
ale etic4etei option se dovedesc utile5
atributul value prime)te ca valoare un text care va fi expediat server-ului -n perec4ea
(nameWvalue(V dac' acest atribut lipse)te, atunci c'tre server va fi expediat textul ce urmeaz' dup'
<option>V
atributul selected (f'r' alte valori) permite selectarea prestabilit' a unui element al listei.
N4tmlO
Nbod:O
N4;O+n formular cu o lista de selectieN74;ON4rO
+niversitatea absolvita5NbrONbrO
Nselect nameW(universitate( sizeW(1(O Noption valueW(3(O +niversitatea din Cluj
Noption valueW(+%39( selectedO +niversitatea de %ord 3aia 9are
Noption valueW(+22(O +niversitatea 2ec4nica din 2imisoara
Noption valueW(+23(O +niversitatea 2ec4nica din 3rasov
N7selectONbrONbrO
N7formON7bod:O
Li"ta de "elecie cu "elecii multiple
& lista de selec*ie ce permite selec*ii multiple se creeaz' -ntocmai ca o lista de selec*ie
obi)nuit'. Mn plus, etic4eta <select> are un atribut multiple (f'r' alte valori). C=nd formularul este
expediat c'tre server pentru fiecare element selectat al listei care este se insereaz' c=te o perec4e
(nameWvalue( unde name este numele listei.
N4tmlO
Nbod:O
N4;O+n formular cu o lista de selectie ce accepta selectii multipleN74;ON4rO
/imbi straine cunoscute5NbrONbrO
Nselect nameW(limbi straine( sizeW(A(O Noption valueW(e(O $ngleza
Noption valueW(f( selectedO ,ranceza
Noption valueW(s(O #paniola
Noption valueW(i(O Italiana
Noption valueW(r(O .usa
Noption valueW(g(O Eermana
N7selectONbrONbrO
N7formON7bod:ON74tmlO Qezi exemplul
'utoane
Mntr-un formular pot fi afi)ate butoane. C=nd utilizatorul apas' un buton, se lanseaz' -n execu*ie
o func*ie de tratare a acestui eveniment. /imbajul 829/ nu permite scrierea unor astfel de func*ii
(acest lucru este posibil dac' se utilizeaz' limbajele Yavascript sau Yava). !entru a insera un buton
-ntr-un formular, se utilizeaz' etic4eta <input> av=nd atributul t:pe configurat la valoarea (button(.
0lte doua atribute ale elementului (button( sunt5
atributul name, care permite atasarea unui nume butonului
atributul value, care primeste ca valoare textul ce va fi afisat pe buton.
+n buton pentru lansarea in executie a unei actiuni poate fi introdus intr-un formular prin
elementul <input> avand atributul t:pe configurat la valoarea (button(, asa cum s-a vazut mai inainte.
$xista o a doua modalitate de a introduce intr-o pagina Web un buton de apasat, si anume prin
intermediul blocului <button>...</button>.
+n astfel de buton poate fi inserat intr-un formular, in acest caz declansand actiuni legate de acel
formular, sau poate fi introdus oriunde in pagina pentru initierea unor actiuni independente de
formulare.
0tributele posibile ale elementului (button( sunt5
name acorda elementului un numeV
value precizeaz' textul care va fi afi)at pe butonV
type precizeaz' ac*iunea ce se va executa la ap'sarea butonului dac' acesta este inclus -ntr-un
formular. Qalorile posibile pentru acest atribut sunt5 (button(, (submit(, (reset(.
Mn corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei
imagini.
&bserva*ii finale5
- elementul <form> poate avea un atribut target, care prime)te ca valoare numele unei ferestre a
browser-ului -n care va fi -nc'rcat r'spunsul trimis serverului WWW la expedierea unui formular.
- toate elementele cuprinse -ntr-un formular pot avea un atribut disabled care permite dezactivarea
respectivului element.
- toate elementele de tip text cuprinse -ntr-un formular pot avea un atribut readonl: care interzice
modificarea con*inutului acestor elemente.
%tiluri
#tilurile pun la dispozi*ia creatorilor de site-uri noi posibilit'*i de personalizare a paginilor Web.
+n stil reprezint' un mod de a scrie un bloc de text ( adic' anumite valori pentru font, m'rime culoare,
aliniere, distan*e fa*' de margini etc).

$xista doua modalit'*i de a defini un stil5
sintaxa C## (Cascading #t:le #4eets -(foi in stilul cascada()V
sintaxa Yavascript.
%tiluri dedicate
0ceste stiluri se aplica blocurilor de text pentru care sunt definite.
"e exemplu5
Nst:leO
4; `text-align5centerV color5redVa
N7st:leO
2oate titlurile care apar -n fi)ier ca fiind de m'rime ; vor fi de culoare ro)ie )i centrate. "ac'
dorim ca acela)i stil s' fie utilizat de c'tre mai multe elemente (de ex. (4;(, (4H(, si (p() atunci se
utilizeaz' o list' a acestor elemente, separate prin virgula5
Nst:leO
4;, 4H, p `text-align5centerV color5redVa
N7st:leO
Cla"e de "tiluri
0ceste stiluri permit definirea unui stil general )i folosirea lui oriunde este necesar.
$xemplu5
"efinim o clasa de stiluri (ac( (albastru si centrat) -n interiorul blocului <style>...</style>, aflat la
r=ndul lui -n blocul <head>...</head>5
Nst:leO
all.ac `text-align5centerV color5blueVa
N7st:leO
- (all( aflat -n fa*a clasei de stiluri (ac( indic' faptul ca aceasta clasa este aplicabila tuturor
- blocurilor de text, atunci c=nd acest lucru este necesar.
/a utilizarea clasei de stiluri -n cadrul unui element se folose)te atributul class av=nd ca valoare
numele clasei de stil. 0cesta este un atribut universal adic' este aplicabila tuturor elementelor.
"ac' dorim ca un titlu de m'rimea H s' foloseasc' clasa de stiluri (ac( atunci scriem5
N4H class W acO0cesta este un 4eader de marime H albastru si centratN74HO
&bserva*ii5
)n interiorul unui bloc ("tyle)$$$(8"tyle), comentariile sunt blocuri delimitate de *+ i +* , ca n
$, $--, .a(a i .a(ascript/.
"ac' dorim ca o clasa de stiluri s' fie aplicabil' numai pentru anumite elemente ale documentului (de
exemplu (p() atunci -n construc*ia sa ap'rea acest element ( de exemplu (p.rc().
N4tmlO
N4eadONtitleOclasa de stiluri dedicataN7titleO
Nst:leO p.ac `text-align5centerV color5blueVa N7st:leO
N74eadO
Nbod:O
NpO0cesta este un paragraf normal
NbrO Np classWacO0cesta este un paragraf albastru si centrat
N7bod:O
%tiluri 3 identificate 3
2oate elementele unui document admite un atribut universal numit id. 0tributul id poate
identifica stilul utilizat de un element.
!entru a utiliza un stil (identificat( proceda*i astfel5
-n blocul <style>...</style> introduce*i defini*ia stilului conform sintaxei5
Nst:leO
Srosu ` color5 red a
N7st:leO
-n elementul -n care se dore)te utilizarea local' a acestui stil, folosi*i atributul id care prime)te
valoare numele stilului definit anterior.
"ac' dorim ca un stil (identificat( s' fie aplicabil numai pentru anumite elemente ale
documentului (de exemplu (4H() atunci -n construc*ia selectorului va ap'rea acest element (de exemplu
(4HSac().
%tiluri in-line
#tilurile in-line sunt definite c4iar -n etic4eta ce ini*iaz' blocul -n care dorim s' se aplice aceste
stiluri. !entru aceasta se utilizeaz' atributul universal st:le (comun practic tuturor etic4etelor ce apar
-ntr-un document 829/). Qaloarea dat' atributului st:le este tocmai descrierea stilului, cuprins' nu
-ntre acolade `..a ci -ntre g4ilimele (...(.
"e exemplu5
N4H st:le W ( color5 redV text-align5 centerV(O
0cest 4eader de m'rimea H este de culoare ro)ie )i este centrat.N74HO
"ac' dorim utilizarea unui anumit st:le pentru un fragment de text, atunci includem acest text
-ntr-un bloc cu ajutorul delimitatorilor <span>...</span>, dup' care utilizam atributul st:le pentru
etic4eta <span>.
%tiluri definite in fi"iere externe
#tilurile definite -n interiorul unui bloc <style>...</style> pot fi transferate -ntr-un fi)ier extern
exist=nd astfel posibilitatea utiliz'rii lor -n mai multe fisiere 829/.
!entru a utiliza un stil definit -ntr-un fi)ier extern se procedeaz' astfel5
;. #e creeaz' un fi)ier care s' con*in' numai descrierea stilurilor )i se salveaz' cu extensia
.css sau .%tml. Con*inutul acestui fi)ier coincide cu con*inutul unui bloc <style>...</style>, f'r' ca
ace)ti delimitatori s' fie inclu)i.
H. Mn fi)ierul 829/ care utilizeaz' stilurile definite -n fi)ierul creat la punctul ;, se include
in blocul <head>...</head> o etic4eta <link> av=nd trei atribute.
o atributul relcu valoarea (st:les4eet(
o atributul 4ref av=nd ca valoare adresa +./ a fi)ierului creat la punctul ;V
o atributul t:pe cu valoarea (text7css(.
#e utilizeaz' titlurile definite -n fi)ierul extern ca )i cum ar fi definite -n fi)ierul 829/ curent
-ntr-un bloc <style>...</style>.
4"eudocla"e
!seudoclasele se utilizeaz' pentru personalizarea leg'turilor. $le se definesc -n blocul
<style>...</style> sau -ntr-un fi)ier extern, conform sintaxei5
a5 lin< `color5 blac<V font-size5 Hpta
a5 activate `color5 blueV font-st:le5 italica
a5 visited `color5 c:anV text-decoration5 nonea
!entru ca numai anumite leg'turi s' utilizeze un stil se pot folosi urm'toarele doua metode5
a5 lin<.C/0#0; `...a combinat cu Na class W C/0#0; 4refW( (O ...N7aO
a5 lin<SI"; `...a combinat cu Na id W I"; 4refW( (O ...N7aO
0ten*iePPP acest exemplu lucreaz' doar cu browsere Internet $xplorer @.x sau mai mareP
Mn browsere cursorul mouse-ului are -n general o form' simpl', lu=nd pe parcursul vizion'rii
paginii respective maximum doua -nf'*i)'ri diferite5
;. 9=na - atunci c=nd este pozi*ionat pe o leg'tur'
H. 3ara verticala - atunci c=nd este pozi*ionat pe alt obiect dec=t o leg'tur'.
0cestea -ns' sunt formele implicite. "esigur exist' cazuri -n care am dori ca browser-ul s' aib' o
alta form' dec=t una dintre acestea. /a fel ca multe alte probleme care privesc modul -n care o pagina
arat' )i aceasta i*i g'se)te rezolvarea in folosirea C##, ca limbaj de descriere a formei unui document.
!roprietatea care gestioneaz' forma cursorului se nume)te simplu5 cursor si poate fi introdus' -n orice
element style al unui tag 4tml.
"e exemplu pentru ob*inerea unei imagini a cursorului de tipul unei s'ge*i orientat' $st - Qest la
trecerea mouse-ului peste un lin<V iat' codul ce va trebui folosit5
N a 4refW( fisier.4tml( st:leW( cursor 5e-resize( ( /egaturaN 7aO
%u este, -ns' singurul exemplu, -n continuare ave*i toate codurile pentru formele de cursor pe
care le pute*i folosi5
CREAREA I PUBLICAREA UNUI SITE WEB
0m studiat p=n' acum elementele fundamentale ale limbajului 829/ inclusiv modul -n care
acesta poate fi extins prin folosirea scripturilor CEI, a scripturilor Yava#cript )i a foilor de stiluri. 0ve*i
la -ndem=n' acum instrumentele necesare pentru a crea propriul dumneavoastr' site Web. "ar este oare
suficientZ .'spunsul este nu.
!entru a crea un site Web de calitate, care s' comunice informa*iile -n mod logic )i atractiv )i
care s' atrag' vizitatori permanen*i, cunoa)terea limbajului 829/ nu este suficient'. Mnainte de a
-ncepe scrierea codului 829/ pentru paginile dumneavoastr' trebuie s' parcurge*i alte dou' etape
importante5 planificarea site-ului )i stabilirea elementelor de Web design. "up' ce a*i finalizat
documentele 829/ care vor face parte din site trebuie s' testa*i func*ionarea lin<-urilor )i aspectul
paginilor -n diferite browsere. bi, -n fine, dup' ce toate aceste etape au fost parcurse, urmeaz'
publicarea site-ului pe un server Web care s'-l fac' accesibil tuturor celor care navig4eaz' pe Web.
Mn cele ce urmeaz' vom discuta despre etapele care preced construirea documentelor 829/
care vor forma site-ul )i despre cele care urmeaz' dup' ce codul 829/ al paginilor a fost definitivat.
ne-resize s'geata #ud Qest G %ord $st
nw-resize s'geata #ud $st G %ord Qest
pointer m=na
s-resize s'geata %ord - #ud
se-resize s'geata %ord Qest G #ud $st
sw-resize s'geata %ord $st G #ud Qest
text
bara verticala din c=mpurile de
introducere a datelor
w-resize s'geata $st G Qest
auto utilizeaz' set'rile implicite ale utilizatorului
cross4air Creeaz' o cruce
default set'rile implicite ale browserului
e-resize s'geata $st - Qest
4and m=na
4elp semnul -ntreb'rii
move cruce cu s'ge*i la capete
n-resize s'geata sud-nord
wait clepsidra
!rima etap' a procesului de construire a unui site este planificarea. Mn aceast' etap' trebuie
identifica*i factorii care nu pot fi controla*i printre care se num'r'5 comportamentul utilizatorului,
browserul cu care va fi vizualizat' pagina )i leg'turile cu pagini externe.
Planificarea site-ului parcurge urm'toarele etape5
#tabilirea audien*ei site-ului
#tabilirea scopului site-ului
"efinirea obiectivelor site-ului
Colectarea informa*iilor despre subiectul prezentat
#tabilirea specifica*iilor site-ului
#tabilirea modului de prezentare a site-ului
+n site de calitate, care s' ofere informa*ii valoroase -n mod atractiv )i s' permit' o comunicare
eficient' a acestora nu se na)te -n mod -nt=mpl'tor. ,'r' a avea o privire de ansamblu asupra aspectelor
stabilite -n faza de planificare, )ansele de a realiza un site de bun' calitate sunt minime. "ac' ve*i
-ncepe s' scrie*i direct codul 829/ f'r' s' trece*i prin etapa de planificare ve*i ob*ine doar o
-ngr'm'dire de pagini f'r' coeren*', adesea defectuos legate -ntre ele, cu un con*inut neclar )i slab
structurat.
Construirea unui site necesit', pe l=ng' o bun' cunoa)tere a limbajului 829/, respectarea unor
principii )i folosirea unor te4nici consacrate. #ite-ul trebuie s' fie orientat c'tre vizitator, c'tre
-n*elegerea )i satisfacerea nevoii de informa*ie a acestuia. "esignul trebuie s' men*in' un ec4ilibru
-ntre te4nologiile folosite )i eficien*', asigur=nd o vitez' convenabil' de -nc'rcare a paginilor )i o
vizualizare bun' -n cele mai populare dintre browsere. 0spectul site-ului trebuie s' fie -n concordan*'
cu scopul )i obiectivele sale, evit=nd excesele de orice fel.
!rincipiile care trebuie respectate -n etapa de design sunt5
0socierea semnifica*iilor
9en*inerea competitivit'*ii
,olosirea eficient' a resurselor
Concentrarea pe necesit'*ile utilizatorului
Mn*elegerea permeabilit'*ii Web-ului
Crearea unui aspect pl'cut, coerent )i fluent
#us*inerea interactivit'*ii
#us*inerea naviga*iei
#trategia de construire a site-ului poate urma una dintre metodele Btop-downD , Bbottom-upD sau
metoda increment'rii.
Mn procesul de design, prima etap' o constituie sc4i*a site-ului care trebuie s' reflecte structura
acestuia5 liniar', ierar4ic' sau de tip Web.
Informa*ia trebuie fragmentat' astfel -nc=t s' nu dep')easc' puterea de asimilare a
utilizatorului.
/eg'turile dintre pagini trebuie s' fie stabilite astfel -nc=t s' permit' o parcurgere logic' a
con*inutului site-ului, iar instrumentele de navigare trebuie adaptate modului -n care sunt create
leg'turile dintre pagini, oferind indicii vizuale asupra func*iei lor. $ste recomandat ca instrumentele de
navigare s' aib' acela)i aspect -n toate paginile.
%erespectarea principiilor )i te4nicilor de design poate s' conduc' la construirea unor pagini de
tip Bfund'turaD , a unor pagini prea -nc'rcate cu informa*ii sau, dimpotriv', a unor pagini inegale. "e
asemenea, printre gre)elile de design care pot ap'rea sunt leg'turile f'r' semnifica*ie, excesul de
elemente multimedia, paginile dezorganizate sau stridente.
"up' etapele de planificare, design )i implementare urmeaz' etapa de testare a site-ului.
Mn aceast' etap' se realizeaz'5
Corectarea paginilor din punct de vedere ortografic )i gramatical
2estarea leg'turilor din cadrul site-ului
2estarea leg'turilor externe
"epanarea gre)elilor care *in de sintaxa codului 829/
$tapa de testare este deosebit de important' pentru impresia general' l'sat' de site-ul
dumneavoastr'. +n site cu ortografie neglijent', cu gre)eli de exprimare, cu leg'turi nefunc*ionale
poate -ndep'rta vizitatorii, oric=t de valoroase ar fi informa*iile prezentate -n interiorul s'u.
Mn sf=r)it, site-ul dumneavoastr' este finalizat. 0*i parcurs toate etapele, de la planificare, la design
)i implementare, v-a*i asigurat c' toate elementele func*ioneaz' corect. 0 venit momentul publicrii pe
Web a site-ului, astfel -nc=t rezultatele muncii dumneavoastr' s' fie cunoscute de to*i aceea care v' vor
vizita paginile. Mn etapa public'rii pe Web a site-ului intervin mai mul*i pa)i5
1. #tabilirea unui nume de domeniu
2. Stabilirea serverului Web pe care va fi stocat (g'zduit) site-ul
3. Organizarea yi denumirea fiyierelor -n conformitate cu cerin*ele serverului gazd'
4. Transferul fiyierelor
1. Numele de domeniu
!entru ca site-ul dumneavoastr' s' aib' o identitate pe Web ave*i nevoie de un nume de
domeniu pentru el. %umele de domeniu al site-ului va face parte din adresa +./ a fiec'rei pagini )i va
oferi site-ului o prezen*' distinct' pe Web.
"omeniile principale de pe Web pot fi de mai multe tipuri5
comerciale $com
educa*ionale .edu
guvernamentale .go*
furnizorii de servicii de re*ea .net
institu*ii non-profit .org
domeniile corespunz'toare *'rilor lumii .ro, etc
!entru a ob*ine un nume de domeniu pentru site ave*i la dispozi*ie dou' posibilit'*i5
domeniu pl'tit - asigura site-ului dumneavoastr' o identitate serioas' )i credibil', iar
adresa sit-ului va fi de forma 4ttp577www.adresadumneavoastra.com (sau
4ttp577www.adresadumneavoastra.ro)
domeniu gratuit G asigura un nume de domeniu gratuit, iar adresa site-ului va fi 4ttp577
www.numefirmagazda.com7cdumneavoastra sau
4ttp577www.dumneavoastra.numefirmagazda.com
2. Serviciul de gzduire Web (Web hosting)
Mnainte de a publica site-ul pe Web este necesar' o evaluare a necesit'*ilor de acces, pentru a
determina ce fel de cont se potrive)te site-ului dumneavoastr'. !lec=nd de la presupunerea c' de*ine*i
deja o conexiune la Internet, nu vom intra -n am'nunte privind alegerea unui furnizor de servicii
Internet (I#! G 0nternet 1er(ice !ro(ider).
&p*iunile pentru g'zduire sunt urm'toarele5
Instalarea unui server Web propriu
+tilizarea serverului Web al providerului de servicii Internet
+tilizarea unui server Web apar*in=nd unei firme care ofer' servicii de 4osting
3. Organizarea yi denumirea fiyierelor
"e)i aceast' etap' este intrinsec' procesului de construire a site-ului, o vom discuta -n acest
capitol, deoarece acum este momentul c=nd o bun' organizare a directoarelor, subdirectoarelor )i
fi)ierelor devine deosebit de important'.
1rganizarea directoarelor 0i fi0ierelor
$ste foarte bine s' organiza*i fi)ierele care fac parte din site pe computerul dumneavoastr' exact
a)a cum ele vor fi organizate pe serverul Web. #erverul Web are un director (r'd'cin'( (root) unde vor
fi stocate toate fi)ierele site-ului. ,olderul unde ve*i stoca aceste fi)iere pe computerul personal va juca
rolul directorului (r'd'cin'( al serverului. Mn directorul (r'd'cin'( va fi plasat fi)ierul care va con*ine
pagina (4ome( a site-ului, fi)ier denumit de obicei inde'.%tml sau inde'.%tm.
"ac' site-ul este de mici dimensiuni (-ntre A )i ; pagini) pute*i plasa toate fi)ierele -n acela)i
director. "ac' site-ul este mai mare, este recomandat s' crea*i pentru fiecare sec*iune principal' a sa
c=te un subdirector care va con*ine fi)ierele asociate acelei sec*iuni. #ubdirectoarele pot con*ine la
r=ndul lor c=te un fi)ier index. 0tunci c=nd ve*i transfera fi)ierele de pe computerul dumneavoastr' pe
serverul Web ve*i putea s' transfera*i -ntregul subdirector cu fi)ierele con*inute -n el. "e asemenea
aceast' metod' va face )i -ntre*inerea site-ului mult mai u)oar'.
& alt' problem' este locul unde ve*i stoca imaginile. !ractica standard este de a crea un
subdirector special -n directorul (r'd'cin'( unde s' plasa*i toate imaginile din site. "ac' proceda*i
astfel este extrem de important s' crea*i un subdirector similar cu aceea)i amplasare )i pe computerul
dumneavoastr'. Calea de la pagina care apeleaz' o imagine la imaginea respectiv' trebuie s' fie aceea)i
)i pe computerul dumneavoastr' )i pe server, altminteri imaginile nu se vor afi)a dup' ce site-ul a fost
transferat pe server.
& alt' variant' de stocare a imaginilor este crearea unui subdirector destinat imaginilor, plasat
-n subdirectorul fiec'rei pagini. Cu acelea)i precau*ii legate de calea corect' c'tre imagini, aceast'
metod' func*ioneaz' bine, ba c4iar -mbun't'*e)te viteza de -nc'rcare a imaginilor -n pagini.
"ezavantajul const' -n faptul c' adesea este necesar s' re*ine*i mai multe copii ale aceleia)i
imagini -n diferite subdirectoare, -n func*ie de paginile unde este folosit'.
6erificarea numelor fi0ierelor
/a mutarea fi)ierelor de pe computerul dumneavoastr' pe serverul Web se impune verificarea
numelor fi)ierelor care trebuie s' fie compatibile cu sistemul unde sunt mutate.
& aten*ie deosebit' trebuie acordat' denumirii )i extensiei fi)ierelor. %u are importan*' dac'
opta*i pentru extensia .%tml sau .%tm. 2ot ce trebuie este s' fi*i consecvent cu extensia aleas' de-a
lungul -ntregului site. "e asemenea, trebuie s' ave*i -n vedere c' -n sistemele +%IC, cele mai des
folosite ca servere Web, denumirile fi)ierelor sunt case&sensiti(e. & pagin' denumit' m2page.%tml nu
este totuna cu pagina M2!age.%tml. !entru a evita confuziile folosi*i pentru denumirea fi)ierelor numai
litere mici.
4. Transferul fiyierelor
2ransferul fi)ierelor care compun site-ul de pe computerul propriu pe serverul Web este o
opera*iune relativ simpl', care const' -n copierea fi)ierelor pe server -n loca*ia destinat' site-ului
dumneavoastr'. +nele dintre firmele de 4osting asigur' o aplica*ie special' destinat' transferului
fi)ierelor, dar cea mai utilizat' metod' de transfer este prin intermediul unui client ,2!.
+n client FTP (File Transer !rotocol) este o aplica*ie prin intermediul c'reia se poate realiza
transferul fi)ierelor de pe un sistem pe altul. !ute*i copia fi)iere de pe computerul personal pe un alt
computer (opera*ie denumit' "pload) dup' cum pute*i prelua fi)iere de pe un alt computer, pe
computerul personal (opera*ie denumit' Download). Cele mai folosite programe ,2! sunt $uteFT!
(4ttp577www.cuteftp.com) )i 314FT! (4ttp577ipswitc4.com). &dat' ce a*i instalat pe computerul
dumneavoastr' un client ,2!, v-a*i -nregistrat numele de domeniu )i ave*i un cont la un serviciu de
g'zduire totul este preg'tit pentru transferul fi)ierelor care compun site-ul pe serverul gazd'.
!entru a realiza transferul fi)ierelor, -n general va trebui s' urma*i urm'torii pa)i5
Conectarea la Internet
"esc4iderea programului ,2!. Qe*i observa o serie de casete de dialog -n care trebuie introduse
informa*iile necesare programului pentru a realiza conexiunea cu computerul gazd'.
!entru a face conexiunea cu serverul trebuie s' furniza*i programului adresa ,2! a 4ost-ului
dumneavoastr'. 0ceasta v' este furnizat' de firma de 4osting la desc4iderea contului. "e asemenea,
programul v' va cere numele de utilizator )i parola pe care le-a*i stabilit la desc4iderea contului. %u
uita*i s' de-bifa*i op*iunea Anon2mous din meniul 5ogin. !rin introducerea numelui de utilizator )i
a parolei ve*i c'p'ta acces la contul dumneavoastr' )i ve*i putea intra -n directorul unde vor fi
plasate fi)ierele site-ului.
& alt' informa*ie care trebuie furnizat' programului este tipul fi)ierelor transferate. Mn general
pentru fi)ierele 829/ se folose)te op*iunea A1$00 iar pentru celelalte fi)iere, op*iunea binar2. 9ai
simplu, pute*i alege op*iunea AutoDetect prin care programul determin' singur tipul fi)ierului )i
modul cum va face transmiterea lui.
Celelalte casete de dialog pot fi l'sate necompletate sau cu set'rile preexistente.
"up' furnizarea acestor informa*ii programul ,2! va realiza conexiunea cu serverul gazd'.
#electarea fi)ierelor pe care dori*i s' le copia*i. Qe*i observa c' fereastra aplica*iei ,2! este
-mp'r*it' -n dou'5 -ntr-o parte ave*i directoarele de pe computerul personal, -n cealalt' parte
directoarele de pe computerul gazd'. #electa*i directorul care con*ine fi)ierele dumneavoastr' )i
da*i comanda de transfer -n directorul care v' este destinat pe serverul gazd'.
"up' transferul fi)ierelor, pot ap'rea probleme de diverse tipuri. +neori, paginile publicate nu pot fi
accesate deloc, scripturile nu func*ioneaz', etc. !rimul lucru care trebuie verificat -n acest caz este dac'
fi)ierele se afl' -n directoarele potrivite. 0poi trebuie verificate permisiunile de acces pentru directoare
)i fi)iere, extensiile fi)ierelor, fi)ierele index. Mn cazul c=nd apar probleme, cea mai sigur' cale de
rezolvare a lor este s' lua*i leg'tura cu administratorul serverului gazd' )i s' -i cere*i informa*ii c=t mai
complete privind drepturile de acces pentru directoare, calea corect' c'tre scripturile folosite )i, -n
general, set'rile necesare pentru buna func*ionare a site-ului.
NOIUNI LEGATE DE DREPTURI DE AUTOR
9odalitatea -n care Internetul a devenit fenomenul pe care astazi -l consideram un element
omniprezent -n existenta umana pare a fi tocmai principiul care a cauzat aparitia dreptului de autor.
"aca admitem ca Internetul este definibil prin capacitatea sa de a standardiza comunicatii c=t mai libere
-ntre doua masini, dreptul de autor s-a nascut tocmai din dizolvarea treptata a limitarilor inerente
comunicarii operelor catre public.
/egea dreptului de autor se poate citii pe site-ul 4ttp577www.legi-internet.ro7lgdraut.4tm
0naliz=nd proliferarea unor pagini de internet care preiau articole )i stiri din edi*iile electronice
ale ziarelor )i agen*iilor de pres' sfid'nd reglement'rile dreptului de autor, Consiliul de &noare al C.!
solicit' de*in'torilor respectivelor pagini de internet s' -nceteze -nc'lcarea legisla*iei -n vigoare.
Consiliul de &noare consider' c' preluarea f'r' cost a unor materiale de pres' se poate realiza
doar -n limita a A de semne, dar f'r' a dep')i jum'tate din articolul sau )tirea -n cauz', asigur=ndu-se
astfel at=t libera circula*ie a informa*iei, c=t )i caracterul de (revist' a presei( sus*inut de paginile de
internet -n cauz'. Mn mod obligatoriu, -n aceste cazuri, trebuie citat' sursa informa*iei.
!reluarea a mai mult dec=t cele prev'zute anterior se poate realiza doar -n condi*iile unui acord,
financiar sau de alt' natur', -nc4eiat cu de*in'torul drepturilor. 9embrii Clubului .om=n de !res' vor
analiza oportunitatea -nfiin*'rii unui organism independent care s' fie -mputernicit de de*in'torii de
drepturi s' le gestioneze -n numele )i beneficiul lor.
9embrii Consiliului de &noare al Clubului .om=n de !res' vor solicita interventia &."0
pentru a sanc*iona activitatea acelor de*in'tori de pagini de internet care nu se vor conforma legisla*iei
-n vigoare privind drepturile intelectuale. In lumea digitala se aplica aceleasi legi ale proprietatii
intelectuale si drepturilor de autor ca si pentru toate celalate creatii originale.
Drepturile de autor reprezinta ansamblul prerogati(elor de care se bucura autorii cu reerire
la operele create6 institutia dreptului de autor este instrumentul de protectie a creatorilor si operelor
lor.
"reptul de autor este protejat in .omania prin 5egea 7*899:. 0ceasta a fost modificata si
completata prin 5egea nr. ;7< din ;= iunie ;>>? si &rdonanta de +rgenta a Euvernului nr. ;H1 din ;
septembrie HA. !entru detalii accesati pagina @iciului de 1tat pentru 0n(entii si Marci
SECURITATEA DOCUMENTELOR
Informa*iile din sistem necesit' protec*ie )i -n timpul transmiterii lor prin telefon, cablu,
microunde, satelit sau re*ele de comunicare. 0ceast' protec*ie reprezint' obiectivul fundamental al
securit'*ii comunica*iilor.
!rotec*ia calculatorului )i a informa*iilor din acesta se face cu ajutorul 0ntivirusului,
,irewallului si utilitarelor 0ntisp:ware precum si a utilitarelor de protectie generala.
Functile Antivirusului5 Qerifica programele incarcate in memoria calculatorului si fisierele ce
sunt accesate. +nii antivirusi mai verifica si fisierele ce fac parte din traficul internet.+nii antivirusi au
si sistem de prevenire a intruziunilor (I"#). In unele cazuri 0ntivirusii au inglobat in ei capacitatea de a
detecta si #p:ware si .ootLituri (.oot<its).
Ca alternativa in lipsa unei protectii proactive incluse in antivirus sau in programul antisp:ware
ce completeaza antivirusul se pot folosi programe de tip 8I!# (8ost Intrusion !rotection #:stem) cum
ar fi 0nti8oo< H.? si #:stem #afet: 9onitor ,ree.
Functile Firewalului5 ,irewalul are rol de filtru intre calculator si retea (retea insemnand de la
retea /0% si pana la reteaua Internet). $l filtreaza pac4etele de date ce intra si pleaca din calculatorul
sau reteaua pe care o protejeaza. +n firewall poate fi 4ardware sau software. +n firewall trebuie sa
permita doar trecerea informatilor utile pentru calculator prin el si nu a celor malware. +n firewall e
prima linie defensiva impotriva Qiermilor (Worms) nepermitand intrarea acestora pe calculatorul
protejat. "aca totusi se reuseste pacalirea ,irewallului prin trecerea de el programul malware fiind
mascat ca trafic legitim, atunci 0ntivirusul trebuie sa preia lupta odata ce malware-ul trece de firewall.
+nele firewaluri (cum este cel de Windows) bloc4eaza doar traficul nedorit venit din afara si
lasa sistemul vulnerabil (daca nu exista un antivirus de veg4e).
,irewallul si 0ntivirusul nu sunt suficiente in toate cazurile, folosirea update-urilor la sistemul
de operare si la programele utilizate fiind necesara.
Contra malwareului de tip #p:ware70dWare ilegal se pot folosi si programe 0ntivirus dar in
general este recomandata folosirea unor produse dedicate antisp:ware.
.oot<iturile sunt cele mai bine ascunse programe malware putini antivirusi reusind sa detecteze
si sa elimine acest tip de probleme odata ce au ajuns pe calculatorul in cauza. 2otusi exista programe
specializate in detectia si eliminarea .oot<iturilor.
Programe Antivirus free:
& mentiune este necesara5 programele free au facilitati mai reduse ca versiunile lor comerciale.
AOL McAfee VirusScan Plus G #pecial edition. 0 aparut prea recent pentru a putea da o
descriere a eficientei si eventualelor probleme. %ecesita o inregistrare enervanta si facerea unui cont
0&/. 0ctive Qirus #4ield bazat pe L0Q nu mai este oferit de 0&/ (din pacate).
Avira Antivir Personal Edition Classic. +n program eficient si rapid si care poate verifica
(daca este setat pentru acest lucru) si categorii mai complexe de malware dar care nu ofera Web
#canner si protectie a mailului si are un sistem de update-uri automate limitat la un update automat pe
zi. +tilizatorul trebuie aiba grija ce mailuri desc4ide si sa faca update manual la antivirus pentru o
siguranta mai mare.
Avast Home Edition Free. 0cest antivirus este destul de eficient si rapid, are si un utilitar
rezident de verificare a traficului internet la navigarea pe internet si un sistem I"# de baza dar ca
limitari nu verifica scripturile in versiunea free iar updateurile la baza de date antivirus apar cam rar.
%ecesita inregistrare gratuita pentru a fi folosit ;@ luni dupa care poti sa ceri alta c4eie gratuita pentru
inca ;@ luni.
AVG Free +n antivirus acceptabil, rapid dar care are ca limitari updateuri cam rare, limitari la
categoriile de malware detectat si curatat si faptul ca nu poate fi configurat foarte detaliat.
Programe Firewall Free:
Zone Alarm Free . ,irewall destul de eficient si foarte usor de configurat dar care consuma
putin cam multe resurse si este un pic cam neprotejat la unele atacuri de tip (Injection 0tac( (atacuri in
care malware-ul se foloseste de permisiunea de acces data browserului pt a trece de firewall).
%ota5 Qersiunile aparute dupa ?.A sunt cam instabile7cu buguri asa ca e recomandata folosirea versiunii
?.A.
Sygate Personal Firewall 5.5.2710. +n ,irewall eficient si cu un consum de resurse scazut dar
care din pacate nu a fost dezvoltat in continuare (exista si versiunea A.? dar care este 3eta si poate face
probleme) dupa ce firma a fost cumparata de #:mantec.
Comodo Personal Firewall +n ,irewall care nu lasa nimic sa treaca fara sa te intrebe dar care
este destul de dificil de configurat (in cazul configurarii imperfecte poate sa incetineasca conexiunea la
internet).
1etico Personal Firewall v.1 freeware +n ,irewall eficient dar pentru multi prea agasant
(intreaba extrem de des cand isi face regulile de allow si den:).
CoreForce +n ,irewall foarte eficient dar cam greu de configurat
DEFINIREA I NELELGEREA TERMENULUI DE COOCKIE
Qariabilele de date coo<ie sunt o caracteristic' 822! care permite stocarea de date -n sistemul
unui utilizator. Qariabilele coo<ie sunt utile pentru stocarea preferin*elor utilizatorilor )i a altor
informa*ii care trebuie re*inute atunci c=nd utilizatorul trece la o nou' pagin' Web.
Qariabilele coo<ie sunt utile dintr-o mul*ime de puncte de vedere. "e exemplu, multe situri Web
folosesc variabile coo<ie pentru a stoca identitatea utilizatorului )i preferin*ele de vizualizare ale
acestuia. C=nd utilizatorul revine la situl Web, variabilele coo<ie permit browserului s' recunoasc'
utilizatorul )i s' restaureze op*iunile sitului selectate de c'tre utilizator.
"in p'cate, variabilele coo<ie nu constituie solu*ia perfect' pentru un mediu de stocare pe
termen lung )i prezint' o serie de dezavantaje. "e exemplu5
F +n utilizator poate dezactiva variabilele coo<ie prin stabilirea unei op*iuni a browserului
F Mn anumite situa*ii, variabilele coo<ie pot fi vizualizate de al*i utilizatori dec=t utilizatorul ale
c'rui date le stoc4eaz'
F +n site poate stoca numai H de variabile coo<ie )i numai @L3 de informa*ii -n unitatea de
4ard-disc local' a utilizatorului
F %umeroase versiuni ale browserelor frecvent folosite au erori care le -mpiedic' s' foloseasc'
variabilele coo<ie -n mod adecvat
Mn ciuda acestor dezavantaje, variabilele coo<ie r'm=n cea mai popular' te4nic' pentru
ob*inerea unui mediu de stocare pe termen lung. "eci, este important s' -n*elege*i care este modul de
func*ionare )i de utilizare a acestora.
CERTIFICAT DIGITAL
+n certificat digital reprezinta un fisier protejat prin parola de acces, ce include o varietate de
informatii de tipul5 numele si adresa e-mail a detinatorului de certificat digital, o c4eie de cifrare ce
poate fi utilizata pentru a verifica semnatura digitala a posesorului si perioada de validitate a
certificatului digital. 0utoritatile de certificare (C0) colecteaza informatii despre o anumita companie
sau persoana fizica, eliberand ulterior un nou certificat digital.
Certificatele digitale sunt utilizate pentru autentificare online, similar modului de identificare cu
ajutorul permisului de conducere sau al certificatului de nastere. 0numite te4nologii (#$2, ##/ si
0ut4enticode) isi disputa in mediul Web piata online a certificatelor digitale
CATEVA CUVINTELA FINAL
0m ajuns, iat', la finalul c'l'toriei noastre. 0ve*i, acum, toate informa*iile )i instrumentele
necesare construirii unui site atr'g'tor, func*ional )i eficient. !ute*i -ncepe prin a v' construi o pagin'
personal' pe care o pute*i plasa pe un server gratuit, pentru a exersa cuno)tin*ele dob=ndite. "ar acesta
este doar primul pas.
"esignul Web este unul dintre domeniile cu un mare poten*ial de dezvoltare. 2ot mai multe
firme doresc site-uri pe Web, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a-)i
prezenta oferta de produse )i servicii. & carier' -n acest domeniu este o alegere cu mari )anse de succes
pentru orice t=n'r. 9ai mult, de)i pe Web-ul rom=nesc aceast' zon' este -nc' slab dezvoltat', pute*i s'
v' ini*ia*i propria afacere care s' se deruleze exclusiv pe Internet.
0cest material a urm'rit s' v' ofere informa*iile necesare unui start corect -n domeniul
designului Web. "ar nu trebuie s' v' opri*i aici. "esignul )i programarea Web reprezint' domenii vaste
iar materialul noastr' a atins doar elementele de baz' ale acestora. !ute*i continua -nv'*=nd Yava#cript,
Yava sau un limbaj de interogare pentru bazele de date stocate pe server. !ute*i deveni familiar cu unul
din editoarele puternice de 829/ (9acromedia "reamwaver este cel mai utilizat -n acest moment) sau
pute*i -nv'*a s' st'p=ni*i foarte bine un program de grafic' (Corel"raw sau 0dobe !4otos4op de
exemplu) pentru a crea grafic' Web. !osibilit'*ile sunt nenum'rate.
Mn lumea World Wide Web totul este -ntr-o continu' mi)care )i dezvoltare. 0cest material va
oferit fundamentele program'rii -n 829/. Continua*i s' -nv'*a*i, perfec*iona*i-v' continuu )i succesul
viitor v' este asigurat.

Suport Curs WebStarter

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Suport Curs WebStarter

Încărcat de

Drepturi de autor:

Formate disponibile

CUPRINS

WORLD WIDE WEB

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