Prezentare (X)HTML, CSS si HTML 5

Sursa tutorial: cursul de Programare Web – Universitatea Politehnica Bucuresti, pentru informatii la zi sunteti rugati sa vizitati acest site.

Bine v-am gasit pe ItAssistant.org! In acest tutorial va vom prezenta cateva notiuni despre HTML si CSS.

HTML

HTML a aparut ca un raspuns la necesitatea de a descrie un set de informatii într-un document, delimintand anumite sectiuni precum: titluri, paragrafe, liste, legaturi cu alte documente si suplimentandu-le cu formulare interactive, imagini si alte tipuri de obiecte dinamice (ex: Adobe Flash, Java Applets etc). De asemenea, în HTML pot fi incluse secvente de cod JavaScript care sunt executate de browser.

Este foarte important de retinut ca markup-ul trebuie sa defineasca un document din punct de vedere semantic si nu din punct de vedere al reprezentarii vizuale.

HTML este o instanta a metalimbajului SGML (la fel cum este XML, dar fara a fi un descendent al XML). Acest lucru înseamna ca în HTML vom întalni multe elemente familiare din XML (tag-uri, atribute, structura nested etc.).

Notiuni generale despre HTML

HTML are o structura arborescenta al carei radacina este tag-ul . Copiii acestuia sunt tagurile si . Tagul contine informatii generale despre document (meta-informatii – “informatii despre informatii”) si continutul acestuia. Tagul contine informatia efectiva asociata paginii web.

Tagurile HTML pot prezenta si o serie de atribute care îi definesc comportamentul.

De exemplu:

- atributul href asociat tag-ului <a> – specifica adresa documentului catre care trimite un link.

- atributul name asociata tagului <input /> – specifica numele asociat valorii introduse de utilizator.

- atributele onclick, onblur, onchange etc. – sunt utile pentru “embedding”-ul unui limbaj “client-side” si permit specificarea de actiuni particulare pentru diverse evenimente.

- atributul style – permite specificarea directa (“inline”) a stilurilor CSS pentru formatarea vizuala a elementului curent.

O obsevatie importanta este ca, desi nu toate elementele suporta aceleasi atribute, ultimele doua tipuri de atribute de baza (stiluri si evenimente) se regasesc la toate elementele.

DOCTYPE

Un document HTML valid, trebuie sa specifice (chiar la începutul documentului) un . Acest tag specifica browser-ului cum trebuie interpretat documentul (ca HTML 4.0, ca XHTML, ca HTML5 etc.). Pentru a vedea mai multe tipuri de declaratii puteti consulta aceasta lista.

În acelasi timp, doctype-ul defineste si modul în care documentul trebuie validat; validarea este o unealta foarte folositoare pentru dezvoltatori pentru ca poate prinde erori subtile în structura documentului si este o baza foarte buna de pornire în “relatia” cu browserul (daca un document se valideaza si browserul implementeaza corect standardele, comportamentul documentului în browser devine previzibil).

Ca validator, este recomandat sa folositi cel oferit de w3c (organizatia responsabila cu producerea diverselor standarde pentru web).

(X)HTML, CSS si HTML 5

XHTML

Explozia industriei web si “lejeritatea” cu care browserele parseaza si interpreteaza codul HTML (în multe situatii diferit), si faptul ca o pagina incorecta va fi totusi afisata (în unele cazuri acceptabil sau chiar corect), au condus la o situatie (actuala) în care majoritatea paginilor web contin erori.

XHTML este o incercare de a contracara acest fenomen. Spre deosebire de ultimele versiuni HTML, XHTML ca si standard-de-limbaj are reguli stricte.

Enumeram cateva dintre ele:

  • taguri ca <b>,<i>,<font> nu mai sunt admise, pentru ca definesc layout si nu semantica documentului
  • tagurile trebuie sa fie intotdeauna inchise; tagurile simple trebuie inchise cu /> (spre exemplu, tagul <br> din HTML 4.0 este valid scris in XHTML astfel: <br /> )
  • toate tagurile sau atributele acestora trebuie scrise lowercase iar atributele trebuie sa aiba valorile prinse între ”” (tagurile <A HREF=…> nu sunt valide in XHTML; varianta valida este <a href=”…”> ).

HTML 5

HTML5 este urmatorul standard propus pentru a inlocui HTML 4.01 si XHTML 1.0. Scopul sau este de a reduce nevoia de aplicatii bazate pe plug-in-uri precum Adobe Flash, Microsoft Silverlight, Apache Pivot, si Sun JavaFX.

Acest standard este inca in progres de dezvoltare insa unele parti au fost deja implementate la nivel de browser.
Diferentele majore fata de versiunea anterioara sunt:

  • Reguli noi de parsare axate pe flexibilitate si compatibilitate, ce nu mai sunt bazate pe SGML
  • Abilitatea de a folosi inline SVG si MathML în text/html
  • Elemente noi – article, aside, audio, canvas, command, details, datalist, dialog, embed, figure, footer, header, hgroup, keygen, mark, meter, nav, progress, output, rp, rt, ruby, section, source, time, video
  • Tipuri noi de controale pentru formulare – dates and times, email, url, search
  • Atribute noi – ping (pe a si area), charset (pe meta), async (pe script)
  • Atribute globale (ce pot fi aplicate pentru fiecare element in parte) – id, tabindex, hidden, data-* (custom data attributes)
  • Formulare vor primi suport pentru metodele PUT si DELETE nu doar pentru GET si POST
  • Se renunta la elementele deprecated – center, font, frameset, strike etc.

Error handling

Un browser HTML5 (text/html) va fi flexibil in parsarea sintaxei si va corecta eventualele erori.

HTML5 este creat astfel incat vechile browsere sa ignore constructiile proaspat introduse. În contrast cu HTML 4.01, specificatia HTML5 ofera reguli detaliate pentru lexing si parsare, cu scopul unificarii comportamentului diferitelor browsere în cazul sintaxei incorecte.

HTML si PHP

Paginile clasice HTML au extensia .html sau .htm. În instalarea default de (L/W)AMP, serverul este configurat sa treaca prin interpretorul PHP doar paginile care au extensia .php.

Pentru a putea interpreta codul php inserat in interiorul unei pagini scrise in format HTML, extensia paginii trebuie modificata in .php sau serverul trebuie configurat pentru a trece si paginile .html prin interpretorul de php. Codul php integrat in pagina trebuie cuprins intre taguri php, astfel:

    <head>
        ...
    </head>
 
    <body>
        ...
        <?php
            ... cod php ...
        ?>
        ...
    </body>

CSS

Limbajul HTML nu a fost conceput pentru formatarea vizuala a documentului. Taguri precum <p> asociat cu un paragraf sau <h1> asociat cu un heading nu au decat functia de a delimita portiuni logice ale documentului.

Începand cu specificatia HTML 3.2 au fost introduse tagurile <font> si întregul set de atribute de formatare (culori, dimensiuni, fonturi, etc), provocand un haos la nivelul dezvoltatorilor de site-uri. Pentru a obtine formatarea dorita, fiecare portiune de document trebuia sa primeasca atributele necesare (de culoare, de font, etc), chiar daca ele erau deseori aceleasi.

Pentru a rezolva aceasta problema, a fost introdus un nivel de prezentare care sa izoleze elementele de formatare/stil si sa le elimine din documentul HTML propriu-zis. Acest lucru s-a realizat prin introducerea CSS (Cascading Style Sheets).

CSS permite definirea stilurilor vizuale separat – în fisiere separate (*.css), între taguri <style>, în pagina sau în atributul style=”…” al elementului destinatie.

Un exemplu de clasa în css ar fi:

/* Se aplica pe elemente ca <p class="content">Text-ul meu<p> */
.content {
    padding: 50px 0 0 15px;
    font-family:Tahoma;
    color:#333333;
    font-size:11px;
    font-weight:bold;
}

Stilul content formateaza un tag HTML astfel: impune un padding de 50 de pixeli în partea de sus si 15 pixeli în partea stanga, apoi seteaza fontul default pentru tagurile care au acea clasa, culoarea acestuia, dimensiunea fontului, si in final specifica in plus ca fontul redat sa fie bold.

Includerea unui fisier de stiluri .css intr-un document HTML se face prin tagul <link>. Acesta trebuie introdus în interiorul tagului <head> al documentului HTML.

<link rel="stylesheet" type="text/css" href="[nume-css].css" >

Aplicarea stilurilor pe elemente. Selectori.

Un fisier CSS poate contine mai multe seturi de reguli.

Exista mai multe tipuri de selectori în sintaxa CSS. Selectorii au rolul sugerat de nume – specifica modul de selectie al elementelor asupra carora se va aplica regula. Primul tip de selector este cel utilizat mai sus (se observa prefixul .). El asociaza un set de reguli cu o “clasa”. Toate tagurile ce au setat atributul class=“content” vor fi formatate în consecinta.

Al doilea tip de selector asociaza un set de reguli cu toate elementele HTML de un anumit tip din pagina, de exemplu:

/* se aplica pe toate elementele <p> din pagina */
p {
    width: 750px;
    font-family: Tahoma;
}

A treilea tip de selector asociaza regulile elementului care are id-ul specificat. Ea functioneaza astfel:

/* se aplica pe elementul ca <a id="noLine">Link fara subliniere</a> */
#noLine {
    text-decoration:none;
}

Mai exista doua tipuri de selectori: pseudo-clase – :hover, :visited etc. si pseudo-elemente – :before, :after, :first-letter etc.

Se observa similaritatea cu prima metoda: proprietatea id inlocuieste class, iar prefixul . este inlocuit cu #.

Combinarea selectorilor

Pe langa aceste variante, selectorii se pot combina. De exemplu:

.myClass {
	/* se aplica tuturor elementelor care au clasa myClass */
}
 
a.myClass {
	/* se aplica doar elementelor <a> care au clasa myClass */
}
 
p.myClass {
	/* se aplica doar elementelor <p> care au clasa myClass 
	   a se observa ca stilurile de aici pot fi complet diferite
	   de cele pentru <a class="myClass">
	*/
}
 
#contactForm .hidden {
	/* se aplica elementelor care au clasa hidden si sunt descendenti ai
	(în interiorul) elementului cu id-ul contactForm */
}
 
#errorBox p span.error.highlight {
	/* se aplica elementelor span, care au atasate atat clasa error cat si clasa
	hilight (class="error hilight") si se afla în interiorul unor tag-uri <p> care
	la randul lor se afla în interiorul elementului cu id-ul errorBox */
}

Diferenta între atributele id si class

Atributele class si id, desi sunt similare din punct de vedere al sintaxei CSS, sunt totusi diferite.

Atributul class se refera întotdeauna la “o clasa de taguri”, ce pot avea (de exemplu) acelasi stil.

Atributul id se refera la un tag UNIC. Desi browserele tolereaza acest aspect în afisarea paginilor web, este considerat eronat a avea doua taguri html cu acelasi id.

Asadar, este recomandat sa folosim class; id se poate folosi doar atunci cand suntem siguri ca elementul respectiv va fi unic.

Tipuri de proprietati

CSS suporta un numar mare de tipuri de reguli ce se pot aplica elementelor. Cele mai uzuale sunt:

  • color - foreground color, culoarea textului din elementul specificat
  • background - fundalul unui element, compune mai multe proprietati (background-color, background-image, background-position, background-repeat)
  • float, position, display – modul de pozitionare al elementului
  • top, right, bottom, left – pozitia efectiva a elementului în context
  • margin, padding, border, width, height – dimensiunile unui element din punct de vedere al box model-ului
  • font (font-family, font-size, font-weight etc.), text-transform, text-decoration, text-align, text-shadow.

Pozitionarea elementelor

Fiecarui element i se asociaza de catre browser la randare un spatiu – bloc – în care vor fi afisate componentele sale interne. Pozitionarea acestui bloc depinde de proprietatile display si position ale elementului.

display poate lua urmatoarele valori:

  • block - implicit pentru elemente ca <div>, <p>, <blockquote> – elementul suporta definirea explicita a dimensiunilor si îsi “rezerva” spatiul pe orizontala fortand o linie noua
  • inline - implicit pentru elemente ca <span>, <img>, <strong>, <em> – dimensiunile sunt determinate implicit în functie de continut si nu forteaza o linie noua
  • inline-block – permite specificarea dimensiunilor, dar fara a forta o linie noua

Exista mai multe moduri de a pozitiona un element în pagina, folosind proprietatile position, display, float si clear.

position poate lua urmatoarele valori:

  • absolute - pozitioneaza elementul absolut în functie de cel mai apropiat parinte care are position absolute sau relative
  • relative - pozitioneaza elementul relativ la pozitia în care trebuia asezat initial; celelalte elemente se pozitioneaza relativ la pozitia initiala a elementului
  • fixed - pozitioneaza fix elementul (indiferent de scroll sau alte evenimente din pagina)
  • inherit - copiaza position de la parinte
  • static (valoarea implicita) – nu modifica în niciun fel pozitionarea elementului, el este asezat în pozitia fireasca din pagina

Proprietatea float poate lua urmatoarele valori: left, right, none. Daca este left sau right, elementul este împins în stanga sau în dreapta pana atinge marginea elementului care îl contine sau marginea unui alt element cu float.

Considerati urmatorul cod:

<p>
  <img src="image.png" alt="">
   text text … text text
</p>
<p>text text … text text</p>

Daca <img> ar avea float left, layout-ul ar arata în felul urmator:

(X)HTML, CSS si HTML 5

Proprietatea clear poate lua aceleasi valori ca float; forteaza elementele carora li se aplica sa se aseze sub float-uri. Daca al doilea paragraf din exemplul anterior ar avea clear: left, atunci layoutul ar fi:

(X)HTML, CSS si HTML 5

Box model

Calcularea dimensiunilor unui element în CSS nu se face doar prin proprietatile width si height, ci si prin margin, border si padding. Figura de mai jos ilustreaza calcularea spatiului ocupat de un element.

(X)HTML, CSS si HTML 5

Aceasta ar corespunde urmatoarelor reguli:

div {
   width: 300px;
   height: 200px;
   padding: 10px 10px 10px 10px; /* putea fi scris doar ca 10px */
   border: 1px solid #000;
   margin: 15px; /* aici s-a folosit varianta scurta de a declara toate marginile */
}

Observati ca dimensiunile efective ale acestui element în document sunt 326x226px si nu 300x200px cum specifica width si height.

Cascada CSS

Dupa cum ati putut vedea, asupra unui element se pot aplica mai multe seturi de reguli definite în CSS. Pentru a decide ordinea în care trebuie aplicate stilurile, standardul defineste cascada (Cascading StyleSheets).

Procesul de selectie a regulilor este urmatorul:

1. se gasesc toate declaratiile care se aplica unui anumit element

2. se sorteaza în functie de origine si de nivelul de importanta

3. declaratiile cu acelasi nivel de importanta si cu aceeasi origine se ordoneaza dupa specificitate

4. daca au aceeasi origine, importanta si specificitate se aplica în ordinea în care au fost declarate

Originea stylesheet-urilor si nivelul de importanta

Din punct de vedere al originii, se disting trei tipuri de stylesheet-uri (în ordinea crescatoare a prioritatii):

1. User agent stylesheets – stiluri predefinite de browser. Daca încercati o pagina fara nici un stil definit, veti observa ca exista anumite stiluri implicite aplicate elementelor (spre exemplu, linkurile au implicit culoarea albastra si sunt subliniate). Unele dintre aceste stiluri difera usor între browsere, de aceea este recomandata folosirea unui stylesheet de reset, pentru a porni de la acelasi baza în orice browser.

2. Author stylesheets – stiluri definite de autorul paginii web (cele incluse în pagina prin <link>, <style> sau prin atributul style=”…”)

3. User stylesheets – unele browsere ofera utilizatorilor posibilitatea de a supradefini stilurile paginilor si de a aplica fisierele lor “deasupra” celor definite de autorii paginilor si celor definite de browser.

Din punct de vedere al importantei, avem doua niveluri: reguli importante si reguli normale.

Regulile importante se disting prin prezenta declaratiei !important si au prioritate în fata regulilor normale. !important trebuie adaugat la sfarsitul regulii, chiar înainte de ;. !important trebuie folosit doar unde este neaparat necesar, folosirea nejustificata duce la complicarea stylesheet-urilor si le face greu de întretinut si modificat.

p {
  color: blue !important;
}

În functie de origine si importanta, ordinea aplicarii regulilor este (în ordinea crescatoare a prioritatii):

1. reguli la nivel de browser (user-agent stylesheets)

2. reguli cu importanta normala din user stylesheets (cele aplicate de utilizator în browser)

3. reguli cu importanta normala din author stylesheets (cele definite de pagina web)

4. reguli importante din author stylesheets (definite de pagina web)

5. reguli importante din user stylesheets (definite de utilizatorul browserului)

Specificitatea elementelor

Dupa cum am mentionat anterior, daca doua seturi de reguli au aceeasi origine si aceeasi importanta, ele sunt ordonate în functie de specificitate. Standardul defineste modul de calcul al specificitatii. Specificitatea se poate calcula dupa urmatorul algoritm:

1. daca declatiile provin din atributul style=”…” al elementului (stiluri inline), au cea mai mare specificitate.

2. se numara selectorii de id-uri (#myElement) din regula. Daca regulile au acelasi numar de selectori de id-uri, treceti la pasul 3.

3. se numara selectorii de clase (.myRules) din regula si numarul de pseudo-clase (:hover). Declaratia cu numarul total mai mare de astfel de selectori are specificitate mai mare. Daca au acelasi numar, treceti la pasul 4.

4. se numara selectorii de tag (div) si pseudo-elemente (:first-letter). Declaratia cu numarul total mai mare de astfel de selectori are specificitate mai mare. Daca au acelasi numar, treceti la pasul 4.

5. daca în toti ceilalti pasi regulile au iesit egale ca specificitate, se considera ordinea în care au fost declarate

Pentru a usura acest proces, se poate considera urmatoarea conventie: specificitatea unui set de reguli este un numar de forma xabc, unde:

x - poate lua valoarea 0 (setul de reguli este declarat în cadrul unui tag <style> sau într-un fisier extern) sau 1 (setul de reguli este declarat inline, prin atributul style al elementului)

a - numarul de selectori id

b - numarul de selectori de clasa

c - numarul de selectori de tag

Daca numarul atasat unui set de reguli este mai mare decat al altuia înseamna ca setul are specificitate mai mare si se va aplica în detrimentul celuilalt. De exemplu:

#content #myId p.myclass {
	/* Specificitate: 0211 */
	color: red;
}
 
html body div#myId p {
	/* Specificitate: 0104 */
	color: blue;
}
 
html body#content div p {
	/* Specificitate: 0104 */
	color: yellow;
}
<html>
    <head></head>
	<body id="content">
		<div id="myId">
			<p class="myClass" style="color: gray;">Test</p>
		</div>
	</body>
</html>

Textul va avea culoarea gri, deoarece specificitatea stilului inline e cea mai mare (1000 > 0211 > 0104 > 0104).

Related posts:

  1. Formulare HTML – setarea de sesiuni si cookies in PHP
  2. Aspecte cheie ale dezvoltarii aplicatiilor WEB
  3. Scurta introducere in HTML 1 – competente digitale
  4. Scurta introducere in HTML 2 – competente digitale
  5. Securitatea aplicatiilor WEB – partea I
Tags: , , , , , ,

V-a placut acest tutorial? Aveti anumite sugestii pentru urmatoarele tutoriale video? Lasati un comentariu! Feedback-ul vostru este foarte important pentru noi.

Pentru intrebari mai elaborate, cu caracter general, va rugam folositi forumul si in cel mai scurt timp veti primi un raspuns. Astfel ii vom ajuta si pe ceilalti sa invete din eventualele probleme.