Lectia 1-Structura Unui Document HTML. Notiuni de Baza

Lecia 1: Structura unui document
HTML. Notiuni de baza.

1.1 Ce este HTML?
HTML (HyperText Markup Language) Pe parcursul anilor, limbajul a evoluat (HTML
5, cel mai nou dar nu si foarte folosit),cel mai folosit este HTML 4.
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).
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.
Browserele vor ignora marcajele si optiunile pe care nu le recunosc.
1.2 Structura unui document HTML

Un document HTML 4 are urmatoare structura:
1.
2.
3.
4.
o linie continand versiunea HTML

sectiunea HEAD, delimitata de marcajele <HEAD> </HEAD>
Subsectiunea TITLE <title>titlu site</title>.
subsectiunea META
<meta name="keywords" content="cuvinte cheie>
<meta name="description" content="descrierea siteului si a continutului>
<meta name="author" content="numele tau sau nickname-ul>
<meta name="sitemap" content="sitemap.xml, all">
5. sectiunea BODY, delimitata de marcajele <BODY> </BODY> sau
<FRAMESET> </FRAMESET>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<body>
...........
</body>
</html>
HTML 4.01 Strict

DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
4.01 Transitional//EN"
Transitional DTD
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
4.01 Frameset//EN"
DTD
"http://www.w3.org/TR/html4/frameset.dtd">
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="http://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">
</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, n 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://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">
</head>
<body bgcolor="#999999" leftmargin=0 topmargin=0>

<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>
1. Conform specificatiilor HTML 4.01, este recomandata folosirea

marcajului <div> pentru centrarea textului, in locul marcajului <center>
exemplu.
2. <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.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate
marcajele prezentate in aceasta lectie. Valideaza pagina la adresa
http://validator.w3.org/

Lectia 1-Structura Unui Document HTML. Notiuni de Baza

Încărcat de

Informații document

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

Lectia 1-Structura Unui Document HTML. Notiuni de Baza

Încărcat de

Drepturi de autor:

Formate disponibile

Lecia 1: Structura unui document

HTML. Notiuni de baza.

independenta de platforma (modul de afisare al unui document este acelasi,

Exista doua tipuri de marcaje:

Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

1.2 Structura unui document HTML

o linie continand versiunea HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

Precizarea setului de caractere face posibila afisarea in

<script> - scripturi JavaScript sau VBScript

<base> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a

<link> - stabileste o legatura cu un document extern, spre exemplu un fisier de

Sectiunea HEAD a unui document HTML poate arata in felul urmator:

1.2.2 Sectiunea BODY

LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza

LEFTMARGIN precizeaza, n pixeli, marginea stanga a documentului

TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului

Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<b>...</b> - caractere ingrosate

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

<span> este un marcaj de tip "inline". Se foloseste in general in interiorul

<DIV [ ALIGN="left|center|right"] style="..">

1. Conform specificatiilor HTML 4.01, este recomandata folosirea

1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

S-ar putea să vă placă și