Structura
unui document HTML. Notiuni de baza
1.1 Ce este HTML?
HTML
(HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul
1989, ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe
parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai
recent HTML 4.01), fiecare versiune oferind noi facilitati.
Se remarca
cateva trasaturi cum ar fi:
- independenta de platforma
(modul de afisare al unui document este acelasi, indiferent de computerul
pe care se realizeaza afisarea);
- structurarea formatarii;
- 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).
HTML este un limbaj simplu, compus din
coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga
informatii despre formatare. Este derivat din SGML (Standard Generalized
Markup Language), un sistem pentru definirea tipurilor de documente
structurate, destinat sa reprezinte instante ale acestor tipuri de documente.
La baza SGML si a HTML se afla acelasi principiu: descrierea
continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a
urmarit ca aceste fisiere sa fie editabile cu aplicatii software nepretentioase
(ex. NotePad, WordPad).
In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea
forma <nume_marcaj> . Parantezele unghiulare sunt elementele care
indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul
nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit
utilizarea unor atribute care se vor scrie in marcajul de inceput:
<nume_marcaj
optiune1=valoare1 optiune2=valoare2 >
.
</nume_marcaj>
|
|
|
Exista doua tipuri de marcaje:
- individuale (ex. <br>)
- perechi (ex. <p></p>) - de mentionat ca sfarsitul
unui marcaj este indicat prin utilizarea caracterului '/' in fata numelui
de marcaj
In functie de modul de formatare a paginii, avem marcaje de tip:
- block: este afisat sub elementul anterior (ex. <p>)
- inline: este afisat dupa elementul anterior (ex. <span>)
- table: este afisat sub forma unui tabel
Marcajele perechi pot fi imbricate:
<nume_marcaj1>
<nume_marcaj2>
.
</nume_marcaj2>
</nume_marcaj1>
|
|
|
Browserele
vor ignora marcajele si optiunile pe care nu le recunosc.
1.2 Structura unui document HTML
Un document
HTML 4 are urmatoare structura:
- o linie continand versiunea
HTML
- sectiunea HEAD, delimitata de
marcajele <HEAD> </HEAD>
- sectiunea BODY, delimitata de
marcajele <BODY> </BODY> sau <FRAMESET>
</FRAMESET>
|
|
|
<!DOCTYPE HTML PUBLIC
'-//W3C//DTD HTML 4.01//EN'
'https://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>Prima mea pagina
web</title>
</head>
<body>
..
</body>
</html>
|
|
|
Un document
HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin
intermediul DTD (document type definition). Pe scurt, fisierul DTD contine
definitiile marcajelor din versiunea respectiva de HTML.
HTML 4.01 specifica 3 variante DTD :
- HTML 4.01 Strict DTD include toate elementele si
atributele care nu sunt 'invechite' (elemente si atribute a
caror utilizare nu este recomandata deoarece se doreste renuntarea la
acestea pe viitor) sau care nu apar in documentele ce contin cadre.
- HTML 4.01 Transitional DTD include Strict DTD plus
elementele si atributele 'invechite'.
- HTML 4.01 Frameset DTD include Transitional DTD plus
cadrele (frames).
|
HTML
4.01 Strict DTD
|
<!DOCTYPE
HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'https://www.w3.org/TR/html4/strict.dtd'>
|
|
HTML
4.01 Transitional DTD
|
<!DOCTYPE
HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
'https://www.w3.org/TR/html4/loose.dtd'>
|
|
HTML
4.01 Frameset DTD
|
<!DOCTYPE
HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'
'https://www.w3.org/TR/html4/frameset.dtd'>
|
1.2.1 Sectiunea HEAD
Cuprinde
informatii care nu vor fi afisate in browser, cu exceptia marcajului <title>.
Marcajul <title> este obligatoriu si poate apare doar in sectiunea
HEAD. El va contine un titlu relevant pentru pagina, fiind deosebit de
important pentru motoarele de cautare.
Alte marcaje
care apar in sectiune HEAD:
- <META> - poate contine cuvinte cheie,
o descriere a paginii, numele autorului paginii, frecventa (teoretica) cu
care motoarele de cautare ar trebui sa reindexeze pagina, etc.
Declaratiile META implica in general declararea unei proprietati si a
valorii asociate acelei proprietati.
<META NAME='nume' CONTENT='continut'>
Declararea setului de caractere se face astfel:
<META http-equiv='Content-Type'
content='text/html; charset=set_caractere'>
|
|
|
Precizarea setului de caractere face posibila afisarea in browserul
utilizatorului a caracterelor specifice unor limbi precum romana, rusa,
araba, etc.
|
|
- <style>- cascading style sheets -
stiluri pentru formatarea textului din documentul HTML.
<style
type='text/css'></style>
- <script> - scripturi JavaScript sau
VBScript
<script language='JavaScript1.2' type='text/javascript'
src='lib.js'></script>
- <base> - stabileste URL-ul de
'baza' al documentului. Toate referintele (<a
href=''></a>, respectiv <img
src=''>) din documentul respectiv vor fi deschise relativ
la marcajul <base>.
<head>
<base href='https://www.xprim.ro/index.php'
target='_top'>
</head>
- <link> - stabileste o legatura cu un
document extern, spre exemplu un fisier de definitii CSS.
<link rel='stylesheet'
href='stiluri.css' type='text/css'>
|
|
|
Sectiunea HEAD a unui document HTML poate arata in felul urmator:
<head>
<title>Titlul paginii
mele</title>
<META
http-equiv='Content-Type' content='text/html;
charset=windows-1250'>
<META name='author'
content='Popescu Ion'>
<META name='copyright'
content=' 2003 InsideMedia'>
<META name='keywords'
content='curs, html, gratuit, elearning'>
<link rel='stylesheet'
href='stiluri.css' type='text/css'>
</head>
|
|
|
1.2.2 Sectiunea BODY
Este inclusa intre marcajele <body> </body>
<BODY [
BACKGROUND='adresa_imagine'] [
BGCOLOR='#rrggbb'|'culoare'] [
TEXT='#rrggbb'|'culoare'] [
LINK='#rrggbb'|'culoare'] [
VLINK='#rrggbb'|'culoare'] [
ALINK='#rrggbb'|'culoare'] [ LEFTMARGIN=marg_st] [
TOPMARGIN=marg_top]>
.
continut document
..
</BODY>
Marcajul de
sfarsit (</BODY>) nu este obligatoriu
In sectiunea
BODY se gaseste informatia care va fi afisata in browser (text, imagini,
etc.) (<body>. </body>).
|
|
|
LEFTMARGIN si TOPMARGIN sunt
extensii Microsoft (nu functioneaza decat in Internet Explorer 3+).
- LEFTMARGIN
precizeaza, in pixeli, marginea stanga a documentului (distanta
dintre fereastra si continutul documentului);
- TOPMARGIN
precizeaza, in pixeli, marginea de sus a documentului (distanta
dintre fereastra si continutul documentului)
|
|
|
Ca in orice
limbaj de programare in HTML exista posibilitatea de a introduce comentarii,
folosind marcajul
<!-- . textul comentariului
-->
|
|
|
<!DOCTYPE HTML PUBLIC
'-//W3C//DTD HTML 4.01//EN'
'https://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>Titlul paginii
mele</title>
<META
http-equiv='Content-Type' content='text/html;
charset=windows-1250'>
<META name='author'
content='Popescu Ion'>
<META name='copyright'
content=' 2003 InsideMedia'>
<META name='keywords'
content='curs, html, gratuit, elearning'>
<link rel='stylesheet'
href='stiluri.css' type='text/css'>
</head>
<body
bgcolor='#999999' leftmargin=0 topmargin=0>
<!--Aceasta linie nu va fi afisata in browser
-->
<p>text text text text text
text text text text text </p>
<p>alt text alt text alt
text alt text alt text </p>
</body>
</html>
|
|
|
In exemplul
de mai sus a aparut un nou marcaj <p> (paragraf). Alaturi de el
trebuie mentionate marcajele <h1>, <h2>, <h3>, <h4>,
<h5>, <h6> (headings - toate necesita marcaj de inchidere) care
sunt folosite in general pentru evidentierea titlurilor. (exemplu)
Pentru
formatarea textului pot fi folosite si marcajele:
- <b></b> - caractere ingrosate
- <i></i> - caractere inclinate
- <u></u> - caractere subliniate
- <s></s> - caractere 'taiate'
- <pre></pre> - marcajul de informatie
preformatata
- conserva toata caracterele si
spatierile de linii
- utilizeaza un font diferit
(Courier)
- <sup></sup> - exponent
- <sub></sub> - indice
- <br> - 'rupe' textul,
trecand pe o linie noua - poate apare oriunde in text
- <hr> - traseaza o linie subtire
orizontala
Acest exemplu
evidentieaza efectele marcajelor mentionate mai sus.
Marcajul <font></font>
ofera posibilitatea modificarii dimensiunii, culorii si a tipului de font
utilizat (exemplu)
Ultimele 2
marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele <span>
si <div>(ambele necesita marcaj de inchidere):.
- <span> este un marcaj de tip
'inline'. Se foloseste in general in interiorul marcajelor de
tip 'block' (ex. <p>) in combinatie cu stilurile CSS,
pentru a impune o formatare diferita de restul continutului din marcajul
'block' respectiv (exemplu).
- spre deosebire de <span>,
marcajul <div> este de tip 'block'. Se foloseste in
general pentru pozitionare in cadrul documentului si pentru specificarea
unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).
<DIV [
ALIGN='left|center|right'] style='..'>
</DIV>
|
|
- Conform
specificatiilor HTML 4.01, este recomandata folosirea marcajului <div>
pentru centrarea textului, in locul marcajului <center>
exemplu.
- <div>
poate fi folosit ca un container pentru alte elemente de tip
'block'.
Exemplu: se pot include 2 sau mai multe paragrafe intr-un
marcaj <div>, insa pentru a se evita formatarea
explicita pe fiecare paragraf in parte (ex. fontul), se va defini
stilul de formatare pentru marcajul <div>, stil care va
fi preluat de paragrafele mentionate.
|
|
|
|
|
- Vizualizeaza
sursele exemplelor si comenteaza-le in seminarul online
- Realizeaza
o pagina HTML (folosind NotePad) care sa includa toate marcajele
prezentate in aceasta lectie. Valideaza pagina la adresa https://validator.w3.org/
|
|
|
