10 febr. Introducció al HTML

Índex de la primera sessió:

• Sintaxis HTML
• Estructura del document
• Estàndards HTML
• Etiquetes bàsiques.
• Pràctica: creació de dues pàgines HTML entrellaçades.

Quan mires una web en un navegador veus un document que consta de: textos, imatges, enllaços i tota mena d’elements.

Per exemple, la pàgina web d’Elisava es veu així en el navegador.

Veiem un document molt visual, que conté diferent informació sobre l’escola i que ens és fàcilment comprensible. Però, com està fet aquest document?

Simplificant una mica podríem dir que aquest document està fet amb el que es coneix com llenguatge HTML. En una web podem veure el llenguatge HTML quan veiem el seu Codi font.

… I trobarem en una nova finestra aquest arxiu de text:

Aquest text està escrit en llenguatge HTML, és el que li dóna al navegador tota la informació que conté la pàgina d’inici de la web d’Elisava.

Llenguatge HTML

HTML són les sigles d’HyperText Markup Language (Llenguatge de marcat d’hipertext) i és el llenguatge amb el que s’escriuen les pàgines web.

És un llenguatge que ordena la informació (textos, imatges, formularis, vídeos, àudios, …) amb marques o etiquetes que indiquen a l’ordinador les accions o la manera d’estructurar la informació.

Per exemple, si volem indicar que un text és un títol o un paràgraf o un enllaç, escriurem unes etiquetes especificant que el text és un titol o un paràgraf o un enllaç. Com per exemple:

<title>Això és un títol</title>
<p>Això és un paràgraf </p> 
<a>Això és un enllaç</a>

Sintaxis

Les etiquetes (tags en anglès) contenen informació sobre l’element que tenen dintre. Les etiquetes:

• Estructuren el document
• Defineixen què és l’element: si és un títol, un paràgraf, una imatge, un formulari, etc…

Habitualment consten de dues parts:

1. Obertura

   <title>

2. Tancament

   </title>

En el cas de les etiquetes <title>, les escrivim així:

<title>El títol de la pàgina web </title>

Elements HTML

Un element HTML és un contingut que es troba entre una etiqueta d’obertura i una de tancament.

En el cas:

<title>El títol de la pàgina web </title>

“El títol de la pàgina web” és l’element de les etiquetes <title>.

Alguns elements com <br> (etiqueta del salt de línia) no tenen cap contingut i es tanquen en la mateixa etiqueta d’obertura.

Li passa el mateix a l’etiqueta <hr> que crea una línia horitzontal o l’etiqueta de la imatge <img> que també s’obre i es tanca en sí mateixa.

Atributs d’una etiqueta

Els atributs defineixen les propietats o el comportament d’un element amb valors que podem modificar.

Es posen dins de l’etiqueta d’obertura, per exemple:

<html lang="ca">

En aquest cas l’atribut “lang” indica que el document html està escrit en català.

Si escrivim un enllaç l’atribut href (Hypertext REFerence) indicarà l’adreça de l’enllaç, i ho farem així:

<a href="http://www.elisava.net">Elisava</a>

Si volem indicar que l’enllaç s’obri en una nova finestra del navegador, a aquest enllaç afegirem l’atribut target i ho farem així:

<a href="http://www.elisava.net" target="_blank">Elisava</a>

En el cas d’una imatge farem servir diferents atributs per especificar les propietats d’una imatge:

<img src="fotografia.jpg" width="200" height="100" alt=”Informació sobre la fotografia”>

En aquesta imatge trobem els atributs src, width, height i alt.

Les regles dels atributs són:

• Sempre van dins de l’etiqueta d’obertura.
• L’ordre dels atributs no té importància.
• Els atributs van separats amb un espai.
• L’atribut indica el valor amb el signe igual (=)
• El valor va entre cometes dobles (“… “) o simples (‘…’)

Alguns atributs bàsics

id

Estableix un identificador únic per a cada element. No es pot repetir mai.

<img id="logo">

class

Estableix un identificador que es pot repetir en altres elements.

<img class="portfolio">, <img class="portfolio">

style

Estableix l’estil d’una etiqueta.

title

Estableix el títol d’un element (es fa servir en ellaços i en imatges), millora l’accessibilitat de l’element.

Els atributs id i class no poden contenir espais buits, ni accents, ni caràcters llatins com ara “ç” o “ñ” i són sensibles a l’us de majúscules o minúscules.

src

Estableix la font (src és l’abreviació de source) o el directori d’origen d’una imatge

<img src"images/foto.jpg">

width

Estableix l’amplada d’una imatge

<img src"images/foto.jpg" width="300">

Estructura HTML

Molts elements HTML estan aniuats o continguts dins d’altres elements HTML, per exemple:

Això ho trobarem escrit així:

<!DOCTYPE html>
<html>
  <head>
  <title>Títol de la web </title>
  <meta charset="utf-8">
  </head>

  <body>
     <img src="imatges/logo.jpg" width="300" height="59" alt="Logo de la web">
     <h1>Encapçalament primer</h1> 
     <p>Quinta decima <strong>eodem modo typi</strong> qui nunc nobis videntur parum clari fiant sollemnes in. </p> 
  </body>
</html>

Aquest exemple conté:

• <html> conté les etiquetes <head> i <body>
• <head> conté les etiquetes <title> i <meta>
• <body> conté les etiquetes <img> i <p>
• <p> conté l’etiqueta <strong>

I es veurà així en el navegador:

Etiquetes bàsiques

En el document HTML trobarem les següents etiquetes:

<!DOCTYPE>

Es troba al principi del document i li diu al navegador amb quina versió del llenguatge HTML està escrita la web.

En aquest curs treballarem amb l’estàndard HTML5. La manera d’escriure l’etiqueta <!DOCTYPE> és així:

<!DOCTYPE html>

Seguint aquest estàndard escriurem en minúscules totes les etiquetes HTML.

<html>

És la etiqueta que defineix el document HTML, es posa al principi i al final del document.

Així que al principi del document l’escriurem així: <html>

I al final del document, per indicar que es tanca l’etiqueta, l’escriurem així: </html>

<head>

És l’etiqueta que es posa a l’inici del document i és un contenidor de la informació general del document.

Conté elements de l’encapçalament com:

• <title> el títol de la pàgina
• <meta> meta informació sobre la pàgina (l’autor, paraules clau i descripció del document)
• <style> estils
• <scripts>
• i d’altres elements.

Entre l’etiqueta d’obertura i de tancament trobarem aniuades altres etiquetes, com ara:

<head>
 <title>Títol del document</title>
</head>

El que escrivim dins de les etiquetes <head> no es veurà en el cos del document.

<body>

Etiqueta que indica el cos del document. Dins de l’etiqueta d’obertura i tancament del <body> trobarem aniuades totes les etiquetes que indicaran els diferents tipus d’elements que tenim a la nostra web i que poden ser textos, imatges, vídeos, enllaços, etc…

Etiquetes de text

<h1>, <h2>, <h3>, <h4>, <h5> i <h6> Etiquetes dels títols del document, van de <h1> fins a <h6>. I s’escriuen:

<h1> Aquest és el títol 1 </h1>

Els motors de cerques (com Google o Bing) utilitzen les etiquetes dels títols per indexar l’estructura del contingut de les webs.

<p> Etiqueta de paràgraf. </p>

<ul>Etiqueta de llista desordenada.</ul>

Dins seu aniuen els diferents elements d’una llista <li> Element d’una llista </li>

Les llistes s’escriuen així:

<ul> 
   <li>Nobis videntur parum</li>
   <li>Nulla facilisi nam </li>
   <li>Quinta decima eodem</li>
</ul>

<ol> Etiqueta ordenada </ol>

<ol>
   <li>Nobis videntur parum</li>
   <li>Nulla facilisi nam</li>
   <li>Quinta decima eodem</li>
</ol>

<em>Text amb ènfasi</em>

<small>Text petit</small>

<u>Text subrallat</u>

<del>Text taxat</del>

<img>

Etiqueta d’una imatge.

Quan posem una imatge hem de tenir molta cura en especificar molt bé la ruta d’una imatge que vindrà definida per l’atribut src.

En els tres exemples següents, l’etiqueta de la imatge sempre està dins de l’arxiu “prova.html”, fixa’t com s’escriu diferent la ruta:

Imatge dins d’una carpeta que es diu “imatges”

<img src=”imatges/logo.png”>

Imatge a una carpeta superior:

<img src=”../logo.png”>

Imatge a la mateixa carpeta:

<img src=”logo.png”>

<a>

Etiqueta d’enllaç posada en un text:

<a href=”http://www.elisava.net” title=”Web d'Elisava” target="_blank">Enllaç</a>

Etiqueta d’un enllaç posada en una imatge:

<a href=”http://www.elisava.net” title=”Web d'Elisava” target="_blank">
<img src=”imatges/logo.png” alt="Logotip de la web">
</a>

Editor de text

Per fer la nostra web podem fer servir l’aplicació TextEdit de Mac o el Bloc de Notas de Windows.

Si ho fas amb Mac has d’anar a les Preferències i a “Nuevo documento” seleccionar “Texto Normal“:

I després clicar “Abrir y guardar” per activar la casella “Ignorar comandos de texto enriquecido en los archivos HTML”

Després obres un nou arxiu amb TextEdit i quan el guardis el document, hes d’escriure l’extensió .html sense deixar que el programa escrigui l’extensió .txt.

Així l’arxiu s’obrirà amb el navegador que tinguem configurat per defecte.

Si després volem retocar l’arxiu amb el TextEdit o el Bloc de Notes, clicarem el botó de la dreta i seleccionarem “Abrir con…” per seleccionar aquesta aplicació o llençarem l’arxiu des de l’explorador a l’aplicació.

Estàndards xHTML i HTML5

Des de la creació del llenguatge HTML s’han desenvolupat diferents estàndards per compartir les mateixes normes per a escriure HTML.

• HTML Tags (1991) – Tim Berners-Lee
• HTML 2.0 (1995) – Primer estàndard oficial.
• HTML 3.2 (gener de 1997) – Desenvolupat pel W3C
• HTML 4.0 (decembre de 1997) – Versió més utilitzada.
• XHTML (1999) reformulació de l’HTML 4.0.1 utilitzant XML.
• XTML 1.1 (2001)
• HTML 5, actualment en desenvolupament però cada cop més utilitzada.

El W3C elabora les normes HTML que han de seguir els desenvolupadors de pàgines web.

Pots veure més informació a la pàgina del regulador dels estàndards de la web: World Wide Web Consortium.

En aquest curs treballarem amb l’estàndard HTML5.