Nocions bàsiques d'HTML

Les pàgines web estructuren el seu contingut en HTML.

HTML5 (HyperText Markup Language) és un llenguatge que dona estructura i contingut a una pàgina web. L'estructura es refereix a títols, paràgrafs, imatges, enllaços...

L'HTML no serveix per definir estils (colors, mida de text, tipografies...). Els estils de uvic.cat ja estan predefinits i s'apliquen automàticament al web a partir de l'estructura.

Sintaxi bàsica

Els elements textuals s'emmarquen entre una etiqueta d'obertura <etiqueta> i una de tancament </etiqueta>.

<p>Exemple de paràgraf</p>

Hi ha elements que només tenen una etiqueta d’inici: <br> (salt de l'ínia), <img> (imatge), etc.

Dins del codi HTML no es tenen en compte ni els espais ni els salts de línia. Les línies se separen automàticament si els paragrafs estan separats per etiquetes, o bé si hi ha un salt de línia <br>.

Les etiquetes poden tenir atributs que s'inclouen a l'etiqueta d'inici:

<p id="paragraf-1">Exemple de paràgraf</p>
<img src="imatges/logo1.png" alt="UVic- UCC. Universitat de Vic, Universitat crentral de catalunya">

Llista d'etiquetes més freqüents

Les etiquetes més utilitzades són:

  1. Paràgrafs <p>Paràgraf</p>.

  2. Imatges <img>.

  3. Encapçalaments (headings):

    1. Nivell 1: <h1>Encapçalament 1</h1>

    2. Nivell 2: <h2>Encapçalament 2</h2>

    3. Nivell 3: <h3>Encapçalament 3</h3>

    4. ...

    5. Nivell 8: <h8>Encapçalament 8</h8>

  4. Negreta <strong>Text en negreta</strong>.

  5. Cursiva <em>Text en cursiva</em>.

  6. Llistes:

    1. Ordenada <ul>...</ul>.

    2. Desordenada <ol>...</ol>.

  7. Element d'una llista <li>Element de la llista</li>.

  8. Contenidors <div>...</div>.

  9. Delimitadors de text<span>Hola</span>.

Identificadors i classes

Les classes serveixen per agrupar elements que han de tenir un mateix estil.

<p class="cita">Això és un paràgraf de classe "cita".</p>

Un element pot tenir múltiples classes, les quals se separen amb un espai.

<p class="cita destacat">Això és un paràgraf de classe "cita" i de classe "destacat".</p>

A banda de classes, un element pot tenir un identificador (ID) que ha de ser únic en tota la pàgina.

<p id="descripcio">Això és un paràgraf amb l'ID "descripcio".</p>

Última actualización