Iac3 2014

Universitatea Constantin Brncui din Trgu-Jiu
Departamentul pentru Pregtirea Personalului

Didactic
INSTRUIRE ASISTAT DE
CALCULATOR
Lect.dr. Adrian Runceanu
copyright@www.adrian.runceanu.ro
Curs 3
Limbajul HTML
(partea I)
04.12.2014
Instruire asistat de calculator
Limbajul HTML
1. Limbajul HTML. Noiuni 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.12.2014
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,
coninnd elemente ce permit construirea
paginilor Web.
04.12.2014
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 XP se poate
utiliza unul din editoarele de texte incluse
n sistemul de operare (Notepad,
Wordpad) sau orice alt editor de texte.
04.12.2014
1. Limbajul HTML
Documentele descrise n HTML pot fi vizualizate cu
ajutorul unor aplicaii 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 att structura documentului, ct i
aspectul acestuia.
04.12.2014
1. Limbajul HTML
O etichet (tag) este un identificator care
furnizeaz browser-ului instruciuni de
formatare a documentului.
Pentru a fi delimitate, etichetele HTML sunt

ncadrate ntre paranteze unghiulare (<
>).
04.12.2014
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 conine informaii
generale referitoare la document, cum ar fi titlul
documentului, autorul acestuia, versiunea
documentului, etc.
b) Corpul documentului, care conine textul propriuzis al documentului, precum i elementele
specifice de descriere a formatului acestuia.
04.12.2014

n antet este recomandat s precizai titlul
documentului, care va fi afiat n bara titlu a
ferestrei browser-ului.
Pentru a preciza titlul documentului, care nu
poate depi 64 de caractere, se utilizeaz n
seciunea antet etichetele pereche <title> i
</title>, ntre care se scrie titlul
documentului.
04.12.2014

De exemplu:
Putem scrie aceste etichete n aplicaia Notepad:
<html>
<head>
<title> Introducere in limbajul html </title>
</head>
....
04.12.2014
10

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

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.12.2014
12

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

Exemplu:
Pasul 1: Lansai n execuie editorul de texte Notepad i
introducei urmtorul 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.12.2014
14

Pasul 2: Salvai documentul cu numele Prim.html,
utiliznd opiunea Save As din meniul File!
Pasul 3: Lansai n execuie Internet Explorer.
Vizualizai pagina Web creat, apelnd opiunea
Open . . . din meniul File al ferestrei browser-ului
(n fereastra de dialog care va aprea pe ecran
trebuie s specificai complet pagina pe care dorii
s o vizualizai - deci introducei calea, numele i
extensia fiierului ce o conine).
04.12.2014
15

Rezultatul este urmtorul:
04.12.2014
16

Elementul <body> admite urmtoarele atribute
BACKGROUND=URL
URL este un ir de caractere ce reprezint adresa
Web a unei imagini care va fi utilizat de ctre
browser ca fundal (background) pentru document.
Dac imaginea nu ocupa ntreaga zon din fereastra
browser-ului destinat vizualizrii paginii respective,
ea va fi multiplicat, ca ntr-un mozaic.
04.12.2014
17

BGCOLOR=culoare
Atributul BGCOLOR (BackGround COLOR)
stabilete culoarea fundalului (culoarea zonei din
fereastra browser-ului n care este vizualizat
documentul).
n HTML culorile se pot specifica n dou moduri:
1. utiliznd denumiri predefinite asociate unor culori
(de exemplu RED semnificnd rou, GREEN verde,
BLUE albastru, etc.);
04.12.2014
18

2. "construind" culori proprii prin combinarea a trei
culori de baza - rou, verde i albastru (modelul RGB).
n acest caz, specificarea unei culori se face
indicnd n ordinea rou, verde, albastru trei valori
hexazecimale cuprinse ntre 00 i FF, cte una
pentru fiecare culoare de baz, astfel: #rrggbb.
Se poate specifica culoarea roie fie prin denumirea
predefinit: BGCOLOR=RED, fie utiliznd valoarea
RGB: BGCOLOR=#FF0000.
04.12.2014
19

TEXT = culoare
Atributul TEXT stabilete culoarea textului.

LINK = culoare
Atributul LINK stabilete culoarea cu care vor

fi marcate n text link-urile nevizitate.
04.12.2014
20

VLINK = culoare
Atributul VLINK stabilete culoarea cu care vor

fi marcate n text link-urile vizitate.
ALINK = culoare
Atributul ALINK stabilete culoarea cu care va

fi marcat n text link-ul activ (cel asupra cruia
este plasat cursorul mouse-ului).
04.12.2014
21

EXERCIIU:
Editai i vizualizai urmtoarea pagin

Web, n care acelai text este scris pe un
fond gri n nuane care variaz de la negru
ctre alb.
04.12.2014
22
<html>
<head> <title> Test de culoare </title> </head>
<body bgcolor=#777777>
<font COLOR=#000000> 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.12.2014
23

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 ntmpl dac greim ?
Nimic! Mai exact, nimic grav! Browser-ele ignor
elementele care nu respect sintaxa HTML i nu le
interpreteaz.
04.12.2014
24
Limbajul HTML
04.12.2014
25
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)
Diferenele principale dintre cele dou tipuri de formatare
sunt:
elementele de formatare la nivel de bloc pot conine alte
elemente de formatare (la nivel de bloc sau la nivel de
caracter), n timp ce elementele de formatare la nivel de
caracter conin doar text sau alte elemente de formatare
la nivel de caracter;
elementele de formatare la nivel de bloc ncep de obicei
04.12.2014
26
de la linie nou.
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 vei apela la
facilitile oferite de stilurile de formatare text
(stilurile CSS), deoarece vei putea aplica acelai
stil simultan tuturor elementelor din grup.
04.12.2014
27
Limbajul HTML
1. Limbajul HTML. Noiuni introductive.
04.12.2014
28
2.1.Formatarea paragrafelor
n tehnoredactare, prin paragraf se nelege 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 sfrit </p> fiind
opional.
<p> Paragraful 1 </p>
Descriere:
<p> Paragraful 2 </p>
...
Efect:
04.12.2014
Paragraful 1
Paragraful 2
...
29
Cel mai utilizat atribut admis de eticheta

<p> este align, care stabilete modul de
aliniere stnga - dreapta a textului
paragrafului.
align = LEFT | CENTER | RIGHT | JUSTIFY
04.12.2014
30
Se observ c atributul align admite patru valori
predefinite:
LEFT - textul este aliniat la marginea din stnga
RIGHT - textul este aliniat la marginea din dreapta
CENTER - textul este centrat (plasat la egal distan de
marginea din stnga i cea din dreapta)
JUSTIFY - textul este aliniat i la stnga i la dreapta (prin
mrirea spaiului ntre cuvinte)
Valoarea implicit a modului de aliniere a textului
depinde de direcia acestuia:
dac textul este scris de la stnga la dreapta, valoarea
implicit a modului de aliniere este LEFT
dac textul este scris de la dreapta la stnga, valoarea
implicit a modului de aliniere este RIGHT
04.12.2014
31
Exemplu:
Descriere:
<p align=CENTER> Alinierea paragrafelor </p>
<p align=LEFT> Primul paragraf este aliniat la stnga </p>
<p align=RIGHT> Al doilea paragraf este aliniat la dreapta
</p>
<p align=JUSTIFY> Al treilea paragraf este aliniat la stnga i
la dreapta, prin mrirea spatiilor dintre cuvintele de pe aceeai
linie. </p>
<p> Ultimul paragraf utilizeaz modul implicit de aliniere - n
cazul nostru stnga, deoarece direcia textului este LTR. </p>
04.12.2014
32
Efect:
Alinierea paragrafelor
Primul paragraf este aliniat la stnga
Al doilea paragraf este aliniat la dreapta
Al treilea paragraf este aliniat la stnga i la dreapta,
prin mrirea spatiilor dintre cuvintele de pe aceeai
linie.
Ultimul paragraf utilizeaz modul implicit de aliniere n cazul nostru Stnga, deoarece direcia textului este
LTR.
04.12.2014
33
Pentru a stabili acelai mod de aliniere pentru
mai multe paragrafe, trebuie s le grupm 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.12.2014
34
Observatie:
Nu utilizai etichete <p> </p> fr coninut,
deoarece majoritatea browser-elor le ignor.
Dac dorii s inserai ntr-un document
HTML o linie vid, utilizai eticheta <br/>.
Aceasta va genera un marcaj de sfrit de
linie (caracterele ASCII Carriage Return / Line
Feed).
04.12.2014
35
Limbajul HTML
04.12.2014
36

Documentele HTML pot fi structurate pe ase niveluri,
existnd ase etichete care definesc nivelul paragrafului
titlu n structura documentului:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Etichetele de sfrit sunt obligatorii.
Nivelul delimitat de etichetele <h1> i </h1> este cel
mai important, iar nivelul delimitat de etichetele
<h6> i </h6> cel mai puin important.
Browser-ul vizualizeaz de obicei paragrafele titlu mai
importante cu litere mai mari dect cele mai puin
importante.
04.12.2014
37

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 seciune 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.12.2014
38
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
h6
Configurarea modem-ului
Conectarea la distanta ca terminal
Aplicatia TELNET
Limbajul html
...
04.12.2014
39
Limbajul HTML
04.12.2014
40

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, care permite
inserarea de blocuri de texte personalizate.
04.12.2014
41

Precizarea informaiilor 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 informaii referitoare la font, browserul va utiliza fontul su implicit.
04.12.2014
42

Atributele admise de eticheta <font> sunt:
SIZE = valoare
stabilete dimensiunea caracterelor.

Valoarea dimensiunii fontului poate fi specificat:
n mod absolut (un numr natural cuprins ntre 1 i 7)
sau relativ la dimensiunea curent a caracterelor:
dac valoarea este +n, caracterele vor fi cu n mrimi mai
mari
dac valoarea este -n, caracterele vor fi cu n mrimi mai
mici
Dimensiunea efectiv cu care sunt vizualizate

caracterele depinde de browser.
04.12.2014
43

COLOR = culoare
stabilete culoarea textului.

FACE = list_fonturi
definete o list de fonturi separate prin virgul,

dintre care browser-ul l va alege pe primul
disponibil n ordinea preferinelor.
Dac nici unul din fonturile din list nu este
instalat pe calculatorul utilizatorului, browser-ul
va utiliza fontul implicit.
04.12.2014
44

<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 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.12.2014
45
Limbajul HTML
04.12.2014
46

Pentru a aplica unei zone un anumit efect, se incadreaza
textul ntre eticheta de nceput i cea de sfrit,
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.12.2014
47
Limbajul HTML
04.12.2014
48

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.12.2014
49
ntrebri?
04.12.2014
50

Iac3 2014

Î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

Iac3 2014

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Constantin Brncui din Trgu-Jiu

Departamentul pentru Pregtirea Personalului

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

HTML utilizeaz pentru descrierea documentelor

Instruire asistat de calculator

Pentru a fi delimitate, etichetele HTML sunt

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

etichetele <body> i </body>

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

1. Structura unui document html

Atributul TEXT stabilete culoarea textului.

Atributul LINK stabilete culoarea cu care vor

Instruire asistat de calculator

1. Structura unui document html

Atributul VLINK stabilete culoarea cu care vor

Atributul ALINK stabilete culoarea cu care va

Instruire asistat de calculator

1. Structura unui document html

Editai i vizualizai urmtoarea pagin

Instruire asistat de calculator

Instruire asistat de calculator

1. Structura unui document html

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Cel mai utilizat atribut admis de eticheta

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

Instruire asistat de calculator

2.2. Utilizarea paragrafelor titlu

Instruire asistat de calculator

2.2. Utilizarea paragrafelor titlu