Lucrare de Laborator NR - 1

Lucrare de laborator nr.
1
Tema: Introducere n HTML. Structura general a unui documnent HTML. Blocuri de text.
Formatarea caracterelor, alineatelor (culori, fonturi, margini). Stiluri. Efecte speciale.
HTML este prescurtarea de la HyperText Markup Language i reprezint un limbaj pentru crearea unui
document astfel nct s poat fi publicat pe World Wide Web i vizualizat cu ajutorul unui browser (Internet
Explorer, Netscape Navigator, Mozila Firefox, Opera, etc.). Acest limbaj de marcare st la baza oricrui site
web. Absolut toate website-urile folosesc HTML-ul n construcia lor.
Cele mai apreciate caracteristici ale formatului HTML snt:
independena fa de platform (acelai document. html este afiat asemntor de computere diferite);
legturile hipertext;
formatarea structurat.
Prin legtur hipertext (mai scurt hiperlegtur) se nelege o referin ctre un alt document. n calitate
de hiperlegtur poate servi un cuvnt, o fraz, o imagine sau orice alt element al paginii Web i este identificat
prin subliniere sau culoare, pentru a-l deosebi de textul simplu.
HTML nu este un limbaj de programare i asta din cauza c in HTML lipsete atributul principal propriu
oricrui limbaj de programare i anume comenzile. n HTML nu poate fi creat o succesiune de aciuni, ci doar
poate fi descris modul n care browserul trebuie s afieze la ecran documentul respectiv.
Astfel HTML este doar un limbaj de descriere, coninand elemente ce permit construirea paginilor web.
Documentele HTML sunt exclusiv de tip text (ASCII) prin urmare pot fi create cu orice editor de texte.
Prin element al unui document HTML se nelege orice component a structurii documentului: tabel,
paragraf, list, titlu, buton, caset de text, imagine etc.
Pentru a marca elementele unui fiier.html se utilizeaz diferite cuvinte cheie, numite etichete, marcaje
sau tag-uri.
Tag-urile stabilesc att structura documentului, ct i aspectul acestuia. Un tag este un identificator care
furnizeaz browser-ului instruciuni de formatare a documentului. Petru a fi delimitate, tag-urile HTML sunt
ncadrate ntre paranteze unghiulare < >.
Tag-urile se divizeaz n:
tag-uri pare sau tag-uri pereche care impun dup sine existena unui tag de nchidere. Eticheta de
sfrit arat ca i cea de nceput, mai avnd n faa ei caracterul / (slash);
tag-uri impare sau singulare care nu necesit nchidere.
Observaie: Nu lsai un spaiu dup < pentru c browserul nu mai recunoate instruciunea.
Limbajul HTML nu face diferen ntre literele mari i mici.
Prima versiune de HTML a fost lansat n 1989 (proiectat de Tim Berners-Lee). Ultima versiune de
HTML este HTML5. Nu toate browsere susin funcionalitatea HTML5, ns cele mai noi versiuni ale lui
Google Chrome i Firefox da.
Orice pagin web (document HTML) are n structur trei elemente obligatorii: un element numit HTML,
care cuprinde ntregul document, i dou sub-elemente ale acestuia: HEAD (antet, cap) i BODY (corp).
Tag-ul <html> este primul tag care trebuie s apar intr-un fiier HTML. El ncadreaz alturi de tag-ul
su corespunztor de nchidere </html> ntreaga pagin web.
Tag-ul <head> marcheaz partea de antet a documentului. Este un tag par cu tag-ul de nchidere
</head>.
Tag-ul par <body> incadreaz coninutul paginii web.
n antet este recomandat s se precizeze titlul documentului, care va fi afiat n bara de titlu a browser-ului.
Pentru a preciza titlul documentului, care nu poate depi 64 de caractere, se utilizeaz n seciunea antet
tagurile pereche <title> i </title>, ntre care se scrie titlul documentului.
Primul tag dintr-un document HTML este un comentariu.
<!DOCTYPE html>
Acest comentariu este important pentru standardizarea documentelor html. Pentru web-ul semantic care
va urma este deosebit de important respectarea standardelor. Motoarele de cutare inteligente vor ti
nsemntatea tag-urilor, iar astfel rezultatele cutrilor vor fi mult mai precise. Comentariul din exemplul de
mai sus specific faptul c documentul html care urmeaz este scris conform standardului HTML 5.
1
Structura unui document HTML
Tag-urile de baz pe care trebuie sa le conin un document HTML snt:
<HTML> - cu acest tag ncepe orice document HTML. Prin folosirea acestui tag i spunem browser-ului c
este vorba de un fiier HTML pentru a-l putea afia.
<HEAD> - ntre aceste tag-uri snt trecute, pe lng titlul paginii, diverse informaii folositoare pentru browser-
ul de internet. Marcheaz partea de antet a documentului. Informaia scris n antetul
documentului nu este vizibil utilizatorului. Excepie face titlul paginii.
</HEAD> - acesta este tag-ul de ncheiere al tag-ului <HEAD>
<TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tu. Astfel, textul pe care il
vei scrie ntre aceste tag-uri va fi afisat n bara de titlu a documentului.
</TITLE> - este tag-ul de ncheiere al tag-ului <TITLE>. Arata sfritul titlului documentului.
<BODY> - odat cu acest tag ncepe coninutul paginii web. Tot ce vei scrie ntre tag-urile <BODY> i
</BODY> va fi afiat, de ctre browser, pe ecranul monitorului.
</BODY> - i spui browser-ului c ai terminat de scris coninutul paginii. Tot ceea ce vei scrie dup acest tag
nu va mai fi afiat.
Acesta poate avea unul din atributele:
bgcolor care specific culoarea fondalului paginii. Ca valoare acest atribut poate primi numele sau
valoarea RGB ale culorii.
Background utilizat pentru aplicarea unei imagini ca fundal al paginii. Ca valoare acesta primete
URL- ul (adresa i numele) imaginii respective.
Text specific culoarea textului. Primete ca valoare numele culorii sau valoarea RGB a acesteia.
Link specifc culoarea legturilor nevizitate din pagin. Ca valoare primete numele sau valoarea
RGB ale culorii.
Vlink specific culoarea legturilor vizitate din pagin. Ca valoare primete numele sau valoarea RGB
ale culorii.
Alink culoarea legturilor in timpul click ului. Valoarea acestuia este numele sau valoarea RGB ale
culorii.
Leftmargin folosit la indentarea intregului material din pagin fa de marginea din stng. Valoarea
este dat n pixeli.
Rightmargin folosit la indentarea intregului material din pagin fa de marginea din dreapta.
Valoarea este dat n pixeli.
Topmargin folosit pentru a deplasa intregul material din pagin fa de marginea de sus. Valoarea este
dat n pixeli.
Bgproperties dac este prezent, la derularea paginii, fondalul paginii rmane fix, primete doar
valoarea "fixed".
<META> - Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosit, descrierea i cuvinte cheie care pot fi
gsite de motoarele de cutare. Se ncheie cu </META>.
Exemplu:
<meta charset="UTF-8">
</HTML> - este tag-ul de ncheiere al tag-ului <HTML>. Codul oricarui document se termin cu acest tag.
Acesta atenioneaz browserul c a ajuns la sfritul documentului HTML.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Atenie! Nu uita atunci cnd scrii codul unei pagini web sa nchizi toate tag-urile pe care le-ai deschis.
Pentru a fi sigur c nu uii ncearc s te obinuieti s scrii dupa fiecare tag si tag-ul de ncheiere (la tag-urile
pereche), scriind apoi continutul ntre ele.
2
Crearea unui document HTML.
1. Facei pe click pe Start/All Programs/Accessories/Notepad.
2. Scriei codurile HTML n Notepad (fig.1):
Fig.1
3. Salvai fiierul. Din meniul principal al Notepad-ului selectai File > Save as. Denumii fiierul
"index.html" sau orice alt nume cu extensia html sau htm. (Fig. 2)
Fig.2
UTF-8 este codificarea preferat pentru fiiere HTML. Codarea ANSI acoper SUA i numai caractere din
Europa de Vest.
Remarc: Putei folosi fie .htm sau .html ca extensie de fiier. Nu exist nici o diferen.
4. Vizualizai pagina HTML creat n browser.
Deschidei fiierul HTML salvat n browser-ul dumneavoastr preferat. Rezultatul va arta ca acesta:
Fig,3
Remarc: Pentru a deschide un fiier ntr-un browser executai dublu click pe fiier sau facei clic
dreapta i selectai Open With.
Editarea unui document HTML
3
Pentru efectuarea modificrilor este necesar de a deschide fiierul HTML n unul din editoarele de texte,
de exemplu n Notepad, dup care de a edita codul surs a documentului (fig. 4.).
Fig.4 Deschiderea documentului HTML pentru editare
Dac documentul este vizualizat cu ajutorul browser-ului Internet Explorer atunci documentul poate fi
editat prin alegerea opiunii View Source din meniul View. Dup salvarea modificrilor efectuate este suficient
de acionat butonul Refresh din bara cu meniuri din browser pentru vizualizarea documentului modificat.
Formatarea documentului
Definirea caracteristicilor de prezentare a informaiilor n cadrul documentului i este formatare.
n HTML se utilizeaz 6 niveluri de titlu, care pot fi specificate cu ajutorul etichetelor <Hn> i </Hn>,
unde n poate lua valori de la 1 la 6 i indic nivelul de titlu. Nivelul 1 este cel mai proeminent, iar nivelului 6 i
corespund cele mai mici i mai subiri caractere.
Tag-urile de titlu pot avea atributul align=tip, unde tip este unul din cuvintele center, left, right,
pentru stabilirea modului de aliniere a titlului.
Comentariile snt texte folosite pentru a explica codul html. Orice text cuprins ntre secvenele <!-
-i - - > se consider comentariu.
Spre deosebire de un editor obinuit de texte, HTML nu ine cont de lungimea textului, de returul de
car (Enter) i de numrul consecutiv de spaii. Acestea din urm vor fi afiate ca un singur spa iu. Browser-ul
afieaz din rind nou un text doar dac acesta este precedat de unul din marcajele: <P>, <BR>, <PRE>,
<DIV>, <BLOCKQUOTE>, <CENTER>.
a) Textul cuprins ntre tag-urile <P> i </P> se consider paragraf. Tag-ul <P>, accept de asemenea,
atributul align.
Exemplu:
<p align= " center " > acest text va fi aliniat la centru </p>
Class, type, style atribute utilizate pentru specificarea unui anumit stil de text.
n cazul n care tag-ul <p> este folosit fr atribute el nu necesit a fi nchis i are acelai efect ca i tag-ul
<br>.
b) Tag-ul <BR> realizeaz trecerea la o linie nou n paragraful curent. Este un tag singular.
c) A treia metod pentru ca rndurile textului s apar dup dorina utilizatorului este folosirea tag-urilor
<PRE> i </PRE>. Textul ncadrat ntre tag-urile <PRE> i </PRE> este afiat exact aa cum este scris, deci
este un text preformatat.
Folosirea perechii de tag-uri <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
.
4
Exemplu:
d) Pentru ca marginea din stnga a unui text s fie deplasat la dreapta la o anumit distan fa de marginea
paginii, acesta trebuie inclus ntre tag-urile <BLOCKQUOTE> i </BLOCKQUOTE>.
e) Deseori un bloc de text se formeaz cu ajutorul tag-urilor <DIV>, </DIV>. Tag-ul <DIV> poate avea
atributele align i nowrap (care interzice ntreruperea rndurilor de ctre browser). Un bloc <DIV></DIV>
poate include alte sublocuri. n acest caz, alinierea precizat de atributul align al blocului are effect asupra
tuturor subblocurilor incluse n blocul <DIV>.
Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este folosirea perechii de tag-
uri <div>...</div>. Acest tag are atributul align. Implicit alinierea este la stnga.
Exemplu:
5
f) Elementele cuprinse ntre tag-urile <CENTER> i </CENTER> snt auomat centrate.
Tag-urile <SPAN> i </SPAN> se folosesc cu acelai scop ca i tag-urile <DIV> i </DIV> cu
deosebirea c elemental ncadrat ntre ele nu se afieaz din rnd nou.
Blocul de text cuprins ntre etichetele <NOBR> i </NOBR> va fi afiat ntr-un rnd. Dac fereastra
browser-ului va fi micorat de utilizator se poate ntmpla ca textul s fie trunchiat.
Liniile orizontale.
ntr-o pagina Web pot fi inserate linii orizontale. Acestea sunt definite de tag-ul impar <hr>. Pentru a
configura o linie orizontal se utilizeaz urmatorele atribute ale tag-ului <hr>:
align - permite alinierea liniei orizontale. Valorile posibile sunt: left center, i right;
width - permite alegerea lungimii liniei poate primi valori n pixeli i n procente;
size - permite alegerea grosimii liniei poate lua valori in pixeli i in procente;
noshade - cand este prezent definete o linie fr umbr;
color - permite definirea culorii liniei.
Exemplu:
Formatarea caracterelor
6
Formatarea caracterelor const n specificarea atributelor individuale ale acestora, inclusiv: tipul
corpului de liter (font-ul), dimensiunea caracterelor, stilul etc.
n scopul formatrii caracterelor poate fi utilizat tag-ul par <font></font> care este caracterizat de
urmtoarele attribute:
face (precizeaz familia de caractere i poate avea ca valoare una sau mai multe constante delimitate
prin virgule, cum ar fi arial, serif, cursive, monospace, fantasy etc.);
color (precizeaz culoarea fontului);
size (specific mrimea caracterelor i poate avea ca valoare constantele 1,2,7 sau +1, +2,.. (mrind
astfel dimensiunea caracterelor fa de dimensiunea curent), sau -1, -2, (micornd astfel
dimensiunea caracterelor fa de dimensiunea curent));
weight (determin grosimea caracterelor, avnd valori posibile 100, 200, , 900). Respectiv 100 pentru
fontul cel mai subire i 900 pentru cel mai gros.
Exemplu:
O culoare poate fi precificat n dou moduri:

1. printr-un nume de culoare,
2. printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de constant este
format din 6 cifre hexazecimale precedate de semnul #. Primele dou cifre din cele ase reprezint valoarea lui
R, urmtoarele dou valoarea lui G i ultimele dou valoarea lui B.
Exemplu:
<font color=#FF0000> textul are culoarea rosie
</font>
Exemplul 2:
7
Este posibil ca browser-ul s nu poat afia anumite culori specificate prin valoare RGB, n acest caz, va
ncerca s genereze o culoare apropiat sau un fond texturat format din dou culori apropiate celei specificate;
se poate ajunge astfel la un fond care poate face textul vizibil.
Pentru a evita aceast situaie, este bine de a folosi aa numitele culori sigure Internet, care sunt afiate
la fel pe orice sistem. Aceste culori se obin prin atribuirea lui R, G i B uneia din valorile: 00, 33, 66, 99, CC
sau FF.
Exemplu:
8
n codul de mai sus a fost utilizat un tag nou i anume tag-ul singular <br> folosit pentru trecerea forat n
rnd nou.
Pentru reprezentarea indicilor superiori i inferiori se utilizeaz tagurile pare <sup>...</sup> i respectiv
<sub>...</sub>.
Exemplu:
...
Km<sup>2</sup> <br>
H<sub>2</sub>O
...
Rezultatul va fi urmtorul:
Pentru a pune n eviden un fragment de text, se utilizeaz stilurile. Acestea se mpart n dou categorii:
a) stilurile fizice, care stabilesc nfiarea exact a textului;
b) stilurile logice, care marchaz textul n funcie de semnificaia lui.
Stilurile fizice afieaz acelai text la fel ca orice program de navigare. Pentru stabilirea stilului fizic se
utilizeaz tag-urile:
<B>...</B> - pentru afiarea textului cu caractere aldine;
<I></I> - pentru afiarea textului cu caractere italice;
<U></U> - pentru afiarea textului cu caractere subliniate;
<TT></TT> - text cu caractere monospaiate;
<BIG></BIG> - text cu caractere mai mari cu o unitate dect cele curente;
<SMALL></SMALL> - text cu caractere mai mici cu o unitate dect cele curente;
<STRIKE></STRIKE> (sau <S></S>) text cu caractere tiate de o linie.
Exemplul 3:
9
Stiluri logice.
Stilurile logice depind de modul de configurare a programului de navigare i in cont de rolul textului n
cadrul paginii web. Pentru ele se utilizeaz urmtoarele marcaje:
<EM>...</EM> - text evideniat (de regul italic);
<STRONG>...</STRONG> - text important (de regul bold);
<KBD>...</KBD> - text cules de la tastatur (de regul, font cu grosime fix);
<CODE>...</CODE> - text de program pentru calculator (de regul, font cu grosime fix);
<DFN>...</DFN> - text-definiie (de regul, italic);
<VAR>...</VAR> - identificator de variabil;
<ADDRESS>...</ADDRESS> - text adres;
<CITE>...</CITE> - text-citat.
Exemplul 4:
10
Caractere speciale
Caracterele speciale i simbolurile care nu se gsesc, in mod obinuit, pe tastatur, pot fi inserate in text
prin secvene de cod speciale. Aceste caractere se regsesc intr-un set internaional de caractere cunoscut i sub
denumirea de ISOLatin-1 (ISO-8859-1).
Caracterele speciale sunt recunoscute de limbajul HTML datorit faptului c ncep cu semnul &
(ampersand) i se incheie cu semnul ; (punct i virgul).
Cele mai uzuale astfel de caractere au fost cuprinse sunt incluse n tabelul 1.1.
Codurile pentru caracterele speciale:

11
Tabelul 1.1
Una dintre modalitile de includere a semnelor diacritice romne ntr-un document html este codificarea
direct a lor prin &-consecutiviti (escape consecutiviti).
Atenie! &-consecutivitile se scriu doar cu minuscule. Unele browsere recunosc o &-consecutivitate
dac sfritul este marcat cu simbolul ;.
Liter
Codul &#258 &#259 &Acirc &acirc &Icirc &icirc &#350 &#351 &#354 &#355
Exemplul 5:
ANEXE
12
Tag-uri i atribute de structur
Tag-uri Semnificaia Comentarii
<Hn> </Hn>, unde n poate lua Nivel de titlu Nivelul 1 este cel mai proeminent
valori de la 1 la 6
<Hn Nivel de titlu aliniat Nivel de titlu aliniat
ALIGN=LEFT/CENTER/RIGHT>
<DIV> </DIV> Bloc de text Poate avea atributul NOWRAP
<DIV= LEFT/CENTER/RIGHT> Bloc de text aliniat
</DIV>
<CITE>.</CITE> Text-citat Se deosebete de textul obinuit.
De regul este cursiv
<BLOCKQUOTE> Text-citat Se deosebete de textul obinuit.
</BLOCKQUOTE> De regul este deplasat fa de
marginea paginii
<EM> </EM> Text evideniat De regul cursiv ( italic)
<STRONG> </STRONG> Text important De regul bold
<CODE> </CODE> Text de program pentru calculator De regul, font cu grosime fix
<KBD> </KBD> Text cules de la tastatur De regul, font cu grosime fix
<VAR> </VAR> Identificator de variabil
<DFN> </DFN> Text-definiie De regul, italic
<ADDRESS> </ADDRESS> Text adres
<BIG> </BIG> Text cu caractere mai mari cu o
unitate dect cele curente
<SMALL> </SMALL> Text cu caractere mai mici cu o
unitate dect cele curente
<BODY LEFTMARGIN =n>, Stabilete distana n pixeli dintre
unde n este numr natural marginea stng a ferestrei browser-
ului i marginea stng a
coninutului paginii
<BODY TOPMARGIN =n>, Stabilete distana n pixeli dintre
unde n este numr natural marginea de sus a ferestrei
browser-ului i marginea de sus a
coninutului paginii
<NOBR> </NOBR> Bloc de text afiat ntr-un singur
rnd
Tag-uri pentru fundal i culori

<BODY BACKGROUND=URL > Stabilete desenul utilizat ca fundal URL este adresa i numele
al documentului. fiierului grafic, a crui
imagine este utilizat ca
fondal.
<BODY Stabilete culoarea fundalului n1n2,n3n4,n5n6 snt numere
BGCOLOR=#n1n2n3n4n5n6> documentului. hexazecimale care determin
<BODY Stabilete culoarea textului intensitatea culorii rou, verde,
TEXT=#n1n2n3n4n5n6/culoare> respectiv albastru. Culoarea
<BODY Stabilete culoarea hiperlegturii- poate fi precizat i prin
LINK=#n1n2n3n4n5n6/culoare> text numele ei (red, blue, black,
<BODY Stabilete culoarea hiperlegturii- yellow, green, cyan, purple,
VLINK=#n1n2n3n4n5n6/culoare> text dup vizionarea documentului white, gray etc).
referit la aceast hiperlegtur.
<BODY Stabilete culoarea hiperlegturii-
ALINK=#n1n2n3n4n5n6/culoare> text active.
13
Tabel Culori
Cod Hexadecimal Cod Decimal
Nume culoare (en.)
R G B R G B
Culori cu fond Rosu
IndianRed CD 5C 5C 205 92 92
LightCoral F0 80 80 240 128 128
Salmon FA 80 72 250 128 114
DarkSalmon E9 96 7A 233 150 122
LightSalmon FF A0 7A 255 160 122
Crimson DC 14 3C 220 20 60
Red FF 00 00 255 0 0
FireBrick B2 22 22 178 34 34
DarkRed 8B 00 00 139 0 0
Culori cu fond Roz
Pink FF C0 CB 255 192 203
LightPink FF B6 C1 255 182 193
HotPink FF 69 B4 255 105 180
DeepPink FF 14 93 255 20 147
MediumVioletRed C7 15 85 199 21 133
PaleVioletRed DB 70 93 219 112 147
Culori cu fond Portocaliu
LightSalmon FF A0 7A 255 160 122
Coral FF 7F 50 255 127 80
Tomato FF 63 47 255 99 71
OrangeRed FF 45 00 255 69 0
DarkOrange FF 8C 00 255 140 0
Orange FF A5 00 255 165 0
Culori cu fond Galben
Gold FF D7 00 255 215 0
Yellow FF FF 00 255 255 0
LightYellow FF FF E0 255 255 224
LemonChiffon FF FA CD 255 250 205
LightGoldenrodYellow FA FA D2 250 250 210
PapayaWhip FF EF D5 255 239 213
Moccasin FF E4 B5 255 228 181
PeachPuff FF DA B9 255 218 185
PaleGoldenrod EE E8 AA 238 232 170
Khaki F0 E6 8C 240 230 140
14
DarkKhaki BD B7 6B 189 183 107
Culori cu fond Purpuriu (mov)
Lavender E6 E6 FA 230 230 250
Thistle D8 BF D8 216 191 216
Plum DD A0 DD 221 160 221
Violet EE 82 EE 238 130 238
Orchid DA 70 D6 218 112 214
Fuchsia FF 00 FF 255 0 255
Magenta FF 00 FF 255 0 255
MediumOrchid BA 55 D3 186 85 211
MediumPurple 93 70 DB 147 112 219
BlueViolet 8A 2B E2 138 43 226
DarkViolet 94 00 D3 148 0 211
DarkOrchid 99 32 CC 153 50 204
DarkMagenta 8B 00 8B 139 0 139
Purple 80 00 80 128 0 128
Indigo 4B 00 82 75 0 130
Cod Hexadecimal
Nume culoare (en.) Cod Decimal RGB
RGB
Culori cu fond Verde
GreenYellow AD FF 2F 173 255 47
Chartreuse 7F FF 00 127 255 0
LawnGreen 7C FC 00 124 252 0
Lime 00 FF 00 0 255 0
LimeGreen 32 CD 32 50 205 50
PaleGreen 98 FB 98 152 251 152
LightGreen 90 EE 90 144 238 144
MediumSpringGreen 00 FA 9A 0 250 154
SpringGreen 00 FF 7F 0 255 127
MediumSeaGreen 3C B3 71 60 179 113
SeaGreen 2E 8B 57 46 139 87
ForestGreen 22 8B 22 34 139 34
Green 00 80 00 0 128 0
DarkGreen 00 64 00 0 100 0
YellowGreen 9A CD 32 154 205 50
OliveDrab 6B 8E 23 107 142 35
Olive 80 80 00 128 128 0
DarkOliveGreen 55 6B 2F 85 107 47
15
Aquamarine 7F FF D4 127 255 212
MediumAquamarine 66 CD AA 102 205 170
DarkSeaGreen 8F BC 8F 143 188 143
LightSeaGreen 20 B2 AA 32 178 170
DarkCyan 00 8B 8B 0 139 139
Teal 00 80 80 0 128 128
Culori cu fond Albastru
Aqua 00 FF FF 0 255 255
Cyan 00 FF FF 0 255 255
LightCyan E0 FF FF 224 255 255
PaleTurquoise AF EE EE 175 238 238
Turquoise 40 E0 D0 64 224 208
MediumTurquoise 48 D1 CC 72 209 204
DarkTurquoise 00 CE D1 0 206 209
CadetBlue 5F 9E A0 95 158 160
SteelBlue 46 82 B4 70 130 180
LightSteelBlue B0 C4 DE 176 196 222
PowderBlue B0 E0 E6 176 224 230
LightBlue AD D8 E6 173 216 230
SkyBlue 87 CE EB 135 206 235
LightSkyBlue 87 CE FA 135 206 250
DeepSkyBlue 00 BF FF 0 191 255
DodgerBlue 1E 90 FF 30 144 255
CornflowerBlue 64 95 ED 100 149 237
MediumSlateBlue 7B 68 EE 123 104 238
RoyalBlue 41 69 E1 65 105 225
Blue 00 00 FF 0 0 255
MediumBlue 00 00 CD 0 0 205
DarkBlue 00 00 8B 0 0 139
Navy 00 00 80 0 0 128
MidnightBlue 19 19 70 25 25 112
Cod Hexadecimal
Nume culoare (en.) Cod Decimal RGB
RGB
Culori cu fond Maro
Cornsilk FF F8 DC 255 248 220
BlanchedAlmond FF EB CD 255 235 205
Bisque FF E4 C4 255 228 196
NavajoWhite FF DE AD 255 222 173
16
Wheat F5 DE B3 245 222 179
BurlyWood DE B8 87 222 184 135
Tan D2 B4 8C 210 180 140
RosyBrown BC 8F 8F 188 143 143
SandyBrown F4 A4 60 244 164 96
Goldenrod DA A5 20 218 165 32
DarkGoldenrod B8 86 0B 184 134 11
Peru CD 85 3F 205 133 63
Chocolate D2 69 1E 210 105 30
SaddleBrown 8B 45 13 139 69 19
Sienna A0 52 2D 160 82 45
Brown A5 2A 2A 165 42 42
Maroon 80 00 00 128 0 0
Culori cu fond Alb
White FF FF FF 255 255 255
Snow FF FA FA 255 250 250
Honeydew F0 FF F0 240 255 240
MintCream F5 FF FA 245 255 250
Azure F0 FF FF 240 255 255
AliceBlue F0 F8 FF 240 248 255
GhostWhite F8 F8 FF 248 248 255
WhiteSmoke F5 F5 F5 245 245 245
Seashell FF F5 EE 255 245 238
Beige F5 F5 DC 245 245 220
OldLace FD F5 E6 253 245 230
FloralWhite FF FA F0 255 250 240
Ivory FF FF F0 255 255 240
AntiqueWhite FA EB D7 250 235 215
Linen FA F0 E6 250 240 230
LavenderBlush FF F0 F5 255 240 245
MistyRose FF E4 E1 255 228 225
Culori cu fond Gri
Gainsboro DC DC DC 220 220 220
LightGrey D3 D3 D3 211 211 211
Silver C0 C0 C0 192 192 192
DarkGray A9 A9 A9 169 169 169
Gray 80 80 80 128 128 128
DimGray 69 69 69 105 105 105
17
LightSlateGray 77 88 99 119 136 153
SlateGray 70 80 90 112 128 144
DarkSlateGray 2F 4F 4F 47 79 79
Black 00 00 00 000
Exemplul: crearea unei pagine cu fundalul de culoare aqua i textul de culoarea #FF2233.
Tag-uri pentru formatare

<B> </B> text cu caractere ngroate (bold)
<I> </I> Text cu caractere nclinate (italic)
<U> </U> Text cu caractere subliniate Nu ntotdeauna este susinut
<STRIKE> </STRIKE> sau <S> Text cu caractere tiate de o linie Nu ntotdeauna este susinut
</S>
<TT> </TT> Text cu caractere monospaiate Caractere de lime fix
<PRE> </PRE> Text preformatat Textul este afiat exact aa cum
cum este scris
<CENTER> </CENTER> Texte i elemente grafice centrate
<BLINK> i </BLINK> Text intermitent
<FONT FACE=nume> Precizeaz familia de caractere Poate avea ca valoare una sau mai
</FONT> (fontul) multe constante delimitate prin
18
virgule, cum ar fi arial, serif,
cursive, monospace, fantasy etc.
<FONT Determin intensitatea culorilor Culoarea poate fi precizat i prin
COLOR=#n1n2n3n4n5n6> rou, verde, respectiv albastru al numele ei (red, blue, black, yellow,
</FONT> unde n1n2,n3n4,n5n6 snt caracterelor. green, cyan, purple, white, gray
numere hexazecimale etc).
<FONT SIZE=n> </FONT> Mrimea caracterelor n poate lua valori de la 1 la 7
<FONT SIZE=n> </FONT> Mrete sau micoreaz n poate lua valori de la 1 la 7 sau
dimensiunea caracterelor fa de de la -7 la -1
dimensiunea curent
<FONT WEIGHT=n> Determin grosimea caracterelor Valori posibile ale lui n:100, 200,
</FONT> ,900
<BASEFONT WEIGHT=n> Stabilete dimensiunea standard a n poate lua valori de la 1 la 7.
caracterelor Valoarea predefinit este 3.
Sarcini pentru lucrul independent.

1) Creai o pagin web cu fundalul de culoare aqua, textul de culoare green, coninutul paginii fiind afiat la
distana de 20 de pixeli de la marginea stng i 30 de pixeli de la marginea de sus a ferestrei browser-ului.
2) Creai o pagin web cu fundalul de culoare blue, textul de culoare whitet, coninutul paginii fiind afiat la
distana de 40 de pixeli de la marginea stng i 20 de pixeli de la marginea de sus a ferestrei browser-
ului.Aliniai la centru titlul unei instituii de nvmnt, nivelul titlului fiind egal cu 2.Despr i i-l de restul
coninutului printr-o linie orizontal roie cu grosimea 3 pixeli i lungimea 50% din limea ferestrei browser-
ului.
3) Creai o pagin web pentru un magazin, astfel nct denumirea magazinului s apar ca titlu de nivelul 1 cu
culoare neagr. Mai jos se vor afia produsele unui stoc. Denumirea stocului va avea nivelul 3, iar produsele
lui vor fi prezentate ca un text performatat. Denumirea magazinului va fi delimitat de stoc printr-o linie
orizontal de grosimea 4 pixeli i de culoare albastr, aliniat la stnga i ocupnd 80% din l imea ferestrei
browser-ului.
4) Creai o pagin web care va afia dou teoreme de congruen a triunghiurilor. Cuvntul Teorema va fi scris
cu un titlu de nivelul 3, avnd culoare neagr, caractere ngroate i subliniate. Cele dou enunuri vor fi
nclinate i delimitate unul de altul de o linie roie orizontal de grosimea 2 pixeli, aliniat la centru, avnd
lungimea 70% din limea ferestrei browser-ului.
5) Creai o pagin web care va afia n centrul paginii formula:
a) a b 2 a 2 2ab b 2
b) a1 a 2 a3 a12 a 22 a32 2a1a 2 2a1a3 2a 2 a3
2
c) a b a b , pentru orice numere nenule a i b.

6) Creai o pagin web care va afia o poezie cu titlul de culoare roie, centrat, pe fundal galben cu nivelul de
titlu 3, desprit de restul textului cu o linie de grosimea 5 pixeli i lungimea 50% din l imea ferestrei browser-
ului. Caracterele textului vor fi ngroate i nclinate.
19

Lucrare de Laborator NR - 1

Î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

Lucrare de Laborator NR - 1

Încărcat de

Drepturi de autor:

Formate disponibile

Lucrare de laborator nr.

Editarea unui document HTML

Fig.4 Deschiderea documentului HTML pentru editare

O culoare poate fi precificat n dou moduri:

Codurile pentru caracterele speciale:

Tag-uri pentru fundal i culori

Tag-uri pentru formatare

Sarcini pentru lucrul independent.

c) a b a b , pentru orice numere nenule a i b.

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