12. Resumen HTML (II)
12.2 Etiquetas II
Tablas
- <table> ... </table> : Principio y fin de una tabla
- <tr> ... </tr> : fila de una tabla
- <td> ... </td> : celda normal de una tabla
- <th> ... </th> : celda de cabecera de una tabla
- <caption> ... </caption> : título de una tabla
- <thead> ... </thead> : Sección cabecera de tabla
- <tfoot> ... </tfoot> : Sección pie de tabla
- <tbody> ... </tbody> : Sección del cuerpo de la tabla
- <col> ... </col> : Referencia a la columna de la tabla.
- <colgroup> ... </colgroup> : Referencia a un grupo de columnas.
el atributo span="num" indica el número de columnas.
Formularios
<form ... ></form>: Atributos de esta etiqueta:
- action="ruta" : página, correo, etc, dónde es enviado el formulario.
- method="get/post" : método de envío "get" o "post".
- enctype="tipo_MIME" : Modo en que se envía: correo="text/plain";
archivos="multipart/form-data"
Campos del formulario
- Texto : <input type="text" name="nombre" size="ancho_caja" maxlength="max_caracteres" value="valor_defecto" />
- Contraseña : <input type="password" name="nombre" size="ancho_caja" maxlength="max_caracteres" />
- Texto largo : <textarea name="nombre"> Valor_defecto </textarea>
- Botón radio : <input type="radio" name="nombre" value="valor" />. name
debe ser igual en todos los botones relacionados.
- Botón checkbox : <input type="checkbox" name="nombre" value="si" />
- Lista desplegable : <select name="nombre" size="num" multiple="multiple">... (etiquetas option)
...</select> size: Num opciones que vemos a la vez. multiple: poder elegir más
de una opción.
-
- <option value="valor">texto</option>
- Botón de envio : <input type="submit" value="Texto_del_botón" />
- Botón de borrado : <input type="reset" value="Texto_del_botón" />
- Enviar archivos : <input type="file" name="nombre" />
- Campo oculto: <input type="hidden" name="nombre" />
- Botón normal : <input type="button" name="nombre" />
- Botón de imagen : <input type="image" name="nombre" src="ruta_imagen" />
Otras etiquetas de formularios
- <fieldset> ... </fieldset> : agrupar varios campos.
- <legend> Texto </legend> : Texto para etiqueta fieldset.
- <label for="ref"> Texto_referencia_al_campo </label> : referencia del texto
con un campo. En la etiqueta del campo incluiremos el atributo id="ref"
Etiquetas para diseño
- <div> ... </div> : Selección de un bloque grande. Atributos:
-
- id="nombre" : Referencia única para usar estilos CSS.
- class="nombre" : Referencia no única para usar estilos CSS.
- <span> ... </span> : Selección de un trozo pequeño (etiqueta en línea).
Etiquetas Doctype
Por ser las más usadas veremos sólo las de modo transicional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Etiquetas meta
Para buscadores
- <meta name="author" content="autor_de_la _página">
- <meta name="description" content="descripción_de_la _página">
- <meta name="copyright" content="copyright_de_la_página">
- <meta name="generator" content="programa_para_hacer_la_página">
- <meta name="languaje" content="idioma">
- <meta name="revisit_after" content="tiempo de revision (en inglés)">
- <meta name="robots" content="index/noindex, follow/nofollow">
Para el servidor
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> : Indica
el tipo de alfabeto usado.
- <meta http-equiv="Refresh" content="tiempo_en_segundos" /> : Indica
cada cuanto debe actualizarse la página.
Redireccionamiento
- <meta http-equiv="Refresh" content="tiempo_en_segundos; URL=ruta" />
Referencia a otros códigos y archivos
- <link rel="stylesheet" href="ruta_del_archivo" type="text/css" media="all" /> :
archivo externo código CSS.
- <script language="javascript" src="ruta_del_archivo" type="text/javascript"> </script> :
archivo externo código Javascript.
- <style type="text/css"> ... </style> :
Trozo de código CSS incrustado en la cabecera.
- <script type="text/javascript"> ... </script> :
Trozo de código javascript incrustado.
Otras etiquetas
Favicon: <link rel="shortcut icon" href="icono.ico">
Marquesina: <marquee> ... </marque> : Atributos específicos:
- behavior="scroll/slide/alternate"
- direction="left/right"
- scrollamount="num" : píxeles que se desplaza en cada movimiento.
- sc rolldelay="num" : Tiempo en milisegundos entre cada movimiento.
Las etiquetas relacionadas con Frames y con insertar multimedia las veremos en
la siguientes página.
Seguimos en la siguiente página con el resumen: Veremos los atributos y otros elementos de HTML.
Otros elementos.