Scribd Logo
Upload

Welcome to Scribd!

  • 3 - HTML - Divisions I Atribut Id

    Uploaded by

    Alvazna
    10 views3 pages
    enunciado chichoso de html para l.marcas

    Original Title

    3- HTML_ Divisions i atribut id

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    enunciado chichoso de html para l.marcas

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views3 pages

    3 - HTML - Divisions I Atribut Id

    Uploaded by

    Alvazna
    enunciado chichoso de html para l.marcas

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Fet per Daniel Delgado Gomis

    HTML: Divisions i l’atribut id


    Divisions
    En un document HTML l'element “div” permet crear divisions, també anomenades seccions
    o zones. Les divisions s'utilitzen per agrupar elements i aplicar estils (que introduirem avui,
    però ho veurem a la propera sessió de classe):

    <html>
    <head>
    <title>Exemple d’una divisió</title>
    </head>
    <body>
    <p>Primer paràgraf.</p>
    <div>
    <p>Segon paràgraf.</p>
    <p>Tercer paràgraf.</p>
    </div>
    <p>Quart paràgraf.</p>
    </body>
    </html>

    En aquest codi es pot observar que l’arrel es diu <html>, i que conté dos elements: <head> i
    <body>.
    ● L’element <head> conté informació del document, com el títol de la web, l’icona
    del favicon i l’enllaç a l’arxiu d’estils.
    ● L’element <title> conté el títol de la web. Aquest títol aparexierà. per exemple, a la
    pestanya del navegador.
    ● L’element <body> conté el cos del la pàgina web, i es on se dissenya el seu
    contingut.
    Tots els arxius emprats deurien tindre l’extensió .html per a que el navegador els detecte
    correctament.

    Exercici 31: Obri l’arxiu popurri.html amb un editor de textos. Anem a comprovar els
    <div>. Darrere de la imatge còpia el div en els dos paràgrafs de l’exemple. Quan
    l’executes, comprovaràs que no es veu res especial. No es preocupis, es normal.

    Anem a visualitzar el div que hem ficat. Crea-li al <div> un atribut anomenat style
    que tinga de contingut "color:white; background:green". Si tot ha anat bé,
    visualitzarem la zona del div en verd i les lletres en blanc.

    Exercici 32: Posa els títols principals de totes les pàgines dins de divisions, fes que
    aparegui el text d’aquests títols en blau (blue).

    Exercici 33: Posa els menús de navegació de totes les pàgines amb el fondo en blau i
    les lletres blanques mitjançant <div>.

    1
    Fet per Daniel Delgado Gomis

    Exercici 34: A la pàgina popurri, posa els paràgrafs del Lorem Ipsum en una divisió
    amb el fondo en groc (yellow) i la resta del body, sense contar ni títol ni menú, dins
    d’un altre <div> amb el fondo en gris (gray).

    Exercici 35: A la pàgina personal, posa la teua imatge en una divisió amb el fondo en
    gris (gray) i la resta del body, sense contar ni títol ni menú, dins d’un altre <div> amb
    el fondo en groc (yellow).

    Exercici 36: En la pàgina principal, posa el body, sense contar ni títol ni menú, dins d’un
    altre <div> amb el fondo en gris (gray). Crea una divisió buida amb el fondo en blau.

    Exercici 37: Reordena el contingut dels diferents body per a seguir el següent ordre:
    Títol

    Menú

    Cós 1

    Cós 2

    2
    Fet per Daniel Delgado Gomis

    Atribut id
    Els elements poden tindre un identificador que els ajuda a ser referenciats a l’hora de
    donar-los estils. Açò s’utilitza per a tindre l’estil tot junt al <head> del document sota
    l’element <style>.

    <html>
    <head>
    <title>Títol de la meua web</title>
    <style>
    #prueba {
    background:blue;
    color:yellow;
    }
    </style>
    </head>
    <body>
    <div id=”prueba”>Ací va la capçalera de la web</div>
    </body>
    </html>

    Les capçaleres es mostraràn de més gran a més menut depenent del número que es pose.
    D’aquesta manera <h1> es la capçalera més gran, mentre que <h6> es la capçalera més
    menuda.

    Exercici 38: Es hora de posar identificadors en tots els div ficats a l’apartat anterior:
    Posa a tots el títols l’identificador “titol”. Per a per açò ves a totes les divisions que
    contenen el títol de la pàgina i fica-les el següent atribut: id=“titol”.

    Exercici 39: Ara posa la resta d’identificadors conforme el següent esquema:


    id=”titol”

    id=”menu”

    id=”cos1”

    id=”cos2”

    Observa que no hi han ni tildes ni majúscules.

    Exercici 40: Crea en <head> un element <style> i, utilitzant l’exemple com a


    referència, passa l’etil de l’atribut del div a l’element style.

    Per a provar-hi, elimina els atributs estil i comprova que es veu correctament. Vigila
    que el contingut dels elements <style> deu de ser exactament igual en totes les
    pàgines creades,

    You might also like