{"id":1062,"date":"2012-12-15T19:33:21","date_gmt":"2012-12-15T17:33:21","guid":{"rendered":"http:\/\/elnostreraco.com\/blog\/?p=1062"},"modified":"2015-11-10T21:36:59","modified_gmt":"2015-11-10T19:36:59","slug":"coneixements-basics-html-per-tot-usuari-dinternet","status":"publish","type":"post","link":"https:\/\/elnostreraco.com\/blog\/coneixements-basics-html-per-tot-usuari-dinternet\/","title":{"rendered":"Coneixements b\u00e0sics d’HTML per a tot usuari d’Internet"},"content":{"rendered":"

\"html-for-babies\"Tothom hauria de saber HTML a nivell b\u00e0sic.<\/strong>\u00a0Si no saps HTML continua llegint, i si ja en saps pots compartir-ho o guardar-ho a favorits.<\/p>\n

El meu objectiu \u00e9s que amb menys d’una hora<\/strong> tinguis coneixements\u00a0b\u00e0sics de HTML, el\u00a0llenguatge\u00a0utilitzat per escriure tots els continguts de les p\u00e0gines web.<\/p>\n

Qu\u00e8 \u00e9s aix\u00f2 del HTML?<\/h2>\n

HTML significa \u00abllenguatge d’etiquetes d’hipertext\u00bb i \u00e9s el llenguatge que s’utilitza per definir l’estructura i el contingut de les p\u00e0gines web.\u00a0Aix\u00f2 vol dir que totes les\u00a0p\u00e0gines web estan creades utilitzant etiquetes d’elements HTML.\u00a0<\/strong><\/p>\n

Els navegadors s\u00f3n els programes amb els que navegues per Internet i que interpreten el codi HTML de les p\u00e0gines web. Ara mateix podries estar utilitzant Internet Explorer, Google Chrome o Mozilla Firefox, oi?<\/p>\n

La manera m\u00e9s r\u00e0pida de veure el HTML que forma una p\u00e0gina web en aquests navegadors\u00a0\u00e9s mirar el codi\u00a0polsant\u00a0la tecla F12<\/strong>. Aix\u00f2 et permet veure immediatament els elements HTML de la p\u00e0gina que est\u00e0s visualitzant.<\/p>\n

Cada etiqueta del llenguatge HTML est\u00e0 formada pels\u00a0car\u00e0cters\u00a0<, > i \/. Un element HTML pot contenir altres elements HTML.<\/p>\n

Els elements HTML comencen per una etiqueta amb el car\u00e0cter inicial < i amb el car\u00e0cter final >. Les etiquetes de finalitzaci\u00f3 acaben amb etiqueta amb els\u00a0car\u00e0cters inicials <\/ i el car\u00e0cter final \u00a0>.<\/p>\n

Per exemple, pel titular m\u00e9s important de la p\u00e0gina s’utilitza el seg\u00fcent codi:
\n<h1>Titular de la p\u00e0gina<\/h1>.<\/p>\n

Hi ha elements com les imatges a les que no els hi cal indicar contingut entre les etiquetes inicials i finals. En aquest cas s’escriuria el seg\u00fcent:
\n<img alt=\u00bbAix\u00f2 \u00e9s una imatge\u00bb src=\u00bbimatge.jpg\u00bb \/><\/p>\n

Cada element t\u00e9 atributs que defineixen les\u00a0caracter\u00edstiques\u00a0del contingut. En el cas anterior, l’atribut \u00abalt\u00bb s’utilitza per escriure un text que descriu la imatge i l’atribut \u00absrc\u00bb s’utilitza per indicar la ubicaci\u00f3 del fitxer de la imatge.<\/p>\n

Com hem vist en l’exemple anterior, els atributs es defineixen a partir del nom i de l’assignaci\u00f3 del seu valor. S’utilitza el s\u00edmbol = i es posa el valor entre cometes. Per exemple src=\u00bbimatge.jpg\u00bb.<\/p>\n

Resumint, l’estructura d’un element HTML \u00e9s la\u00a0seg\u00fcent:
\n<etiqueta atribut=\u00bbvalor de l’atribut\u00bb>Contingut de l’element<\/etiqueta>
\no
\n<etiqueta atribut=\u00bbvalor de l’atribut\u00bb \/><\/p>\n

Alguns exemples:<\/p>\n

<h1>Coneixements b\u00e0sics d'HTML per a tot usuari d'Internet<\/h1>\r\n<p><strong>Tothom hauria de saber HTML a nivell b\u00e0sic.<\/strong>\u00a0Si no saps HTML continua llegint, i si ja en saps pots compartir-ho o guardar-ho a favorits.<\/p>\r\n<a href=\"http:\/\/elnostreraco.com\/blog\/coneixements-basics-html-per-tot-usuari-dinternet\/>Enlla\u00e7 a aquest article<\/a>\r\n<img alt=\"Imatge del logo de HTML5 d'aquest article\" src=\"http:\/\/elnostreraco.com\/blog\/wp-content\/uploads\/HTML5.png\" \/><\/pre>\n
Crea la teva primera p\u00e0gina web amb un fitxer HTML<\/h2>\n
1. Obre un editor de textos.<\/strong> En aquest exemple utilitzar\u00e9 el bloc de notes, pero jo et recomanaria instal\u00b7lar-te l’\u00faltima versi\u00f3 de\u00a0notepad++<\/a> (Tamb\u00e9 hi ha TextWrangler<\/a> per Mac o gedit<\/em> per Linux).<\/p>\n
\"notepad\"<\/p>\n
2. Copia aquesta estructura b\u00e0sica i enganxa-la en un nou fitxer<\/strong>. Consisteix en seleccionar el text que apareix a continuaci\u00f3, polsar\u00a0CONTROL C i despr\u00e9s, un cop al editor de textos, CONTROL V.<\/em><\/p>\n
<!doctype html>\r\n<html lang=\"ca\">\r\n<head>\r\n  <title>T\u00edtol que apareix als buscadors i favorits<\/title>\r\n<\/head>\r\n<body>\r\n  <h1>Titular de la p\u00e0gina<\/h1>\r\n  <p>Par\u00e0graf de text i una <strong>text destacat<\/strong><\/p>\r\n  <img alt=\"Aix\u00f2 \u00e9s una imatge\" src=\"imatge.jpg\" \/>\r\n  <ul> \r\n    <li>Primer element d'un llistat<\/li>\r\n    <li>Segon element d'un llistat amb un <a href=\"http:\/\/elnostreraco.com\/blog\/\">enlla\u00e7<\/a><\/li>\r\n  <\/ul>\r\n<\/body>\r\n<\/html><\/pre>\n
3. Guarda el fitxer amb l’extensi\u00f3 .html i amb codificaci\u00f3 UTF-8.<\/strong>\u00a0Si ho fas amb el programa del bloc de notes des de Windows vigila de no guardar-lo com a fitxer de text i no utilitzis la codificaci\u00f3 ANSI. En aquest cas ho guardo a\u00a0l’escriptori.<\/em><\/p>\n
\"guardar-html\"<\/p>\n
A l’escriptori hauries de veure el fitxer que acabes de guardar.<\/p>\n
\"indexhtml-chrome\"<\/p>\n
4. Com que el fitxer ‘imatge.jpg’ no\u00a0existeix, guarda un imatge (l’anterior o qualsevol altre) a l’escriptori\u00a0amb el nom imatge.jpg.<\/strong><\/p>\n
\"guardar-imatge\"<\/p>\n
5. Obre el fitxer HTML fent doble clic sobre l’icona del nou fitxer que apareix a l’escriptori.<\/strong> En aquest cas, com que jo tinc Google Chrome instal\u00b7lat per defecte, se m’obrir\u00e0 amb Google Chrome.\u00a0Depenent de la configuraci\u00f3 del teu ordinador, podria tenir una\u00a0icona\u00a0diferent i se’t podria obrir amb el navegador Mozilla Firefox o Internet Explorer, etc.<\/p>\n
Hauries de tenir un resultat similar a aquest:<\/p>\n
\"exemple-pagina-html\"<\/p>\n
Qu\u00e8 hauries d’haver apr\u00e8s sobre el llenguatge HTML?<\/h2>\n
Aquestes serien les coses b\u00e0siques que hauries d’haver apr\u00e8s un cop llegit aquest article:<\/p>\n
    \n
  • Les p\u00e0gines web estan\u00a0constru\u00efdes\u00a0utilitzant el llenguatge HTML i el llenguatge HTML est\u00e0 format per\u00a0etiquetes.\u00a0Amb la tecla F12 pots veure els elements HTML\u00a0<\/strong>de qualsevol p\u00e0gina web.<\/li>\n
  • Les etiquetes m\u00e9s b\u00e0siques<\/strong> s\u00f3n:
    \n<h1> pels titulars (h2, h3, etc indiquen la\u00a0import\u00e0ncia\u00a0de cada subapartat)
    \n<p> pels par\u00e0grafs.
    \n<strong> pels textos destacats.
    \n<img src=\u00bbURL<\/em>\u00ab> per les imatges.
    \n<a href=\u00bbURL<\/em>\u00ab> pels enlla\u00e7os.
    \n<ul> pels llistats.
    \n<li> pels elements dels llistats.<\/li>\n
  • Les URL identifiquen les p\u00e0gines i els fitxers.<\/strong> Les imatges (img src) necessiten una URL<\/em> poder accedir als fitxers de les imatges i els\u00a0enlla\u00e7os (a href) necessiten una p\u00e0gina per poder dirigir l’usuari cap a una nova p\u00e0gina.
    \nLes rutes absolutes com <img src=\u00bbhttp:\/\/elnostreraco.com\/blog\/wp-content\/uploads\/exemple-pagina-html.jpg\u00bb> poden funcionar millor que les rutes relatives com <img src=\u00bbexemple-pagina-html.jpg\u00bb>. Per exemple, millor enlla\u00e7ar a <a href=\u00bbhttp:\/\/elnostreraco.com\/blog\/calendari-sexy-2013\/>Calendari 2013<\/a> en comptes de\u00a0<a href=\u00bbcalendari-sexy-2013\/\u00bb>Calendari 2013<\/a>.<\/li>\n
  • El llenguatge CSS s’utilitza per canviar l’aspecte <\/strong>d’una p\u00e0gina web (colors, disposici\u00f3, tipografia, etc)<\/li>\n
  • El llenguatge JavaScript s’utilitza per canviar el comportament<\/strong> d’una p\u00e0gina web (formularis, animacions, aplicacions, etc)<\/li>\n<\/ul>\n
    Truc extra:<\/h2>\n
    Molts serveis a Internet et deixen inserir el seu contingut a les teves p\u00e0gines web. De vegades nom\u00e9s es tracta de copiar el codi HTML\u00a0que et doneen youtube, facebook, twitter, etc i enganxar-lo a la teva p\u00e0gina web.<\/p>\n
    Exemple: Inserir un v\u00eddeo de Youtube:<\/strong><\/h3>\n
    1. Ves al v\u00eddeo que vulguis i copia el codi HTML que haur\u00e0s d’inserir a la teva p\u00e0gina.<\/p>\n
    \"youtube\"<\/p>\n
    2. Enganxa’l a la teva p\u00e0gina. En aquest cas, al fitxer index.html<\/p>\n
    <!doctype html>\r\n<html lang=\"ca\">\r\n<head>\r\n  <title>T\u00edtol que apareix als buscadors i favorits<\/title>\r\n<\/head>\r\n<body>\r\n  <h1>Titular de la p\u00e0gina<\/h1>\r\n  <p>Par\u00e0graf de text i una <strong>text destacat<\/strong><\/p>\r\n  <img alt=\"Aix\u00f2 \u00e9s una imatge\" src=\"imatge.jpg\" \/>\r\n  <ul> \r\n    <li>Primer element d'un llistat<\/li>\r\n    <li>Segon element d'un llistat amb un <a href=\"http:\/\/elnostreraco.com\/blog\/\">enlla\u00e7<\/a><\/li>\r\n  <\/ul>\r\n<iframe width=\"420\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/Jzm-ZOCCxRE\" frameborder=\"0\" allowfullscreen><\/iframe><\/strong>\r\n<\/body>\r\n<\/html><\/pre>\n
    3. Visualitza el contingut actualitzant la p\u00e0gina.<\/p>\n
    \"resultat-youtube\"<\/p>\n
    Comentaris:<\/strong>\u00a0Creieu que es pot\u00a0exigir com a m\u00ednims de prim\u00e0ria\u00a0el que he exposat aqu\u00ed o s\u00f3c massa dr\u00e0stic? Tenir un\u00a0ebook gratu\u00eft en catal\u00e0 sobre HTML i CSS hi ajudaria?<\/p>\n
     <\/p>\n
    Actualitzaci\u00f3 11\/03\/2013<\/strong>: Un campanya publicitaria per a que s’ensenyi a programar a les escoles.<\/p>\n