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/
|
|
|
