Apunts

Apunts Primer Trimestre

Apunts HTML5


1. Estructura del Document

Etiquetes principals

  • <html>: L'arrel del document.
  • <head>: Informació tècnica (metadades, títol, CSS) que no es veu al navegador.
    <head>...</head>
  • <body>: El cos de la pàgina, on va tot el contingut visible.
    <body>...</body>
2. Text i Format

Títols (Headings)

De més important (h1) a menys important (h6).

H1 - Títol Principal

H2 - Subtítol

H3 - Secció

Paràgrafs i Salts

Això és un paràgraf amb l'etiqueta <p>.

Això és un text amb un salt de línia
fet amb l'etiqueta <br>.

Ressaltat

Podem fer servir <mark> per subratllar text important.

També tenim negreta (<strong>) i cursiva (<em>).

Separadors

La línia de sota és un <hr>:


3. Enllaços i Multimèdia

Enllaços (Anchors)

Per anar a Google: Fes clic aquí (s'obre en nova pestanya).

Imatges

Imatge inserida amb <img>:

Imatge pato

Àudio

Reproductor d'àudio natiu:

Vídeo

Reproductor de vídeo extern:

4. Llistes

Llista Desordenada (<ul>)

  • Element 1
  • Element 2
  • Element 3

Llista Ordenada (<ol>)

  1. Primer pas
  2. Segon pas
  3. Tercer pas

Llista de Definició (<dl>)

HTML
HyperText Markup Language.
CSS
Cascading Style Sheets.
5. Taules

Etiquetes de Taules

<table>
Contenidor principal que defineix la taula.
<tr> (Table Row)
Defineix una fila horitzontal de cel·les.
<th> (Table Header)
Defineix una cel·la de capçalera (text en negreta i centrat per defecte).
<td> (Table Data)
Defineix una cel·la estàndard amb dades.
<thead>, <tbody>, <tfoot>
Etiquetes semàntiques per agrupar la capçalera, el cos i el peu de la taula respectivament.

Exemple visual

Producte Preu Estoc
Teclat 20€ 15
Ratolí 10€ 50
Total productes 65
6. Formularis

Etiquetes de Formularis

<form>
Defineix el formulari. Usa els atributs action (on s'envia) i method (GET/POST).
<input>
L'element més versàtil. El seu comportament depèn de l'atribut type (text, password, email, number, date...).
<label>
Etiqueta de text per a un input. S'ha de vincular usant l'atribut for amb l'id de l'input.
<textarea>
Camp de text multilínia per a comentaris llargs.
<select> i <option>
Crea una llista desplegable d'opcions.
<button>
Botó per enviar el formulari (type="submit") o netejar-lo (type="reset").

Exemple visual

Registre d'usuari