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

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.

General