Upload
cristina-ciochina
View
254
Download
0
Embed Size (px)
DESCRIPTION
LIMBAJ HTML
Citation preview
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