Curs Pagini Web

Modulul 1: Utilizarea operaiilor de baz necesare realizrii
unei pagini web

1. Prezentarea mediului de lucru Dreamweaver
Macromedia Dreamweaver este o unealt destinat creatorilor de pagini web.
Dreamweaver a fost creat de Macromedia (acum Adobe Systems) i momentan a ajuns la
versiunea 11. Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipul
WYSIWYG (What-You-See-Is-What-You-Get), dar n versiunile recente au fost
implementate funcii de editare avansate i suport pentru alte tehnologii web cum ar fi CSS,
JavaScript etc.
Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor 90 i momentan
deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe variate
platforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX cu
ajutorul unor emulatoare software, cum ar fi Wine.
Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare
a paginilor HTML, fcnd astfel posibil crearea cu uurin a paginilor web de ctre
utilizatorii neexperimentai.
Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini de
dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant
a browserelor web. Aceast afirmaie este n mare parte adevrat deoarece paginile web
produse folosesc design-ul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i
pentru producerea de coduri care adesea nu erau conform standardelor W3C (World Wide
Web Consortium principala organizaie internaional care stabilete normele i standardele
dup care funcioneaz browserele web i n care ar trebui scrise codurile surs ale site-urilor
web), dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate acestea,
Macromedia a crescut suportul pentru tehnologia CSS i alte modaliti de design fr a fi
necesar folosirea design-ului pe baz de tabel.
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere
externe sau n cadrul documentului, prin elementul <style> i/sau atributul style.
Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul
utilizatorului, pentru a previzualiza website-ul creat. De asemenea, conine i cteva utilitare
pentru administrarea site-urilor, cum ar fi cele pentru a gsi i a modifica un paragraf sau o
linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu
ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare.
Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare
dinamic a coninutului. De asemenea, este oferit suport pentru conectarea la baze de date
(cum ar fi MySQL i Microsoft Access) pentru a filtra i afia coninutul script-ului de genul
PHP, ColdFusion, Active Server Pages(ASP) i ASP.NET, fr a avea nevoie de o prealabil
experien n programare.
Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil.
Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate
scrie (de obicei n HTML i JavaScript) i pe care le poate descrca i instala, acestea aducnd
un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de
dezvoltatori care produc extensii i le public (att commercial, ct i gratuit) pentru probleme
de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online.
1
Interfaa aplicaiei Macromedia Dreamweaver 8
Dreamweaver folosete un sistem de panouri i ferestre fixe, care nu-i schimb poziia, i i
modific opiunile de configurare n funcie de contextul aciunii ntreprinse. Astfel se realizeaz o
economie de spaiu pe ecran i se faciliteaz foarte mult procesul de nvare a interfeei.
Acest program are ase componente principale: bara cu instrumente (Toolbar), bara de lansare
a aplicaiilor (Launcher), panoul Objects, fereastra Document, bara Mini Launcher i inspectorul
Property.
Inspectorul Property este sensibil la context, ceea ce nseamn c i modific n mod constant
coninutul n funcie de tipul elementului selectat.
Inspectorul Property controleaz numeroi parametri, inclusiv cei pentru text, tabele, aliniere,
imagini. Deoarece Dreamweaver insereaz n mod prestabilit o pagin fr coninut, unde se gsete
un simbol clipitor pentru inserare de text, inspectorul Property afieaz n mod prestabilit
proprietile unui text.
Coninutul Inspectorului Property se modific n funcie de ceea ce este editat pe ecran.
Bara cu instrumente conine o serie de butoane i meniuri derulante care v permit executarea
unor operaii precum schimbarea modului de vizualizare a documentului, stabilirea titlului paginii,
previzualizarea paginii ntr-un browser i accesul la noul panou Reference.
Modurile de vizualizare n fereastra document
Dreamweaver ofer un nivel superior de control i flexibilitate, exprimat prin posibilitatea de

vizualizare a paginilor dumneavoastr ntr-unul din cele trei moduri de vizualizare diferite, respectiv
2
Code, Code and Design i Design. n mod prestabilit, toate documentele noi se vor deschide n modul
de vizualizare Design. Cele trei butoane situate n colul din stnga-sus al ferestrei document v
permit s comunicai n cele trei moduri de vizualizare diferite.
Mod de vizualizare Code

Mod de vizualizare Code and Design
Mod de vizualizare Design
Exist numeroase preferine (Preferences) pe care le putei modifica, pentru a transforma

Dreamweaver n propriul dumneavoastr editor HTML personalizat. Aceti parametri pot fi
modificai n orice moment. Pentru a obine accesul la caseta de dialog Preferences selectai Edit >
Preferences Sub categoria General exist parametri care determin aspectul i modul de
funcionare a programului Dreamweaver n ansamblu.
Ce este un dosar rdcin local?
Dreamweaver folosete o schem de gestionare a siturilor care impune pstrarea tuturor fiierelor n
interiorul unui dosar rdcin local principal, pentru a putea reproduce cu uurin ierarhia de dosare
de pe hard disk atunci cnd ncrcm fiierele ntr-un server Web. Un dosar rdcin local este
asemntor cu oricare alt dosar de pe hard disk, cu excepia faptului c i-am indicat programului
Dreamweaver c n acest dosar se gsesc toate fiierele HTML i fiierele media aferente sitului.
3
Un dosar rdcin local poate conine multe sub-dosare, dar Dreamweaver nu poate pstra evidena
elementelor dac acestea nu sunt stocate n dosarul rdcin local.
Meniurile File i Edit sunt standard

pentru majoritatea programelor. Meniul
File conine comenzi de deschidere,
salvare, import i export de fiiere.
Meniul Edit conine comenzile Cut,
Copy i Paste, alturi de comenzile Find
i Replace i comanda Preferences.
Multe elemente din interfaa
Dreamweaver i din operarea sa pot fi
configurate n Preferences.
Meniul View activeaz i dezactiveaz vizualizarea

coninutului seciunii de antet (head); a elementelor inviziblile;
a straturilor, tabelelor i limitelor cadrelor, a barei de stare i a
hrilor de imagine. Meniul View are de asemenea comenzi de
activare a riglei i a grilei, de executare a pug-in-urilor i
pentru afiarea de imagini de trasare. Comanda Prevent
Layer Overlaps (Prevenirea suprapunerii de straturi) este i
ea poziionat n meniul View.
4
Meniul Insert este aproape echivalent cu bara de
inserri. Din acest meniu se pot insera opional toate
elementele disponibile pe bara de inserri. Bara de
inserri conine un numr total de seciuni din care
putem s alegem diferite categorii de obiecte
disponibile. Exist dousprezece seciuni n bara de
inserri: Common, Layout, Text, Tables, Frames,
Forms, Templates, Characters, Media, Head, Script
i Application. Pentru a afia butoanele obiectelor
dintr-o anumit categorie trebuie s dm click pe
seciunea categoriei.
Meniul Modify ne permite s modificm

proprietile obiectului selectat la un moment dat.
5
Meniul Text ne ofer acces la mai multe
modaliti de finisare a aspectului textului din
pagina Web. Cel mai important pentru cei care
scriu cu greeli este c meniul text conine
comanda Check Spelling (verificarea
ortografiei). Putem indenta un text, crea o lista i
modifica proprietile fontului.
Meniul Commands ofer comenzi utile

cum ar fi Clean up HTML (curarea
codului HTML) i Clean Up Word HTML
(Curarea cuvintelor din codul HTML).
Inserarea tabelelor n Dreamweaver
Selecteaz Insert->Table
6
Selecteaz numrul de rnduri (rows), coloane (columns), distana dintre celule, limea
(width) tabelului n procente sau pixeli i dimensiunea marginii (border), apoi apas OK.
Va aprea un tabel pe ecran cu 3 rnduri i 3 coloane, lime 75% i marginea=1 ca mai jos.
Dup selectarea tabelului, fereastra de proprieti va arta ca mai jos. Poi seta rndurile,
limea, nlimea (height), distana dintre celule, alinierea la stnga/dreapta/centru i limea
marginii.
Din panoul de proprieti adiionale poi seta culoarea de fundal (background color), culorile
marginilor (border color), imaginea de fundal (background image).
Formatarea oricrei celule sau grup de celule poate fi efectuat subliniind celula/celulele, iar
fereastra de proprieti i permite s selectezi Font i alte atribute.
Din panoul de proprieti adiionale poi modifica alinierea orizontal/vertical, limea,

nlimea, nowrapping, imaginea i culoarea de fundal i culoarea marginilor.
7
Inserarea culorilor n tabele
Vom ncepe cu un tabel de 100px lime (Insert->Table)
n panoul de proprieti, eticheta "Bg color" conine culoarea implicit (alb sau #FFFFFF) a
tabelului.
Click pe casu i selecteaz System Colour Picker.
Caut o culoare pentru a o aduga (apas Add in Custom Colours) i apas OK.
De asemenea, selecteaz o culoare i pentru marginile tabelului.
8
Acum ar trebui s ai aceste proprieti setate n tabel.
Iar rezultatul va fi:
Aplicaie: Realizai, cu ajutorul unui tabel, calendarul pe anul 2012.
9
2. Prezentarea limbajului HTML
Paginile web sunt scrise ntr-un limbaj numit HTML (HyperText Markup Language). HTML
permite utilizatorilor s realizeze pagini care includ texte, grafic i indicatori la alte pagini de
Web. Pentru realizarea documentelor HTML pot fi utilizate editoare simple de text (Notepad
pentru Windows sau Joe n Linux) sau editoare create special pentru paginile web, editoare ce
pot dispune de funcii sofisticate pentru partea vizual (WYSIWYG - What You See Is What
You Get) sau pentru verificarea legturilor n ntregul site.
Lansarea editorului este realizat n funcie de tipul de editor ales. Spre exemplu, dac a fost
ales:
- Notepad, programul va fi lansat din meniul Start-Programs-Accessories-Notepad.
- Word, lansarea acestuia are loc, de exemplu, pe calea Start-Programs-Microsoft Office-
Microsoft Office Word.
Odat lansat editorul, pagina va fi redactat folosind sintaxa HTML i va fi salvat cu extensia
html sau htm.
Vizualizarea fiierului HTML poate fi realizat cu ajutorul unui browser web. Acesta permite
afiarea i manevrarea informaiilor de tip text, imagine, sunet i executarea unor
programe/documente care pot face parte din site-urile web. Browser-ul are o caset de text n
care utilizatorul poate s scrie adresa documentului sau a site-ului dorit, adresa acestuia
(numit URL - Uniform Resource Locator) fiind unic.
Editoare HTML: Front Page, HomeSite, AceHTML, Dreamweaver etc.
Unele dintre cele mai cunoscute browsere web sunt Microsoft Internet Explorer, Mozilla
Firefox, Mozilla Camino, Opera Software - Opera, Nintendo DS browser.
Noiuni generale
O pagin web are n componena dou elemente de baz.
<html> <body>
Continutul paginii va fi aici
</body> </html>
Primul tag se numeste <html> i este cel care i spune browser-ului c a nceput un cod n
HTML. Cel de-al doilea tag, <body>, spune browser-ului c aici ncepe partea vizibil sau
coninutul paginii HTML.
Tag-urile </body> i </html> sunt tag-uri de nchidere. </body>, d de tire browser-ului, c
s-a ncheiat coninulul pagini, iar </html> c s-a ncheiat documentul HTML.
Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie
respectiva funcie. Deci <tag> este folosit pentru a ncepe o funcie, iar </tag> pentru a o
ncheia.
Ordinea deschiderii i a nchiderii tag-urilor este foarte important. Dac un tag este deschis
ntr-un altul, de exemplu body este deschis n html atunci acel tag (body) este cel care trebuie
nchis naintea celui de-al doilea tag (html).
Am nchis mai nti body pentru c a fost cel care s-a deschis cel mai recent. Aceast regul i
anume deschiderea i nchiderea tag-urilor se aplic la toate celelalte taguri ale documentelor
HTML.
<head>
Acest tag urmeaz imediat dup <html> i este folosit pentru a indica browser-ului, informaii
utile precum: titlul pagini, coninutul (folosit de motoarele de cutare vechi) i multe altele
10
<title>
Se pune ntre <head> i </head>. Acest tag este cel care d numele pagini. Numele va fi afiat
n browser, de obicei n partea stng sus.
<h2>
Acesta este titlul care apre n pagin, nainte de coninut i va fi mai mare dect litera de
coninut. <h2> nseamn c e cea de-a doua mrime a literei ntre cele ase care exist. <h1>
este cea mai mare iar <h6> va fi cea mai mic.
<p>
Este tag-ul care marcheaz deschiderea i ncheierea unui paragraf. Aa c atunci cnd vei
ncepe un paragraf asigur-te c ai pus <p> la nceput i </p> la sfrit.
Marcaje de baz
<HTML> </HTML> Definete un fiier n format Web

<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Tilul documentului
<BODY> </BODY> Corpul paginii HTML
BGCOLOR = culoare Culoarea de fond a paginii
TEXT=culoare Culoarea textului pe pagin
LINK=culoare Culoarea legturilor nevizitate din pagin
VLINK=culoare Culoarea legturilor vizitate din pagin
ALINK=culoare Culoarea legturilor pe durata clicului executat de
utilizator
BACKGROUND = url Imaginea de fond pentru pagin
<P> Paragraf
<Hn> </Hn> Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT> Specific atribute ale textului ncadrat
SIZE=n Dimensiunea textului este 1-7
FACE="a,b" Specific fontul: a, dac este disponibil, sau b
COLOR=s Culoarea textului: fie un nume de culoare, fie o valoare
RGB
<BR> Linie nou
<PRE> </PRE> Informaie preformatat
 Comentariu HTML
<CENTER> </CENTER> Centreaz materialul n pagin
<HR> Rigla orizontal
SIZE=x nlimea riglei n pixeli
WIDTH=x Limea riglei n pixeli sau n procente
NOSHADE Dezactiveaz afiarea umbrei pentru rigla orizontal
ALIGN=x Alinierea riglei orizontale n pagin (left, center, right)
COLOR=x Culoarea riglei orizontale (numai pentru IE)
<A> </A> Marcaj de tip ancor
HREF=url Referin hipertext
HREF=#nume Referin ctre o ancor intern
Name=nume Definiia unei ancore interne
11
<HTML> </HTML> Definete un fiier n format Web
<HEAD> </HEAD> Antetul documentului
Marcaje pentru liste
<DD> Descriere definiie

<DL> </DL> Lista de tip definiie
<DT> Termen de definiie
<LI> Element de list
<OL> List ordonat (numerotat)
TYPE=tip Tipul numerotrii. Valori posibile: A, a, I, i, 1
START=x Numrul de nceput al listei ordonate
<UL> List neordonat (marcat)
TYPE=forma Forma marcajului. Valori posibile: circle, square,
disc.
Formatarea caracterelor
<B> </B> Afieaz text cu caractere aldine

<I> </I> Afieaz text cu caractere cursive
<U> </U> Afieaz text subliniat
<TT> </TT> Text cu font monospaiu
<CITE> </CITE> Citare bibliografic
<CODE> </CODE> Listing de program
<EM> </EM> Stil logic de evideniere
<KBD> </KBD> Text de la tastatur
<STRONG> </STRONG> Evideniere logic puternic
<VAR> </VAR> Program sau variabil
<BASEFONT SIZE = n> Specific dimensiunea implicit a fontului din
pagin
Marcaje pentru cadre
<FRAMESET> </FRAMESET> Definirea redactrii paginii

COLS=x Numrul i mrimea relativ a coloanelor
ROWS=x Numrul i mrimea relativ a liniilor
BORDER=x Specific starea "on" (activ) sau "off" (inactiv)
pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x Specific mrimea chenarului
FRAMESPACING = x Mrimea spaiului dintre dou cadre adiacente
<FRAME> Definiia unui anumit cadru
SRC=url URL-ul sursa pentru cadru
NAME=nume Numele cadrului (utilizat mpreun cu
TARGET=nume ca parte component a marcajului
de tip ancor <a>
SCROLLING=scrl Definete opiunea barei de derulare.Valori posibile:
on (activ), off (inactiv), auto (automat)
FRAMEBORDER=x Mrimea chenarului din jurul cadrului
MARGINHEIGHT=x Spaiul suplimentar de deasupra i dedesubtul unui
anumit cadru
MARGINWIDTH=x Spaiu suplimetar la stnga i la dreapta unui
12
anumit cadru
<NOFRAMES> </NOFRAMES> Seciunea de pagin afiat pentru utilizatorii care
nu pot vedea un cadru
<IFRAME> Cadru intern (numai pentru IE)
SRC=url Sursa cadrului
NAME=s Numele ferestrei (util pentru TARGET)
HEIGHT=x nlimea cadrului nglobat
WIDTH=x Limea cadrului nglobat
Marcaje pentru tabele
<TABLE> </TABLE> Tabel HTML

BORDER=x Chenarul tabelului
CELLPADDING=x Spaiul suplimentar n cadrul celulelor tabelului
CELLSPACING=x Spaiul suplimentar ntre celulele tabelului
WIDTH=x Limea impus tabelului
FRAME=valoare Ajustarea fin a tabelului
RULES=valoare Ajustarea fin a riglelor tabelului
BORDERCOLOR = culoare Specific culoarea chenarului tabelului
BORDERCOLORLIGHT = Cea mai deschis culoare din cele dou culori
culoare specificate
BORDERCOLORDARK = Cea mai nchis culoare din cele dou culori
culoare specificate
ALIGN=left Aliniaza tabelul la marginea din stnga a paginii,
iar textul curge n partea dreapt
ALIGN=right Aliniaz tabelul la marginea din dreapta a paginii,
iar textul curge n partea stng
HSPACE=x Spaiu suplimetar pe orizontal n jurul tabelului
VSPACE=x Spaiu suplimetar pe vertical n jurul tabelului
COLS=x Specific numrul de coloane ale unui tabel
<COLGROUP> </COLGROUP> Definete un set de definiii de coloane cu ajutorul
marcajului <col>
<COL WIDTH=x> Definete limea unei coloane exprimat n pixeli
<THEAD> </THEAD> Definete titlul tabelului
<BODY> </TBODY> Definete corpul tabelului
<TR ></TR> Linie de tabel
BGCOLOR=culoare Specific culoarea de fond pentru ntreaga linie
ALIGN=aliniere Alinierea celulelor de pe linia curent (left, center,
right)
<TD> </TD> Celul de date a tabelului
BGCOLOR=culoare Specific culoarea de fond pentru celula de date
COLSPAN=x Numrul de coloane pe care se ntinde celula
curent de date
ROWSPAN=x Numarul de linii pe care se intinde celula curenta
de date
ALIGN=aliniere Alinierea materialului din cadrul celulei de
date.Valori posibile: (left, right, center)
VALIGN=aliniere Alinierea pe vertical a materialului din cadrul
celulei de date.Valori posibile: (top, bottom,
middle)
13
BACKGROUND=url Specific imaginea de fond pentru celula tabelului
NOWRAP Nu permite desprirea textului pe linii n cadrul
unei celule
ALIGN=baseline Aliniaz celule de date cu linia de baz a textului
adiacent
ALIGN=caracter Aliniaz o coloan fa de un anumit caracter
(caracterul prestabilit este ".")
Adugarea imaginilor
<IMG> Marcajul de introducere a imaginilor

SRC=url Sursa fiierului grafic
ALT=text Textul alternativ de afiat, dac este necesar
ALIGN=aliniere Alinierea imaginii n pagin. Valori posibile: top (sus), middle (n
mijloc), bottom (jos), left (n stnga), right (la dreapta)
HEIGHT=x nlimea imaginii (n pixeli)
WIDTH=x Limea imaginii
BORDER=x Chenarul din jurul imaginii, atunci cnd aceasta este utilizat ca
hiperlegatur
HSPACE=x Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli)
VSPACE=x Spaiul suplimentar pe vertical din jurul imaginii (n pixeli)
Marcaje pentru formulare
<FORM> </FORM> Formular HTML activ

ACTION=url Programul CGI de pe serverul care recepioneaza datele
METHOD=metoda Modul n care datele sunt transmise serverului (GET sau
POST)
<INPUT > Cmp de text sau alte date de intrare
TYPE=opiune Tipul cmpului de intrare <INPUT>. Valori posibile: text,
password, checkbox, hidden, file, radio, submit, reset, image.
NAME=nume Numele simbolic al valorii cmpului
VALUE=valoare Coninutul prestabilit al cmpului de text
CHECKED= opiune Buton/caset marcat n mod prestabilit
SIZE=x Numrul maxim de caractere acceptate ntr-un cmp de text
<SELECT> </SELECT> Grup de casete de validare
SIZE=x Numrul de articole de meniu care se afieaz odat
(prestabilit=1)
MULTIPLE=x Permite selecia mai multor articole din meniu
<OPTION > Alegerea particular ntr-un domeniu <SELECT>
VALUE=valoare Valoarea rezultant a acestei selecii din meniu
<TEXTAREA> Cmp de intrare de tip text pe linii multiple
</TEXTAREA>
ROWS=x Numrul de linii al casetei de text
COLS=x Numrul de coloane (caractere) pe linie al casetei de text
<FIELDSET> mparte formularul n pri logice
</FIELDSET>
<LEGEND> Numele asociat setului de cmpuri (fieldset)
14
</LEGEND>
ALIGN=s Specific alinierea legendei (explicaiei) afiate (top, bottom,
left, right)
TABINDEX=x Specific ordinea elementelor atunci cnd utilizatorul apas
tasta Tab
ACCESKEY=c Specific tasta care asigur comanda rapid de la tastatur
asociat unui anumit element
DISABLED Elementul este inactiv, dar este afiat pe ecran
READONLY Elementul este afiat pe ecran dar nu poate fi editat
Tabel diacritice
Limba romn folosete cinci litere cu semne diacritice: , , , , . Aspectul i denumirea
acestor semne sunt artate n tabelul de mai jos.
cciul
accent circumflex;
virgul, plasat sub literele corespunztoare s, S, t, T.
valoare cod
ă
Ă
â
Â
î
Î
ş
Ş
ţ
Ţ
15
3. Proiectarea structurii site-ului
Principalele funcii ale unui site sunt: s informeze, s comunice, s distreze sau s
conving. Structura i aspectul grafic al site-ului trebuie s ndeplineasc aceste funcii de
baz.
Etapele n proiectarea unui site sunt:
1. Identificarea cu exactitate a obiectivului pe care l atingem prin publicarea acestui site i
particularitile publicului cruia i se adreseaz (vrst, educaie, interese, alte aspecte
psihologice);
2. Culegerea de informaii referitoare la subiectul site-ului. n aceast etap adunai toate
informaiile necesare, ntr-o form brut sau consultai alte site-uri de aceeai factur;
3. Selectarea informaiilor relevante. Adaptai volumul de informaii la obiectivul urmrit;
4. Proiectarea structurii site-ului. Organizai informaiile culese pe categorii, stabilii
numrul de pagini, coninutul acestora, relaiile dintre pagini. Nu uitai c nu proiectai
site-ul pentru voi!;
5. Proiectai aspectul grafic al site-ului. Toate paginile site-ului trebuie s aib un aspect
grafic comun, unitar. Dac fiecare pagin arat complet altfel, aspectul general va fi de
aduntur. Aspectul grafic al unei pagini Web este determinat de text (fontul folosit,
dimensiunea caracterelor, stiluri, culori), fundalul paginii (imagine sau culoare), imaginile
folosite, secvenele audio sau video.
6. Implementai. Descriei codul necesar pentru realizarea paginilor n modul n care le-ai
proiectat. Descriei documente externe de definire a stilurilor.
Lucrai ngrijit! Verificai cu atenie corectitudinea lexical i gramatical a textelor.
Asociai un titlu semnificativ fiecrei pagini, datai sau semnai pagina.
7. Testai. Verificai funcionalitatea paginilor voastre! Verificai fiecare link, fiecare imagine,
fiecare element multimedia. Vizualizai pagina pe diferite sisteme de calcul, cu diferite
browser-e, folosind monitoare cu diferite rezoluii.
8. Publicai! Dac ai depit cu succes faza de testare, alegei un server pentru a publica
pagina, contactai administratorul de reea (WebAdmin), apoi plasai paginile pe un server!
9. Promovai. Pentru ca site-ul vostru s fie vizitat, nu este suficient s-l publicai, trebuie s
i facei cunoscut prezena.
Un prim pas ar fi nscrierea site-ului la principalele motoare de cutare (exemplu:
Yahoo, Excite, AltaVista), deoarece sunt primele locuri ctre care se ndreapt cineva care
caut informaii pe Internet.
O alt tehnic de a atrage vizitatori sunt listele de coresponden. Creai liste de
vizitatori crora s le trimitei prin e-mail informri despre site i despre actualizrile acestuia.
Dac urmrii atragerea unei audiene internaionale pentru site-ul vostru, este bine
s apelai la servicii speciale de promovare a site-urilor.
Exemplu:
http://www.hyperbanner.com - HyperBanner;
http://www.linkexchange.com MSN LinkExchange;
Sfat:
Proiectarea unui site nu este un proces secvenial! Nu v ateptai ca etapele s fie parcurse
strict n aceast ordine i o singur dat. Pe parcursul lucrului vei evalua i reevalua ceea ce
ai fcut, cu siguran va trebui s revenii la un anumit pas, s rafinai o idee, s modificai
anumite elemente, pn cnd produsul finit corespunde cerinelor formulate iniial!
La adresa www.w3.org/Provider/Style vei gsi o documentaie excelent, elaborat de Tim
Berners-Lee, referitoare la elaborarea paginilor Web.
16
4. Elemente de design al paginii
Cele ase elemente de baz ale unui bun webdesign, sunt:

1. Simplitatea
2. Balansul Vizual
3. Proporia
4. Contrastul
5. Cursivitatea
6. Armonia
Simplitatea
Simplitatea este cel mai important principiu cnd vine vorba de webdesign. La urma urmei
WWW-ul vrea s fac lucrurile mai simple iar informaia mai accesibil publicului. Vizitatorii
n-or s se zbat prea tare ca s ajung la coninutul site-ului tu.
Pe ct posibil ncearc s foloseti regula celor trei click-uri, adic nici o informaie nu
trebuie s fie mai departe de trei click-uri. Ascunznd informaia dup meniuri peste meniuri
nu faci dect s i frustrezi vizitatorii sau s i obligi s se mute la altceva (click, click, click,
click, click, las-o balt).
Balansul vizual
Fiecare elment de webdesign (poze, text, spaii albe) are o influen optic. n lucrrile
tiprite asta se cheam densitate de cerneal. Pentru a crea o balan de la nceput la sfrit
trebuie ca orice pagin Web s aib o seciune header and footer; asta creeaz repere viziuale
site-ului tu i l face mai uor de navigat. Nuana coloristic ar trebui s fie aceeai.
De asemenea, nu subestima valoarea spaiilor albe. Muli designeri neexperimentai simt
nevoia s umple fiecare pixel cu informaie, iar asta nu este cea mai bun metod de
comunicare.
Propor ia
Din anume motive ochiul uman tinde s favorizeze raporturi diferite de unu ntre lungime i
lime. Este mai plcut ochiului un dreptunghi ntr-o proporie de dect un ptrat perfect.
Contrastul
Contrastul este foarte simplu de explicat; dac ipi de la nceput, publicul va nceta s te
asculte, dar dac opteti i dintr-o dat ipi din adncul plmnilor, fi sigur c vei atrage
atenia cuiva. O alt greeal este crearea documentelor cu text foarte dens ignornd
includerea de spaii albe; asta face ca cititorii s vad un zid de gri. nc un sfat ar fi s evitai
folosirea unui singur tip de tratament pentru textul vostru. De exemplu: folosii fie bold fie
italic dar nu mpreun.
Cursivitatea
Vizitatorii obinuiesc mai nti s scaneze rapid pagina i abia apoi s citeasc. Primele priviri
ajung pe formele neobinuite apoi ncep s analizeze textul. O pagin Web bun conduce
vizitatorul n punctul dorit.
Armonia
Site-ul tu ar trebui s fie armonios, cu alte cuvinte, paginilor tale trebuie s le stea bine
mpreaun, s arate c aparin unele de altele. Poi face asta pstrnd aceleai elemente i
aproximativ aceeai structur pe fiecare pagin din site.
17
5. Activitate practic
Test HTML
1. Scriei un text HTML unde fontul s fie de culoare albastr, mrime 5, ngroat i de tipul
"Courier New".
2. Definii denumirea HTML!
3. Cum se numete:
a) Elementul din interiorul parantezelor unghiulare?
b) Elementul de introducere a unui link?
4. Transformai urmtorul text n format HTML:
"-Mam, unde merg Mihai i Ionu?
-Ei se duc la scldat.
-Pot s merg i eu?
-Tu ai teme!"
Rezolvare:
1.
HTML Afiare
<html><head></head>
<body>
<b><font size="5" face="Courier New"
color="blue">Text</font><b>
</html>
2. HTML = HyperText Markup Language

3. a) Se numete TAG.
b) <A> </A> - marcaj de tip ancor.
4.
<html>
<head></head>
<body>-Mamă, unde merg Mihai şi Ionuţ?<br>
-Ei se duc <b>la scăldat.</b><br>
-Pot să merg şi <font color="Red">eu?</font><br>
-Tu ai <font color="Blue">teme!</font>
</body>
</html>
18
Modulul 2: Folosirea elementelor de baz pentru inserarea
n pagin a elementelor: text, imagine
1. Inserarea i formatarea unui text: corp de liter, mrime, stil
Tag-ul <P>
- permite introducerea unui paragraf
Dac scriem un text ntre tag-urile <P> i </P>, atunci textul va fi ncadrat de cte un rnd
liber.
Exemplu:
<html>
<body>
<p>Acesta este un paragraf obinuit.</p>
<p>Un rnd al unui paragraf are limea ferestrei afiat de browser. Dac micorm fereastra
browser-ului acelai paragraf va ocupa mai multe rnduri.</p>
<p>Dac dou cuvinte ale unui paragraf sunt separate prin mai multe spaii browser-ul
afieaz doar un singur spaiu.</p>
</body>
</html>
Elementul &nbsp (non-breaking space)

Elementul &nbsp previne trecerea unui cuvnt pe linia urmtoare, prin scrierea sa naintea
cuvntului respectiv. Dac cuvntul nu ncape pe linie, se coboar i cuvntul precedent pe
linia urmtoare.
Tag-ul BR
Atunci cnd vrem ca textul din cadrul paginii noastre web s fie afiat pe mai multe rnduri
vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de ncheiere, n timp ce
tag-ul <P> are tag de ncheiere, ns nu este obligatoriu.
Tag-ul <BR> vine de la line break (ntrerupere de linie).
Tag-ul B
Are rolul de a determina browser-ul s afieze ngroat (bold) textul cuprins ntre cele dou
tag-uri ale sale: <b> i </b>.
Tag-ul I
Are rolul de a determina browser-ul s afieze nclinat (italic) textul cuprins ntre cele dou
tag-uri ale sale: <i> i </i>.
Tag-ul U
Are rolul de a determina browser-ul s afieze subliniat (underline) textul cuprins ntre cele
dou tag-uri ale sale: <u> i </u>.
<del>text tiat (deleted) </del>

<sup>exponent (superscript) </sup>
<sub>indice (subscript) </sub>
<strong>text ngroat (strong) </strong>
<big>mare (big) </big>
<small>mic (small) </small>
<font color="red">font rou (detalii) </font>
<font face="Courier">font Courier (detalii) </font>
<font size="6">font size=6 (detalii) </font>
<div align="center">text aliniat pe centru</div>
19
<div align="left">text aliniat la stnga</div>
<div align="right">text aliniat la dreapta</div>
<h1> titlu de nivel 1 </h1>
20
2. Folosirea elementelor bloc de text
Aceste etichete nu se refer la particularitile caracterelor ce compun textul, ci la funciile pe

care le poate avea un bloc de text n cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui spaiu
suplimentar.
Inserarea unei adrese
Dac ntr-o pagin web trebuie inclus o adres, atunci putem utiliza facilitile oferite de o
etichet dedicat: <address>...</address>.
Exemplu:
<head>
<title> Adresa</title>
</head>
<body>
Adresa instituiei noastre este :<address> Colegiul Naional Fraii Buzeti<br>
Str: tirbei Vod, Nr: 5 <br>
Craiova Romania </address>
</body>
</html>
Afiare:
Adresa instituiei noastre este :
Colegiul Naional Fraii Buzeti
Str. tirbei Vod, Nr. 5
Craiova Romnia
Indentarea unui bloc
Pentru ca un bloc de text s fie indentat (marginea din stnga a textului s fie deplasat la
dreapta la o anumit distan fa de marginea paginii), acesta trebuie inclus ntre etichetele
<blockquote>...</blockquote>.
Exemplu:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaz este indentat:<blockquote> Aceste etichete nu se refer la particularitile
caracterelor ce compun textul, ci la funciile pe care le poate avea un bloc de text n cadrul
paginii Web. Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui
spaiu suplimentar. </blockquote>
</body>
</html>
21
Blocul preformatat
ntr-un bloc <pre>...</pre>, semnificaia marcajelor HTML se pstreaz.

Blocul <pre>...</pre> este indicat pentru a insera rnduri vide (spaiu ntre rndurile
succesive). Caracterul "spaiu" poate fi luat n considerare de browser dac este inserat
explicit prin .
Exemplu:
HTML Afiare
<html> <head> Orar:
<title> Bloc preformatat</title> Ora/Ziua Luni Marti
</head> <body> Miercuri
Orar:<pre> 8:00 Romana Matematica Sport
Ora/Ziua Luni Marti Miercuri 9:00 Geografie Istorie Fizica
8:00 Romana Matematica Sport
9:00 Geografie Istorie Fizica
</pre> </body> </html>
ntr-un fiier HTML, caracterele "<" i ">" au o semnificaie special pentru browser. Ele
ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin. Dac dorim ca un
fragment de text s conin astfel de caractere, acest fragment trebuie ncadrat de una dintre
perechile de etichete:
<xmp>...</xmp> ( 80 de caractere pe rnd );
<listing>...</listing> ( 120 de caractere pe rnd ).
Aceste marcaje interpreteaz corect caracterele "spaiu", "etichet" i "CR/LF". Textul afiat
n pagin este monospaiat.
HTML Afiare
<html> <head> Un fiier html standard arat astfel:
<title> xmp i listing</title> <html>
</head> <body> <head>
Un fiier html standard arat astfel: <xmp> <title> </title>
<html> </head>
<head> <body>
<title> </title> O pagina Web ...
</head> </body>
<body> </html>
O pagina Web ...
</body>
</html> </xmp> </body>
</html>
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nou i permite:
inserarea unui spaiu suplimentar nainte de blocul paragraf;
inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete delimitatorul
</p> (acesta fiind opional);
alinierea textului cu ajutorul atributului align, avnd valorile posibile "left", "center"
sau "right".
22
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Linia generat de un paragraf (implicit paragraful este aliniat la stnga).
<p align="right"> Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n
centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf
aliniat in centru.
</body>
</html>
Blocuri de titlu
ntr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se refer la un bloc de text i trebuie nsoite de o etichet de ncheiere
similar.
Aceste etichete accept atributul align pentru alinierea titlului blocului de text la stnga (n
mod prestabilit), n centru i la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere
mai mari i aldine, pe cnd <h6> folosete caracterele cele mai mici.
Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de mrime 1 aliniat n centru </h1>
<h2 align="right"> Titlu de mrime 2 aliniat la dreapta. </h2>
<h4> Titlu de mrime 4 aliniat la stnga (implicit) </h4>
</body>
</html>
Linii orizontale
ntr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>.
Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <hr>:
align permite alinierea liniei orizontale. Valorile posibile sunt "left", "center" i
"right";
width permite alegerea lungimii liniei;
size permite alegerea grosimii liniei;
noshade cnd este prezent definete o linie fr umbr;
color permite definirea culorii liniei.
23
Exemplu:
<html> <head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicit alinierea stnga, lime
100%, grosime 2 cu umbr.
<hr>
Urmeaz o linie aliniat n centru, de lime 50%, grosime 5 pixeli , fr umbr.
<hr align="center" width="50%" size="5" noshade> Urmeaz o linie aliniat la dreapta, de
lime 150 de pixeli, grosime 12 pixeli, de culoare roie.
<hr align="right" width=150 size=12 color="red">
</body> </html>
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniaz centrat toate elementele pe care le

conine.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr
width=70%> <hr width=40%> <hr width=10%> </center>
</body>
</html>
Blocuri <nobr>
Blocul de text cuprins ntre etichetele <nobr>...</nobr> va fi afiat pe o singur linie.
Exemplu:
<html>
<head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O
singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie.
O singur linie. O singur linie. O singur linie. O singur linie.
</nobr>
</body>
</html>
Blocuri <div>
24
Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui
bloc <div> (diviziune) este align (aliniere).
Valorile posibile ale acestui parametru sunt:
"left" (aliniere la stnga);
"center" (aliniere central);
"right" (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. n acest caz, alinierea precizat de
atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul <div>.
Un bloc <div>...</div> admite atributul "nowrap" care interzice ntreruperea rndurilor de
ctre browser.
Exemplu:
<html>
<head>
<title> Blocul <div></title>
</head>
<body>
Aceasta linie este o linie normal. Urmtorul bloc este aliniat la dreapta.
<div align="right">
O singur linie. O singur linie. O singur linie. O singur linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru. Bloc aliniat pe centru.<br>
</div>
</body>
</html>
25
3. Inserarea unei imagini modificarea proprietilor imaginii:
poziionare, dimensiuni, ncadrare n text
Folosind imagini pagina capta un plus de atractivitate dar putei plti preul unei ncrcri
greoaie dac dimensiunile imaginii sunt mari.
Cteva din formatele de imagini utilizate n paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF
(*.gif), BMP (*.bmp), PNG (*.png).
Formatul gif este recomadat pentru realizarea butoanelor i a icoanelor iar jpg pentru
fotografii.
GIF (Graphics Interchange Format)
Formatul GIF poate reda un numr de 256 de culori, de aceea este folosit pentru imaginile de
dimensiuni mici: butoane, icon-uri, animaii.
JPEG (Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori i de aceea este folosit pentru fotografii.
Imaginile care aparin acestui format au extensia .jpg sau .jpeg.
Eticheta folosit pentru inserarea unei imagini n pagin este <img> i are urmtoarele
atribute:
src = sursa, locul unde se afl imaginea
width = limea imaginii
height = nlimea imaginii
alt = numele care nlocuiete imaginea pn aceasta se ncarc sau cnd nu a fost
gsit
border = chenar (0 = lips bordur)
Exemplu:
<img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg">
"src" este prescurtarea pentru "source" (sursa). Acest atribut se folosete pentru a indica
locaia fotografiei.
Sursa Local Descriere

src="poza.jpg" fotografia este situat pe acelai nivel cu fiierul .html
src="../poza.jpg" fotografia este situat pe un nivel anterior fiierului .html
src="../imagini/poza.jpg" fotografia este situat n folderul "imagini" pe nivelui
anterior fiierului .html
Dimensiunea imaginii afiate de browser este stabilit de argumentele width i height care pot
fi diferite de dimensiunile imaginii originale, caz n care imaginea va fi redimensionat
automat de ctre browser.
Pentru a micora timpul ncrcrii complete a paginii exist programe care optimizeaz
imaginile. Optimizarea const n:
1. reducerea dimensiunii imaginii fr degradarea major a calitii
2. eliminarea informaiilor tip metadat asociate imaginii. Aceste date sunt asociate automat
de programele de grafic (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
Alinierea orizontal i vertical a unei imagini
n acest sens, sunt folosite atributele align i valign. Opiunile oferite de aceste atribute sunt:
26
1. Align (orizontal)
- right
- left
- center
2. Valign (vertical)
- top
- bottom
- center
Dac dorii ca textul s ncadreze imaginea adugai etichetei img atributul align.
Exemplu:
<img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg"

align="left">
27
4. Formatarea unui fundal sau a unei teme
Backgrounds (Fundaluri)
Tag-ul <body> are dou atribute prin care i se poate specifica folosirea unui fundal. Fundalul
poate fi att o imagine ct i o culoare.
Bgcolor
Atributul bgcolor specific o culoare de fundal a unei pagini HTML. Valoarea acestui atribut
poate fi un numr hexazecimal, o valoare RGB sau numele unei culori.
Exemplu de folosire a atributului bgcolor cruia i se atribuie culoarea negru n cele trei
moduri enumerate mai sus:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
Atributul background specific o imagine drept fundal pentru o pagin HTML. Valoarea
acestui atribut este URL-ul imaginii care se dorete a se folosi. Dac imaginea este mai mic
dect fereastra browser-ului atunci ea se va repeta de oricte ori va fi nevoie pentru a umple
fereastra browser-ului.
Exemplu de utilizare al atributului background:
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
URL-ul poate fi relativ (ca n primul exemplu) sau absolut (ca n al doilea).
ATENIE!
Atunci cand utilizai imagini pentru fundal trebuie s avei n vedere cteva aspecte printre
care:
Va crete imaginea de fundal prea mult timpul de ncrcare al paginii?
Cum va arta imaginea de fundal comparativ cu alte imagini din pagin?
Va arta imaginea de fundal bine cu culoarea textului din pagin?
Va arta imaginea de fundal bine atunci cnd se va repeta pentru a umple fereastra
browser-ului?
Va atrage imaginea de fundal prea mult atenia de la textul din pagin?
28
1. Creai un folder/director numit AplicaieHTML.

2. n folderul/directorul creat aducei o imagine cu ghiocei (ghiocei.jpg).
3. n folderul/directorul AplicaieHTML, creai un fiier numit index.html pe care l
deschidei n Notepad spre editare, iar pentru vizualizare n Internet Explorer.
4. S se adauge n index.html o etichet (tag) astfel nct fiierul index.html, vizualizat n
Internet Explorer s aib pe bara de titlu textul Primavara.
5. Punei documentului un fundal galben.
6. Pe pagin, centrat, avnd dimensiunea maxim posibil dat de eticheta < h > punei textul,
scris cu rou A venit primavara!
7. Lsai dou linii libere.
8. Inserai textul scris cu negru, A venit, n sfarsit primavara. Au aparut ghioceii.
9. Pe rndul urmtor inserai imaginea ghiocei.jpg, impunnd dimensiunea: lime = 200,
nlime = 156.
10. Imaginea va permite afiarea textului GHIOCEI atunci cnd ne aflm cu mouse-ul pe
ea.
11. Pe rndul urmtor afiai textul: Pentru a vedea imaginea cu ghioceii la dimensiunea
reala, apasati aici. Cuvntul aici va constitui link ctre pagina doi.html.
Pagina doi.html va permite afiarea imaginii ghiocei.jpg la dimensiunea real.
Pagina doi.html se va deschide ntr-o fereastr nou.
Rezultat final:
29
Modulul 3: Enumerarea i aplicarea modalitilor de a
realiza o hiper-legtur
1. Realizarea unei legturi pe un text
Definiie Link
Link-ul (englez: hyperlink), este o referin ctre un document sau parte a unui document.
Termenul link (prescurtare de la hyperlink) de obicei este asociat cu Internetul i paginile
web, el fiind un termen mult mai general, care poate cuprinde referirea i ntre alte tipuri de
documente electronice, care nu sunt neaprat n format HTML (pagini web) i nu sunt
neaprat pe Internet.
n momentul n care exist mult informaie n format electronic (fie pe Internet, pe
calculatorul personal sau chiar pe telefonul mobil) i aceast informaie este organizat logic
i relaional pe anumite criterii, are nevoie de un mecanism de referire ntre acele poriuni de
informaie (ex: referirea ctre o pagin care explic un anumit termen).
Alt caz n care este necesar referirea, este cazul n care o informaie nestructurat sau de
dimensiune mare, trebuie organizat logic n pri mai mici sau pri asociate dup anumite
criterii, pentru a fi prezentat mai uor unui cititor/utilizator (ex: paginarea rezultatelor de
cutare, referirea ctre o anumit poriune a unei pagini, etc.).
Termenul de link (hyperlink) este o metod de referire ntre documentele de tip hypertext
(noiune folosit pentru a defini textul afiat pe dispozitive electronice: PC, laptop, handheld,
telefon, etc.).
Legtura (link-ul) este o etichet foarte important n HTML deoarece confer utilizatorului
posibilitatea navigrii de la o pagin la alta. De obicei link-ul este subliniat iar atunci cnd
suntem deasupra lui cursorul i schimb forma.
Link-ul este definit cu etichetele <a> i </a> i are atributele:
href - adresa fiierului destinaie
target - n ce fereastr se va deschide fiierul destinaie
title - o mic descriere asociat legturii afiat n momentul n care mouse-ul se afl
deasupra legturii
Adresa fiierului destinaie (href) poate fi exprimat astfel:

nume fiier - dac se afl n acelai folder cu pagina curent
adres relativ- dac se afl pe acelai server sau disc, indicndu-se calea
adres URL - fiind adresa complet a paginii (de exemplu:
http://www.cnfb.ro/index.php?option=profesori)
Atributul href (Hypertext REFerence) numete legatura ctre o alt pagina web. De fapt este
locul unde va fi dus user-ul care va executa un click pe linkul respectiv.
Linkurile pot fi de trei tipuri:
interne - ctre locuri specifice din pagin (anchors)
locale - ctre alte pagini dar pe acelai domeniu
globale - ctre alte domeni n afara site-ului
Internal - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"
30
Link-ul n paginile Internet
Ca reprezentare grafic un link este un text (de obicei subliniat i/sau prezentat cu o culoare
diferit), care poate fi identificat ntr-o pagin web i pe care se poate face clic pentru a accesa
pagina sau documentul spre care puncteaz. Un link poate puncta att ctre o pagin
exterioar, ct i n aceeai pagin spre o anumit sub-seciune a paginii.
n format HTML (pagin web), un link este reprezentat n forma urmtoare:
<a title=Titlu, care apare ca info cnd se trece cu mouse-ul peste href=URL target=unde
va fi deschis noua pagin class=clasaStilizareLink>Text vizibil link</a>
Pentru a seta nceputul i sfritul unei anchor-e se folosesc tag-urile <a> </a>.
Un exemplu de link, care puncteaz ctre aceast pagin, ar fi:
<a title=Tutorial HTML href=http://www.competentedigitale.ro/HTML/>Tutorial HTML

</a>
Metoda de funcionare a unui link
Cnd utilizatorul face clic pe un link, navigaroul / browser-ul acceseaz acea pagin de la
adresa specificat (n cazul exemplului de mai sus, navigatorul va rencrca pagina curent,
pentru c puncteaz ctre aceast pagin).
Link-ul este un lucru necesar n imensitatea de informaii (site-uri web) care exist publicate
pe Internet. Un loc unde se simpte lipsa hyperlink-ului este biblioteca clasic.
Avantajul unui hyperlink pe Internet este uor de identificat i anume rapiditatea cu care este
accesat informaia (asta n cazul n care v merge bine net-ul) i o libertate de a naviga rapid
prin multe tipuri de informaii (fr a deranja de fiecare dat bibliotecara pentru o definiie sau
pasaj).
Legtur spre e-mail:
<a href=mailto:maria@yahoo.com>Legatura spre e-mail-ul Mariei</a>
Target-uri de link
Atributul target spune browser-ului dac trebuie s deschid noua pagin ntr-o nou fereastr
sau n aceeai fereastr.
target= "_blank" Deschide o nou fereastr

"_self" Deschide pagina n aceeai fereastr
"_parent" Deschide noua pagin ntr-un frame superior linkului
"_top" Deschide noua pagin n acelai browser anulnd toate frame-
urile
31
2. Realizarea unei legturi pe o imagine
Cum se realizeaz o legtur pe o imagine?
Imaginea a devenit un element omniprezent n toate paginile web actuale. Bazat pe faptul
recunoscut c o imagine are un impact mult mai mare asupra privitorului dect un text precum
i pe necesitatea oferirii unor informaii ct mai rapid i direct ctre utilizator imaginea s-a
impus ca element indispensabil oricrei prezentri a oricrui subiect.
O legtur pe o imagine se realizeaz exact ca i o legtur pe text cu diferena c url-ul

imaginii va lua locul textului. De exemplu:
<html>
<body>
<p>Legtur pe o imagine:
<a href="http://www.competentedigitale.ro/HTML/">
<img src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>Imagine legtur fr bordur:
<a href="http://www.competentedigitale.ro/HTML/">
<img border="0" src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Rezultatul va fi urmtorul:
32
3. Importul de gif-uri i flash-uri.
Elemente de animaie text
HTML are un tag special, <marquee> </marquee>, prin care putei crea un efect de micare
a unui text (sau imagine) care este ncadrat de acest element.
Are urmtoarele atribute:
loop definete de cte ori se va mica textul
height nlimea n pixeli a zonei n care se mic textul
width - lungimea n pixeli a zonei n care se mic textul
bgcolor - culoarea zonei n care se mic textul
direction direcia de micare (left, right, up, down) - (stnga, dreapta, sus, jos)
behavior definete cum se va mica textul (scroll, slide, alternate)
scrolldelay - seteaz numrul, n milisecunde, ntre refreshuri de micare.
Exemplu de micare pe orizontal:
<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee

text</marquee>
Iat un alt exemplu unde micarea se face pe vertical:
<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"

height="100">Marquee text</marquee>
- n loc de text poate fi folosit i o imagine, nlocuind textul (aici "Marquee text") cu tagul
<img> pentru imagine.
Includerea unei pagini HTML externe
n afar de modalitatea cu folosirea tag-ului <iframe> pentru afiarea n pagina web HTML a
coninutului din alt pagin HTML
Exemplu:
<iframe src="url_pagina.html" width="600" height="200" align="center" scrolling="yes">

</iframe>
- exist i o alt soluie, dat de tag-ul <object> folosit cu atributele "data" i "type".
Urmtorul cod HTML este sintaxa general de afiare ntr-o pagin web a coninutului HTML
aflat n alt pagin extern:
<object data="adresa_pagina_externa" type ="text/html" width="600" height="400">

</object>
Avantajul utilizrii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML, este
faptul ca acelai continut HTML poate fi inclus n mai multe pagini din site, fiind scris o
singur dat. De exemplu, n cazul unui Meniu ce trebuie afiat n toate paginile site-ului;
codul acestuia poate fi scris ntr-un fiier special ("meniu.html") apoi, cu una din formulele de
33
mai sus (tag-ul "<iframe>" sau "<object>") se adaug n fiecare fiier al paginilor, iar la o
eventual modificare a meniului se va face doar n codul acestuia din "meniu.html".
Butoane n html
Mai jos avei un exemplu de buton clasic
<a href="exemplu.com"><button>Nume buton</button></a>
sau putei face butonul folosind un formular simplu:
<form method="get" action="exemplu.com">

<input name="numele butonului" type="submit" value="Ce text va aparea pe buton">
</input> </form>
sau un buton grafic i anume o imagine care are funcia de buton:
<a href="exemplu.com"> <img src ="buton.gif"> </a>
34
4. Importul de secvene sonore i video
Adugarea de sunet la o pagin HTML
Pentru a aduga sunet ntr-o pagin web, putei folosi elementele <embed> sau <bgsound>:
1. <bgsound> </bgsound> - introduce un background (fundal) audio n pagina, are
urmtoarele atribute:
src Definete locaia fiierului audio folosit (midi .au sau wav)
loop definete de cte ori se va repeta sunetul
delay definete timpul dintre repetri
title - Textul care va descrie sunetul.
Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">
2. <embed> </embed> - afieaz o consol pentru sunet, are urmtoarele atribute:

src Definete locaia fiierului audio folosit (midi .au sau wav)
controls - ofer posibilitatea alegerii mai multor controale care includ: console,
console mici, butoane de play i altele
autostart - cnd este TRUE sunetul ncepe n timp ce sunetul este descrcat de
browser
hidden - cnd este TRUE va ascunde controalele, standard este FALSE
loop definete de cte ori se va repeta sunetul
volume - seteaz volumul sunetului (sonorul)
height - nlimea n pixeli a consolei
width - lungimea n pixeli a consolei.
Exemplu:
<embed src="sunet.midi" width="145" height="60" autostart="truie" volume"100"

controls="console" hidden="false">
Tag-ul "<embed>" poate fi folosit i pentru afiarea de imagini video, care au extensiile
".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adaug similar ca i sunetul, la
"src" scriei calea ctre fiierul video. Diferena e c nu trebuie folosit atributul "hidden" iar
pentru "width" i "height" dimensiunile nu trebuie s fie mai mici dect dimensiunile n care
este salvat fiierul video.
Totui, afiarea de imagini video necesit mai mult timp deoarece fiierele video au
dimensiuni destul de mari.
"<embed>" se folosete i pentru adugarea de imagini flash (cu extensia ".swf"), pentru
aceasta este ncadrat n alt element, <object> </object>
Iat un exemplu de cod prin care putei aduga imagini flash n pagina web:
<object width="580" height="400">

<param name="movie" value="fisier.swf">
<embed src="fisier.swf" width="580" height="400">
</embed>
</object>
35
Unde "width" i "height" sunt dimensiunile cadrului n care este afiat imaginea flash, iar la
atributele "value" i "src" se scrie calea ctre fiierul ".swf" (trebuie scris aceeai cale la
ambele atribute).
Afiarea n pagin a elementelor cu EMBED necesit folosirea unui plug-in, care de cele mai
multe ori, dac acesta nu este deja instalat, este cerut automat ncrcarea lui de ctre browser.
36
5. Legturi ntre pagini
O legatur ctre o pagin aflat n acelai director
O legatur ctre o pagin aflat n acelai director se formeaz cu ajutorul etichetei <a> (de la
"anchor"=ancor).
Pentru a preciza pagina indicat de legatur se utilizeaz un atribut al etichetei <a> numit
href, care ia ca valoare numele fiierului HTML aflat n acelai director. Zona activ care
devine sensibil la apsarea butonului stng al mouse-ului este format din textul cuprins ntre
etichetele <a>...</a>.
Prezena etichtetei de sfrit </a> este obligatorie.
<html>
<head>
<title> Comutarea ntre dou pagini</title>
</head>
<body>
<h3>Pagina 1 </h3>
<a href="leg_ex2.html"> Link catre pagina 2 </a>
</body>
</html>
<html>
<head>
<title> Comutarea ntre dou pagini</title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href="leg_ex1.html"> Link ctre pagina 1 </a>
</body>
</html>
O legatur ctre o pagin aflat pe acelai disc local
Dac pagina referit se afl pe acelai disc local, dar ntr-un alt director atunci pentru a
preciza poziia ei n structura de directoare se poate folosi adresarea relativ.
<html>
<head>
<title> Comutarea ntre dou pagini aflate pe acelai disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="../../exemple/list/listex_11.html"> Link ctre o pagin cu liste </a>
</body>
</html>
37
O legatur ctre un site particular
n exemplul urmtor se utilizeaz adresa URL www.netscape.com care ncarc pagina de start
din site-ul firmei Netscape Corporation.
<html>
<head>
<title> Link ctre site-ul firmei Netscape</title>
</head>
<body>
<h3>Link ctre site-ul firmei Netscape </h3>
<a href="http://www.netscape.com"> Netscape Corporation </a>
</body>
</html>
Anchors (ancore)
Se pot aduga puncte de reper (ancore) pentru o deplasare mai uoar n cazul unor pagini
HTML lungi sau ctre un loc anume aflat ntr-o alt pagin.
Ancora se definete tot ntre etichetele <a> i </a> dar cu atributul name. Pentru a face
trimitere ctre ancor se introduce un link cu atributul href avnd ca valoare denumirea
ancorei.
Ancora <a name="nume">Ancora</a>

Link ctre ancora aflat n <a href="#nume">napoi la ancor</a>
aceeai pagin
Link ctre ancora aflat n alt <a href="pagina.html#nume">napoi la ancora din
pagin pagina.html</a>
Exemplu:
<html> <head>
<title> Ancore definite n acelai document i n alt document</title> </head>
<body>
<h3>Ancore definite n acelai document i n alt document </h3>
<a href="#ancora1">Link ctre ancora 1 </a> <br>
<a href="../../legaturi.html#anc">
Link ctre o ancor din alt document </a>
<br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br>10<br>11<br>12<br>
13<br>14<br>15<br>16<br> 17<br>18<br>19<br>20<br> 21<br>22<br>23<br>24<br>
<a name="ancora1">ancora 1</a>
</body>
</html>
38
6. Maparea unei imagini
Maparea unei imagini (Hri imagine)
Hrile de imagini permit declararea unor zone din imagine ca legturi ctre alte pagini web i
implic dou aspecte:
1. Imaginea este declarat ca fiind hart. Pentru aceasta eticheta <img> a imaginii are
urmtoarele atribute:
src fiierul sau adresa fiierului imagine
usemap are valoarea de genul #nume care este folosit n interiorul etichetei <map>
prezentate mai jos
2. Harta se definete folosind perechea de etichete <map> i </map>, cu atributul obligatoriu

name, avnd aceeai valoare ca la usemap din img.
Zona sau zonele coninute de hart sunt introduse prin eticheta <area> cu atributele
obligatorii:
shape = forma ariei declarate cu valorile: rect=dreptunghiular, circle=circular,
poly=poligonal, default=alte forme (diferite de cele anterioare)
coords = coordonatele zonei
href = adresa paginii destinaie a legturii
Originea coordonatelor este colul stnga sus al imaginii.
Fiecare imagine este alctuit din pixeli. Fiecare pixel este caracterizat de dou coordonate (x,
y), n sistemul de axe de mai jos:
Aria rectangular (rect) se declar prin coordonatele colului stnga sus i colul dreapta jos.
RECT COORDS = X1, Y1, X2, Y2 dreptunghi, unde X1, Y1 reprezint coordonatele
colului din stnga sus si X2, Y2 sunt coordonatele colului din dreapta jos.
Aria circular (circle) se declar prin coordonatele centrului i raza.

39
CIRCLE COORDS = X1, Y1, R cerc, unde X1, Y1 reprezint coordonatele centrului, iar
R raza cercului.
Aria poligonal (poly) se declar prin coordonatele fiecrui col.

POLI COORDS = X1, Y1, X2, Y2, , Xn, Yn poligon, unde X1, Y1, X2, Y2, , Xn,
Yn reprezint coordonatele vrfurilor.
Exemplu: o hart de imagini care conine 5 zone
<html> <head>
<title>Exemplu</title> </head> <body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map> </body> </html>
40
Realizai un mini-site despre Spania care s conin urmtoarele elemente:

1. O pagin principal spania.html i dou pagini secundare: barcelona.html i
madrid.html.
2. Pagina principal va conine: un titlu de nivel 1, centrat; o imagine cu Spania
(spania.jpeg) de dimensiuni 250 px limea i 200 px nlimea, iar n partea dreapt a
imaginii, un meniu cu 2 link-uri (un link ctre pagina barcelona.html i cellalt link
ctre madrid.html). Pentru aranjarea elementelor n pagin se va folosi un tabel fr
borduri.
3. Paginile secundare barcelona.html i madrid.html vor conine fiecare un titlu centrat
de nivel 1 cu numele oraului, sub titlu va fi afiat centrat o imagine cu oraul
respectiv, cu dimensiunile de 150 x 100 px. Sub imaginea oraului va fi inclus un
paragraf cu detalii despre oraul descris.
4. Fiecare din paginile barcelona.html i madrid.html, va conine cte un buton de

ntoarcere ctre pagina principal. Butonul se va numi BACK.
41
Modulul 4: Utilizarea listelor i tabelelor ntr-o pagin WEB
1. Tipuri de liste utilizate ntr-o pagin web
Listele reprezint un mod de organizare a coninutului prin care informaiile

similare sunt grupate, formnd astfel o enumerare. Fiecrui element din list i este asociat un
nou paragraf. Se creeaz astfel spaii libere care sporesc gradul de urmrire a textului,
informaiile structurate dintr-o list sunt uor de asimilat de ctre cititor.
Enumerrile, de orice fel, constituie o parte important a comunicrii prin faptul c
ajut la sistematizarea si evidentierea unor intrri. n instruirea asistat de calculator, sunt
folosite trei tipuri de liste:
liste neordonate, cu buline sau fr;
liste ordonate;
liste de definitie.
Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.
- pentru evideniere, fiecare element al listei este precedat de un acelai simbol numit marcator;
- au un aspect vizual plcut;
- sunt n general uor de urmrit;
Exemplu
HTML Afiare
Exemple de fructe:
Exemple de fructe:
<ul>
mere
<li>mere</li>
pere
<li>pere</li>
<li>struguri</li>
struguri
</ul>
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square,
circle i disc.
Exemplu
HTML Afiare
Exemple de legume: Exemple de legume:
<ul> rosii
<li type="square">rosii</li>
<li type="circle">cartofi</li> o cartofi
<li type="disc">morcovi</li>
</ul>
Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd
nou.
Aplicaie:
<html>
<head><title>listex_2</title></head>
<body><h1 align=center>O lista neordonata</h1><hr>
Glosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume
42
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>
Rezultatul este:
O lista neordonata
Culori uzuale disponibile prin nume
Black
White
Red
Green
Blue
Yellow
Purple
Aqua
Listele neordonate pot fi imbricate pe mai multe niveluri.
Aplicaie:
<html>
<body><h1 align=center>O lista neordonata de liste neordonate</h1><hr>
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
Rezultatul va fi:
O lista neordonata de liste neordonate

Elemente si atribute a unei pagini HTML
Frameset
Atribute:
o cols
o rows
o border
Frame
Atribute:
o src
o name
o scrolling
43
Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> i </ol> iar elementele de <li> si </li>.
- fiecare element al listei este numerotat;
- pot fi folosite diverse stiluri de numerotare, bazate pe cifre arabe sau romane, dar i pe litere;
- formatul arat o ierarhie a informaiilor.
Exemplu
HTML Afiare
Exemple de combustibili:
<ol> Exemple de combustibili:
<li>benzina</li> 1. benzina
<li>motorina</li> 2. motorina
<li>gaz lichefiat</li> 3. gaz lichefiat
</ol>
Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd
nou.
Aplicaie:
<html>
<body><h1 align=center>O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Rezultatul este:
O lista ordonata
1. Black
2. White
3. Red
4. Green
5. Blue
6. Yellow
7. Purple
8. Aqua
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile:
A (litere mari),
a (litere mici),
I (cifre romane mari),
i (cifre romane mici),
1 (opiunea default):
44
Exemplu:
HTML Afiare
Medii de stocare:
<ol> Medii de stocare:
<li type="I">HDD-ul</li> I. HDD-ul
<li type="I">discheta</li> II. discheta
<li type="I">CD-ROM-ul</li> III. CD-ROM-ul
</ol>
Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de
ordonare.Valoarea acestui atribut trebuie s fie un numar ntreg pozitiv.
Urmtorul exemplu este o list ordonat cu litere mari, ncepnd de la valoarea C.

<html>
<body><h1 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</h1><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume

<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Efect:
O lista ordonata cu litere mari, incepand de la valoarea C
C. Red
D. Green
E. Blue
F. Yellow
G. Purple
H. Aqua
Tag-ul <li> poate avea un atribut value care stabilete valoare pentru elementul respectiv al
listei. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv (vezi urmtorul exemplu).
<html>
<body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol>
</body>
</html>
45
Efect:
O lista ordonata avand itemi setati individual
Repetati urmatorii pasi ai algoritmului
3. salvati fisierul;
1. incarcati fisierul in browser;
2. schimbati browserul utilizat
3. incarcati din nou fisierul
Liste de definiii
Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de
definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt
listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga
seciune a unui glosar va fi gestionat printr-o list de definiii, care este inclusa ntr-o pereche
de marcaje de list de definiii: <dl>...</dl> (de la "definition list" = list de definiii).
Observaii:
-Un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit);
-Definiia unui termen este iniiat de eticheta <dd> (de la "definition description" =
descrierea definiiei);
-Definiia unui termen ncepe pe o linie nou i este indentat;
Exemplu:
HTML Afisare
Legenda:
<dl> Legenda:
<dt>HTML</dt> HTML
<dd>Hyper Text Mark-ul Language</dd> Hyper Text Mark-ul Language
<dt>IP</dt> IP
<dd>Internet Protocol</dd> Internet Protocol
</dl>
Aplicaie:
<html>
<body><h1 align=center>O lista de definitii</h1><hr>
<dl>
<dt><b>hypertext</b>
<dd>- 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
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care
sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la momentul curent
</dl>
</body>
</html>
Rezultatul este:
46
O lista de definitii
hypertext
- 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
date
- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care
sunt date cu un anumit inteles sau valoare
informatie
- sub-setul de date care are efectiv semnificatie si care este util la momentul curent
Listele pot fi imbricate, adica in interior pot contine una sau mai multe liste.
Exemplu
HTML Afisare
<ol> 1. Monitoare
<li>Monitoare o CRT
<ul> o LCD
<li>CRT</li> 2. Imprimante
<li>LCD</li> o cu jet de cerneala
</ul> o laser
</li>
<li>Imprimante
<ul>
<li>cu jet de cerneala</li>
<li>laser</li>
</ul>
</li>
</ol>
Legenda:
ul = unordered list
ol = ordered list
li = list item
dl = definition list
dt = term in a definition list
dd = description of a term in a definition list
Exemplu:
<html>
<body><h1 align=center>O lista ordonata de liste ordonate si neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
47
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
Efect:
O lista ordonata de liste ordonate si neordonate
Un sistem informatic include:
1. Hardware:
1. placa de baza
2. procesor
3. memorie
4. harddisk
2. Software:
o Linux
o Windows
o OS/2
o Unix
2. Software de aplicatie:
VisualC++
Java
SQL
Este important de reinut c listele neordonate sunt folosite foarte frecvent pentru a defini liste
de legturi ctre alte pagini (meniuri). Astfel definite, meniurile pot fi parcurse uor de
programele de navigare folosite de ctre persoanele cu deficiene de vedere.
O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>.
Fiecare element al listei este iniiat de eticheta <li> ( list item ). Cele mai multe browsere
afieaz lista de meniuri ca pe o list neordonat.
O list de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la "
director "). Fiecare element al listei este iniiat de eticheta <li> ( list item ). Cele mai multe
browsere afieaz lista de directoare ca pe o list neordonat.
(Nu se recomand utilizarea acestori tipuri de liste).
Utilizri speciale ale listelor

48
Dac ntr-o list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc de
text, aceasta va fi indentat ( ntocmai ca elementele unei liste).
<html>
<body><h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de
text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un
bloc de text indentat. Un bloc de text indentat.
</ol>
</body>
</html>
Efect:
Un bloc de text indentat
Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de
text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat. Un bloc de text indentat. Un bloc de text indentat.
Linux
n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli.

<html>
<body><h1 align=center>O lista de definitii speciala</h1><hr>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
Efect:
O lista de definitii speciala

Program
Luni
Marti
Miercuri
Ora 9.00.Insciere
Ora 11.00.Audieri
Ora 13.30.Raspunsuri
catre un alt document
49
Activitate practic
S se realizeze urmtoarea list personalizat:
O lista personalizata
Tipuri de masini Volkswagen sunt:
Golf
Jetta
Passat
Bora
Corrado
Transporter
Rspuns:
<html>
<body bgcolor=yellow ><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<img src="images/reddot.gif">Golf<br>
<img src="images/reddot.gif">Jetta<br>
<img src="images/reddot.gif">Passat<br>
<img src="images/reddot.gif">Bora<br>
<img src="images/reddot.gif">Corrado<br>
<img src="images/reddot.gif">Transporter<br>
</body>
</html>
50
2. Inserarea i formatarea unui tabel
Cum se insereaz un tabel?
Pentru a insera un tabel se utilizeaz eticheta dubl table . Orice tabel este alctuit din
elementele :
Linia Tabelului <tr> ... </tr> ;

Titlul Tabelului <th> ... </th> ;
Coloanele tabelului (datele) <td> ... </td> ;
Sub-titlu tabelului <caption> ...</caption> ;
Cum se formateaz un tabel?
Exist o serie de atribute care, aplicate marcajului table realizeaz formatarea tabelului.
i anume:
bgcolor = definete culoarea tabelului;
width = specific lungimea tabelului (n pixeli sau procente din lungimea paginii);
height = specific nalimea tabelului (n pixeli sau procente din lungimea paginii);
border =grosimea liniei (n pixeli) ce definete tabelul i nconjoar fiecare celul
cellspacing = spaiu dintre celule (n pixeli);
cellpadding = spaiu dintre linia celulei i coninutul acesteia (n pixeli);
align = controleaz poziionarea tabelului n pagin, cu urmtoarele atribute: left, right , sau
center ;
background = controleaz culoarea de fond a tabelului, care poate fi i o imagine;
bordercolor = culoarea liniei din jurul tabelului;
bordercolorlight = culoarea luminoas folosit de dou linii din cele patru care nconjoar
tabelul;
bordercolordark = culoarea ntunecat folosit de dou linii din cele patru care nconjoar
tabelul;
frame = definete ce parte din afara tabelului s fie vizibil ( void, above, below, hsides,
lhs, rhs, vsides, box, border );
rules = definete ce parte din interiorul tabelului s fie vizibil (none, groups, rows, cols,
all);
Complexitatea tabelelor este dat, ns, de coninutul acestuia, astfel c o celul poate conine
o imagine, alta o legtur, un rnd poate avea doar text, . a. m. d. . Acestea se realizeaz prin
formatarea diferit a celulelor, implicit a liniilor i coloanelor cu atributele specifice acestora:
Atribut Valoare Descriere

abbr text Realizeaz o versiune abreviat a coninutului textual al celulei
align left, right, center alinierea datelor celulei pe orizontal
justify
valign top, middle, alinierea datelor celulei pe vertical
bottom, baseline
axis category_name comunic browserului care anteturi de rnd sau de coloan se
aplic unei anumite celule
bgcolor rgb(x,x,x) coloreaz fundalul unei celule
#xxxxxx
colorname
colspan number specific pe ct de multe coloane ale tabelului se va ntinde
51
celula curent
rowspan number specific pe ct de multe rnduri ale tabelului se va ntinde
celula curent
height Pixels % specific nlimea celulei
width Pixels % specific lungimea celulei
Exemplul 1:
<html>
<body>
<h4> Normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>No border:</h4>
<table border="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
52
Exemplul 2:
Exemplul 3:
53
Realizai n HTML urmtorul tabel:
Nr.
Nume Prenume Discipline Medii
Crt.
Sem. I Sem. II
1. Religie 8,25 7,75

2. Istorie 7,60 9,60
Rezolvare
<html>
<table border=1>
<tr>
<th>Nr.<br>Crt.</th>
<th colspan=3> Nume</th>
<th> Prenume</th>
<th> Discipline</th>
<th colspan=2> Medii</th>
<tr>
<td rowspan=3> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td rowspan=2><b>Sem. I</b></td>
<td rowspan=2><b>Sem. II</b></td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<tr>
<td>1.</td>
<td colspan=3> </td>
<td> </td>
<td>Religie</td>
<td>8,25</td>
<td>7,75</td>
<tr>
<td>2.</td>
<td colspan=3> </td>
<td> </td>
<td>Istorie</td>
<td>7,60</td>
<td>9,60</td> </table> </html>
54
Modulul 5. Lucrul cu formulare, cadre
1. Realizarea formularelor
Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie,
cmpuri de editare etc. Formularele Web permit utilizatorilor s introduc efectiv informaii i
s le transmit serverului.
Formularele pot varia de la o simpl caseta de text, pentru introducerea unui ir de
caractere pe post de cheie de cutare - element caracteristic tuturor motoarelor de cautare din
Web, pn la o structur complex, cu multiple seciuni, care ofer faciliti puternice de
transmisie a datelor.
Aceast tehnic se bazeaz pe dou elemente: pagina Web care afieaz formularul virtual n
browserul clientului i programul (scriptul) de pe server, care proceseaz datele din
formularul completat i trimis de client, prin intermediul browserului su. n continuare va fi
prezentat partea de formular, mai exact cum poate fi creat un astfel de formular n HTML. La
trimiterea datelor formularului napoi la server, toate datele sunt trimise n perechi
<nume=valoare>.
Realizarea unei pagini web ce conine un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expedieaz unui server.
2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar)
stocheaz datele ntr-o baz de date.
3. Dac este necesar serverul expediaz un rspuns utilizatorului.
Tag-ul <form>
Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form> i
</form>. Acest tag specific browserului c blocul respectiv este un formular virtual. Pot
exista mai multe astfel de formulare pe o pagin, dar acestea nu pot fi imbricate.
Exist dou atribute eseniale ale tag-ului <form>:
1. Atributul action - precizeaz ce se va ntmpla cu datele formularului odat ce acestea
ajung la destinaie. Action menioneaz adresa scriptului (aflat pe server) care va interpreta
formularul. Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell.
2. Atributul method precizeaz metoda utilizat de browser pentru transmiterea
formularului. Poate lua valorile:
get (valoarea implicit) - n acest caz, datele din formular sunt adugate la adresa URL
precizat de atributul action; permite trimiterea unor cantiti mici de date (maxim 1 Kb);
post - n acest caz datele sunt expediate separate; sunt permise cantiti mari de date (de
ordinul MB).
Formularele Web pot conine zone de introducere text, butoane radio, butoane de selecie i
butoane pentru a trimite datele din formular serverului sau de a terge din formular datele
introduse anterior. Elementele formularului trebuie s fie organizate pe pagin, cu tag-uri
obinuite, deoarece browserul le afieaz una dup alta pe pagin, fr s le formateze.
Exemplu:
55
Tag-ul <input>
n interiorul blocului <form> trebuie inserate elemente care s fie afiate pe pagin. Aceste
elemente se specific prin tag-ul <input>, simplu. Pentru fiecare element <input> trebuie s
precizm :
Atributul type- indic tipul datelor care vor fi introduse: text, buton, buton radio etc.
Atributul name - indic numele asociat cmpului respectiv, deoarece datele
formularului, trimise napoi la server, sunt compuse din perechi nume=valoare.
Atributul size - indic numrul de caractere vizibile din cmp.
Atributul maxlenght - indic numrul maxim de caractere introduse n cmp.
Atributul readonly - datele prezente n cmp nu pot fi modificate.
Pentru a preciza tipul de eticheta <input> se folosete atributul type care poate lua valorile:
type="text" - caset de text, pentru editare;
type="password" - caset de text tip parol;
type="radio" - buton pentru selectarea unui singur element dintr-un grup;
type="checkbox" - caset de validare;
type="file" -caset de fiiere pentru upload;
type="submit" - buton de expediere;
type="reset" - buton de tergere;
type=image- butonul va fi nlocuit cu o imagine;
Butoane
Un formular poate s conin butoane, care vor permite executarea unor comenzi.
Pentru a insera un buton ntr-un formular se utilizeaz eticheta <input>, avnd atributul type
cu valoarea "button". Alte dou atribute ale elementului "button" pot fi:
name, care permite ataarea unui nume butonului
56
value, care primete ca valoare textul ce va fi afiat pe buton.
Exist i o alt modalitate de a introduce un buton ntr-o pagin Web i anume prin
intermediul blocului <button> ... </button>. Un astfel de buton poate fi inserat ntr-un
formular, n acest caz el declannd aciuni legate de acel formular, sau poate fi introdus
oriunde n pagin pentru iniierea unor aciuni independente de formulare. n corpul blocului
<button> ... </button> se poate afla un text sau un marcaj de inserare a unei imagini.
Butoanele din formular se pot particulariza folosind atributul type=image n
cadrul etichetei input i indicnd fiierul imagine.
Exemplu:
<form action="script.php" method="post">
<input type="image" src="trimite.gif" alt="Trimite">
</form>
Butonul radio
Butoanele radio se folosesc de obicei n grup, ceea ce nseamn c avem mai multe butoane
radio, cu valori diferite i nume identice; utilizatorul poate selecta doar unul dintre ele
(celelalte se deselecteaz automat). Butoanele radio se introduc prin eticheta <input> cu
atributul type avnd valoarea "radio".
Exemplu:
n formulare pot fi inserate imagini. Astfel, selectnd imaginea, se transmit serverului

coordonatele imaginii, mpreun cu celelalte date din formular. De obicei, coordonatele nu se
proceseaz, imaginile dintr-un formular fiind utilizate la trimiterea datelor, n locul butonului
Submit.
57
Exemplu:
<input type=image src=buton.gif name=buton>
Liste de selectie
ntr-un formular pot exista liste de selecie. Acestea sunt specificate prin tag-ul dublu <select>
.. </select>, n interiorul blocului de selecie fiind specificate opiunile cu eticheta <option> ..
</option>.
Exemplu:
<select name ="nume">
<option>Procesor</option>
<option>Placa de baz</option>
<option>Placa video</option>
</select>
Zone de text
Zonele de text sunt multi-linie care permit introducerea textelor. Zona este specificat prin
tag-ul <textarea>...</textarea>, cu atributele :
cols- numrul de caractere afiate ntr-o linie;
rows - numrul de linii afiate simultan;
name - ataarea unui nume cmpului de editare multilinie;
wrap-(word wrap= trecerea cuvintelor pe rndul urmtor), care determin comportamentul
cmpului de editare relativ la sfritul de linie.
Acest atribut poate primi urmtoarele valori:

"off" - n acest caz:
o ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete
utilizatorul;
o caracterul de sfrit de linie este inclus n textul transmis serverului odat cu
formularul;
"hard"- n acest caz:
o se produce ntreruperea cuvintelor la marginea dreapt a rndului;
o caracterul de sfrit de linie este inclus n textul transmis serverului odat cu
formularul;
"soft- n acest caz:
o se produce ntreruperea cuvintelor la marginea dreapt a rndului;
o nu se include caracterul de sfrit de linie n textul transmis serverului odat cu
formularul.
Exemplu:
<html>
<body><h1>Un formular cu un camp de editare multilinie</h1> <hr>
<form action="images.com" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>
58
Zone ascunse
n formulare, pot exista zone ascunse, care nu vor fi afiate pe pagin .
Exemplu: <input type=hidden name=nume_c value=Rex>
59
2. Realizarea cadrelor
Sunt situaii n care imaginea afiat de browser este format din mai multe pagini HTML
numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este
nlocuit de <frameset> </frameset>, iar n interiorul lor cadrele sunt delimitate de <frame> i
</frame>.
Atributele etichetei frameset sunt:
cols mparte pagina n coloane i are valori exprimate n procente din dimensiunea ferestrei,
numr de pixeli sau * adic spaiul rmas
rows mparte pagina n rnduri cu aceleai valori ca la cols
bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
frameborder inhibarea afirii chenarelor cu valorile yes sau no
Cadrele sunt introduse prin perechea de etichete <frame> </frame>, i suport atributele:
src fiierul sau adresa fiierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaz posibilitatea vizitatorului de a redimensiona cadrul
scrolling adaug cadrului bare de defilare cu valorile yes no si auto
Exemplu: pagina cu dou cadre orizontale n proporia 20% i 80% din nlimea total.
Pagina de sus are chenarul rou iar cea de jos are scroll.
<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>
Efect:
Exemplu: pagina cu dou cadre verticale n proporia 40% i 60% din limea total, fr
posibilitatea de redimensionare a cadrelor
<html>
<head>
</head>
<frameset cols="40%,60%">
60
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>
Efect:
Exemplu: pagina cu dou cadre. n cadrul din stnga sunt link-ri ctre alte pagini care se vor
deschide n cadrul din dreapta (se poate verifica funcionarea atributului target al legturii).
Cadrul din stanga va avea scroll.
Efect:
n situaia n care browserul folosit nu suport pagini care conin cadre, imaginea afiat va fi
goal. Pentru a evita acest lucru vom introduce un mesaj ncadrat de <body> i </body> ntre
etichetele <noframes> i </noframes> prin care informm vizitatorul c folosete un browser
care nu suport cadre.
<frameset cols = "30%, 40%,*">

<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
</frameset>
61
Cadre in-line
Sunt blocuri care se introduc n pagina prin perechea de etichete <iframe> i </iframe>, i au
atributele:
src fiierul sau adresa acestuia

height nlimea cadrului
width latimea cadrulului
frameborder grosimea bordurii (chenarului)
scrolling adaug bare de defilare cu valorile yes no i auto
align aliniaz cadrul (left, right, center, top, bottom, middle)
vspace distana peste i sub cadru
hspace distana n stnga i n dreapta de cadru
Exemplu: o pagin n care este gzduit un cadru in-line. i aici se poate introduce un mesaj
pentru browserele care nu suport cadre in-line. Modul de afiare al exemplului poate diferi
de la un browser la altul.
<html>
<head>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100"
scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>
Efect:
62
Modulul 6: Realizarea unor aplicaii practice
1. Cri de oaspei i contoare de pagin
Cri de oaspei (guestbooks)

Un exemplu de formular este dat de crile de oaspei unde cititorul poate s-i scrie
impresiile i comentariile dup vizitarea unui sit.
O carte de oaspei gratuit se poate obine vizitnd siturile web urmatoare:
http://www.theguestbook.com
http://www.dreambook.com
http://www.guestbooks.net
http://www.countz.com/guestbook.html
http://www.freecenter.com/guestbook.html
http://www.lpage.com
http://www.bravenet.com
http://www.guestbook4free.com/en/
http://www.webgenie.com/Software/Guestar/
Contoare de pagin (counters)
Pentru a cunoate ct de vizitat este situl pe care l-ai realizat i pentru a afla mai multe
date despre numrul i statistica vizitatorilor, informaii care va vor ajuta n realizarea unei
campanii de marketing online eficiente este bine s folosii contoare de pagin.
Acestea sunt capabile s afieze informaii referitoare la:
numrul de accesri totale/ lunare/saptmnale/zilnice
tipul de browser folosit pentru vizitarea paginilor
ara/continentul de provenien pentru fiecare vizitator
sistemul de operare folosit
Cele mai cunoscute i apreciate contoare de pagin gratuite sunt urmtoarele:
http://www.extreme-dm.com/tracking
http://www.sitemeter.com
http://www.thecounter.com
http://www.counterguide.com
http://www.countz.com
http://www.directhit.com
http://www.hitbox.com
http://www.webcounter.com
63
2. ntocmirea unei pagini WEB personale
Aplicaia 1
Realizai 3 pagini html care s conin fiecare cte 2 strofe din poezia Balada unui
greier mic de George Toprceanu i cte o imagine sugestiv. Titlul poeziei i autorul se vor
regsi pe toate cele trei pagini, titlul va fi centrat i scris cu H1 (heading 1) iar numele
autorului va fi scris cu caractere obinuite dar nclinate i va fi aliniat la dreapta.
Pentru fiecare din cele trei pagini, se va realiza n Paint o imagine sugestiv care va fi
poziionat n partea dreapt a strofelor. Spre exemplu, pentru primele dou strofe din poezie,
se va desena un peisaj de toamn. Pentru urmtoarele dou strofe, n peisajul de toamn
realizat anterior va fi desenat i un greiere. n final, pentru ultimele dou strofe ale poeziei,
imaginea va conine i o furnic.
Textul poeziei va conine diacritice - lipsa diacriticelor ntr-un text romnesc denot o
grav lips de profesionalism. A scrie fr diacritice poate duce la exprimri ambigue ca de
exemplu un tanc de 12 ani, un roman nascut la Roma, zece paturi etc.
(http://ro.wikipedia.org/wiki/Wikipedia:Diacritice)
n partea dreapt a paginii avei tabelul cu diacritice n HTML. Cele trei pagini se vor intitula
partea1.html, partea2.html i partea3.html.
Indicaie ! Pentru a putea alinia cu uurin strofele i imaginea n pagin, folosii un tabel
fr borduri, cu o linie i dou coloane. n prima coloan vor fi cele dou strofe, iar n cea de-
a doua coloan imaginea.
64
Balada unui Negru, mic, muiat
greier mic n tu
George i pe-aripi pudrat
Toprceanu cu brum:
Peste dealuri - Cri-cri-cri,

zgribulite, Toamn gri,
Peste arini Nu credeam c-o s
zdrenuite, mai vii
A venit aa, nainte de
deodat, Crciun,
Toamna cea C puteam i eu s-
ntunecat. adun
O grun ct de
Lung, slab i mic,
zlud, Ca s nu cer
Boteznd natura mprumut
ud La vecina mea
C-un mnunchi de furnic,
ciumafai, Fi'ndc nu-mi d
Cnd se scutur de niciodat,
ciud, i-apoi umple
mprejurul ei lumea toat
departe C m-am dus i i-
Risipete-n am cerut...
evantai
Ploi mrunte, Dar de-acu,
Frunze moarte, Zise el cu glas
Stropi de tin, sfrit
Guturai... Ridicnd un
picioru,
i cum vine de la Dar de-acu s-a
munte, isprvit...
Blestemnd Cri-cri-cri,
i lcrimnd, Toamn gri,
Toi ciulinii de pe Tare-s mic i
vale necjit!
Se pitesc prin
vguni,
Iar mceii de pe
cmpuri
O ntmpin n
cale
Cu grbite
plecciuni...
Doar pe coast, la
urcu,
Din csua lui de
hum
A ieit un greieru,
65
Aplicaia 2
Realizai o pagin html cu titlul poezie_de_toamn.html care s conin dou cadre.
Primul dintre ele conine trei link-uri ctre cele 3 pagini create la aplicaia 1. Al doilea, iniial,
afieaz pagina partea1.html creat la exerciiul anterior. La comanda vizitatorului paginii
respective, se pot afia, n al doilea cadru oricare din cele trei pri ale poeziei Balada unui
greier mic de George Toprceanu.
Indicaie !
Pagina poezie_de_toamn.html va arta astfel:
Balada unui greier mic

George Toprceanu
Peste dealuri zgribulite,

Peste arini zdrenuite,
Balada unui greier mic A venit aa, deodat,
Partea 1 Toamna cea ntunecat.
Balada unui greier mic
Partea 2 Lung, slab i zlud,
Balada unui greier mic Boteznd natura ud
Partea 3 C-un mnunchi de ciumafai,
Cnd se scutur de ciud,
mprejurul ei departe
Risipete-n evantai
Ploi mrunte,
Frunze moarte,
Stropi de tin,
Guturai...
Fiierul HTML iniial, cel care creeaz cadrele este:

<html>
<head><title>Fiier cu cadre</title></head>
<frameset cols=30%,70%>
<frame src=link_uri.html>
<frame name=cadrul2 src=partea1.html>
</frameset>
</html>
Primul cadru afieaz urmtorul fiier (link_uri.html) care conine legturile ctre cele trei
pagini html (parte1.html, partea2.html i partea3.html):
<html>
<head><title>Fiier cu legturi</title></head>
<body>
<a href=partea1.html target=cadrul2> Balada unui greier mic Partea 1
</a><br>
</a><br>
</a> </body> </html>
66
3. Modaliti de testare, publicare i ntreinere a paginilor.
n aceast etap, s presupunem c am terminat realizarea efectiv a sitului web pe

calculatorul nostru. n continuare, va trebui s ne gndim la alegerea unui nume de domeniu
pentru situl respectiv. Acest nume trebuie s fie sugestiv i s simbolizeze afacerea noastr.
Dup aceea va trebui s alegem o gazd web. La fel ca i numele de domeniu, avem de ales
ntre obinerea unei gazde web gratuite sau o gzduire (web hosting) contracost, n schimbul
unor faciliti suplimentare.
Apoi urmeaz etapa de transfer efectiv al fiierelor (prin FTP) ntre calculatorul nostru i
gazda web pe care am ales-o. Dac am folosit un editor HTML (Microsoft Front Page sau
Macromedia Dreamweaver, de exemplu), avem posibilitatea s folosim opiunile de transfer
de fiiere incluse n aceste programe.
Dup ce am realizat transferul fiierelor sunt obligatorii operaiunile de verificare final i
validare HTML. Trebuie precizat c verificrile paginilor web vor trebui s fie efectuate i ca
etape intermediare, pe parcursul realizrii efective a sitului web.
n final, va trebui sa ntreinem i s actualizm situl. Dac dorim ca vizitatorii s revin i
aceti pai trebuie urmrii cu maxim atenie.
Nume de domeniu
Pentru ca situl nostru s capete o identitate online, va trebui s ne hotrm asupra unui nume
de domeniu. Acest lucru nseamn c netsurferii vor gsi situl respectiv dac vor introduce n
csua browserului numele de domeniu pe care ni l-am ales. n funcie de specificul sitului i
de bugetul alocat, putem opta pentru una din cele dou variante :
Nume de domeniu propriu (contracost)
Nume de domeniu furnizat de o firm ( gratuit )
Nume de domeniu propriu

Are forma: www.numedomeniu.com
Cnd alegem un nume de domeniu, acesta trebuie s fie scurt i s aib un neles. El trebuie
s dea o idee clar despre situl sau afacerea online dat. De asemenea, trebuie s fie uor de
scris i de memorat. Nu trebuie s conin caractere speciale ca de exemplu : _ , - , # , sau ~ .
Pentru a evita surprizele neplcute, este bine s facem o list cu 5 sau 10 nume de domeniu
care ni se par acceptabile i apoi s verificm dac mai sunt disponibile. Pentru aceasta
vizitm baza de date Internic'S Whois (Network Solutions). Aceasta este o organizaie care
centralizeaz procesul de nregistrare al numelor de domenii pe Internet i are adresa web
urmtoare: http://www.networksolutions/cgi-bin/whois/whois
Dup ce ne-am hotart asupra unui nume de domeniu disponibil, putem s ne nregistrm
online n cteva minute. Taxa de nregistrare este de la 19 /an.
Nume de domeniu gratuit

Dac dorim s realizm o pagin web personal sau dorim s nvm mai multe despre
webdesign i/sau nu avem bani suficieni, putem s obinem foarte uor un nume de domeniu
gratuit. Exist multe situri ale unor firme care ne ofer nume de domenii gratuite. n general
aceste situri ofer i gzduire gratuit plus un cont de e-mail. Tot ce avem de fcut este s
accesm situl lor i s completm un formular online. n cteva minute vom avea la dispoziie
un nume de domeniu de forma:http://www.nume_gazda_web.com/~numeledvs
Gazde web
Gazda web (host web) reprezint de fapt un server sau o grupare de mai multe servere care ne
pun la dispoziie suficient spaiu pe harddisk pentru a transfera fiierele care constituie situl
nostru. n principiu, putem s gzduim situl i pe propriul calculator, dar n acest caz avem
67
nevoie de o legtur la Internet 24 ore din 24 ore i o conectare foarte rapid de tipul T1 sau
T3. Acest lucru ne poate costa pn la cteva mii de dolari pe lun. De aceea, este bine s
optm pentru un serviciu de gzduire web care ne poate asigura accesul nentrerupt al
vizitatorilor la site i asisten online.
Gzduire web gratuit sau pltit?

Exist mai multe motive pentru care unele companii ofer gzduire web gratuit:
construiesc o ntreag comunitate i interesul lor este de a atrage ct mai mult public
i promoveaz produsele i/sau serviciile lor
doresc s afim banerul lor sau s folosim domeniul lor n URL-ul paginilor noastre
Gzduirea gratuit poate fi folosit temporar. Deoarece, domeniul pe care l-am primit
reprezint un subdirector al domeniului principal, nu putem s obinem o poziie avansat
ntr-o lista furnizat de motoarele de cutare sau directoare.
n plus, firmele respective ofer un spaiu limitat care se poate dovedi insuficient odat cu
creterea volumului de informaii sau de imagini folosite. E de recomandat s ncepem cu un
serviciu de gzduire gratuit pn vom cpta experien i vom ctiga ceva bani din afacerea
online. Dup aceea nu este suficient numai s cumprm un domeniu propriu i va trebui s
folosim un serviciu de gzduire profesional.
Unul dintre cel mai bune servicii de gzduire profesional le acord Adpixel.biz.
Transfer
Dup ce am ales numele de domeniu i am stabilit care va fi gazda web, va trebui s
transferm fiierele care alctuiesc situl web. Aceste fiiere vor fi transferate de pe
calculatorul nostru, pe unul din serverele (calculatoarele) puse la dispoziie de compania care
ne asigur gzduirea web. Transferul fiierelor se face prin FTP (File Transfer Protocol).
Cum se folosete FTP ?

Dup ce am instalat un program FTP trebuie s nvm s-l folosim deoarece programele
difer ntre ele. De citit cu atenie instruciunile i apoi de fcut cteva ncercri pentru a ne
obinui cu programul FTP. A nu uita s cream mai nti dou directoare test pe calculatorul
nostru, numite Upload i Download.
Apoi selectm cteva fiiere test i le copiem n directorul Upload. Accesm programul FTP i
ne conectm la Internet. Selectm opiunea upload n programul FTP i directorul Upload din
calculatorul nostru. Selectm fiierele test care trebuie transferate. Odat ce au fost ncrcate,
fiierele test ar trebui s se vad n fereastra FTP. Acum selectm opiunea download i
ncrcm cteva fiiere n directorul Download. Repetm de cteva ori pn ne obinuim cu
programul FTP. A avea grij ca n final s tergem toate fiierele test din calculatorul gazd
nainte de a ncepe transferul final al fiierelor. Dac vedem o opiune n programul FTP
referitoare la tipul de fiiere, folosim ASCII cnd transferm fiiere HTML i binary cnd
transferm fiiere grafice. Sau, dac opiunea ne este permis selectm auto-detect i
programul va face acest lucru automat. Majoritatea programelor FTP sunt setate s foloseasc
Portul 21. A nu schimba aceast setare pn nu ni se indic s folosim un Port diferit. n
majoritatea cazurilor putem ignora alte opiuni ca: Use firewall, PASV mode, Description, etc.
Verificm numele fiierului nainte de a-l ncrca. Asigurndu-ne c nu folosim majuscule. n
acest caz nu vor putea fi accesate calculatoarele gazd care folosesc mediul UNIX.
Cnd dorim s realizm transferul fiierelor ne asigurm c am mutat toate fiierele de care
aveam nevoie ntr-un singur director. n final, transferm toate fiierele (html, gif/ jpeg, midi,
etc.) n directorul care-l avem la dispoziie pe serverul FTP. Verificm nc o dat dac au fost
transferate toate fiierele.
68
Verificare i testare
Dup ce am transferat prin FTP toate fiierele sitului nostru, trebuie s ne asigurm nc o
dat c nu exist erori i totul funcioneaz aa cum trebuie. De aceea, trebuie s parcurgem
urmtoarele etape:
navigm prin fiecare pagin i ne asiguram ca toate legturile interne i externe,
butoanele de navigare sunt active. Pentru a realiza acest lucru putem s folosim un
verificator de legturi "link checker"
verificm din punct de vedere gramatical i ortografic textul din fiecare pagin. Dac
textul este n limba englez putem folosi verificatorul gramatical din MS Word,
"automated spell checker"
ncercm s tiprim fiecare pagina web i apoi verificm modul de aranjare n pagin,
dac mai exist cuvinte scrise greit, erori de punctuaie, etc.
determinm timpii de ncrcare pentru fiecare pagin web. n cazul n care acetia sunt
foarte mari, cutm s reducem dimensiunile fiierelor grafice, multimedia, etc.
corectm toate erorile off-line i apoi retransmitem prin FTP fiierele care au fost
modificate
facem copii dup toate fiierele i le salvm ntr-un director separat pe computer i pe
diskete
ntreinere i actualizare
Pentru ca situl pe care l-am creat s aib succes i s atrag noi vizitatori, trebuie s-l
ntreinem i s-l actualizm periodic. Pe baza statisticilor, s-a constatat c o pagin web
neactualizat este interesant o perioad medie de 60 de zile. De aceea, pentru a menine
interesul vizitatorilor, un site web nu trebuie s fie static. Dac nu oferim informaii noi sau
resurse utile, vizitatorii nu vor avea nici un motiv s mai revin iar situl nostru i va pierde
popularitatea.
ntreinerea i actualizarea unui site web se realizeaz din urmtoarele motive:
pentru mbuntirea proiectrii i machetrii
pentru actualizarea sau adugarea unor informaii suplimentare
pentru a rspunde comentariilor, cerinelor sau observaiilor vizitatorilor
pentru a corecta erorile i problemele aprute n timpul proiectrii
Aadar i dup ce vom ncepe promovarea sitului web, nu trebuie s neglijm cele dou
activiti importante pentru obinerea succesului online:
ntreinerea
Actualizarea
ntreinere
Pentru a realiza o ntreinere eficient a sitului, putem s ntocmim un plan de ntreinere,

etapizat n timp, care poate s conin:
Frecvena de actualizare
mbuntirile sau modificrile aduse
Informaii i resurse de actualitate
comentariile sau recomandrile vizitatorilor
A cuta de a mbunti permanent cunotinele privind realizarea i promovarea siturilor web.
Deoarece plasamentul n motoarele de cutare se schimb permanent, continund s verificm
periodic acest plasament. De asemenea, asigurndu-ne c ne-am nregistrat situl web n toate
directoarele importante.
Actualizare
69
Dup ce situl a devenit operaional, vom dori s-l actualizm. Aceasta nseamn c putem s-i
mbuntim unele caracteristici i s-i adugm noi opiuni, ca de exemplu:
forma de feedback pentru vizitatori - o carte de oaspei (guestbook)
legturi i resurse folositoare, sfaturi sau informaii recente
lista de discuii gratuit (discussion list)
un numrtor de pagin (counter)
un ziar electronic (e-zine)
Analiznd cu atenie orice feedback primit de la vizitatori i rspunzndu-le acestora ct mai
curnd posibil. Putem de asemenea s adaugm o pagin cu nouti pe care s-o actualizm
periodic.
70
Bibliografie
http://en.wikipedia.org/wiki/Wiki
http://universul.3x.ro/Curs_html/14.htm
www.didactic.ro/
http://www.competentedigitale.ro/
Manual de INFORMATIC pentru clasa a XII-a, profilul real-intensiv. Autori:
Carmen Popescu, Vlad Tudor (Huanu)
http://jserv.3x.ro/html/legaturi.html
http://www.marplo.net/html/elemente_speciale.html
http://tutorialweb.wordpress.com/2008/06/17/interfata-macromedia-
dreamweaver-8/
http://www.e-learn.ro/tutorial/adobe-dreamweaver/
http://blog.atweb.ro/2008/10/17/dreamweaver_de_la_a-z/
http://www.tutorialul.ro/tutorial-html-imagini-si-link-uri.html
Cuprins
Modulul 1: Utilizarea operaiilor de baz necesare realizrii unei pagini web.........................1

1. Prezentarea mediului de lucru Dreamweaver.....................................................................1
2. Prezentarea limbajului HTML..........................................................................................10
3. Proiectarea structurii site-ului...........................................................................................16
4. Elemente de design al paginii...........................................................................................17
5. Activitate practic.............................................................................................................18
71
Modulul 2: Folosirea elementelor de baz pentru inserarea n pagin a elementelor: text,
imagine......................................................................................................................................19
1. Inserarea i formatarea unui text: corp de liter, mrime, stil...........................................19
2. Folosirea elementelor bloc de text....................................................................................21
3. Inserarea unei imagini modificarea proprietilor imaginii: poziionare, dimensiuni,
ncadrare n text.....................................................................................................................26
4. Formatarea unui fundal sau a unei teme...........................................................................28
Modulul 3: Enumerarea i aplicarea modalitilor de a realiza o hiper-legtur...................30
1. Realizarea unei legturi pe un text....................................................................................30
2. Realizarea unei legturi pe o imagine...............................................................................32
3. Importul de gif-uri i flash-uri..........................................................................................33
4. Importul de secvene sonore i video................................................................................35
5. Legturi ntre pagini..........................................................................................................37
6. Maparea unei imagini.......................................................................................................39
Modulul 4: Utilizarea listelor i tabelelor ntr-o pagin WEB.................................................42
1. Tipuri de liste utilizate ntr-o pagin web......................................................................42
O lista neordonata.....................................................................................................................43
O lista neordonata de liste neordonate......................................................................................43
O lista ordonata.........................................................................................................................44
O lista ordonata cu litere mari, incepand de la valoarea C.......................................................45
O lista ordonata avand itemi setati individual...........................................................................46
O lista de definitii......................................................................................................................47
O lista ordonata de liste ordonate si neordonate.......................................................................48
Un bloc de text indentat............................................................................................................49
O lista de definitii speciala........................................................................................................49
Activitate practic.................................................................................................................50
O lista personalizata..................................................................................................................50
2. Inserarea i formatarea unui tabel..................................................................................51
3. Activitate practic..........................................................................................................54
Modulul 5. Lucrul cu formulare, cadre....................................................................................55
1. Realizarea formularelor....................................................................................................55
Tag-ul <form>.......................................................................................................................55
Tag-ul <input>......................................................................................................................56
Butoane.................................................................................................................................57
Butonul radio........................................................................................................................57
Liste de selectie.....................................................................................................................58
Zone de text...........................................................................................................................58
Zone ascunse.........................................................................................................................59
2. Realizarea cadrelor............................................................................................................60
Modulul 6: Realizarea unor aplicaii practice..........................................................................63
1. Cri de oaspei i contoare de pagin...............................................................................63
2. ntocmirea unei pagini WEB personale............................................................................64
3. Modaliti de testare, publicare i ntreinere a paginilor..................................................66
Bibliografie...............................................................................................................................70
Cuprins......................................................................................................................................71
72

Curs Pagini Web

Încărcat de

Informații document

Titlu original

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

Curs Pagini Web

Încărcat de

Drepturi de autor:

Formate disponibile

Modulul 1: Utilizarea operaiilor de baz necesare realizrii

unei pagini web

Modurile de vizualizare n fereastra document

Dreamweaver ofer un nivel superior de control i flexibilitate, exprimat prin posibilitatea de

Mod de vizualizare Code

Exist numeroase preferine (Preferences) pe care le putei modifica, pentru a transforma

Ce este un dosar rdcin local?

Meniurile File i Edit sunt standard

Meniul View activeaz i dezactiveaz vizualizarea

Meniul Modify ne permite s modificm

Meniul Commands ofer comenzi utile

Inserarea tabelelor n Dreamweaver

Din panoul de proprieti adiionale poi modifica alinierea orizontal/vertical, limea,

Vom ncepe cu un tabel de 100px lime (Insert->Table)

Click pe casu i selecteaz System Colour Picker.

De asemenea, selecteaz o culoare i pentru marginile tabelului.

Iar rezultatul va fi:

Aplicaie: Realizai, cu ajutorul unui tabel, calendarul pe anul 2012.

<HTML> </HTML> Definete un fiier n format Web

<DD> Descriere definiie

<B> </B> Afieaz text cu caractere aldine

Marcaje pentru cadre

<FRAMESET> </FRAMESET> Definirea redactrii paginii

Marcaje pentru tabele

<TABLE> </TABLE> Tabel HTML

<IMG> Marcajul de introducere a imaginilor

Marcaje pentru formulare

<FORM> </FORM> Formular HTML activ

Cele ase elemente de baz ale unui bun webdesign, sunt:

2. HTML = HyperText Markup Language

Elementul &nbsp (non-breaking space)

<del>text tiat (deleted) </del>

Aceste etichete nu se refer la particularitile caracterelor ce compun textul, ci la funciile pe

Inserarea unei adrese

Indentarea unui bloc

ntr-un bloc <pre>...</pre>, semnificaia marcajelor HTML se pstreaz.

Blocul introdus de etichetele <center>...</center> aliniaz centrat toate elementele pe care le

Blocul de text cuprins ntre etichetele <nobr>...</nobr> va fi afiat pe o singur linie.

Sursa Local Descriere

Alinierea orizontal i vertical a unei imagini

<img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg"

1. Creai un folder/director numit AplicaieHTML.

Adresa fiierului destinaie (href) poate fi exprimat astfel:

<a title=Tutorial HTML href=http://www.competentedigitale.ro/HTML/>Tutorial HTML

Metoda de funcionare a unui link

Legtur spre e-mail:

<a href=mailto:maria@yahoo.com>Legatura spre e-mail-ul Mariei</a>

target= "_blank" Deschide o nou fereastr

Cum se realizeaz o legtur pe o imagine?

O legtur pe o imagine se realizeaz exact ca i o legtur pe text cu diferena c url-ul

Elemente de animaie text

Exemplu de micare pe orizontal:

<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee

Iat un alt exemplu unde micarea se face pe vertical:

<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"

Includerea unei pagini HTML externe

<iframe src="url_pagina.html" width="600" height="200" align="center" scrolling="yes">

<object data="adresa_pagina_externa" type ="text/html" width="600" height="400">

Mai jos avei un exemplu de buton clasic

<a href="exemplu.com"><button>Nume buton</button></a>

sau putei face butonul folosind un formular simplu:

<form method="get" action="exemplu.com">

sau un buton grafic i anume o imagine care are funcia de buton: