Laborator 04 X HTML Css

Laborator 04 - (X)HTML, CSS
02.04.2013
Programare Web
You are here: Program are W eb Laboratoare Laborator 04 - (X)HTML, CSS
Show pagesource
Old revisions
Recent changes
Index
Login
Search

Obiective: nelegerea structurii HTML i a diferenelor dintre HTML, xHTML i XML nelegerea conceptelor fundamentale ale CSS nelegerea sintaxei CSS i a modului de folosire a stilurilor n pagini web
Table of Contents
Laborator 04 - (X)HTML, CSS HTML Noiuni generale despre HTML DO CTYPE XHTML HTML 5 HTML i PHP Referine: CSS Aplicarea stilurilor pe elem ente. Selectori. Tipuri de proprieti Cascada CSS Referine: Ex ercitii
HTML
HTML a aprut ca un rspuns la necesitatea de a descrie un set de informaii ntr-un document, delimintnd anumite seciuni precum: titluri, paragrafe, liste, legaturi cu alte documente i suplimentndu-le cu formulare interactive, imagini i alte tipuri de obiecte dinamice (ex: Adobe Flash, Java Applets etc). De asemenea, n HTML pot fi incluse secvene de cod JavaScript care sunt executate de browser. Este foarte important de reinut c markup-ul trebuie s defineasc un document din punct de vedere semantic i nu din punct de vedere al reprezentrii vizuale. HTML este o instan a metalimbajului SGML (la fel cum este XML, dar fr a fi un descendent al XML). Acest lucru nseamn c n HTML vom ntlni multe elemente familiare din XML (tag-uri, atribute, structur nested etc.). Schema de mai jos ilustreaz relaia dintre SGML, HTML, XML i XHTML.
Repartizare teme Catalog PW Laboratoare Laborator 01 - Introducere Laborator 02 - BD in PHP Laborator 03 - Arrays, Magic Methods Laborator 04 - (X)HTML, CSS Laborator 05 - Formulare HTML, Persistena Datelor Laborator 06 - Securitate I Laborator 07 - Securitate II Laborator 08 - JavaScript Laborator 09 - DOM scripting Laborator 10 - AJAX Laborator 11 - Web Frameworks Teme Tema 01 - API pentru BD Tema 02 - Template System & Controller Tema 03 - Generator de formulare Tema 04 - Tree Web UI Login
Noiuni generale despre HTML

HTML are o structur arborescent al crei rdacin este tag-ul <html>. Copiii acestuia sunt tagurile <head> si <body>. Tagul <head> conine informaii generale despre document (meta-informaii informatii despre informatii) si coninutul acestuia. Tagul <body> contine informaia efectiv asociat paginii web. Exist numeroase taguri, cu semnificaii diferite. Pentru a vedea o list cu toate tagurile suportate de standard consultai aceast referin (nu conine HTML5). Tagurile HTML pot prezenta i o serie de atribute care i definesc comportamentul. De exemplu: atributul href asociat tag-ului <a> - specific adresa documentului ctre care trimite un link. atributul name asociata tagului <input> - specific 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. Pot fi comparate cu listener-i. atributul style - permite specificarea direct (inline) a stilurilor CSS pentru formatarea vizual a elementului curent. O obsevaie important este c, dei nu toate elementele suport aceleai atribute, ultimele dou tipuri de atribute de baz (stiluri i evenimente) se regsesc la toate elementele.
DOCTYPE
Un document HTML valid, trebuie s specifice (chiar la nceputul documentului) un <!DOCTYPE>. Acest tag specific browser-ului cum trebuie interpretat documentul (ca HTML 4.0, ca XHTML, ca HTML5 etc.). Pentru a vedea mai multe tipuri de declaraii putei consulta aceast list. n acelai timp, doctype-ul definete i modul n care documentul trebuie validat; validarea este o unealt foarte folositoare pentru dezvoltatori pentru c poate prinde erori subtile n structura documentului i este o baz foarte bun de pornire n relaia cu browserul (dac un document se valideaz i browserul implementeaz corect standardele, comportamentul documentului n browser devine previzibil). Ca validator, este recomandat s folosii diverselor standarde pentru web). cel oferit de w3c (organizaia responsabil cu producerea
file:///D:/Dropbox/0.Cursuri%20Clubcisco/0%20facultate%20addon%20may/a4s2/c1%20programare%20web/labs/Laborator%2004%20-%20(X)HTML,%20CSS.htm
1/7
02.04.2013
XHTML
Explozia industriei web i lejeritatea cu care browserele parseaza i interpreteaz codul HTML (n multe situaii diferit), i faptul c o pagina incorect va fi totui afiat (n unele cazuri acceptabil sau chiar corect), au condus la o situatie (actual) n care majoritatea paginilor web conin 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 c definesc layout i 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 s aib valorile prinse ntre (tagurile <A HREF=> nu sunt valide in XHTML; varianta valid 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 i compatibilitate, ce nu mai sunt bazate pe SGML Abilitatea de a folosi inline SVG i 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 i 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 i DELETE nu doar pentru GET i POST Se renun la elementele deprecated center, font, frameset, strike etc.
Error handling
Un browser HTML5 (text/html) va fi flexibil in parsarea sintaxei i va corecta eventualele erori. HTML5 este creat astfel incat vechile browsere s ignore construciile proaspt introduse. n contrast cu HTML 4.01, specificaia HTML5 ofer reguli detaliate pentru lexing i parsare, cu scopul unificrii comportamentului diferitelor browsere n cazul sintaxei incorecte. Gasiti aici cteva exemple ale forelor proaspete aduse de HTML5.
HTML i PHP
Paginile clasice HTML au extensia .html sau .htm. n instalarea default de (L/W)AMP, serverul este configurat s treac 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 i paginile .html prin interpretorul de php. Codul php integrat in pagina trebuie cuprins intre taguri php, astfel:
<head> ... </head> <body> ... <?php ... cod php ... ?> ... </body>
Referine:
Standardele: Specificaia HTML 4.01, Sitepoint HTML reference Galerie HTML5, HTML5 Demos Specificaia HTML5
CSS
Limbajul HTML nu a fost conceput pentru formatarea vizual a documentului. Taguri precum <p> asociat cu un paragraf sau <h1> asociat cu un heading nu au dect funcia de a delimita portiuni logice ale documentului.
file:///D:/Dropbox/0.Cursuri%20Clubcisco/0%20facultate%20addon%20may/a4s2/c1%20programare%20web/labs/Laborator%2004%20-%20(X)HTML,%20CSS.htm 2/7
02.04.2013
documentului. ncepnd cu specificaia HTML 3.2 au fost introduse tagurile <font> i ntregul set de atribute de formatare (culori, dimensiuni, fonturi, etc), provocnd un haos la nivelul dezvoltatorilor de site-uri. Pentru a obine formatarea dorit, fiecare poriune de document trebuia s primeasc atributele necesare (de culoare, de font, etc), chiar daca ele erau deseori aceleai. Pentru a rezolva aceasta problema, a fost introdus un nivel de prezentare care s izoleze elementele de formatare/stil i s 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 pagin sau n atributul style= al elementului destinaie. Un exemplu de clas n css ar fi:
/* Se aplic 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 i 15 pixeli n partea stng (mai multe detalii la seciunea box-model), apoi seteaza fontul default pentru tagurile care au acea clas, 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 conine mai multe seturi de reguli. Exist mai multe tipuri de selectori n sintaxa CSS. Selectorii au rolul sugerat de nume - specific modul de selecie al elementelor asupra crora se va aplica regula. Primul tip de selector este cel utilizat mai sus (se observ prefixul .). El asociaz un set de reguli cu o clas. Toate tagurile ce au setat atributul class=content vor fi formatate n consecin. Al doilea tip de selector asociaz un set de reguli cu toate elementele HTML de un anumit tip din pagin, de exemplu:
/* se aplic pe toate elementele <p> din pagin */
p { width: 750px; font-family: Tahoma; }
A treilea tip de selector asociaz regulile elementului care are id-ul specificat. Ea funcioneaz astfel:
/* se aplic pe elementul ca <a id="noLine">Link fara subliniere</a> */
#noLine { text-decoration:none; }
Mai exist dou tipuri de selectori: pseudo-clase - :hover, :visited etc. i pseudo-elemente :before, :after, :first-letter etc. Aceste elemente nu sunt tratate n laborator, ns putei trece n revist referinele dac dorii mai multe informaii. Se observ similaritatea cu prima metod: proprietatea id inlocuiete class, iar prefixul . este inlocuit cu #.
Combinarea selectorilor
Pe langa aceste variante, selectorii se pot combina. De exemplu:
.myClass {
/* se aplic tuturor elementelor care au clasa myClass */

} a.myClass {
/* se aplic doar elementelor <a> care au clasa myClass */

} p.myClass {
/* se aplic doar elementelor <p> care au clasa myClass a se observa c stilurile de aici pot fi complet diferite de cele pentru <a class="myClass"> */
3/7
02.04.2013
} #contactForm .hidden {
/* se aplic elementelor care au clasa hidden i sunt descendeni ai (n interiorul) elementului cu id-ul contactForm */
} #errorBox p span.error.highlight {
/* se aplic elementelor span, care au ataate att clasa error ct i clasa hilight (class="error hilight") i se afl n interiorul unor tag-uri <p> care la rndul lor se afl n interiorul elementului cu id-ul errorBox */
}
Diferena ntre atributele id i class

Atributele class i id, dei sunt similare din punct de vedere al sintaxei CSS, sunt totui diferite. Atributul class se refer ntotdeauna la o clas de taguri, ce pot avea (de exemplu) acelasi stil. Atributul id se refera la un tag UNIC. Desi browserele tolereaz acest aspect n afisarea paginilor web, este considerat eronat a avea doua taguri html cu acelai id. Aadar, este recomandat s folosim class; id se poate folosi doar atunci cnd suntem siguri c elementul respectiv va fi unic. Utilitatea proprietii id va fi mai clar n laboratoarele ce urmeaza (i n legtura cu JavaScript).
Tipuri de proprieti
CSS suport un numr 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 proprieti (background-color, background-image, background-position, background-repeat) float, position, display - modul de poziionare al elementului (detalii n seciunea urmtoare) top, right, bottom, left - poziia efectiv a elementului n context margin, padding, border, width, height - dimensiunile unui element din punct de vedere al box model-ului (detalii n seciunea urmtoare) font (font-family, font-size, font-weight etc.), text-transform, text-decoration, text-align, text-shadow. Putei vedea lista complet a proprietilor CSS aici.
Poziionarea elementelor
Fiecrui element i se asociaz de ctre browser la randare un spaiu - bloc - n care vor fi afiate componentele sale interne. Poziionarea acestui bloc depinde de proprietile display i position ale elementului. display poate lua urmtoarele valori: block - implicit pentru elemente ca <div>, <p>, <blockquote> - elementul suport definirea explicit a dimensiunilor i i rezerv spaiul pe orizontal fornd o linie nou inline - implicit pentru elemente ca <span>, <img>, <strong>, <em> - dimensiunile sunt determinate implicit n funcie de coninut i nu foreaz o linie nou inline-block - permite specificarea dimensiunilor, dar fr a fora o linie nou Exist mai multe moduri de a poziiona un element n pagin, folosind proprietile position, display, float i clear. position poate lua urmtoarele valori: absolute - poziioneaz elementul absolut n funcie de cel mai apropiat printe care are position absolute sau relative relative - poziioneaz elementul relativ la poziia n care trebuia aezat iniial; celelalte elemente se poziioneaz relativ la poziia iniial a elementului fixed - poziioneaz fix elementul (indiferent de scroll sau alte evenimente din pagin) inherit - copiaz position de la printe static (valoarea implicit) - nu modific n niciun fel poziionarea elementului, el este aezat n poziia fireasc din pagin Proprietatea float poate lua urmtoarele valori: left, right, none. Dac este left sau right, elementul este mpins n stnga sau n dreapta pn atinge marginea elementului care l conine sau marginea unui alt element cu float. Considerai urmtorul cod:
<p> <img src="image.png" alt=""> text text text text </p> <p>text text text text</p>
Dac <img> ar avea float left, layout-ul ar arta n felul urmtor:
4/7
02.04.2013
Proprietatea clear poate lua aceleai valori ca float; foreaz elementele crora li se aplic s se aeze sub float-uri. Dac al doilea paragraf din exemplul anterior ar avea clear: left, atunci layoutul ar fi:
Prezentarea acestor proprieti a fost simplificat din raiuni de spaiu, consultai referina pentru informaii complete.
Box model
Calcularea dimensiunilor unui element n CSS nu se face doar prin proprietile width i height, ci i prin margin, border i padding. Figura de mai jos ilustreaz calcularea spaiului ocupat de un element.
Aceasta ar corespunde urmtoarelor 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 scurt de a declara toate marginile */ }
Observai c dimensiunile efective ale acestui element n document sunt 326x226px i nu 300x200px cum specific width i height.
Cascada CSS
Dup cum ai 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 definete cascada (C ascading StyleSheets). Procesul de selecie a regulilor este urmtorul: 1. se gsesc toate declaraiile care se aplic unui anumit element 2. se sorteaz n funcie de origine i de nivelul de importan 3. declaraiile cu acelai nivel de importan i cu aceeai origine se ordoneaz dup specificitate 4. dac au aceeai origine, importan i specificitate se aplic n ordinea n care au fost declarate
Originea stylesheet-urilor i nivelul de importan

Din punct de vedere al originii, se disting trei tipuri de stylesheet-uri (n ordinea cresctoare a prioritii):
02.04.2013
1. User agent stylesheets - stiluri predefinite de browser. Dac ncercai o pagin fr nici un stil definit, vei observa c exist anumite stiluri implicite aplicate elementelor (spre exemplu, linkurile au implicit culoarea albastr i sunt subliniate). Unele dintre aceste stiluri difer uor ntre browsere, de aceea este recomandat folosirea unui stylesheet de reset, pentru a porni de la acelai baz n orice browser. Pentru mai multe detalii, putei urmri aceast discuie. 2. Author stylesheets - stiluri definite de autorul paginii web (cele incluse n pagin prin <link>, <style> sau prin atributul style=) 3. User stylesheets - unele browsere ofer utilizatorilor posibilitatea de a supradefini stilurile paginilor i de a aplica fiierele lor deasupra celor definite de autorii paginilor i celor definite de browser. Din punct de vedere al importanei, avem dou niveluri: reguli importante i reguli normale. Regulile importante se disting prin prezena declaraiei !important i au prioritate n faa regulilor normale. !important trebuie adugat la sfritul regulii, chiar nainte de ;. !important trebuie folosit doar unde este neaprat necesar, folosirea nejustificat duce la complicarea stylesheet-urilor i le face greu de ntreinut i modificat.
p { color: blue !important; }
n funcie de origine i importan, ordinea aplicrii regulilor este (n ordinea cresctoare a prioritii): 1. 2. 3. 4. 5. reguli la nivel de browser (user-agent stylesheets) reguli cu importan normal din user stylesheets (cele aplicate de utilizator n browser) reguli cu importan normal din author stylesheets (cele definite de pagina web) reguli importante din author stylesheets (definite de pagina web) reguli importante din user stylesheets (definite de utilizatorul browserului)
Specificitatea elementelor
Dup cum am menionat anterior, dac dou seturi de reguli au aceeai origine i aceeai importan, ele sunt ordonate n funcie de specificitate. Standardul definete modul de calcul al specificitii. Specificitatea se poate calcula dup urmtorul algoritm: 1. dac declaiile provin din atributul style= al elementului (stiluri inline), au cea mai mare specificitate. 2. se numr selectorii de id-uri (#myElement) din regul. Dac regulile au acelai numr de selectori de id-uri, trecei la pasul 3. 3. se numr selectorii de clase (.myRules) din regul i numrul de pseudo-clase (:hover). Declaraia cu numrul total mai mare de astfel de selectori are specificitate mai mare. Dac au acelai numr, trecei la pasul 4. 4. se numr selectorii de tag (div) i pseudo-elemente (:first-letter). Declaraia cu numrul total mai mare de astfel de selectori are specificitate mai mare. Dac au acelai numr, trecei la pasul 4. 5. dac n toi ceilali pai regulile au ieit egale ca specificitate, se consider ordinea n care au fost declarate Pentru a uura acest proces, se poate considera urmtoarea convenie: specificitatea unui set de reguli este un numr de forma xabc, unde: x - poate lua valoarea 0 (setul de reguli este declarat n cadrul unui tag <style> sau ntrun fiier extern) sau 1 (setul de reguli este declarat inline, prin atributul style al elementului) a - numrul de selectori id b - numrul de selectori de clas c - numrul de selectori de tag Dac numrul ataat unui set de reguli este mai mare dect al altuia nseamn c setul are specificitate mai mare i se va aplica n detrimentul celuilalt. De exemplu:
#content #myId p.myclass {
/* Specificitate: 0211 */
color: red; } html body div#myId p {
color: blue; } html body#content div p {
color: yellow; } <html> <head></head>
02.04.2013
<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).
Referine:
Sitepoint CSS reference
Exercitii
Descrcai aceast arhiv i plasai fiierele ntr-un director accesibil de ctre serverul vostru web. 1. (1p) Creai o pagin simpl HTML 4.01 n care s v prezentai un hobby. Pagina ar trebui s aib minim 10 elemente distincte. Nu punei accent pe aspectul paginii, ns validai structura. Schimbai <!DOCTYPE> la XHTML strict i repetai validarea pn cnd nu mai sunt erori. Hint: Pentru validare 2. (1p) Creai o pagin simpl HTML5 i folosii urmtoarele taguri: <audio>, <video>, <header>, <footer>. Hint: Dac rulai n Firefox, inei cont c nu suport dect anumite formate de fiiere. 3. (1p) Calculai specificitatea pentru fiecare dintre regulile de mai jos:
p.message { color: green; } #home #warning p.message { color: yellow; } #warning p.message { color: white; } body#home div#warning p.message { color: blue; } p { color: teal; } * body#home>div#warning p.message { color: red; } #warning p { color: black; }
4. (1p) Creai un user stylesheet i aplicai-l n browser peste un site la alegerea voastr pentru a-i modifica aspectul ntr-un mod vizibil. Hint: userstyles.org - instalati mai intai plugin-ul pentru Firefox sau Chrome de pe aceeasi pagina. 5. (2p) Reparai pagina din directorul ex5/ pentru a o face s arte ca n acest screenshot. Trebuie s modificai doar css-ul. 6. (4p) Folosind resursele din directorul ex6/, recreai pagina prezentat n acest screenshot. Putei folosi fie HTML 4.0, fie XHTML 1.0. Pagina trebuie s fie valid i s se apropie ct mai mult vizual de screenshot-ul prezentat. Putei folosi Firefox sau Chrome ca browser de referin. Bonus: 1. (1p) Aplicai o tranziie i o transformare din specificaia CSS3 peste pagina pe care ai creat-o la punctul anterior. 2. (1p) Modificai markup-ul pentru a folosi ct mai multe elemente specifice HTML5 i validai rezultatul.
Show pagesource
Old revisions
Back to top
7/7

Laborator 04 X HTML Css

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Laborator 04 X HTML Css

Încărcat de

Drepturi de autor:

Formate disponibile

Laborator 04 - (X)HTML, CSS