Coneixements bàsics d’HTML per a tot usuari d’Internet

html-for-babies

html-for-babiesTothom hauria de saber HTML a nivell bàsic. Si no saps HTML continua llegint, i si ja en saps pots compartir-ho o guardar-ho a favorits.

El meu objectiu és que amb menys d’una hora tinguis coneixements bàsics de HTML, el llenguatge utilitzat per escriure tots els continguts de les pàgines web.

Què és això del HTML?

HTML significa “llenguatge d’etiquetes d’hipertext” i és el llenguatge que s’utilitza per definir l’estructura i el contingut de les pàgines web. Això vol dir que totes les pàgines web estan creades utilitzant etiquetes d’elements HTML. 

Els navegadors són els programes amb els que navegues per Internet i que interpreten el codi HTML de les pàgines web. Ara mateix podries estar utilitzant Internet Explorer, Google Chrome o Mozilla Firefox, oi?

La manera més ràpida de veure el HTML que forma una pàgina web en aquests navegadors és mirar el codi polsant la tecla F12. Això et permet veure immediatament els elements HTML de la pàgina que estàs visualitzant.

Cada etiqueta del llenguatge HTML està formada pels caràcters <, > i /. Un element HTML pot contenir altres elements HTML.

Els elements HTML comencen per una etiqueta amb el caràcter inicial < i amb el caràcter final >. Les etiquetes de finalització acaben amb etiqueta amb els caràcters inicials </ i el caràcter final  >.

Per exemple, pel titular més important de la pàgina s’utilitza el següent codi:
<h1>Titular de la pàgina</h1>.

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üent:
<img alt=”Això és una imatge” src=”imatge.jpg” />

Cada element té atributs que defineixen les característiques del contingut. En el cas anterior, l’atribut “alt” s’utilitza per escriure un text que descriu la imatge i l’atribut “src” s’utilitza per indicar la ubicació del fitxer de la imatge.

Com hem vist en l’exemple anterior, els atributs es defineixen a partir del nom i de l’assignació del seu valor. S’utilitza el símbol = i es posa el valor entre cometes. Per exemple src=”imatge.jpg”.

Resumint, l’estructura d’un element HTML és la següent:
<etiqueta atribut=”valor de l’atribut”>Contingut de l’element</etiqueta>
o
<etiqueta atribut=”valor de l’atribut” />

Alguns exemples:

<h1>Coneixements bàsics d'HTML per a tot usuari d'Internet</h1>
<p><strong>Tothom hauria de saber HTML a nivell bàsic.</strong> Si no saps HTML continua llegint, i si ja en saps pots compartir-ho o guardar-ho a favorits.</p>
<a href="http://elnostreraco.com/blog/coneixements-basics-html-per-tot-usuari-dinternet/>Enllaç a aquest article</a>
<img alt="Imatge del logo de HTML5 d'aquest article" src="http://elnostreraco.com/blog/wp-content/uploads/HTML5.png" />

Crea la teva primera pàgina web amb un fitxer HTML

1. Obre un editor de textos. En aquest exemple utilitzaré el bloc de notes, pero jo et recomanaria instal·lar-te l’última versió de notepad++ (També hi ha TextWrangler per Mac o gedit per Linux).

notepad

2. Copia aquesta estructura bàsica i enganxa-la en un nou fitxer. Consisteix en seleccionar el text que apareix a continuació, polsar CONTROL C i després, un cop al editor de textos, CONTROL V.

<!doctype html>
<html lang="ca">
<head>
  <title>Títol que apareix als buscadors i favorits</title>
</head>
<body>
  <h1>Titular de la pàgina</h1>
  <p>Paràgraf de text i una <strong>text destacat</strong></p>
  <img alt="Això és una imatge" src="imatge.jpg" />
  <ul> 
    <li>Primer element d'un llistat</li>
    <li>Segon element d'un llistat amb un <a href="http://elnostreraco.com/blog/">enllaç</a></li>
  </ul>
</body>
</html>

3. Guarda el fitxer amb l’extensió .html i amb codificació UTF-8. Si 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ó ANSI. En aquest cas ho guardo a l’escriptori.

guardar-html

A l’escriptori hauries de veure el fitxer que acabes de guardar.

indexhtml-chrome

4. Com que el fitxer ‘imatge.jpg’ no existeix, guarda un imatge (l’anterior o qualsevol altre) a l’escriptori amb el nom imatge.jpg.

guardar-imatge

5. Obre el fitxer HTML fent doble clic sobre l’icona del nou fitxer que apareix a l’escriptori. En aquest cas, com que jo tinc Google Chrome instal·lat per defecte, se m’obrirà amb Google Chrome. Depenent de la configuració del teu ordinador, podria tenir una icona diferent i se’t podria obrir amb el navegador Mozilla Firefox o Internet Explorer, etc.

Hauries de tenir un resultat similar a aquest:

exemple-pagina-html

Què hauries d’haver après sobre el llenguatge HTML?

Aquestes serien les coses bàsiques que hauries d’haver après un cop llegit aquest article:

  • Les pàgines web estan construïdes utilitzant el llenguatge HTML i el llenguatge HTML està format per etiquetes. Amb la tecla F12 pots veure els elements HTML de qualsevol pàgina web.
  • Les etiquetes més bàsiques són:
    <h1> pels titulars (h2, h3, etc indiquen la importància de cada subapartat)
    <p> pels paràgrafs.
    <strong> pels textos destacats.
    <img src=”URL“> per les imatges.
    <a href=”URL“> pels enllaços.
    <ul> pels llistats.
    <li> pels elements dels llistats.
  • Les URL identifiquen les pàgines i els fitxers. Les imatges (img src) necessiten una URL poder accedir als fitxers de les imatges i els enllaços (a href) necessiten una pàgina per poder dirigir l’usuari cap a una nova pàgina.
    Les rutes absolutes com <img src=”http://elnostreraco.com/blog/wp-content/uploads/exemple-pagina-html.jpg”> poden funcionar millor que les rutes relatives com <img src=”exemple-pagina-html.jpg”>. Per exemple, millor enllaçar a <a href=”http://elnostreraco.com/blog/calendari-sexy-2013/>Calendari 2013</a> en comptes de <a href=”calendari-sexy-2013/”>Calendari 2013</a>.
  • El llenguatge CSS s’utilitza per canviar l’aspecte d’una pàgina web (colors, disposició, tipografia, etc)
  • El llenguatge JavaScript s’utilitza per canviar el comportament d’una pàgina web (formularis, animacions, aplicacions, etc)

Truc extra:

Molts serveis a Internet et deixen inserir el seu contingut a les teves pàgines web. De vegades només es tracta de copiar el codi HTML que et doneen youtube, facebook, twitter, etc i enganxar-lo a la teva pàgina web.

Exemple: Inserir un vídeo de Youtube:

1. Ves al vídeo que vulguis i copia el codi HTML que hauràs d’inserir a la teva pàgina.

youtube

2. Enganxa’l a la teva pàgina. En aquest cas, al fitxer index.html

<!doctype html>
<html lang="ca">
<head>
  <title>Títol que apareix als buscadors i favorits</title>
</head>
<body>
  <h1>Titular de la pàgina</h1>
  <p>Paràgraf de text i una <strong>text destacat</strong></p>
  <img alt="Això és una imatge" src="imatge.jpg" />
  <ul> 
    <li>Primer element d'un llistat</li>
    <li>Segon element d'un llistat amb un <a href="http://elnostreraco.com/blog/">enllaç</a></li>
  </ul>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Jzm-ZOCCxRE" frameborder="0" allowfullscreen></iframe>
</body>
</html>

3. Visualitza el contingut actualitzant la pàgina.

resultat-youtube

Comentaris: Creieu que es pot exigir com a mínims de primària el que he exposat aquí o sóc massa dràstic? Tenir un ebook gratuït en català sobre HTML i CSS hi ajudaria?

 

Actualització 11/03/2013: Un campanya publicitaria per a que s’ensenyi a programar a les escoles.

  • Hola,
    sóc mestre, coordinador TIC d’un centre d’infantil i primària, marco els continguts a tots els cicles i imparteixo les TIC a cicle superior en anglès com a projecte de millora de l’anglès oral i de competència digital.
    El meu punt de vista és que el llenguatge HTML cada vegada és menys necessari ja que per crear pàgines web hi ha moltes aplicacions que les configuren amb relativa facilitat. També és cert que no només és per a crear webs i pot fer-se servir per altres coses però a primària (fins a 12 anys) crec que hi ha altres coneixements més importants a aprendre de competència digital. Si tinguéssim moltes més hores potser hi hauria temps per tot però ara mateix crec que és un contingut poc útil i més propi de secundària en tot cas. A primària nosaltres expliquem què és el codi HTML molt alt per alt, nocions molt bàsiques, més bàsiques que les explicades aquí a l’apunt; per exemple com inserir un codi a un bloc.
    Des de la meva experiència en les TIC a l’escola em trobo que, a diferència del que es diu sempre, molts nens i nenes no tenen un nivell òptim de competència digital en temes bàsics com processador de textos, presentacions, cerques per Internet, Google Apps, etc… El projecte que estem portant a terme (i que espero compartir aviat amb tothom) va enfocat en aquests temes.
    Salut
    Jordi Roca i Font
    Escola pública Les Pinediques de Taradell (Osona)

  • Discrepo, jo crec que l’HTML és cada vegada més necessari. La web ha passat a ser l’eina informàtica principal, sinó única, de la majoria.
    De la mateixa manera que s’ensenyava a escriure cartes i postals, crec que estaria bé que tot usuari d’Internet sapigués que Això és un enllaç (que he fet amb una etiqueta HTML) i que són principalment aquests els que ajuden a classificar la informació a Internet.
    És cert que els editors dels gestors de continguts web han ajudat en l’edició dels continguts d’una web, però al final el que fan els editors és escriure un HTML.
    Sempre m’he trobat amb problemes amb els editors (WYSIWYG) que utilitzen els gestors de contingut i si no saps HTML no pots ser autònom i solucionar-los en l’opció de “Veure HTML”.

  • Jo crec que és més un contingut de secundària, però hi afegiria coneixements bàsics de programació

    • Ocellz, potser si que és de secundària. De tota manera, crec que aprendre HTML pot ser una bona manera d’aprendre sobre com s’estructura un article, carta, postal, informe, etc. No creus?

  • En general, el tutorial m’ha semblat força clar (estic assumint que està dirigit a persones amb 0 coneixements previs de programació).

    En el meu cas, després de fer l’exercici, he tingut un petit problema: els accents i la “ç” s’em visualitzen de manera incorrecta (exemple: “pà gina”).

    Aquest tipus d’errors son descoratjadors perquè la persona que està fent el tutorial assumirá que és culpa seva i no sabrà què fer per resoldre’ls.

    Sí que em sembla útil incidir més clarament en que l’HTML és com la “façana” de totes les webs, que “per darrera”, seguint amb la metàfora, hi ha d’altres llenguatges que serien les canonades que la fan funcionar.

    Personalment crec que ajuda molt assimilar bé “l’alt nivell” abans de començar a aprendre peces de codi.

    La majoria de materials educatius relacionats amb qüestions de programació que he vist pateixen del problema de no posar-se en el lloc de la persona que comença desde 0.

    De seguida comencen a explicar expressions senzilles, però el problema és que la persona que està aprenent, moltes vegades no enten encara les bases de com funciona el llenguatge i per a què serveix exactament.

    Precisament vaig escriure un post relacionat amb aquest problema comunicatiu: http://cescvilanova.com/por-que-le-tienen-miedo-a-jordi-evole-y-lo-que-podemos-aprender-de-ello-cuando-tenemos-que-contar-algo/

    Una web que crec que ho fa especialment bé es Skillcrush: http://skillcrush.com
    Precisament el dia 7 de gener començo un dels seus cursos així que si vols et puc donar més informació de com son els materials.

    Una altra web de referencia que potser ja coneixes és Codeacademy. En aquest cas, trobo a faltar el tipus d’introducció que et comento pero el sistema interactiu per començar a jugar amb el codi em sembla efectiu:
    http://www.codecademy.com

    Salutacions!

    Cesc.

    • Cesc, gràcies pel comentari. El pas 3 és molt important. Has vigilat de guardar el fitxer amb codificació UTF-8?
      Jo no diria que HTML és la “façana”. Per mi, HTML és per l’estructura, CSS és per l’aspecte i Javascript és pel comportament.
      No acabo d’entendre quin problema comunicatiu et refereixes. Què podria millorar? Qué fa exactament skillcrush?
      Codecademy está molt bé, però per molts l’anglès és un problema. Aquesta és un de les raons que m’han motivat a escriure aquest article.

  • Home, a molts nens i algun adult li aniria bé per aprendre a estructurar-se

  • No em vaig fixar amb el tema de l’UTF-8. Vaig guardar l’arxiu sense modificar cap paràmetre (ho vaig fer en un Mac).

    Skillkrush és una web que pretén ensenyar desde 0 a desenvolupar llocs i serveis web.

    El que, en la meva opinió, els diferencia d’altres recursos, és que saben explicar les coses entenent que la persona que els llegeix segurament no coneix ni tan sols aquelles coses que un expert en la matèria no explica per considerar-les òbvies.

    Per exemple, així és com expliquen de manera introductoria què és l’HTML (hi ha punts en comú amb com ho expliques tú):

    http://www.skillcrush.com/terms/html.html

    El que et comentaba és que crec que és molt útil, i això no ho acaba de fer Skillcrush tampoc, explicar una mica més el que hi ha darrera de l’HTML (en aquest cas).

    Per exemple, dedicar uns minuts més a fer entendre coses com:

    – Els arxius HTML serveixen per definir l’estructura i continguts d’una pàgina web (això ja ho expliques també).
    – El format d’un arxiu HTML no és el que veurà l’usuari (exemplificar-ho amb una imatge d’un arxiu HTML i l’equivalència a com ho mostra un navegador amb una altra imatge al costat de l’anterior).
    – Cada pàgina que veiem al navegador es correspon amb un arxiu HTML.
    – Els arxius HTML permeten que els usuaris naveguin d’una pàgina a una altra mitjançant els enllaços (cadascuna de les pàgines està associada a un arxiu HTML) .
    – Quan publiquem una pàgina a Internet, els arxius HTML es guarden en un ordinador que no és el nostre. Quan accedim a una pàgina: rebem la informació d’aquest arxiu, el navegador l’interpreta i és aleshores quan visualitzem el contingut de la pàgina amb el format “real”.
    -…

    No sóc desenvolupador web així que potser estic posant la pota en algún concepte, però la idea és que la persona que es posi a crear un HTML entengui millor què és el que està fent i quin rol ocupa l’HTML en el funcionament de la web.

    Posar-se amb Codeacademy o amb tutorials sense entendre mínimament les bases de com funciona la web a nivell tècnic, a mí almenys em va resultar frustrant.

  • Pingback: Joguines de plàstic | Classes Wordpress()