PROIECTAREA

PAGINILOR WEB

CURSUL 3

Limbajul HTML
 C3 – Limbajul HTML

1. Moduri de redactare a documentelor HTML s3

2. Structura documentului HTML – s7

3. Formatări în sursa HTML – s14

4. Liste – s21

12/09/21 Proiectarea paginilor WEB 2

1. Moduri de redactare a documentelor HTML

Limbajul HTML (Hyertext Markup Language) este un

mod de înregistrare a documentelor de tip hypertext sub
formă de fişiere de tip text.
HTML:
 prezintă sintaxa documentului şi
 defineşte complexul aşa-ziselor elemente de marcare, care nu
sunt prezentate pe monitorul utilizatorului, dar definesc modul de
prezentare a informaţiilor
Istoric HTML:
 standardul HTML a fost propus în 1990 de către Tim Berners-Lee
de la Centrul European de Cercetări Atomice CERN din Elveţia
 primul server WWW a fost pus în funcţiune în centrul CERN în
1991
 coordonator al dezvoltării limbajului HTML îl îndeplineşte Web
Consortium W3C (org. Producătoare de programe legate de
WWW: Netsacpe, Microsoft, Macromedia, Adobe)

12/09/21 Proiectarea paginilor WEB 3

1. Moduri de redactare a documentelor HTML

W3C are scopul de uniformizare a modurilor de

formatare a documentelor de către browserele
diferiţilor producători (definiţia de formatare a
diferitelor elemente de marcare), rezultând
standardul paginilor de stil în cascadă – CSS
(Cascade Style Sheets)
paginile actuale de Web accesibile în reţeaua
INTERNET sunt scrise în limbajul HTML (ultima
versiune HTML este HTML4)
trasătură importantă a documentelor de tip
hipertext moderne este posibilitatea introducerii
în ele a elementelor de interacţiune cu utilizatorul
(formulare, applet-uri scrise în limbajul Java),
programe realizate în fereastra browser-ului
12/09/21 Proiectarea paginilor WEB 4
1. Moduri de redactare a documentelor HTML

pagină Web
 = fişier de tip text, codat în limbajul HTML având extensia
.html sau.htm
 cuprinde:
conţinutul corect al paginii
informaţii despre modul de structură a paginii (ex. împărţirea pe
cadre)
informaţii despre modul de formatare a textului
informaţii despre poziţionarea în pagină a elementelor grafice,
precum şi a adreselor fişierelor primare cu grafică
definiţia link-urilor (legăturilor) către alte documente de tip
hipertext, grafică, etc
opţional:
 informaţii despre autor, limbă, standardul de codare al semnelor,
data ultimei actualizări, ş.a.
 scripturi – programe realizate pe pagina serverului WWW sau pe
pagina clientului (interpretate şi redactate de către browser)

12/09/21 Proiectarea paginilor WEB 5

1. Moduri de redactare a documentelor HTML

Editarea documentelor HTML se poate face în:

 Notepad, WordPad accesibile SO Windows
 SimpleText, WinEdit pentru Macintosh
 Vi pentru SO Unix
NotePad este un editor de text ASCII (nu are
funcţii de formatarea a textului)
 Avantaje: textul generat este mai lizibil si de aceea e
preferat de cei care răspunde de actualizarea conţinutului
paginilor Web
Există editoare speciaşizate în redactarea paginilor
Web: WYSIWYG (What You See Is What You Get)
 colorarea elementelor de marcare
 generare automată a unei părţi a documentului
 verificarea corectitudinii sintactice
cel mai simplu mod de creare a unei pagini Web
este redactarea ei în editorul MS Word şi salvarea
ei cu extensia .htm
12/09/21 Proiectarea paginilor WEB 6
 2. Structura documentului HTML
Aplicaţiile utilizate în lucrul cu pagini HTML sunt:
 NotePad:
editarea codului HTML
editor de text simplu inclus în MS Windows
 Internet Explorer:
vizulizarea paginii HTML
program de navigare, browser, dezvoltat de Microsoft şi inclus
gratuit în SO Windows
putem redacta pagini Web şi in mod off-line
vizualizarea extensiei în lucrul cu pagini Web:
 Windows Explorer: Tools – Folder Options –
 Hide the extension for known the types
crearea unui fişier text în folderul curent
LucruHTML:
 File – New – New Text Document
 redenumim numele fişierului Document.txt în pagina1.html

12/09/21 Proiectarea paginilor WEB 7

 2. Structura documentului HTML

aplicaţia ataşată fişierului pagina1.html este

browserul Internet Explorer
 se va deschide automat în momentul când se execută dublu
clic pe fişier
 va afişa o pagină albă, fără conţinut, deoarce nu s-a scris
nimic în codul sursă
vizualizarea codului sursă al paginii deschise în
browser:
 View – Source
 cu ajutorul aplicaţiei NotePad va fi deschisă fereastra care
conţine codul sursă al fişierului pagina1.html
În editorul de text s-a deschis un fişier vid, urmând ca
noi să scriem efectiv codul în limbajul HTML.
Modificările făcute în acest fişier trebuie salvate şi
reîncărcate în browser (Refresh).
12/09/21 Proiectarea paginilor WEB 8
 2. Structura documentului HTML
Modificările se fac doar în editorul de text, fereastra
de browser este utlizată doar pentru vizualizarea
paginilor
Metodă mai rapidă de lucru (cu ajutorul tastaturii):
 salvarea fişierului în Notepad: ALT+F, apoi tasta S
 comutarea în fereastra browser-ului: ALT + TAB
 reîncărcarea paginii: F5 (Refresh)
 revenirea la codul sursă: ALT+TAB
elementele care formează documentul sunt elemente
de marcare, denumite etichete sau tag-uri (lb eng);
ele au un domeniu de acţiune cuprins în interiorul
perechilor de etichete
există două tipuri de tag-uri:
 tag-uri pereche
 tag-uri nepereche
12/09/21 Proiectarea paginilor WEB 9
 2. Structura documentului HTML
sintaxa tag pereche:
<numetag atribut1=valoare1 atribut2=valoare2…>
domeniu de acţiune
</numetag>

sintaxa tag nepereche:

<numetag atribut1=valoare1 atribut2=valoare2…>

obs: formatele generale conţin perechi atribut=valoare,

separate de numele de tag şi între ele prin caracterul spaţiu
exemple:
tag pereche fără atribute: tag nepereche:
<i>text afişat cu caractere înclinate</i> <hr> (trasează o linie orizontală pe
ecran)
tag pereche cu atribute: tag nepereche cu atribut:
<p align=right> <hr width=400>
text aliniat la marginea dreaptă (trasează o linie orizontală de lungime =
</p> 400 pixeli)
12/09/21 Proiectarea paginilor WEB 10
 2. Structura documentului HTML
nu contează dacă tag-urile sunt scrise cu litere
majuscule sau minuscule, deoarece limbajul
HTML nu este case-sensitive. Merită însă să
folosiţi în mod consecvent litere mici sau mari,
pentru că acest lucru vă va facilita munca cu
documentul
putem utiliza pentru un tag toate atributele, doar
câteva dintre ele sau după caz, nici unul; ordinea
apariţie lor nu are importanţă
dacă valorile corespondente atributelor conţin
spaţii atunci sunt necesare ghilimelele, utilizate
pentru gruparea acestor valori
Ex: <font face=“time new roman”>text format cu fontul dorit</font>
<hr width=“400”>

12/09/21 Proiectarea paginilor WEB 11

 2. Structura documentului HTML
scheletul documentului:
 între tag-urile <html></html>
 secţiunea antetului (head)
 secţiunea corpului (body)
<html>
<head>
... aici va fi partea de antet
</head>
... aici va fi conţinutul documentului
</html>

 antetul conţine informaţii despre:

pagină
autor
scripturi Java
declaraţii de stiluri
obs: informaţiile nu sunt redate pe browser, mai puţin titlul documentului,
care apare pe bara de titlu a programului de navigare într-o pereche de tag-
uri <title> </title>, în partea de head

12/09/21 Proiectarea paginilor WEB 12

 2. Structura documentului HTML

obs: dacă corpul codului sursă nu are conţinut

atunci pagina din fereastra browser-ului rămâne
albă
conţinutul paginii este cuprins în secţiunea de body
exemplu:

12/09/21 Proiectarea paginilor WEB 13

 3. Formatări în sursa HTML
descrierea formatării conţinutului prin prezentarea modurilor
de diferenţiere a fragmentelor de text ca titluri (text afişat pe
pagină având dimensiunea caracterelor mai mare şi pe rânduri
separate, există 6 nivele de titluri)
1. Formatul general al titlurilor:
 <hn>text</hn> unde n=1,…,6 determină nivelul titlului
 tag-ul <h1> afişează textul cu caracterul cel mai mare
 mărimea caracterului scade de la <h1> la <h6>
 elementul care închide titlul </h1> este în mod automat
elementul de sfârşit de paragraf, tot ce apare după acesta
va fi trecut pe un rând nou
 ex:

12/09/21 Proiectarea paginilor WEB 14

 3. Formatări în sursa HTML

2. Trecerea la rând nou – paragraful:

 textul scris între tag-urile body fără nici o altă formatare
va fi afişat de browser ca un singur paragraf
 dacă vrem să întrerupem rândurile, un simplu ENTER în
locul dorit nu este de ajuns, deoarece limbajul HTML este
unul de marcare şi, prin urmare, trebuie folosite tag-uri
pentru acest lucru
 <br> - tag nepereche
 ex:

12/09/21 Proiectarea paginilor WEB 15

 3. Formatări în sursa HTML
3. Textul pe paragrafe, alinieri:
 Se utlizează în două forme:
tag pereche: tag nepereche:
<p> text pe primul rând
aici este textul <p>text pe al doilea rând
</p>
Avantajul tag-ului pereche este că Tag-ul nepereche <p> are
acesta delimitează paragrafe şi poate aproximativ acelaşi efect ca şi tag-ul
fi aliniat cu ajutorul atributului align, <br>, dar lasă un spaţiu între cele
acesta poate lua valorile: right, două rânduri pe care le rupe
center sau left (implicită)

obs: <center> … </center> permite centrarea oricărui element (text,

imagine) din pagină, având avantajul unei utilizări foarte directe

4. Linia orizontală:
 tag-ul nepereche <hr>
 separă fragmentele de pagină într-un mod mai simplu din
punct de vedere grafic, printr-o linie orizontală

12/09/21 Proiectarea paginilor WEB 16

 3. Formatări în sursa HTML
5. Proprietăţile caracterelor:
 ca şi în cazul editoarelor de text (ex. MS Word), apare
necesitatea scrierii anumitor caractere, cuvinte, fraze cu
anumite proprietăţi
Tag-ul Efectul
<b> … </b> îngroşare text (bold)
<u> … </u> text subliniat (underline)
<i> … </i> text cursiv (italic)
<strike> … </strike> text tăiat
dacă dorim ca anumite caractere să fie afişate pe mai multe formatări deodată,
se utilizează tag-urile imbricate;
ex: text neformatat<b><i>Text bold italic</i></b>Text neformatat
<font> … </font> defineşte cu ajutorul atributelor următoarele:
<font face=“times new mărimea caraterelor: size (1-7, 1 pt cea mai mică
roman”>text cu TNR dimensiune, 3 pt dimensiune normală)
</font> culoarea caracterelor: color (nume sau cod hexa:
<font face=“verdanna” #rrggbb; recunoacute 256, folosite 16)
color=“red” size=“7”> tipul caracterelor: face (Verdana, Arial, Times New
litere mari roşii </font> Roman, Courier, Gothic, Wingdings, etc. )

12/09/21 Proiectarea paginilor WEB 17

 3. Formatări în sursa HTML

6. Caractere speciale:
 nu contează cîte spaţii sau rânduri libere lăsaţi, efectul în
browser este acelaşi
 Î: “Putem obţine mai multe spaţii libere în codul sursă ?”
 R: “DA, cu ajutorul caracterelor speciale !”
 caracterle speciale sunt anumite coduri interpretate de
către browser şi au forma generală &denumirecod
(denumirecod=succesiune de litere sau cifre
corespunzătoare caracterului dorit)

12/09/21 Proiectarea paginilor WEB 18

 3. Formatări în sursa HTML

obs: caracterele speciale se scriu cu minuscule ,

altfel ele sunt afişate ca atare în browsere!
caracterul “;” este opţional, el marchează sfârşitul
succesiunii de cod
exemple:
 a&nbsp;&nbsp;b returnează “a b”
 a&nbsp&nbspb returnează la fel “a b”

 ;&nbsp&nbsp; returnează “;” (al doilea semn “;” este

înglobat de al doilea caracter special &nbsp corespunzător

spaţiului)
 inegalităţi matematice: pentru a obţine “a<b>c” vom

scrie în codul sursă: a&lt;b&gt;c sau a&ltb&gtc; dacă în

codul sursă vom scrie a<b>c vom obţine ac (<b> fiind
tag-ul de îngroşare text)

12/09/21 Proiectarea paginilor WEB 19

 3. Formatări în sursa HTML
7. Formatări generale ale documentului
 Pagina Web este implicit:
albă
textul afişat fiind negru
dimensiune prestabilită a marginilor libere între marginile
documentului şi informaţia din interior, ş.a.m.d.
 aspecte care ţin de estetica paginii sunt date de tag-ul
nerepreche <body> cu atribute
Tag-ul <body> cu atributele: Utilizare
bgcolor setează culoare de fundal pt întreg
<body bgcolor=black> documentul
text setează culoarea textului
<body text=white>
background inserarea unei imagini în fundal
<body background=“../imagini/imagine5.gif”> url-ul imag trebuie introdus ca şi val
leftmargin / marginwidth controlează marginile pe oriz IE/NN
topmargin / marginheight controlează marginile pe vert IE/NN
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 >
12/09/21 Proiectarea paginilor WEB 20
 4. Liste

aşa cum am văzut în editoarele avansate de text,

de ex. MS Word, avem posibilitatea utilizării în
acest sens a unor marcaje speciale (puncte,
cercuri, pătrate) sau putem numerota cu cifre sau
litere respectivele liste

limbajul HTML permite aranjarea textului în

acesată manieră, prin posibilitatea utilizării a trei
tipuri de liste:
 Liste de tip definiţie (dl)
 Liste neordonate (ul)
 Liste ordonate (ol)

12/09/21 Proiectarea paginilor WEB 21

 4. Liste
Liste de definiţie (dl – definition list):
 se utilizează pentru corelarea anumitor noţiuni cu
definiţiile, comentariile sau explicaţiile dorite
 are ca efect o aranjare corepunzătoare în pagină
 structura:
<dl>
<dt>noţiunea1
<dd>definiţia noţiunii1
<dt>noţiunea2
<dd>definiţia noţiunii2
…
</dl>
 efectul este:

12/09/21 Proiectarea paginilor WEB 22

 4. Liste
Liste neordonate (ul – unordered list):
 punctează elementele listei prin folosirea elementelor grafice
(puncte, pătrate, cercuri)
 tag pereche pentru delimitarea listei neordonate <ul> … </ul>
 tag pentru fiecare element al listei <li> (list item)
 singurul atribut al tag-ului <ul> desemnează simbolul utilizat şi se
defineşte conform formei generale: <ul type=tiplista>, tiplista
poate lua valorile: circle, disc şi square

12/09/21 Proiectarea paginilor WEB 23

 4. Liste
Liste ordonate (ol – ordered list):
 se definesc în interiorul perechii de tag-uri <ol> … </ol>
 elementele listei ordonate se definesc ca şi în cazul listelor
neordonate cu ajutorul tag-ului <li>
 atributele tag-ului <ol> se referă la:
modul de numerotare a elementelor listei:
 <ol type=mod>, unde mod poate lua valori conform tabelului:

mod efect
1 numere arabe (implicit)
a litere mici
A litere mari
i numere romane mici
I numere romane mari

numărul primului element din listă:

 <ol start=număr>, unde număr poate lua valori aparţinând numerelor
naturale (de ex. număr=5)
 tag-ul <li> suportă un atribut care setează numărul elemetului
pe care-l desemnează <li value=număr>
12/09/21 Proiectarea paginilor WEB 24
 4. Liste

Exemplu:

Liste în liste
 nu întotdeauna este de ajuns utilizarea unei formatări pe
structuri de liste liniare, apare nevoia aranjării informaţiilor
într-o manieră mai puternic structurată
 pentru a realiza acest lucru, codul trebuie structurat astfel
încât să sugereze din indentare aspectul vizual
12/09/21 Proiectarea paginilor WEB 25
 4. Liste

Exemplu:

obs: indentările la dreapta care apar în codul sursă sunt

realizate cu câte două spaţii şi nu cu TAB, această modalitate
de scriere este utilizată şi de editoarele de cod avansate sau de
aplicaţiile WYSIWYG, gen Macromedia Dreamweaver, aceasta,
deoarece codul este mai lizibil şi mai uşor de întreţinut
12/09/21 Proiectarea paginilor WEB 26