PW-note de curs v1 (1)

Click here to load reader

  • date post

    28-Nov-2015
  • Category

    Documents

  • view

    68
  • download

    3

Embed Size (px)

Transcript of PW-note de curs v1 (1)

  • SERGIU CHILAT

    PROGRAMARE WEB

    NOTE DE CURS

    Bli -2013

  • ~ 2 ~

    CUPRINS

    1. NOIUNEA DE SITE. PROTOCOALE. WEB SERVERE.

    DOMENII ................................................................................................ 6

    1.1. World Wide Web ......................................................................... 6 1.1.1. Web 1.0 consumatori de coninut ..................................... 7 1.1.2. Web 2.0 interaciunea cu coninutul ................................. 8 1.1.3. Web 3.0 (Web semantic) creatori de coninut .................. 8

    1.2. Noiunea de site web ................................................................... 8 1.3. Protocolul Internet ..................................................................... 10 1.4. Servere web ............................................................................... 10 1.5. Domenii ..................................................................................... 11

    2. LIMBAJUL HTML ........................................................................... 14

    2.1. Standarde HTML ....................................................................... 14 2.2. Noiuni de baz .......................................................................... 15 2.3. Structura unui fiier HTML ....................................................... 16

    2.3.1. Elementul doctype ............................................................. 17 2.3.2. Elementul html .................................................................. 18 2.3.3. Elementul head .................................................................. 18 2.3.4. Elementul title ................................................................... 18 2.3.5. Elementul body.................................................................. 18

    2.4. Atribute ...................................................................................... 18 2.4.1. Atributele de baz .............................................................. 18 2.4.2. Atribute de internaionalizare ............................................ 19 2.4.3. Atribute generice ............................................................... 20

    2.5. Elemente de marcare ................................................................. 21 2.5.1. Taguri de formatare i structurare a textului ..................... 21 2.5.2. Tagurile div i span ........................................................... 21 2.5.3. Imagini .............................................................................. 23 2.5.4. Hiperlincuri ....................................................................... 24 2.5.5. Tabele ................................................................................ 25 2.5.6. Liste ................................................................................... 30

    2.6. Meta taguri ................................................................................ 31 2.7. Caractere speciale i entiti ...................................................... 31

  • ~ 3 ~

    2.8. Comentarii ................................................................................. 32 2.9. Formulare .................................................................................. 33

    2.9.1. Containerul form ............................................................... 33 2.9.2. Elementul input ................................................................. 34 2.9.3. Elementul select ................................................................ 37 2.9.4. Elementul textarea ............................................................. 38

    nsrcinri ......................................................................................... 40

    3. STILURI CSS .................................................................................... 44

    3.1. Sintaxa CSS ............................................................................... 45 3.2. Valorile proprietilor ................................................................ 45

    3.2.1. Numere .............................................................................. 45 3.2.2. Procente ............................................................................. 45 3.2.3. Dimensiunea elementelor .................................................. 46 3.2.4. Culoarea elementelor ......................................................... 47 3.2.5. Adrese ............................................................................... 48

    3.3. Metode de conectare a stilurilor CSS n pagin ........................ 48 3.3.1. CSS intern - direct n eticheta HTML (in-line) ................. 48 3.3.2. ncapsulate n antetul fiierului HTML (embedded) ......... 48 3.3.3. Fiiere CSS externe (linked) ............................................. 49

    3.4. Aplicarea stilurilor CSS unuia sau mai multor elemente .......... 50 3.4.1. Aplicarea stilurilor CSS unui singur element prin style .... 51 3.4.2. Aplicarea stilurilor CSS unui singur element prin id ........ 51 3.4.3. Aplicarea stilurilor CSS mai multor elemente prin class .. 52 3.4.4. Aplicarea stilurilor CSS la nivel de tag ............................. 53 3.4.5. Selectorul universal ........................................................... 53 3.4.6. Prioritatea aplicrii proprietilor CSS .............................. 54

    3.5. Proprieti CSS .......................................................................... 54 3.6. Standarde CSS ........................................................................... 59 3.7. Avantajele utilizrii stilurilor CSS ............................................ 60 3.8. Validarea codului CSS .............................................................. 61 nsrcinri ......................................................................................... 62

    4. LIMBAJUL SERVER PHP ............................................................... 66

    4.1. Sintaxa limbajului PHP ............................................................. 68 4.2. Variabile n PHP ........................................................................ 69 4.3. Constante ................................................................................... 71 4.4. iruri de caractere ...................................................................... 72

  • ~ 4 ~

    4.4.1. Metode de definire a irurilor ............................................ 72 4.4.2. Funcii de prelucrare a irurilor de caractere ..................... 74

    4.5. Variabile numerice .................................................................... 80 4.6. Variabile logice ......................................................................... 81 4.7. Operatori PHP ........................................................................... 82 4.8. Masive ....................................................................................... 84

    4.8.1. Definirea unui masiv ......................................................... 84 4.8.2. Funcii de prelucrare a masivelor ...................................... 86

    4.9. Variabile superglobale ............................................................... 91 4.9.1. Masivele superglobale GET i POST ................................ 91 4.9.2. Masivul superglobal SERVER .......................................... 92 4.9.3. Masivul superglobal COOKIE .......................................... 93 4.9.4. Masivul superglobal SESSION ......................................... 96

    4.10. SGBD MySQL ...................................................................... 100 4.10.1. Conectarea la serverul MySQL ..................................... 101 4.10.2. Selectarea informaiei din tabel ................................... 101 4.10.3. Introducerea informaiei n tabel ................................. 102 4.10.4. Modificarea informaiei din tabel ................................ 103 4.10.5. tergerea informaiei din tabel..................................... 103 4.10.6. Lista de funcii PHP pentru lucrul cu MySQL .............. 103

    4.11. Lucrul cu fiierele .................................................................. 112 4.12. ncrcarea fiierelor pe server................................................ 115 4.13. Prelucrarea fiierelor grafice. Biblioteca GD ....................... 116

    4.13.1. Crearea dinamica a imaginilor....................................... 117 4.13.2. Redimensionarea imaginilor .......................................... 119

    4.14. Lucrul cu data i timpul n PHP ............................................ 122 4.15. Funcia mail ........................................................................... 126 4.16. Securitatea scripturilor PHP .................................................. 126

    4.16.1. Variabile globale ........................................................... 127 4.16.2. Ghilimele magice i SQL injection ............................... 127 4.16.3. Criptarea parolelor ......................................................... 129 4.16.4. Fiierul .htaccess ........................................................... 129

    nsrcinri ....................................................................................... 130

    5. LIMBAJUL CLIENT JAVASCRIPT.............................................. 134

    5.1. Sintaxa JavaScript ................................................................... 134 5.1.1. Ascunderea codului in browserele vechi ......................... 135 5.1.2. Convenii de sintax ........................................................ 136

  • ~ 5 ~

    5.2. Variabile i tipuri de date ........................................................ 137 5.3. Operatori .................................................................................. 138

    5.3.1. Operatori aritmetici ......................................................... 138 5.3.2. Operatori de atribuire ...................................................... 139 5.3.3. Operatori de comparare ................................................... 139 5.3.4. Operatori logici (booleeni) .............................................. 140 5.3.5. Operator pentru iruri de caractare .................................. 141 5.3.6. Operatorul typeof ............................................................ 141 5.3.7. Operatori pentru structuri de date (obiecte) .................... 141 5.3.8. Operatorul conditional "?" ............................................... 142 5.3.9. Ordinea operatorilor ........................................................ 142

    5.4. Funcii ...................................................................................... 143 5.5. Ferestre de dialog .................................................................... 145

    5.5.1. Fereastra Alert ................................................................. 145 5.5.2. Fereastra Prompt ............................................................. 145 5.5.3. Fereastra Confirm ............................................................ 146

    5.6. Obiecte..................................................................................... 147 5.6.1. Obiectul String ................................................................ 147 5.6.2. Obiectul Array ................................................................. 148 5.6.3. Obiectul Date................................................................... 150 5.6.4. Obiectul Math .................................................................. 152

    5.7. Ierarhia JavaScript ................................................................... 153 5.7.1. Obiectul document ........................................................... 154 5.7.2. Obiectul form................................................................... 156 5.7.3. Lucrul cu getElementById .............................................. 158

    5.8. Prelucrarea evenimentelor ....................................................... 160 nsrcinri ....................................................................................... 163

    LITERATUR RECOMANDAT .................................................... 165

  • ~ 6 ~

    1. NOIUNEA DE SITE. PROTOCOALE. WEB SERVERE.

    DOMENII

    1.1. World Wide Web

    Termenul World Wide Web, abreviat WWW sau www, numit

    scurt i web, care n englez nseamn reea mondial respectiv reea. WWW este un sistem de documente i informaii de tip hipertext legate ntre ele care pot fi accesate prin reeaua mondial de Internet. Documentele, care se pstreaz n diferite locaii, pe diverse calculatoare server, pot fi regsite cu ajutorul unui identificator univoc numit URI. Hipertextul inclusiv imagini etc. este afiat cu un ajutorul unui program de navigare n web numit browser, care descarc paginile web de pe un server web i le afieaz pe un terminal client la utilizator(PC, telefon mobil, etc.).

    WWW este numai unul din numeroasele servicii i aplicaii informatice disponibile n Internet. Mai exist i alte servicii, ca de exemplu: pota electronic - e-mail, transferul de fiiere de date i informaii - FTP, chat, aplicaii video, servicii de telefonie i telefonie cu imagine prin Internet de tip VoIP, posturi de radio i televiziune prin Internet, e-commerce, sisteme de jocuri interactive .a.

    Browserele actuale pot nu numai s afieze pagini web, ci ofer i interfee pentru o mare parte din celelalte servicii Internet, avnd astfel un efect integrator (pentru toate serviciile e suficient un singur

    browser). De aceea graniele dintre serviciul WWW i celelalte servicii din Internet nu sunt ntotdeauna clare.

    Webul a fost inventat n 1989 la Centrul European de Cercetri Nucleare (CERN) din Geneva, Elveia. Propunerea iniial de creare a unei colecii de documente avnd legturi ntre ele a fost fcut de Tim Berners-Lee n martie 1989. Propunerea a aprut n urma problemelor de comunicare pe care le ntmpinau echipele de cercettori ce foloseau centrul, chiar i folosind pota electronic.

    Primul prototip al acestei colecii (mai nti n format de text simplu) a aprut nu mult nainte de decembrie 1991, cnd s-a fcut prima lui demonstraie public. Studiul a fost continuat prin apariia primei aplicaii grafice Mosaic, n februarie 1993, realizat de cercettorul Marc Andreessen de la centrul universitar National Center

  • ~ 7 ~

    for Supercomputing Applications (NCSA) din oraul Urbana-Champaign din statul federal Illinois, SUA.

    n 1994 CERN i M.I.T. au format Consortiul World Wide Web, care are drept obiectiv dezvoltarea webului, standardizarea protocoalelor

    i ncurajarea legturilor dintre situri. Berners-Lee a devenit directorul acestui consortiu. M.I.T. coordoneaz partea american a consoriului, iar partea european este coordonat de INRIA, centrul de cercetari francez.

    n 1995 Andreessen prsete NCSA i nfiineaz o noua companie, Netscape Communications Corp., care se ocup cu dezvoltarea de software pentru web.

    Apoi webul a evoluat pn la ceea ce este astzi, un serviciu multimedia integrativ, avnd ca suport fizic Internetul.

    Berners-Lee i echipa sa au realizat primele versiuni pentru patru componente cheie necesare serviciului web, i anume:

    protocolul de intercomunicaie HTTP;

    limbajul de descriere a hipertextului HTML, pentru a putea fi afiat de browser;

    serverul de web;

    browserul. La baza funcionrii webului stau 3 standarde, i anume:

    (HTTP) - Hypertext Transfer Protocol, stiva de protocoale OSI prin care serverul web i browserul clientului (utilizatorului) comunic ntre ele;

    (HTML) - Hypertext Markup Language, standard de definire i prezentare a paginilor web.

    (URI) - Uniform Resource Identifier, sistem universal de identificare a resurselor din web, folosit pentru a identifica i regsi paginile web.

    Urmtoarele standarde sunt definite mai trziu:

    Cascading Style Sheets (CSS);

    JavaScript;

    Hypertext Transfer Protocol Secure - HTTPS.

    1.1.1. Web 1.0 consumatori de coninut

    Coninut resurselor on-line este format de un grup relativ mic de profesioniti, iar marea majoritatea utilizatorilor de internet sunt doar

  • ~ 8 ~

    simpli "cititori." n primul deceniu al reelei Internet, sau Web 1.0, a fost dezvoltat baza Internetului, care a permis deschiderea accesului la cantiti uriae de informaii pentru o gam larg de utilizatori ai reelei.

    1.1.2. Web 2.0 interaciunea cu coninutul

    Utilizatorii reelei sunt participani activi la crearea coninutului resurselor web. Web 2.0 a aprut n 2005, i pn n prezent s-au dezvoltat diferite interfee care permit utilizatorilor s gestioneze coninutul reelei Internet i comunice unul cu cellalt.

    1.1.3. Web 3.0 (Web semantic) creatori de coninut

    Web 3.0 este un web al filtrrii datelor n funcie de sensul i noiunea acestora. Pentru prima dat, noiunea de Web 3.0 apare n 2007. Ateptat de muli, web 3.0 a dat startul unei noi epoci a internetului ncepnd cu luna ianuarie a anului 2012. Implementarea sa vine fcuta pas cu pas, astfel nct nici azi nu se poate vorbi despre un internet web 3.0 care s ruleze la capacitate maxim. Motivul pentru care implementarea web 3.0 este destul de greoaie(spre deosebire de

    web 2.0) se datoreaz n principal capacitii de calcul insuficiente.

    1.2. Noiunea de site web

    Noiunea site web provine din expresia englez web site i desemneaz o grup de pagini web multimedia (coninnd texte, imagini fixe, animaii .a.), accesibile n Internet n principiu oriicui, de obicei pe o tem anumit, i care sunt conectate ntre ele prin aa-numite hiperlinkuri. Diversele site-uri web pot fi create de ctre o organizaie, o persoan particular, instituii publice etc.

    De obicei un site web este administrat (creat, ntreinut i actualizat) de ctre un aa-numit webmaster, dar exist i alte posibiliti:

    site-ul web se actualizeaz automat i permanent pe baza unei baze de date;

    paginile sale se creeaz n mod dinamic i automat n funcie de aciunea utilizatorului n cadrul unei aplicaii web;

    site-ul web se creeaz i e administrat chiar de ctre utilizatorii si(Web 2.0).

    La nceputurile Internetului fiecare site web se accesa prin indicarea adresei sale numerice specifice (adresa IP), de ex.

  • ~ 9 ~

    155.284.317.027. Ulterior pentru site-urile web s-au introdus i numele de domenii, care permit indicarea adresei respective n mod mult mai comod, prin cuvinte sau nume uor de reinut, ca de exemplu 'www.wikipedia.org'. Adresele de site-uri web trebuie s fie clar stabilite, unice n lume i chiar garantate pentru posesorul respectiv.

    Un site web este alctuit de regul din mai multe pagini web. O pagin web este un document creat cu ajutorul limbajului de marcare HTML i (opional) limbaje de programare cum ar fi PHP, ASP .a. fiind accesibil vizitatorilor prin intermediul protocolului HTTP, care transfer informaia de la server la browser. Pagina web se numete aa deoarece, afiat pe un monitor, ea se aseamn cu o pagin de ziar: de obicei paginile web au o lime care ncape n ntregime pe ecran. n schimb, pagina poate fi chiar mult mai nalt (adnc) dect nlimea ecranului, ea putnd fi totui uor afiat cu ajutorul funciilor normale ale mausului i browserului folosite, prin "tragere" n sus i n jos. De asemenea, un site web poate fi vizualizat pe orice dispozitiv conectat la

    Internet capabil s afieze informaii prin intermediul protocolului HTTP (unele telefoane mobile, PDA-uri, etc.).

    Un site alctuit din mai multe pagini are de obicei o pagin iniial sau principal numit homepage, de la care pleac legturi ctre paginile interioare, secundare. Structurile i schemele de "navigare" din interiorul site-urilor web sunt foarte diferite, n funcie de scopurile, dorinele i posibilitile ofertantului de informaii. De obicei aceast homepage este chiar pagina de start a site-ului, pe care ofertantul de

    informaii n web o face cunoscut la public drept punct de plecare pentru ntregul site web al su.

    Site-urile web se pot clasifica dup o mulime de factori, dar principalul factor rmne subiectul de activitate (sau coninutul) sitului. Din punct de vedere tehnologic un site web poate fi alctuit din orice tipuri de date i informaii statice, camere de discuii, produse i servicii de vnzare, anunuri, formulare de completat online, sunete digitalizate, clipuri video, imagini statice i animate, efecte speciale, meniuri dinamice i multe, multe altele. Vorbind la un nivel mai nalt, subiectul (tema) unui site web poate fi: un aa-numit blog, portal web, catalog web, magazin virtual, banc, universitate virtual, bibliotec, enciclopedie virtual, revist web, ziar web i aproape orice altceva.

    Dac la nceput nu s-a pus accent prea mare pe latura estetic, n zilele de azi se acord o importan din ce n ce mai mare nu numai

  • ~ 10 ~

    coninutului de informaii al unui site web, dar i esteticii, dinamicii i atractivitii lui.

    La ora actual Internetul conine sute de milioane de pagini web, pe cele mai variate subiecte i limbi.

    1.3. Protocolul Internet

    Protocolul Internet (sau IP din engl. Internet Protocol) este o

    metod sau un protocol prin care datele sunt trimise de la un calculator la altul prin intermediu Internetului. Fiecare calculator (cunoscut sub

    denumirea de gazd), are pe Internet cel puin o adres IP unic, care l identific ntre toate computerele din reea. Cnd cineva trimite sau primete informaii (de ex.: pot electronic, pagini web) mesajul este mprit n blocuri de mici dimensiuni denumite pachete. Fiecare pachet cuprinde adresa expeditorului i pe cea a destinatarului. Fiecare pachet este trimis, prima dat la un calculator-pasarel, care nelege o mic parte din internet.

    Calculatorul pasarel citete destinaia pachetelor i trimite pachetele ctre o alt pasarel, i aa mai departe, pn ce pachetul ajunge la pasarela vecin cu computerul destinatar.

    Adresa IP este utilizat la nivelul programelor de prelucrare n reea. n schimb, la nivelul utilizatorilor cu acces la Internet, identificarea calculatoarelor se face printr-un nume de gazd gestionat de sistemul DNS.

    1.4. Servere web

    Aproape toat structura Internetului se bazeaz pe modelul de client-server. Multe milioane de servere din toat lumea sunt conectate la Internet i ruleaz continuu. Majoritatea serviciilor oferite pe Internet ruleaz pe servere: Web; Domain Name System; e-mail sau pot electronic; FTP sau transfer de fiiere; instant messaging sau mesagerie instant; fiiere audio i video; jocuri .a.m.d. Pentru orice aciune care este iniiat de un utilizator al Internetului, unul sau mai multe servere interacioneaz cu utilizatorul precum i ntre ele.

    Server web - un server care primete cereri HTTP de la clieni, n general browsere web, apoi le expediaz rspunsuri prin intermediul aceluiai HTTP, de obicei, n form de pagin HTML, un flux de media sau alt tip de date. Serverele web sunt baza World Wide Web.

  • ~ 11 ~

    Serverul web este numit att software-ul, care ndeplinete funciile unui server web ct i calculatorul pe care software-ul respectiv se execut.

    Clientul, de obicei, un browser Web, trimite ctre serverul web cereri pentru primirea resurselor, desemnate de adrese URL. Resurse

    sunt pagini HTML, imagini, fiiere, fluxuri media sau alte date necesare pentru client. Ca rspuns serverul web trimite datele solicitate de client. Acest schimb are loc prin intermediul protocolului HTTP.

    Web Hosting

    Serviciul de web hosting sau mai simplu gzduire web, este serviciul prin care un utilizator poate nchiria spaiu i trafic pe un server putnd astfel s gzduiasc propria pagin online (pe internet).

    Hosting Provider - este compania care pune la dispoziie acest spaiu pe server fr de care existena unui website nu ar fi posibil.

    1.5. Domenii

    Domeniul este adresa la care se gsete un website n Internet. Numele domeniului este legat cu o adres fizic (un server web) pe care pot fi gsite fiierele sitului respectiv.

    Tipuri de domenii

    Tipul domeniului se refer la extensia care urmeaz imediat dup numele domeniului, i anume:

    .com - folosit de companiile comerciale la nceput. Cu timpul extensia .com a nceput sa fie folosit pe scar larg pe orice site;

    .net - vine de la network i se folosete n general pentru situri avnd ca domeniu de activitate internetul i/sau niele aferente;

    .org - prescurtare pentru organizaie i se presupune ca l folosesc doar organizaiile non-profit, ns, aceasta regul nu este deloc respectat;

    .md, .ro, .es, .us, .uk (.a.m.d.) - sunt extensii de domenii folosite de anumite ri ca i domenii naionale adresate populaiei rii respective.

    .biz, .info .name .pro (.a.m.d.) - sunt extensii de domeniu adugate ulterior datorit faptului c au rmas puine nume de domenii libere.

    Selectarea numelui domeniului

    Numele domeniului trebuie s fie uor de reinut pentru utilizatorii care l viziteaz. S lum drept exemplu:

  • ~ 12 ~

    www.gbxfbgb5.com. Acest nume de domeniu nu-l va reine nimeni, n schimb www.universitati.md este ceva mai simplu de reinut.

    Reguli pentru selectarea unui nume de domeniu:

    n primul rnd trebuie s cunoatem care va fi domeniul de activitate al sitului pe care l vom crea. Vom ncerca s alegem un nume de domeniu care va reflecta acest lucru;

    Folosirea cuvintelor cheie n numele domeniului faciliteaz de multe ori gsirea paginii atunci cnd se fac cutri n motoarele de cutare (google, yahoo, altavista .a.m.d.);

    Lungimea numelui domeniului este de asemenea foarte important. S ne imaginm ca vom realiza un site despre universitile din Moldova. Faptul de a pune toate aceste cuvinte cheie n numele domeniului (www.universitatiledinmoldova.md) ajut la cutarea n motoarele de cutare, dar va fi mai greu de reinut de un vizitator. De asemenea accesarea un nume de domeniu att de lung poate genera de multe ori greeli de ortografie, ceea ce ar putea duce vizitatorul pe o alt pagin dect cea dorit. Este recomandat ca numele domeniului s conin un cuvnt sau cel mult dou ct mai scurte;

    De asemenea alegerea unei extensii potrivite i n concordan cu domeniul de activitate sau nia este foarte important .com i .net fiind cele mai populare iar .md fiind adresat populaiei din Republica Moldova.

  • ~ 13 ~

    UNITATEA DIDACTIC

    LIMBAJUL HTML

    Finaliti:

    Dup studierea unitii didactice i realizarea sarcinilor propuse, studentul va fi capabili s:

    elaboreze structura unui document HTML;

    utilizeze taguri HTML pentru crearea machetelor paginilor web statice;

    elaboreze formulare

  • ~ 14 ~

    2. LIMBAJUL HTML

    HTML a fost elaborat de cercettorul britanic Tim Berners-Lee n perioada 1986-1991, n cadrul Consiliului European pentru Cercetare Nuclear de la Geneva (Elveia). HTML a fost creat ca un limbaj destinat pentru schimbul de documente tiinifice i tehnice, adecvat pentru utilizarea de ctre persoane care nu sunt specialiti n domeniul machetrii.

    Iniial, HTML a fost conceput i creat ca un mijloc de structurare i de formatare a documentelor, fr a crea o dependen fa de mijloacele de reproducere (cartografiere). n mod ideal, HTML trebuia s fie reprodus fr nici o denaturare stilistic i structural pe diferite echipamente (ecran color al calculatorului modern, ecran

    monocrom, telefon mobil limitat n dimensiuni sau un dispozitiv de reproducere a vocii i textului). Cu toate acestea, utilizarea actual a HTML este foarte departe de obiectivele sale iniiale.

    2.1. Standarde HTML

    RFC 1866 - HTML 2.0, a fost aprobat ca standard pe 22 septembrie 1995;

    HTML 3.2 [1] - 14 ianuarie, 1997;

    HTML 4.0 [2] - 18 decembrie, 1997;

    HTML 4.01 [3] (modificri considerabile) - 24 decembrie, 1999;

    ISO / IEC 15445:2000 [4] (aa numitul ISO HTML, bazat pe HTML 4.01 Strict) - 15 mai 2000;

    HTML 5 [5] - n dezvoltare. Oficializarea standardului este planificat pentru 2014.

    Un standard oficial HTML 1.0 nu a existat niciodat. Pn n 1995, au existat mai multe standarde informale pentru HTML. Pentru ca

    versiunea standard oficial s se deosebeasc de acestea, ei i s-a atribuit imediat numrul 2.

    Versiunea 3 a fost propus de ctre Consoriul World Wide Web (W3C), n martie 1995 i oferea multe posibiliti noi, cum ar fi crearea de tabele, afiarea imaginilor i textelor concomitent, formule matematice complexe. Chiar dac acest standard a fost compatibil cu a doua versiune, punerea n aplicare a fost dificil pentru browserele din

  • ~ 15 ~

    acea perioad. Versiunea 3.1 nu a fost utilizat oficial, fiind propus urmtoarea versiune - HTML 3.2, n care au fost omise multe inovaii ale versiunii 3.0, dar au fost adugate elemente ne standarde, care sunt acceptate de browserele Netscape Navigator i Mozaic.

    n versiunea HTML 4.0 a fost fcut o oarecare filtrare a standardului. Multe elemente au fost marcate ca fiind nvechite i nerecomandate. n particular, tagul font, folosit pentru a schimba proprietile fontului, a fost marcat ca nvechit (ca alternativ fiind recomandat utilizarea stilurilor CSS).

    n 1998, Consoriul World Wide Web a nceput elaborarea unui limbaj de marcare nou, bazat pe HTML 4, dar sintaxa adecvat pentru XML. Ulterior, noul limbaj a fost denumit XHTML. Prima versiune a

    XHTML 1.0, a fost aprobat de World Wide Web Consortium la 26 ianuarie 2000.

    La moment World Wide Web Consortium dezvolt versiunea HTML 5. O versiune beta a acestui limbaj a aprut pe Internet la 20 noiembrie 2007.

    Comunitatea WHATWG (eng. Web Hypertext Application

    Technology Working Group), ncepnd cu 2004, a dezvoltat aplicaii Web 1.0, numit de multe ori neformal "HTML 5", care extinde HTML (existnd compatibilitate de sintax cu XHTML 1.0 XML), pentru o mai bun reprezentare semantic a diferitor pagini tipice, cum ar fi forumuri, site-uri web, licitaii, motoare de cutare, magazine online, etc., care nu se ncadreaz foarte bine n XHTML 2.

    2.2. Noiuni de baz

    Cuvinte de reinut:

    Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browserul. Tag-urile vor avea

    aceast form: ;

    Element - este un tag complet, avnd un de deschidere i unul de nchidere ;

    Atribut - este folosit pentru a modifica valoarea unui element n HTML. De obicei un element are mai multe atribute.

    Deocamdat trebuie de reinut c un tag este o comand pe care browserul o interpreteaz, c un element este un tag complet iar un atribut personalizeaz i modific un element n HTML.

  • ~ 16 ~

    Tagurile au trei pri dup cum s-a menionat mai sus: deschiderea, coninutul i nchiderea. Dup cum se va putea observa n continuare exist sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau dou.

    Ordinea tag-urilor - Foarte important

    Ordinea deschiderii i a nchiderii tag-urilor este foarte important. Dac un tag este deschis interiorul altui tag, de exemplu body este deschis n html atunci acel tag (body) este cel care trebuie nchis naintea celui de-al doilea tag(html).

    S-a nchis mai nti body pentru c a fost cel care s-a deschis cel mai recent. Aceast regul i anume deschiderea i nchiderea tag-urilor se aplic la toate celelalte taguri ale documentelor HTML.

    Excepii: Tag-uri care nu au nevoie de nchidere. Exist cteva tag-uri care nu ndeplinesc modelul expus anterior.

    Motivul este c n realitate aceste tag-uri nu au nevoie de nici un coninut. Cel mai simplu exemplu este , care efectueaz trecerea din rnd nou.

    2.3. Structura unui fiier HTML

    Limbajul HTML este compus din coduri speciale numite

    marcaje (sau tag-uri) care se nsereaz ntr-un document text pentru a specifica modul de formatare a acestuia. Orice marcaj este inclus ntre dou paranteze unghiulare, ex: , cu ajutorul creia browserul detecteaz i recunoate acest simbol drept marcaj.

    Un document HTML ntotdeauna va ncepe i se va termina cu un tag i respectiv . Aceasta este structura standard a unui document HTML.

    Mai jos este expus structura unui document HTML:

    Prima mea pagina web!

    Aici se va include coninutul ce va fi afiat n browser

  • ~ 17 ~

    Dup cum se observ, exist dou taguri asemntoare la sfritul documentului, i . Acestea sunt tag-urile de nchidere. , d de tire browserului, c sa ncheiat coninutul paginii, iar c s-a ncheiat documentul HTML.

    Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie respectivul tag. Deci este folosit pentru a ncepe o funcie, iar pentru a o ncheia.

    2.3.1. Elementul doctype

    Fiecare document HTML, care ndeplinete specificaiile unui standard HTML ar trebui s nceap cu specificarea versiunii dup modelul:

    !

    Dac acest ir nu este specificat, afiarea corect a documentului n browser devine mai dificil.

    Opiuni DOCTYPE pentru HTML 4.01:

    Strict(strict): nu conine nici un element marcat ca nvechite sau care nu este aprobat de standard.

    !

    De tranziie (transitional): conine etichete nvechite pentru a asigura compatibilitatea i a facilita tranziia de la versiunile HTML mai vechi.

    !

    Cu frame-uri (frameset): similar cu cel de tranziie, dar conine, de asemenea tag-uri pentru crearea frame-urilor.

    !

    DOCTYPE pentru HTML 5

    n HTML 5 este doar o versiune a DOCTYPE:

  • ~ 18 ~

    2.3.2. Elementul html

    Acest element marcheaz nceputul i sfritul unui document HTML, toate elementele care urmeaz s fie incluse n pagin trebuie s fie ntre i .

    2.3.3. Elementul head

    head nu are nici o funcie vizibil, dar poate oferi browserului informaii foarte utile. Aici se includ titlul documentului, codificarea, meta-tagurile i se efectueaz conectarea scripturilor externe JavaScript i a fiierelor de stiluri CSS.

    2.3.4. Elementul title

    Dup standardele HTML tag-ul title trebuie s fie amplasat n interiorul tagului head. Ceea ce va fi nscris ntre cele doua tag-uri title ( i ) va putea fi vizualizat ca i numele browserului, de obicei n partea din stnga sus, adic titlul ferestrei browserului.

    2.3.5. Elementul body

    Elementul body este cel care definete nceperea coninutului paginii propriu-zise (titluri, paragrafe, fotografii, muzic i orice altceva). Toate elementele incluse n interiorul acestui tag vor fi afiate n pagin, putnd fi vizualizate de utilizator.

    2.4. Atribute

    Atributele sunt o alt parte important a HTML. Un atribut este utilizat pentru a defini caracteristicile unui element i este plasat n interiorul tag-ului de deschidere a elementului. Toate atributele sunt

    alctuite din dou pri: un nume i o valoare: nume = valoare Valoarea atributului ar trebui s fie inclus n ghilimele, i este

    separat de numele atributului prin semnul egal.

    2.4.1. Atributele de baz

    Exist 4 atribute de baz care pot fi utilizate practic la toate tagurile HTML:

    id;

    title;

    class;

    style.

  • ~ 19 ~

    Atributul id poate fi utilizat pentru a identifica orice element

    unic ntr-o pagin. Exist dou motive principale pentru care este necesar utilizarea acestui atribut:

    dac un element are atributul id ca un identificator unic, este uor de accesat elementul n pagin, de exemplu de ctre JavaScript;

    dac exist dou elemente cu acelai nume, ntr-o pagin Web, se poate utiliza atributul id pentru a le distinge.

    Utilizarea acestui atribut trebuie s ndeplineasc urmtoarele reguli:

    ncepe cu o liter (AZ sau az) i poate fi apoi urmat de orice numr de litere, cifre (0,9), cratime, subliniere i dou puncte;

    rmne unic n cadrul documentului, nu exist dou atribute cu aceeai valoare n documentul HTML.

    Atributul title ofer un titlu n form de hint pentru element. Are sintaxa similar atributului id.

    Comportamentul acestui atribut va depinde de elementul care-l

    poart, fiind de obicei afiat ca un hint (tooltip) sau n timp ce elementul se ncarc.

    Atributul class este utilizat pentru a asocia un element HTML

    cu o foaie de stil, i specific clasa CSS elementului. Elementului i se pot ataa concomitent mai multe clase. De

    exemplu:

    class = "className1 className2 className3"

    Atributul style permite s specificarea regulilor CSS direct n cadrul elementului. De exemplu:

    Text...

    2.4.2. Atribute de internaionalizare

    Exist trei atribute de internaionalizare, care sunt disponibile pentru majoritatea elementelor XHTML.

    dir;

    lang;

    xml: lang. Atributul dir permite de a indica browserului direcia n care

    textul ar trebui s fie afiat. Atributul dir poate lua una din dou valori:

    ltr de la stnga la dreapta;

    rtl de la dreapta la stnga.

  • ~ 20 ~

    Atributul lang permite indicarea limbii utilizate ntr-un document, dar acest atribut a fost pstrat n HTML doar pentru compatibilitate cu versiunile anterioare de HTML. Acest atribut a fost

    nlocuit cu xml: lang. Exemplu de utilizare:

    Atributul xml: lang este o variant de alternativ pentru lang i ar trebui s fie un cod al rii ISO-639, dup cum este ilustrat n exemplul pentru atributul lang.

    2.4.3. Atribute generice

    n tabelul 2.1 sunt expuse cele mai utilizate atribute HTML.

    Tabelul 2.1. Cele mai utilizate atribute HTML

    Atributul Opiuni Funcii

    align right, left, center Alinierea orizontal

    valign top, middle, bottom Alinierea vertical n interiorul elementului HTML.

    bgcolor numeric, hexazecimal,

    valori RGB

    Culoarea fundalului

    elementului

    background URL Imaginea de fundal a

    documentului

    id Definit de utilizator Identificatorul unic al

    elementului

    class Definit de utilizator Ataarea unei clase CSS elementului

    width Valoare numeric Limea elementului

    height Valoare numeric nlimea elementului

    title Definit de utilizator Un hint cu titlul elementului

  • ~ 21 ~

    2.5. Elemente de marcare

    2.5.1. Taguri de formatare i structurare a textului

    Mai jos este expus lista tagurilor utilizate pentru formatarea i structurarea textului n pagin:

    crearea unui paragraf n text;

    , - text ngroat;

    , text nclinat;

    text subliniat;

    - adaug o linie noua dup el.

    - formatarea textului, oferind posibilitatea modificrii culorii, mrimii, stilului etc.

    - n acest tag se adaug de obicei fraze scurte, citate, ce vor fi afiate ntre ghilimele.

    - poate fi folosit pentru a prezenta coduri de program, textul fiind afiat distinct pt. acest tip.

    , , , , si - folosit n general pentru titluri i sub-titluri n pagina web. Textul apare ngroat i mare pt. "", descrescnd treptat pn la "";

    - afieaz textul n partea de sus a liniei rndului, i mai mic.

    - afieaz textul n partea de jos a liniei rndului, si mai mic.

    2.5.2. Tagurile div i span

    Tag-urile i nu au efecte importante dac sunt folosite singure.

    Tag-ul div creeaz seciuni de blocuri n pagin, al cror form i grafic de coninut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pentru aliniere pe orizontal) care poate avea urmtoarele valori: left (stnga), right (dreapta), center (centru), justify (distana textului fa de margini egal).

    Tag-ul span creeaz posibilitatea modificrii separate a unei poriunii dintr-un context, putnd fi folosit i ca o clas cu CSS. Singur nu are nici un efect vizual i nu folosete nici un atribut HTML special.

    Chiar dac folosite singure, div i span nu au nici un efect major, n combinaie cu CSS pot crea aspecte grafice importante. Pentru

  • ~ 22 ~

    aceasta, ambele pot folosi atributul style (cu proprieti CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

    Att div ct i span, de obicei servesc drept containere pentru alte obiecte HTML, fiind utilizate n majoritatea cazurilor pentru machetarea paginii, amplasarea elementelor n pagin, setarea dimensiunilor i aplicarea stilurilor CSS.

    Tag-ul este unul din cele mai folosite elemente

    HTML, aceasta deoarece n combinaie cu proprieti CSS poate crea efecte grafice deosebite, iar n interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte div-uri.

    Cadrul n care acestea sunt adugate poate avea propriul fundal (background), lungime, nlime i margini cu diferite tipuri de linii.

    Diferena dintre div i span este faptul c div ncadreaz o seciune din document sub forma unui bloc iar SPAN ncadreaz o poriune din context sub form de linii.

    Iat un exemplu din care se poate nelege mai bine, atribuim aceeai proprietate grafica (bordura roie) unui tag div i unui tag span:

    Fraza pe mai multe linii,

    continua cu linia a doua,

    se termina cu linia a treia.

    - Acum cu SPAN:

    Fraza pe mai multe linii,

    continua cu linia a doua,

    se termina cu linia a treia.

    n pagina web va apare:

  • ~ 23 ~

    Fig. 2.1. Diferena dintre div i span

    2.5.3. Imagini

    Tag-ul este destinat pentru afiarea pe o pagin Web a unei imagini ntr-un format grafic GIF, JPEG sau PNG. Aceast etichet are un atribut src necesar, care specific adresa de pe care se ncarc imaginea. Dac este necesar, imaginea poate fi o referin la un alt fiier, prin plasarea ntr-un container . n jurul imaginii este afiat bordura, care poate fi eliminat prin adugarea atributului border = "0" la tag-ul .

    Sintaxa:

    Atribute:

    align(bottom | left | middle | right | top) - definete modul de aliniere a imaginii i modalitatea de a se ncadra text;

    alt - text alternativ pentru imagini(este afiat dac imaginea nu poate fi ncrcat);

    border - grosimea bordurii din jurul imaginii(px);

    height - nlimea imaginii;

    hspace - indentarea orizontal a imaginii la coninutul din jur;

    ismap - spune browserului c imaginea este utilizat la crearea unei hri;

    longdesc - specific adresa documentului, care conine un rezumat al imaginii;

    src - calea ctre un fiier grafic;

    vspace - indentarea vertical a imaginii la coninutul din jur;

    width - limea imaginii;

  • ~ 24 ~

    usemap indic harta pentru care va fi utilizat imaginea.

    2.5.4. Hiperlincuri

    Tag-ul este unul dintre elementele cele mai importante ale

    HTML i este proiectat pentru a crea link-uri. n funcie de prezena atributelor name sau href se stabilete o legtur extern sau o ancor. Ancora ntr-o pagin este prevzut, pentru a specifica un loc n pagin la care se refer hiperlincul.

    Pentru a crea un link, trebuie s fie indicat atributul href, valoarea cruia este adresa documentului (URL - Universal Resource Locator), la care utilizatorul va fi redirecionat atunci cnd acceseaz respectivul link. Adresa poate fi absolut sau relativ. Adresele absolute vor fi funcionabile indiferent de numele site-ului sau pagina web pe care sunt plasate. Link-urile relative, dup cum se vede din denumire, sunt construite relativ la documentul n care sunt plasate.

    Sintaxa:

    ...

    sau

    ... i pentru adresare se utilizeaz ...

    Atribute:

    accesskey - activarea legturii cu ajutorul unei combinaii te taste;

    charset - codificarea textului la care indic hiperlinkul;

    coords seteaz coordonatele zonei active;

    href indic adresa URL la care se va trece;

    hreflang identific limba textului de la adresa respectiv;

    media indic tipul informaiei la care se face referin;

    name seteaz numele ancorei n interiorul paginii;

    rel relaia dintre documentul la care se face adresarea i documentul curent.

    rev relaia dintre documentul curent i documentul la care se face adresarea;

    shape seteaz forma zonei active;

    tabindex indic numrul de ordine al elementului pentru activarea cu ajutorul tastei TAB;

  • ~ 25 ~

    target - indic modul de deschidere a adresei: - blank - ncarc pagina ntr-o fereastr nou; - _self - ncarc pagina n fereastra curent; - _parent - ncarc o pagin n fereastra printe(fereastra

    din care a fost deschis fereastra curent), iar n cazul n care printele nu exist, atunci aceast valoare funcioneaz ca _self;

    - _top anuleaz toate frame-urile i ncarc pagina pe toat suprafaa de lucru a browserului.

    title - adaug un hint cu text la hiperlink;

    type tipul MIME al documentului la care indic linkul.

    2.5.5. Tabele

    Elementul este un container pentru elementele care

    definesc coninutul tabelului. Fiecare tabel este format din rnduri i celule, care sunt definite de etichetele i respectiv . n interiorul este permis s se foloseasc urmtoarele elemente: , , , , , i .

    Tabelele cu bordur invizibil au fost mult timp utilizate pentru machetarea paginilor web, permind mprirea documentului n uniti modulare. O astfel de metod a fost utilizat pe foarte multe situri, pn a aprea posibilitatea machetrii pe straturi.

    Elementele tabelei:

    - definete un tabel n care pot fi adugate rnduri, coloane, titluri, celule de tabel;

    - definete zona de Header (Antet) a tabelului, unde se pot include linii i coloane;

    - definete zona de subsol a tabelului, unde se pot include linii i coloane;

    - definete corpul tabelului, unde se pot include linii i coloane;

    - creeaz o linie nou n tabel, n care se includ coloane;

    - se folosete pentru celule cu titlu, pentru coloane. Afieaz un scris mai ngroat;

    - Se folosete pentru a crea celule n rndurile tabelului. Trebuie adugat n cadrul tag-ului .

  • ~ 26 ~

    - definete un titlu pentru tabel. Acest tag trebuie adugat imediat dup eticheta i poate fi adugat doar o singur dat.

    Sintaxa

    1

    2

    3

    4

    Codul de mai sus va avea urmtorul efect(fig. 2.2):

    1 2

    3 4

    Fig. 2.2. Crearea unei tabele.

    Atribute

    align seteaz alinierea tabelei;

    background seteaz imaginea de fundal pentru tabel;

    bgcolor seteaz culoarea fundalului;

    border grosimea bordurii n pixeli;

    bordercolor - culoarea bordurii;

    cellpadding indentarea de la bordura celulei pn la coninutul ei;

    cellspacing spaiul dintre celule;

    height nlimea;

    summary descrierea scurt a tabelei;

    width limea(n pixeli sau procente);

    colspan - seteaz numrul de celule care trebuie s fie concatenate orizontal;

    rowspan - seteaz numrul de celule care trebuie s fie concatenate vertical;

    Observaii:

  • ~ 27 ~

    colspan i rowspan se utilizeaz doar pentru elementul (celul);

    proprietatea height aplicat la tabele nu funcioneaz corect n toate browserele;

    dac alinierea nu este setat, implicit este activat alinierea la stnga;

    dac nu este setat limea tabelei, atunci aceasta tinde s ocupe spaiul necesar afirii coninutului su.

    Exemple de tabele:

    1. Tabel simpl cu bordur Codul utilizat:

    1

    2

    3

    4

    Rezultatul:

    1 2

    3 4

    Fig. 2.3. Crearea unei tabele simple cu bordur.

    2. Tabel simpl fr bordur Codul utilizat:

    1

    2

    3

    4

  • ~ 28 ~

    Rezultatul:

    1 2

    3 4

    Fig. 2.4. Crearea unei tabele simple fr bordur. 3. Setarea limii tabelei Codul utilizat:

  • ~ 29 ~

    1

    2

    3

    4

    Rezultatul:

    1 2

    3 4

    Fig. 2.7. Alinierea coninutului tabelei. 6. Utilizarea colspan Codul utilizat:

    12

    3

    4

    Rezultatul:

    12

    3 4

    Fig. 2.8. Concatenarea celulelor pe orizontal. 7. Utilizarea rowspan Codul utilizat:

    13

    2

    4

  • ~ 30 ~

    Rezultatul:

    13 2

    4

    Fig. 2.9. Concatenarea celulelor pe vertical.

    2.5.6. Liste

    Tagurile i creeaz o list cu marcatori, respectiv numerotat. Fiecare element din list trebuie s nceap cu tag-ul . n cazul n care la se aplic stiluri sau proprieti, toate elementele motenesc aceste proprieti.

    - tag folosit pentru afiarea unei liste ordonate, numerotate;

    - tag utilizat pentru afiarea unei liste neordonate numeric, ci cu simboluri gen: disc, cerc, ptrat;

    - definete un element n lista sau , fiind adugat n cadrul acestora;

    - creeaz o list de definiii. Trebuie s conin tag-urile i .

    - definete un termen pentru lista de definiii.

    - se adaug n cadrul tag-ului i prezint lista de definiii pentru termenul definit de acel tag.

    Sintaxa

    Lista nenumerotat:

    element 1

    element 2

    Lista numerotat:

    element 1

    element 2

    Atribute

    type - seteaz tipul marcatorului pentru lista nenumerotat(disc | circle | square) sau numerotat(A | a | I | i | 1);

  • ~ 31 ~

    reversed inverseaz ordinea numerotrii n lista numerotat;

    start indic valoarea de la care ncepe numerotarea.

    2.6. Meta taguri

    Tag-ul conine metadatele despre document HTML. Metadatele nu vor fi afiate pe pagin, dar vor fi accesibile pentru browser i ceea ce este mai important, pentru motoarele de cutare.

    Elemente sunt de obicei folosite pentru a specifica

    descrierea paginii, cuvintele cheie, autorul documentului, ultima

    modificare, i alte metadate. De asemenea, cu ajutorul se indic codificarea(setul de caractere) utilizat n document.

    Tag-ul ntotdeauna se nscrie n interiorul elementului .

    Descrierea documentului:

    Cuvintele cheie:

    Autorul documentului:

    Codificarea documentului:

    Observaie: utilizarea metatagurilor este foarte important pentru promovarea sitului, ele facilitnd indexarea sitului de ctre motoarele de cutare.

    2.7. Caractere speciale i entiti

    Unele caractere, cum ar fi caracterul "

  • ~ 32 ~

    - caracterul "ampersand" (&);

    - un nume de entitate sau caracterul "#" urmat de un numr; - caracterul (;).

    Entitatea utilizat pentru a afia "

  • ~ 33 ~

    }

    //-->

    2.9. Formulare

    Pentru a crea interactivitate n pagini i a permite utilizatorului introducerea informaiilor, se utilizeaz formularele.

    2.9.1. Containerul form

    Tag-ul instaleaz un formular pe pagina web. Formularul este proiectat pentru a face schimb de date ntre utilizator i server. Domeniul de utilizare a formularelor nu se limiteaz doar la trimiterea de date la server, fiind posibil accesarea oricrui element al formularului cu ajutorul unui limbaj de tip client (ex. JavaScript),

    modificarea i utilizarea n diferite scopuri. Un document poate conine un numr practic infinit de

    formulare, dar n acelai timp, la server poate fi trimis un singur formular. Din acest motiv, formularele ar trebui s fie independente unul de cellalt.

    Pentru a trimite formularul la server se utilizeaz butonul special Submit, acelai lucru poate fi fcut, dac se apas tasta Enter n formular. Dac butonul Submit nu este n formular, tasta Enter imit utilizarea sa, dar numai n cazul n care formularul este doar un element . Dac exist dou sau mai multe elemente, apsarea tastei nu produce nici un rezultat.

    n cazul n care formularul este trimis la server, controlul este transmis scriptului de pe adresa indicat n atributul action al tagului . n prealabil, browserul pregtete informaia din formular, n form de pereche "nume = valoare", unde numele este determinat de atributul name al tagului i valoarea este cea introdus de ctre utilizator sau setat n mod implicit cu ajutorul atributului value. Dac formularul este expediat folosind metoda GET, caseta de adrese va primi

    o valoare de tipul:

    http://site.com?cimp1=valoare1&cimp2=valoare2

    Parametrii transmii sunt listai dup semnul de ntrebare ? i sunt separai prin ampersand &. Caractere non-latine sunt convertite n reprezentare hexazecimal (n forma % HH, n cazul n care HH - codul hexazecimal al caracterului ASCII), spaiul este nlocuit cu un plus (+).

  • ~ 34 ~

    n cazul transmiterii informaiei prin metoda POST, datele sunt trimise ascuns i nu vor fi vizibile n URL.

    Atribute

    accept-charset indic codificarea n care serverul poate primi datele;

    action adresa la care vor fi transmise datele;

    autocomplete activeaz sau dezactiveaz autocompletarea cmpurilor formularului;

    enctype metoda de codare a datelor formularului (application/x-www-form-urlencoded | multipart/form-data | text/plain);

    method metoda de transmitere a datelor(GET sau POST);

    name numele formularului;

    novalidate deconecteaz validarea;

    target metoda de ncrcare a rezultatului(_blank | _self | _parent | _top).

    Observaii:

    tag-ul form nu are nici un efect vizual, el fiind utilizat doar pentru reuniunea mai multor elemente ;

    n cazul transmiterii fiierelor cu ajutorul formularului, este necesar de setat enctype= multipart/form-data;

    dac action=, formularul va expedia datele la aceeai pagin pe care se afl.

    2.9.2. Elementul input

    Tag-ul este unul dintre cele mai des utilizate elemente

    ale formularului, permite crearea diferitor elemente care ofer posibilitatea interaciunii cu utilizatorul. De obicei se utilizeaz pentru a crea casete de text, diferite butoane, butoane radio i casete de selectare (checkbox).

    Principalul atribut al tag-ului este type, care determin tipul elementului. Acesta permite crearea urmtoarelor tipuri de elemente: caset de text (text), cmp pentru parola (password), comutator (radio), selectare (checkbox), cmp ascuns (hidden), pentru a trimite formularul (submit), butonul pentru a terge (reseta) datele formularului (reset), element pentru ncrcarea fiierului (file). Fiecare element are propria list de atribute care definesc aspectul i performanele sale.

  • ~ 35 ~

    Atribute

    type tipul cmpului;

    value - valoarea casetei, se utilizeaz pentru iniializare cu un text;

    accept - seteaz filtrul pentru tipurile de fiiere care pot fi ncrcate. Tipul de fiier este specificat ca MIME-tip, mai multe valori sunt separate prin virgul. Dac fiierul nu se potrivete filtru specificat, acesta nu este afiat n fereastra pentru selectarea fiierelor;

    accesskey - permite trecerea la element, utiliznd o combinaie de taste;

    autocomplete activeaz sau dezactiveaz autocompletarea cmpului;

    checked - acest atribut determin dac vor fi bifate o caset de selectare sau un buton radio. n cazul radiobutton, poate fi marcat un singur element al grupului, pentru casetele de selectare

    (checkbox) este admis selectarea mai multor elemente;

    disabled blocheaz accesul i posibilitatea de modificare a elementului;

    maxlength - numrul maxim de caractere care pot fi introduse;

    name numele cmpului;

    id identificatorul DOM al cmpului;

    readonly cmpul nu poate fi modificat;

    required indic c completarea cmpului este obligatorie;

    size mrimea cmpului (n caractere). Tipuri de elemente input:

    1. Cmp textual - definete o caset de text (fig. 2.10) n care utilizatorul poate introduce o singur linie de text

    Fig. 2.10. Cmp textual.

    2. Cmp pentru parol - definete o caset n care utilizatorul poate introduce o linie de text, acest text fiind mascat (n locul caracterelor sunt afiate simboluri speciale *)

  • ~ 36 ~

    Fig. 2.11. Cmp pentru parol.

    3. Butoane radio - definete un buton radio. Butoane radio permit utilizatorului de a selecta doar o

    singur valoare dintr-un un numr limitat de opiuni predefinite

    Fig. 2.12. Radio butoane.

    4. Bife - definete o bif. Bifele permit utilizatorului selectarea uneia sau mai multor opiuni

    Fig. 2.13. Bife

    5. Buton de expediere a formularului - definete un buton la apsarea cruia formularul este expediat. Textul de pe buton poate fi modificat cu ajutorul

    atributului value

    Fig. 2.14. Buton de expediere a formularului

    6. Buton de anulare a formularului - definete un buton la apsarea cruia formularul va fi anulat(golit). Textul de pe buton poate fi modificat cu ajutorul atributului value

    Fig. 2.15. Buton de anulare a formularului

    7. Element pentru ncrcarea fiierului - definete un element la apsarea cruia se deschide fereastra de dialog care permite utilizatorului selectarea fiierului care va fi ncrcat.

    Fig. 2.16. Element pentru ncrcarea fiierului

    Observaie: Pentru a putea ncrca fiiere, formularul trebuie s aib proprietatea enctype = multipart/form-data.

  • ~ 37 ~

    8. Cmp textual ascuns - are aceleai funcii ca i un cmp textual, fiind invizibil pentru utilizator. Se utilizeaz pentru transmiterea valorilor ascunse.

    2.9.3. Elementul select

    Tagul este utilizat pentru crearea listelor (drop-down

    lists). Cu ajutorul tagului din interiorul elementului se

    definesc opiunile disponibile n list. Exemplu:

    Limba matern:

    Romana

    Engleza

    Franceza

    Fig. 2.17. Elementul select

    Implicit meniul va afia primul element din list(fig. 2.17). Pentru a afia un alt element dect cel implicit (fig. 2.18), se va specifica atributul selected="yes" opiunii care dorim s fie afiat prima n list.

    Limba matern:

    Romana

    Engleza

    Franceza

    Fig. 2.18. Elementul select cu modificarea elementului implicit

    Select - atributul "size"

    Implicit doar un singur element din list este vizibil (fig. 2.17 i fig. 2.18), ns acest lucru se poate schimba cu ajutorul atributului size adugat marcajului (fig. 2.19):

    Limba materna:

    Romana

    Engleza

    Franceza

  • ~ 38 ~

    Fig. 2.19. Afiarea mai multor valori ale elementului select

    Select - selectare multipl Implicit se permite selectarea unui singur element din list (fig.

    2.20),

    Fig. 2.20. Selectarea elementului din list

    ns este posibil ca mai mult de 1 element din list s poat fi selectat (fig. 2.21). Pentru aceasta se va specifica atributul

    multiple="yes":

    Limba materna:

    Romana

    Engleza

    Franceza

    Fig. 2.21. Selectarea concomitent a mai multor valori din list

    Observaie: pentru selecia multipl se va utiliza CTRL+click.

    2.9.4. Elementul textarea

    Un element de tip textarea definete un control de text cu mai multe linii. Cmpurile de acest fel sunt folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau n general atunci cnd utilizatorul are nevoie de mai mult spaiu de exprimare.

  • ~ 39 ~

    Definirea controlului are loc prin intermediul marcajelor

    .

    Dimensiunile controlului textarea se determin prin numrul de coloane i rnduri specificate cu ajutorul atributelor cols i respectiv rows. n cazul n care textul nscris nu va ncpea, vor fi activate barele de derulare(scroolbars).

    Hello World!

    Fig. 2.22. Elementul textarea

    TextArea - atributul "wrap"

    Atributul "wrap" specific felul n care va reaciona textul atunci cnd acesta va atinge sfritul liniei. Exist 3 valori pe care le poate lua acest atribut:

    1. soft - va plasa un enter la sfritul fiecrei linii, dar nu va trimite la server caracterul Enter (carriage return);

    2. hard - arat exact aa ca i "soft", ns spre deosebire de acesta, caracterul Enter este trimis la server;

    3. off - textul este afiat i trimis la server exact aa cum este scris.

    TextArea - Readonly si Disabled

    1. readonly - acest atribut poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specific dac coninutul cmpului de text va putea sau nu, fi modificat;

    2. disabled - atributul disabled este asemntor lui readonly, de asemenea nu permite modificarea textului, ns spre deosebire de acesta, textul va fi afiat cu fon gri. n aa fel utilizatorul va percepe vizual c cmpul respectiv nu poate fi modificat.

    Observaie: De menionat c textul dintr-un textarea definit cu "readonly" poate fi selectat cu mouse-ul, i ulterior copiat, pe cnd "disabled" nu ofer aceast posibilitate.

  • ~ 40 ~

    nsrcinri

    1. Ce este un site web? Ce este o pagin web? 2. Cte standarde HTML exist? Care este standardul oficial

    utilizat n prezent? 3. Descriei structura unui document HTML. 4. Expunei sintaxa utilizat la crearea unui tag HTML. Cte tipuri

    de taguri exist? 5. Prezena cror taguri HTML este obligatorie n orice document

    HTML? Argumentai. 6. Care este scopul utilizrii tagului head? 7. Unde trebuie s fie scris un text care trebuie s fie afiat n

    browser?

    8. Pentru ce se utilizeaz tagul doctype? 9. Este obligatorie utilizarea tagului title? Argumentai rspunsul. 10. Care este diferena dintre tagul title i atributul title? 11. Enumerai atributele de baz ale documentului HTML i

    explicai pentru ce se utilizeaz acestea. 12. Care este diferena dintre tag i atribut? 13. Explicai diferena dintre tagurile div i span, n baza unui

    exemplu.

    14. Care este diferena dintre tagurile strong i b? 15. Poate fi utilizat tagul em n interiorul tagului head?

    Argumentai. 16. Care este diferena dintre tagurile br i p? 17. Detectai eroarea din urmtoarea secven de cod, i explicai

    cum poate fi corectat:

    18. Detectai eroarea(erorile) din urmtoarea secven de cod, i explicai cum poate fi corectat:

    19. Cum se nsereaz o imagine n pagin? 20. Care atribut se utilizeaz pentru a afia n browser un text, n

    cazul n care imaginea nu a putut fi ncrcat? 21. Ce atribute pot fi utilizate la toate tagurile HTML? 22. Pentru ce se utilizeaz hiperlinkurile? Cum se adaug un

    hiperlink n pagin?

  • ~ 41 ~

    23. Enumerai modurile de deschidere a unei adrese prin intermediul unui hiperlink. Argumentai utilizarea unei metode concrete ntr-o siuaie concret, pe baza unui exemplu.

    24. Poate fi utilizat o imagine ca hiperlink? Dac da, expunei secvena de cod care face posibil acest lucru.

    25. Care este scopul utilizrii tabelelor? 26. Care tag este utilizat pentru a crea o tabel? 27. Din ce este compus o tabel? 28. Pentru ce este utilizat tagul tr? 29. Cum se creaz o celul a tabelei? 30. Explicai cum lucreaz colspan, n baza unui exemplu. 31. Explicai cum lucreaz rowspan, n baza unui exemplu. 32. Este posibil utilizarea concomitent a artibutelor colspan i

    rowspan? Argumentai. 33. Care este unitatea(unitile) de msur pentru limea tabelei i a

    celulei?

    34. Care este diferena dintre unitaile de msur pixel i %? 35. Care atribut este utilizat pentru a indica grosimea bordurii unei

    tabele?

    36. Scriei codul HTML care a generat urmtoarea tabel:

    1 2

    3 4

    37. Scriei codul HTML care a generat urmtoarea tabel:

    12

    3 4

    38. Scriei codul HTML care a generat urmtoarea tabel:

    13 2

    4

    39. Cte tipuri de liste pot fi create n documentele HTML? 40. Cum se creaz o list numerotat? 41. Care ste diferena dintre o list numerotat i o list

    nenumerotat? 42. Care tag este utilizat pentru a crea un element al listei? 43. Se d umtorul cod:

  • ~ 42 ~

    element 1

    element 2

    Care va fi rezultatul executrii? 44. Creai o list ordonat din 4 elemente. 45. Cum se marcheaz un bloc de comentarii HTML? 46. Care tag este utilizat pentru a crea un formular? Descriei

    parametrii formularului.

    47. Enumerai tipurile de elemente ale formularului pe care le cunoatei.

    48. Ce tip de element poate fi utilizat pentru a nscrie o singur linie de text?

    49. Este nevoie ca dintr-o list de valori s poat fi selectat doar una. Ce tag va fi utilizat?

    50. Ce element al formularului va fi utilizat, cnd este nevoie de selectat dou sau mai multe valori dintr-o list de valori predefinit?

    51. Se poate utiliza elementul textarea pentru a nscrie o singur linie de text? Argumentai.

    52. Pentru ce este utilizat tagul input? 53. La care elemente ale formularului poate fi utilizat artibutul

    selected i pentru ce? 54. Care sunt diferenele dintre metodele GET i POST de

    expediere a datelor din formular.

    55. Care atribut HTML se utilizeaz pentru dezactivarea unui element al formularului?

    56. Ce valoare trebui s primeasc atributul enctype al formularului pentru a putea transmite fiiere?

    57. Unde sunt expediate datele din formular la apsarea butonului de expediere a formularului?

    58. Care este diferena dintre i ?

    59. Pentru ce se utilizeaz metatagurile? Ce metataguri cunoatei? 60. Care este scopul utilizrii atributelor h1, h2, h3?

  • ~ 43 ~

    UNITATEA DIDACTIC

    STILURI CSS

    Finaliti:

    Dup studierea unitii didactice i realizarea sarcinilor propuse, studentul va fi capabili s:

    cunoasc sintaxa CSS;

    poat utiliza stiluri inline, clase CSS i fiiere CSS externe;

    aplice stilurile CSS la formatarea unei pagini HTML.

  • ~ 44 ~

    3. STILURI CSS

    CSS (Cascading Style Sheets) este un standard pentru

    formatarea elementelor unui document HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere externe sau n cadrul documentului, prin elementul i/sau atributul style. CSS se poate utiliza i pentru formatarea elementelor XHTML, XML i SVGL.

    Modelele de stiluri pot fi aplicate aproape oricrei etichete HTML, folosind proprieti i valori specifice codului CSS.

    Un stil reprezint o colecie de atribute ale textului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. Aceste atribute pot fi tipul de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul textului n pagin. Gruparea lor n stiluri permite autorului s aplice aceeai colecie de atribute la diferite pri ale unui document.

    Stilurile aplicate unui document HTML au multe avantaje pentru

    creatorii de pagini Web:

    Ofer control crescut asupra aspectului i plasrii textului n pagin;

    Reduc "nvlmeala" produs de multitudinea de deschideri i nchideri ale etichetelor care descriu elementele individuale ale textului;

    Procesul de modificare a diferitelor elemente din pagin se simplific.

    De exemplu, dac se dorete ca titlurile s aib un alt tip de font dect textul obinuit, s fie de dimensiune mai mare i scrise cu caractere ngroate i italice, ar trebui s se defineasc aceste atribute de formatare pentru fiecare titlu n parte. Folosind stilurile nu este nevoie dect de creat o singur definiie de stil care s conin atributele de formatare dorite, care o s fie aplicate la fiecare titlu.

    n plus, folosirea stilurilor reduce considerabil efortul depus atunci cnd se dorete modificarea aspectului i aranjrii elementelor din pagini. n locul parcurgerii fiecrui document n parte i modificarea fiecrui element, este necesar s se opereze modificri doar asupra foii de stiluri care controleaz aceste elemente.

  • ~ 45 ~

    3.1. Sintaxa CSS

    Definirea stilului se face conform sintaxei:

    selector{proprietate1:valoare1; proprietate2:valoare2, ...}

    unde selector este eticheta HTML (nencadrat ntre acolade) creia i se aplic stilul.

    Daca stilul se aplic la mai multe etichete HTML, acestea se enumer prin virgul: selector1, selector2, ... :

    selector1, selector2, ... {proprietate1: valoare1;

    proprietate2:valoare2; ...}

    Comentarii. Se pot introduce comentarii n codul CSS, cu rol de explicaie. Textul comentariului se ncadreaz ntre /* i */ - de exemplu: /* acesta este un comentariu */ - i nu este vizibil n browser.

    3.2. Valorile proprietilor

    Toate valorile care pot fi setate pentru proprietile CSS pot fi atribuite unuia dintre urmtoarele grupuri: numr, procent, dimensiune, culoare sau adres.

    3.2.1. Numere

    Valoarea poate fi un numr ntreg sau real, n calitate de separator al prii ntregi i celei zecimale fiind utilizat punctul:

    p {

    font-weight: 600; /* ngroarea textului */ line-height: 1.2; /* spaiul dintre rnduri */ }

    n cazul n care partea ntreag este zero, ea poate fi omis. Astfel notaiile 0.5 i .5 vor fi echivalente.

    3.2.2. Procente

    Procentele se utilizeaz atunci cnd trebuie s se modifice o valoare n dependen de elementul printe sau de ali factori externi (browser de exemplu). Astfel, dac vom seta limea unui element 100%, acest element va ocupa toat limea printelui i se va modifica odat cu aceasta. Un exemplu ar fi redimensionarea ferestrei browserului, n acest caz elementele ale cror lime este indicat n % i modific dimensiunea n dependen de dimensiunea ferestrei browserului.

  • ~ 46 ~

    3.2.3. Dimensiunea elementelor

    Pentru a specifica dimensiunile diferitelor elemente, n CSS se utilizeaz uniti absolute i relative. Unitile absolute nu depind de dispozitivul de ieire (monitor, telefon mobil etc), iar cele relative definesc dimensiunile n dependen de valorile altor dimensiuni.

    Dimensiuni relative

    Uniti relative, sunt de obicei utilizate pentru text, sau atunci cnd este nevoie de calculat raportul procentual ntre diferite elemente. Mai jos sunt expuse principalele uniti relative:

    em - dimensiunea fontului elementului curent;

    ex - nlimea simbolului x;

    px pixeli;

    % - procent. em este o unitate variabil care depinde de dimensiunea fontului

    elementului curent (setat de proprietatea font-size). n fiecare browser este setat o dimensiune implicit a textului, n cazul n care aceasta nu este indicat explicit. Deci, dimensiunea fontului de 1em egal cu dimensiunea fontului implicit al browserului, sau al elementului printe. Cu alte cuvinte 1em i 100% sunt egale.

    ex se definete ca nlimea simbolului x (minuscul). Aici sunt valabile aceleai reguli ca i pentru em.

    px este punctul elementar afiat de un monitor sau alt dispozitiv. Dimensiunea pixelului depinde de rezoluia dispozitivului i a parametrilor si.

    % definete valoarea unei anumite proprieti n dependen de aceeai proprietate a elementului printe n care este amplasat.

    Dimensiuni absolute

    Dimensiunile absolute se utilizeaz mai rar, fiind aplicate cel mai des pentru lucrul cu textul. Mai jos sunt enumerate dimensiunile

    absolute:

    in - 1 inch este egal cu 2,54 cm;

    cm centimetri;

    mm milimetri;

    pt - 1 punct este egal cu 1/72 inch.

  • ~ 47 ~

    3.2.4. Culoarea elementelor

    n CSS culoarea unui element poate fi setat n 3 moduri: codul hexazecimal , denumirea n englez, i n format RGB.

    Codul hexazecimal

    Pentru a seta culoarea se utilizeaz numere hexazecimale precedate de semnul special # (diez). Fiecare dintre cele trei culori rou, verde i albastru - poate varia de la 00 la FF. Astfel, desemnarea culorii este mprit n trei componente #RRGGBB, adic cte 2 caractere hexazecimale pentru fiecare culoare. Se permite utilizarea formei scurte:

    # RGB, astfel nct #fe0 este echivalent cu ffee00. Denumirea n englez Browserele suport urmtoarele culori dup denumire(tabelul

    3.1).

    Tabelul 3.1. Culorile recunoscute dup denumire

    white #ffffff sau #ff, alb

    silver #c0c0c0 gri

    gray #808080 gri ntunecat

    black #000000 sau #000 negru

    maroon #800000 maro

    red #ff0000 sau #f00 rou

    orange #ffa500 orange

    yellow #ffff00 sau #ff0 galben

    olive #808000 olive

    lime #00ff00 sau #0f0 verde deschis

    green #008000 verde

    aqua #00ffff sau #0ff albastru deschis

    blue #0000ff sau #00f albastru

    navy #000080 albastru ntunecat

    teal #008080 albastru verzui

    fuchsia #ff00ff sau #f0f roz

    purple #800080 violet

    Formatul RGB

    Putei defini o culoare utiliznd componentele rou, verde i albastru n zecimal. Valoarea fiecruia dintre cele trei culori poate varia de la 0 la 255. Putei seta, de asemenea, culoarea n procente. Modul de utilizare: RGB (255, 0, 0) sau RGB (100%, 20%, 20%).

  • ~ 48 ~

    3.2.5. Adrese

    Adresele (Uniform Resource Identifiers) sunt utilizate pentru a

    specifica calea ctre un fiier, de exemplu, pentru a seta imaginea de fundal a paginii sau a unui element. Putei face acest lucru folosind cuvntul cheie url (), ntre paranteze fiind indicat adresa ctre fiier:

    background: url(http://site.md/images/imagine.jpg);

    3.3. Metode de conectare a stilurilor CSS n pagin

    Modelele de stiluri pot fi aplicate n mai multe moduri: CSS intern (inline), n antetul fiierului, extern.

    3.3.1. CSS intern - direct n eticheta HTML (in-line)

    Pentru adugarea unui STYLE intern la un element se folosete atributul style urmat de proprieti i valori, folosind urmtoarea sintax:

    Exemplu:

    Exemplu h4

    Stilul respectiv va fi aplicat doar la elementul curent i nu afecteaz nici ntr-un fel stilurile CSS ale altor elemente.

    Definiiile de stil in-line se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor in-line este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt mai puternice dect cele din stilurile ncapsulate sau externe. Dac, de exemplu, am creat o foaie de stiluri pe care dorim s o aplicm unui document, i dac n cadrul acestui document avem un anumit element particular cruia dorim s-i dm un alt aspect dect cel prevzut n foaia extern, putem aplica acelui element un stil in-line care se va referi strict la el.

    Observaie: Se recomand utilizarea stilurilor inline doar n cazul cnd elementul are proprieti unice, care nu se mai aplic altor elemente.

    3.3.2. ncapsulate n antetul fiierului HTML (embedded)

    n acest caz se adaug n seciunea HEAD a documentului HTML urmtoarea construcie:

  • ~ 49 ~

    ... .

    Aceasta spune browserului c sunt adugate elemente de stil CSS.

    Aceast metod este util cnd se dorete folosirea acelorai stiluri pentru mai multe elemente din pagin, astfel sunt scrise o singur dat i nu la fiecare element.

    Proprietile i valorile stilurilor CSS se introduc n acest element STYLE, dup cum este expus n urmtorul exemplu:

    titlu

    Conform acestui cod, toate textele "h2" din pagin vor avea culoarea albastr i vor fi subliniate.

    Se folosete (opional) "" pentru browserele care nu recunosc elementul "" i astfel l ignor.

    3.3.3. Fiiere CSS externe (linked)

    Aici proprietile i valorile pentru diverse stiluri sunt specificate ntr-un fiier extern special, de obicei cu extensia .css (pe care l putem construi cu un simplu editor de texte cum ar fi Notepad).

    Avantajul folosirii fiierelor externe CSS este faptul c aceleai coduri de stil pot fi folosite de mai multe pagini din site, sau chiar tot

    site-ul, fiind scrise o singur dat. n plus ajut la micorarea ca mrime (n bytes) a documentului HTML care astfel se ncarc mai repede.

    n fiierul extern CSS se scriu direct elementele cu proprietile i valorile dorite, nu se mai adaug eticheta style.

    Exemplu de model pentru creare unui fiier .css: setarea proprietilor CSS pentru hiperlinkuri a:link {

  • ~ 50 ~

    color:#0000ff;

    text-decoration:none;

    font-weight:normal;

    font-size:15px;

    font-family: Arial;

    }

    setarea proprietilor CSS pentru hiperlinkurile vizitate a:visited {

    color:#008080;

    text-decoration:none;

    font-weight:normal;

    font-size: 15px;

    font-family: Arial;

    }

    setarea proprietilor CSS pentru hiperlinkuri, atunci cnd cursorul se afl deasupra

    a:hover {

    color:#b54090;

    text-decoration:underline;

    font-weight:normal;

    font-size: 15px;

    font-family: Arial;

    }

    Pentru a aduga acest stil CSS ntr-o pagin web, adugai n seciunea HEAD a documentului HTML care va folosi acel fiier cu stiluri, (ntre ... ) urmtoarea construcie:

    unde la "href" se scrie calea i numele fiierului css folosit.

    3.4. Aplicarea stilurilor CSS unuia sau mai multor elemente

    Este posibil ca un anumit stil s poat fi aplicat numai unei singure etichete HTML, iar altul s poat fi aplicat mai multor etichete HTML de diferite tipuri. Pentru aceasta se folosete atributul id sau class n interiorul etichetelor HTML la care vrem s aplicm un anumit stil.

    Diferena dintre id i class este faptul c se poate folosi acelai atribut class pentru mai multe elemente HTML, pe cnd acelai id se folosete numai pentru un singur element HTML.

  • ~ 51 ~

    3.4.1. Aplicarea stilurilor CSS unui singur element prin style

    Utilizarea stilurilor CSS n acest mod este recomandat n cazul n care este nevoie de setat proprietile unui singur element i aceste proprieti comune nu vor fi utilizate de ctre alte elemente. De exemplu, atunci cnd este nevoie ca un anumit element s fie amplasat pe o anumit poziie, este binevenit utilizarea stilurilor CSS in-line:

    Alte elemente care se vor afla pe aceleai coordonate n pagin

    nu exist, de aceea este inutil crearea unei clase de stiluri separate n acest scop. Cu toate acestea, elementul respectiv, de asemenea, poate sa

    fie legat de o careva clas CSS de unde va utiliza proprieti comune, ca de exemplu culoarea fundalului, limea, nlimea, etc.

    3.4.2. Aplicarea stilurilor CSS unui singur element prin id

    Utilizarea acestei metode este foarte asemntoare cu metoda expus anterior (style), doar c toate proprietile sunt descrise nu direct n interiorul tagului, dar ntr-un fiier extern .css, sau ncapsulat n seciunea head. De asemenea, i aici, obiectul poate fi legat i cu o clas CSS de la care poate moteni careva proprieti comune, altele dect cele date de id.

    Pentru a lega un element HTML cu un id din CSS se procedeaz n modul urmtor:

    n fiierul CSS sau n se enumer proprietile identificatorului respectiv

    #identificator{

    color: red;

    width:50%;

    }

    iar n fiierul HTML se face legtura elementului HTML cu stilul respectiv n modul urmtor

    Astfel, elementul HTML va primi acele proprieti CSS care

    sunt specificate pentru #identificator. Dup cum se poate observa, numele identificatorului n CSS ncepe cu caracterul special # (diez) iar n HTML acesta nu este necesar.

  • ~ 52 ~

    3.4.3. Aplicarea stilurilor CSS mai multor elemente prin class

    Utilizarea acestei metode este, ntr-o careva msur, asemntoare cu metoda expus anterior(id), doar c proprietile CSS se vor aplica nu unui singur element dar mai multor elemente din aceeai clas.

    Pentru a lega un element HTML cu o clas din CSS se procedeaz n modul urmtor:

    n fiierul CSS sau n se enumer proprietile clasei CSS respective

    .nume_clasa{

    color: blue;

    text-align:center;

    }

    iar n fiierul HTML se face legtura elementului (elementelor) HTML cu clasa de stiluri respectiv, n modul urmtor

    Astfel, elementul (elementele) HTML vor primi acele proprieti

    CSS care sunt specificate pentru .nume_clasa. Dup cum se poate observa, numele clasei n CSS ncepe cu caracterul special .(punct) iar n HTML acesta nu este necesar.

    De asemenea este posibil conectarea a mai multor clase CSS la un singur element. n CSS se vor declara 2 clase:

    .c1{

    color: blue;

    text-align:center;

    }

    .c2{

    color: red;

    text-align:center;

    }

    iar n fiierul HTML se face legtura elementului (elementelor) HTML cu clasele de stiluri respective, n modul urmtor:

    Astfel, elementul (elementele) HTML vor primi acele proprieti

    CSS care sunt specificate pentru .c1 i .c2, iar n cazul n care unele proprieti sunt comune, prioritate vor avea valorile date n clasa care a fost definit ultima:

  • ~ 53 ~

    .c1{

    color: blue;

    text-align:center;

    }

    .c2{

    color: red;

    text-align:center;

    }

    Culoarea textului va fi red, deoarece ea este dat n clasa c2 care a fost creat mai trziu dect clasa c1.

    3.4.4. Aplicarea stilurilor CSS la nivel de tag

    n CSS de asemenea este posibil aplicarea anumitor proprieti elementelor fr a utiliza style, id sau class, i anume aplicarea stilurilor la nivel de tag.

    De exemplu, pentru a face ca toate hiperlinkurile n pagin s primeasc culoarea roie (implicit acestea au culoarea albastr) i textul ngroat, este necesar ca n fiierul CSS sau n s fie nscris urmtorul cod:

    a{

    color: red;

    font-weight: bold;

    }

    La utilizarea acestei metode nu mai este nevoie ca la fiecare tag

    a s fie ataat o clas sau un identificator CSS, tuturor acestor taguri automat fiindu-le aplicate proprietile specificate.

    3.4.5. Selectorul universal

    Uneori trebuie s se seteze anumite proprieti CSS pentru toate elementele paginii, de exemplu, setarea fontului pentru text, culoarea

    fundalului, alinierea etc. n acest caz, se va utiliza selectorul universal, care este legat cu oricare element din pagin.

    Pentru crearea selectorului universal este utilizat un asterisc (*)

    iar sintaxa este urmtoarea: * {reguli CSS}

    Observaie: selectorul universal are prioritatea cea mai mic, iar rescrierea anumitor proprieti ale sale prin alte metode anuleaz valorile setate n selector.

  • ~ 54 ~

    3.4.6. Prioritatea aplicrii proprietilor CSS

    Dac pentru un element HTML, proprietatea CSS este specificat de 2 sau mai multe ori, prioritate are valoarea care a fost setat ultima.

    De exemplu:

    p { color: green; }

    p { color: red; }

    n acest caz, va fi aplicat proprietatea color: red;. De asemenea, prioritatea aplicrii unei proprieti depinde i de

    modul n care ea este atribuit elementului. Astfel stilurile inline au cea mai mare prioritate, iar stilurile aplicate la nivel de tag, au prioritatea cea

    mai mic. Mai jos este dat ordinea aplicrii pentru fiecare metod: 1- Stil inline; 2- legare prin id; 3- legare prin class; 4- legare prin tag; 5- stil universal *. Exemplu:

    Se d culoarea textului pentru tagul p. p { color: green; }

    urmtoarea construcie va anula regula de mai sus, deoarece are o prioritate mai mare

    .class_p { color: red; }

    iar construcia #id_p { color: red; }

    anuleaz ambele reguli care au fost descrise anterior. Iar construcia TEXT va anula toate regulile, deoarece, stilurile inline au prioritate

    maxim.

    3.5. Proprieti CSS

    Alinierea elementelor

    text-align - poziioneaz pe orizontal obiecte (de exemplu text sau imagini) i admite valorile left, right i center ca i eticheta align din HTML;

  • ~ 55 ~

    vertical-align- este folosit pentru alinierea pe vertical a obiectelor dintr-un tabel i poate lua valorile: top, middle i bottom;

    float- este utilizat pentru alinierea forat a unui element fa de celelalte elemente, iar restul elementelor vor ocupa locul rmas. Poate avea valorile: none, left i right.

    Cu proprietatea CSS float, un element poate fi mpins ctre dreapta sau ctre stnga, permind celorlalte elemente s se organizeze n jurul lui. Proprietatea este folosit frecvent pentru imagini, dar este foarte util i cnd lucrai cu aspectul paginii.

    Elementele se deplaseaz numai orizontal, ctre stnga sau ctre dreapta. Un element deplasabil va mpins spre dreapta sau spre stnga ct de mult se poate. Asta nseamn c elementele care urmeaz elementului deplasabil se vor aranja n jurul lui. Elementele dinaintea elementului deplasabil nu vor fi afectate.

    n continuare vor fi expuse 3 exemple: - float: none pentru codul HTML:

    Acesta este un exemplu de utilizare float:none

    rezultatul va fi urmtorul:

    Fig. 3.1. Element fr float

    - float: right pentru codul HTML:

    Acesta este un exemplu de utilizare float:right

  • ~ 56 ~

    rezultatul va fi urmtorul:

    Fig. 3.2. Element cu float:right

    - float: left pentru codul HTML:

    Acesta este un exemplu de utilizare float:left

    rezultatul va fi urmtorul:

    Fig. 3.1. Element cu float: left

    z-index - orice element poziionate pe o pagin web poate fi suprapus pe alt element ntr-o anumit ordine, simulnd astfel o a treia dimensiune a ecranului. Fiecare element poate fi att sub, ct i

  • ~ 57 ~

    deasupra altor elemente ale paginii. Aceast proprietate funcioneaz numai pentru elementele a cror proprietate position este stabilit ca absolute, fixed sau relative.

    Fig. 3.4. Proprietatea z-index

    Formatarea textului

    text-decoration - adaug sublinierea sau tierea blocului text asociat i poate avea valorile underline, line-through sau none;

    color - definete culoarea textului dintr-o zon sau ntreaga pagin;

    font-family - seteaz tipul de font;

    font-size - seteaz dimensiunea fonturilor. Valorile pot fi exprimate n pixeli (px) sau puncte (pt);

    font-weight - seteaz grosimea fonturilor. Valorile posibile pot fi: normal, bold, bolder, lighter;

    font-style - seteaz stilul de font. Valorile pot fi: normal, italic, oblique;

    letter-spacing - seteaz spaierea literelor. Valorile pot fi n: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri (mm);

    word-spacing - seteaz spaierea cuvintelor. Valorile pot fi n: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri;

    text-transform - transform textul. Valorile posibile pot fi: capitalize, uppercase, lowercase, none;

    first-letter - schimb aspectul primei litere dintr-un cuvnt;

    first-line - schimb aspectul primei linii dintr-un text Personalizarea fundalului elementelor

    background-color definete culoarea de fond i poate fi asociat oricrei etichete HTML;

    background-image asociaz o imagine ca fundal unui obiect. n funcie de dimensiunile obiectului cruia i sunt asociate,

  • ~ 58 ~

    imaginile de fond se repet pe orizontal i vertical. Repetarea poate fi controlat prin parametrul care poate lua valorile:

    o repeat-x imaginea se repet pe orizontal; o repeat-y imaginea se repeta pe vertical; o no-repeat imaginea nu se repet. n mod normal imaginea de fundal ncepe din colul stnga sus al

    obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS

    background-position. Sunt acceptate valorile: top, center, bottom,

    percentage sau pixel;

    background permite modificarea tuturor proprietilor legate de fundal(culoare, imagine, aliniere), fiecare proprietate este dat prin spaiu liber;

    Personalizarea bordurii(chenarului)

    Netscape i Internet Explorer afieaz diferit chenarele. Comanda CSS pentru definirea chenarului este border avnd proprietile asociate width, style i color. Pentru a fi siguri c aceste proprieti funcioneaz att n Internet Explorer ct i n Netscape trebuie s declarm pentru border cel puin width i style.

    border-width stabilete grosimea chenarului i poate fi exprimat n px (pixeli), pt (puncte), cm (centimetri) sau in (inci).

    border-style stabilete tipul chenarului i poate fi dotted, dashed, solid, double, groove, ridge, inset i outset.

    border-color stabilete culoarea chenarului i poate fi exprimat prin valoare hexazecimal sau n cuvinte.

    border permite modificarea tuturor proprietilor legate de chenar (culoare, stil, grosime), fiecare proprietate este dat prin spaiu liber. Exemplu: border: 3px solid red;

    Setarea dimensiunilor elementelor

    Limea i nlimea unui element sunt stabilite n HTML prin atributele width i height. Aceste atribute pot fi adugate sau suprascrise prin comenzi CSS. Dimensiunile pot fi indicate n pixeli:

    width: 15px

    sau n procente height:50%

    Dac dimensiunea se indic n procente, procentul se calculeaz n raport cu containerul n care se afl obiectul.

    Proprietile padding i margin

  • ~ 59 ~

    padding - stabilete distana dintre obiect i chenar simultan pentru toate laturile. Distanele pot fi stabilite i individual folosind padding-top, padding-bottom, padding-left sau padding-right.

    margin - stabilete distana dintre chenar i celelalte obiecte din pagin simultan pentru toate laturile. Dista