Curs HTML PDF
Încărcat de
DragoshCurs HTML PDF
Încărcat de
DragoshStructura unui document HTML
1. Despre tag-uri
Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul
HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa
afiseze corect continutul paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
tag-uri pereche (un tag de inceput si unul de incheiere).
Exemple: <HTML> si </HTML>; <TITLE> si </TITLE>;
<HEAD> si </HEAD>;
tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>,
<BR>.
Sa vedem tag-urile de baza pe care trebuie sa le contina un document
HTML:
o <HTML> - cu acest tag incepe orice document HTML. Prin
folosirea acestui tag ii spunem browser-ului ca este vorba de un
fisier HTML pentru a il putea afisa.
o <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii,
diverse informatii folositoare pentru browser-ul de internet.
o </HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD>
o <TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un
titlu documentului tau. Astfel, textul pe care il vei scrie intre aceste
tag-uri va fi afisat in bara de titlu a documentului.
o </TITLE> - este tag-ul de încheiere al tag-ului <TITLE>. Arata
sfarsitul titlului documentului.
o <BODY> - odata cu acest tag incepe continutul paginii web. Tot
ce vei scrie intre tag-urile <BODY> si </BODY> va fi afisat, de
catre browser, pe ecranul monitorului.
o </BODY> - ii spui browser-ului ca ai terminat de scris continutul
paginii. Tot ceea ce vei scrie dupa acest tag nu va mai fi afisat.
o </HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul
oricarei pagini web se termina cu acest tag.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere
mici.
1
Atentie!
Nu uita atunci cand scrii codul unei pagini web sa inchizi toate
tag-urile pe care le-ai deschis. Pentru a fi sigur ca nu uiti incearca sa te
obisnuiesti sa scrii dupa fiecare tag si tag-ul de incheiere (la tag-urile
pereche), scriind apoi continutul intre ele.
2. Crearea primului document HTML
Mai intai trebuie sa deschizi editorul de texte Notepad.
START ALL PROGRAMS ACCCESORIESS
NOTEPAD
Va aparea pe exran editorul de texte notepad unde vom incepe sa
scriem codul sursa.
2
Vom incepe cu tag-ul <HTML>. Pentru a nu uita de tag-ul de
inchidere este bine sa-l pui si pe acesta tot la inceput. In continuare vin tag-
urile <HEAD> si </HEAD>. Apoi intre cele doua tag-uri vom pune
perechea de tag-uri <TITLE> si </TITLE>. Intre aceste tag-uri punem titlul
paginii: Prima mea pagina web. Urmeaza tag-urile <BODY> si </BODY>.
Ce vom scrie intre ele va fi afisat in browserul de internet.
Iata cum ar trebui sa arate codul HTML:
3
OBSERVATIE!
Am folosit tag-ul <BR> pentru a trece pe urmatorul rand. Astfel ii
spunem browser-ului ca ce va fi scris dupa tag-ul <BR> va trebui afisat pe
urmatorul rand. Tag-ul <BR> nu are un tag de inchidere.
SALVAREA UNUI DOCUMENT HTML
Dupa ce am scris codul, va trebui sa salvam documentul cu extensia
.html . Din meniul File alege optiunea Save As, iar apoi denumeste
documentul asa cum vrei, dar cu una din extensiile de mai sus. Apasa
butonul Save. Ai acum un document html, care reprezinta prima ta pagina
web. Intra in fisierul unde ai salvat documentul si deschide-l. Ar trebui sa
arate asa
4
OBSERVATIE!
Pentru a vedea codul unei pagini web scrise cu HTML alege din meniul
View al browserului optiunea Source
Exercitiu:
Folosind cunostintele dobandite pana acum, incearca sa scrii codul
pentru a realiza o pagina web la fel cu aceasta:
5
3. Despre atribute HTML
Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se
pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci
browser-ul va lua in considerare valorile implicite ale tag-ului respectiv.
EXEMPLE:
Tagul <BODY> poate contine atributul BGCOLOR indica ce
culoare va avea fondul viitoarei pagini web. Fondul unei pagini
web are in mod implicit culoarea alba
Spre exemplu daca dorim culoare de fundal sa fie ORANGE tagul de
inceput <BODY> va arata asa :
6
<BODY BGCOLOR="#FF9900">
unde #FF9900 reprezinta codul culorii orange
Daca in codul sursa a paginii de inceput introducem atributul
BGCOLOR in interiorul tagului <BODY> obtinem pagina de mai jos
In continuare vom vedea ce inseamna culori sigure. Sunt acele
culori care vor fi afisate de majoritatea browserele. Daca, de exemplu,
pentru fondul paginii tale web ai folosit o anumita culoare, dar nu ai
verificat sa vezi daca aceasta face parte din culorile sigure, atunci
exista posibilitatea ca unii dintre utilizatorii paginii tale sa vada o cu
totul alta culoare
Mai jos aveti un tabel cu cele mai importante culori care sunt
recunoscute de majoritatea browserelor :
7
Culoare Nume culoare Cod culoare
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
8
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
9
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
10
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
11
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
12
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
13
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
14
Acum sa ne ocupam de textul paginii noastre. Mesajul "Bine ai venit!"
sa spunem, de exemplu, ca am vrea sa fie scris cu albastru in loc de negru,
care este valoarea implicita si sa fie scris cu litere mai mari decat restul
textului. Pentru a scrie astfel textul, vom folosi tag-ul <FONT> insotit de
unele atribute astfel:
<FONT COLOR="#0000FF" SIZE="6">Bine ai venit </FONT><BR>
Textul urmator "Vom invata impreuna limbajul HTML. Aceasta este
prima mea pagina web!", daca dorim doar sa aiba culoarea rosie, vom folosi
numai atributul COLOR pentru tag-ul <FONT>, restul proprietatilor fiind
cele implicite:
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina
web!
</FONT>
Prin folosirea liniilor de cod de mai sus in cadrul codului nostru,
acesta va deveni :
15
Iar pagina web reinprospatata va arata astfel :
Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care
vine de la Horizontal Rule care inseamna linie orizontala. Daca nu ii
asociem acestui tag nici un atribut atunci vom obtine o line orizontala
cat latimea paginii web.Daca vrem sa folosim propriile noastre
proprietati pentru trasarea unei linii orizontale vom apela la atributele
tag-ului <HR>. Aceste atribute sunt urmatoarele:
o ALIGN - pentru alinierea liniei,
o COLOR - pentru culoarea liniei,
o SIZE - pentru grosimea liniei
o WIDTH - pentru lungimea liniei.
16
EXEMPLU :
Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate
din valoarea implicita (WIDTH="50%") si putin mai groasa decat cea
implicita (SIZE="5%") ce va fi aliniata in centrul paginii
(ALIGN="center"), vom folosi urmatoarea linie de cod:
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%"ALIGN="center">
Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre.
Prima linie o vom folosi la sfarsit, in timp ce a doua linie o vom folosi dupa
mesajul "Bine ai venit!". Noul cod HTML al paginii noastre va fi urmatorul:
Daca se salveaza pagina cu extensia .html rezultatul va fi urmatorul:
17
4. Form atarea textul ui in HTML
In aceast paragraf ne vom „juca” cu textele din cadrul paginilor web,
vom vedea cum pot fi ele formatate.
Titluri
Atunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre
web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu
ajutorul acestor tag-uri, care au si tag-uri de incheiere, vom scrie titlurile din
cadrul paginilor noastre web. Astfel in cadrul codului HTML vom folosi tag-
ul <H1>, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul
de incheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu
18
caracterele cele mai mari in timp ce textul incadrat de tag-urile <H6> si
</H6> va fi afisat cu caracterele cele mai mici, dupa cum urmeaza:
Acesta este un titlu cu <H1>
Ac esta este un titlu c u <H2>
Ac esta este un titlu cu <H3>
Acest a est e un t it lu cu <H4>
Acest a est e un titlu cu <H5>
Aces ta est e un ti tlu cu <H6>
Implicit cu editorul notepad se scrie cu marimea <H3>. Tag-urile
acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la
stanga, la centru sau la dreapta.
Etichete pentru formatarea textului
Am vazut in sectiunea precedenta cum arata titlurile. In continuare vor
fi prezentate diverse moduri de formatare a unui text.
Pentru alegerea caracteristicilor unui text, putem folosi tag-ul
<FONT>. Acest tag accepta mai multe atribute (color, face, size) care ne vor
ajuta in formatarea textelor. Atributul COLOR se refera la culoarea textului
ce va fi incadrat de tag-urile <FONT> si </FONT>, atributul FACE arata
tipul fontului, iar atributul SIZE arata marimea fontului.
Pentru a alege culoarea textului, trebuie sa consulti mai intai tabelul
de culori, iar apoi, atunci cand te-ai hotarat ce culoare vei folosi, sa scrii
codul sau numele acelei culori ca valoare a atributului COLOR.
De exemplu, liniile de cod:
19
<FONT COLOR=”CornflowerBlue”>O sa invat cum sa realizez pagini
web!</FONT>
sau
<FONT COLOR=”#6495ED”> O sa invat cum sa realizez pagini web!
</FONT>
vor avea urmatorul rezultat:
O sa invat cum sa realizez pagini web!
<FONT COLOR=”#FF0000”>Totul este gratuit </FONT>
va afisa in cadrul browserului de internet:
Totul este gratuit
Cele mai folosite fonturi pentru paginile web sunt urmatoarele:
Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest t ext a f ost scri s cu f ont ul " cour i er new"
Acest text a fost s cris cu fontul "verdana"
Acest text a fost scris cu fontul "comic sans ms"
FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>
Cu ajutorul atributului FACE introducem fontul textului(caligrafia).
Pentru a schimba dimensiunea implicita a fontului, vom folosi una din
valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1
pentru cea mai mica dimensiune si 7 pentru cea mai mare):
<FONTCOLOR=”#FFA500”FACE=”Arial”SIZE=”7”>Invat sa fac pagini
web! </FONT>
Invat sa fac pagini web!
20
Iata si celelalte dimensiuni (de la 6 la 1):
Invat sa fac pagini web!
Invat sa fac pagini web!
Invat sa fac pagini web!
Invat sa fac pagini web!
Invat sa fac pagini web!
Invat sa fac pagini web!
Daca vrem ca textul nostru sa fie scris cu caractere ingrosate,
folos im pere chea de etichete <B> si </B>.
<B>Text bold</B>
Text bold
Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete
<I> si </I>.
<I>Text italic</I>
Text italic
Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>
<U>Text subliniat</U>
Text subliniat
Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea de
etichete <CENTER> si </CENTER>.
<CENTER>Text centrat</CENTER>
Text centrat
21
Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat
pe mai multe randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul
<BR> nu are tag de incheiere, in timp ce tag-ul <P> are tag de incheiere,
insa nu este obligatoriu.
Tag-ul <BR> vine de la line break (intrerupere de linie) si l-am mai
folosit in cadrul acestui curs. Asa cum am vazut si pana acum este folosit
pentru a face trecerea de la o linie la alta.
Astfel sa presupunem ca avem urmatorul cod HTML:
Acest cod va avea ca rezultat:
22
Acum sa folosim eticheta <BR> in cadrul codului. Iata diferenta:
Respectiv in fereastra broswerului:
23
Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul
<BR> prin
rand, dar sefaptul
si lasacaunprin
randutilizarea luitexte.
liber intre nu numai ca se trece
Sa revenim pe urmatorul
la exemplul de mai
sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru a se vedea diferenta
dinre ele.
24
Respectiv afisat in internet explorer:
Utilizarea caracterelor speciale
Dupa cum vezi, textul nu este scris cu diacriticele specifice limbii
romane.
anumita (ă, î, ş, ţ etc.).
combinatie de Pdiverse caractere pentru ca browserul sa citeasca
entru a folosi si aceste litere trebuie sa scriem o
diacriticele.
Iata in continuare codurile HTML pentru cele mai folosite caractere si
simboluri, care nu se gasesc pe tastatura calculatorului:
25
Cod HTML
Simbol
Numar Nume
 
¢ ¢ ¢
£ £ £
© © ©
« « «
® ® ®
° ° °
± ± ±
² ² ²
³ ³ ³
µ µ µ
¶ ¶ ¶
¹ ¹ ¹
» » »
¼ ¼ ¼
½ ½ ½
26
¾ ¾ ¾
  Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
Acum dupa ce am vazut codurile pentru diverse caractere pe care le
vom folosi in cadrul paginilor noastre web, sa vedem cum arata codul
paginii noastre de la inceput, daca textul va fi scris cu diacritice:
27
Rezultatul in internet explorer:
28
Exercitiu:
Scrie codul unei pagini web care sa contina urmatorul text (scris cu
diacritice):
Bine ai venit la ora de informatică, unde poţi învăţ a tot ceeea ce
trebuie pentru a realiza prima ta pagina web. Toate acestea gratuit, doar cu
un mic efort! În speranţa că, vei reuşi, şi în acealaşi timp nu ţi-am provocat
greaţă sau alte indigesti, voi încerca să perfecţ ionez acest material în timp!
Pentru a alinia un text folosim codul (spatiu) de cateva ori.
Pentru a te verifica, alege din fereastra browser-ului din meniul View
optiunea Source
5. HTML - imagi ni
Pana acum am invatat cum sa folosesti decat texte si culori in cadrul
paginilor web. Acum vei invata despre imagini, care alese cu grija, vor da
un plus design-ului paginilor web astfel create
Formatele imaginilor
Browserele recunosc, in cadrul paginilor web, mai multe formate ale
imaginilor. Cele mai raspandite sunt cele cu extensia .gif si cele care au una
din terminatiile .jpg sau .jpeg. Iata in continuare cateva caracteristici ale
acestor formate de imagini:
GIF (Graphics Interchange Format)
Formatul GIF poate reda un numar de 256 de culori, de aceea este
folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animatii.
29
Butoane:
buton1.gif ; marime: 877 bytes
buton2.gif ; marime: 925 bytes
buton3.gif ; marime: 921 bytes
Icon-uri:
icon1.gif ; marime: 336 bytes
icon3.gif ; marime: 401 bytes
Animatii:
animatie.gif ; marime: 9,27 Kb
JPEG (Joint Photographic Expert Group)
Formatul JPEG nu m ai este limi tat la 2 56 de culo ri si de acee a
este folos it pentru f otografii. Imaginile care a partin acestui f ormat au
extensia .jpg sau .jpeg.
poza.jpg ; marime: 6,45 Kb
30
Se observa ca in cazul fotografiilor, formatul jpg ofera o calitate mai
buna a imaginii si ocupa un spatiu mult mai mic decat daca am fi salvat
aceeasi imagine in formatul gif.
Adaugarea imaginilor in paginile web
Asa cum ai vazut, la majoritatea site-urilor, imaginile dau o nota
aparte paginilor web. Pentru a folosi imagini si in cadrul paginilor tale web
trebuie sa folosesti tag-ul <IMG> insotit de atributul SRC (source) care
indica adresa sau calea catre imaginea pe care vrei sa o folosesti.
Forma generala a acestui tag va fi:
<IMG SRC=" numeleimaginii.extensie ">
Atentie la extensie!
Nu uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fi
afisata de browser.
Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini
HTML, imagini etc.) in cadrul aceluiasi folder. Daca vei folosi in codul
HTML al paginilor site-ului tau linia de cod de mai sus, imaginea va fi
afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pe care
vrei sa o folosesti. In caz contrar imaginea nu va fi afisata.
Sa scriem codul unei pagini web care sa contina o imagine. Salvam
imaginea de mai jos sub numele de bebe.jpg in acelasi folder cu pagina web
pe care o vom face in continuare.
Acum sa vedem codul HTML:
31
Salveaza pagina cu numele imagini.html.
Sa vedem cum ar trebui sa arate pagina imagini.html.
32
Daca site-ul tau va avea multe fisiere, nu mai este o solutie sa le tii pe toate
in acelasi folder. In acest caz, este bine sa grupam fisierele de acelasi tip in
subfoldere. Astfel in folderul Site, de exemplu, vom avea un subfolder Poze,
in care vor fi salvate toate imaginile site-ului, un subfolder Pagini in care vor
fi salvate toate paginile HTML si asa mai departe.
Iata cum ar arata structura site-ului:
Pentru o functionare corecta vom utiliza una din urmatoarele linii de
cod prin care ii vom spune browser-ului ca imaginea se afla in folder-ul
Poze:
<IMG SRC=”../Poze/bebe.jpg”>
- daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in
subfolderul Poze.
<IMG SRC=”Poze/bebe.jpg”>
- daca pagina va fi salvata in folderul Site si imaginea va fi in subfolderul
Poze.
6. Legaturi
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.
Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite
trecerea rapida de la o informatie aflata pe un anumit server la alta informatie
memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-
o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al
mouse-ului.
33
O lega tura catre o pagina a flata in acelasi directo r
O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul
etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de
legatura se utilizeaza un atribut al etichetei <a> numit href, care ia valoare
numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila
la apasarea butonului stang al mouse-ului este formata din textul cuprins intre
etichetele <a>...</a>. Prezenta etichtetei de sfarsit </a> este obligatorie.
Exemplu :
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 1 </h3>
<a href="leg_ex2.html">
Link catre pagina 2 </a>
</body>
</html>
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href="leg_ex1.html">
Link catre pagina 1 </a>
</body>
</html>
34
O lega tura catre o pagina a flata pe ace lasi dis c lo cal
Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director
atunci pentru a preciza pozitia ei in structura de directoare se poate folosi
adresarea relativa.
< html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="../exemple/list/listex_11.html">
Link catre o pagina cu liste </a>
</body>
</html>
O lega tura catre un sit e particular
In exemplul
start urmator
a Colegiului se utilizeaza
Tehnic adresa URL www.netscape.com care incarca pagina de
“Victor Ungureanu”.
<html>
<head>
<title> Link catre site-ul Colegiului Tehnic “Victor Ungureanu”</title>
</head>
<body>
<h3>Link catre site-ul Colegiului Tehnic “Victor Ungureanu” Campia Turzii </h3>
<a href="http://www.ctvuct.ro">
Colegiul Tehnic “Victor Ungureanu”</a>
35
</body>
</html>
Anco re
Intr-o pagina foarte lunga pot exista puncte de reper catre care se
definesc legaturi. O ancora se defineste de asemenea prin eticheta <a>. Pentru
a defini ancora se utilizeaza atributul name care primeste ca valoare un nume
atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatura catre "leg1"
definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de
valoare "#leg1". Pentru a introduce o legatura catre o ancora definita in alt
document (alta pagina) aflat in acelasi director, atributul href primeste o valoare
de forma "nume_fisier.html#nume_ancora".
<html>
<head>
<title> Ancore definite in acelasi document si in alt doocument</title>
</head>
<body>
<h3>Ancore definite in acelasi document si in alt document </h3>
<a href="#ancora1">
Link catre ancora 1 </h3>
<a href="../../legaturi.php#anc">
Link catre o ancora 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
</body>
</html>
36
7. Crearea listelor in HTML
In aceasta lectie vom invata cum putem folosi listele in pagina web.
Listele pe care le putem crea cu ajutorul limbajului HTML sunt de urmatoarele
tipuri: liste neordonate, liste ordonate si liste de definitii. Sa le luam pe rand.
List e neordo nate (UL)
Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una:
Firma noastra va ofera urmatoarele servicii:
printare
printare
indosariere
xerox
tehnoredactare
Pentru a putea
(denumirea face otag-uri
acestor lista neordonata
vine de la trebuie sa folosim
"unordered tag-urile
list" care <UL> si
inseamna in </UL>
limba
engleza lista neordonata). Fiecare element al listei trebuie introdus de tag-ul
<LI>. Ca sa intelegem mai bine sa vedem impreuna cum arata codul HTML
pentru lista de mai sus:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
37
<UL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</UL>
</BODY>
</HTML>
Salveaza pagina cu numele de liste1.html. Ea ar trebui sa ararte cam asa:
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui
element. Acesta este folosit in mod implicit atunci cand folosim o lista
neordonata. Astfel, prin atribuirea unei valori atributului TYPE, vom putea face ca
elementele listei sa fie precedate de un patrat sau de un cerc gol.
Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu
una din urmatoarele linii de cod:
o pentru cercuri goale:
<UL TYPE=circle>Firma noastra va ofera urmatoarele servicii:
Salveaza pagina cu numele de liste2.html Ar trebui sa arate cam asa:
38
List e ordonate (O L)
Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista
urmatoare pastreaza continutul celei de mai sus insa este o lista ordonata
(ordered list). Sa vedem diferenta:
Firma noastra va ofera urmatoarele servicii:
1. printare
2. printare
3. indosariere
4. xerox
5. tehnoredactare
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea
acestora venind din limba engleza "ordered list" care inseamna lista ordonata. La
fel ca si la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>.
Iata codul pentru lista ordonata de mai sus:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastra va ofera urmatoarele servicii:
39
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</OL>
</BODY>
</HTML>
Salveaza pagina cu numele de listeordonate.html . Ar trebui sa arate cam asa:
pentru litere mari:
<OL TYPE=A>Firma noastra va ofera urmatoarele servicii:
pentru litere mici:
<OL TYPE=a>Firma noastra va ofera urmatoarele servicii:
pentru cifre romane mici:
<OL TYPE=i>Firma noastra va ofera urmatoarele servicii:
40
pentru cifre romane mari:
<OL TYPE=I>Firma noastra va ofera urmatoarele servicii:
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START.
Acest atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu
daca vrem sa incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc.
Forma generala a acestui atribut este START=n, unde n este un numar natural. Sa vedem
un exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>In vacanta de vara am vizitat urmatoarele orase:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
Ar trebui sa va apara intr-un browser cam asa :
41
Listele de definitii
Listele de definitii sunt putin diferite de celelalte doua tipuri, intrucat fiecare termen al
listei se compune din doua elemente: Termenul Definitiei si Descrierea Definitiei.
Tag-ul ce marcheaza inceputul unei liste de definitii este <DL>. Folosirea tag-ului de
inchidere </DL> este obligatorie.
Tag-ul ce marcheaza termenul definitiei este <DT>. Folosirea tag-ului de inchidere
</DT> este optionala.
Tag-ul ce marcheaza descrierea definitiei este <DD>. Folosirea tag-ului de inchidere
</DD> este optionala.
Modul de folosire a acestui tag este redat in exemplul urmator:
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>WWW</DT>
<DD>World Wide Web!</DD>
</DL>
avand ca rezultat afisarea listei in aceasta forma:
HTML
Hyper Text Markup Language
WWW
World Wide Web!
Dupa cum se poate observa, descrierea definitiei este aliniata mai interior, tocmai
pentru a sublinia caracterul relatiei de subordonarea existent fata de termenul definitiei.
42
8. Tabele in HTML
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe
langa crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din
cadrul paginilor web.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi
scris intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR>
care vine de la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in
cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al
tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia cateva celule, cu
ajutorul tag-urilor <TD> si </TD>. Sa vedem cu ajutorul unui exemplu cum putem
adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Primul tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Nota</B></TD>
</TR>
<TR>
<TD>Ionescu</TD>
<TD>Bogdan</TD>
<TD>7</TD>
</TR>
<TR>
<TD>Stancu</TD>
<TD>George</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Dumitrescu</TD>
<TD>Alexandra</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Marin</TD>
<TD>Paul</TD>
<TD>8</TD>
43
</TR>
<TR>
<TD>Ivanov</TD>
<TD>Mihaela</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ar trebui sa va iasa cam asa ceva:
Proprietatile tabelelor
Asa cum ai observat, in exemplul de mai sus am realizat un tabel, dar fara
nici o linie. Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie
insosit de atributul BORDER avand valoarea egala cu cel putin 1. In plus, poti
schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR insotit de
codul culorii dorite. Astfel, daca vrem ca liniile tabelului nostru sa aiba culoarea
rosie vom folosi urmatoarea linie de cod:
<TABLE BORDER="1" BORDERCOLOR="#FF0000">
44
Inlocuieste linia 6 din exemplul de mai sus si salveaza pagina cu numele
tabel2.html. Ar trebui sa iasa cam asa ceva.
Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru
a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0".
Acest atribut specifica distanta dintre celulele unui tabel. Alaturi de acest atribut
putem folosi si atributul CELLPADDING care indica distanta dintre marginile
celulelor si textul din cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim
atributele WIDTH pentru latime si HEIGHT pentru inaltime. Pentru alinierea
datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left",
"center" sau "right". Pentru a alinia datele tabelului pe verticala folosim atributul
VALIGN insotit de una dintre valorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel
folosim atributul BGCOLOR impreuna cu codul culorii alese. Sa facem impreuna
o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-am invatat
pana acum in aceasta lectie. Scrie codul urmator in cadrul unui editor text si
salveaza apoi pagina cu numele de tabel3.html :
<HTML>
<HEAD>
<TITLE>Proprietatile tabelelor</TITLE>
45
</HEAD>
<BODY>
<CENTER><H2>Rezultatele obtinute la matematica</H2></CENTER>
<HR WIDTH="50%" ALIGN="center" COLOR="#FF0000">
<TABLE WIDTH="500" ALIGN="CENTER" BORDER="1"
BORDERCOLOR="#000000" CELLSPACING="0" CELLPADDING="0">
<TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle">
<TD WIDTH="200" HEIGHT="50"><B><FONT
COLOR="#FFFFFF">Nume</FONT></B></TD>
<TD W IDTH="200"HEIGHT="50"><B><FONT
COLOR="#FFFFFF">Prenume</FONT></B></TD>
<TD WIDTH="100" HEIGHT="50"><B><FONT
COLOR="#FFFFFF">Nota</FONT></B></TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGHT="20">Ionescu</TD>
<TD WIDTH="200" HEIGHT="20">Bogdan</TD>
<TD WIDTH="100" HEIGHT="20" ALIGN="center">7</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGHT="20">Stancu</TD>
<TD
<TD WIDTH="200" HEIGHT="20">George</TD>
WIDTH="100" HEIGHT="20" ALIGN="center">9</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGHT="20">Dumitrescu</TD>
<TD WIDTH="200" HEIGHT="20">Alexandra</TD>
<TD WIDTH="100" HEIGHT="20" ALIGN="center">10</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGHT="20">Marin</TD>
<TD WIDTH="200" HEIGHT="20">Paul</TD>
<TD WIDTH="100" HEIGHT="20" ALIGN="center">8</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGHT="20">Ivanov</TD>
<TD WIDTH="200" HEIGHT="20">Mihaela</TD>
<TD WIDTH="100" HEIGHT="20" ALIGN="center">9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
46
47
S-ar putea să vă placă și
- Curs-1-Web Elemente de Baza TaguriÎncă nu există evaluăriCurs-1-Web Elemente de Baza Taguri14 pagini
- HTML Este Prescurtarea de La Hypertext Markup LanguageÎncă nu există evaluăriHTML Este Prescurtarea de La Hypertext Markup Language5 pagini
- HTML Pe Intelesul Tuturor - Ghid Practic Pentru Crearea Paginilor WebÎncă nu există evaluăriHTML Pe Intelesul Tuturor - Ghid Practic Pentru Crearea Paginilor Web33 pagini
- Întroducere În HTML (Hypertext Markup Language) : Lecţia 1Încă nu există evaluăriÎntroducere În HTML (Hypertext Markup Language) : Lecţia 114 pagini
- Crearea Paginilor Web in Limbajul HTMLÎncă nu există evaluăriCrearea Paginilor Web in Limbajul HTML11 pagini
