Post on 10-Jan-2016
description
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