Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Tema S2

    Încărcat de

    Ilie Maria Irina
    2 vizualizări4 pagini

    Titlu original

    TemaS2

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    2 vizualizări4 pagini

    Tema S2

    Încărcat de

    Ilie Maria Irina

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    Web Design

    Studii de caz privind formatarea elementelor de text



    1. Exemple de propriet#i de stil ce pot fi utilizate pentru formatarea textului &i blocurilor
    de text din cadrul documentelor HTML (autor lect. dr. Ctlin Tudor)

    font-family: font1, font2... Stabilirea unei liste de fonturi disponibile, separate prin caracterul virgul
    font-size: n pt | px
    Unde n reprezint dimensiunea caracterelor n numr puncte tipografice
    (1 punct tipografic=1/72 inch) sau n numr de pixeli
    font-style: italic Scrierea cu caractere cursive (italice)
    font-weight: bold Scrierea cu caractere aldine (ngro#ate)
    letter-spacing: n px
    Distan$a dintre caractere precizat printr-un numr ntreg de pixeli (chiar #i
    negativ)
    line-height:normal| npx| n% Specificarea distan$ei dintre rndurile unui paragraf.
    color: nume_culoare Setarea culorilor pentru caractere
    background-color: nume_culoare Stabilirea unei culori de fundal pentru un element
    background-image: nume/adresa
    fiier grafic
    Setarea unei imagini de fundal, cu specificarea numelui, eventual a adresei
    fi#ierului care furnizeaz imaginea
    text-transform: uppercase |
    lowercase
    Transformarea textului n caractere majuscule sau n caractere minuscule
    text-align: left | center | right | justify Alinierea textului pe orizontal
    text-decoration : none | underline |
    overline | line-through | blink
    Setarea modului de afi#are a cuvintelor
    vertical-align: sub | super Scrierea sub form de indice, respectiv sub form de exponent
    border-right: culoare grosime stil
    border-top: culoare grosime stil
    border-left: culoare grosime stil
    border-bottom: culoare grosime stil
    Stabile#te stilul bordurii unui tabel, rnd sau celul, specificnd pentru
    fiecare latur o culoare a bordurii, grosimea n pixeli #i stilul acesteia (valori
    posibile: solid line, dotted, dashed, double line, groove, ridge, inset,
    outset).
    height: n px | n % Stabile#te nl$imea n pixeli sau procente a elementului formatat
    width: n px | n % Stabile#te la$imea n pixeli sau procente a elementului formatat

    2. Studiu de caz rezolvat privind formatarea textului &i blocurilor de text din cadrul
    documentelor HTML (autor asist. dr. Andrei Tinca)

    S se realizeze un document HTML (#i fi#ierul de stiluri aferent) pentru prezentarea #i formatarea
    urmtorului con%inut:




    Rezolvare:

    Con%inutul fi#ierului document.htm:

    <!DOCTYPE html />
    <html lang="ro">
    <head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="stiluri.css" />
    </head>
    <body>
    <h1>Titlu principal (H1, 25 pixeli, rosu)</h1>
    <h2>Titlul secundar (H2, 18 pixeli, albastru, centrat)</h2>
    <p class="corp">Pentru a determina stilul primului paragraf,
    se va utiliza clasa de stiluri CSS "corp". Acest paragraf
    are alineat de 30 de pixeli si aliniere "justify", astfel
    nct toate rndurile sunt aliniate la marginea din stnga
    si din dreapta a paginii, prin introducerea unui numr
    variabil de spatii intre cuvinte.</p>
    <p class="citat">Al doilea paragraf folose#te clasa "citat",
    este scris cu verde si are dimensiunea de 20pixeli.</p>
    <p id="subliniat">Pentru al treilea paragraf se va utiliza
    un selector de element, numit "#subliniat".</p>
    </body>
    </html>


    Con%inutul fi#ierului stiluri.css:

    h1
    {
    font-size: 25px;
    color: red
    }

    h2
    {
    font-size: 20px;
    color: blue;
    text-align: center;
    }

    .corp
    {
    text-align: justify;
    text-indent: 30px;
    }

    .citat
    {
    color: green;
    font-size: 20px;
    }

    #subliniat
    {
    text-decoration: underline;
    }








    3. Studiu de caz propus privind formatarea textului &i blocurilor de text din cadrul
    documentelor HTML (autor lect. dr. Ctlin Tudor)

    S se realizeze documentul HTML (#i fi#ierul de stiluri aferent) pentru prezentarea #i formatarea
    urmtorului con%inut:


    Figura 1 - Prima parte a documentului

    Figura 2 - A doua parte a documentului

    Figura 3 - A treia parte a documentului

    S-ar putea să vă placă și