Limbajul HTML

HyperText Markup Language (HTML)

Reprezint limbajul standard pentru definirea structurii unei pagini Web.

Funcioneaz pe principiul marcrii unor pri din coninutul paginii web astfel nct s comunice aplicaiei de navigare (browser) modul n care acestea vor fi afiate.

Face apel la un set de marcatori sau elemente HTML (tags) avnd o denumire i un anumit numr de proprieti sau atribute.

Furnizeaz metoda de creare a unor documente structurate prin definirea de titluri, paragrafe, liste, tabele, legturi, etc., i prin includerea imaginilor i obiectelor interactive n cadrul paginilor web.

Forma general a unui element HTML

Dou tipuri de elemente HTML:

Elemente pereche: se caracterizeaz prin existena a dou tag-uri : de deschidere, coninnd numele elementului i atributele acestuia)

de nchidere, coninnd numele elementului precedat de semnul slash /

Acesta reprezint un paragraf

Titlul paginii

- Elemente singulare: nu dein partea de nchidere finalizndu-se prin semnul slash coninut pe ultima poziie a tag-ului elementului:

Atribute n cadrul elementelor HTML

Atributul unui element: au, n general, forma unei perechi de nume i valori asociate, fiind utilizate pentru personalizarea modului de afiare a coninutului unui element HTML.

Atributul i valoarea asociat sunt trecute n partea de deschidere a unui element.

Valoarea unui atribut trebuie trecut ntre ghilimele. Pot exista atribute cu mai multe valori, acestea fiind separate prin

semnul ;

Forma general a unui atribut este: Nume_atribut=Valoare

Atribute comune elementelor HTML (I)

Identificatorul unui element: pentru o regsire uoar a blocurilor i elementelor unei pagini HTML se utilizeaz pentru fiecare tag atributul id, care trebuie s prezinte o valoare unic la nivel de document HTML:

Paragraf

Paragraf

Atribute comune elementelor HTML

(II)

Atributul class:

Definete apartenena unui element la o clas de elemente cu proprieti comune:

Paragraful 1

Atributul style:

Definete un grup de proprieti aferente stilului prin care un element este personalizat:

Paragraf cu fundal galben

Structura general a unei pagini HTML

Orice document HTML este definit ntre tag-urile elementului pereche HTML. Acesta deine un antet, un titlu i un corp de text, ce definete coninutul paginii web.

Declaraia tipului de document

O pagin web poate s fie definit i poate fi interpretat de ctre browser n mai multe feluri. Tipurile de limbaje pentru afiarea documentelor web:

HTML HyperText Markup Language

XHTML eXtended HyperText Markup Language

XML eXtensible Markup Language

Pentru a declara tipul de document, pagina HTML ncepe cu

declaraia:

Cascading Style Sheets (CSS)

Stilurile (Styles) - o modalitate eficient de formatare a coninutului unui document.

Permite reutilizarea formatelor stabilite pentru mai multe elemente.

O foaie de stil definit n cascad (Cascade Style Sheet) - o secven de instruciuni definite ntr-un limbaj specific utilizat pentru a descrie cum ar trebui formatat o seciune a unui document HTML.

CSS permit realizarea de abloane de formatare apelabile pentru o formatare identic a unor seciuni multiple.

Modaliti de definire a stilurilor

Stiluri specifice tag-urilor (IN-LINE) definite n interiorul unui element prin atributul Style;

Stiluri definite la nivel de document HTML (n antet) definite prin elementul situat n cadrul elementului ;

Stiluri definite n fiiere distincte (foi de stil externe) prin apelarea lor prin elementul situat n .

Definirea stilurilor specifice tag-

urilor (IN-LINE)

Se realizeaz prin utilizarea atributului STYLE,

enumernd dup semnul = proprietile i valorile acestora potrivit formatelor dorite.

Forma general:

Text

Exemplu de formatare a unei seciuni prin definirea stilului de formatare IN-LINE:

Text formatat

Definirea proprietilor de stil n antetul documentului

Permite reutilizarea stilurilor la nivelul aceluiai document. Definirea se realizeaz n interiorul elementului

Tag {proprietate1:valoare1;

proprietate2:valoare2

proprietaten:valoaren}

Tag1,...Tagn {proprietate1:valoare1; ...}

Tag:atribut {proprietate1:valoare1; ...}

Tag1.nume1 {proprietate1:valoare1; .....}

Tag1.nume2 {proprietate1:valoare1; .....}

.NumeClas {proprietate1:valoare1; .....}

Definirea stilurilor prin fiiere externe CSS

Permite separarea regulilor de formatare de codul HTML care genereaz documentul web.

Definirea regulilor se realizeaz n acelai mod ca n cazul precedent, ns ntr-un alt fiier, cu extensia .css.

Documentului HTML trebuie s i se comunice care este sursa stilurilor ce vor fi utilizate n formatare:

Formatare prin stiluri

STRUCTURA UNEI REGULI CSS

Selectorul: specific elementele sau componente ale acestora pentru care se aplic regula de formatare

Declaraia: definete cum trebuie s fie formatate elementele vizate prin selector cnd regula este aplicat.

p {color:blue;font-size:12px} selector

Declaraia

proprietate valoare

CONSTRUIREA REGULILOR DE FORMATARE

Reguli de formatare aplicate pentru mai muli selectori:

h1, h2, h3, h4, h5, h6 {

color:blue;

font-weight:bold;}

p, h3 {text-decoration:underline}

TIPURI DE SELECTORI

Selectori pentru elemente HTML:

Formatarea se aplic tuturor elementelor HTML precizate:

TIPURI DE SELECTORI

Selectori care vizeaz clase de formatare:

Formatarea se aplic doar pentru elementele HTML care posed numele clasei de formatare definit de selector:

Selectori care vizeaz un anumit element definit prin proprietatea ID:

TIPURI DE SELECTORI

COMBINAREA SELECTORILOR

Contextualizarea selectorilor de clas:

Presupune definirea explicit a unei reguli pentru un anumit element HTML aferent unei clase de

formatare:

Dei ambele elemente din exemplu prezint aceeai clas de formatare, doar pentru elementul h3 se

aplic formatarea special