Carte HTML

MARIUS MNESCU
Cum realizm un site web?

Cuprins
1. Introducere n limbajul HTML...................................4
2. Cum crem o pagin web simpl cu .......................
3. aplica!ia "otepad?...................................................
4. Componentele unui document HTML.....................#$
5. Componenta %ntet&Head' a (i)ierului.....................#*
6. Corpul (i)ierului......................................................#4
7. Introducerea te+tului...............................................#,
8. Controlul -./"T0..................................................#1
9. Inserarea unei imagini............................................*$
10. Inserarea de tabele................................................*4
11. Inserarea listelor....................................................*2
12. Inserarea legturilor web........................................34
13. Crearea unui sit web (unc!ional..............................4#
14. 4ibliogra(ie.............................................................,$
Cuvnt nainte
*
n zilele noastre odat cu expansiunea Internetului a
serviciului web n mod special, a luat avnt o ntreag
industrie numit web design sau webdesign prin care se
n elege realizarea de situri web, de la momentul
conceperii structurii i interfeei grafice i pn la
finalizarea programrii i introducerea propriu-zis a
datelor - imagini, text, fiiere i alte elemente - care
alctuiesc coninutul sitului
!rimul sit din istorie a fost realizat n anul "##", de
ctre inventatorul www-ului, $im %erners &ee, siturile
aprute, ini ial nu erau complexe i ncrcate grafic cum
sunt n prezent, limba'ul utilizat - ($)& - nefiind puternic
i permind numai o serie limitat de formatri, precum
i inserarea de lin*-uri, pentru a putea +lega+ paginile
ntre ele, webdesignul fiind, de fapt, mai mult
+programare+ web
,iturile, n forma n care ele se afieaz n
browsere, sunt de fapt interpretri vizuale, menite s fie
nelese de orice persoan, fr s fie necesare
cunotine n domeniul informaticii sau al secvenelor de
cod redactate de programatori -cetia lucreaz ori n
diverse limba'e din care apoi se genereaz limba'ul
specific de script al internetului ($)& .(/per$ext )ar*up
&anguage0, ori direct in ($)&
1ac nu ar exista browserele care tiu s
interpreteze limba'ul de script i s afieze rezultatul pe
ecran, siturile ar fi doar niruiri de texte neformatate i,
cel mai probabil, fr imagini n principiu, limba'ul ($)&
3
indic locul n care s se afieze diversele elemente
vizibile, dimensiunea, culoarea, precum i ali parametri
care confer unei pagini web att aspectul dorit ct i
funcionalitate optim
2reau s mul umesc pentru apari ia acestei cr i,
so iei mele care m-a spri'init constant n activitatea de
studiu $otodat, mul umesc Agen iei ANPCDEFP i
Comisiei Europene, care n anul 3445, mi-au furnizat un
grant de studiu al paginilor web la 6niversitatea 7&a
,apienza7 din 8oma, n cadrul acestuia realiznd cu
adevrat felul de structurare a unui sit web
$otodat mul umesc pentru sugestii i ncura'ri
doamnei directoare Ni oi Leontina .9olegiul $e:nic
7&orin ,lgean70
)en ionez c acest material a fost analizat i
apreciat de ctre domnul letor univ! "r! Dumitru #$l$
de la 6niversitatea din 9raiova, avnd un nivel calitativ
ridicat i fiind un a'utor valoros pentru cadrele didactice
din nv mntul preuniversitar
Introducere n limbajul HTML
4
9artea de fa folosete limba'ul ($)& versiunea
;4 pentru construcia paginilor i siturilor web, din acest
motiv am considerat c este necesar s facem cteva
precizri importante pentru cititor 1e exemplu fa de
versiunea anterioar, se ncura'eaz separarea clar
ntre structur i aspectul paginii, acesta fiind un element
c:eie n nelegerea versiunii discutate n carte
<olosirea marca'elor n structur i a fiierelor de
alte tipuri .=avascript, 9,,0, permite o mai mare
independen de dispozitivul fizic, ce permite folosirea
paginii web prin a'ustare, pe toate tipurile de medii fizice
de la telefonul mobil pn la dispozitivele de tip navigare
sau >!, $otodat se pune problema sc:imbului de
informaie ntre dou sau mai multe calculatoare i
rezolvarea optim a acesteia, situaie ce implic
respectarea unor +reguli de comunicare+ pe care
calculatoarele sa le foloseasc uzual
$ransferul datelor ntre dou calculatoare se
realizeaz prin folosirea acestor +reguli de comunicare+,
exact ca n situaia comunicrii dintre dou persoane din
ri diferite ? folosind un limba' universal, adic limba
englez, iar informaia oferit de una dintre pri poate fi
preluata si mai apoi neleas de ctre cealalt persoan
implicat n comunicare 8egulile dup care dou
calculatoare ce ruleaz cu sisteme de operare diferite
transfer datele unul ctre altul sunt stabilite de ctre
protocoalele de comunicaie $9!@I! 1escrierea acestor
protocoale nu face obiectul crii de fa, dar este
necesar prezentarea succint a acestora i anume
,
precizez c %&&P '%(perte)t &rans*er Protool +
Protool "e &rans*er a &e)tului u Mara,e- este
protocolul folosit la transferul acestor pagini web
%&&P este protocolul cel mai des utilizat pentru
accesarea informaiilor n reeaua Internet, informaii care
sunt pstrate pe servere conforme cu standardele AB9
sau Cpopular7 AAA .Aorld Aide Aeb0 n momentul n
care folosim o aplicaie de tip browser sau Cmotor de
cutare7 ? .traducerea nu este ceea mai potrivit0, ca de
exemplu Internet Dxplorer sau )ozilla <irefox i
introducem de exemplu wwwgooglero sau doar
googlero, aplicaia de fapt asociaz automat protocolul
:ttp, deoarece acesta este protocolul implicit i a"resa
devine :ttpE@@wwwgooglero, dac nu m credei privii
bara de adrese -utomat va rula un program
corespunztor pe calculatorul destina ie ce n elege
protocolul respectiv i care va folosi limba'ul ($)&,
pentru afiarea fiierului <i ierul destina ie trebuie sa fie
un document ($)& .(/per$ext )ar*up &anguage0, un
fi ier grafic, de sunet, de anima ie, un program
executabil pe server-ul respectiv sau un editor de texte
%&ML .%(perte)t Mar.up Language - Lim/a,ul
"e Marare %iper&e)t0 ofer unui program de tip
browser sau interpretor "e %&ML informaii despre
modul cum este formatat coninutului unui fiier i cum
se realizeaz legturile acestuia cu alte fiiere
Ce este a"resa unui *i0ier 1e/2 8eprezint calea
obinuit pentru accesarea unui fiier sau o anumita
seciune din fiier, stocat pe un server, prin folosirea
5
structurii arborescente a server-ului respectiv i evident a
protocolului descris anterior ,erverul Aeb caut fi ierul
rdcin, fi ier care - de cele mai multe ori - poart
numele +in"e)!3tml sau +"e*ault!3tml+ 1ac un
asemenea fiier nu exist, sau nu a fost definit ca fiier
implicit in cadrul serverului, acesta din urm ntoarce
utilizatorului care a cerut adresa respectiv un mesa' de
eroare i ofer un a'utor contextual pentru depanarea
problemei aprute
Dxemplu de adres webE
:ttpE@@www:tml:elpcom@cop /rig:t:tml , unde
cop/rig:t:tml, este numele fiierului :tml, aflat pe
serverul www:tml:elpcom
Cum crem o pagin web simpl cu
aplicaia Notepad?
2 prezint mai 'os cteva explicaii privind modul
n care v putei organiza activitateaE

" !entru nceput creai-v folderul de lucru ntr-olocaie
aleas de dumneavoastr, de exemplu pe 1es*top sau
pe o partiie de lucru, evitai pe ct putei partiia
principal 9EF, din motive de securitate
3 1esc:idei editorul de text Gotepad, cu care vei lucra n
procesul de nvare i scriei fiecare exemplu pe care l
gsii aici D recomandabil s ncercai s folosii i
exemplele gsite n reeaua Internet, tiut fiind faptul c
7Hrepetiia este mama nvriiH7
B ,alvai apoi fiierul n folderul creat la pasul " de ctre
dumneavoastr cu numele dorit i cu extensia .html sau
extensia .htm, ns
este necesar ca s
folosii de fiecare
dat aceeai
extensiei
; Iat un exemplu
mai 'osE
i executnd
comanda <ile ? ,ave asH, ob inemE
1
Iperaia de salvarea n folderul tema are dou
componente esenialeE
1. File name tema1.html
2. Save as type All Files
8ezultatul este afiat mai 'osE
i vizualizarea rezultatului se afl pe pagina
urmtoareE
2
Componentele unui document HTML
6n document ($)& are trei componente
principaleE
" 9omponenta ce conine informaii despre fiierul
($)&
3 9omponenta antet.(ead0 a fiierului
B 9orpul.%od/0 fiierului
)arca'ele CJ7 i CK7 sunt folosite pentru scrierea
comenzilor ce vor fi interpretate de browser ? exemplul
cel mai elocvent este J($)&K i J@($)&K ce reprezint
nceputul i sfritul paginii web, nglobnd antetul si
corpul fiierului, n sensul c blocul de text cuprins ntre
ele este scris i formatat n limba'ul ($)& standard n
continuare v ofer sursa paginii prin intermediul creia
am explicat n esen , cum se salveaz o pagin web
simpl n cadrul unui folder de lucru <olosirea folderului
nu o explic nc, dar v-a deveni mai clar utilitatea sa la
folosirea fi ierelor externe
#$
Sursa paginii web:
45D6C&7PE %&ML PU#LIC 89::;<C::D&D %&ML
=!> &ransitional::EN8?
43tml?
43ea"?
45@n antetul fiierului avem titlul fiierului99?
4title?$itlul fiierului ($)&4:title?
45@1efinirea tipului i a setului de caractere folosit
99?
4ME&A 3ttp9eAuivB8Content9&(pe8
ontentB8te)t:3tmlC 3arsetBiso9DDEF9G8?
4:3ea"?
4/o"(?
45999orpul fiierului 2om plasa coninutul paginii pe
care o crem99?
%ine ai venit pe pagina mea D un nceputL
4:/o"(?
4:3tml?
Sau mai simplu i pe n elesul tuturor:
43tml?
43ea"?4title?$itlul fiierului ($)&4:title?
4:3ea"?
4/o"(?
%ine ai venit pe pagina mea D un nceputL
##
4:/o"(?
4:3tml?
Componenta e onHine in*ormaHii "espre
*i0ierul %&ML identific versiunea limba'ului ($)&
folositE
45D6C&7PE %&ML PU#LIC 89::;<C::D&D %&ML =!>
&ransitional::EN8?
1e obicei editoarele de ($)& introduc automat
textul necesar la nceputul fiierului
Componenta AntetHead! a "i#ierului
9omponenta antet .(ead0 a fiierului este ncadrat
de controalele J(D-1K si J@(D-1K !rezena celor
dou controale n document a'uta la o mprire i
structurare mai clar a fiierului, deoarece conine titlul
fiierului .pentru a fi afi at pe bara de sus a ferestrei
programului de navigare sau pentru ca fiierul sa poat fi
mai u or identificat de ctre utilizator0, cuvinte-c:eie care
folosesc motoarelor de cutare, precum si alte informaii
legate de fiierul creat, dar nu sunt afi ate de ctre
browser
Linia urm$toareI
4title?$itlul fiierului ($)&4:title?
#*
reprezint titlul fiierului $extul dintre marca'ele 4title?
0i 4:title? - va fi afi at pe bara de titlu a browser ? ului
sau va putea fi folosit de utilizatori pentru pstrarea
fiierului n listele specifice ale acestui program
&iniaE
4ME&A 3ttp9eAuivB8Content9&(pe8
are urmtoarea semnifica ieE
JME&AK reprezint meta-informa ii despre document
declarnd anumite proprieti mpreun cu valorile lor
definite intern 9u a'utorul elementului )D$- se pot
preciza informa iile care vor fi trimise n antetul fiierului,
informa ii specifice protocolului ($$! i pe care
browserul le interpreteaz pregtind afi area fiierului
" 3ttp9eAuiv M numele informa iei meta pentru un
document ($)& - 8te)t:3tml8
3 ontent M pentru con inutul .valoarea0
informa iei respective
Setul "e aratere *olosit ? 3arset Biso9DDEF9G
reprezint o mul ime de caractere folosite n alfabetul
diferitelor limbi, caractere identificate printr-un numr de
cod 1e aceea, pentru ca browserul s descifreze corect
informa ia pe care o prime te este recomandabil, ca
acest atribut s fie specificat n antetul fiecrui
document ,eturile de caractere sunt ni te standarde
stabilite de ctre I,I .Irganiza ia Interna ional pentru
,tandardizare0 1eci, 3arset iso DDEF9G - . sau I,I
&atin-"0 reprezint setul care con ine cele mai rspndite
extensii ale alfabetului latin i este cel mai des ntlnit
#3
-lte tipuri de informaii ME&A sunt JME&A nameM+nume
proprietate+ ontentM+valoare proprietate+K
,e pot introduce astfel informaii privind autorul
paginii respective, informa ii in scopuri de indexare a
paginii de ctre motoare de cutare Aeb
J)D$- nameM+aut:or+ contentM+!rofesor+K
J)D$- nameM+*e/words+ contentM+(tml, 9,,,
=avascript+K
Corpul "i#ierului
$ot coninutul paginii web se plaseaz n corpul
fiierului i este ncadrat de marca'ele 4#6D7? si
4:#6D7?! )arcarea corpului fiierului cu cele doua
etic:ete este op ional, dar folosirea lor determin o mai
mare claritate n structurarea fiierului pe elemente
componente Ipional marca'ul 4#6D7? poate sa
conin atribute referitoare la fondul si marginile
documentului sau culoarea textului
/a.groun"M+!oze@elev'pg+ ncarc imaginea de
fond a fiierului dintr-un fiier imagine de tip =!>
/golorM+Nffffff+ modific culoarea fundalului
documentului .-lb0
te)tB8J>>>>>>8modific culoarea textului existent in
document, n cazul nostru negru
#4
n cazul n care sunt prezente amndou,
atributele bac*ground i bgcolor, browserul caut fi ierul
imagine de fond i dac acesta exist, el va fi afi at i
multiplicat pentru a acoperii ntreaga suprafa a
fiierului, culoarea de fond fiind vizibil, numai daca
fundalul imagini este transparent
Introducerea te$tului
9oninutul fiierului ($)& const n text, imagini,
sunete, efecte dinamice i fiecare dintre acestea posed
caracteristici distincte i uor de urmrit n cadrul codului
din Gotepad !entru nceput vom analiza caracteristicile
textului, urmnd ca n capitolele urmtoare s analizm
i celelalte componente
n documentele create de noi vom folosi stiluri de
text diferite pentru a evidenia anumite cuvinte sau
pentru a le acorda o anume semnificaie .de citate, de
nume, etc0 !entru a realiza aceste stiluri specificm
valorile pentru atributele fontuluiE
litera
uloarea
stilul
"imensiunea
Stiluri pentru litera te)tului
#,
!entru ca un bloc de text sa apar n pagin
eviden iat .cu caractere aldine0, trebuie inclus ntre
separatorii JbKJ@bK . b vine de la bold Mngroat 0
4/?&e)t sris u aratere ngro ate!4:/?
!entru ca un text sa fie scris cu caractere cursive
acesta trebuie inclus ntr-un bloc delimitat de etic:etele
JiKJ@iK. i vine de la italic0
4i?&e)t sris u aratere nlinate!4:i?
!entru a insera un bloc de caractere subliniate se
utilizeaz etic:etele JuKJ@uK .u vine de la underline0
4u?&e)t sris u aratere su/liniate!4:u?
!entru a indica folosirea fontului monospaiu, adic
forma de scriere n care fiecare caracter ocupa pe lime
acela i spa iu se utilizeaz etic:etele JttKHJ@ttK. tt
nseamn + telet/pe + M teleprinter0
4tt?&e)t sris la ma0ina "e sris!4:tt?
!entru ca o poriune din text s aib caractere mai
mari cu o unitate dect cele din restul textului acesta
trebuie inclus ntr-un bloc delimitat de etic:etele
4/ig?!!!4:/ig?! !entru ca o poriune din text s aib
caractere mai mici cu o unitate dect cele din restul
textului acesta trebuie inclus ntr-un bloc delimitat de
etic:etele 4small?!!!4:small?!
!entru a insera secven e de text aliniate ca indice
.subscript0 trebuie delimitate de etic:etele
4su/?!!!4:su/? sau ca exponent .superscript0, aceste
#5
fragmente de 4sup?!!!4:sup?! !entru a insera un bloc
de caractere tiate cu o linie se utilizeaz etic:etele
4stri.e?!!!4:stri.e?!
Exemplu e !o surs":
-ici este textul din fiier
JbigK-cest text este mai mare dect restul
textuluiJ@bigK
JsmallK -cest text este mai mic dect restul
textuluiJ@smallK
JsubK -cest text este indice la restul textului J@subK
JsupK -cest text este exponent la restul
textuluiJ@supK
Jstri*eK -cest text este tiat cu o linieJ@stri*eK
2izualizare efectelorE
#
Controlul %&'NT(
-cest control valabil i pentru versiunile anterioare
de ($)& permite adugarea urmtoarelor caracteristiciE
tipul caracterelor, dimensiunea i culoarea lor,
formatnd un bloc de text la fel ca procesoarele de text
conform dorinelor creatorului documentului
-ceste caracteristici le voi explica mai 'os pentru
nelegerea clar a lorE
Font Fae - folosit pentru alegerea aspectului literei
utilizate n text 2aloarea primit de proprietate trebuie s
fie un font recunoscut de browser i recomandabil este
s folosii fonturile obinuite, pentru ca browserul s
recunoasc tipul de font specificat
4F6N& FaeB8Courier8?
Font SiKe este folosit mrimea fontului utilizat i
poate lua valori de la " la O -ceast valoare este de
#1
dou tipuriE
A/solut$ ? specific dimensiunea exact a
fontului
4F6N& SiKe B E?
Relativ$ ? specific dimensiunea fontului fa de
cea a fontului curent
4F6N& SiKe B L<? 2aloarea implicit a
dimensiunii fontului este B
Font Color ? este atributul cu a'utorul cruia se
poate stabili culoarea textului marcat 2alorile acestei
proprieti se pot scrie fie cu a'utorul codului :exazecimal
al culorii, fie cu a'utorul numelui culorilor de baz
DxempluE
4Font Color B /lue?
4Font Color B J*?
E)emplu "e realiKare n o"ul %&MLI
,urs ($)&E
Jfont faceM+$a:oma+ size M 5K!rimul site web
realizat de mineJ@fontK
Gu dureaz mult i arat acceptabil Jfont
colorM+N44ff44+K, JbrK ns mai am de lucru J@fontK
Jfont size M PK n realizarea paginilor web JbrK Jfont
faceM+arial+ colorM+NffBB44+K ce fac parte din siteJ@fontK
#2
!e pagina cealalt am afi at rezultatul codului
anterior i ve i putea observa diferen ele ntre fontul cu o
caracteristic i alta
2izualizareE
Inserarea unei imagini
!entru a introduce o imagine n documentul ($)&
este necesar folosirea marcatorului I)>.image n
englez0, al crui atribut src.source0este folosit la
identificarea imagini n spaiul n care se afl sau 68&-ul
acestuiaE
4IMM sr B 8numeNimagine!gi*8?
)arcatorul I)> nu are marca' de nc:eiere, deoarece
marcatorul nu are coninut pe care sa-l includ i accept
doar anumite tipuri de fiiere imagine compatibile cu
($)& cum ar fi gi*O ,peg si png! D bine de clarificm
cteva aspecte legate de folosirea acestor tipuri de
fiiereE
*$
>I< .>rap:ics Interc:ange <ormat0 cu extensia
gif sunt fiiere folosite pentru imagini simple, fr cerine
prea mari n privina spaiului de lucru.Q bii pentru o
culoare, 35P culori posibile0 i este recomandat s le
folosii pentru sigle, pentru benere, pentru trasarea i
delimitarea structurii grafice a paginii web, etc
=!D> .=oint !:otograp:ic Dxperts >roup0 cu
extensia 'peg sau 'pg sunt fiiere folosite pentru
imaginile paginii web, deoarece au o calitate net
superioar n raport cu precedentele.3; bii pentru o
culoare, "POOO3"P de culori posibile0, suport diverse
compresii i modificri de nuane i contraste
!G>.!ortable Getwor* >rap:ics0 cu extensia png
sunt fiiere cu format inventate de firma )icrosoft, n
ideea folosirii sale pe platforma Internet Dxplorer cu
predilecie, are ns portabilitatea pe celelalte platforme
las de doritR
-tributul Alt este folosit pentru afiarea unui text n
locul imaginii pentru situaia n care browser-ul nu
lucreaz dect n mod text sau in cazul dac, utilizatorul
renun la ncrcarea imaginilor .op iune oferita de
ma'oritatea programelor de navigare Aeb0 n cazul
afirii imaginii acest coninut va fi afiat n format tool-tip
.caset de informare0
9:enarul unei imagini se realizeaz cu atributul
/or"er ce primete diverse valoriE
4img srB8imagine!gi*8 /or"erB8<8?
*#
4img srB8imagineG!gi*8 /or"erB8P8?
Sta/ilirea "imensiunilor imaginii
1imensiunile iniiale ale imaginii pot fi modificate
prin intermediul atributelor widt: .lime0 i :eig:t
.nlime0 -tributele widt: si :eig:t stabilesc de fapt
dimensiunile suprafe ei din document ce este ocupat de
imagine i prin acest fapt determinm ncrcarea rapid
a documentului n fereastra programului browser 1ac
imaginea are dimensiuni mai mici sau mai mari, dect
cele indicate imaginea va fi deformat pentru a se
ncadra n suprafa a asociat de programul browser
Dxemplu imaginegif are dimensiunile de ;B pixeli
x BO pixeli
1imensiunile iniiale pentru lime i nlimeE
4img srB8imagine!gi*8 1i"t3B=< 3eig3tB<Q?
**
1imensiuni duble pentru lime i nlimeE
4img srB8imagine!gi*8 1i"t3BDP 3eig3tBQ=?
Alinierea imaginii n raport u te)tul
!entru a alinia imaginea n raport cu textul din 'urul
su este obligatorie folosirea atributului align, care are
mai multe valorile pe care le poate luaE
o top este folosit pentru a alinia textului fa de
partea de sus a imaginii
o /ottom este folosit pentru a alinia textului fa
de partea de 'os a imaginii
o mi""le sau enter este folosit pentru a alinia
textului fa de centrul imaginii
o le*t este folosit pentru a alinia textului fa de
partea stnga a paginii, blocul de text aflat dup
*3
marca'ul imaginii ocup spa iul liber din dreapta i
de sub ea
o rig3t este folosit pentru a alinia textului fa de
partea dreapta paginii, blocul de text aflat dup
marca'ul imaginii ocup spa iul liber din stnga i
de sub ea
Inserarea de tabele
-vem foarte multe posibilit i de a prezenta n
interiorul documentului informa ia ntr-o form
structurat, iar folosirea tabelelor este util, mai ales n
situa ia n care informa ia are un grad mare de
complexitate
Ce este un ta/el2 6n tabel este o suprafa
dreptung:iular format din linii i coloane Dlementul
creat prin intersecia unei linii cu o coloan se numete
celul I linie a tabelului este realizat din mai multe
celule aliniate pe orizontal, iar o coloan este realizat
din mai multe celule aliniate pe vertical 9elulele
tabelului pot s con in conin text, imagini, legturi
web, iar independent de celelalte celule, fiecare celul
poate avea propriile caracteristici pentru culoarea de
fundal, culoarea i alinierea textului
!entru a insera un tabel ntr-un document ($)& se
folosesc marca'ele 4&A#LE? 0i 4:&A#LE?, marca'ul
*4
de final este obligatoriu, deoarece absena lui nu permite
afiarea corect a tabelului !entru inserarea unei linii
ntr-un tabel se folosesc marca'ele 4&R? 0i 4:&R? .table
row0 !entru inserarea unei celule cu informaii se
folosesc marca'ele 4&D? 0i 4:&D? .table data0
)arca'ele de nc:idere pentru inserarea unei linii sau
celule sunt opionale, deoarece fiecare linie i celul este
urmat de alta i acestea pot realiza nc:iderea
necesar
2om exemplifica ceea ce am discutat anterior pe un
caz concret al unui tabel cu bordura de 3
Carateristii ale ta/elului
#or"er
Introduce grosime n pixeli pentru marginea sau
bordura tabelului, dac valoarea este nul, tabelul nu
afieaz bordur sau linii interne
*,
;i"t3 i 3eig3t
,tabilesc dimensiunile tabelului pe orizontal .widt: ?
lime0 i pe vertical .:eig:t ? nlime0 i sunt
exprimate n pixeli cu valori ntregi pozitive sau n
procente ntre "-"44 din limea i nlimea total a
paginii 1imensiunile sunt calculate de
browser.programul de navigare Aeb0 n funcie de
opiunile introduse de programator, prin cele doua
caracteristici, dar si de dimensiunile elementelor din tabel
pentru a se respecta afiarea corect a acestora
DxempluE
" -m modificat marca'ul table adugnd dimensiuni
pentru tabel widt:M344 pixeli i :eig:tM344 pixeli
*5
3 -m modificat marca'ul table adugnd dimensiuni
pentru tabel widt:M35S din limea paginii i
:eig:tM35S din nlimea paginii
Align
1etermina alinierea pe orizontal a tabelului n cadrul
paginii web i are urmtoarele opiuni posibileE
left ? textul ce urmeaz dup tabel va fi afiat n
dreapta tabeluluiR
center - textul ce urmeaz dup tabel va fi afiat sub
tabel
rig:t - textul ce urmeaz dup tabel va fi afiat n
stnga tabeluluiR
*
E)empluI
Aliniere ta/el la stnga te)tuluiI
Cellspaing
,tabilete spaiul .n pixeli0 dintre dou celule
alturate ale unui tabel, precum i spaiul dintre marginile
tabelului i celule
DxempluE
Cellpa"ing
*1
,tabilete spaiul .n pixeli0 dintre marginile unei
celule i coninutul acesteia
#golor
,tabilete culoarea de fond a tabelului
Jtable borderM+3+ cellspacingM+O+ cellpaddingM+5+
bgcolor M+aTua+K
#a.groun"
,tabilete imaginea de fond a tabelului
Jtable borderM+3+ cellspacingM+O+ cellpaddingM+5+
bac*ground MH@imaginegif+K
%spae 0i Rspae
8eprezint distana pe orizontal i respectiv,
vertical dintre tabel i celelalte elemente ale paginii
Aeb, dar este recunoscut implicit doar de Getscape nu i
de Internet Dxplorer
Inserarea listelor
*2
&istele reprezint modaliti de organizare mai
simpl a datelor din pagina web i servesc la prezentarea
informaiilor n mod organizat, pentru a fi mai accesibile i
uor de parcurs &istele le regsim i n alte aplicaii, fiind
foarte uor de implementat n oricare situaie &istele sunt
organizate la rndul lor n trei categoriiE
liste oronate #!u numere sau litere$%
liste neoronate #!u simboluri$%
liste e e&iniii % &"r" mar!a'e.
Liste ordonate
&ist or"onat$ este un poriune de text delimitat
de marca'ele 46L? i 4:6L? .orere list ? list
ordonat0, ale crei elemente se marc:eaz cu numere
<iecare component a listei este descris de marca'ul
4LI? .list item ? element de list0, iar lista este indentat
n raport cu pagina i orice element nou al listei, ncepe
pe o linie nou
Dxemplu de list ordonat simplE
3$
)arca'ul JI&K poate avea opiunea t(peO ce
stabilete tipul de caractere utilizate pentru ordonarea
listei 2alorile opiunii t/pe suntE
- - pentru ordonare cu litere mari
JI& t/peM+-+K
a - pentru ordonare cu litere mici
JI& t/peM+a+K
I - pentru ordonare cu cifre romane mari
JI& t/peM+I+K
i - pentru ordonare cu cifre romane mici
JI& t/peM+i+K
Dxemplu pentru opiunea t/peE

Liste neordonate
3#
I list neor"onat$ este o mulime de componente
asemntoare, aran'ate ntr-o ordine oarecare &ista este
o poriune de text delimitat de marca'ele perec:e 4UL?
0i 4:UL? .unorere list ? list neordonat0 <iecare
component a listei este introdus prin marca'ul simplu
4LI? .list item element list"0 9u toate c etic:eta J&IK
este o etic:et container, etic:eta sa de nc:idere, J@&IK,
este opional 1ac nu este prezent, la ntlnirea unei
noi etic:ete J&IK se consider c vec:ea etic:et este
nc:is
Dxemplu de list neordonatE

3*
Dxemplu de list neordonat cu caracteristica t/pe ce
stabilete simbolul afiat n faa fiecrui element al listeiE
2alorile acestuia sunt urmtoareleE
" circle .cerc0
3 disc .disc plin0
B sTuare .ptrat0
Liste de de"iniii
33
&ista de definiii reprezint un tip de list cu
componente ce nu sunt numerotate, cu simboluri i care
prezint dou nivele de indentare &istele de definiii sunt
poriuni de text incluse ntre marca'ele 4DL? 0i 4:DL?
.e&inition list list" e e&iniii0, cu marca' de nc:idere
obligatoriu Irice component a listei este introdus prin
marca'ul 4D&? .e&inition term termen e e&iniie$ i
conine un numr de elemente care l definesc, introduse
cu marca'ul 4DD? .e&inition es!ription es!riere
e&iniie0

Inserarea legturilor web
Leg$turile .lin(-urile sau :iperlegturile0 sunt marca'e
n fiierul ($)& care definesc n fapt structura de
navigare a unui site web, realiznd conexiunea ntre
paginile componente, exact ca o scurttur din spaiul de
lucru al ecranului Aindows, ctre un fiier aflat undeva
pe discul 9 (ipertextul este tip de text, ce are
comportament modificat datorit codului ($)& i este
34
total diferit de textul clasic din aplicaia Aord de exemplu
i permite nu doar salt dintr-un fiier n altul pe acelai
calculator, dar i ctre un calculator aflat oriunde n lume
9um se insereaz o legtur ntr-o pagin web.fiier
($)&0 U
2om folosi marca'ele 4a? i 4:a? a ? anc:or
nseamn ancor, nume destul de sugestiv pentru
elementul descris, deoarece o nav pentru a rmne
ntr-un anumit loc are nevoie de ancor, la fel i n acest
caz pentru a putea desc:ide o alt resurs de date,
folosim marca'ul respectiv )arca'ul J-K are un
parametru obligatoriu :ref .3/pertext re*erence ?
referin :ipertext0 ce primete ca valoare adresa
fiierului ce dorim s-l desc:idem sau 68&-ul
respectiv.6niform 8esource &ocator ? 8esurs
&ocalizat 6niform0 <iierul poate fi imagine, text sau
($)&, fiierul ($)& n care plasm legtura se
numete surs, iar fiierul ctre care avem legtura se
numete destinaie
&inia de program esteE
)a hre&* aresa &i+ierului ,text es!riptiv )-A,
iar ntre marca'ele JaK i J@aK poate fi plasat i o
imagine $extul dintre marca'e va fi afiat subliniat i de
culoare albastr, iar imaginile au bordur de culoare
albastr i acesta poate fi plasat c:iar n interiorul
textului, tabelelor i al listelor
3,
JtableK JtrK )a hre&* aresa &i+ierului ,text
es!riptiv )-A, )-tr, J@tableK
Leg$turi n aeea0i pagin$
Loul n care dorim s facem legtura se
realizeaz introducnd marca'ul J-K cu caracteristica
name, n faa unui anumit element din pagin ? un titlu,
o imagine, un tabel i name primete ca valoare un nume
atribuit ancorei
Cum se construie#te?
,e introduce n locul dorit linia de mai 'osE
4a name B nume leg$tur$? 4:a?
Leg$tura se realizeaz cu caracteristica 3re* a
marca'ului JaK, i legtura primete ca valoare Nnume
legtur, aa cum arat instruciunea de mai 'osE
4a 3re* B Jnume leg$tur$?te)t "estinaHie4:a?O
textul destinaie fiind afiat de culoare albastr i
subliniat 1ac plimbm cursorul de maus deasupra
legturii, cursorul va lua form de mnu i prin clic pe
text vom putea s facem salt la pagina sau fiierul dorit
Leg$turi $tre alt$ pagin$ "in *ol"erul omun
35
9onstrucia sitului web se bazeaz pe existena mai
multor pagini web sau fiiere, pentru a realiza o structur
ierar:ic de legturi, ce v-a permite navigarea cu
uurin de la o pagin, ctre alt pagin din folder
!entru a permite acest lucru se construiete urmtoarea
structurE
4a 3re*B8numeN*i0ierNHint$!3tml8?&ES&4:a?
-tributul :ref primete ca valoare c:iar numele
fiierului int, i face posibil saltul la coninutul acestuia,
fiind o legtur local ctre un fiier aflat pe acelai
server
$DV$ ? este textul pe care se face clic cu maus-ul
pentru a urma calea indicat de atributul :ref, i pentru a
activa :iperlegtura -cest text este afiat subliniat i
avnd culoare albastr
9el mai simplu caz de aplicare a cuno tin elor
anterioare, este crearea unor legturi ntre dou fiiere
aflate n acelai folder sau folder comun, ca model de
lucru pentru crearea unui sit web funcional apoi, prin
generalizare
2om construi n paginile web dou structuri
asemntoareE
Tn *i ierul G vom intro"ue 4a
3re*B8*i0ierU!3tml8?C$tre *i0ier U4:a?!
Tn *i ierul U vom intro"ue 4a
3re*B8*i0ierG!3tml8?C$tre *i0ier G4:a?!
3
ConHinutul *i0ierului G va *i urm$torulI
J:tmlK
Jbod/K
J:"K<isier " J@:"KJbrK
Ja :refM+fiier3:tml+K9tre fiier 3J@aK
J@bod/K
J@:tmlK
ConHinutul *i0ierului U va *i urm$torulI
J:tmlK
Jbod/K
J:"K<isier 3 J@:"KJbrK
Ja :refM+fiier":tml+K9tre fiier "J@aK
J@bod/K
J@:tmlK
31
1ac facem clic pe oricare din :iperlegturi, 9tre
fi ier " sau 9tre fi ier 3, acestea permit accesul la
fiierul vecin, deci putem trece din fiierul " n fiierul 3 i
invers
Leg$turi $tre o pagin$ a*lat$ n alt *ol"er
n situaia n care este necesar s legm dou
pagini aflate n foldere diferite.situaie nerecomandat
pentru ncrcarea n server0, pentru a preciza poziia
paginilor n structura de foldere, se va folosi adresarea
relativ sau adresarea absolut a acestora
A"resarea relativ$ se refer la calea spre pagina
cu care facem legtura, din documentul n care ne
aflm, i presupune parcurgerea nivel cu nivel, a
structurii de foldere din calculator sau server folosind irul
de caractere !!:
A"resarea a/solut$ se refer la calea complet
spre pagina cu care facem legtura, pornind de la
folderul principal, ce se afl de obicei pe discul ., din
care se a'unge la pagina int
E)emple "e struturiI
" Relativ$ 9 J a :refM+@Gew
<older@fisier":tmlK9atre fisier "J@aK
32
3 A/solut$ 9 J a :refM+9E@1ocuments and
,ettings @-dministrator @1es*top @Gew
<older@fisier":tmlK9atre fisier "J@aK
Leg$turi $tre pagini e)terne
1ac dorim ca situl nostru s aib referine externe,
respectiv legturi ctre alte situri web, este obligatoriu s
adaptm structura legturii n mod corespunztor -cest
lucru se realizeaz prin modificarea valorii atributului
:ref, prin asocierea acesteia cu 68&-ul sitului respectiv,
ca de exemplu :ttpE@@wwwgooglero@ ce reprezint 68&-
ul motorului de cutare >oogle
4a 3re*B83ttpI::111!google!ro8? M66MLE4a?
ImplementareI
J:tmlK
Jbod/K
J:"K&egatura catre >oogle J@:"KJbrK
a 3re*B83ttpI::111!google!ro8? M66MLE4a?
J@bod/K
J@:tmlK
4$
%ineneles c :iperlegtura nu v-a funciona dect,
dac avei conexiune Internet i este foarte util pentru
vizitatorii sitului dumneavoastr n situaia n care vor s
caute o anumit informaie 8eamintesc c n locul
numelui sitului int, se poate introduce ip-ul respectivului
sit, dar este o complicaie inutil i nu merit folosit
Crearea unui sit web "uncional
!entru a crea un sit web funcional i corespunztor
este necesar ca anterior s fie realizate cteva etape
c:eieE
" !lanificare
3 !roiectare
B $estare
-utorul n aceast carte i propune s realizeze un
sit simplu de test, mai mult cu valoare pedagogic dect
practic, format din patru fiiere distincte aflate ntr-un
4#
folder comun ce se pot ncrca ulterior ntr-un server web
de gzduire
2om ncepe cu prima etap, aceea de planificare a
sitului i care trebuie s rspund la ntrebareaE
Care este pu/liul Hint$ al situluiO e sop
tre/uie s$ ai/$O e in*ormaHii tre/uie s$ onHin$2
-vnd n vedere c anterior am stabilit, c situl va fi
unul pedagogic, de nvare, este destul de comod s
folosim o tem legat de coal 1e exemplu s
presupunem c dirigintele unei clase dorete s ncarce
situaia colar cu note, medii i absene la sfrit de
semestru pentru a fi accesate, de ctre prinii ocupai
atunci cnd a'ung acas !ublicul int a fost aadar
stabilit n mod precis, ca fiind prinii elevilor dintr-o
anumit clas, putem s pornim la planificarea sitului
Ce a0tept$ri au p$rinHii elevilorO e vor s$
unoas$ n privinHa ativit$Hilor "es*$0urate "e
elevi2
" Gotele la fiecare disciplin colarR
3 -bsenele la fiecare disciplin colarR
B )ediile la fiecare disciplin colarR
; -bateri de la conduita colarR
2om crea ; fiiere ce vor conine fiecare,
informaii conform cu enunurile prezentate
mai sus, n folderul ,it prin iE
4*
0i va onHine urm$toarea strutur$ "e *i0iereI
Dtapa a doua este cea de proiectare a fiecrui fiier
n parte !rimul pas const n crearea unei structuri
ablon ce va fi copiat n toate fiiereleE
45D6C&7PE %&ML PU#LIC 89::;<C::D&D %&ML =!>
&RANSI&I6NAL::EN8?
43tml?
43ea"?
4title?Numele *isierului'noteO a/senteO me"iiO
a/ateri-4:title?
4meta 3ttp9eAuivB8ontent9t(pe8
4:3ea"?
4/o"( /golorB8re"8?
43G alignB8enter8?In*ormatiile "espre noteO
a/senteO me"iiO a/ateri 4:3G?4/r?
4:/o"(?
4:3tml?
43
Vi are urm$torul e*etI
!rimul fiier ce va fi proiectat este fiierul cu notele
elevilor la disciplinele colare al crui coninut este
realizat bidimensional, innd cont de numele elevilor ?
prima dimensiune i nota la disciplina colar ? a doua
dimensiune <orma de organizare cea mai potrivit
rmne tabelulE
Wi inei cont c nu am introdus n fiierul Gote:tml,
toi elevii i notele lor, ci doar trei dintre acetia, pentru a
nelege mecanismul de lucruE
44
J:" alignM+center+K Gotele elevilor de la
clasaJ@:"KJbrK
Jtable borderM+;+K
JtrK
JtdKGume elev
JtdKGote 1"
JtdKGote 13
i lista continu pn cnd realizm toat linia tabelului
pentru disciplineR
HHHHHHH
JtrK
JtdK!opescu Ion
JtdKO,Q,#
JtdK;,5,P
pentru noteR
HHHHHHH
JtrK
JtdKIonescu Ion
JtdKO,Q,#
JtdK;,5,P
pentru noteR
4,
HHHHHHH
JtrK
JtdK9ristescu ,tefan
JtdKO,Q,#
JtdK;,5,P
pentru noteR
HHHHHHH
J@tableK
1isciplinele se introduc cu list neordonatE
J:" alignM+center+K&ista disciplinelor
scolareJ@:"KJ:rK
JulK1iscipline de studiu
JliK1" &imba si literatura romana
JliK13 &imba engleza
i lista continu pn cnd introducem toate disciplineleR
HHHHHHH
J@ulK
45
Wi rezultatul arat cam aaE
-l doilea fiier ce va fi proiectat este fiierul cu
absenele elevilor la disciplinele colare al crui coninut
este realizat bidimensional, la fel ca i primul, singura
diferen va consta n introducerea unui cmp
suplimentar cu numrul total de absene nregistrat de
elev Gu modificai dect coninutul celulelor cu note i
antetul tabeluluiE
4
-l treilea fiier ce va fi proiectat este fiierul cu
mediile generale ale ce poate fi creat cu a'utorul unei liste
neordonate, ce v-a conine numele elevului i media pe
fiecare itemE
<i ierul cu abateri,adic cel de-al patrulea i ultimul
se realizeaz, cu o list neordonat sau ordonat la fel
ca i n cazul fi ierului anterior
J:" alignM+center+K&ista abaterilor
scolareJ@:"KJ:rK
JulK-bateri
JliKIonescu Ion ? c:iul repetat
JliK9ristescu ,tefan ? distrugere obiecte scolare
i lista continu pn cnd introducem toate
abaterileR
HHHHHHH
J@ulK
41
%inen eles c se poate realiza un sit foarte valoros
pe aceea i tem, dar repet scopul a fost unul didactic, i
nu am ncercat s aduc foarte multe elemente care s
ngreuneze munca unui nceptor
Ideal pentru mul i creatori este s utilizeze un editor
de ($)&, care s creeze rapid i elegant situl web, sunt
ns situa ii n care cunoa terea codului ($)& contribuie
la proiectarea mai precis a paginilor i apoi
reproiectarea sau c:iar depanarea acestora
2 urez mult succesL
42
)ibliogra"ie
" Ai*ipedia Dnciclopedia &iber
:ttpE@@rowi*ipediaorg@wi*i@AebXdesign
*. ($)& pentru www cu V($)& si 9,, >:id de nv are
rapid prin imagini Dlisabet: 9astro Dditura $DI8-
3. >rafic i ($)& pentru elevi Dmil Inea i
1an 9rintea Dditura !aralela ;5
; :ttpE@@wwwwBorg@ pentru cele mai noi
specifica ii ($)&
5 ($)& pentru nceptori )ic:ael Yarbo
Dditura Dgmont
,$

Carte HTML

Î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

Carte HTML

Încărcat de

Drepturi de autor:

Formate disponibile

MARIUS MNESCU

Cum realizm un site web?

Cum realizm un site web?

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