Manual Basic HTML Gestió webs municipals Pàg. 1/7 Index El llenguatge HTML (Descripció i etiquetes)... 2 L etiqueta <table> (Creació de taules)... 3-4 Exemple complet de codi HTML... 5 Explicació linia a linia de l exemple complet... 6 Ampliar coneixements HTML (Enllaços a manuals d HTML a internet).. 7
Manual Basic HTML Gestió webs municipals Pàg. 2/7 El llenguatge HTML és el que s anomena un llenguatge d etiquetes. Això significa que es dona format a la informació a través d unes etiquetes, que generalment cal indicar l inici d etiqueta i la finalització. Per obrir una etiqueta es fa entre els símbols < > i per tancar-la entre </ >. Exemples d etiquetes que es poden utilitzar <b>: Negreta Exemple: <b>institució:</b> Diputació de Girona Resultat: Institució: Diputació de Girona <strong>: Negreta Exemple: <strong>institució:</strong> Diputació de Girona Resultat: Institució: Diputació de Girona <br>: Salt de linia Exemple: Pàgines web dels ajuntaments <br> de les comarques gironines Resultat: Pàgines web dels ajuntaments de les comarques gironines <p>: paràgraf Exemple: <p>pàgines web dels ajuntaments <br> de les comarques gironines</p> <p>manual Html <br> per a gestionar el contingut </p> Resultat: Pàgines web dels ajuntaments de les comarques gironines Manual Html per gestionar el contingut Veiem que amb l etiqueta <p> hem aconseguit crear dos paràgrafs. <img>: Imatge Exemple: <img src=http://webspobles.ddgi.cat/imatges/ajuntament.jpg> Resultat: El resultat seria una foto de l ajuntament <a href>: Enllaç a una web Exemple: <a href=http://www.ddgi.cat>web Diputació de Girona</a> Resultat: web Diputació de Girona (on es podria clicar el texte i anar a www.ddgi.cat)
Manual Basic HTML Gestió webs municipals Pàg. 3/7 <table>: Taules (<tr>: files, <td>: columnes) Les taules són un element per estructurar la informació, de tal manera que podem tenir un dibuix d una taula com el següent: I podriem tenir per exemple el següent resultat: Títol texte foto Per a crear l anterior taula hem necessitat dues files i dues columnes: 1a fila: Composta per una sola columna (Títol) 2a fila: Composta per a dues columnes (1a pel text i 2a per la foto)
Manual Basic HTML Gestió webs municipals Pàg. 4/7 Anem a veure el codi HTML que necessitem per a crear aquesta taula: <table> <tr> <td>titol</td> </tr> <tr> <td>text</td> <td>foto</td> </tr> </table> Iniciem la taula Obrim la 1a fila 1a columna Tanquem la 1a fila Obrim la 2a fila 1a columna 2a columna Tanquem la 2a fila Tanquem la taula Aquesta és una estructura bàsica d una taula, i l exemple serveix per entendre com funciona. Es pot comprovar que els codis html de les pàgines web contenen taules amb tot el contingut dins. Cal saber desglossar aquesta estructura per entendre com està creada a la web. Es pot comprovar també que l etiqueta <table> té varies propietats, anem a veure n alguna: Border = 0 Aquesta propietat ens indica si volem dibuixar les linies de la taula. Normalment es posa a 0 ja que no es vol visualitzar la taula, però és útil a l hora de fer algun canvi (afegir o eliminar alguna fila o columna) posar temporalment aquest valor a 1, així veiem com està dibuixada la taula. width="95%" Aquesta propietat ens indica que la taula ocupa un 95% de l amplada de la pàgina web. Es posa aquest percentatge per a deixar un 5% d espai lateral, ja que sino veuriem que el contingut es tocaria amb els laterals. Si es vol en algun moment també es pot reduir aquest percentatge, depenent de la informació pot ser útil en algun cas.
Manual Basic HTML Gestió webs municipals Pàg. 5/7 Per a finalitzar aquest manual bàsic d html podem veure un exemple complet de codi html d una taula i el seu contingut. A continuació hi ha el codi amb el número de linia, i a la pàgina següent hi ha un comentari sobre cada linia: 1. <table border="0" width="95%" id="table1"> 2. <tr> 3. <td width="599"> 4. <br> 5. <STRONG>Adreça:</STRONG>Pl. Firal, 23 6. <p> 7. <STRONG>Codi Postal:</STRONG>17176 8. </p> 9. <p> 10. <STRONG>Comarca:</STRONG> Alt Empordà 11. </p> 12. <p> 13. <STRONG>Telèfon:</STRONG> 972 43 56 21 14. </p> 15. <p> 16. <STRONG>Fax:</STRONG> 972 43 26 22 17. </p> 18. <p> 19. <STRONG>Web:</STRONG> 20. <A href="http://www.ddgi.cat">www.ddgi.cat</a> 21. </p> 22. <p><strong>horari d'atenció al públic:</strong></p> 23. <p>dilluns a DIVENDRES de 9:00 a 14:00 hores 24. <br><br> 25. DIJOUS de 18:00 a 21:00 hores 26. </p> 27. </td> 28. <td valign="top" align="right" width="169"> 29. <p align="left"> 30. <img border="0" src="http://217.14.36.164/sites/ddgi/images_gallery/ajuntament.jpg" width="165" height="194" style="width: 151px; HEIGHT: 203px"> 31. <br> 32. <br> Edifici de l'ajuntament 33. </p> 34. </td> 35. </tr> 36. </table>
Manual Basic HTML Gestió webs municipals Pàg. 6/7 Anem a comentar el codi linia a linia. Veureu que hi ha les etiquetes estudiades en el manual, però s hi afegeixen algunes propietats: 1. Inici de la taula border="0" : les linies de la taula invisibles width="95%" : Amplada de la taula del 95% id="table1": Identificador de la taula (no l utilitzem) 2. Inici de la fila de la taula 3. Inici de la 1a columna de la fila de la taula width="599": Amplada de la columna de 599 píxels. Hem vist que aquesta propietat es pot posar en % o amb píxels 4. Salt de línia 5. Texte amb negreta 6. Inici de paràgraf (1) 7. Texte amb negreta 8. Fi de paràgraf (1) 9. Inici de paràgraf (2) 10. Texte amb negreta 11. Fi de paràgraf (2) 12. Inici de paràgraf (3) 13. Texte amb negreta 14. Fi de paràgraf (3) 15. Inici de paràgraf (4) 16. Texte amb negreta 17. Fi de paràgraf (4) 18. Inici de paràgraf (5) 19. Texte amb negreta 20. Enllaç a una web 21. Fi de paràgraf (5) 22. Texte amb negreta dins un paràgraf 23. Inici de paràgraf (6) i texte del paràgraf 24. Dos salts de linia 25. Texte 26. Fi del paràgraf (6) 27. Fi de la 1a columna de la fila de la taula 28. Inici de la 2a columna de la fila de la taula valign="top" : El text de la columna està alineat verticalment a dalt align="right" : El text de la columna està alineat horitzontalment a la dreta width="169" : L amplada de la columna és de 169 píxels 29. Inici de paràgraf (7) align="left": El text del paràgraf estarà alineat a l esquerra 30. Imatge border="0": Mai es dibuixarà cap linia de contorn al voltant de la imatge src="" : Lloc on es troba la imatge i quin és el nom del seu fitxer width="165" : Amplada de la imatge original height="194" : Alçada de la imatge original style="width: 151px; HEIGHT: 203px": Amplada i alçada que volem que tingui la imatge a la web 31. Salt de línia 32. Salt de lína, 4 espais en blanc ( ) i texte 33. Fi de paràgraf (7) 34. Fi de la 2a columna de la fila de la taula 35. Fi de la columna de la taula 36. Fi de la taula
Manual Basic HTML Gestió webs municipals Pàg. 7/7 Si voleu ampliar els vostres coneixements amb codi HTML o veure més exemples podeu trobar gran quantitat de manuals a internet. Us posem alguns exemples per a facilitar-vos la cerca: http://www.programacion.net/html/tutorial/curso/ http://www.manual-html.com/ http://www.desarrolloweb.com/manuales/21/#capitulos http://www.webestilo.com/html/ http://www.aulaclic.es/html/f_html.htm http://www.geocities.com/siliconvalley/8195/manualhtm.html#cinco http://www2.uca.es/manual-html/