Cos del document `<body> </body>`

La secció <body> és on es col·loca el contingut visible d’una pàgina. Inclou elements com capçaleres, paràgrafs, imatges i enllaços.

Cos del document <body> </body>
Formularis en HTML
Etiquetes de Vídeo i Àudio
- Vídeos
- Àudio

Capçaleres

HTML defineix 6 nivells de capçaleres: <h1> a <h6>

<body>

    <h1> Nivell 1 - Títol Principal </h1>
    <h2> Nivell 2 - Subtítol </h2>
    <h3> Nivell 3 - Altres Títol </h3>
    <h4> Nivell 4 - Títol Menor </h4>
    <h5> Nivell 5 - Encara Menys </h5>
    <h6> Nivell 6 - L'Últim Títol </h6> 

</body>

alt text

Paràgrafs

<p> per a definir els paràgrafs

<br> per a fer salts de línia

Formats

Aquí tens el text amb la descripció de cada etiqueta HTML:

<b> - Text en negreta
<strong> - Text important
<i> - Text en cursiva
<em> - Text emfatitzat
<mark> - Text marcat
<small> - Text més xicotet
<del> - Text ~~eliminat~~
<ins> - Text subratllat
<sub> - Text en subíndex, o X₂
<sup> - Text en superíndex, o X²

Al navegador es mostraria:

alt text

La diferència entre <b> i <strong>:

<b>: Indica que el text ha de ser representat en negreta.
<strong>: Posa el text en negreta i el marca com a important des del punt de vista del contingut i l’estructura del document. Aquesta etiqueta s’utilitza per donar importància semàntica i pot ser utilitzada per motors de cerca i tecnologies d’accessibilitat.

La diferència entre <i> i <em>:

<i>: Indica que el text ha de ser representat en cursiva.
<em>: S’utilitza per indicar que el text ha de ser emfatitzat per raons semàntiques, donant una indicació al navegador i altres agents de processament que aquesta part del text té un pes semàntic addicional. Això pot ser útil per a motors de cerca, llocs web d’accessibilitat i altres tecnologies que interpreten la informació continguda en una pàgina web.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Text Formatat</title>
</head>
<body>
    <p>Aquest text té una paraula <em>emfatitzada</em>, <br> una altra <strong>destacada</strong>, i una <b>en negreta</b>.</p>
    <p>Segon paràgraf amb més text i <br> un <mark>salt</mark> de línia.</p>
</body>
</html>

En el codi anterior:

<em> emfatitza la paraula fent-la cursiva.
<strong> destaca la paraula en negreta i aporta importància semàntica.
<b> aplica negreta sense importància semàntica.
<mark> ressalta el text amb un fons destacat (normalment groc).
<br> insereix un salt de línia dins del paràgraf.

Citacions

Les etiquetes <blockquote>, <q> i <cite> són utilitzades per gestionar citacions i indicar l’origen del contingut citat:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de citacions</title>
</head>
<body>

<h1>Exemple de citacions en HTML</h1>

<!-- Exemple de bloc de citació amb blockquote -->
<blockquote>
    "La ciència mai resol un problema sense crear-ne deu més."
    <cite>— George Bernard Shaw</cite>
</blockquote>

<p>
    Durant una entrevista, el científic va dir: 
    <q>La investigació és essencial per al progrés humà.</q> 
    Aquesta frase reflecteix la seva creença profunda en el valor de la ciència.
</p>

</body>
</html>

Al navegador es mostraria així:

alt text

Explicació:

<blockquote>:
- Funció: S’utilitza per a crear blocs de citació o per citar un text llarg.
- Visualització: És un element de bloc, de manera que ocupa tota l’amplada disponible i normalment introdueix un salt de línia abans i després. Sovint, els navegadors l’estilen amb una indentació per indicar que és una citació.
- Ús: És ideal per a citacions llargues o paràgrafs de text que representen una cita extensa.
<q>:
- Funció: S’utilitza per a cites breus dins d’un paràgraf de text.
- Visualització: És un element en línia (inline), el que significa que no introdueix salts de línia abans ni després del contingut. Els navegadors solen afegir cometes automàticament al voltant del text dins de <q>.
- Ús: Ideal per a cites curtes dins d’un paràgraf o una frase.
<cite>:
- Funció: S’utilitza per indicar la font d’una citació o el títol d’una obra (com un llibre, article, etc.) i, en alguns casos, el nom de l’autor.
- Visualització: És un element en línia i sovint es mostra en cursiva per defecte, encara que no tots els navegadors ho fan automàticament.
- Ús: Ideal per citar l’origen d’una frase o obra. Pot anar dins d’un <blockquote> o d’un <q> per donar context a la citació.

En Resum

Etiqueta	Tipus	Ús principal	Estil per defecte
`<blockquote>`	Bloc	Citacions llargues o paràgrafs citats	Indentació i salt de línia
`<q>`	En línia	Cites curtes dins de text	Cometes automàtiques
`<cite>`	En línia	Indicar font o autor de la citació	Cursiva (en alguns navegadors)

Abreviacions i Definicions `<abbr>` `<dfn>`

Les etiquetes <abbr> i <dfn> són utilitzades per indicar abreviacions i definicions respectivament.

<body>
<blockquote><p>La <q>citació en bloc</q> pot ser utilitzada per ressaltar información
    important.</p>
    <p>Aquesta citació és de <cite>Pere Gil</cite>.</p></blockquote>
<p>En un document acadèmic, pot ser útil definir acrònims.
    Per exemple, <abbr title="World Wide Web Consortium">W3C</abbr> estableix estàndards web.
</p>

<p><dfn title="Un sistema d'operació de codi obert">Linux</dfn> és conegut per la seva estabilitat.</p>


</body>

alt text

Text Preformatat `<pre>` `<code>`

Disposem d’eines en HTML per evitar que s’aplique format al text i mantenir la seva estructura original. Aquestes etiquetes són molt útils per mostrar codi o text que requereix una alineació específica.

<pre>: Conserva tots els espais i salts de línia tal com es troben en el codi HTML. A més, el text dins d’un <pre> té una mida de lletra fixa, i no s’ajusta automàticament al marge.
<code>: Utilitzem esta etiquetaper marcar fragments de codi dins d’un text, mantenint l’estructura i presentació original del codi. És habitual utilitzar <code> dins d’un <pre> per mostrar codi formatat.

Exemple en HTML

<body>

<pre>
    Aquest és un exemple
    de text preformatat.
    Les línies es mostraran
    tal com s'han escrit.
</pre>
<p>
    A continuació, es mostra un bloc de codi en Java preformatat:
</p>

<pre>
    <code>
        public class HelloWorld {
           public static void main(String[] args) {
              System.out.println("Hola, món!");
           }
        }
    </code>
</pre>


<p>El codi anterior és un senzill exemple d'un programa "Hola, món!" en Java.    
</p>

</body>

L’eixida en el navegador seria: —

alt text

A l’exemple anterior:

El primer bloc <pre> conté text preformatat. Cada espai i salt de línia es mostren exactament tal com estan escrits dins del codi HTML.
El segon bloc utilitza <pre><code> per mostrar un exemple de codi en Java. La combinació de <pre> i <code> permet que el codi es mostre amb espais conservats i en una font de mida fixa, fent-lo més llegible.

Ús combinat de <pre> i <code> En alguns casos, és preferible combinar <pre>' i ''<code> per mostrar el codi d’una manera estructurada i formatada correctament. Si sol utilizem <code> el codi java de l’exemple anterior apareixeria tot en una linea.

alt text

Llistes d’Elements

Les etiquetes per a crear llistes HTML permeten estructurar el contingut en formats ordenats i desordenats, així com crear llistes de descripció per representar termes amb definicions.

Etiquetes Principals per a Llistes:
- <ol>: Crea una llista ordenada, en la qual els elements es numeren automàticament.
- <ul>: Crea una llista desordenada, en la qual els elements es mostren amb punts o símbols.
- <li>: Defineix un element dins d’una llista, ja sigui ordenada o desordenada.
- <dl>: Defineix una llista de descripció, que conté termes amb les seves definicions.
- <dt>: Defineix un terme dins d’una llista de descripció.
- <dd>: Defineix la descripció d’un terme en una llista de descripció.
Atributs Comuns:
- type (per a <ol>): Permet definir el tipus de numeració (1, A, a, I, i).
- start (per a <ol>): Especifica el número inicial en una llista ordenada.
- value (per a <li> en llistes ordenades): Estableix un valor específic per a un element individual.

Exemples en HTML

alt text

    <!-- Exemple de Llista Ordenada -->
    <p><b>Llista Ordenada</b></p>
    <ol>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ol>

alt text

    <!-- Exemple de Llista Desordenada -->
    <p><b>Llista Desordenada</b></p>
    <ul>
        <li>Element A</li>
        <li>Element B</li>
        <li>Element C</li>
    </ul>

alt text

    <!-- Exemple de Llista de Descripció -->
    <p><b>Llista de Descripció</b></p>
    <dl>
        <dt>HTML</dt>
        <dd>Llenguatge de marcatge estàndard per a pàgines web.</dd>
        <dt>CSS</dt>
        <dd>Llenguatge de fulls d'estil utilitzat per estilitzar documents HTML.</dd>
    </dl>

alt text

    <!-- Llista Ordenada amb Tipus Personalitzat -->
    <p><b>Llista Ordenada amb Tipus Personalitzat <i> Lletres</i></b></p>
    <ol type="A">
        <li>Element A</li>
        <li>Element B</li>
    </ol>

alt text

    <p><b>Llista Ordenada amb Tipus Personalitzat <i> Números Romans</i></b></p>
    <ol type="i">
        <li>Element I</li>
        <li>Element II</li>
    </ol>

alt text

    <!-- Llista Ordenada amb Valor Inicial -->
    <p><b>Llista Ordenada amb Valor Inicial</b></p>
    <ol start="5">
        <li>Element 5</li>
        <li>Element 6</li>
    </ol>

alt text

    <!-- Llista Ordenada amb Valor Específic per a un Element -->
    <p><b>Llista Ordenada amb Valor Específic per a un Element</b></p>
    <ol>
        <li>Un</li>
        <li value="50">Cinquanta</li>
        <li>Vint-i-dos</li>
    </ol>

Consideracions sobre les llistes

Ús Semàntic de les Llistes: Quan es dissenyen interfícies web, és recomanable utilitzar llistes per agrupar continguts relacionats, com menús o punts clau, per millorar la llegibilitat i l’accessibilitat.
Llistes Imbricades: És possible crear llistes imbricades (llistes dins de llistes) per representar estructures jeràrquiques de contingut.
Atributs HTML5: En HTML5, els atributs com type, start, i value són vàlids, però es recomana utilitzar CSS per a personalitzacions d’estil en lloc d’aquests atributs quan sigui possible.

Taules. Etiquetes i Atributs

Les taules en HTML s’utilitzen per estructurar i organitzar dades en format de files i columnes, sent útils per mostrar informació tabular de manera clara i estructurada.

alt text

Etiquetes per a Taules:

<table>: Defineix una taula.
<caption>: Proporciona un títol o llegenda per a la taula, generalment mostrada a sobre.
<tr>: Defineix una fila dins de la taula.
<th>: Defineix una cel·la d’encapçalament (capçalera) dins de la taula.
<td>: Defineix una cel·la de dades dins de la taula.

Exemple bàsic d’una taula:

<table border="1" width="250">
    <caption>Caption o Capçalera</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Fila 1, Cel·la 1</td>
        <td>Fila 1, Cel·la 2</td>
    </tr>
    <tr>
        <td>Fila 2, Cel·la 1</td>
        <td>Fila 2, Cel·la 2</td>
    </tr>
</table>

alt text

Fusió de Cel·les amb `colspan` i `rowspan`

Podem unir (fusionar) cel·les tant horitzontalment (files) com verticalment (columnes) amb els atributs colspan i rowspan. “stos atributs s’utilitzen amb <th> (cel·la de encapçalament) i <td> (cel·la de dades) amb l’objectiu de fusionar les cel·les:

colspan: Fusiona cel·les horitzontalment. Indica el número de columnes que ha d’ocupar la cel·la.

<td colspan="2">Aquesta cel·la ocupa dues columnes</td>
<th colspan="3">Capçalera ampliada</th>

rowspan: Fusiona cel·les verticalment. Indica el nombre de files que ha d’ocupar la cel·la.

<td rowspan="2">Aquesta cel·la ocupa dues files</td>
<th rowspan="3">Capçalera ampliada</th>

Exemple de Taula amb Fusió de Cel·les:

<table border="1" width="250">
    <caption>Exemple de Taula amb Fusió de Cel·les</caption>
    <tr>
        <th colspan="2">Capçalera Fusionada amb Colspan</th>
    </tr>
    <tr>
        <td rowspan="2">Fila 1 i Fila 2, Cel·la Fusionada amb Rowspan</td>
        <td>Fila 1, Cel·la 2</td>
    </tr>
    <tr>
        <td>Fila 2, Cel·la 2</td>
    </tr>
</table>

alt text

Divisió d’una Taula en Seccions

Les taules poden dividir-se en tres seccions amb <thead>, <tfoot> i <tbody>, millorant la llegibilitat i l’organització.

<thead>: Conté les capçaleres de la taula (files i cel·les).
<tfoot>: Conté els peus de taula. Aquesta secció ha d’aparèixer abans de <tbody> en l’estructura HTML.
<tbody>: Conté el cos principal de la taula amb les dades. S’usa per separar les capçaleres i peus de taula del contingut principal.

Exemple de Taula amb Seccions:

<table border="1">
    <thead>
        <tr>
            <th>Capçalera 1</th>
            <th>Capçalera 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2">Peu de la Taula</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Contingut 1</td>
            <td>Contingut 2</td>
        </tr>
        <tr>
            <td>Contingut 3</td>
            <td>Contingut 4</td>
        </tr>
    </tbody>
</table>

alt text

Principals Atributs per a Taules

A continuació es detallen els atributs més comuns per donar estil i format a les taules.

border: Estableix el grossor de les vores de la taula.
```
<table border="1">
```
width: Defineix l’amplada de la taula en píxels o percentatge.
```
<table width="100%">
```
cellpadding: Estableix l’espai interior de les cel·les respecte al seu contingut.
```
<table cellpadding="10">
```
cellspacing: Defineix l’espai entre les cel·les de la taula.
```
<table cellspacing="5">
```
summary: Proporciona una breu descripció del contingut de la taula per millorar l’accessibilitat.
```
<table summary="Descripció de la Taula">
```
align: Alinea la taula respecte al seu context (left, right, center).
```
<table align="center">
```
bgcolor: Estableix el color de fons de la taula.
```
<table bgcolor="#f2f2f2">
```
bordercolor: Defineix el color de les vores de la taula.
```
<table bordercolor="#333333">
```
class: Assigna una classe CSS a la taula per a estils addicionals.
```
<table class="taula-estil">
```
id: Assigna un identificador únic a la taula.
```
<table id="taula-principal">
```

Nota important: Alguns dels anteriors atributs són considerats obsolets en HTML5 perquè controlen l’estil. És recomanable fer servir CSS per a la presentació per seguir les bones pràctiques modernes.

Imatges en HTML. Etiquetes i Atributs.

HTML permet afegir imatges als documents amb l’etiqueta <img>, que és essencial per a millorar l’aspecte visual i la transmissió d’informació en les pàgines web.

Les imatges poden tenir funcions estètiques o de contingut informatiu, depenent de l’ús i la intenció.

Estructura Bàsica de l’Element <img>

L’etiqueta <img> és un element en línia i auto-tancat. Els atributs principals per a inserir una imatge són:

<img src="imatge.jpg" alt="Descripció de la imatge">

src: Especifica la ubicació o URL de l’arxiu d’imatge. Pot ser una ruta relativa o absoluta.
alt: Proporciona una descripció alternativa per a la imatge. Aquest text és fonamental per a l’accessibilitat i s’utilitza quan la imatge no es pot carregar.

Classificació de les Imatges

Les imatges en una pàgina web es poden classificar en dos grans tipus:

Imatges de Contingut:
- Són imatges essencials per a la comprensió del contingut de la pàgina.
- Aporten informació important que forma part del context i el missatge de la pàgina web.
- Es col·loquen directament amb l’etiqueta <img> i requereixen una descripció adequada en l’atribut alt.
Imatges d’Adornament:
- Són purament decoratives i no aporten informació essencial.
- Normalment es carreguen mitjançant CSS com a part del disseny de la pàgina.
- No necessiten descripció alt, ja que no són part de la informació central de la pàgina.

Exemples

Imatge de Contingut (HTML):

<img src="imatge_contingut.jpg" alt="Descripció detallada de la imatge que explica el seu significat">

Esta imatge forma part del contingut informatiu i inclou un text descriptiu en alt per a usuaris amb discapacitats visuals o quan la imatge no es carrega.

Imatge d’Adornament (CSS):

<style>
.imatge-adornament {
    background-image: url('imatge_adornament.jpg');
    width: 100px;
    height: 100px;
}
</style>

<div class="imatge-adornament"></div>

La imatge és decorativa i es carrega mitjançant CSS. No inclou descripció, ja que el seu objectiu és només millorar l’estètica de la pàgina.

Exemples Complets en HTML

Aquí tens un exemple complet que inclou tant una imatge de contingut amb <img> com una imatge d’adornament carregada amb CSS:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Imatges en HTML</title>
    <style>
        /* Estil per a la imatge d'adornament */
        .imatge-adornament {
            background-image: url('imatge_adornament.jpg');
            width: 150px;
            height: 150px;
            border: 2px solid #ddd;
            margin: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>

<h1>Exemple d'Imatges en HTML</h1>

<!-- Imatge de Contingut -->
<p>Aquesta és una imatge de contingut:</p>
<img src="imatge_contingut.jpg" alt="Un paisatge de muntanya amb arbres verds i un riu blau clar que travessa el camp">

<!-- Imatge d'Adornament -->
<p>Aquesta és una imatge d'adornament, carregada amb CSS:</p>
<div class="imatge-adornament"></div>

</body>
</html>

alt text

Atributs Addicionals per a Imatges

width i height: Defineixen l’amplada i altura de la imatge en píxels o percentatges.
title: Mostra un text en passar el ratolí per damunt de la imatge. Això és útil per a informació addicional o comentaris.
loading: Controla el comportament de la càrrega d’imatges. Els valors comuns són:
- lazy: Carrega l’imatge quan es troba pròxima a la visualització (optimitza el rendiment).
- eager: Carrega l’imatge immediatament (per a imatges importants).
srcset: Defineix múltiples versions d’una imatge per adaptar-se a dispositius de diferents resolucions.

<img src="imatge.jpg" srcset="imatge_1x.jpg 1x, imatge_2x.jpg 2x" alt="Imatge adaptativa">

Consells per l’Ús d’Imatges en HTML

Sempre usa una descripció alt significativa per millorar l’accessibilitat.
Evita carregar imatges d’adornament amb <img> i utilitza CSS per mantenir una separació entre el contingut i el disseny.
Utilitza atributs de càrrega (loading="lazy") per optimitzar el rendiment en pàgines amb moltes imatges.

Enllaços en HTML

Els enllaços són una de les característiques fonamentals d’HTML, ja que permeten connectar documents, recursos externs, o seccions dins del mateix document. Amb els enllaços, podem crear navegació entre pàgines web, accedir a altres tipus de recursos i organitzar la informació per facilitar-ne l’accés.

Tipus d’Enllaços

Enllaços a recursos externs: Utilitzats per incrementar les funcionalitats del document actual, com ara enllaçar a fulls d’estil CSS o scripts JavaScript.
Hipervincles: Permeten navegar a altres documents o seccions.

Etiquetes i Seccions per a Enllaços

En la secció <head>, utilitzem les etiquetes <link> i <script> per enllaçar recursos externs que s’han de carregar amb el document, com ara CSS i JavaScript.
En la secció <body>, fem servir l’etiqueta <a> per a enllaços visibles que es poden clicar i que apareixen com a part del contingut.

**Principals Atributs d’Enllaços ´´ i ´´**

href: Defineix la destinació de l’enllaç. Es col·loca a l’element <a> per enllaçar a una pàgina, fitxer o secció específica. Exemple:
```
<a href="https://exemple.com">Visita el nostre lloc</a>
```
rel: Especifica la relació entre el document actual i l’enllaç. Comú en enllaços a recursos externs en el <head>, especialment per CSS. Exemple:
```
<link rel="stylesheet" href="estil.css">
```

Ús de l’Etiqueta `<a>` per a Hipervincles

L’etiqueta <a> s’utilitza per crear diversos tipus d’enllaços. Alguns exemples:

Pàgines externes: Enllaçar amb una URL completa.

<a href="http://exemple.com">Visitar Exemple</a>

Pàgines internes (locals): Utilitzar un camí relatiu per enllaçar a altres pàgines dins del mateix lloc.
```
<a href="contacte.html">Contacte</a>
```
Enllaços a correu electrònic: Amb l’esquema mailto: es pot obrir l’aplicació de correu electrònic predeterminada.
```
<a href="mailto:contacte@exemple.com">Envia'ns un correu</a>
```
Marcadors interns (anclatges): Per enllaçar a una secció específica dins de la mateixa pàgina. Per fer-ho, afegeix un atribut id a l’element objectiu:
```
<h1 id="inici">Inici de la Pàgina</h1>
<a href="#inici">Tornar a l'inici</a>
```

Exemple marcadors interns:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'Anclatges Interns</title>
</head>
<body>

<!-- Enllaç a l'inici de la pàgina -->
<h1 id="inici">Inici de la Pàgina</h1>
<p>Aquesta és la secció d'inici de la pàgina. Pots utilitzar enllaços per saltar a diferents seccions més avall.</p>

<!-- Enllaços a seccions de la pàgina -->
<nav>
    <a href="#seccio1">Anar a la Secció 1</a> |
    <a href="#seccio2">Anar a la Secció 2</a> |
    <a href="#seccio3">Anar a la Secció 3</a>
</nav>

<!-- Secció 1 -->
<h2 id="seccio1">Secció 1</h2>
<p>Aquesta és la Secció 1 de la pàgina. Conté informació específica sobre el primer tema.</p>
<a href="#inici">Tornar a l'inici</a>

<!-- Secció 2 -->
<h2 id="seccio2">Secció 2</h2>
<p>Aquesta és la Secció 2 de la pàgina. Aquí trobaràs informació sobre el segon tema.</p>
<a href="#inici">Tornar a l'inici</a>

<!-- Secció 3 -->
<h2 id="seccio3">Secció 3</h2>
<p>Aquesta és la Secció 3 de la pàgina. Aquesta part cobreix el tercer tema.</p>
<a href="#inici">Tornar a l'inici</a>

</body>
</html>

alt text —

Enllaços a Recursos Externs en el <head>

Podem establir enllaços a recursos externs com CSS i JavaScript directament dins de la secció <head>, perquè es carreguin automàticament quan el navegador obre la pàgina.

L’etiqueta <link>: S’utilitza per enllaçar fulls d’estil CSS.
```
<link rel="stylesheet" href="estils.css">
```
L’etiqueta <script>: Per incloure codi JavaScript. Aquest codi pot estar dins del document o enllaçat des d’un fitxer extern.
```
<script src="script.js"></script>
```

Atributs Addicionals de l’Etiqueta <a>

target: Indica com s’ha d’obrir l’enllaç. Alguns valors comuns:
- _self: Obre l’enllaç a la mateixa pestanya (predeterminat).
- _blank: Obre l’enllaç en una nova pestanya o finestra.
```
<a href="https://exemple.com" target="_blank">Obrir en una nova pestanya</a>
```
title: Mostra un text en passar el ratolí sobre l’enllaç, útil per proporcionar més informació.
```
<a href="https://exemple.com" title="Visita Exemple">Exemple</a>
```

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Enllaços en HTML</title>

    <!-- Enllaç a un full d'estil CSS -->
    <link rel="stylesheet" href="estils.css">

    <!-- Enllaç a un arxiu javaScript -->
    <script src="script.js"></script>
</head>
<body>

<h1>Exemple d'Enllaços</h1>

<!-- Enllaç extern -->
<p><a href="https://exemple.com" target="_blank" title="Obre en una nova pestanya">Visita el nostre lloc web</a></p>

<!-- Enllaç intern a una altra pàgina -->
<p><a href="contacte.html">Pàgina de contacte</a></p>

<!-- Enllaç a correu electrònic -->
<p><a href="mailto:contacte@exemple.com">Envia'ns un correu</a></p>

<!-- Marcador intern dins de la pàgina -->
<h2 id="seccio">Secció Específica</h2>
<p>Aquesta és una secció a la qual podem accedir directament amb un marcador intern.</p>
<p><a href="#seccio">Torna a aquesta secció</a></p>

</body>
</html>

En resum

Ús de CSS per Estilitzar Enllaços: Els enllaços es poden personalitzar amb CSS per modificar els colors, subratllats i estats (hover, visited, etc.).
Accessibilitat: És recomanable utilitzar l’atribut title per oferir més context a persones amb discapacitat visual.
SEO: Els enllaços també són importants per a la navegació i millorar el posicionament SEO, sobretot els enllaços a recursos externs i interns ben estructurats.

Formularis en HTML

Els formularis HTML són una part essencial de les pàgines web interactives, ja que permeten als usuaris enviar i rebre dades a través de la web. Aquesta interacció és bàsica per a la recopilació d’informació, com ara registres d’usuaris, enquestes, pagaments en línia i altres interaccions. En definitiva, els formularis permeten als usuaris interactuar amb les pàgines i aplicacions web.

Un formulari HTML és un conjunt d’elements, com etiquetes i atributs, que treballen junts per aconseguir aquesta funcionalitat. Un formulari consta de mecanismes que permeten a l’usuari respondre a preguntes. L’usuari pot escriure informació en caixes de text, seleccionar opcions disponibles, triar d’una llista i utilitzar botons que envien la informació.

L’element clau d’un formulari és <form></form>, que envolta tots els altres elements del formulari.

L’element <input> és el més utilitzat i pot mostrar diferents tipus d’entrades segons l’atribut type (camps de text, botons, llistes, etc.).

<body>
    <form action="saluda.php" method="post">
        Posa aquí el teu nom: <input type="text" name="nom" value="" /> <br/>
        <input type="submit" value="Enviar" />
    </form>
</body>

alt text

Atributs principals de <form>

action: Defineix on s’enviaran les dades del formulari.
method: Especifica la forma d’enviar les dades al destí, generalment amb els mètodes HTTP get o post.
- GET: Utilitzat per a sol·licituds que no modifiquen dades al servidor. Les dades són visibles a la URL.
- POST: Més segur, s’utilitza per sol·licituds que poden modificar dades o quan cal transmetre molta informació.

Exemple GET

<form action="/processar" method="get">
    <input type="text" name="usuari" value="Jaume">
    <input type="submit" value="Enviar">
</form>

alt text

Les dades s’adjunten a la URL com a cadena de consulta, visible a la barra d’adreces del navegador: http://localhost:8080/processar?usuari=Jaume

Exemple POST

<form action="/processar" method="post">
    <input type="text" name="usuari" value="Jaume">
    <input type="submit" value="Enviar">
</form>

alt text

Les dades s’envien a través de l’encapçalament de la sol·licitud HTTP i no són visibles a la URL.

Nota:

Mètodes HTTP (HTTP verbs)

Els mètodes HTTP són instruccions que especifiquen l’acció a realitzar en un recurs del servidor.

Principals mètodes HTTP:

GET: Sol·licita dades d’un recurs específic. Les dades solen ser incloses a la URL com a paràmetres de consulta.
POST: Envia dades per a ser processades. Estes dades es solen enviar a través del cos de la sol·licitud. És un mètode molt comú en els formularis web
PUT: Actualitza o crea un recurs. El cos de la sol·licitud conté les dades que s’han d’actualitzar o afegir.
DELETE: Elimina un recurs específic al servidor. La sol·licitud pot o no, contenir dades per a indicar quin recurs s’ha de suprimir.

Etiqueta `<label>` en HTML

L’etiqueta <label> millora l’accessibilitat i facilita la interacció entre els usuaris i els elements del formulari. Aquesta etiqueta serveix per associar una descripció o nom a un element de formulari, com un camp de text o una caixa de selecció, ajudant a identificar què s’espera que introduïsca l’usuari.

Estructura bàsica de `<label>`

L’etiqueta <label> es pot utilitzar de dues maneres principals:

Envoltant l’element de formulari
Utilitzant l’atribut for

Exemple Envoltant l’element de formulari

<form action="/processar" method="post">
    <label>
        Nom:
        <input type="text" name="nom">
    </label>
    <input type="submit" value="Enviar">
</form>

En aquest cas, l’etiqueta <label> envolta l’element del formulari (<input>), relacionant automàticament el text “Nom:” amb el camp de text.

Exemple 2: Utilitzant l’atribut `for`

<form action="/processar" method="post">
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom">
    <input type="submit" value="Enviar">
</form>

Aquí, l’atribut for de <label> està associat amb l’atribut id de l’element del formulari (<input>). Aquesta relació permet que quan un usuari faça clic en el text “Nom:”, el camp de text relacionat reba el focus automàticament.

Exemple combinat

<form action="/processar" method="post">
    <label for="usuari">Nom d'usuari:</label>
    <input type="text" id="usuari" name="usuari">
    <label for="correu">Correu electrònic:</label>
    <input type="email" id="correu" name="correu">
    <input type="submit" value="Registrar">
</form>

Nota: Sempre que es cree un formulari, és recomanable utilitzar etiquetes <label> per assegurar una experiència d’usuari òptima i complir amb els estàndards d’accessibilitat.

Formularis – Paràmetres de `<input>`

<input> defineix un punt d’entrada de dades, sovint acompanyat per una etiqueta <label>. Atributs comuns de <input>:

type: Indica el tipus de control, es a dir, quin component anem a usar (“text”, “button”, “radio”, etc.).
name: Nom del camp per identificar les dades. Este atribut és essencial per identificar les dades enviades quan es completa i envia el formulari. Cada element d’entrada ha de tenir un nom únic dins del formulari.
value: Estableix el valor inicial o predeterminat d’un element d’entrada. Aquest valor és el que es processarà si l’usuari no introdueix cap valor diferent.

Principals tipus de l’atribut type:

text: Camp d’entrada de text d’una línia.
password: Camp de contrasenya d’una línia.
checkbox: Casella de selecció binària.
radio: Botó d’opció.
file: Permet seleccionar un fitxer.
number: Entrada numèrica.
email: Mostra un camp d’entrada per a adreces d’email.
url: Mostra un camp d’entrada per a URL.
date: Permet a l’usuari seleccionar una data.
time: Permet a l’usuari seleccionar una hora.
color: Per seleccionar un color

alt text

Exemple amb text, password i submit

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Input Types</title>
</head>
<body>
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom" placeholder="Introdueix el teu nom"><br>

    <label for="contrasenya">Contrasenya:</label>
    <input type="password" id="contrasenya" name="contrasenya" placeholder="Introdueix la teva contrasenya"><br>

    <input type="submit" value="Enviar">
    <input type="reset" value="Reiniciar">
</body>
</html>

alt text

Botons en HTML

Podem mostrar botons amb :

submit: Envia les dades del formulari.
button: Botó personalitzat.
reset: Reinicia el formulari.
image: Botó d’imatge.
file: Permet seleccionar un fitxer.

Exemple de botons image i file

<!-- Input de tipus Image -->
<form action="/submit" method="post">
    <label for="imatge">Botó d'Imatge:</label>
    <input type="image" src="foto.png" alt="Enviar" id="imatge">
</form>

<!-- Input de tipus File -->
<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="arxiu">Selecciona un arxiu:</label>
    <input type="file" id="arxiu" name="arxiu">
    <input type="submit" value="Enviar">
</form>

<!-- Altres botons -->
 <form>
    <input type="submit" value="Enviar">
    <input type="reset" value="Restablir">
    <button type="button">Botó Personalitzat</button>
</form>

alt text

Exemple amb radio, checkbox i submit

<form action="/action_page.php">
    <!-- Opcions de tipus Radio -->
    <input type="radio" name="genere" id="home" value="home">
    <label for="home"> Home</label><br>

    <input type="radio" name="genere" id="dona" value="dona">
    <label for="dona"> Dona</label><br>

    <input type="radio" name="genere" id="altres" value="altres">
    <label for="altres"> Altres</label><br>

    <!-- Caselles de verificació tipus Checkbox -->
    <input type="checkbox" name="preferencia" id="noticies" value="noticies">
    <label for="noticies"> Notícies</label><br>

    <input type="submit" value="Enviar">
</form>

alt text

Evidentment, podem posar formats (style) i altres etiquetes per millorar l’aspecte com ara <fieldset> i <legend>:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Opcions</title>
    <style>
        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<!-- Opcions de tipus Radio -->
<fieldset>
    <legend>Gènere:</legend>
    <label>
        <input type="radio" name="genere" value="home"> Home
    </label>

    <label> <input type="radio" name="genere" value="dona"> Dona </label>

</fieldset>

<!-- Caselles de verificació tipus Checkbox -->
<fieldset>
    <legend>Preferències:</legend>
    <label>
        <input type="checkbox" name="preferencia" value="noticies"> Notícies
    </label>
    <label>
        <input type="checkbox" name="preferencia" value="esports"> Esports
    </label>
    <label>
        <input type="checkbox" name="preferencia" value="entreteniment"> Entreteniment
    </label>
</fieldset>

<!-- Botó d'enviament -->
<input type="submit" value="Enviar">

</body>
</html>

En este exemple hem usat <fieldset> i <legend> per enmarcar el tipus radio i checkbox amb una llegenda que els identifica També envoltem <input> amb <label>

alt text

Exemple amb number i range

<body>

<!-- Camp de tipus Number -->
<label for="edat">Edat (entre 18 i 99): </label>
<input type="number" name="edat" id="edat" min="18" max="99"><br>

<!-- Camp de tipus Range -->
<label for="volum">Volum (entre 0 i 50):</label>
<input type="range" name="volum" id="volum" min="0" max="50" step="1"><br>

<!-- Botó d'enviament -->
<input type="submit" value="Enviar">

</body>

alt text

Exemple amb date i file

<body>

<!-- Camp de tipus Date -->
<label for="dataNaixement">Data de Naixement:</label>
<input type="date" name="dataNaixement" id="dataNaixement"><br>

<!-- Camp de tipus File -->
<label for="fitxer">Pujar Fitxer:</label>
<input type="file" name="fitxer" id="fitxer"><br>

<!-- Botó d'enviament -->
<input type="submit" value="Enviar">

</body>

alt text

Formularis – Altres Etiquetes

<textarea> s’utilitza per a àrees de text grans, com ara comentaris o descripcions.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de TextArea</title>
    <style>
        label {
            display: block;
            margin-bottom: 10px;
        }

        textarea {
            width: 300px;
            height: 100px;
            padding: 5px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<!-- Camp de tipus TextArea -->
<label for="comentaris">Comentaris:</label>
<textarea name="comentaris" id="comentaris" placeholder="Escriu aquí els teus comentaris..."></textarea><br>

<!-- Botó d'enviament -->
<input type="submit" value="Enviar">

</body>
</html>

alt text

<select> i <option> s’utilitzen per crear llistes desplegables.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Select i Options</title>
    <style>
        label {
            display: block;
            margin-bottom: 10px;
        }

        select {
            width: 200px;
            padding: 5px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<!-- Camp de tipus Select amb Options -->
<label for="poblacio">Selecciona una població:</label>
<select name="poblacio" id="poblacio">
    <option value="La Vall d'Uixó">La Vall d'Uixó</option>
    <option value="Nules">Nules</option>
    <option value="La Vila Vella">La Vila Vella</option>
    <option value="Burriana">Burriana</option>
    <option value="Sagunt">Sagunt</option>
</select><br>

<!-- Botó d'enviament -->
<input type="submit" value="Enviar">

</body>
</html>

alt text

ANNEX: Atributs

Principals atributs de `<form>`

Atribut	Descripció	Valors que Pot Pendre
action	Especifica la URL del servidor o script que processarà les dades del formulari quan s’envie.	URL (absoluta o relativa)
method	Determina el mètode HTTP utilitzat per enviar les dades del formulari al servidor.	`get` (per defecte) o `post`
target	Indica on s’obrirà la resposta del servidor després d’enviar les dades del formulari.	`_blank`: En una nova finestra o pestanya. `_self`: En la mateixa finestra o pestanya. `_parent`: En el marc superior. `_top`: En la finestra superior (fora de tots els marcs). O un nom de finestra o `frame`.
enctype	Especifica la codificació de les dades del formulari abans d’enviar-les al servidor.	`application/x-www-form-urlencoded`: Dades codificades com a URL (per defecte). `multipart/form-data`: Per a l’enviament de fitxers i dades binàries. `text/plain`: Dades de text sense cap codificació especial.
autocomplete	Determina si el navegador pot completar automàticament els camps del formulari.	`on` o `off`
novalidate	Indica al navegador que no validi els camps del formulari abans de l’enviament.	No té cap valor; simplement apareixent ja activa l’opció.
accept-charset	Especifica la codificació de caràcters que s’utilitzarà quan s’enviïn les dades del formulari.	Noms de conjunts de caràcters, com `UTF-8`, `ISO-8859-1`, etc.

Atributs de `<input>`

Atribut	Descripció	Valors que pot pendre
type	Indica el tipus d’input.	`text`, `password`, `checkbox`, `radio`, `file`, `number`, etc.
placeholder	Proporciona un text de suggeriment.	Qualsevol text.
required	Obliga a omplir el camp abans d’enviar el formulari.	(Sense valor) o `required`.
disabled	Desactiva l’input, impedint editar-lo.	(Sense valor) o `disabled`.
readonly	Fa que l’input sigui de només lectura.	(Sense valor) o `readonly`.
size	Controla la mida visible de l’input.	Número enter (amplada en caràcters).
maxlength	Estableix la longitud màxima de l’input.	Número enter (màxim nombre de caràcters).
min	Estableix el valor mínim per a inputs numèrics.	Valor numèric (per exemple, `min="0"`).
max	Estableix el valor màxim per a inputs numèrics.	Valor numèric.
step	Estableix l’increment per a inputs numèrics.	Valor numèric (per exemple, `step="5"`).

Etiquetes de Vídeo i Àudio

Vídeos

Les etiquetes <iframe>, <video>, i <track> són utilitzades per mostrar vídeos amb opcions per a subtítols incrustats i altres característiques de reproducció.

<iframe>: S’utilitza per incrustar contingut extern, com ara vídeos de plataformes com YouTube o Vimeo. Aquesta etiqueta permet inserir contingut en una pàgina web de manera fàcil.
- Exemple:
```
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_DE_VIDEO" title="Video de YouTube" frameborder="0" allowfullscreen></iframe>
```
<video>: S’utilitza per reproduir arxius de vídeo directament en una pàgina web, amb opcions per a controls, subtítols, i configuració de la reproducció.
- Principals atributs:
  - controls: Mostra els controls de reproducció per a l’usuari (play, pause, volum, etc.).
  - autoplay: Reprodueix el vídeo automàticament quan es carrega la pàgina (pot ser limitat per navegadors).
  - loop: Fa que el vídeo es reprodueixi en bucle.
  - muted: Fa que el vídeo es reprodueixi sense so inicialment.
  - poster: Especifica una imatge de portada que apareix abans de començar la reproducció del vídeo.
- Exemple:
```
<video width="320" height="240" controls poster="imatge.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    El teu navegador no suporta l'element de vídeo.
</video>
```
<track>: S’usa dins de <video> o <audio> per afegir subtítols, descripcions, o altres pistes de text. És útil per a l’accessibilitat.
- Principals atributs:
  - kind: Defineix el tipus de pista (subtitles, captions, descriptions, etc.).
  - src: Ruta de l’arxiu de subtítols (per exemple, un fitxer .vtt).
  - srclang: Idioma de la pista (per exemple, en per anglès).
  - label: Nom de la pista per identificar-la.
- Exemple:
```
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitols.vtt" srclang="ca" label="Català">
    El teu navegador no suporta l'element de vídeo.
</video>
```

Àudio

L’etiqueta <audio> s’utilitza per incorporar contingut d’àudio en una pàgina web. Aquesta etiqueta permet reproduir arxius d’àudio com .mp3 o .ogg.

Principals atributs:
- controls: Mostra els controls de reproducció per a l’usuari.
- autoplay: Fa que l’àudio es reprodueixi automàticament en carregar-se la pàgina.
- loop: Fa que l’àudio es reprodueixi en bucle.
- muted: Reprodueix l’àudio sense so.

Exemple:

  <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
      <source src="audio.ogg" type="audio/ogg">
      El teu navegador no suporta l'element d'àudio.
  </audio>

Cos del document <body> </body>

Capçaleres

Paràgrafs

Formats

Citacions

Abreviacions i Definicions <abbr> <dfn>

Text Preformatat <pre> <code>

Llistes d’Elements

Taules. Etiquetes i Atributs

Fusió de Cel·les amb colspan i rowspan

Divisió d’una Taula en Seccions

Imatges en HTML. Etiquetes i Atributs.

Enllaços en HTML

Ús de l’Etiqueta <a> per a Hipervincles

Formularis en HTML

Etiqueta <label> en HTML

Estructura bàsica de <label>

Exemple Envoltant l’element de formulari

Exemple 2: Utilitzant l’atribut for

Exemple combinat

Formularis – Paràmetres de <input>

Botons en HTML

Formularis – Altres Etiquetes

ANNEX: Atributs

Principals atributs de <form>

Atributs de <input>

Etiquetes de Vídeo i Àudio

Vídeos

Àudio

Cos del document `<body> </body>`

Abreviacions i Definicions `<abbr>` `<dfn>`

Text Preformatat `<pre>` `<code>`

Fusió de Cel·les amb `colspan` i `rowspan`

Ús de l’Etiqueta `<a>` per a Hipervincles

Etiqueta `<label>` en HTML

Estructura bàsica de `<label>`

Exemple 2: Utilitzant l’atribut `for`

Formularis – Paràmetres de `<input>`

Principals atributs de `<form>`

Atributs de `<input>`