curs-htmlh

Upload: plaurica

Post on 26-Feb-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/25/2019 curs-htmlh

    1/15

    HTML notiuni introductive

    1. Structura de baza a unei pagini

    - incepe ci tagu-ul si se termina cu tag-ul - contine un antet care incepe directiva si se termina cu

    - corpul propriu zis al paginii cuprins intre directivele

    #ptional antetul poate contine titlu cuprins intre tag-urile si &orpul paginii poate contine te'te si/sau imagini.

    E'emplu (

    E'emplu 1

    ntetul contine un titlu acesta )iind +E'emplu 1, titlu care apare la vizualizarea paginii

    inaintea numelui broser-ului. &orpul paginii contine te'tul +ceasta este un e'emplusimplu de pagina *,.

    . %ntroducerea te'telor.1 aragra)e

    aragra)ele intr-un te't se introduc utilizand tag-urile continut paragra)

    Tagul poate lipsi. %n 0otepad 2ordpad 2ord paragra)ele sunt separate prin tastareaunui E0TE3. %n HTML E0TE3-ul nu are nuci un e)ect.

    tribute ( align4 controleaza alinierea paragra)elor si poate lua valurile( center - aliniere

    in centru left right justify4 aliniere stanga dreapta in ambele parti.

    E'emplu ( aragra) aliniat in centru lte elemente care permit )ormatarea te'tului

    - are ca e)ect )ortarea a)isarii a ceea ce urmeaza pe randul urmator. Se utilizeaza unsingur tag.E'emplu ( Sunt elev la si si

  • 7/25/2019 curs-htmlh

    2/15

    comanda broser-ului ca te'tul scris intre tag-urile si

    sa )ie scris "ai "icdecat restul te'tului.

    comanda broser-ului ca te'tul scris intre tag-urile si sa )ie scrismonospatiat 7toate caracterele ocupa aceeasi lungime de spatiu la )el ca )ontul &ourier

    ne8.

    comanda broser-ului ca te'tul scris intre tag-urile si sa )iescris taiat indicand stergerea lui dar pastrarea in te't pentru a evita eventualele madi)icari

    ale te'tului.

    comanda broser-ului ca te'tul scris intre tag-urile si sa )ie scrissubliniat pentru a arata ca a )ost recent introdus in te't.

    comanda broser-ului ca te'tul scris intre tag-urile si sa )ie scris

    mai sus 7ca o putere8.

    E'emplu ( '=ln7'8 este scris intr-un paragra) '=ln7'8

    comanda broser-ului ca te'tul scris intre tag-urile sa )ie

    scris mai os 7ca un indice8.

    comanda broser-ului ca te'tul scris intre tag-urile si sa )ie

    scris ast)el incat sa sugereze o de)initie 7practic se scrie italic8. comanda broser-ului ca te'tul scris intre tag-urile si sa )ie

    scris ast)el incat sa sugereze un citat 7se scrie la )el ca la !608.entru scrierea titlurilor se utilizeaza H1 H * H?. 6iecare titlu este scris intre tag-

    urile * . Marimea di)era ( pentru titlu este scris

    utilizand )ont-ul de dimensiune ma'ima iar pentru de dimensiune minima.Liste

    %n HTML e'ista posibilitatea ca anumite enunturi sa )ie numerotate sau marcate intr-un

    anumit )el. # ast)el de organizare poarta numele de lista. cestea sunt de trei )eluri ( liste

    or'onate in care elementele sunt numerotate liste neor'onatein care elementele suntmarcate ast)el incat sa nu sugereze o anumita ordine si liste 'e ti( 'efinitie.

  • 7/25/2019 curs-htmlh

    3/15

    Se pot utiliza liste imbricate 7in cadrul unei liste ordonate se includ liste neordonate 4

    vezi teste grila. entru a lasa un rand liber putem marca un paragra) prin sau

    . 7!e)inition lists8 descrie o lista de de)initii intre tag-urile

    7!e)inition term8 de)ineste termenii din lista.

    7!e)inition description8 retine descrierea termenului.

    tasarea imaginilor

    se utilizeaza pentru a atasa unei pagini o imagine.tributele sunt (

    src - identi)ica )isierul care contine imaginea 7de tip .pg .gi) *8

    align4 tipul de aliniere speci)ica broser-ului modul in care se va alinia

    imaginea in raport cu te'tul. cesta poate lua valorile ( Right, Left, To(, Mi''le,

    Botto"

    E'emplu (

  • 7/25/2019 curs-htmlh

    4/15

    0i'th, height4 latimea si inaltimea celulei in procente )ata de latimea respectiv

    inaltimea tabloului.

    align, 1align4 alinierea pe orizontala respectiv pe varticala iau aceleasi valori cala dar sunt prioritare.

    cols(an-.nu"ar.4 insereaza in dreapta celulei speci)icata prin numar celule ale

    caror continut este vid dar care pot )i )olosite pentru a)isarea valorii retinute de celulacare are acest parametru.

    E'emplu ( T11T1

    T1TT

    ro0s(an-.nu"ar. insereaza pe urmatoarele numar linii in aceiasi coloana cate

    o celula al carei continut este vid si are ca e)ect secundar pastrarea )ormei

    dreptungCiulare toate liniile continand o celula in plus.

    .. tributele elementului T"LE

    +or'er-.nr4(i/eli, de)ineste grosimea liniilor cate inconoara tabelul. %n absenta

    lui tabelul nu este inconurat de linii. !aca se utilizeaza border )ara numar pi'eli tabloul

    este bordat cu cCenar standard.

    !aca o linie are mai multe celule decat celelalte automat sunt aliniate toate liniile lanumarul ma'im de celule.

    0i'th4 latimea tabelului e'primat in procente )ata de dimensiunea )erestreibroser-ului sau in pi'eli.

    height4 inaltimea tabelului. oate )i procent )ata de inaltimea )erestrei broser-

    ului sau pi'eli.

    align4 alinierea tabelului in pagina. oate lua valorile left, right, center.

    cells(acing4 determina spatiul in pi'eli dintre celule.

    cell(a''ing4 determina in pi'eli spatiu lasat in )iecare celula a tabelului intre

    te't 7imagine8 si marginile celulei.

    rules4 de)ineste modul in care vor )i trasate liniile care separa celulele tabelului.

    oate lua valorile none, ro0s, cols, all.

    +gcolor4 culoarea de )ond comuna tuturor celulelor.

    +or'ercolor4 culoarea liniilor care inconoara tabelul si care separa celulele.

    &onstantele de culoare sunt ( a*ua7azuriu8 +lac57negru8 +lue7albastru8 fuchsia

    7galben spre maro8 gray7gri8 green7verde8 li"e7vernil8 na1y7bleumarin8 oli1e7oliv8 (ur(le7purpuriu8 re'7rosu8 syl1er7argintiu8 teal7albastru catre verde8 0ite

    7alb8 "aroon7maro8 yello07galben8.

    hs(ace, 1s(ace4 di)erenta de la tabel la celelalte componente in pi'eli 7la )el ca

    la img8... Elementele TH si &T%#0.

    %n loc de se poate )olosi parametrii sunt aceiasi doar

    ca te'tele implicit sunt tiparite bold.

  • 7/25/2019 curs-htmlh

    5/15

    marcCeaza liniile de corp. Se )oloseste .

    marcCeaza liniile de s)arsit. Se )oloseste si optional .

    tributele celor trei elemente sunt align4 aliniere orizontala si 1align4 aliniere verticala.;ruparea coloanelor.

    permite gruparea coloanelor unui tabel. Se utilizeaza tag-urile

    si optional .tributele sunt (

    align4 alinierea continuturilor calulelor coloanelor grupate ia valorile left, right,center, justify.

    s(an - numarul coloanelor care se grupeaza.

    1align4 alinierea pe verticala a continuturilor celulelor coloanelor grupate ia

    valorile to(, "i''le, +otto".

    0i'th4 latimea coloanelor e'primata in procente )ata de latime tabelului sau inpi'eli.

    permite speci)icarea valorilor pe care le iau atributele coloanelor pentru

    )iecare coloana in parete. tributele sunt aceleasai ca la L;#9.

    E'emple (

    F a1 a1

    D.1 a a 1F?.:ID1 a a

    Este un tabel cu trei linii si trei coloane. rima coloana ocupa DG din latimea tabelului

    te'tul )iin aliniat la dreapta 7primul colgroup8 iar celelalte doua coloane ocupa )iecare

    G din latimea tabelului te'tul )iind aliniat la stanga 7al doilea colgroup8.Sau cele doua linii care grupeaza coloanele pot )i scrise (

  • 7/25/2019 curs-htmlh

    6/15

    .?.1 Legaturi relative la document 7pagina8

    !aca documentele HTML sunt lungi pentru a evita parcurgerea greoaie a acestora se pot

    crea legaturi in cadrul aceluiasi document. st)el in punctele unde dorim sa )ie vizualizatdocumentul cream ancore cu nume care este dat prin atributul i'.

    E'emplu ( ancora a )ost asezata in partea de sus a documentului.

    ancora asezata la miloc.%n punctele de unde dorim ca utilizatorul sa poata vizualiza imediat documentul incepand

    de la o anumita ancora de)inita anterior cream tot cu autorul ancorelor o hi(erlegaturaE'emplu ( in top
    - salt in partea de sus a documentului 7in

    to(8.

    !aca dorim sa e)ectuam un salt direct intr-un )isier HTML lung atunci in Cre) precizam si

    locul in document.

    E'emplu ( salt la )isierul +lung.Ctml, la miloc .?. Trimitere automata a unui e-mail

    entru a obtine acest e)ect in hrefse va completa "ailtourmat de 7si de adresa de e-

    mail.

    E'emplu ( uteti sa-mi scrieti

  • 7/25/2019 curs-htmlh

    7/15

    regiuni si creeaza un )isier HTML care contine toate elementele de descriere a Cartii

    precum si a zonelor decupate. cesta este 63EE23E pe internet.

    Elemente de baza ( HTML HE! "#!$ceste documente au rolul de a de)ini structura documentului. !in acest motiv se mai

    numesc elemente de structura.

    tributele elementului BO$6(+ac5groun'4 oimagine apare pe )undal. ceasta se repeta atat pe orizontala cat

    si pe verticala pana cand se acopera intreaga supra)ata necesara corpului.

    +gcolor4 culoarea de )ond.

    te/t4 culoare te't.

    lin5 culoarea unei legaturi nevizitate.

    alin54 culoarea unei legaturi active 7apare intr-un dreptungCi8. # legatura este

    activa in timpul si imediat dupa vizitare.

    1lin54 culoarea unei legaturi vizitate 7care nu mai este activa8

    E'emplu (

    Elementele "SE MET ST$LE S&3%T

  • 7/25/2019 curs-htmlh

    8/15

    &adre 763MESET 63ME %63ME8

    E'ista posibilitatea ca aceiasi )ereastra a broser-ului sa a)iseze mai multe documente

    Ctml sau resurse. are rolul de a imparti )ereastra in mai multe cadre. %n

    )isierul Ctml el inlocuieste . Elementul 63EMSET se utilizeaza intre tag-urile

    si .tributele sunt ( Ro0s4 descrie liniile in care este impartita )ereastra.

    &ols4 descrie coloanele in care este impartita )ereastra.

    E'emplu ( # )ereastra impartita in doua linii una de DG din inaltimea )erestrei broser-

    ului si una de :DG.

    continutul liniei este in test.Ctml

    trei coloane de DDFD G dim latimea )erestrei. &ontinutul celor trei

    coloane.

    incCide de)inirea coloanelor incCide de)inirea liniilor

    - precizeaza continutul unui anumit cadru. Se utilizeaza un

    singur tag

    tributele sunt ( src4 adresa )isierului Ctml sau a imaginilor. "arginheight4 marginile in pi'eli sau procente )ata de partea de sus

    7top8 si cea de os 7bottom8

    "argin0i'th4 marginile in pi'eli sau G )ata de partea din stanga 7le)t8

    si dreapta 7rigCt8 fra"e+or'er4 poate lua doua valori 1 sau D. Aaloarea D 4 cadrul nu

    este separat de celelalte printr-un cCenar.

    scrolling4 trateaza prezenta barei de scroll 7de)ilare8 si poate lua treivalori ( auto4 bara de de)ilare este prezenta numai daca este cazul 7in cadru se a)iseaza o

    supra)ata mai mare decat a cadrului8 yes4 bara de de)ilare este prezenta intotdeauna

    no4 bara de scroll nu este a)isata.noresize4 indica broser-ului sa nu permita vizitatorului sa modi)ice

    dimensiunea cadrului. !aca este prezent la un cadru atunci nici cadrele invecinate nu pot

    )i redimensionate.

    na"e4 numele elementului 63ME. !intr-un cadru se pot comandacontinutul oricarui cadru 7inclusiv a cadrului curent8

    E'emplu ( 9n cadru cu doua coloane una contine un )isier de ancore iar in a doua se

    poate a)isa continutul )isierelor specidicate in ancore.

    6isierul cu ancore

    &1
    &
    &

  • 7/25/2019 curs-htmlh

    9/15

    target4 precizeaza +tinta, numele cadrului care va a)isa )isierul Ctml di Cre).

    - permite crearea unui cadru in corpul documentului

    7bodB8.tributele sunt ( na"e4 numele 7aceiasi semni)icatie ca la 63ME8

    height4 inaltimea in pi'eli

    0i'th - latimea in pi'eli fra"e+or'er4 ia valoarea D sau 1 7vezi 63ME8

    src4 adresa )isierului Ctml sau a imaginii

    "argin0i'th4 margini laterale 7dreapta stanga8 "arginheight4 margini sus si os

    scrolling4 la )el ca la 63ME

    align4 le)t rigCt top bottom middle 7la )el ca la %M;8

    Stiluri

    0otiuni introductive

    0otiunea de stil este pentru un document HTML asemanatoare cu )ormatarea unui

    document 2#3!. E'ista o multime de atribute prin care se pot stabili )ont-urile culorilede )ond si ale literelor caracteristicile de aliniere a te'tului )orma elementului marginile

    pozitia elementelor etc.Toate acestea se pot realiza cu autorul limbajului CSS2 (Cascading Style Sheets, level 2).

    E'sista si &SS1 dar &SS este mai evoluat permitand stabilirea pozitiei unui document in

    pagina.Legatura intre HTML si &SS se realizeaza utilizand tag-uurile HTML

    care vor )i asezate intere si

    9n stil se aplica unor elemente de acelasi tip. Tipul unui element este numele elementului

    din HTML de e'emplu un paragra) %M; imagine T"LE un tabel.- Stabilirea modului cum va arata un paragra) 7orice paragra) vom scrie va

    arata asa cum am stabilit stilul8

    P)ont-size(Dpt@ color(3ed@ te't-indent(1cm@ bacJground (Bello@ )ont-)amilB(cursive@)ont-stBle(italic@)ont(eigCt(bold@ te't-decoration(underline Q

    %n general un element HTML este alcatuit sub )orma de cutie 7bo'8

    cestea sunt (

    Marginea7margin8 4 nu este vizibila de vizitatirul paginii. 3ostul ei este de a

    pastra distanta dintre cutie si celelalte elemente.

    Bor'ura7border8 4 in cazul in care cratorul paginii doreste aceasta poate )i

    )acuta vizibila 7e'emplu i se stabileste o culoare8

    I

  • 7/25/2019 curs-htmlh

    10/15

    Tesatura7padding8 poate )i dimensionata dar nu poate )i )acuta vizibila printr-o

    culoare distincta. %n continuare se va )olosi termenul de (a''ing.

    &ontinutuleste dat de te't/imagine.E'emplu de stil pentru un element H1

    H1 Pborder(solid 1Dpt red@ bacJground-color(green@ padding (D.cm D.cm D.cm D.cm@

    te't-align(le)t@ idtC(cmQ*

    9n element H1

    E'emplu de stil pentru paragra)e. Pborder(groove 1cm red@ bacJground-color(Beloo@ padding(1cm 1cm 1cm 1cm@

    idtC(cm@ CigCt(cm@ te't-align(rigCt@ )ont-)amilB(arial@ )ont-eigCt(bold@

    )ont-stBle(italic@Q

    * 9n e'emplu de paragra)

    E'emplu de lista pentru care s-a stabilit dimensiunea )ont-ului culoarea de )ond.

    #L P)ont-size(Dpt@ )ont-eigCt(bold@ color(blacJ@ bacJground-color(Bello@Q

    *

    unu doi

    6onturi 4 atribute

    a8 font=style4 poate lua valorile nor"al, italicb8 font=1ariant4 poate lua valorile nor"al, s"all=ca(s

    c8 font=0eight4 poate lua valorile nor"al, +ol'd8 font=size4 marimea. &ea mai simpla modalitate de a indica marimea este prin

    puncte. 71Dpt 1pt*8

    e8 font4 grupeaza F atribute. !aca este utilizat se poate renunta la ele.E'emplu )ont(italic bold 1pt 7nu conteaza ordinea in care sunt scrise8

    )8 font=fa"ily4 are rolul de a stabili o )amilie de )onturi. Se pot speci)ica in

    ordine )amiliile de )onturi utilizate. Aalorile ( serif, sans=serif, cursi1e,

    "onosca(e.

    E'emplu ( P)ont-size(Dpt@ )ont-)amilB(courier monoscapeQ

    tribute de culoare

    &ulorile pot )i recunoacute prin numele lor +red, +green, etc. sau prin valorile 3;".a8 color4 speci)ica culoarea te'telor a)isate.

    b8 Bac5groun'=i"age4 pentru )ond se poate )olosi o omagine

    c8 Bac5groun'=color4 stabileste culoarea )undalului.d8 Bac5groun'=re(eat4 daca o imagine este mai mica decat spatiul necesar

    pentru un element atuci ea se poare repeta pe orizontala si pe verticala pana la

    unplerea spatiului. 3epetarea se poate controla prin valorile atasate(- re(eat4 repetare pe orizontala si verticala

    - re(eat=/- repetare pe orizontala

    - re(eat=y = repetare pe verticala

    - no=re(eat - )ara repetare

    1D

  • 7/25/2019 curs-htmlh

    11/15

    e8 +ac5groun'=attach"ent4 poate lua valorile fi/e' , scroll 7valoare implicita8

    !aca valoarea este )i'ed atunci de)ileaza numai obiectele care se gesesc pe )undal

    7imaginea ramane )i'a8 iar daca este scroll de)ileaza si imaginea.)8 +ac5groun'=(osition4 daca pe )undal este o imagine atunci i se poate

    preciza pozitia in raport cu )ereastra.

    E'ista mai multe posibilitati de precizare a pozitiei.- (rocentual( e'emplu G DG 71/ de partea stanga a )erestrei si 1/ din

    inaltimea ei.

    - In 1alori a+solute( e'. cm cm 7la cm de partea stanga a )erestrei si la cmde partea de sus8

    - Mi/t( e'(cm DG 7la cm de partea stanga a )erestrei si la umatate raport la

    inaltime8

    - Nu"ai o 1aloare4 caz in care se re)era numai la alinierea pe orizontala inraport cu marginea din stanga a )erestrei.

    - %rin cu1inte cheie( left, right, to(, +otto"4E'. bacJground-position le)t

    bottom 7in stanga os8

    E'emplu ( o singura imagine la milocul )erestrei imagine care nu de)ileaza."odB PbacJground-image( url7c(catalognume.pg8@ bacJground-repeat(no-repeat@

    bacJground-position(DG DG@ bacJground-attacCment()i'ed@Qg8 +ac5groun'4 o singura caracteristica pentru toate celelalte. Se trec in ordine

    toate valorile pentru bacJground-image bacJground-repeat bacJground-

    position bacJground-attacCment.

    tribute de te't

    a8 te/t='ecoration4 poate lua valorile un'erline, o1erline, line=trough, +lin5

    b8 te/t=align4 alinierea te'telor. oate lua valorile right, left, center, justify4c8 te/t=in'ent4 permite indentarea te'telor. rimul rand va incepe mai in

    dreapta cu o valoare precizata. E'. te't-indent(1cm.

    d8 line=height4 inaltimea liniei. Este )olosit pentru a stabili diastanta dintrerandurile unui paragra).

    E'emple( P)ont-size(1pt@ line-CeigCt(D.cm@Q

    P)ont-size(1pt@ line-CeigCt(1cm(Qtribute pentru margini

    a8 "argin=left4 marimea marginii din stanga

    b8 "argin=right4 marimea marginii din dreapta

    c8 "argin=to(4 marimea marginii de deasuprad8 "argin=+otto"4 dimensiunea marginii de dedesupt

    e8 "argin4 toate marginile in ordine sus dreapta os stanga.

    E'emplu ( P)ont-size(1pt@ margin-le)t(1cm@ margin-rigCt(cm@ margin-top(cm@Qtribute de padding

    adding-ul poate )i dimensionat dar nu i se poate aplica o culoare distincta.

    a8 %a''ing=to(4 partea de susb8 %a''ing=left4 partea din stanga

    c8 %a''ing-+otto"4 partea de os

    d8 %a''ing-right4 partea din dreapta

    e8 %a''ing4 toata marginile in ordine sus dreapta os stanga.

    11

  • 7/25/2019 curs-htmlh

    12/15

    .11.: tribute pentru bordura

    Mai intai putem stabili dimensiunea bordurii.

    a> Bor'er=to(=0i'th4 partea de sus@

    +> Bor'er=left=0i'th4 partea din stanga@

    c> Bor'er-+otto"=0i'th4 partea de os@

    '> Bor'er-right=0i'th4 partea din dreapta@e> Bor'er-0i'th4 le inlocuieste pe primele F. Se trec valorile in ordinea sus

    dreapta os stanga. !aca se trece o singura valoare aceasta va )i atasata

    tuturor marginilor. entru grosimea bordurii se pot )olosi valorile (tihn4subtire "e'iu"4 medie thic54 gros.

    f> Bor'er-color4 culoarea bordurii. S pot )olosi ma'im F culori in ordinea sus

    dreapta os stanga. !aca se trece o singura culoare aceasta va )i atasata

    tuturor marginilor.

    g> Bor'er-style4 se trece in mod obligatoriu. &ontrar bordura nu este vizibila.

    Aalorile mai importante sunt (soli', 'ou+le, groo1e, ri'ge, inset, outset4

    h> Bor'er=to(=style4 stilul bordurii in partea de sus@

    i> Bor'er-right=style4 stilul bordurii in partea dreapta@j> Bor'er-+otto"=style4 stilul bordurii in partea de os@

    5> Bor'er-left=style4 stilul bordurii in partea stanga.

    .11. &um se creaza un stil pentru un anumit element

    Elementului i se asociaza un nume prin atributul i'-.nu"e.. %n loc sa scriem stilulpentru elemant 7de e'emplu 8 scriem pentru ?nu"e4E'emplu 4 doua paragra)e unul cu stil 4 stabilind culoarea de )ond - . l doilea se

    a)iseaza )ara stil.

    p1 PbacJground-color(BelloQ

  • 7/25/2019 curs-htmlh

    13/15

    !aca un element include alte elemente acestea se aseaza in cadrul cutiei elementului

    parinte dupa cum sunt ( la nivel de bloc sau la nivel de te't.

    E'emplu (

    PbacJground(Bello@ CeigCt(Dp'@ idtC(DDp'@border-idtC(1Dp'@Q

    " PbacJground(green@ CeigCt(1Dp'@ idtC(1DDp'@Q

    % PbacJground(Cite@ CeigCt(1Dp'@ idtC(1DDp'@QT"LE PbacJground(red@Q

  • 7/25/2019 curs-htmlh

    14/15

    - daugam componentei %M; un stil prin care-i precizam pozitia

    %M; Pposition ( absolute@ le)t(D@ top(D@Q

    9n te't oarecare

    a11

    a1 a

    Elementul parinte al elementului %M; este elementul T! 7nu T"LE8. ozitionam

    absolut si elementul T!. #bservam ca in acest caz elementul apare in a)ara tabelului iar

    %M; este pozitionat relativ )ata de T!.

    %M; Pposition( absolute@ le)t(D@ top(D@Q

    arinteRT! Pposition( absolute@ top(1DD@ le)t(1DD@Q

    9n te't oarecare

    a11

    a1 a1 a

    !eci ( daca un element este pozitionat absolut si daca parinele sau parintele paruntelui *

    sunt pozitionati in )lu' normal atunci elementul este pozitionat in raport cu coltul dinstanga sus a )erestrei. !aca parintele este pozitionat absolut atunci elementul este

    pozitionat relativ )ata de parinte.

    entru pozitionarea absoluta orice element in )lu' normal se considera ca se a)la lacoordonatele DD )ata de parintele sau. &u alte cuvinte un element este positionat relativ

    )ata de parintele sau.

    c8 relati1e4 spre deosebire de pozitionarea relativa in cazul pozitionarii relative unelement este pozitionat in raport cu elementul parinte cCiar si in cazul in care

    acesta din urma este pozitionat in )lu' normal.

    @stBle>

    %M; Pposition( relative@ le)t(Dp'@ top(Dp'@Q

    9n te't oarecare

    a11

    a1 a1 a

    entru a realiza pozitionarea se )olosesc atributele LE6T T# dar se pot )olosi si 3%;HT

    "#TT#M.tributele pot lua si valor negative.

    1F

  • 7/25/2019 curs-htmlh

    15/15

    .11.11 tributul z-inde'

    rin intermediul atributului z-inde' putem controla ordinea de a)isare a elementelor

    suprapuse.E'emplu ( !oua tabele identice unul are culoarea de )ond galbena iar celalalt albastra.

    tabel1 Pposition( absolute@ top(1DD@ le)t(1DD@ z-inde'(1@ bacJground-color(blue@Qtabel Pposition( absolute@ top(1D@ le)t(1D@ bacJground-color(Bello@ z-inde'(@Q

    a11 a1

    a1 a

    a11 a1

    a1 a

    .11.1tributul displaB

    tributul permite modi)icarea a)isarii implicite a elementelor de tip bloc si te't.oate lua urmatoarele valori (

    a8 +olc54 elementele se a)iseaza la inceput de rand.

    E'emplu ( un element bold va )i a)isat bloc desi implicit se a)iseaza inline.

    " PdisplaB(blocJ@Q

    9n te't oarecare

    b8 inline4 elementele se a)iseaza in continuarea randului curent.

    @Cead> p PdisplaB(inline@Q

    9n te't

    lt te't

    c8 none4 elementul 7ementele8 nu se va a)isa.

    9.1. &aractere HTMLHTML permite introducerea caracterelor )olosind codul lor.

    E'emple(

    a8 Mama merge la piaK@ KI@

    b8 ria cerculi este KI?D3@

    1