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