Tenint unes nocions bàsiques del llenguatge HTML, hauríem de saber que les pàgines HTML es divideixen en dues parts: la capçalera i el cos. La capçalera inclou informació sobre la mateixa pàgina, com per exemple el seu títol i el seu idioma. El cos de la pàgina inclou tots els seus continguts, com paràgrafs de text i imatges.
El cos (anomenat body en anglès) conté tot el que l'usuari veu a la seva pantalla i la capçalera (anomenada head en anglès) conté tot el que no es veu (amb l'única excepció del títol de la pàgina, que els navegadors mostren com a títol de les seves finestres).
Normes:
- Les etiquetes s'han de tancar d'acord amb com s'obren.
- Els noms de les etiquetes i atributs sempre s'escriuen en minúscules.
- El valor dels atributs sempre es posa entre cometes.
- Els atributs no es poden comprimir.
- Totes les etiquetes s'han de tancar sempre
L'etiqueta <br> per exemple, s'utilitza per indicar el començament d'una nova línia, tal com es veurà més endavant. Per les seves característiques, l'etiqueta <br> mai no conté cap contingut de text.
En lloc d'obrir i tancar de forma consecutiva l'etiqueta (<br></br>) es pot utilitzar la sintaxi <br/> per indicar que és una etiqueta buida que s'obre i es tanca en aquest mateix punt.
A més, en xhtml...
- Abans d'accedir al valor d'un atribut, s'eliminen tots els espais en blanc que es troben abans i després del valor. A més, s'eliminen tots els espais en blanc de més dins del valor d'un atribut. En altres paraules, si a l'interior d'un atribut s'inclouen diversos espais en blanc seguits, s'eliminen tots excepte un únic espai en blanc utilitzat per separar les diferents paraules.
- En parlar de l'etiqueta
<script>, el codi JavaScript s'ha d'incloure entre unes etiquetes especials ( <![CDATA[ i ]]> ) per evitar que el navegador interpreti de forma errònia caràcters com & i < .
- Les pàgines XHTML han de prescindir de l'atribut name per identificar de forma única els elements. En el seu lloc, sempre s'ha d'utilitzar l'atribut id. De fet, en la versió 1.0 de l'estàndard XHTML, l'atribut name s'ha declarat obsolet per a les etiquetes a , applet , form , frame , iframe , img i map.
Conceptes
<html>
: indica el començament i el final d'un document HTML
<head>
: delimita la part de la capçalera del document.
<body>
: delimita el cos del document HTML.
Els elements en línia definits per HTML són: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Els elements de bloc definits per HTML són: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
Els següents elements també es considera que són de bloc: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
Els següents elements poden ser en línia i de bloc segons les circumstàncies: button, del, iframe, ins, map, object, script.
Atributs bàsics
- id=”texto” : Estableix un identificador únic a cada element dins d'una pàgina HTML
- : Estableix la classe CSS que s'aplica als estils de l'element.
- style=”texto” : Estableix de forma directa els estils CSS d'un element.
- title="texto" : Estableix el títol a un element (millora l'accessibilitat i els navegadors el mostren quan l'usuari passa el ratolí per sobre de l'element)
Atributs per a la internacionalització
- lang = "codigo de idioma" : Indica l'idioma de l'element mitjançant un codi predefinit.
- xml:lang = "codigo de idioma" : Indica l'idioma de l'element mitjançant un codi predefinit
- dir : Indica la direcció del text (útil per als idiomes que s'escriuen de dreta a esquerra)
Atributs d'esdeveniments
- Onblur: Desseleccionar el text.
- Onchange: Desseleccionar un element que s'ha modificat.
- Onclick: Fer clic i ansoltar el ratolí
- Ondblclick: Fer doble clic seguit amb el ratolí.
- Onfocus: Seleccionar un element.
- Onkeydown: Premre una tecla (sense ansoltar).
- Onkeypress: Premre una tecla.
- Onkeyup: Ansoltar una tecla premuda
- Onload: La pàgina s'ha carregat completament.
- Onmousedown: Premre (sense ansoltar) un botó del ratolí.
- Onmouseout: El ratolí "surt" de l'element (passa per sobre d'un altre element)
- Onmouseover: El ratolí "entra" a l'element (passa per sobre de l'element)
- Onmouseup: Ansoltar el botó que estava premut al ratolí.
- Onreset: Inicialitzar el formulari (esborrar totes les seves dades).
- Onresize: S'ha modificat la mida de la finestra del navegador.
- Onselect: Seleccionar un text.
- Onsubmit: Enviar el formulari.
- Onunload: S'abandona la pàgina (per exemple en tancar el navegador).
Atributs de foc:
- accesskey = "letra" : Estableix una tecla d'accés ràpid a un element HTML
- tabindex = "numero" : Estableix la posició de l'element en l'ordre de tabulació de la pàgina. El seu valor ha d'estar comprès entre 0 i 32.767
- onfocus, onblur : Controlen els esdeveniments JavaScript que s'executen quan l'element obté o perd el foc
Elements:
| Element | Definició | Atributs comuns | Tipus d'element | Atributs propis |
|---|---|---|---|---|
<p> | Delimita el contingut d'un paràgraf de text | Bàsics, internacionalització i esdeveniments | Bloc | - |
<h1> ... <h6> | Defineix els títols de les seccions de més importància de la pàgina. | Defineix els títols de les seccions de més importància de la pàgina | Bloc | - |
<em> | Realça la importància del text que encercla (cursiva) | Bàsics, internacionalització i esdeveniments | En línia | - |
<strong> | Realça amb la màxima importància el text que encercla (negreta) | Bàsics, internacionalització i esdeveniments | En línia | - |
<ins> | S'empra per marcar una modificació en els continguts originals consistent en la inserció d'un nou contingut | bàsics, internacionalització i esdeveniments | Bloc i en línia | cite = "url" → Indica la URL de la pàgina en la qual es pot obtenir més informació. datetime = "fecha" → Especifica la data i hora en què es va realitzar el canvi |
<del> | S'empra per marcar una modificació en els continguts originals consistent en l'esborrat de cert contingut | Bàsics, internacionalització i esdeveniments | Bloc i en línia | - cite = "url" - datetime = "fecha" |
<blockquote> | S'empra per indicar que el text que encercla és una cita textual d'un altre text extern | Bàsics, internacionalització i esdeveniments | Bloc | - cite = "url" |
<abbr> | S'empra per marcar les abreviatures del text i proporcionar el significat d'aquestes abreviatures | Bàsics, internacionalització i esdeveniments | En línia | - title = "texto" Indica el significat complet de l'abreviatura |
<acronym> | S'empra per marcar les sigles o acrònims del text i proporcionar el significat d'aquestes sigles | Bàsics, internacionalització i esdeveniments | En línia | - title = "texto" |
<dfn> | S'empra per marcar les definicions de certs termes i proporcionar el significat d'aquests termes | Bàsics, internacionalització i esdeveniments | En línia | - Title = "texto" |
<cite> | S'empra per marcar una cita o una referència a altres fonts | Bàsics, internacionalització i esdeveniments | En línia | - |
<br> o (<br />) | Força el navegador a inserir una nova línia | Bàsics | En línia i etiqueta buida | - |
<pre> | Mostra el text que encercla tal com està escrit (respectant els espais en blanc) | Bàsics, internacionalització i esdeveniments | Bloc | - |
<code> | Delimita el text considerat un fragment de codi font | Bàsics, internacionalització i esdeveniments | En línia | - |
<a> | S'empra per enllaçar tot tipus de recursos | bàsics, internacionalització, esdeveniments i foc | En línia | - name = "texto" - href = "url" - hreflang = "codigo_idioma" - type = "tipo_de_contenido" - rel = "tipo_de_relacion" - rev = "tipo_de_relacion" - charset = "tipo_de_charset" |
<script> | S'empra per enllaçar o definir un bloc de codi (normalment JavaScript) | - | Bloc i en línia (també pot ser una etiqueta buida) | - src = "url" - type = "tipo_de_contenido" - defer = "defer" - charset = "tipo_de_charset" |
<link> | S'empra per enllaçar i establir relacions entre el document i altres recursos | Bàsics, internacionalització i esdeveniments | Etiqueta buida | - charset, href, hreflang, type, rel i rev - media = "tipo_de_medio" |
<ul> | S'empra per definir llistes no ordenades | Bàsics, internacionalització i esdeveniments | Bloc | - |
<li> | S'empra per definir els elements de les llistes (ordenades i no ordenades) | Bàsics, internacionalització i esdeveniments | Bloc | - |
<ol> | S'empra per definir llistes ordenades | Bàsics, internacionalització i esdeveniments | Bloc | - |
<dl> | S'empra per definir llistes de definició | Bàsics, internacionalització i esdeveniments | Bloc | - |
<dt> | S'empra per definir els termes dels elements d'una llista de definició | Bàsics, internacionalització i esdeveniments | Bloc | - |
<dd> | Per indicar les definicions dels elements d'una llista de definició | Bàsics, internacionalització i esdeveniments | Bloc | - |
<img> | S'empra per incloure imatges en els documents | bàsics, internacionalització i esdeveniments | En línia i etiqueta buida | - src = "url" - alt = "texto" - longdesc = "url" - name = "texto" - height = "unidad_de_medida" - width = "unidad_de_medida" |
<map> | S'empra per definir mapes d'imatge | Bàsics, internacionalització i esdeveniments | Bloc i en línia | - name = "texto" |
<area> | S'empra per definir les diferents àrees que formen un mapa d'imatge | Bàsics, internacionalització, esdeveniments i foc | Etiqueta buida | - href = "url" - nohref = "nohref" - shape = "default | rect | circle | poly" - coords = "llista de números" |
<object> | S'empra per incrustar objectes en els documents | Bàsics, internacionalització i esdeveniments | Bloc i en línia | - data = "url" - classid, codebase, codetype - type - height = "unidad_de_medida" - width = "unidad_de_medida" |
<param> | S'empra per indicar el valor dels paràmetres de l'objecte | id | Etiqueta buida | - name = "texto" - value = "texto" |
<embed> | S'empra per incrustar objectes en els documents | Bàsics, internacionalització i esdeveniments | Bloc | - src = "url" - type = "tipo_de_contenido" - height = "unidad_de_medida" - width = "unidad_de_medida" |
<table> | S'empra per definir taules de dades | Bàsics, internacionalització i esdeveniments | Bloc | - summary = "texto" |
<tr> | S'empra per definir cada fila de les taules de dades | Bàsics, internacionalització i esdeveniments | Bloc | - |
<td> | S'empra per definir cadascuna de les cel·les que formen les files d'una taula, és a dir, les columnes de la taula | Bàsics, internacionalització i esdeveniments | Bloc | - abbr = "texto" - headers = "lista_de_id" - scope = "col, row, colgroup, rowgroup" - colspan = "numero" - rowspan = "numero" |
<th> | S'empra per definir les cel·les que són capçalera d'una fila o d'una columna de la taula | Bàsics, internacionalització i esdeveniments | Bloc | - abbr = "texto" - headers = "lista_de_id" - scope = "col, row, colgroup, rowgroup" - colspan = "numero" - rowspan = "numero" |
<caption> | S'empra per definir la llegenda o títol d'una taula | Bàsics, internacionalització i esdeveniments | En línia | - |
<thead> <tbody> <tfoot> | S'empren per agrupar diverses files en una capçalera (thead) un peu (tfoot) o una secció (tbody) d'una taula | Bàsics, internacionalització i esdeveniments | Bloc | - |
<form> | S'empra per inserir un formulari a la pàgina | Bàsics, internacionalització i esdeveniments | Bloc | - action = "url" - method = "POST o GET" - enctype = "application/x-www-form-urlencoded o multipart/form-data" - accept = "tipo_de_contenido" - Altres: accept-charset, onsubmit, onreset |
<input> | S'empren per inserir un control en un formulari | Bàsics, internacionalització, esdeveniments i foc | En línia i etiqueta buida | - type = "tipo" - name = "texto" - value = "texto" - Valor inicial del control - size = "unidad_de_medida" - maxlength = "numero" - checked = "checked" - disabled = "disabled" - readonly = "readonly" - src = "url" - alt = "texto" |
<fieldset> | S'empra per agrupar de forma lògica diversos camps d'un formulari | Bàsics, internacionalització i esdeveniments | Bloc | - |
<legend> | S'empra per definir el títol o llegenda d'un conjunt de camps de formulari agrupats amb l'etiqueta fieldset | Bàsics, internacionalització i esdeveniments | En línia | - |
<label> | S'empra per definir el títol o llegenda dels camps definits en un formulari | Bàsics, internacionalització i esdeveniments | En línia | - for = "id_de_elemento" - Indica l'ID del camp del formulari per al qual aquest element és el seu títol - Altres: accesskey, onfocus i onblur |
<textarea> | S'empra per incloure una àrea de text en un formulari | Bàsics, internacionalització, esdeveniments i foc | En línia | - rows = "numero" - cols = "numero" - Altres: name, disabled, readonly, onselect, onchange, onfocus, onblur |
<select> | S'empra per incloure una llista desplegable en un formulari | Bàsics, internacionalització i esdeveniments | En línia | - size = "numero" - multiple = "multiple" - Altres: name, disabled, onchange, onfocus, onblur |
<option> | S'empra per definir cada element d'una llista desplegable | Bàsics, internacionalització i esdeveniments | - | - selected = "selected" - value = "texto" - Altres: label, disabled |
<optgroup> | S'empra per definir una agrupació lògica d'opcions d'una llista desplegable | Bàsics, internacionalització i esdeveniments | - | - label = "texto" - Altres: disabled, selected |
<div> | Agrupa elements de bloc | Bàsics, internacionalització i esdeveniments | Bloc | - |
<head> | Defineix la capçalera del document HTML | Internacionalització | </td> <td width="26%"> - profile = "url" - lang = "codigo_de_idioma" | |
<title> | Defineix el títol del document HTML | Internacionalització | </td> <td width="26%"> - lang = "codigo_de_idioma" | |
<meta> | Permet definir el valor de les metadades que formen la metainformació del document | Internacionalització | </td> <td width="26%"> - name = "texto" - content = "texto" - http-equiv = "texto" - scheme = "texto" | |
<noscript> | Defineix un missatge alternatiu que es mostra a l'usuari quan el seu navegador no suporta l'execució de scripts | Bàsics, internacionalització i esdeveniments | Bloc | |
<iframe> | S'empra per incloure a la pàgina un marc que mostra un altre document HTML | Bàsics | Bloc i en línia | ```xml |
src = "url"
height = "longitud"
width = "longitud"
name = "texto"
longdesc = "url"
scrolling = "yes | no | auto"
`` |
| <address> | Defineix la informació de contacte d'un document | Bàsics, internacionalització i esdeveniments | Bloc | - |
|
` | Permet incloure una línia horitzontal de separació | Bàsics, internacionalització i esdeveniments | Bloc | - |
Caràcters especials:
| Entitat | Caràcter | Descripció |
|---|---|---|
| < | < | signe de menor que |
| > | > | signe de major que |
| & | & | ampersand |
| " | " | cometes |
| | (espai en blanc) | espai en blanc |
| ' | ' | apòstrof |
Es pot trobar tota la llista aquí.
ETIQUETES:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame,frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
ETIQUETES OBSOLETES
De totes les etiquetes disponibles, les següents es consideren obsoletes i no es poden utilitzar:
applet, basefont, center, dir, font, isindex, menu, s, strike, u.
Si detectes algun error no dubtis a comentar-ho.