Curs2 - HTML

172
Tehnici de informare şi comunicare Medii şi tehnologii educaţionale interactive

description

About HTML Limbaj

Transcript of Curs2 - HTML

  • Tehnici de informare i comunicare

    Medii i tehnologii educaionale interactive

  • Medii i tehnologii educionale interactive

    1

    Prezentare general

    Acest curs urmrete formarea cursanilor n utilizarea unui ansamblu de

    tehnologii orientate spre exploatarea unui mediu colaborativ de creare i distribuire de

    cunotine. Absolvenii unui astfel de curs pot contribui devisiv n rezolvarea

    problemei asigurrii resurselor de formare n domenii cu rat mare de nnoire a

    cunotinelor, mecatronica fiind evident, unul dintre acestea. Ca suport pentru

    tehnologiile propuse se folosete reeaua Internet, cunotinele predate urmrind paii

    necesari codificrii i distribuirii de informaii tehnice.

    Obiective

    Cursul abordeaz urmtoarele teme generale:

    Comunicarea prin Internet. Arhitecturi, standarde i protocoale;

    Codificarea documentelor n HTML (XHTML)

    Formatarea documentelor folosind CSS (Cascade Style Sheets)

    Baze de date. Pagini web generate dinamic

    Platforme de e-learning. Funcii, instalare i configurare

    Realizarea i publicarea materialelor de formare n format electronic

    Administrarea platformei de e-learning din perspectiva profesorului

    nsuirea cunotinelor incluse n material va permite cursanilor s realizeze i s

    prezinte ntr-o form deosebit materialele proprii de formare elaborate pe

    parcursul proiectului i nu nnumai.

    Autorii

  • Medii i tehnologii educionale interactive

    2

    Capitolul I Limbajul HTML

    1.1 Istoric

    n urm cu peste 30 de ani, la sfritul anilor '60, Departamentul Aprrii din

    S.U.A. a pus bazele primei reele de calculatoare destinat s acopere o larg

    ntindere geografic, ARPAnet (Advanced Research Projects Agency Network). Scopul

    reelei era schimbul de informaii cu caracter tiinific i tehnic ntre participanii la

    diferite proiecte de cercetare din cadrul Departamentului Aprrii i cercettori din

    instituii de nvmnt superior implicate. Rezultatele obinute n cadrul acestui

    proiect au condus la definirea i apoi la standardizarea unor protocoale folosite la

    transferul de date prin reelele de calculatoare (TCP/IP - Transfer Control

    Protocol/Internet Protocol, HTTP - HyperText Transfer Protocol, FTP - File Transfer

    Protocol i altele) i a determinat n anii '70 i '80 o extindere lent dar continu a

    reelelor de calculatoare.

    naintea exploziei informaionale din anii '90 au mai trebuit s apar dou

    realizri importante:

    1. Dezvoltarea limbajului HTML, propus de Dr. Tim Berners-Lee, ntr-un articol publicat n 1989. Articolul propunea folosirea pentru codificarea informaiei vehiculate prin reelele de calculatoare a unui subset de marcaje definite n standardul SGML (Standard Generalized Markup Language, 1986). n esen SGML propune un set de marcaje care permit reconstituirea documentelor difuzate pe suport electronic.

    2. Apariia n februarie 1992 a primei aplicaii destinate navigrii pe Internet, Mosaic. Aplicaia a fost scris de studeni ai NCSA (National Center of Supercomputing Applications) din cadrul universitii statului Ilinois, USA.

    Limbajul HTML a fcut obiectul unor standardizri succesive, prima versiune

    finalizat fiind 2.0, n 1995 (autori Tim Berners-Lee i Dan Connoly).

    Importana dezvoltrii limbajului a condus la crearea World Wide Web

    Consortium (W3C), organizaie care n 1997 a finalizat versiunea 3.2 care i n prezent

    este recunoscut ca standardul HTML.

  • Medii i tehnologii educionale interactive

    3

    Spre finele anilor '90 au aprut ns noi tehnologii, legate de realizarea

    paginilor Web: Cascading Style Sheets (CSS), Active Server Pages (ASP), ceea ce a

    determinat continuarea activitii n domeniul standardizrii a W3C, organizaia

    realiznd succesiv standardele 4.0 i 4.01. Ultima versiune este 4.1, actualmente

    fiind n curs de pregtire versiunea 5.

    n viitorul previzibil, HTML va continua s reprezinte suportul pentru difuzarea

    de informaii prin Internet.

    1.2. Adresarea

    Regsirea unui fiier printre miliardele de fiiere existente n World Wide Web

    se bazeaz pe folosirea unui sistem unitar de adresare pus la punct odat cu

    internetul. Sistemul de adresare poart numele de URL (Uniform Resource Locator).

    Astfel, dac se afieaz n fereastra unei aplicaii de navigare pagina principal a

    saitului proiectului FLEXFORM aceasta ar putea arta ca n figur.

    n caseta pentru introducerea adresei a aplicaiei de navigare s-a tastat adresa

    http://www.flexform.ro/.

  • Medii i tehnologii educionale interactive

    4

    Prima parte a adresei (http) precizeaz protocolul care trebuie folosit pentru

    exploatarea fiierului, n cazul dat http (HyperText Transfer Protocol) deoarece fiierul

    este n format hypertext i codificat n html.

    A doua parte a adresei, www.flexform.ro identific un director de pe discul

    serverului care gzduiete saitul. Ea poate fi scris i folosind adresa fizic din

    Internet alocat serverului, care este format din patru numere cuprinse fiecare ntre

    0 i 255. De exemplu adresele http://www.flexform.ro/ i

    http://193.226.7.213/siteflex/ sunt echivalente dar a doua este mai greu de reinut.

    Punerea n coresponden a celor dou modaliti de indicare a directorului care

    conine pagina web dorit se realizeaz de una dintre aplicaiile pentru DNS (Domain

    Name System) accesate de browser.

    Dac adresa indicat n browser nu mai conine i alte caractere, serverul de

    Web specificat va trimite solicitantului pagina principal a saitului, fiierul

    corespunztor fiind denumit de obicei index.html.

    Adresa unui fiier din Internet poate fi ns mai complex. Astfel adresa

    http://www.flexform.ro/cursanti/autentif.html conine dup denumirea serverului o

    cale, /cursanti/ i denumirea fiierului referit, autentif.html. Aceasta nseamn c n

    directorul saitului exist un subdirector (cursanti) n care este nregistrat fiierul

    autentif.html.

    Se poate deci scrie:

    URL = protocol + server + cale + fiier

    Crearea unui numr de subdirectoare derivate din directorul principal al

    saitului face ntreinerea acestuia mult mai uoar. Aa cum se va vedea n capitolele

    urmtoare, chiar i n cazul unui sait mic numrul de fiiere coninnd imagini sau a

    alte tipuri de fiiere poate fi destul de mare, fiind indicat o structurare a lor ca n

    figur.

  • Medii i tehnologii educionale interactive

    5

    1.3 Principiile limbajului HTML

    Codificarea informaiilor n HTML se bazeaz exclusiv pe informaii de tip text

    (iruri de caractere ASCII). Dac informaia propriuzis este un text acest sistem de

    codificare este natural. Dac ns informaia este de alt natur (o imagine, o

    secven video sau audio) documentul n format HTML va conine numele fiierului

    care conine informaia respectiv.

    Exemplu de fiier n format hypertext:

    Prima pagina Web

    imagini

    css

    pagini web (fiiere .html)

  • Medii i tehnologii educionale interactive

    6

    NUMAI UNA

    Pe umeri pletele-i curg rau

    Mladie ca un spic de grau,

    Cu sortul negru prins in brau,

    O pierd din ochi de draga.

    Si cand o vad, innebunesc;

    Si cand n-o vad, ma-nbolnavesc,

    Iar cand merg altii de-o petesc,

    Vin popi de ma dezleaga.

    n fiierul dat ca exemplu ... , ... ,

    ... .a. sunt denumite marcaje HTML. Unele marcaje (

    sau ) conin informaii suplimentare ca valori ale unor atribute (bgcolor sau

    src). Analiznd coninutul fiierului se observ c informaia propriuzis este

    ncadrat ntre marcaje ... i ... . Marcajul delimiteaz

    un titlu (eng. heading) iar ... delimiteaz un paragraf (eng. paragraph).

    n coninutul fiierului apar i marcaje . Acestea indic trecerea la linie

    nou (eng. break) i nu au pereche.

    Pentru inserarea unei imagini s-a folosit tot un marcaj fr pereche, .

    Acesta indic fiierul care conine imaginea. n exemplul dat atributul src are valoarea

    "imagini/cobuc.jpg", deci fiierul cobuc.jpg este situat n subdirectorul imagini.

    Dup scrierea fiierului n Notepad i salvarea sub numele numai_una.html se

    poate deschide fiierul folosind de exemplu Internet Explorer.

  • Medii i tehnologii educionale interactive

    7

    1.4. XML, XHTML

    Un limbaj similar limbajului HTML este XML. Spre deosebire de HTML, n XML

    sintaxa este mai riguroas, marcajele aprnd n mod obligatoriu n perechi.

    Semnificaia lor este ns nedefinit, interpretarea cznd n sarcina aplicaiilor care

    exploateaz respectivele fiiere.

    Faptul c limbajele de programare actuale integreaz funcii specializate

    pentru prelucrarea fiierelor n format XML a favorizat apariia unui limbaj nou de

    codificare a paginilor Web, XHTML.

  • Medii i tehnologii educionale interactive

    8

    Deosebirile majore dintre HTML i XHTML constau n faptul c marcajele i

    atributele acestora sunt scrise cu litere mici, toate marcajele apar n perechi i valorile

    atributelor sunt obligatoriu cuprinse ntre ghilimele.

    Observaie: Pentru scrierea marcajelor din HTML care practic nu au nevoie de

    pereche se folosete o sintax aparte. Astfel, pentru trecerea la linie nou n loc s se

    secrie se va scrie mai simplu . La fel pentru inserarea imaginii se

    scrie .

    n XHTML pagina Web analizat deja s-ar scrie astfel:

    Prima pagina Web

    body { background-color: yellow; }

    NUMAI UNA

    Pe umeri pletele-i curg rau

    Mladie ca un spic de grau,

    Cu sortul negru prins in brau,

    O pierd din ochi de draga.

    Si cand o vad, innebunesc;

    Si cand n-o vad, ma-nbolnavesc,

    Iar cand merg altii de-o petesc,

    Vin popi de ma dezleaga.

    Fiierul astfel modificat se salveaz sub acelai nume. Primele dou linii din

    fiier impun browserului modul de tratare a informaiei coninute:

  • Medii i tehnologii educionale interactive

    9

    DTD (Document Type Definition) indic pe lng natura informaiei coninute

    (XHTML 1.0) i setul de marcaje utilizate. n exemplul considerat s-a indicat modelul

    Strict. n loc de Strict se putea indica modelul Transitional, diferena dintre cele dou

    fiind lista de marcaje i de atribute utilizabile, mai restrns n cazul variantei Strict.

    A doua linie face trimitere la o adres din Internet. Fiierul referit conine

    definiia riguroas a modelului Strict, respectiv modul n care trebuie interpretate

    marcajele i atributele acestora. n acest mod se dorete impunerea tratrii uniforme,

    de ctre toate browserele, a coninutului paginilor Web.

    O alt diferen notabil a variantei XHTML fa de HTML este adugarea n

    seciunea a marcajului . Acesta conine indicaii privind formatarea

    coninutului paginii web sub forma unor reguli. Pentru pagina considerat s-a inclus o

    singur regul:

    body { background-color: yellow; }

    Ea impune pentru corpul paginii (seciunea ) colorarea fundalului n

    galben. Caracteristic pentru XHTML este separarea informaiilor propriuzise de

    indicaiile de formatare. Astfel, n HTML pentru a scrie diferit o poriune dintr-un

    paragraf am putea ntlni o succesiune de marcaje ca n exemplul urmtor:

    Poezia Numai una... a fost publicata in 1837.

    n XHTML acelai efect s-ar obine scriind:

    Poezia Numai una... a fost publicata in 1837.

    Marcajul face referin la clasa bib. Definirea ei se poate face prin

    adugarea unei reguli suplimentare ntre ... :

    body { background-color: yellow; }

    .bib {font-style: italic; font-weight: bold; color: blue}

    A doua variant de formatare, specific limbajului XHTML este interesant

    deoarece orice clas astfel definit va putea fi referit n pagina Web ori de cte ori

    este nevoie. Aa cum se va vedea n continuare, ansamblul de reguli introdus prin

    poate fi salvat ntr-un fiier separat, utilizarea regulilor definite putnd fi

    imediat extins la toate paginile care alctuiesc un sait Web dndu-le un aspect

  • Medii i tehnologii educionale interactive

    10

    unitar. De asemenea eliminarea din corpul paginii (seciunea ) a detaliilor

    privind formatarea faciliteaz ntreinerea coninutului paginilor.

    1.3 Marcaje XHTML

    1.3.1. Generaliti Avnd n vedere avantajele limbajului XHTML i tendina actual de a se

    renuna la HTML n favoarea limbajului XHTML, n cele ce urmeaz vor fi prezentate

    doar cunotine de XHTML.

    O pagin web este coninut ntre marcaje ... i este

    constituit de cele mai multe ori din dou seciuni, head i body.

    Seciunea head este delimitat prin ... iar seciunea body

    este delimitat prin ... .

    Practic majoritatea paginilor care vor fi scrise n cadrul cursului se vor ncadra

    n structura urmtoare:

    ...(coninut head)

    ... (coninut body)

    1.3.2 Paragrafe Ca i n cazul banal al unui document editat cu un procesor de texte, fiecare

    fraz dintr-o pagin Web este coninut ntr-un paragraf. Pentru evidenierea unui

    paragraf se folosete perechea de marcaje ... .

  • Medii i tehnologii educionale interactive

    11

    Exemplu:

    Primul paragraf poate conine informaii generale. Urmtoarele peragrafe vor aduce precizri

    suplimentare, n final mesajul transmis fiind limpede.

    Dispunerea coninutului paragrafului este lsat la latitudinea aplicaiei de

    navigare. Dac n cadrul unui paragraf trebuie totui trecut forat la linie nou, n

    locul n care se dorete ruperea paragrafului se va folosi un marcaj .

    Exemplu:

    Pe umeri pletele-i curg rau

    Mladie ca un spic de grau,

    ....

    n unele cazuri se dorete ca browserul s nu separe pe linii consecutive dou

    iruri de caractere ntre care exist spaiu. Este cazul numerelor de telefon de

    exemplu. Pentru astfel de situaii se poate ncadra irul care nu trebuie separat ntre

    marcaje ... .

    Exemplu:

    Sunai la 0745 225236 pentru informaii suplimentare.

    Pentru scrierea caracterelor specifice limbii romne este indicat includerea n

    seciunea head a marcajului:

  • Medii i tehnologii educionale interactive

    12

    i pentru alte caractere speciale, de exemplu pentru cele folosite la scrierea

    marcajelor, trebuie folosite secvene de caractere:

    - pentru caracterul spaiu

    < - pentru <

    > - pentru >

    & - pentru &

    Pentru a evidenia pri dintr-un paragraf se folosesc marcajele ...

    i ... . Primul marcaj este interpretat de browsere ca

    indicnd scrierea nclinat (italic) iar al doilea este interpretat ca indicnd o scriere cu

    caractere ngroate (bold).

    1.3.3 Titluri Titlurile din paginile web sunt ncadrate ntre marcaje ... . Ca i n

    cazul procesoarelor de texte se pot folosi marcaje diferite pentru titluri de diferite

    nivele : h1, h2, , h6. n lipsa unor specificaii privind mrimea caracterelor, pentru

    nivelul 4 textul va fi afiat normal. Mrimea caracterelor pentru nivelele 5 i 6 va fi n

    acest caz mai mic dect cea normal iar pentru 1-3 va fi mai mare.

    Exemplu:

    Programul de lucru cu publicul

    1.3.4 Liste Marcajele XHTML permit definirea mai multor tipuri de liste.

    1.3.4.1 Lista ordonat Lista ordonat este declarat prin marcajul (ordered list) i are rndurile

    numerotate. Fiecare linie este ncadrat ntre marcaje ... .

  • Medii i tehnologii educionale interactive

    13

    Exemplu

    Introducere

    Limbajul HTML

    Sistemul de operare UNIX

    Publicarea saitului pe un server UNIX

    Numerotarea liniilor este automat. Pentru a ncepe numerotarea de la o

    valoare diferit de 1, marcajului i se va aduga atributul start=n, n fiind numrul

    dorit pentru prima linie a listei:

    Introducere

    . . .

    1.3.4.2 Lista neordonat Lista neordonat este declarat prin marcajul (unordered list) i are

    rndurile precedate de puncte. Fiecare linie este ncadrat de marcaje .

    Exemplu:

    Introducere

    Limbajul HTML

    Sistemul de operare UNIX

    >Publicarea saitului pe un server UNIX

    1.3.4.3 Lista coninnd definiii Lista coninnd definiii este declarat prin marcajul (definition list) i are

    rndurile precedate de marcaje pentru titluri i pentru definiii.

    Definitii

    Pagin Web

    Fiier (document) aparinnd WWW.

    Server Web

  • Medii i tehnologii educionale interactive

    14

    Calculator care memoreaz pagini web i le pune la dispoziia utilizatorilor reelei.

    Sait Web

    O colecie de pagini Web ntreinut de o firm, o instituie de nvmnt, o agenie

    guvernamental sau chiar de un individ.

    1.3.5 Imagini Pentru includerea n pagina web a unei imagini se folosete marcajul .

    Acesta accept atributele src pentru indicarea fiierului care conine imaginea i alt

    pentru definirea textului care va apare n locul imaginii dac afiarea imaginilor n

    fereastra browserului este inactivat sau la plasarea cursorului mouse-ului deasupra

    imaginii.

    Exemplu:

    Din punctul de vedere al programului de navigare, o imagine este un simbol ca

    i oricare dintre caracterele afiate n pagin. Fa de text, imaginile necesit un timp

    de ncrcare mai ndelungat, ceea ce impune limitarea mrimii i a numrului de

    imagini din paginile web.

    Imaginile pot proveni din diferite surse : alte pagini web, pot fi scanate sau

    desenate cu ajutorul unei aplicaii specializate.

  • Medii i tehnologii educionale interactive

    15

    Rezoluia imaginii, cuprins uzual ntre 72 DPI (dots per inch, puncte pe inci)

    i 600 DPI, influeneaz mrimea fiierului care conine imaginea. Monitoarele uzuale

    afieaz punctele la 0.23-0.26 mm, deci au o rezoluie de aproximativ 96 DPI. Dac

    imaginile nu trebuie ulterior imprimate i nu se dorete modificarea mrimii lor n

    momentul afirii n fereastra browserului, se recomand scanarea folosind aceast

    rezoluie.

    Imaginile care trebuie afiate n paginile web sunt pstrate n fiiere separate.

    Deoarece memorarea informaiei grafice se poate realiza folosind o multitudine de

    tehnologii, prin convenie formatul fiierelor destinate afirii n cadrul paginilor web

    trebuie s fie GIF (Graphics Interchange Format, avnd extensia .gif, formatul

    suportnd 256 culori), JPEG (Joint Photographic Experts Group, avnd extensia .jpg,

    formatul suportnd 224 = 16777216 culori) sau PNG (Portable Network Graphics,

    variant ameliorat a formatului GIF avnd extensia .png).

    Dac aceeai imagine este folosit pe mai multe pagini, programul de navigare

    o va ncrca i memora temporar pe disc reducnd astfel timpii de ncrcare a

    paginilor.

    Adaptarea unei imagini la cerinele unui proiect presupune n principal

    decuparea zonei interesante i redimensionarea acesteia n coresponden cu spaiul

    alocat n pagin.

    Exist o multitudinde de aplicaii care permit manipularea imaginilor. Cele mai

    utilizate sunt urmtoarele: Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro,

    The GIMP, Inkscape, Pixel image editor, Paint.NET sau Xara.

    Alegerea unei aplicaii potrivite pentru realizarea activitilor legate de web

    design este simpl dac se urmrete minimizarea costurilor deoarece numai

    Inkscape, The Gimp i Paint.NET sunt gratuite. n cadrul cursului, prelucrrile de

    imagini vor fi realizate cu Inkscape (http://www.inkscape.org/). Un tutorial succint

    din care se poate nva folosirea aplicaiei poate fi accesat la adresa:

    http://en.flossmanuals.net/Inkscape/.

  • Medii i tehnologii educionale interactive

    16

    1.3.6 Mic tutorial Inkscape Din punct de vedere al realizrii grafice, un sait trece prin dou faze.

    n prima faz se realizeaz un "layout". Practic este vorba despre un fiier n

    care informaia este dispus pe mai multe nivele, la baz fiind nivelul care conine un

    fundal. Nivelele conin text, alte mici imagini (de exemplu fundalul unor butoane) sau

    dreptunghiuri pline care delimiteaz exact zona n care va fi afiat o prezentare

    (video, succesiune de imagini etc.). Pentru aceast etap se folosete o aplicaie

    specializat pe informaie grafic deoarece trebuie depasate i redimensionate

    imagini, trebuie create diferite efecte i construite imaginile care vor fi folosite ca

    fundal.

    Exemplu:

    Dup ncheierea acestei etape rezultatul este prezentat firmei care a comandat

    lucrarea n vederea obinerii aprobrii pentru continuare pe soluia propus.

    Recomandare: Pentru reuita unui proiect este bine s fie studiate ct mai

    multe realizri nrudite, o surs important de inspiraie pentru graficieni i nu numai

    fiind http://www.templatemonster.com.

    A doua faz, de decupare (engl. slicing), const n divizarea imaginii obinut

    ca fundal n prima etap n imagini mai mici a cror alturare permite refacerea

    fundalului iniial. Aceste imagini vor constitui fundalul unor blocuri care, n etapa de

    integrare, vor primi informaia efectiv (text, imagini, player video, galerie de imagini

    n JavaScript sau Flash, etc.).

  • Medii i tehnologii educionale interactive

    17

    n aceast etap se ascund informaiile iniial introduse n layout rmnnd

    numai fundalul paginii. Apoi se decupeaz blocurile de imagine dorite i se salveaz

    fiecare bloc ntr-un fiier separat. Aceste fiiere vor primi denumiri sugestive pentru a

    putea fi uor identificate i integrate n blocurile care vor fi definite n etapa urmtoare

    (etapa zis "de integrare").

    a. Redimensionarea unei imagini

    Se pornete aplicaia Inkscape, se deschide fiierul care conine imaginea (File

    / Open) i se selecteaz fiierul dorit.

    Dac fiierul conine o imagine se selecteaz imaginea i apoi se selecteaz n

    meniul aplicaiei Object / Transform. Aplicaia va afia o fereastr n care se

    selecteaz tabul de selecie Scale. De obicei dimensiunile imaginilor sunt date n pixeli

    (puncte ecran) i din acest motiv se selecteaz ca i unitate de msur px.

  • Medii i tehnologii educionale interactive

    18

    b. Decuparea unei zone dreptunghiulare

    Dac se dorete decuparea unei poriuni dreptunghiulare dintr-o imagine, se

    va desena un dreptunghi care ncadreaz regiunea dorit i apoi se va selecta File /

    Export Bitmap i se va preciza fiierul n care se va pstra noua imagine. Fiierul va fi

    n format .png.

    Exemplu:

  • Medii i tehnologii educionale interactive

    19

    Numele fiierului .png (rect3679) poate fi editat. Numele iniial afiat a fost

    stabilit folosind denumirea intern a obiectului (dreptunghi) folosit la selecie.

    c. Slicing (decuparea imaginii de pe fundal)

    nceperea lucrului la un sait presupune frecvent activiti de decupare a unei

    imagini pe care un grafician a plasat-o ca fundal al saitului. n urma decuprii imaginii

    folosite ca fundal vor fi obinute mai multe imagini care vor fi ulterior aplicate ca

    fundal blocurilor care compun pagina Web i care vor conine informaia propriuzis

    (text, alte imagini etc). Numele consacrat al acestei activiti este slicing (slice =

    felie).

    Deoarece n HTML blocurile care formeaz pagina sunt dreptunghiulare, ne

    intereseaz doar decuparea n aceast form.

    Pentru a realiza decuparea unei imagini n poriuni mai mici se vor suprapune

    peste imagine o serie de dreptunghiuri care vor fi utilizate n final pentru tierea

    poriunilor dorite. Pentru a realiza toate dreptunghiurile naintea decuprii

  • Medii i tehnologii educionale interactive

    20

    propriuzise, activitatea va ncepe prin declararea unui nou nivel (layer) care va

    conine doar dreptunghiuri de selecie.

    Noul nivel este imediat impus ca nivel curent. Numele nivelului curent este

    afiat permanent n partea de jos a ferestrei aplicaiei, n bara de stare.

    n noul nivel se deseneaz un dreptunghi suprapus peste una dintre zonele

    care trebuie decupat. Dimensiunile dreptunghiului pot fi adaptate cu mouse-ul sau

    pot fi modificate direct, schimbnd valorile afiate pe bara cu instrumente.

  • Medii i tehnologii educionale interactive

    21

    Pentru a modifica aspectul dreptunghiului (culoare, transparen) se

    selecteaz n meniu Object / Fill and Stroke sau se apas butonul de pe bara cu

    instrumente.

    n procesul de decupare vor fi realizate evident mai multe dreptunghiuri. Din

    considerente legate de uurina manipulrii acestora este bine s fie declarate parial

    transparente i colorate ntr-o culoare distinct, dei naintea folosirii lor pentru

    decuparea zonelor dorite acestea vor fi declarate din nou ca fiind complet

    transparente. Nivelul de transparen se impune prin depalasarea ultimului cursor din

    fereastr, A (prescurtare de la alpha chanel, denumirea consacrat a componentei

    transparen). Transparena poate varia ntre 0 (complet transparent) i 255

    (complet opac).

    O funcie interesant a aplicaiei Inkscape este posibilitatea impunerii unei

    alinieri perfecte a unui dreptunghi astfel desenat fa de oricare dintre laturile imaginii

    iniiale sau fa de alt dreptunghi.

    Rou

    Verde

    Albastru

    Transparen

  • Medii i tehnologii educionale interactive

    22

    Pentru primul caz, alinierea fa de o latur a imaginii iniiale, se afieaz

    fereastra Align and Distribute (din meniu Object / Align and Distribute sau butonul

    de pe bara cu instrumente) i se selecteaz dreptunghiul (butonul ).

    Situaia iniial:

    i finalul:

    Pentru a realiza o aliniere perfect a laturilor corespunztoare n cazul n care

    sunt realizate mai multe dreptunghiuri de selecie, fereastra Align and Distribute

    conine butoane care permit poziionarea unui dreptunghi fa de alt dreptunghi,

    construit anterior i care este identificat implicit ca referin. Pentru a realiza o astfel

    de aliniere se selecteaz cu mouse-ul ambele dreptunghiuri (dreptunghiul curent i

    referina) i se apas butonul (Align tops of objecte to bottom of anchor).

  • Medii i tehnologii educionale interactive

    23

    Situaia iniial:

    Comand aliniere:

    Rezultat:

    n procesul de decupare este necesar frcvent duplicarea unui dreptunghi deja

    realizat. Pentru aceasta se selecteaz cu butonul drept dreptunghiul realizat i apoi se

    selecteaz n meniul contextual afiat opiunea Duplicate. Noul dreptunghi va fi

    realizat peste cel de referin, deci trebuie imediat deplasat cu mouse-ul i apoi

    redimensionat i aliniat. Dimensiunile finale ale dreptunghiurilor de selecie trebuie

  • Medii i tehnologii educionale interactive

    24

    notate deoarece blocurile n care acestea vor fi plasate ca imagini de fundal trebuie s

    aib aceleai dimensiuni.

    n meniul contextual afiat la selectarea unui dreptunghi se afl i opiunea

    Object properties. n urma selectrii acestei opiuni se afieaz o fereastr n care se

    poate introduce un nume pentru dreptunghiul selectat. Acest nume va fi pstrat i

    pentru fiierul care va conine poriunea din imagine decupat cu ajutorul

    dreptunghiului respectiv.

  • Medii i tehnologii educionale interactive

    25

    Se reduce parametrul A la 0:

    Se selecteaz File / Export Bitmap:

    Se observ c numele fiierului coincide cu cel al dreptunghiului, formatul

    implicit fiind evident tot .png.

  • Medii i tehnologii educionale interactive

    26

    1.3.7 Tabele

    Tabelele sunt folosite n paginile web pentru prezentarea informaiilor

    organizate ca tabele. Tabelele pot servi i la poziionarea informaiei dintr-o pagin

    web, dar aceast soluie a fost practic abandonat odat cu extinderea utilizrii CSS

    (Cascade Style Sheet).

    Un tabel este format din rnduri de celule. Principalele marcaje folosite la

    descrierea unui tabel sunt:

    - pentru delimitarea tabelului;

    - pentru delimitarea unei linii (table row)

    - pentru delimitarea unei celule din cadrul tabelului (table data)

    - pentru celulele din capul tabelului (table header - determin

    scrierea implicit bold i centrat).

    Formatul general al unui tabel este:

    (ncepe definirea tabelului)

    titlul, dac exist

    (ncepe definirea primei linii)

    coninut (prima celul din linia 1, titlul coloanei)

    ...

    coninut (ultima celul din linia 1, titlu)

    (sfritul primei linii)

    (ncepe definirea liniei 2)

    coninutul primei celule

    ...

    coninutul ultimei celule

    (sfritul liniei 2)

    ............

    (nceputul ultimei linii)

    coninutul primei celule

    ...

    coninutul ultimei celule

    (sfritul ultimei linii)

    (sfritul tabelului)

  • Medii i tehnologii educionale interactive

    27

    Includerea unei imagini ntr-o celul a tabelului se face normal, incluznd ntre

    marcajele ... marcajul :

    Exemplu:

    Tabele

    Exemplu

    Produs

    Pret

    Cantitate disponibila

    Pantofi Lux

    156

    243

    Pantofi Carmens

    174

    189

  • Medii i tehnologii educionale interactive

    28

    Dou atribute care pot fi incluse n marcajele sau permit unirea

    celulelor.

    a. colspan="n" - permite unirea a n celule consecutive de pe aceeai linie.

    Exemplu:

    Zona de est

    b. rowspan="n" - permite unirea a n celule consecutive din cadrul aceleiai coloane.

    Exemplu:

    Valori

    Pentru a nu grei la descriere, n cazul unui tabel avnd celule unite se

    recomand s se porneasc de la o reprezentare grafic a acestuia pe care s se

    indice celulele care trebuie efectiv descrise, ca n figur:

  • Medii i tehnologii educionale interactive

    29

    ...

    ...

    ...

    ...

    ...

    ...

    ...

    ...

    ...

    Exemplu fundamental:

    O pagin Web tipic afieaz diverse categorii de informaii. n pagina

    prezentat n continuare se pot identifica uor diferitele categorii de informaii.

    Gruparea lor i plasarea n poziiile dorite, att n pagin ct i una fa de alta, se pot

    realiza folosind tabele i liste formatate.

    1 1 1

    2 2 2

    3

    4

    3

    linia 1

    linia 2

    linia 3

    linia 4

  • Medii i tehnologii educionale interactive

    30

    1.3.8 Marcaje pentru definirea legturilor Una dintre caracteristicile care dau putere web-ului const n posibilitatea

    includerii de referine la alte pagini, din acelai sait sau din orice sait accesibil prin

    reea i indicat prin adres (URL). Selectarea cu mouse-ul a unei referine provoac

    afiarea imediat paginii referite.

    Pentru includerea unei referine se va folosi marcajul (anchor).

    1.3.8.1 Referine selectate folosind iruri de caractere Se consider o pagin web de intrare ntr-un sait destinat prezentrii

    principalelor realizri artistice ale lui Michelangelo avnd coninutul urmtor:

  • Medii i tehnologii educionale interactive

    31

    Referinte

    Michelangelo

    Introduction

    Early life in Florence

    First roman sojourn

    First return to Florence

    The Sistine Chapel ceiling

    The tomb of Julius II

    The Laurentian library

    The Medici tombs

    The last judgement

    The Campidoglio

    WebMuseum, Paris: MichelangeloBiographical information and images of several of his works on

    the Web.

  • Medii i tehnologii educionale interactive

    32

    1.3.8.2 Referine selectate folosind imagini n acelai fel n care sunt ataate irurilor de caractere, referinele pot fi

    asociate i imaginilor dintr-o pagin web:

    Imaginea folosit pentru specificarea referinei va fi implicit afiat ntr-un

    chenar a crui culoare respect aceleai reguli ca i culoarea n care ar aprea irurile

    de caractere folosite pentru referine.

    Uneori este util plasarea unei imagini mici ntr-o pagin, avnd o legtur

    spre o imagine mrit. De exemplu o pagin din saitul despre Michelangelo poate

    avea n pagina despre Capela Sixtin (Sistine.html) cteva astfel de imagini:

    V THE SISTINE CHAPEL CEILING

    Michelangelo was recalled to Rome by Pope Julius II in 1505 for two commissions. The most important

    one was for the frescoes of the Sistine

    1.3.8.3 Folosirea referinelor pentru navigarea n pagini lungi Referinele pot servi i la navigarea n interiorul paginilor lungi. O referin

    destinat navigrii ntr-o pagin lung se scrie astfel:

  • Medii i tehnologii educionale interactive

    33

    sau

    n al doilea exemplu eticheta indic poziia din care se va realiza afiarea

    paginii nume.html.

    Punctele din care se dorete nceperea afirii vor fi etichetate. Pentru

    declararea unei etichete se va folosi tot marcajul avnd un atribut name care

    indic numele etichetei. Exemplu :

    Airplanes

    AIRPLANE STRUCTURE

    Airplanes generally share the same basic configurationeach usually has a fuselage, wings,

    tail, landing gear, and a set of specialized control surfaces mounted on the wings

    and tail.

    Fuselage

    The fuselage is the main cabin, or body of the airplane. Generally the fuselage has a cockpit section at

    the front end, where the pilot controls the airplane, and a cabin section. The cabin section may be designed

    to carry passengers, cargo, or both. In a military fighter plane, the fuselage may house the engines, fuel,

    electronics, and some weapons. In some of the sleekest of gliders and ultralight airplanes, the fuselage may

    be nothing more than a minimal structure connecting the wings, tail, cockpit, and engines.

    Wings

    All airplanes, by definition, have wings. Some, like the flying wings built by the Northrop-Grumman

    Corporation, based in the United States, are nearly all wing with a very small cockpit. Others have minimal

    wings, or wings that seem to be merely extensions of a blended, aerodynamic fuselage, such as the space

    shuttle.

    Tail Assembly

    Most airplanes, except for flying wings, have a tail assembly attached to the rear of the fuselage,

    consisting of vertical and horizontal stabilizers, which look like small wings; a rudder; and elevators. The

    components of the tail assembly are collectively referred to as the empennage.

    Dac se dorete trecerea la eticheta #aripi pornind dintr-o alt pagin web,

    referina ar fi trebuit scris astfel :

    airplane wings

  • Medii i tehnologii educionale interactive

    34

    1.3.8.4 Folosirea referinelor pentru lansarea n execuie a unor aplicaii O referin poate declana execuia unei aplicaii instalate pe calculatorul

    folosit la navigare. Dac referina conine numele unui fiier (audio, video, prezentare

    multimedia etc.), aplicaia de navigare realizeaz dou aciuni: lanseaz n execuie

    aplicaia asociat implicit extensiei fiierului i transfer acesteia fiierul preluat prin

    reea.

    a. Lansarea n execuie a aplicaiei destinat trimiterii de mesaje prin e-mail. Exemplu:

    Pentru orice informatii suplimentare puteti scrie autorului lucrarii, conf.dr.ing. Mihai DAMIAN

    ( [email protected] )

    Dac aplicaia implicit destinat trimiterii de mesaje prin pota electronic este

    Outlook (integrat n Microsoft Office), aceasta va fi automat lansat n execuie i va

    fi afiat fereastra de editare a unui mesaj destinat adresei indicate dup mailto.

    Variant : folosirea unei imagini :

  • Medii i tehnologii educionale interactive

    35

    b. Redarea unei prezentri realizate n PowerPoint. Prezentrile multimedia realizate n PowerPoint i salvate n format PowerPoint Show, *.pps:, pot fi redate fie direct n fereastra programului de navigare (cazul aplicaiei Internet Explorer) fie n fereastra aplicaiei PowerPoint, dac aplicaia de navigare nu dispune de posibilitatea redrii acestor fiiere. Exemplu:

    Pornire prezentare PowerPoint Show

    c. Secvene de film. Pentru a reda o secven de film este necesar ca formatul fiierului care conine filmul s fie compatibil cu o aplicaie instalat pe calculator. De regul pentru afiarea secvenelor video se folosete aplicaia Windows Media Player (component Windows). Exemple:

    Start film

    Start film

    Not: Dac se dorete integrarea secvenei video n pagina Web este necesar

    integrarea n pagin a unei miniaplicaii specializate. O soluie gratuit, larg folosit,

    este mediaplayer-ul JW Player. Acesta poate fi descrcat de la adresa

    http://www.longtailvideo.com/jw/upload/mediaplayer.zip

    Dup descrcare i dezarhivare se va transfera fiierul player.swf din

    directorul astfel creat n directorul paginii (obligatoriu!). Secvena de cod care trebuie

    inclus pentru a insera n pagina Web player-ul descrcat i modul de scriere a

    parametrilor necesari rezult din exemplul urmtor.

  • Medii i tehnologii educionale interactive

    36

    allowFullScreen="true"

    scale="showall"

    wmode="opaque"

    flashVars="file=curs13/asimo.mp4&autostart=false&image=curs13/asimo1.png"

    pluginspage=

    "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />

    n exemplul dat, fiierul care conine filmul redat este plasat ntr-un director

    derivat (curs13/asimo.mp4). n secvena scris mai apare referit i fiierul

    curs13/asimo1.png. Acesta conine o imagine care se va afia pn n momentul

    acionrii butonului .

    Parametrii care stabilesc dimensiunile player-ului video sunt with (limea) i

    height (nlimea). Pornind de la dimensiunile filmului (480x270, valori afiate de

    Windows Explorer) s-au stabilit dimensiunea 480x294. Diferena de 24 pixeli pe

    vertical este necesar pentru a se putea afia bara cu instrumente de control a

    player-ului. Not: Fiierul asimo.mp4 a fost descrcat din saitul www.youtube.com

    folosind aplicaia gratuit YouTube Downloader.

    d. Secvene sonore. Redarea acestora se face similar celor video. Fiierele coninnd secvena sonor pot avea diferite extensii, cele mai ntlnite fiind .waw sau .mp3. Exemple:

  • Medii i tehnologii educionale interactive

    37

    Start secventa sonora

    Start melodie mp3

    1.3.9 Hri de imagini Se poate crea o imagine avnd mai multe regiuni, fiecare fiind folosit pentru

    definirea unei referine. Zonele sensibile la selectarea cu mouse-ul pot fi

    rectangulare, poligonale sau circulare. Determinarea coordonatelor punctelor care

    definesc regiunile se poate realiza folosind Inkscape, care afieaz n permanen

    coordonatele cursorului. Marcajele care se vor folosi n acest caz sunt i

    . Numele hrii se declar cu ajutorul atributului usemap="#nume" introdus

    n cadrul marcajului .

    Exemplu:

    Pentru declararea zonelor sensibile la aciunea mouse-ului se vor folosi

    atributele shape pentru a indica forma zonei i coords pentru a-i defini poziia i

    dimensiunile. Modul de folosire a acestor atribute reiese din exemplele urmtoare:

    a. Zon de form rectangular (shape="rect"):

    (52, 70)

    (29, 48)

    axa X

    axa

    Y

  • Medii i tehnologii educionale interactive

    38

    b. Zon de form circular (shape="circle"):

    c. Zon de form poligonal (shape="poly")

    Exerciiu: Completai prima pagin a saitului LEGOLAB SRL adugnd legturi

    conform indicaiilor din figur:

    (100,100)

    (50,10)

    (10,80)

    (150,100)

    R40

  • Medii i tehnologii educionale interactive

    39

    catalog.html#baza catalog.html#pers catalog.html#anim catalog.html#massmp

    catalog.html#avioane

    catalog.html#masincatalog.html#robo

  • Medii i tehnologii educionale interactive

    40

    Rezolvare:

    LEGOLAB

    LEGOLAB - laboratorul virtual

    Aici e lumea LEGO. Fara bani, doar pasiune!

    Home

    Noutati si promotii

    Arhitectura

    Oras

    Creator

    Jocuri

    Contact

    LEGO - un joc serios

    Dac lumea LEGO nseamn multe piese frumoase, bine realizate si pasiune, atunci acest sait este o

    parte a acestei lumi. Nu veti putea atinge micile componente dar le vei putea folosi ca si cum ar fi pe masa

    voastra. Faptul ca ele vor fi doar virtuale nu e neaparat un dezavantaj, ba chiar din contra. Lego-ul virtual

    inseamna 100% joaca, setul vostru fiind nelimitat. Si nu se va imprastia prin toata casa, nici nu veti pierde

    elemente.

    Daca nu stiti de unde sa incepeti, selectati una dintre categorii si refaceti constructiile demonstrative.

    Veti invata repede cum se foloseste jocul nostru.

    Diverse

    Vehicule

    Kituri complexe

  • Medii i tehnologii educionale interactive

    41

    Kituri 4-7 ani

    Elemente de baza

    Personaje

    Animale

    Masini simple

    Kituri 7-10 ani

    Avioane

    Masini

    Roboti

    Home | Prezentare | Produse | Contact

    2011. Toate drepturile rezervate. Proiectat de FLEXFORM.

  • Medii i tehnologii educionale interactive

    42

    Capitolul II CSS

    2.1 Aspecte generale

    Evoluia web-ului a condus la apariia unui limbaj destinat specificrii

    aspectului paginilor web, CSS (eng. Cascading Style Sheets). Folosind CSS se pot

    impune proprietile fonturilor, culori, se poate controla poziia imaginilor sau a altor

    elemente care formeaz coninutul paginilor. naintea adoptrii pe scar larg a

    cuplajului XHTML-CSS se ncerca rezolvarea problemelor legate de aspectul paginilor

    web folosind marcaje HTML i atribute ale acestora dar neuniformitatea tratrii

    acestora n diferite browsere a devenit o problem a crei adevrat soluie este

    reprezentat de CSS.

    Pe lng specificarea modului de afiare a informaiei din paginile web, CSS

    ofer posibilitatea impunerii acelorai caracterisici ansamblului de pagini care

    formeaz un sait.

    CSS este suportat de toate browserele actuale.

    Deoarece nvarea CSS presupune un mare numr de exerciii i

    experimente, este bine s se acceseze saitul http://www.w3schools.com/css/.

    Exerciiile din acest sait se realizeaz ntr-o aplicaie integrat n browser care permite

    editarea regulilor CSS i vizualizarea imediat a efectelor.

    2.2 Sintaxa CSS

    Impunerea modului de afiare a informaiei n CSS se realizeaz prin reguli. O

    regul indic modul n care trebuie afiat un element din pagin.

    Sintaxa unei reguli este:

    selector {proprietate:valoare;}

  • Medii i tehnologii educionale interactive

    43

    Exemplu:

    body {

    background-color: black;

    }

    sau, mai compact:

    body {background-color: black;}

    Regulile CSS pot fi definite fie ca valoare a atributului style adugat marcajelor

    HTML, fie pot fi incluse la nceputul paginii, n seciunea head, ntre marcaje

    ... . Prima variant realizeaz o modificare local, afectnd doar informaia

    afiat folosind marcajul modificat, n timp ce a doua se extinde la tot fiierul. n cele

    ce urmeaz se va folosi ns numai a doua variant deoarece scopul utilizrii soluiei

    XHTML+CSS n locul limbajului HTML este mai ales acela de a separa coninutul

    paginilor web de informaiile de formatare.

    Exemple:

    Formatarea textului

    p {color: white; font-family: verdana,arial; font-size:14px; background-color: purple;}

    ...

    Text imprimat pe fond purpuriu.

    ...

    Rezultat:

    Examplu mai complicat

    h1 { font-size: x-large; color: red }

    h2 { font-size: large; color: blue }

    body {background-color: black;

  • Medii i tehnologii educionale interactive

    44

    color: white;

    }

    p {

    color: green;

    font-family: tahoma,arial,verdana;

    font-size: 12px;

    }

    Observaie: Dac zona de definire a stilurilor ataate diferitelor marcaje este

    salvat separat, ntr-un fiier denumit de exmplu stil.css, pentru a impune ntr-o

    pagin web a saitului aceleai modificri, se va include n seciunea a acesteia

    un marcaj n care se va specifica fiierul care conine definiiile de stiluri, ca n

    exemplul de mai jos:

    . . .

    Avantajul acestei soluii const din faptul c aspectul paginilor sitului n care

    este inclus fiierul stil.css poate uor modificat, prin simpla editare a regulilor

    coninute de acesta.

    (stil.css)

    stil.css

  • Medii i tehnologii educionale interactive

    45

    2.3 Selectori

    Pentru a impune cui se aplic o anumit regul sau un set de reguli, n CSS se

    folosesc selectori. n regulile deja scrise, body sau p care precedau regulile scrise

    sunt selectori. Un selector poate fi deci numele unui marcaj XHTML i n acest caz

    regulile care i-au fost ataate n zona de definire a stilurilor vor fi aplicate peste tot

    unde se folosete respectivul marcaj. Dar CSS permite i declararea unor selectori noi

    care vor fi folosii n coninutul paginii ca valori ale atributelor class sau id.

    Posibilitatea definirii o singur dat a modului n care un marcaj XHTML

    opereaz reprezint un argument important n adoptarea CSS ca soluie pentru

    formatare. n paginile web anumite marcaje pot aprea de multe ori ( sau

    de exemplu). Dac de fiecare dat am modifica aspectul implicit prin atribute

    suplimentare fiierul rezultat ar fi mult mai mare i mai greu de pus la punct i de

    ntreinut.

    Exemplu fundamental:

    Examplu de formatare paragraf

    p {color: white; font-family: verdana,arial; background-color: purple;}

    /*

    Comentariu CSS pe mai multe linii

    */

    .verde {color: white; font-family: verdana,arial; background-color: green;}

    .albastru {color: white; font-family: verdana,arial; background-color: blue;}

    #col_stg {position: absolute; left:10px; top:50px; width:200px; background:#fff; border:1px solid

    #000;padding:8px;}

    #col_centru {background:#fff; margin-left: 217px; margin-top:35px; border:1px solid #000;padding:8px;}

    Coloana din stanga

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

    nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  • Medii i tehnologii educionale interactive

    46

    Coloana din centru

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation

    ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in

    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at

    vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore

    te feugait nulla facilisi.

    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por

    scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

    li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on

    refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica,

    pronunciation e plu sommun paroles.

    n definirea stilurilor s-au specificat caracteristicile a cinci selectori: p, .verde,

    .albastru, #col_stg, i #col_centru. Primul este un marcaj XHTML, deci peste tot unde acest marcaj va fi folosit va determina afiarea n modul specificat. Urmtorii doi

    selectori, .verde i .albastru, vor putea fi folosii ca valori ale atributului class.

    Folosirea unor selectori suplimentari astfel definii face posibil de exemplu ca anumite

    zone dintr-un paragraf s fie afiate cu un stil diferit de cel obinuit, definit folosind

    selectorul p.

    Ultimii doi selectori sunt folosii ca valori ai atributului ID. Spre deosebire de

    class, o valoare a atributul ID poate aprea ntr-o pagin o singur dat. n CSS

    atributul ID se folosete n principal pentru a specifica proprietile blocurilor n care

    se divide o pagin. n exemplul dat selectorii col_stg i col_centru sunt folosii n

    marcajele destinate divizrii paginii n blocuri, . Practic s-au definit dou blocuri

    ale cror proprieti au fost astfel stabilite nct pagina s conin dou coloane.

    Rezultat:

  • Medii i tehnologii educionale interactive

    47

    Dac un selector .nume definit de programator va fi folosit numai pentru un

    tip de marcaj html, la declarare se va scrie marcaj.nume{...}. Exemplu:

    p.big{font-size: 2em;}

    ...

    Scriere cu litere mari.

    Un grup de reguli poate fi aplicat mai multor selectori. n astfel de cazuri,

    naintea grupului de reguli sunt scrii selectorii desprii prin virgule. Exemplu:

  • Medii i tehnologii educionale interactive

    48

    p, h1, h2, h3, h4, h5 {font-family: Arial; color: black; }

    2.4 Culori

    Proprietile CSS pentru definirea culorilor sunt color pentru coninut i

    background-color pentru culoarea fundalului.

    O culoare este indicat prin nume (pentru culorile obinuite: white, black, red,

    yellow, green, blue, maroon, orange, olive, purple, fuchsia, lime, navy, aqua, teal,

    silver i gray) sau este definit prin componentele RGB (Red + Green + Blue, rou +

    verde + albastru) care o compun. Fiecare dintre componentele culorii poate fi

    exprimat printr-un numr ntreg cuprins ntre 0 i 255.

    Definirea culorii poate fi realizat folosind codul hexazecimal sau zecimal. n

    cazul folosirii codului hexazecimal notaia culorii ncepe cu caracterul '#' i are

    formatul #rrggbb. Exemplu: #ff7c0d. n cazul n care cele trei componente ale culorii

    sunt exprimate prin perechi de cifre identice se poate folosi o scriere prescurtat.

    Exemplu: #ff00aa se poate scrie #f0a.

    Pentru a exprima n zecimal codul unei culori se va scrie rgb(rrr, ggg, bbb).

    Exemplu: color: rgb(62, 178, 12).

    Pentru a obine codul culorii n hexazecimal se poate folosi Inkscape. Astfel

    pentru a prelua culoarea unui punct de pe o imagine se selecteaz , se indic

    punctul i se citeta codul de pe bara de stare a aplicaiei.

    Aplicaia afieaz de asemenea o palet de culori n partea de jos a ferestrei.

    Codul hexazecimal al unei culori din aceast palet este afiat automat la plasarea

    cursorului mouse-ului peste mostra de culoare afiat.

  • Medii i tehnologii educionale interactive

    49

    2.6 Uniti de msur

    Unele dintre proprietile elementelor coninute ntr-o pagin web necesit

    scrierea unei dimensiuni. Cu excepia valorilor nule, dup dimensiune trebuie scris

    unitatea de msur.

    U.M. Explicaie

    % procent. Ex: p.big {line-height: 200%}

    in inch. Ex: h2 {margin: 0.5in;}

    cm centimetri. Ex. h2 {margin: 0.5cm;}

    mm milimetri

    em 1 em este egal cu mrimea normal a fontului. Ex.

  • Medii i tehnologii educionale interactive

    50

    h1 {font-size: 2em;} (identic cu font-size:200%)

    pt 1pt=1/72in

    pc 1pc=12px

    px pixeli. Exemplu: p {font-size: 12px}

    Exemplu:

    p {margin: 0 20px 0 20px}

    2.7. Fonturi

    n CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care

    se afieaz pagina web fontul indicat poate lipsi, dup denumirea fontului (fonturilor)

    se precizeaz familia din care acesta face parte. Proprietatea futilizat este font-

    family.

    Fontul Familia

    "Times New Roman", Gramond,

    Georgia

    serif

    Arial, Verdana, Helvetica sans-serif

    Courier, "Courier New" monospace

    Exemplu:

    h1 {font-family: verdana,helvetica, sans-serif;} h2 {font-family: "Times New Roman", serif;}

    Majoritatea paginilor web folosesc Verdana.

    nclinarea caracterelor se stabilete cu ajutorul proprietii font-style, valorile

    posibile fiind normal, italic sau oblique.

    Exemplu:

  • Medii i tehnologii educionale interactive

    51

    h2 { font-family: "Times New Roman", serif; font-style: italic;

    }

    Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici

    (font-variant: small-caps) sau normal (font-variant: normal).

    Scrierea bold se poate impune folosind font-weight:. Proprietatea poate avea

    valorile bold sau normal.

    Dimensiunea caracterelor poate fi impus folosind proprietatea font-size. De

    obicei mrimea este definit n pixeli (px) sau procentual (% sau em). Este

    recomandat varianta definirii procentuale deoarece n acest caz rmne posibil

    mrirea fontului folosind opiunile programului de navigare. Varianta definirii mrimii

    caracterelor n uniti absolute (px, in, cm, etc.) se aplic n cazurile n care

    modificarea mrimii fontului n momentul afirii ar afecta grav aspectul acesteia. De

    exemplu textul plasat deasupra unui buton desenat nu trebuie s poat fi mrit.

    Exemplu:

    h1 {font-family: arial, verdana, sans-serif; font-size: 150%; font-weight: bold} h2 {font-family: "Times New Roman", serif; font-size: 120%;}

    2.8. Formatarea textului

    Formatarea textului se realizeaz cu un set de proprieti care permit diverse

    tipuri de alinieri, indentri i spaieri.

    Indentarea textului se realizeaz folosind proprietatea text-indent. Efectul

    indentrii este decalarea poziiei de nceput a primei linii a fiecrui paragraf cu o

    mrime impus.

    Exemplu:

    p { text-indent: 50px; }

  • Medii i tehnologii educionale interactive

    52

    Alinierea textului se realizeaz folosind proprietatea text-align. Valorile

    posibile ale proprietii sunt: left, right, center sau justify.

    Exemplu:

    th { text-align: right; }

    td { text-align: center; }

    p { text-align: justify; }

    Sublinierea sau bararea textului se realizeaz folosind proprietatea

    text-decoration. avnd valorile posibile none, underline (subliniat), overline (barat),

    line-through (tiat).

    Exemplu:

    h1 { text-decoration: underline; }

    h2 { text-decoration: overline; }

    h3 { text-decoration: line-through; }

    Modificarea distanei dintre caractere se realizeaz folosind proprietatea letter-

    spacing.

    Exemplu:

    h1 { letter-spacing: 6px; }

    p { letter-spacing: 3px; }

  • Medii i tehnologii educionale interactive

    53

    Controlul scrierii cu majuscule se realizeaz folosind proprietatea

    text-transform. Valorile posibile sunt:

    - capitalize - prima liter va fi majuscul

    - uppercase - toate literele vor fi majuscule,

    - lowercase - toate literele vor fi mici,

    - normal - caracterele vor fi scrise normal.

    2.9. Formatarea referinelor

    Legturile sunt evideniate n HTML prin sublinierea irului de caractere folosit

    ca suport i utilizarea unor culori distincte pentru legturile nevizitate sau vizitate. n

    CSS aceste atribute implicite pot fi modificate.

    Modificarea culorii, a fontului sau suprimarea sublinierii se realizeaz ca i

    pentru textele obinuite.

    Exemplu:

    a { color: blue; text-decoration:none; }

    Pentru a modifica pe rnd proprietile irului folosit pentru o referin se vor

    folosi pseudoclasele:

    - a:link, pentru legturi nevizitate,

    - a:visited, pentru legturi vizitate,

    - a:active pentru legturi active sau,

    - a:hover. pentru a modifica modul de afiare a irului la plasarea

    cursorului mouse-ului deasupra lui.

    Exemplu:

  • Medii i tehnologii educionale interactive

    54

    a:link { color: #6699CC; } a:visited { color: #660099; }

    a:active { background-color: #FFFF00; }

    a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

    2.10. Colorarea scrisului i a fundalului

    Culoarea folosit la scriere se definete prin proprietatea color. De exemplu

    dac titlurile marcate cu trebuie scrise n rou, aceasta se poate indica prin

    regula urmtoare:

    h1 {color:#ff0000; }

    (sau, mai simplu, h1 {color:red; }) Culoarea fundalului se impune prin proprietatea background-color. Modul n

    care dispune browserul diferitele blocuri care formeaz o pagin poate fi evideniat

    colornd diferit fundalul acestora, ca n exemplul urmtor:

    Tabele

    html {background-color:#658c96}

    body {background-color:#adc0c7}

    p,h1 {color: white; background-color:#076363}

    Exemplu

    Tabelele vor fi folosite doar in cazul in care natura informatiei impune acest lucru.

    Exemplu de tabel neformatat:

  • Medii i tehnologii educionale interactive

    55

    Produs

    Pret

    Cantitate disponibila

    Pantofi Lux

    156

    243

    Pantofi Carmens

    174

    189

  • Medii i tehnologii educionale interactive

    56

    2.11. Geometria unui bloc n CSS

    Informaia cu caracter grafic (text, imagine) coninut ntr-o pagin web este

    dispus ntr-o serie de blocuri alturate. Browser-ul genereaz aceste blocuri

    automat, la ntlnirea marcajelor care delimiteaz informaia: , ,

    ..., , , etc.

    Arhitectura unui bloc este prezentat n figura urmtoare:

    Din schi se observ c blocul este nconjurat de un contur transparent

    (margin) avnd rolul de a permite distanarea blocurilor i eventual de un chenar

    (border). ntre informaia efectiv coninut i border este o distan definit prin

    proprietatea padding. Fundalul este colorat n culoarea definit prin proprietatea

    background-color i se extinde pn la border (include deci i zona definit prin

    padding).

    Geometria implicit a blocurilor depinde de browser. Diferenele de la un

    browser la altul nu sunt mari dar pot fi deranjante.

    Modul implicit n care Internet Explorer construiete i plaseaz blocurile poate

    fi evideniat construind o mic pagin web i impunnd culori diferite pentru fundalul

    diferitelor blocuri.

    margin (transparent) border padding

    coninut

    (text, imagine)

    bottom

    top

    left right

  • Medii i tehnologii educionale interactive

    57

    Blocuri

    html {background-color:yellow}

    body {background-color:magenta}

    p,h1 {color: white; background-color:blue}

    Dispunerea blocurilor

    Blocurile de text sunt dispuse unul dupa altul.

    Imaginile nu sunt tratate ca blocuri. Ele sunt incluse in paragrafe sau alte tipuri de blocuri (de obicei ,

  • sau ) si sunt tratate ca

    fiind niste caractere de o alta marime, de cele mai multe ori mai mari.

    Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive

    existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri

    alaturate.

    Rezultat:

    blocul

    margin pentru

    sau

    margin pentru (sus i jos)

  • Medii i tehnologii educionale interactive

    58

    Proprietile care pot fi specificate pentru a defini geometria unui bloc sunt:

    margin, border, padding, width (limea) i height (nlimea). Pentru margin, border

    i padding se pot indica dimensiuni diferite pentru fiecare dintre laturile blocului

    folosind sufixele -top, -right, -bottom i left. Exemplu:

    h1 {margin-left:120px; margin-right:12px;border:1px; border-color:blue;}

    Pentru simplificarea scrierii dimensiunilor, dac toate cele patru valori sunt

    identice se poate scrie parametru:valoare. Dac valorile sunt diferite se pot scrie

    toate cele patru valori, una dup alta, desprite prin spaiu, ordinea fiind top, right,

    bottom, left. Exemplu:

    p {margin:12px 0 14px 120px; padding:8px;}

    Not: Pentru valori nule dimensiunile pot fi omise.

    Dac se impune de exemplu margin:0 pentru body, p i h1 pagina precedent

    ar fi afiat astfel:

  • Medii i tehnologii educionale interactive

    59

    De altfel frecvent se impune pentru proprietatea margin=0 (implicit

    margin este de aproximativ 8px, depinznd de browser).

    2.12. ncadrarea blocurilor

    Blocurile pot fi ncadrate cu un contur avnd caracteristicile precizate prin

    proprietile border-width, border-color i border-style.

    border-width permite specificarea grosimii liniei de ncadrare n pixeli sau

    printr-una din valorile: thin, medium sau thick.

    border-color permite specificarea culorii conturului de ncadrare.

    border-style permite precizarea aspectului conturului. valorile posibile sunt

    cele din figur.

    2px 4px 6px 8px 10px

    1px 3px 5px 7px 9px

    thin medium thick

  • Medii i tehnologii educionale interactive

    60

    Exemplu de definiii de contururi de ncadrare:

    h1 { border-width: thick; border-style: dotted; border-color: gold; }

    h2 { border-width: 20px; border-style: outset; border-color: red; }

    p { border-width: 1px; border-style: dashed; border-color: blue; }

    ul { border-width: thin; border-style: solid; border-color: orange; }

    Ca i n cazul proprietilor margin i padding, este posibil specificarea unor

    caracteristici diferite pentru top, right, bottom i left. Pentru specificarea valorilor

    specifice vor fi folosite n acest caz denumirile border-top, border-right, border-bottom

    sau border-left, dup caz.

    Exemplu:

    h1 { border-top-width: thick; border-top-style: solid; border-top-color: red;

    border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue;

    border-right-width: thick; border-right-style: solid;

  • Medii i tehnologii educionale interactive

    61

    border-right-color: green;

    border-left-width: thick; border-left-style: solid; border-left-color: orange; }

    Observaie: Pentru border, CSS definete ordinea normal de definire a

    proprietilor conturului de ncadrare ca fiind border-width -> border-style -> border-

    color. Pentru o scriere mai compact se accept i o variant prescurtat de definire:

    border: 1px solid blue;

    2.13. Parametrii width i height

    Standardul W3C permite precizarea mrimii zonei folosite pentru afiarea

    informaiei. Modelul definit n standard este cel din figur.

    Dac descrierea blocului include valori nenule pentru padding, border i

    margin, limea efectiv se calculeaz adunnd parametrului with mrimile

    corespunztoare ale celorlalte elemente ale blocului. Exemplu:

    Blocuri 2

    html {background-color:yellow}

    body {background-color:white}

    h1 {

    color: white;

    background-color:#ccc;

    margin-left:45px;

    margin-right:0;

    border-width:1px;

    border-style:solid;

  • Medii i tehnologii educionale interactive

    62

    border-color:#000;

    padding:7px;

    width:200px;

    height:200px;

    }

    p {color: yellow; background-color:#a00;}

    Dispunerea blocurilor

    Blocurile de text sunt dispuse unul dupa altul.

    Limea efectiv a blocului referit prin selectorul h1 este:

    margin-left:45px

    width:200px

    padding:7px

    border-width:1px;

  • Medii i tehnologii educionale interactive

    63

    L = 45 + 1 + 7 + 200 + 7 + 1 = 261px.

    Proprietatea overflow permite specificarea modului de tratare a situaiei n

    care coninutul unui bloc nu ncape n spaiul alocat. Situaia apare n cazul blocurilor

    pentru care s-au specificat att limea ct i nlimea (width i height). Valorile

    posibile sunt overflow :scroll sau overflow :hidden. n prima variant, dac se

    plaseaz ntr-un bloc mai mult informaie dect permit dimensiunile acestuia vor fi

    afiate automat cursoare pentru defilare (scroll).

    2.14. Marcajele i

    n paginile realizate pn acum coninea un numr de blocuri (definite

    prin selectorii p, h1, h2 etc) dispuse unul dup altul, de sus n jos. Selectorul

    descrie deci un container care conine celelalte blocuri care formeaz coninutul

    paginii.

    La rndul su, este coninut n .

    Standardul HTML ofer ns programatorilor posibilitatea definirii de containere

    suplimentare care vor conine fiecare un ansamblu de blocuri. Pentru definirea

    blocurilor avnd rol de container se folosesc marcaje sau . Diferena

    dintre cele dou este faptul c este de tip inline, el realiznd o grupare n

    interiorul unui bloc, asemenea marcajelor sau .

    Pentru o pagin obinuit marcajul va fi folosit de exemplu pentru a

    defini blocuri diferite pentru capul paginii, zona de picior i corp. Separarea n blocuri

    distincte a zonelor care se repet pe toate paginile saitului este interesant deoarece

    de cele mai muilte ori problemele ridicate de descrierea coninutului acestora sunt mai

    complicate. n plus, n timp ce pentru capul i piciorul paginii fonturile sunt de regul

    de dimensiuni fixe (exprimate n px), pentru coninutul paginii dimensiunile fonturilor

    vor fi exprimate n uniti relative (em, %) astfel nct cititorul s poat modifica

    mrimea folosind facilitile browser-ului (n Internet Explorer se selecteaz View/Text

    Size/ Larger sau Largest).

  • Medii i tehnologii educionale interactive

    64

    Exemplu fundamental:

    Blocuri DIV

    html {background-color:yellow;margin:0; padding:0;}

    body {margin:0; padding:0;}

    div {margin:0; padding:0;}

    p,h1 {color: white; background-color:#000080;

    margin:10px; padding:0; font-family:verdana, helvetica, sans-serif;}

    p {font-size:80%;}

    img {display: block; margin:10px;padding:0;float:left;}

    #continut {width:700px; background-color:#008080;

    text-align:left;margin:0 auto 0 auto;padding:0;}

    #cap {width:700px; height:87px; background-color:#ff8080;}

    #cap h1 {font-size: 20px;padding-top:30px;margin:0 10px 0 10px;}

    #cap p {font-size: 10px;padding:0;}

    #nav {width:700px; height:40px; background-color:#00aa00; }

    #nav p {margin:0 10px 0 10px;padding-top:10px; font-size: 10px }

    #colstg {width:200px; background-color:#ffffff;float: left;}

    #coldr {width:500px; background-color:#aaaaaa; float:left;}

    #picior {width:700px; height: 35px; background-color:#ff8080;

    clear: both;text-align: center;}

    #picior p {font-size:12px;margin:0 10px 0 10px;padding-top:10px;}

    Dispunerea blocurilor

    Blocurile de text sunt dispuse unul dupa altul.

    Navigare. Navigare. Navigare. Navigare. Navigare.

    Unu

    Doi

    Trei

  • Medii i tehnologii educionale interactive

    65

    Dispunerea blocurilor

    Blocurile de text sunt dispuse unul dupa altul.

    Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive

    existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri

    alaturate.

    Copyright, webmaster etc.

    Spre deosebire de , folosit la definirea de blocuri, marcajul

    permite modificarea proprietilor unei poriuni din textul coninut ntr-un bloc.

    Exemplu:

    .profit { color:orange; }

  • Medii i tehnologii educionale interactive

    66

    .paguba { color:blue; }

    Munca in echipa poate creste eficienta fiecaruia. Munca de unul singur e paguboasa.

    2.15 Imagini plasate pe fundal

    CSS ofer o multitudine de proprieti care pot restriciona modul de

    dispunere a unei imagini pe fundalul unui bloc.

    Exemplu:

    Se dorete includerea unei imagini pe fundalul paginii. Imaginea va fi automat

    repetat pn la umplerea spaiului disponibil.

    body { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); }

    Fiierul care conine imaginea va fi plasat n directorul imagini derivat din

    directorul care conine pagina web.

    Repetarea imaginii poate fi controlat prin valorile proprietii background-

    repeat. Valorile posibile sunt:

    Valoare Semnificaie

    background-repeat: repeat-x Repetare pe orizontal

    background-repeat: repeat-y Repetare pe vertical

  • Medii i tehnologii educionale interactive

    67

    background-repeat: no-repeat Fr repetare

    Exemplu:

    #header { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; }

    n cazul n care imaginea dispus pe fundal nu este repetat iar mrimea

    blocului difer de mrimea imaginii se va preciza de regul i culoarea fundalului.

    Alegerea corect a culorii fundalului presupune de obicei determinarea cu Inkscape a

    culorii frontierei imaginii, trecerea de la imagine la zona alturat putnd fi practic

    imperceptibil.

    Comportamentul imaginii n fereastr la defilarea coninutului acesteia

    (scroll) este specificat prin proprietatea background-attachment. Valorile posibile ale

    acestei proprieti sunt scroll sau fixed. Prima valoare specific defilarea imaginii de

    fundal mpreun cu coninutul paginii n timp ce a doua indic o poziie fix a imaginii

    n raport cu fereastra aplicaiei, pagina defilnd pe deasupra acesteia.

    Exemplu:

    #continut { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; background-attachment: fixed; }

    Poziia imaginii n fereastr este indicat folosind proprietatea background-

    position. Exist trei moduri de a indica poziia imaginii de fundal:

    - prin coordonate (de obicei pixeli):

    background-position: 30px 45px;

  • Medii i tehnologii educionale interactive

    68

    - prin procente din dimensiunile zonei afiabile:

    background-position: 50% 35%;

    - in raport cu laturile blocului. Valorile posibile sunt top left, top right, bottom

    left, bottom right sau center center.

    Exemplu:

    #continut { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; }

    2.16. Blocuri flotante

    n mod normal elementele coninute ntr-o pagin web sunt plasate de

    browser unul dup altul, de sus n jos. Exist situaii n care se dorete dispunerea de

    la stnga la dreapta sau de la dreapta la stnga i n aceste cazuri se va folosi la

    descrierea blocurilor proprietatea float.

  • Medii i tehnologii educionale interactive

    69

    Exemplu: efectul proprietii float : left asupra unui bloc:

    Blocul declarat flotant va fi cadrat n sensul dat de valoarea proprietii

    (float :left sau float :right) iar restul coninutului paginii este aranjat astfel nct s

    ocupe spaiul astfel creat.

    Exemplul 1.

    Se dorete plasarea ntr-un bloc la stnga paginii a unei figuri i apoi scrierea

    unui text astfel nct acesta s ncadreze blocul, ca n figura urmtoare.

  • Medii i tehnologii educionale interactive

    70

    Blocuri

    html {background-color:yellow}

    body {background-color:#c83737; margin:0;}

    p,h1 {color: white; background-color:#000080; margin:10px; font-family: arial, verdana, sans-serif;}

    img.stg{margin-right: 10px; float:left;}

    Cafeaua si Java

    Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++.

    El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.

    Conducatorul proiectului, Green James Gosling, este

    considerat parintele limbajului Java. Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a

    fost revendicat de o alta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a

    memrilor echipei - cafeaua.

    Exemplul 2.

    Pentru evidenierea primului cuvnt al unui capitol se dorete plasarea

    primului caracter ca n figura de mai jos.

    .stg{

    margin-right: 10px;

    color: blue;

    font-family: arial, verdana, sans-serif;

    font-size: 300%;

  • Medii i tehnologii educionale interactive

    71

    float:left;

    }

    p{

    color: #008080;

    font-family: arial, verdana, sans-serif;

    }

    When you create an action, you automate a series of steps. The hardest part

    about creating a new action is figuring out what functions you want to automate. Thinck about steps thst

    you carry out over and whether you could be more productive if you had an action that could do them for

    you.

    Proprietatea clear permite plasarea unui bloc sub blocurile flotante

    anterioare. Valorile posibile sunt clear:left, clear:right sau clear:both. Astfel la

    descrierea unui bloc care trebuie dispus sub un numr de blocuri care definesc un

    ansamblu de coloane (cazul blocului care conine piciorul paginii) folosind clear avem

    garania c noul bloc nu va fi plasat peste unul dintre blocurile flotante anterioare.

    Exemplul 3.

    Prin folosirea proprietii clear se poate realiza efectul din pagina urmtoare:

  • Medii i tehnologii educionale interactive

    72

    div.stg{margin-right: 10px; float:left; }

    .gata{ color: #008080; font-family: arial, verdana, sans-serif; clear:both; }

    Java este un limbaj de programare orientat pe obiecte asemntor limbajului

    C++. El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.

    . . .

    Exemplul 4.

    Pentru scrierea coninutului unei pagini pe trei coloane s-au definit blocurile

    col1, col2 i col3 ca n listingul urmtor:

    div {

    color: #008080; font-family: arial, verdana, sans-serif;

    }

    .col{

    width:31%; padding-right: 15px; float: left;

    }

    Limbajul Java

    Java este un limbaj de . . . (prima coloan)

  • Medii i tehnologii educionale interactive

    73

    Java este un limbaj de . . . (a treia coloan)

    Validarea paginilor web

    Pentru a avea garania corectitudinii coninutului unei pagini web, acesta poate

    fi verificat cu ajutorul unei aplicaii dezvoltate de W3C i disponibile online. O metod

    uoar de trimitere a paginii spre verificare presupune utilizarea ca browser fie a

    aplicaiei Internet Explorer versiunea 8 fie a aplicaiei Mozilla Firefox. n cazul folosirii

    aplicaiei Firefox acesteia trebuie s I se adauge extensia Web Developer . Aceast

    extensie este destinat dezvoltatorilor de pagini web i ofer un ansamblu de

    instrumente foarte utile. Pentru adugarea n Firefox a extensiei Web Developer se

    selecteaz n meniul aplicaiei Tools / Add-ons:

  • Medii i tehnologii educionale interactive

    74

    n urma instalrii extensiei Web Developer aplicaia va afia o bar cu

    instrumente suplimentar.

    Pentru validarea codului unei pagini web se deschide pagina n browser i se

    selecteaz pe noua bar cu instrumente Tools / Validate Local CSS sau Tools /

    Validate Local HTML:

    Aplicaia va transmite prin Internet

    coninutul foii de stiluri spre o aplicaie

    specializat (http://jigsaw.w3.org/css-

    validator/validator). Raportul prezentat de

    aplicaie va conine erorile depistate i apoi va

    afia regulile gsite ca fiind corecte.

    n Internet Explorer se va accesa Tools /

    Developer Tools i n fereastra afiat se va

    accesa Validate / Local CSS sau Local HTML.

    Internet Explorer va accesa imediat

    saitul http://jigsaw.w3.org/ i n fereastra

    afiat se va selecta opiunea By file upload, ca

    n figur.

  • Medii i tehnologii educionale interactive

    75

    n fereastra afiat se va selecta fiierul de validat i se va apsa butonul

    Check.

  • Medii i tehnologii educionale interactive

    76

    2.17. Poziionarea blocurilor

    n CSS poziionarea a blocurilor se poate realiza folosind coordonate absolute

    sau relative. n mod corespunztor, proprietatea position care specific modul de

    poziionare a unui bloc poate avea valoarea relative sau absolute.

    Distanele care precizeaz poziia unui bloc sunt specificate printr-o pereche

    de proprieti din mulimea top, right, bottom sau left.

    n cazul poziionrii relative poziia blocului este specificat n raport cu

    punctul n care blocul ar fi fost afiat n lipsa proprietii position.

    Exemplu:

    div.poz1 { position:relative; left: 200px;

  • Medii i tehnologii educionale interactive

    77

    bottom: 50px; }

    Dei coninutul blocului din exemplu va fi afiat n alt poziie, browserul va

    lsa neocupat zona pe care acesta ar ocupa-o n mod normal !

    Poziionarea absolut difer fundamental de cea relativ. Astfel, pentru un

    bloc poziionat absolut browser-ul nu va rezerva loc n pagin. El trebuie s fie

    considerat ca aparinnd unui alt nivel, plasat deasupra ferestrei browserului, deci un

    astfel de bloc se poate suprapune peste un alt bloc din pagin. Astfel de blocuri pot fi

    folosite pentru a realiza de exemplu meniuri derulante care n stare desfurat

    acoper parial coninutul paginii.

    Pentru nelegerea poziionrii absolute se consider regula urmtoare:

    h1 { position:absolute; top: 100px; left: 200px; }

    poziia implicit

    bottom: 50

    left: 200

  • Medii i tehnologii educionale interactive

    78

    Coordonatele indicate (top:100px i left:200px) au ca i punct de referin

    colul din stnga-sus al primului bloc poziionat n care noul bloc (h1 n cazul dat) este

    coninut sau zona util a ferestrei browserului, ca n imagine, dac un astfel de bloc

    nu exist.

    n consecin, pentru ca un bloc poziionat absolut s aib ca i punct de

    referin un bloc exterior (de obicei blocul care conine ntreaga pagin), definiia

    blocului exterior trebuie s conin proprietatea position:

    #bloc_ext {

    width:800px;

    text-align:left;

    background-color:#91d38d;

    position:relative;

    margin:0 auto;

    }

  • Medii i tehnologii educionale interactive

    79

    O astfel de definire a blocului exterior va determina de exemplu ca un bloc

    interior acestuia a crui poziie este definit prin regula: {position: absolute; top:0;

    left:0;} s fie poziionat n colul din stnga-sus al blocului exterior i nu n colul

    ferestrei browserului.

    Excemplu:

    Blocuri

    html {background-color:yellow}

    body {background-color:#c83737;}

    * {padding:0; margin:0;}

    #bloc_ext {

    position:relative;

    width:600px;

    text-align:left;

    background-color:silver;

    margin:0 auto;

    }

    p{color: white; background-color:#000080; margin:15px; font-family: arial, verdana, sans-serif;}

    img.stg{margin-right: 10px; float:left;}

    .suprapus {position:absolute; top:0; left:0; background-color:teal; margin:25px; color: white;

    font-family: arial, verdana, sans-serif;

    }

    Cafeaua si Java

    Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++.

    El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.

    Conducatorul proiectului, Green James Gosling, este considerat parintele limbajului Java.

    Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a fost revendicat de o a

    lta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a memrilor

    echipei - cafeaua.

  • Medii i tehnologii educionale interactive

    80

    Rezultat:

    Se observ c blocul este plasat peste primul paragraf. Faptul c

    este definit ca avnd margin:15px determin deplasarea n jos a blocului body a crui

    frontier top coincide cu frontiera primului paragraf. Aceast deplasare afecteaz

    evident i blocul bloc_ext inclus n body. Pentru a evita aceast deplasare primul

    paragraf ar trebui s aib ca i body, proprietatea margin:0, deci el trebuie s fie

    definit ca aparinnd unei clase aparte avnd aceast caracteristic.

    p.primul {margin-top:0;}

    ...

    Java este un limbaj de programare orientat ...

  • Medii i tehnologii educionale interactive

    81

    2.18. Suprapunerea blocurilor

    Poziionarea absolut a blocurilor permite plasarea acestora oriunde n planul

    xoy ataat zonei client a browserului. Dar CSS permite i specificarea poziiei pe axa

    Oz (perpendicular pe planul monitorului) i implicit suprapunerea blocurilor.

    Un exemplu elementar este reprezentat n figura de mai jos. Crile de joc

    afiate sunt disponibile ca imagini individuale, dar trebuie afiate parial suprapuse i

    ntr-o ordine precizat. Pentru a poziiona pe axa z un bloc se va folosi proprietatea

    z-index a acestuia. Modul de utilizare a acesteia decurge din exemplul considerat.

  • Medii i tehnologii educionale interactive

    82

    div.ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; }

    div.jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; }

    div.queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; }

    div.king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; }

    div.ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }

    Proprietatea z-index poate avea i valori negative, situaie n care blocurile

    sunt plasate sub planul paginii web. Planul ferestrei browserului are z-index:0.

    2.19. Alte proprieti ale blocurilor

    Pe lng cele prezentate, CSS ofer i alte proprieti. n continuare vor fi

    prezentate dou dintre ele, frecvent folosite de realizatorii de situri web.

  • Medii i tehnologii educionale interactive

    83

    Proprietatea opacity permite definirea unui efect de transparen a unui

    bloc. Valoarea introdusa pentru aceast proprietate este un numr subunitar,

    valoarea nsemnnd 0 - lips transparen, 1 transparen total.

    Exemplu :

    div.background

    {

    width: 500px;

    height: 250px;

    background: url(flori.jpg) repeat;

    border: 2px solid black;

    }

    div.transbox

    {

    width: 400px;

    height: 180px;

    margin: 30px 50px;

    background-color: #ffffff;

    border: 1px solid black;

    /* pentru Internet Explorer */

    filter:alpha(opacity=60);

    /* CSS3 standard */

    opacity:0.6;

    }

    div.transbox p

  • Medii i tehnologii educionale interactive

    84

    {

    margin: 30px 40px;

    font-weight: bold;

    color: #000000;

    }

    This is some text that is placed in the transparent box.

    This is some text that is placed in the transparent box.

    This is some text that is placed in the transparent box.

    This is some text that is placed in the transparent box.

    This is some text that is placed in the transparent box.

    Proprietatea visibility permite definirea unor blocuri al cror coninut este

    afiat la producerea unui eveniment. Proprietatea visibility poate lua vlorile visible

    sau hidden. ntruct schimbarea valorii proprietii se realizeaz dinamic, folosind o

    secven de cod programat n JavaScript, exemplificarea utilizrii acestei proprieti

    se va face la sfritul cursului, dup introducerea unor noiuni de programare n

    JavaScript.

    2.20. Formatarea listelor

    CSS pune la dispoziia utilizatorilor o serie de proprieti care permit

    modificarea radical a modului de afiare a unei liste. Folosind aceste proprieti

    elementele unei liste pot fi uor aranjate sub forma unui meniu folosit la navigarea n

    sait.

    In HTML listele sunt plasate decalat fa de marginea din stnga a blocului n

    care sunt inserate. Deoarece mrimea acestei decalri i modul de realizare (padding

    pentru Mozilla, Netscape, Safari sau margin pentru Internet Explorer, Opera), pentru

  • Medii i tehnologii educionale interactive

    85

    a evita problemele de plasare a listelor, la specificarea regulilor de plasare a listelor

    (selectorul ul) proprietile padding i margin trebuie impuse.

    ul {margin: 0; padding: 0;}

    Proprietatea list-style-type este folosit pentru a impune tipul de marcator

    folosit naintea fiecrui element din list.. Valorile posibile sunt none (suprimare

    marcatori), disc, circle sau square pentru liste neordonate () respectiv decimal,

    lower-alpha, upper-alpha, lower-roman sau upper-roman pentru liste ordonate

    ().

    Exemple :

    Unix

    Windows

    Linux

    ul { list-style-type:disc ;}

    ul {list-style-type :circle ;}

    ul {list-style-type :square ;}

    Unix

    Windows

    Linux

  • Medii i tehnologii educionale interactive

    86

    ol {list-style-type :decimal ;}

    ol {list-style-type :lower-alpha ;}

    ol {list-style-type :upper-alpha ;}

    ol {list-style-type :lower-roman ;}

    ol {list-style-type :upper-roman ;}

    Proprietatea list-style-image permite nlocuirea marcatorilor standard cu o

    imagine.

    Exemplu de utilizare:

    ul { list-style-image: url("imagini/bulina.jpg");}

    Proprietatea display :inline aplicat simultan selectorilor ul i li permite

    dispunerea elementelor listei pe orizontal.

    ul,li {display: inline ;}

    Exemplu:

    Se dorete realizarea unei liste n care elementele s fie dispuse orizontal,

    fiecare element fiind n acelai timp i referin spre o alt pagin.

  • Medii i tehnologii educionale interactive

    87

    Liste

    ul {list-style-type :none; margin: 0; padding: 4px 20px 4px 40px; }

    ul,li {display: inline;}

    ul li a {font-family:arial, verdana, sans-serif; padding: 4