Activitats

Targeta de visita

L’objectiu d’aquesta activitat és aprendre a aplicar un full d’estil CSS a un document XML.

A partir de l’XML següent que defineix un professor i les tasques que fa:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <professor>
  4. <departament>Departament d'Informàtica</departament>
  5. <nom>Xavier</nom>
  6. <cognom>Sala</cognom>
  7.  
  8. <carrecs>
  9. <carrec>Tutor 2n ASIX</carrec>
  10. <carrec>Cap del Departament</carrec>
  11. </carrecs>
  12. </professor>

…es vol generar una targeta de visita com aquesta:

Figura Targeta de visita

Com ho faríeu?

En general només cal triar les propietats adequades per anar acotant el format per donar a les etiquetes.

Una de les coses interessants és que per centrar una caixa CSS en la zona que la conté cal posar els marges esquerra i dret a auto:

  1. professor {
  2. margin-left:auto;
  3. margin-right: auto;
  4. width: 20%;
  5. border: solid;
  6. border-width: 3px;
  7. margin-top: 10px;
  8. padding-bottom:20px;
  9. padding-left: 20px;
  10. padding-top:20px;
  11. }
  12.  
  13. nom, cognom {
  14. font-size:30px;
  15. }
  16.  
  17. departament {
  18. display:block;
  19. font-weight: bold;
  20. background-color:black;
  21. text-align: right;
  22. color:white;
  23. padding-right: 5px;
  24. }
  25.  
  26. carrec {
  27. font-style: italic;
  28. padding-left:40px;
  29. display:block;
  30. }

Llista dels treballadors

L’objectiu d’aquesta activitat és aprendre a modificar la visualització d’un document XML amb CSS.

Donat l’XML següent amb la llista dels treballadors de l’empresa agrupats per departaments, cal millorar-ne la visualització amb un CSS de manera que quedin ressaltats els departaments i els caps de cada departament:

Una possible manera seria la que es mostra en la figura següent:

Figura Representació dels treballadors de l’empresa

D’aquesta tasca en podem destacar la necessitat de modificar l’etiqueta <nom> perquè pinti diferent si fem referència al nom d’un cap o d’un treballador, que s’ha de fer amb un selector especial.

  1. empresa {
  2. width: 900px;
  3. margin:auto;
  4. background-color: #80bef3;
  5. padding: 30px;
  6. }
  7.  
  8. id {
  9. width: 600px;
  10. margin:auto;
  11. font-size: 40px;
  12. font-weight: bold;
  13. display:block;
  14. text-align: center;
  15. }
  16.  
  17. departament {
  18. display:block;
  19. border-width: 1px;
  20. border-style: solid;
  21. background-color: LightGrey;
  22. margin-bottom:30px;
  23. margin-top: 30px;
  24. }
  25.  
  26.  
  27.  
  28. nom-departament {
  29. display:block;
  30. font-size: 35px;
  31. font-weight: bold;
  32. text-align:center;
  33. text-decoration: underline;
  34. }
  35.  
  36. nom {
  37. display:block;
  38. padding: 10px;
  39. }
  40.  
  41. cap nom {
  42. font-weight: bold;
  43. }

Llistes de classe

L’objectiu d’aquesta activitat és aprendre a aplicar un full d’estil CSS a un document XML.

Tenim un document en XML dels alumnes que s’han matriculat del mòdul de “Llenguatges de marques” i s’ha de fer una llista de classe on es vegin quines són les unitats formatives que han de fer els alumnes:

Figura Mostrar la llista de classe

Dissenyeu el CSS que permeti veure-les ràpidament.

Com sempre, no hi ha una única manera de fer aquesta activitat. La que es veu aquí només és una de les moltes possibles.

És especialment important veure que cal recórrer als :before per afegir el text que no estava originalment en el contingut, com en el cas d’afegir el text professor: davant del nom del professor i per obtenir el valor dels atributs de les etiquetes <uf>.

  1. alumnes {
  2. width: 800px;
  3. margin: auto;
  4. }
  5.  
  6. centre {
  7. padding-top: 20px;
  8. font-size:10px;
  9. }
  10.  
  11. modul {
  12. display:block;
  13. margin:auto;
  14. background-color:black;
  15. color:white;
  16. font-size:30px;
  17. text-align:center;
  18. font-weight:bold;
  19. }
  20.  
  21. professor {
  22. margin: 30px;
  23. padding-left:30px;
  24. font-size:20px;
  25. display:block;
  26. }
  27.  
  28. professor nom:before {
  29. content: "Professor: ";
  30. }
  31.  
  32. nom, cognom {
  33. font-weight:bold;
  34. }
  35.  
  36. alumne {
  37. display:block;
  38. border-style: solid;
  39. border-width: 1px;
  40. }
  41.  
  42. unitats {
  43. display:block;
  44. padding-left: 90px;
  45.  
  46. }
  47.  
  48. uf {
  49. text-align: center;
  50. display: table-cell;
  51. width: 200px;
  52. }
  53.  
  54. uf:before {
  55. content: "UF" attr(num) ": ";
  56. }

Previsió del temps

L’objectiu d’aquesta activitat és modificar la visualització d’un document XML amb CSS.

Teniu un fitxer de previsió del temps de diferents dates. En aquest arxiu hi ha diferents exemples de com són els arxius:

Es vol fer que aquest fitxer es pugui visualitzar d’una manera més atractiva i han definit un esquema de com volem que quedi la representació en un navegador. L’objectiu és que els fitxers es mostrin de la manera següent:

Figura Representació de la imatge en CSS

Es vol que segons la previsió del temps que farà (sol, ennuvolat, neu o pluja) mostri una icona, i que el fons de la icona sigui de diferents colors. Podeu aconseguir les imatges que hem fet servir en l’enllaç següent:

Imatges ( 74.1 KB )

El que destaca més d’aquesta activitat és que hi ha algunes de les dades del document XML que no s’han de mostrar (comarca, màxima, mínima i vent), i per tant les eliminem amb el display:none.

La resta és jugar amb les propietats més habituals i intentar centrar el conjunt en el navegador.

  1. temps {
  2. border-style:solid;
  3. border-width:2px;
  4. width:800px;
  5. margin-top:50px;
  6. margin-left:auto;
  7. margin-right:auto;
  8. }
  9.  
  10. poblacio {
  11. float:left;
  12. height:150px;
  13. }
  14.  
  15. nom {
  16. width:200px;
  17. background-color: black;
  18. color:white;
  19. display:block;
  20. font-size: 40px;
  21. text-align:center;
  22. }
  23.  
  24. data {
  25. text-align:center;
  26. display:block;
  27. font-size: 30px;
  28. height: 400px;
  29.  
  30. }
  31.  
  32. comarca, maxima, minima, vent {
  33. display:none;
  34. }
  35.  
  36. data {
  37. color: red;
  38. }
  39.  
  40. previsions {
  41. float:left;
  42. width: 600px;
  43. text-align: center;
  44. }
  45.  
  46. previsio {
  47. float:left;
  48. width: 200px;
  49. height:150px;
  50. }
  51.  
  52. previsio[estat="ennuvolat"] {
  53. background-image:url(ennuvolat.png);
  54. background-repeat: no-repeat;
  55. background-position: center center;
  56. background-color: LightGray;
  57. }
  58.  
  59. previsio[estat="pluja"] {
  60. background-image:url(pluja.png);
  61. background-repeat: no-repeat;
  62. background-position: center center;
  63. background-color: grey;
  64. }
  65.  
  66. previsio[estat="sol"] {
  67. background-image:url(sol.png);
  68. background-repeat: no-repeat;
  69. background-position: center center;
  70. background-color:LightBlue;
  71. }
  72.  
  73. previsio[estat="neu"] {
  74. background-image:url(neu.png);
  75. background-repeat: no-repeat;
  76. background-position: center center;
  77. background-color:white;
  78. }

Cafeteria Manel

L’objectiu d’aquesta activitat és aprendre a convertir un document de text a XHTML o HTML.

Una cafeteria us ha passat la llista del preus per penjar-la en un servidor web:

Cafeteria Manel
--------------------
  Cafè sol            1,00 €
  Cafè amb llet       1'50 €
  Tallat              1,25 €

Creeu el codi HTML necessari per representar-la.

La representació en HTML dependrà molt del gust de cadascú, però una possibilitat podria ser posar els preus en una taula.

  1. <title>Cafeteria Manel</title>
  2. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  3. </head>
  4. <h1>Cafeteria Manel</h1>
  5. <p></p>
  6. <h2>Llista de preus</h2>
  7. <tr><th>Producte</th><th>Preu</th>
  8. <tr><td>Cafè sol</td><td>1,00 €</td></tr>
  9. <tr><td>Cafè amb llet</td><td>1,50 €</td></tr>
  10. <tr><td>Tallat</td><td>1,25 €</td></tr>
  11. </table>
  12. </body>
  13. </html>

Tauler d'escacs

L’objectiu d’aquesta activitat és aprendre a barrejar XHTML i CSS.

a) Creeu una pàgina en la qual hi hagi una taula amb 8 files i 8 columnes.

La primera part és la més senzilla, ja que només cal definir una taula en el cos de la pàgina. Només hem d’anar amb compte de proveir alguna manera de poder fer referència a cada una de les caselles perquè després els puguem canviar les característiques:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  3. <head>
  4. <title>Tauler d'escacs</title>
  5. </head>
  6. <body>
  7. <tr>
  8. <td class="blanc"></td><td class="negre"></td>
  9. <td class="blanc"></td><td class="negre"></td>
  10. <td class="blanc"></td><td class="negre"></td>
  11. <td class="blanc"></td><td class="negre"></td>
  12. </tr>
  13. <tr>
  14. <td class="negre"></td><td class="blanc"></td>
  15. <td class="negre"></td><td class="blanc"></td>
  16. <td class="negre"></td><td class="blanc"></td>
  17. <td class="negre"></td><td class="blanc"></td>
  18. </tr>
  19. <tr>
  20. <td class="blanc"></td><td class="negre"></td>
  21. <td class="blanc"></td><td class="negre"></td>
  22. <td class="blanc"></td><td class="negre"></td>
  23. <td class="blanc"></td><td class="negre"></td>
  24. </tr>
  25. <tr>
  26. <td class="negre"></td><td class="blanc"></td>
  27. <td class="negre"></td><td class="blanc"></td>
  28. <td class="negre"></td><td class="blanc"></td>
  29. <td class="negre"></td><td class="blanc"></td>
  30. </tr>
  31. <tr>
  32. <td class="blanc"></td><td class="negre"></td>
  33. <td class="blanc"></td><td class="negre"></td>
  34. <td class="blanc"></td><td class="negre"></td>
  35. <td class="blanc"></td><td class="negre"></td>
  36. </tr>
  37. <tr>
  38. <td class="negre"></td><td class="blanc"></td>
  39. <td class="negre"></td><td class="blanc"></td>
  40. <td class="negre"></td><td class="blanc"></td>
  41. <td class="negre"></td><td class="blanc"></td>
  42. </tr>
  43. <tr>
  44. <td class="blanc"></td><td class="negre"></td>
  45. <td class="blanc"></td><td class="negre"></td>
  46. <td class="blanc"></td><td class="negre"></td>
  47. <td class="blanc"></td><td class="negre"></td>
  48. </tr>
  49. <tr>
  50. <td class="negre"></td><td class="blanc"></td>
  51. <td class="negre"></td><td class="blanc"></td>
  52. <td class="negre"></td><td class="blanc"></td>
  53. <td class="negre"></td><td class="blanc"></td>
  54. </tr>
  55. </table>
  56. </body>
  57. </html>

b) Definiu amb CSS el color de les caselles formant un tauler d’escacs (blanc i negre) i feu que totes les caselles siguin quadrades.

Per fer el segon apartat hem d’afegir dins de la secció <head> de l’HTML la referència al fitxer CSS, on direm que les caselles etiquetades com a blanc s’han de fer blanques i les etiquetades com a negre s’han de fer negres.

  1. <link rel="stylesheet" type="text/css" href="tauler.css"></link>

I creem el fitxer CSS:

  1. td.blanc {
  2. background-color:white;
  3. width: 100px;
  4. height: 100px;
  5. }
  6.  
  7. td.negre {
  8. background-color:black;
  9. width: 100px;
  10. height: 100px;
  11. }
  12.  
  13. table {
  14. border-style:solid;'
  15. border-width:1px;
  16. }

Frikie Zone

L’objectiu d’aquesta activitat és aprendre a crear una pàgina fent servir XHTML i CSS.

Fent servir XHTML i CSS escriviu el codi necessari per representar una pàgina com aquesta:

Figura Frikie Zone

Les imatges les podeu substituir per les que vulgueu, però l’estructura de la pàgina ha de ser la mateixa.

Es pot fer de moltes maneres però el més senzill és fer-ho fent servir caixes <div> d’HTML i posicionar-les fent servir CSS.

S’ha resumit el text central, ja que no aporta res, per tal que el codi quedi més curt:

  1. <header>
  2. <title>Frikie zone</title>
  3. <link type="text/css" rel="stylesheet" href="hard.css" />
  4. </header>
  5. <div id="main">
  6. <div id="capsalera"></div>
  7. <div id="lateral">
  8. <h1>Welcome to the most frikie web in the world</h1>
  9. <img src="freak-now.png">
  10. <p>Text central, bla, bla, bla, bla,</p>
  11. <p></p>
  12. <img src="music.png">
  13. <p>bla, bla, bla, etc..</p>
  14. <p></p>
  15. <p id="small">If you have some problems with this web,
  16. please contact width manel@freak.cat or
  17. ramon@freak.cat</p>
  18. </div>
  19. <div id="login">
  20. <h1>Frikie-zone users login</h1>
  21. <img src="marcia.png" width="100px">
  22. <form name="form1" method="post" action="users.php">
  23. <p> Usuari: <input name="user" type="text" id="user"></p>
  24. <p> Contrasenya: <input name="pass" type="password" id="pass"></p>
  25. <p></p>
  26. <p><input type="submit" name="Entrar" value="Entrar"></p>
  27. </form>
  28. </div>
  29. <div id="publi">
  30. <p><img src="baby.png" width="175"></p>
  31. <p><img src="strella.png" width="50">
  32. <img src="strella.png" width="50">
  33. <img src="strella.png" width="50">
  34. <img src="strella.png" width="50"></p>
  35. <p><img src="space.png" width="250"></p>
  36. </div>
  37. </div>
  38. </body>
  39. </html>

Un cop tenim els blocs bàsics només els hem de posicionar adequadament i donar color, format, etc.

  1. body {
  2. background-color:#d0e7e9;
  3. }
  4.  
  5. div#main {
  6. width: 1100px;
  7. margin-left: auto ;
  8. margin-right: auto ;
  9. padding-top: 50px;
  10. padding-bottom: 50px;
  11. text-align:center;
  12. }
  13.  
  14.  
  15. div#capsalera {
  16. background-image:url('frikie.png');
  17. background-repeat:no-repeat;
  18. background-color:#eaeaea;
  19. background-position:center;
  20. height:190px;
  21. width:1000px;
  22. padding:50px;
  23. margin-left: auto ;
  24. margin-right: auto ;
  25. text-align:center;
  26. display:block;
  27. }
  28.  
  29. div#lateral {
  30. float:left;
  31. width: 720px;
  32. padding: 30px;
  33. text-align:center;
  34. background-color:#ade3f4;
  35. }
  36.  
  37. div#lateral {
  38. float:left;
  39. width: 300px;
  40. background-color:white;
  41. padding-top:30px;
  42. padding-bottom:30px;
  43. padding-left:20px;
  44. display:block;
  45. text-align:center;
  46. background-color:#a3bcbf;
  47. }
  48.  
  49. div#publi {
  50. float:left;
  51. width: 300px;
  52. padding-top:30px;
  53. padding-bottom:30px;
  54. padding-left:20px;
  55. text-align:center;
  56. background-color:#4f9ff4;
  57. }
  58.  
  59. div#result {
  60. width:1000px;
  61. padding:50px;
  62. margin-left: auto ;
  63. margin-right: auto ;
  64. text-align:center;
  65. display:block;
  66. background-color:#ade3f4;
  67. }
  68.  
  69.  
  70. h1 {
  71. color: #000000;
  72. text-align:center;
  73. }
  74.  
  75. p {
  76. text-align:left;
  77. }
  78.  
  79. p#small {
  80. font-size:10px;
  81. }
  82.  
  83. p#resultat {
  84. text-align:center;
  85. font-size:20px;
  86. font-weight:bold;
  87. }

Anar a la pàgina següent:
Exercicis d'autoavaluació