Colegiul National Ecaterina Teodoroiu din Targu Jiu

PROGRAMARE WEB

Adrian Runceanu
 copyright@[Link]

Câteva precizări
Bibliografie:

1. Brian Behlandorf , Running a Perfect Web Site with Apache, Second

Edition, Macmillan Computer Publishing,
[Link]
2. Mihaela Brut, Sabin Buraga, Prezentări multimedia pe Web, Polirom,
Iasi, 2003
3. Sabin Buraga, Aplicaţii Web la cheie. Studii de caz implementate în PHP,
Polirom, 2003
4. Sabin Buraga, Proiectarea siturilor Web – ediţia a doua, Polirom, Iasi,
2005
5. Traian Anghel, Programare Web, Editura Polirom, Iasi, 2007
6. Luke Welling, Laura Thomson, Dezvoltarea aplicatiilor Web cu PHP si
MySQL, Editura Teora, Bucuresti, 2005
7. Larry Ullman, PHP si MySQL pentru site-uri dinamice, Editura Teora,
Bucuresti, 2006
04.10.2016 Tehnologii Web 2
 copyright@[Link]

Câteva precizări
Bibliografie(continuare):

8. Adrian Runceanu, Mihaela Runceanu –

Tehnologii web – îndrumar de laborator,
Editura Academica Brâncuşi, 2009, Tg-Jiu

04.10.2016 Tehnologii Web 3

 copyright@[Link]

Câteva precizări
Referinţe electronice:

9. ***, [Link]
10. ***, [Link]
11. ***, [Link]
12. ***, [Link]
13. ***, [Link]
14. ***, [Link]
15. ***, [Link]

04.10.2016 Tehnologii Web 4

 copyright@[Link]

Câteva precizări

Suportul de curs - varianta electronică

disponibilă pe site-ul:

[Link]/adrian

Notă: Actualizarea site-ului se face săptămânal.

04.10.2016 Tehnologii Web 5

1. Noţiuni introductive
despre tehnologii web
 copyright@[Link]

Noţiuni introductive
Tehnologiile utilizate în aplicaţiile Web
reprezintă în general, acele limbaje de programare
utilizate la crearea de site-uri web complexe,
interactive, al căror concept presupune stăpânirea
cât mai detaliată a unor limbaje de scripting sau de
programare web şi baze de date.
 În categoria tehnologii Web se pot include:
1. o multitudine de limbaje de programare web,
cum ar fi PHP, JavaScript, ASP, etc.
2. iar ca baze de date pot fi utilizate MySQL,
MsSQL, Access, ORACLE, etc.
04.10.2016 Tehnologii Web 7
 copyright@[Link]

Noţiuni introductive
 Câteva aplicaţii Web întalnite mai des sunt:
 portal-uri
 forum-uri
 magazine virtuale
 formulare de înscriere
 licitaţii on-line, etc.
 Acum câţiva ani, tehnologiile Web erau folosite doar
de marile companii datorită, în principal, costurilor
ridicate ale licenţelor programelor de dezvoltare.
 În prezent, datorită dezvoltării tot mai accentuate a
soluţiilor Open Source, oricine îşi poate permite
realizarea de aplicaţii web.
04.10.2016 Tehnologii Web 8
 copyright@[Link]

Noţiuni introductive
Se pot enumera o serie de tehnologii folosite mai
des în programarea aplicaţiilor web dinamice, şi
anume:

 html - Apărut la începutul anilor '90, datorită lipsei

unui limbaj universal care să permită publicarea
informaţiei la nivel global, html a determinat
dezvoltarea spectaculoasă a Internetului.
- Marcajele de tip html din cadrul documentului
spun browser-ului cum să afişeze conţinutul util
al fişierului;
04.10.2016 Tehnologii Web 9
 copyright@[Link]

Noţiuni introductive
 Xhtml - reprezintă prescurtarea de la eXtensible
HyperText Markup Language (denumirea oficiala a
standardului).
- Practic este un înlocuitor modern al mai
vechiului limbaj html;

04.10.2016 Tehnologii Web 10

 copyright@[Link]

Noţiuni introductive
 CSS - Fişierul CSS (cascading style sheet - foi de stil
în cascadă).
– Un fişier CSS este un fişier text cu extensia ".css"
definind stiluri pentru paginile html.

– Fişierele CSS permit stilizarea în bloc a

documentelor html cu un efort semnificativ mai
mic decât în cazul stilizării elementelor de pagină
în cadrul fiecărui document html în parte, prin
intermediul atributelor tag-urilor.

04.10.2016 Tehnologii Web 11

 copyright@[Link]

Noţiuni introductive
 JAVASCRIPT - este un limbaj de scripting dezvoltat la
origine de Netscape, permiţând scrierea de secvenţe
de program care se execută la apariţia unui eveniment
utilizator.
 FLASH - este un mediu de lucru dezvoltat de compania
Macromedia; cu ajutorul FLASH-ului se poate realiza
un design de calitate, conţinut interactiv, animaţii
profesionale.
 MYSQL - este un sistem de gestiune a bazelor de date
relaţionale, fiind o componentă cheie a limbajului
PHP.
04.10.2016 Tehnologii Web 12
 copyright@[Link]

Noţiuni introductive
 CGI - Common Gateway Interface - sunt script-uri
scrise în orice limbaj de programare indiferent dacă
sunt compilate sau interpretate, script-uri care sunt
executate pe server;

 ISAPI - Internet Server API - reprezintă alternativa

celor de la Microsoft la CGI (Common Gateway
Interface), rulabilă bineînţeles pe platforme Windows.
- Acesta poate fi scris în orice limbaj cu suport pentru
dll-uri.

04.10.2016 Tehnologii Web 13

 copyright@[Link]

Noţiuni introductive
 PHP şi ASP apărute în 1994, respectiv 1996, sunt
două limbaje puternice care au adus o schimbare în
design-ul aplicaţiilor web.
– Acestea, deşi sunt diferite, au totuşi o serie de
similarităţi:
• ambele sunt interpretate,
• ambele generează scripturi (.php respectiv .asp), care
pot fi combinate cu html, date de tip text, etc.
– Limbajele oferă suport şi pentru lucrul cu baze de
date (MySQL, MsSQL, PostgreSQL, Oracle) - de
fapt sunt intens folosite în acest sens.

04.10.2016 Tehnologii Web 14

 copyright@[Link]

Noţiuni introductive
 PHP & ASP (continuare)

- Limbajul ASP nu este un concept nou ci se bazează pe

limbajele VBScript şi JScript.

- Principalul dezavantaj al acestor doua limbaje este

viteza.

- Acestea sunt lente deoarece fiecare accesare

presupune procesarea şi interpretarea lor şi nu pot
construi controale reutilizabile.
04.10.2016 Tehnologii Web 15
 copyright@[Link]

Noţiuni introductive
 JSP - Java Server Pages - reprezintă o tehnologie de
design al aplicaţiilor web ce permite crearea acestor
aplicaţii independente de platformă.

Tehnologia se bazează pe limbajul de programare

Java şi marcatori XML

Avantajul JSP este reprezentat de administrarea

facilă, independentă de platformă, separarea
logicii aplicaţiei de partea de interfaţă utilizator,
performanţa
04.10.2016 Tehnologii Web 16
 copyright@[Link]

Noţiuni introductive

[Link] - este o nouă tehnologie pentru

aplicaţii web elaborată de Microsoft, dar
despre care nu se poate spune dacă este o
urmare a ASP-ului, cu toate că păstrează
compatibilitatea cu acesta.

04.10.2016 Tehnologii Web 17

 copyright@[Link]

Concluzii
Există o serie de alte medii pentru
proiectarea aplicaţiilor web, fiecare cu avantajele
şi dezavantajele sale, dar cu un singur scop
crearea unor aplicaţii web:
interactive
securizate
cu timp de răspuns cât mai redus
dar care să ofere şi o interfaţă grafică plăcută

04.10.2016 Tehnologii Web 18

 copyright@[Link]

Limbajul HTML
(partea I)

04.10.2016 Tehnologii Web 19

 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 20

 copyright@[Link]

1. Limbajul HTML
• HTML este prescurtarea de la HyperText
Markup Language, limbajul utilizat în
protocolul World Wide Web pentru
descrierea hipertextelor.

• HTML nu este un limbaj de programare

propriu-zis, ci doar un limbaj de descriere,
conţinând elemente ce permit construirea
paginilor Web.

04.10.2016 Tehnologii Web 21

 copyright@[Link]

1. Limbajul HTML
Caracteristicile limbajului HTML:

1. independenta de platforma - modul de afisare al

unui document este acelasi, indiferent de
computerul pe care se realizeaza afisarea
2. structurarea formatarii
3. posibilitatile hypertext - orice cuvant, imagine sau
alt element al documentului vizualizat de utilizator
poate face referinta la un alt document, ceea ce
usureaza navigarea in cadrul aceluiasi document
sau intre documente diferite
04.10.2016 Tehnologii Web 22
 copyright@[Link]

1. Limbajul HTML
• Documentele HTML sunt exclusiv de tip
text (ASCII); prin urmare ele pot fi editate
direct, prin comenzi specifice sistemului de
operare folosit.
• De exemplu, pentru crearea unui
document HTML în Windows se poate
utiliza unul din editoarele de texte incluse
în sistemul de operare (Notepad,
Wordpad) sau orice alt editor de texte.

04.10.2016 Tehnologii Web 23

 copyright@[Link]

1. Limbajul HTML
• Documentele descrise în HTML pot fi vizualizate cu
ajutorul unor aplicaţii speciale denumite browser-e,
care lucrează pe diferite tipuri de sisteme de calcul;
– prin urmare, documentele HTML sunt
independente de platforma de lucru.

• HTML utilizează pentru descrierea documentelor

Web etichete (denumite şi tag-uri) specifice pentru
fiecare element descris;
– etichetele stabilesc atât structura documentului,
cât şi aspectul acestuia
04.10.2016 Tehnologii Web 24
 copyright@[Link]

1. Limbajul HTML

• O etichetă (tag) este un identificator care

furnizează browser-ului instrucţiuni de
formatare a documentului.

• Pentru a fi delimitate, etichetele HTML sunt

încadrate între paranteze unghiulare (‘<’
‘>’).

04.10.2016 Tehnologii Web 25

 copyright@[Link]

1. Structura unui document html

Un document HTML este delimitat de perechea de

etichetele <html> şi </html> şi este constituit din:

a) Antetul documentului, delimitat de etichetele

<head> şi </head>, care conţine informaţii
generale referitoare la document, cum ar fi titlul
documentului, autorul acestuia, versiunea
documentului, etc.
b) Corpul documentului, care conţine textul propriu-
zis al documentului, precum şi elementele
specifice de descriere a formatului acestuia.
04.10.2016 Tehnologii Web 26
 copyright@[Link]

1. Structura unui document html

• În antet este recomandat să precizaţi titlul

documentului, care va fi afişat în bara titlu a
ferestrei browser-ului.

• Pentru a preciza titlul documentului, care nu

poate depăşi 64 de caractere, se utilizează în
secţiunea antet etichetele pereche <title> şi
</title>, între care se scrie titlul
documentului.

04.10.2016 Tehnologii Web 27

 copyright@[Link]

1. Structura unui document html

De exemplu:
Putem scrie aceste etichete în aplicaţia Notepad:

<html>

<head>
<title> Introducere in limbajul html </title>
</head>
....

04.10.2016 Tehnologii Web 28

 copyright@[Link]

1. Structura unui document html

Apoi putem vizualiza rezultatul în (de exemplu)
browser-ul Mozilla Firefox:

04.10.2016 Tehnologii Web 29

 copyright@[Link]

1. Structura unui document html

Corpul documentului poate fi delimitat de:

etichetele <body> şi </body>

sau (în cazul în care este descrisă structura

cadrelor din document) de etichetele pereche
<frameset> şi </frameset>.

04.10.2016 Tehnologii Web 30

 copyright@[Link]

1. Structura unui document html

Astfel, structura generală a unui document HTML
poate fi:
<html>
<head>
. . . antetul documentului . . .
</head >
<body>
. . . corpul documentului . . .
</body>
</html>

04.10.2016 Tehnologii Web 31

 copyright@[Link]

1. Structura unui document html

Exemplu:
Pasul 1: Lansaţi în execuţie editorul de texte Notepad şi
introduceţi următorul text, care reprezintă descrierea în limbaj
html a unei pagini Web foarte simple:
<html>
<head>
<title> Prima mea pagina Web </title>
</head>
<body bgcolor=GREEN text=BLACK>
<i> <b>
Scriu in fereastra browser-ului un text negru pe fond verde...
</i> </b>
</body>
</html>
04.10.2016 Tehnologii Web 32
 copyright@[Link]

1. Structura unui document html

Pasul 2: Salvaţi documentul cu numele [Link],

utilizând opţiunea Save As din meniul File!

Pasul 3: Lansaţi în execuţie Internet Explorer.

Vizualizaţi pagina Web creată, apelând opţiunea
Open . . . din meniul File al ferestrei browser-ului
(în fereastra de dialog care va apărea pe ecran
trebuie să specificaţi complet pagina pe care doriţi
să o vizualizaţi - deci introduceţi calea, numele şi
extensia fişierului ce o conţine).

04.10.2016 Tehnologii Web 33

 copyright@[Link]

1. Structura unui document html

Rezultatul este următorul:

04.10.2016 Tehnologii Web 34

 copyright@[Link]

1. Structura unui document html

Elementul <body> admite următoarele atribute

BACKGROUND=URL
• UNIFORM RESOURCE LOCATOR (URL) - adresă a unei
informaţii existente pe Web = standard de identificare
şi accesare a resurselor din Internet
• URL este un şir de caractere ce reprezintă adresa Web
a unei imagini care va fi utilizată de către browser ca
fundal (background) pentru document.
• Dacă imaginea nu ocupa întreaga zonă din fereastra
browser-ului destinată vizualizării paginii respective,
ea va fi multiplicată, caTehnologii
04.10.2016
într-un Web
mozaic. 35
 copyright@[Link]

1. Structura unui document html

BGCOLOR=culoare
• Atributul BGCOLOR (BackGround COLOR)
stabileşte culoarea fundalului (culoarea zonei din
fereastra browser-ului în care este vizualizat
documentul).
În HTML culorile se pot specifica în două moduri:

1. utilizând denumiri predefinite asociate unor culori

(de exemplu RED semnificând roşu, GREEN verde,
BLUE albastru, etc.);

04.10.2016 Tehnologii Web 36

 copyright@[Link]

1. Structura unui document html

2. "construind" culori proprii prin combinarea a trei

culori de baza - roşu, verde şi albastru (modelul RGB).

 În acest caz, specificarea unei culori se face

indicând în ordinea roşu, verde, albastru trei valori
hexazecimale cuprinse între 00 şi FF, câte una
pentru fiecare culoare de bază, astfel: #rrggbb.
 Se poate specifica culoarea roşie fie prin denumirea
predefinită: BGCOLOR=RED, fie utilizând valoarea
RGB: BGCOLOR=#FF0000.

04.10.2016 Tehnologii Web 37

 copyright@[Link]

1. Structura unui document html

TEXT = culoare
• Atributul TEXT stabileşte culoarea textului.

LINK = culoare
• Atributul LINK stabileşte culoarea cu care vor
fi marcate în text link-urile nevizitate.

04.10.2016 Tehnologii Web 38

 copyright@[Link]

1. Structura unui document html

VLINK = culoare

• Atributul VLINK stabileşte culoarea cu care vor

fi marcate în text link-urile vizitate.

ALINK = culoare
• Atributul ALINK stabileşte culoarea cu care va
fi marcat în text link-ul activ (cel asupra căruia
este plasat cursorul mouse-ului).

04.10.2016 Tehnologii Web 39

 1. Structura unui document html

EXERCIŢIU:

Editaţi şi vizualizaţi următoarea pagină

Web, în care acelaşi text este scris pe un
fond gri în nuanţe care variază de la negru
către alb.

04.10.2016 Tehnologii Web 40

 copyright@[Link]

<html>
<head> <title> Test de culoare </title> </head>
<body bgcolor=#777777>
<font COLOR=#000000> Test de culoare </font>
<font COLOR=#111111> Test de culoare </font>
<font COLOR=#222222> Test de culoare </font>
<font COLOR=#333333> Test de culoare </font>
<font COLOR=#444444> Test de culoare </font>
<font COLOR=#555555> Test de culoare </font>
<font COLOR=#666666> Test de culoare </font>
<font COLOR=#777777> Test de culoare </font>
<font COLOR=#888888> Test de culoare </font>
<font COLOR=#999999> Test de culoare </font>
<font COLOR=#AAAAAA> Test de culoare </font>
<font COLOR=#BBBBBB> Test de culoare </font>
<font COLOR=#CCCCCC> Test de culoare </font>
<font COLOR=#DDDDDD> Test de culoare </font>
<font COLOR=#EEEEEE> Test de culoare </font>
<font COLOR=#FFFFFF> Test de culoare </font>
</body>
</html>
04.10.2016 Tehnologii Web 41
 1. Structura unui document html
Comentarii HTML
În cadrul unui document este bine să inserati
comentarii, pe care browser-ul nu le va afisa, dar care
pot fi utile celor care citesc sau editeaza documenrul.
Comentariile HTML incep cu <! şi se termina cu ->.
De exemplu,
<! Acesta e un comentariu. Browser-ul nu îl "vede"! ->

Comentariile pot fi inserate oriunde în document!

Ce se întâmplă dacă greşim ?
Nimic! Mai exact, nimic grav! Browser-ele ignoră
elementele care nu respectă sintaxa HTML şi nu le
interpretează.
04.10.2016 Tehnologii Web 42
 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 43

 copyright@[Link]

2. Formatarea textului
Formatarea textului care apare în corpul unui document
HTML se poate face la:
1. nivel de bloc (block-level)
2. sau la nivel de caracter (text-level sau inline)
Diferenţele principale dintre cele două tipuri de formatare
sunt:
• elementele de formatare la nivel de bloc pot conţine alte
elemente de formatare (la nivel de bloc sau la nivel de
caracter), în timp ce elementele de formatare la nivel de
caracter conţin doar text sau alte elemente de formatare
la nivel de caracter;
• elementele de formatare la nivel de bloc încep de obicei
de la linie nouă.
04.10.2016 Tehnologii Web 44
 copyright@[Link]

2. Formatarea textului
• Gruparea mai multor elemente HTML la nivel de
bloc se realizează cu ajutorul etichetelor <div> şi
</div>.
• Pentru gruparea mai multor elemente dintr-un
bloc la nivel de caracter (inline) se utilizează
perechea de etichete <span> şi </span>.
• Gruparea mai multor elemente prin <div> sau
<span> va fi deosebit de utilă dacă veţi apela la
facilităţile oferite de stilurile de formatare text
(stilurile CSS), deoarece veţi putea aplica acelaşi
stil simultan tuturor elementelor din grup.
04.10.2016 Tehnologii Web 45
 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive.
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 46

 copyright@[Link]

[Link] paragrafelor
• În tehnoredactare, prin paragraf se înţelege o zonă
de text cuprinsă între două caractere de trecere la
linie noua denumite NewLine sau Enter.
• În HTML, delimitarea paragrafelor se realizează cu
ajutorul etichetei <p>, eticheta de sfârşit </p> fiind
opţională.
<p> Paragraful 1 </p>
Descriere: <p> Paragraful 2 </p>
...

Efect: Paragraful 1
Paragraful 2
...

04.10.2016 Tehnologii Web 47

 copyright@[Link]

[Link] paragrafelor

Cel mai utilizat atribut admis de eticheta

<p> este align, care stabileşte modul de
aliniere stânga - dreapta a textului
paragrafului.

align = LEFT | CENTER | RIGHT | JUSTIFY

04.10.2016 Tehnologii Web 48

 copyright@[Link]

[Link] paragrafelor
Se observă că atributul align admite patru valori
predefinite:
LEFT - textul este aliniat la marginea din stânga
RIGHT - textul este aliniat la marginea din dreapta
CENTER - textul este centrat (plasat la egală distanţă de
marginea din stânga şi cea din dreapta)
JUSTIFY - textul este aliniat şi la stânga şi la dreapta (prin
mărirea spaţiului între cuvinte)
Valoarea implicită a modului de aliniere a textului
depinde de direcţia acestuia:
 dacă textul este scris de la stânga la dreapta, valoarea
implicită a modului de aliniere este LEFT
 dacă textul este scris de la dreapta la stânga, valoarea
implicită a modului de aliniere este RIGHT
04.10.2016 Tehnologii Web 49
 copyright@[Link]

[Link] paragrafelor
Exemplu:
Descriere:
<p align=CENTER> Alinierea paragrafelor </p>
<p align=LEFT> Primul paragraf este aliniat la stânga </p>
<p align=RIGHT> Al doilea paragraf este aliniat la dreapta
</p>
<p align=JUSTIFY> Al treilea paragraf este aliniat la stânga şi
la dreapta, prin mărirea spatiilor dintre cuvintele de pe aceeaşi
linie. </p>
<p> Ultimul paragraf utilizează modul implicit de aliniere - în
cazul nostru stânga, deoarece direcţia textului este LTR. </p>

04.10.2016 Tehnologii Web 50

 copyright@[Link]

[Link] paragrafelor

Efect:
Alinierea paragrafelor
Primul paragraf este aliniat la stânga
Al doilea paragraf este aliniat la dreapta
Al treilea paragraf este aliniat la stânga şi la dreapta,
prin mărirea spatiilor dintre cuvintele de pe aceeaşi
linie.
Ultimul paragraf utilizează modul implicit de aliniere -
în cazul nostru Stânga, deoarece direcţia textului este
LTR.

04.10.2016 Tehnologii Web 51

 copyright@[Link]

[Link] paragrafelor
Pentru a stabili acelaşi mod de aliniere pentru
mai multe paragrafe, trebuie să le grupăm într-un
singur bloc, cu ajutorul etichetei <div>:

<div align=”RIGHT”>
<p> . . . Primul paragraf . . . </p>
<p> . . . al doilea paragraf . . . </p>
<p> . . . al treilea paragraf . . . </p>
</div>

04.10.2016 Tehnologii Web 52

 copyright@[Link]

[Link] paragrafelor

Observatie:
• Nu utilizaţi etichete <p> </p> fără conţinut,
deoarece majoritatea browser-elor le ignoră.

• Dacă doriţi să inseraţi într-un document

HTML o linie vidă, utilizaţi eticheta <br/>.
• Aceasta va genera un marcaj de sfârşit de
linie (caracterele ASCII Carriage Return / Line
Feed).
04.10.2016 Tehnologii Web 53
 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 54

 copyright@[Link]

2.2. Utilizarea paragrafelor titlu

Documentele HTML pot fi structurate pe şase niveluri,
existând şase etichete care definesc nivelul paragrafului
titlu în structura documentului:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Etichetele de sfârşit sunt obligatorii.
• Nivelul delimitat de etichetele <h1> şi </h1> este cel
mai important, iar nivelul delimitat de etichetele
<h6> şi </h6> cel mai puţin important.
• Browser-ul vizualizează de obicei paragrafele titlu mai
importante cu litere mai mari decât cele mai puţin
importante.
04.10.2016 Tehnologii Web 55
 copyright@[Link]

2.2. Utilizarea paragrafelor titlu

Exemplu
<html>
<head> <title> Titlu </title> </head>
<body>
<h1> Internet si retele de calculatoare </h1>
<p> În acest document discutam despre INTERNET</p>
<h2> Retele de calculatoare </h2>
<p> În aceasta secţiune analizam principalele tipuri de retele </p>
<h3> Retea de tip BUS </h3>
<p> Retea de tip TOKEN-RING</p>
<h4> Retea de tip magistrala </h4>
<p> Protocol TCP/IP </p>
<h5> Configurarea modem-ului</h5>
<p> Conectarea la distanta ca terminal </p>
<h6> Aplicatia TELNET</h6>
<p> Limbajul html </p>
<p> . . . </p>
</body>
</html>
04.10.2016 Tehnologii Web 56
 copyright@[Link]

2.2. Utilizarea paragrafelor titlu

Efect: h1
Internet si retele de calculatoare

În acest document discutam despre INTERNET

Retele de calculatoare

În aceasta sectiune analizam principalele tipuri de

retele
Retea de tip BUS

Retea de tip TOKEN-RING

Retea de tip magistrala

Protocol TCP/IP
Configurarea modem-ului h6
Conectarea la distanta ca terminal

Aplicatia TELNET

Limbajul html

...

04.10.2016 Tehnologii Web 57

 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 58

 copyright@[Link]

2.3. Formatarea la nivel de caracter

Un font este caracterizat de urmatoarele atribute:

 culoare (stabilita prin atributul color)
 tipul sau stilul (stabilit prin atributul face)
 marimea (definita prin atributul size)
 marimea in puncte tipografice (stabilita prin
atributul point-size)
 grosime (definita prin atributul weight)
Toate aceste atribute apartin etichetei <font>, care
permite inserarea de blocuri de texte
personalizate.
04.10.2016 Tehnologii Web 59
 copyright@[Link]

2.3. Formatarea la nivel de caracter

Precizarea informaţiilor referitoare la fontul

utilizat de browser pentru vizualizarea
textului se realizează cu ajutorul etichetelor
pereche <font> şi </font>.

Dacă în document nu sunt precizate nici un

fel de informaţii referitoare la font, browser-
ul va utiliza fontul său implicit.

04.10.2016 Tehnologii Web 60

 copyright@[Link]

2.3. Formatarea la nivel de caracter

Atributele admise de eticheta <font> sunt:
SIZE = valoare

stabileşte dimensiunea caracterelor.

• Valoarea dimensiunii fontului poate fi specificată:
– în mod absolut (un număr natural cuprins între 1 şi 7)
– sau relativ la dimensiunea curentă a caracterelor:
• dacă valoarea este +n, caracterele vor fi cu n mărimi mai
mari
• dacă valoarea este -n, caracterele vor fi cu n mărimi mai
mici
• Dimensiunea efectivă cu care sunt vizualizate
caracterele depinde de browser.
04.10.2016 Tehnologii Web 61
 copyright@[Link]

2.3. Formatarea la nivel de caracter

COLOR = culoare
stabileşte culoarea textului.

FACE = listă_fonturi
• defineşte o listă de fonturi separate prin virgulă,
dintre care browser-ul îl va alege pe primul
disponibil în ordinea preferinţelor.
• Dacă nici unul din fonturile din listă nu este
instalat pe calculatorul utilizatorului, browser-ul
va utiliza fontul implicit.
04.10.2016 Tehnologii Web 62
 copyright@[Link]

2.3. Formatarea la nivel de caracter

<p align=center> Text de diferite dimensiuni cu fontul COURIER NEW </p>

<p> <font SIZE=1 FACE=COURIER NEW> font COURIER NEW cu dimensiune 1 </font></p>
<p> <font SIZE=2 FACE=COURIER NEW> font COURIER NEW cu dimensiune 2 </font></p>
<p> <font SIZE=3 FACE=COURIER NEW> font COURIER NEW cu dimensiune 3 </font></p>
<p> <font SIZE=4 FACE=COURIER NEW> font COURIER NEW cu dimensiune 4 </font></p>
<p> <font SIZE=5 FACE=COURIER NEW> font COURIER NEW cu dimensiune 5 </font></p>
<p> <font SIZE=6 FACE=COURIER NEW> font COURIER NEW cu dimensiune 6 </font></p>
<p> <font SIZE=7 FACE=COURIER NEW> font COURIER NEW cu dimensiune 7 </font></p>
<p> <font FACE=COURIER NEW> font COURIER NEW cu dimensiune implicita </font></p>
<p> <font SIZE=+2 FACE=COURIER NEW> font COURIER NEW cu dimensiune cu 2 marimi mai
mare decat dimensiunea implicita </font></p>
<p align=CENTER> Text de diferite dimensiuni cu fontul Arial </font></p>
<p> <font SIZE=3 FACE=Arial> font Arial cu dimensiune 3 </font></p>
<p> <font SIZE=1 FACE=Arial> font Arial cu dimensiune 1 </font></p>
<p> <font FACE=Arial> font Arial cu dimensiune implicita </font></p>
<p> <font SIZE=-2 FACE=Arial> font Arial cu dimensiune cu doua marimi mai mica decat
dimensiunea implicita </font></p>

04.10.2016 Tehnologii Web 63

 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 64

 copyright@[Link]

2.4. Aplicarea unor efecte asupra textului

 Pentru a aplica unei zone un anumit efect, se incadreaza
textul între eticheta de început şi cea de sfârşit,
corespunzatoare efectului respectiv.
 Cele mai utilizate efecte ce se pot aplica asupta textului în
HTML sunt:
<I> Textul este scris cursiv </I>

<U> Textul este scris subliniat </U>

<B> Textul este scris ingrosat </B>

<BIG> Textul este scris mai mare </BIG>

<SMALL> Textul este scris mai mic </SMALL>

<STRIKE> Textul este scris taiat </STRIKE>

04.10.2016 Tehnologii Web 65
 copyright@[Link]

Limbajul HTML
1. Limbajul HTML. Noţiuni introductive
2. Formatarea textului
2.1. Formatarea paragrafelor
2.2. Utilizarea paragrafelor titlu
2.3. Formatarea la nivel de caracter
2.4. Aplicarea unor efecte asupra textului
2.5. Grosimea unui font

04.10.2016 Tehnologii Web 66

 copyright@[Link]

2.5. Grosimea unui font

 Grosimea unui caracter poate fi definita cu ajutorul atributului weight al

etichetei.
 Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600,
700, 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai
gros).
<html>
<head>
<title> Grosimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br/>
<font weight="100">fonturi de grosime 100.</font> <br/>
<font weight="500">fonturi de grosime 500.</font> <br/>
<font weight="900">fonturi de grosime 900.</font>
</body>
</html>
04.10.2016 Tehnologii Web 67
 copyright@[Link]

Întrebări?

04.10.2016 Tehnologii Web 68