Mostrar un icono en una URL

Listas

• Listas ordenadas

  Las etiquetas <ol> y <li>

  • Contienen una lista de elementos ordenados numéricamente.
  • La lista comienza con <ol> y termina con </ol>
  • Cada elemento de la lista está precedido por <li> y se cierra con </li>
  • En una lista pueden incluirse texto, imágenes, párrafos, saltos de línea, otras listas, etc.

  Observese el anidamiento de listas

  Código HTML	En el navegador se muestra
  <ol> <li>Primer elemento de lista <ol> <li>Primer elemento de lista anidada</li> <li>Segundo elemento de lista anidada</li> </ol></li> <li>Segundo elemento de lista</li> <li>Tercer elemento de lista</li> </ol>	Primer elemento de lista Primer elemento de lista anidada Segundo elemento de lista anidada Segundo elemento de lista Tercer elemento de lista

• Listas no ordenadas

  Las etiquetas <ul> y <li>

  • Lista de elementos no ordenados numéricamente, sino precedidos por una viñeta.
  • La lista comienza con <ul> y termina con </ul>
  • Cada elemento de la lista está precedido por <li> y se cierra con </li>
  • Estas listas pueden incluir texto, imágenes, párrafos, saltos de línea, otras listas, etc.

  Código HTML	En el navegador se muestra
  <ul> <li>Primer elemento de lista</li> <li>Segundo elemento de lista</li> <li>Tercer elemento de lista</li> </ul>	Primer elemento de lista Segundo elemento de lista Tercer elemento de lista

• Listas de definición

  Las etiquetas <dl> y <dd>

  • No es una lista de elementos como tal, sino una lista de términos y su descripción.
  • La lista comienza con <dl> y termina con </dl>.
  • Cada término de la lista está precedido por <dt> y se cierra con </dt>.
  • Cada descripción del término de la lista está precedido por <dd> y se cierra con </dd>.
  • Pueden incluirse texto, imágenes, párrafos, saltos de línea, otras listas, etc. pero solo dentro de la descripción del término (<dd> </dd>).

  Código HTML	En el navegador se muestra
  <dl> <dt>Primer término de lista</dt> <dd>Descripción del primer término de lista</dd> <dt>Segundo término de lista</dt> <dd>Descripción del segundo término de lista</dd> <dt>Tercer término de lista</dt> <dd>Descripción del tercer término de lista</dd> </dl>	Primer témino de lista Descripción del primer término de lista Segundo término de lista Descripción del segundo término de lista tercer término de lista Descripción del tercer término de lista

Tablas

• Tablas en HTML

  Las etiquetas <table>, <tr>, y <td>

  • Se definen mediante la etiquetas <table> </table>.
  • Se divide en filas (mediante la etiqueta <tr> </tr>), que a su vez se dividen en celdas (con la etiqueta <td> </td>).
  • Las celdas pueden contener texto, imagenes, listas formularios, tablas, etc.

  Código HTML	En el navegador aparecerá:
  <table border='1'> <tr> <td>fila 1, celda 1</td> <td>fila 1, celda 2</td> <td>fila 1, celda 3</td> </tr> <tr> <td>fila 2, celda 1</td> <td>fila 2, celda 2</td> <td>fila 2, celda 3</td> </tr> </table>	fila 1, celda 1 fila 1, celda 2 fila 1, celda 3 fila 2, celda 1 fila 2, celda 2 fila 2, celda 3

• Atributos de la etiqueta table

  Los atributos para la tabla

  La etiqueta para insertar una tabla en una página HTML es: <table atributo =' valor_atributo '></table>

  Atributo	Función	Posibles valores	Ejemplo
  width	Ancho de la tabla	Píxeles o %	<table width='100%'>
  border	Borde exterior de la tabla ()	Píxeles	<table border='2'>
  cellpadding	Espacio entre el borde de la celda y el texto	Píxeles	<table cellpadding='5'>
  cellspacing	Espacio entre las celdas. Borde entre celdas (píxeles)	Píxeles	<table cellspacing='5'>
  summary	Sumario de la tabla para navegadores no visuales (voz, etc)	Texto	<table summary='Texto'>
  frame	Partes del borde exterior de la tabla que se mostrarán. Requiere tener el atributo border.	void: Ningún lado. Por defecto. above: Sólo el borde superior. below: Sólo el borde inferior. hsides: Sólo bordes sup. e inf. vsides: Sólo lados der. e izq. lhs: Sólo lado izquierdo. rhs: Sólo lado derecho. box: Los cuatro lados. border: Los cuatro lados.	<table border='2' frame='vsides'>
  rules	Líneas de división entre celdas que se mostrarán. Requiere el atributo border.	none: Ninguna. Por defecto. groups: Líneas entre grupos de filas y columnas. rows: Sólo entre filas. cols: Sólo entre columnas. all: Entre todas las filas y columnas.	<table border='2' rules='rows'>

  Atributos table en desuso:

  align	Alineación de la tabla respecto al texto exterior. En desuso	left, center, right	<table align='left'>
  height	Alto de la tabla (En ). En desuso	Píxeles o %	<table height='100%'>
  bgcolor	Color de fondo de la tabla. En desuso.	#35;RRVVAA	<table bgcolor='#FF0000'>
  background	Imagen de fondo de la tabla. En desuso.	URL	<table background='fondo.gif'>

  Además de estos atributos <table> tiene otros:

  • standard: id, class, title, style, dir, lang
  • de evento: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

• Otras etiquetas para tablas

  Etiquetas <th>, <caption>, <col>, etc.

  Como siempre, el formato de las etiquetas es: <etiqueta atributo =' valor_atributo '></etiqueta>

  Este es el titular de esta tabla:

  Etiqueta	Descripción	Atributos	Ejemplo
  <th> </th>	Celda de encabezado de tabla	abbr, align, axis, bgcolor, char, charoff, colspan, height, headers, rowspan, scope,valign, width estandar, de evento	<table border = '1'> <tr> <th>Ejemplo</th> </tr> <tr> ... </tr> </table>
  <caption> </caption>	Titular para la tabla. Debe ponerse inmediatamente después de <table>. Por defecto se sitúa centrada en la zona superior de la tabla.	Estándar De evento	<table border='1'> <caption>Este es el titular de la tabla</caption> <tr> ... </tr> </table>
  <colgroup> </colgroup>	Permite agrupar columnas para darles el mismo formato.	span, width,align,char, charoff, valign, estandar, de evento	table border='1'> <colgroup span='3' style='color:FF0000;'> </colgroup> <tr> ... </tr> </table>
  <col> </col>	Define el valor de los atributos para un una o más columnas. Solo puede hacerse dentro de un colgroup.	span, width,align,char, charoff, valign, estandar, de evento	<table border='1'> <colgroup span='2'> <col width='10'> <col width='25'> </colgroup> <tr> <td>Celda 1</td> <td>Celda 2</td> ... </tr> </table>
  <thead> </thead>	Establece una fila de cabecera para la tabla. Permite independizar el scroll de las filas de datos. Si una tabla es demasiado larga y la imprimimos, la fila de cabecera aparece al principio de la tabla en cada hoja. Siempre debe usarse junto a las etiquetas <tbody> y <tfoot>.	align,char, charoff, valign, estandar, de evento	<table border = '1'> <thead> <tr> <td>Este es el texto de la cabecera de tabla</td> </tr> </thead> <tfoot> <tr> <td>Este es el texto de pie de tabla</td> </tr> </tfoot> <tbody> <tr> <td>Este es el texto del cuerpo de la tabla</td> ... </tr> </tbody> </table>
  <tbody> </tbody>	Filas de datos. Siempre debe usarse junto a las etiquetas <thead> y <tfoot>.
  <tfoot> </tfoot>	Fila de pie de tabla. Siempre debe usarse junto a las etiquetas <tbody> y <thead>.

  Atributos:

  • abbr: breve descripción del contenido.
  • align: alineación
  • axis: Describe la catergoria de la celda. Se suele usar en navegadores hablados.
  • bgcolor: color de fondo.
  • char: caracter referencia de alineamiento dentro de una celda.
  • charoff: distancia entre el borde y la primera aparición del carácter de alineación en cada línea.
  • colspan: número de columnas que abarca la celda actual.
  • height: Altura de celda. No usar.
  • headers: lista de celdas de encabezado que dan info. para la celda de datos actual.
  • rowspan: número de filas abarcado por la celda actual.
  • scope: celdas de datos para las cuales la celda de encabezado actual da info. de encabezado.
  • span: número de columnas que abarca el grupo.
  • valign: alineación vertical.
  • width: ancho de la celda. No usar.
  • Estándar.
  • De evento.

Hiperenlaces

• Hiperenlaces en HTML

  Qué son y para qué sirven

  • Los hipervínculos indican, al ser pulsados, la dirección 'para llegar' hasta otro documento, o a otra zona del documento actual, imagen, archivo, etc. En el caso de ser a otro documento/zona de documento nos lleva directamente allí.
  • Los hipervínculos pueden ser texto o bien imágenes (o zonas de una imagen).

• Hiperenlaces con dirección absoluta

  Cómo se hacen

  • Se utiliza el hiperenlace con dirección absoluta cuando se quiere acceder a una página web situada en una dirección externa a nuestra web, dentro de la red de Internet.
  • Para ello escribiríamos la dirección web de Internet a la que queremos acceder, siempre utilizando el tag <a href= (dirección url) >(nombre del hiperenlace)</a>.Por ejemplo:

  Código en HTML	En elNavegador aparece:
  <a href='http://www.tic2.org/index.htm'>www.tic2.org</a>	www.tic2.org

  • Pero para consultar un archivo o página que se halla dentro de nuestra web, siempre es mejor utilizar los hiperenlaces con dirección relativa.

• Hiperenlaces con dirección relativa

  Cómo se hacen

  • Se utiliza el hiperenlace con dirección relativa cuando se quiere acceder a un archivo o página que se encuentra en un directorio dentro de nuestra web.

  • Para ello escribiríamos sólo el nombre de la carpeta dentro del directorio al que queremos acceder utilizando el tag <a href='(dirección del directorio y archivos)'>(nombre del hiperenlace)</a>.

    Por ejemplo:

    Código en HTML	En el Navegador aparece:
    <a href='imagenes/indice.htm'>indice</a>	indice

• Atributos de la etiqueta a

  Atributos del hiperenlace

  Atributo	Valores	Descripción	Código HTML	En el navegador se muestra
  href	URL mailto:email	Indica la dirección del recurso al que apunta el hiperenlace o una dirección de correo a la que escribiremos.	<a href='http://www.miweb.com'> Este enlace lleva a mi web </a> <a href='mailto:jaime@miweb.com'> Mándame un correo</a>	Este enlace lleva a mi web Mándame un correo
  target	_blank: Abre el recurso en una ventana nueva. _parent: Abre el recurso en el marco padre _self: Abre el recurso en el mismo marco o ventana _top: Abre el recurso la ventana actual (y elimina los marcos si estos existen).	Indica el lugar en el que se abrirá el recurso al que apunta el hiperenlace.	<a href='http://www.miweb.com' target='_blank'> Este enlace lleva a mi web </a>	Este enlace lleva a mi web
  name	texto	Nombra una sección del documento. Podemos ir a esa sección mediante un hiperenlace en cuya URL se añade #seccion_nombre <a href='URL_pag #seccion_nombre'>	Nombramos una sección mediante <a name='comienzo'> Para hacer un enlace a esa sección escribiriamos: <a href='linkA-atrib.htm #comienzo'> Este enlace lleva a al comienzo de esta página</a>	Este enlace lleva al comienzo de esta pagina

• Enlaces a la sección de una página

  Las 'marcas'

  • Se crean secciones dentro de una página mediante la etiqueta <a name='seccion_nombre'>
  • Se hacen hiperenlaces para ir a dichas secciones mediante las etiquetas:
    • Si la sección está en la misma página que el hiperenlace:
      <a href='#seccion_nombre'>Enlace a la sección 1</a>.
    • Si la sección está en una página distinta a la que contiene el hiperenlace:
      <a href='URL_pagina#seccion_nombre'>Enlace a la sección 1</a>.
  • Suelen usarse para crear un índice dentro de una página de gran tamaño.

  Ejemplo:

  Índice

  1. Sección 1
  2. Sección 2
  3. Sección 3

  
  

  1. Sección 1.
     Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto
  2. Sección 2.
     Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto
  3. Sección 3.
     Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto

• Hiperenlaces como imágenes

  ¿Cómo se hace?

  • Para que una imagen actúe como un hiperenlace debemos:
  1. Crear el hiperenlace con la etiqueta <a href='URL'>
  2. Antes de cerrar la etiqueta anterior con </a> debemos añadir la etiqueta de insertar imagen <img src='imagen_URL'>

  Código HTML	En el navegador se muestra:
  <a href='http://www.maxpaine.com' target='_blank' ><img src='maxpaine.gif' width='120' height='60' alt='Imagen:maxpaine.gif' border='0'></a>

Formularios

• Formularios en HTML

  Definir un formulario

  • Un formulario es un área que contiene elementos de formulario.
  • El formulario se define mediante la etiqueta <form> </form>
  • Los elementos de formulario permiten que el usuario introduzca información para que sea tratada posteriormente. Es, pues, una página dinámica.
  • Se suelen guardar con extensión .asp (en Microsoft) o en .php (en Linux), o en otras que NO SEAN .htm ni .xml.
  • Los valores introducidos en los elementos del formulario son enviados al pulsarse el botón Enviar (submit button) a un archivo (indicado mediante el atributo action) que normalmente hace algo con los datos.

  Atributo	Valores	Descripción
  name	cadena de texto	Nombre del formulario
  method	Get: Envía los valores a través de la URL. Post: Envía los valores en el cuerpo de un mensaje de transacción.	Modo en que se envían los datos introducidos por el usuario
  action	Fichero	Fichero al que se envían los datos al pulsar el botón Enviar.

  Ejemplo de formulario:

  Código HTML	En el navegador se muestra:
  <form name='FrmBuscar' method='get' action='busqueda.asp'> Buscar: <input type='text' name='TxtBuscar'> <input type='submit' name='BtnEnviar' value='Enviar'> <input type='reset' name='BtReset' value='Limpiar'> </form>	Buscar:

  Al pulsar el botón Enviar a través de la URL se manda esto: http://....../busqueda.asp?txtBuscar=palabra&BtnEnviar=Enviar

• La etiqueta input

  Ejemplos de formulario

  • Es la etiqueta más usada en los formularios.
  • El atributo type indica el tipo de entrada de datos.
  • Debe estar contenido entre la etiqueta <form> </form>.
  • En ocasiones también se introducen tags de lenguaje de programación Visual Basic en la etiqueta <form>, y se hace con los signos <% y %>. Por ejemplo:

  Si tenemos una tabla :

  Nombre	Apellido
  Pepe	López
  Juan	Gonzalez

  A) Ejemplo:

  <input type='text' name='Nombre' value=<%strTable(1)%> />

  <input type='text' name='Apellido' value=<%strTable(1)%> />

  B) Ejemplo:

  <input type='text' name='Nombre' value=<%strTable(2)%> />

  <input type='text' name='Apellido' value=<%strTable(2)%> />

  Esto indicaría: tipo texto, nombre de campo, valor asignado a la primera (1) celda de la tabla (stringTable), si esta tiene una o varias celdas. Como resultado daría el valor asignado a una línea de texto:

  A) Ejemplo:

  Nombre:
  Apellido:

  B) Ejemplo:

  Nombre:
  Apellido:

  Atributo	Valores	Descripción
  text: campo de texto.		Indica el tipo de campo que se mostrará. El tipo por defecto es el campo de texto. No es un atributo obligatorio, pero conviene ponerlo.
  checkbox: caja de validación.
  radio: botón de radio.
  password: contraseña.	Password:
  hidden: oculto.
  submit: enviar.
  reset: limpiar.
  button: botón.
  file: fichero.
  image: imagen.
  accept	tipo de fichero	Indica el tipo de fichero admitido. Debe ponerse cuando el valor del atributo type es file.
  name	texto	Nombre que recibe el campo de entrada. Los botones de radio quedan agrupados cuando reciben el mismo nombre
  value	valor	Valor que será enviado cuando el botón de radio o la caja de validación es activada. Para botones (incluido submit y reset) indica el texto que aparece en el botón. Para campos de texto, contraseñas y ocultos especifica el valor por defecto.
  size	número de caracteres	El tamaño del campo. Para los tipos texto y contraseña.
  maxlength	número de caracteres	Número máximo de caracteres que se le permite introducir al usuario en el campo. Para los tipos texto y contraseña.
  	activado	Indica si el botón de radio o la caja de validación está activada cuando se carga la página.
  readonly	sólo lectura	Indica que el valor de dicho campo no puede ser cambiado por el usuario.
  src	url	Origen de la imagen. Debe ser usado con type='image'.
  disabled	desactivado	El usuario no puede interactuar con ese campo.

  Otros atributos:

  • Estándar: id, class, title, style, dir, lang, tabindex, accesskey.
  • De evento: onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
    

• La etiqueta textarea

  El área de texto

  • Es la etiqueta para la entrada de datos que comprende varias líneas, con barras de desplazamiento.
  • El tipo de datos son de texto.
  • Debe estar contenido entre la etiqueta <form> </form>

  Atributo	Valores	Descripción
  rows	filas	Indica el número de filas (número de caracteres en vertical). No es un atributo obligatorio, pero conviene ponerlo.
  cols	columnas	Indica el número de columnas (número de caracteres en horizontal). No es un atributo obligatorio, pero conviene ponerlo.
  name	nombre	Indica el nombre del campo.

  Ejemplo:

  <tr>
  <td>Otras</td>
  <td>
  <textarea name='otras' cols=20 rows=3 align=TOP>Tocar la guitarra, saltar a la comba</textarea>
  </td>
  </tr>

• La etiqueta select

  Crear listas

  • Es la etiqueta usada para crear listas. <select> </select>
  • Debe estar incluida dentro de <form> </form>.
  • Suele ir acompañada de <option value='valor'>Etiqueta_valor, que es cada uno de los posibles valores entre los que podemos elegir.
  • Si queremos elegir el valor que se cogerá por defecto usaremos <option value='valor' selected>Etiqueta_valor
  • Usando el atributo size podemos mostrar varios valores a la vez, por lo que pasa a ser una lista en lugar de un menú desplegable.

  Código HTML	Ejemplo:
  <form> <select name='nombre'> <option value='1'>Jaime <option value='2'>Maria <option value='3'>Raúl <option value='4'>Jorge </select> </form>	Jaime Maria Raúl Jorge
  <form> <select name='nombre' size='2'> <option value='1' selected>Jaime <option value='2'>Maria <option value='3'>Raúl <option value='4'>Jorge </select> </form>	Jaime Maria Raúl Jorge

• Formulario de prueba

  Ejemplo de formulario y su código HTML

  Rellenar el siguiente formulario para obtener mas información sobre el HTML 3.0:

  ---

  Vista en Navegador

  Vista código HTML

  Nombre: (Campo de texto) Atributos Edad 0 a 10 11 a 20 21 a 30 31 a 40 Carca (Lista - menú desplegable) Altura 0 a 1 mts. 1 a 1.5 mts. 1.5 a 1.75 mts 1.75 a 2 mts + 2 mts. (Lista - lista) (Botones de radio) Estado civil Soltero Soltero (aunque no por falta de ganas) Arrejuntado Casado Divorciado Viudo (Cajas de validación y campo de texto de varias líneas) Aficiones Oír música Montañismo Submarinismo Otras Tocar la guitarra, saltar a la comba Gracias por rellenar este formulario. Usted mándelo, que ya le llamaremos...

  <!-- Inicio formulario --> <FORM METHOD='POST'ACTION='file:///C|/windows'> <!-- Campo de texto --> <P> <H4>Nombre:</H4> <INPUT NAME='nombre' size='48' value='Jaime López'> (Campo de texto) <P> <!-- Lista menú desplegable--> <table border='0'> <tr bgcolor='CCCCCC'> <th colspan='2'>Atributos </th> <td>&nbsp;</td> </tr> <tr bgcolor='FFFFFF'> <td>Edad</td> <td> <select name='select'> <option>0 a 10</option> <option>11 a 20</option> <option selected>21 a 30</option> <option>31 a 40</option> <option>Carca</option> </select> </td> <!-- Lista lista --> <td>(Lista - menú desplegable) </td> </tr> <tr bgcolor='CCCCCC'> <td>Altura</td> <td> <select name='select2' size='3'> <option>0 a 1 mts.</option> <option>1 a 1.5 mts.</option> <option>1.5 a 1.75 mts</option> <option selected>1.75 a 2 mts</option> <option>+ 2 mts.</option> </select> </td> <td>(Lista - lista) </td> </tr> <tr bgcolor='FFFFFF'> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <P> <!-- Botones de radio --> <table border='0'> <caption>(Botones de radio) </caption> <tr bgcolor='CCCCCC'> <th colspan='2'>Estado civil</th> </tr> <tr bgcolor='FFFFFF'> <td>Soltero</td> <td> <input name='estadocivil' type='RADIO' value='solteroliberado' checked> </td> </tr> <tr bgcolor='CCCCCC'> <td>Soltero (aunque no por falta de ganas)</td> <td> <input name='estadocivil' type='RADIO' value='solterodeprimido'> </td> </tr> <tr bgcolor='FFFFFF'> <td>Arrejuntado </td> <td> <input name='estadocivil' type='RADIO' value='casado'> </td> </tr> <tr bgcolor='CCCCCC'> <td>Casado</td> <td> <input name='estadocivil' type='RADIO' value='viudo'> </td> </tr> <tr bgcolor='FFFFFF'> <td>Divorciado</td> <td> <input name='estadocivil' type='RADIO' value='divorciado'> </td> </tr> <tr bgcolor='CCCCCC'> <td>Viudo </td> <td> <input name='estadocivil' type='RADIO' value='arrejuntado'> </td> </tr> </table> <!-- Cajas validacion --> <br> <table border='0'> <caption>(Cajas de validación y campo de texto de varias líneas) </caption> <tr> <th colspan='2'>Aficiones</th> </tr> <tr> <td>Oír música</td> <td> <input type='checkbox' name='aficion1' value='checkbox' checked> </td> </tr> <tr> <td>Montañismo</td> <td> <input name='aficion2' type='checkbox'value='montanismo'> </td> </tr> <tr> <td>Submarinismo</td> <td> <input name='aficion' type='checkbox'value='submarinismo'> </td> </tr> <!-- Campo texto varias lineas --> <tr> <td>Otras</td> <td> <textarea name='otras' cols=20 rows=3 align=TOP>Tocar la guitarra, saltar a la comba</textarea> </td> </tr> </table> <H5>Gracias por rellenar este formulario. Usted mándelo, que ya le llamaremos... </H5> <!-- Botones --> <P> <INPUT TYPE='SUBMIT' value='Enviar'> <INPUT TYPE='RESET' value='Limpiar'> </FORM>

Atributos

• Atributos estándar

  Para todas las etiquetas

  Estos atributos son válidos para todas las etiquetas (salvo para unas pocas excepciones):

  
  

  Atributos base:

  No validos para las etiquetas: base, head, html, meta, param, script, style, title.

  Atributo	Función	Posibles valores	Ejemplo
  class	Nombre de clase del elemento en cuestión.	cadena	<P><SPAN id='msg1' class='info'>Variable declarada dos veces</SPAN>
  id	Cadena única que identifica el objeto.	cadena	<P id='miparrafo'>
  style	Estilo para el objeto.	cadena	<P style='font-size: 12pt; color: fuchsia'>
  title	Texto que muestra el navegador cuando el dispositivo apuntador se detiene sobre el objeto. Ej: cuando se pasa el cursor por encima.	cadena	<A href='http://www.miweb.com' title='Enlace a mi página''>

  
  
  

  Atributos de lenguaje:

  No validos para las etiquetas: base, br, frame, frameset, hr, iframe, param, script.

  Atributo	Función	Posibles valores	Ejemplo
  dir	Dirección del texto o de una tabla.	ltr: de izq. a derecha rtl: de derecha a izq.	<P dir='lrt'>párrafo escrito de izquierda a derecha</P>
  lang	Lenguaje de codificación.	Mirar el RFC1766	<P lang='es'> párrafo escrito con caracteres de codificación en español</p>

  
  
  

  Atributos de teclado:

  Solo para: a, area, button, input, object, select, textarea.

  Atributo	Función	Posibles valores	Ejemplo
  accesskey	Asigna una tecla de acceso a un elemento. La acción que ejecuta depende de este.	Carácter de teclado	<P><A accesskey='C' href='http://www.miweb.com'> Mi web personal</A>

• Atributos de evento

  Para los eventos

  HTML 4.0 permite que se desencadenen eventos al realizarse diversas acciones sobre un elemento de la página. Todos estos atributos suelen funcionar de un modo similar al del ejemplo siguiente:

  <INPUT NAME='num' onchange='if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}'
  VALUE='0'>

  
  
  

  Atributos de evento para ventanas:

  Válidos para las etiquetas: body y frameset.
  

  Atributo	Función	Posibles valores
  onload	Se ejecuta cuando termina de cargarse la página.	script
  onunload	Se ejecuta cuando el navegador elimina la página de la ventana.	script

  
  
  

  Atributos de evento para elementos de formulario:

  Válidos para las etiquetas de formulario.
  

  Atributo	Función	Posibles valores
  onchange	Se ejecuta cuando cambia el elemento.	script
  onsubmit	Se ejecuta cuando el formulario es enviado.	script
  onreset	Se ejecuta cuando el formulario se limpia.	script
  onselect	Se ejecuta cuando el elemento es seleccionado.	script
  onblur	Se ejecuta cuando un elemento deja de estar 'enfocado'.	script
  onfocus	Se ejecuta cuando un elemento es 'enfocado'.	script

  
  
  

  Atributos de evento para elementos de teclado:

  Válidos para todas las etiquetas excepto: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.
  

  Atributo	Función	Posibles valores
  onkeydown	Se ejecuta cuando se pulsa una tecla estando sobre un elemento.	script
  onkeypress	Se ejecuta cuando se pulsa una tecla determinada.	script
  onkeyup	Se ejecuta cuando la tecla deja de pulsarse.	script

  
  
  

  Atributos de evento para elementos de ratón:

  Válidos para todas las etiquetas excepto: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.
  

  Atributo	Función	Posibles valores
  onclick	Se ejecuta cuando se pulsa con el ratón.	script
  onmouseup	Se ejecuta cuando se suelta el botón del ratón.	script
  ondblclick	Se ejecuta cuando se hace una doble pulsación con el ratón.	script
  onmousedown	Se ejecuta cuando se pulsa el ratón y no se suelta.	script
  onmousemove	Se ejecuta cuando se mueve el ratón.	script
  onmouseout	Se ejecuta cuando el puntero del ratón deja de estar sobre un elemento.	script
  onmouseover	Se ejecuta cuando el puntero del ratón pasa sobre un elemento.	script