Referencia HTML

Aula Mentor
Micro-referencia HTML Dreamweaver MX 2004
MICRO-REFERENCIA HTML 4.01/XHTML 1.0

Compatibilidad con las distintas versiones de XHTML 1.0 Strict, Transitional y Transitional y Strict y Transitional Frameset Frameset
ETIQUETA <!DOCTYPE...> DESCRIPCIN GENERALES Indica qu versin de HTML/XHTML utiliza el documento. Ejemplo:
HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict, Transitional, Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Strict
DESCRIPCIN ATRIBUTO
<html></...>
Delimita el documento HTML Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> </body> </html>
<head></...> <title></...> <meta.../>
Delimita la cabecera de la pgina web. Ttulo de la pgina web. Se muestra en la barra de ttulo del navegador. Define el contenido de ciertos parmetros relacionados con la pgina y permite al servidor de la pgina Web crear un encabezado HTTP determinado (indicando, por ejemplo, que la pgina utiliza el juego de caracteres de Europa occidental ISO-8859-1, o cundo caduca el contenido de la pgina). name Nombre del parmetro. Los ms habituales son: Author Description Editor Keywords content Contenido del parmetro. http-equiv Valor del parmetro del encabezado HTTP que se desea establecer. Los ms habituales son: Expires Content-Type Ejemplo:
<head> <meta name="author" content="juanfe"/> <meta name="keywords" content ="cursos,aprender,CRIF"/> <meta http-equiv="expires" content ="Tue, 20 Dec 2005 14:25:27 GMT"/> <meta http-equiv="Content-Type" content="text/html;charset=iso8859-1"/> </head>
<base.../>
Indica cul es la carpeta de referencia para todas las URL de la pgina Web. Debe aparecer dentro de la seccin head.
Juan Flix Mateos
Aula Mentor
Ejemplo:
<head> <title>Juanfe</title> <base href="http://www.madridea.org/publico"> </head>
<link.../>
Establece relaciones entre la pgina Web y otros documentos. Por ejemplo, permite adjuntar hojas de estilo o iconos de favorito (favicons). Ejemplo:
<link rel="stylesheet" type="text/css" href="hoja.css"/> <link rel="shortcut icon" href="jf.ico"/>
<style></...>
Delimita una hoja de estilos (CSS) incrustada en la seccin <head> de la pgina. Ejemplo:
<style type="text/css"> .visto{ display:block; } .oculto{ display:none; } </style>
<body></...>
Delimita el cuerpo de la pgina web. background Imagen de fondo para la pgina web. Mediante la utilizacin de un estilo podemos definir cmo debe repetirse esta imagen. Por ejemplo: repeat-y} </style> Otros valores posibles para background-repeat son repeat-x y no-repeat. Color de fondo de la pgina web. Color del texto de la pgina web. Color de los hipervnculos. Color de los hipervnculos al activarse. Color de los hipervnculos visitados
<style type="text/css"> body {background-repeat:
bgcolor text link alink vlink Ejemplo:

<html> <head> </head> <body>
Esto es el cuerpo de la pgina web. </body> </html>
 <div></...>
Delimita un comentario. Ejemplo:

<!Esto es un comentario-->
Permite estructurar un documento en secciones CSS de tipo bloque. Para crear secciones de tipo "en lnea" se usa <span>. Ejemplo:
<html> <head> <style type="text/css"> .visto{ display:block; } .oculto{ display:none; } </style> <script type="text/javascript"> function mostrar(){ boton=document.getElementById("ayuda"); boton.className="visto"; } function ocultar(){ boton=document.getElementById("ayuda"); boton.className="oculto"; } </script> </head> <body> <form> <input type="button" onmouseover="mostrar()" onmouseout="ocultar()" value="AYUDA"/> </form> <div id="ayuda" class="oculto">
Juan Flix Mateos
Aula Mentor
<p>Pulse este botn para obtener ayuda.</p> </div> </body> </html>
<span></...>
Permite agrupar en un mismo contenedor CSS de tipo "en lnea" varios elementos de texto. Para crear secciones de tipo "bloque" se usa <div>Ejemplo:
<html> <head> <style type="text/css"> .etiqueta{ color: blue; font: bold 20pt; } </style> </head> <body> <span class="etiqueta">Nombre:</span> Juan Flix Mateos </body> </html>
<script></...>
Delimita un guin o scipt del lado del cliente, es decir, un programa escrito en JavaScript, VBScript, Ejemplo:
<html> <head> <script language="javascript"> function error(){ alert("Se ha producido un error"); } </script> </head> <body> <form> <input type="button" onclick="error()" value="ERROR"/> </form> </body> </html>
<noscript></...>
Delimita el contenido HTML que se muestra en los navegadores Web que no admiten scripts (guiones del lado del cliente). Ejemplo:
<head> <noscript>Su navegador no admite scripts.</noscript> </head>
<object></...>
Permite incluir todo tipo de objetos (imgenes, hojas de clculo, aplicaciones Java, pelculas Flash, ) en una pgina Web. Ejemplo:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=7,0,0,0" width="150" height="100" id="resultados" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="resultados.swf" /> </object>
<param.../> <h1></...> <h2></...> ... <h6></...>
Establece el valor de un parmetro de un objeto dentro de un elemento <object>. TEXTO Definen ttulos o encabezados. Los de nivel 1 son los de mayor importancia, y los de nivel 6 son los menos importantes. align Define la alineacin del encabezado y sus valores posibles son: center left right Ejemplo:
<h1>Ttulo <h2>Ttulo <h3>Ttulo <h4>Ttulo <h5>Ttulo <h6>Ttulo de de de de de de nivel nivel nivel nivel nivel nivel 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
<p></...>
Delimita un prrafo. align
Define la alineacin del encabezado y su valores posibles son: center left
Juan Flix Mateos
Aula Mentor
Ejemplo:
<p>Prrafo 1</p> <p>Prrafo 2</p>
right
<br/> <abbr></...> <acronym></...> <del></...> <ins></...>
Introduce un salto de lnea. Ejemplo:

Lnea 1<br/>Lnea 2</br>Lnea 3</br>
Indica una abreviatura. Ejemplo:

<abbr>afmo.</abbr>
Indica un acrnimo. Ejemplo:

<acronym>RENFE</acronym>
Identifica un texto que ha sido suprimido del documento. Ejemplo:

<del>Datos vlidos hasta 2004</del>
Identifica un texto que se ha insertado en el documento. Puede considerarse el antnimo de <del>. Ejemplo:
<ins>Actualizado hasta 2005</ins>
<address></...>
Usa el estilo de direccin postal. Ejemplo:

<address> <b>Autor:</b> Juan Flix Mateos <b>e-mail:</b> jfmateos@lycos.es </address>
<cite></...> <blockquote></...>
Indica que el texto es una cita. Suele utilizarse en combinacin con <blockquote>. Contiene el texto de la cita original. Ejemplo:
Como en cierta ocasin dijo <cite>Confucio</cite>: <blockquote>Aprender sin pensar es esfuerzo perdido; pensar sin aprender es peligroso. </blockquote>
<q></...> <dfn></...>
Igual que <blockquote>. Contiene un texto que se define dentro de la propia pgina. Ejemplo:
El sistema <dfn>radar</dfn> es un invento ingls. <blockquote>Radar es el acrnimo de RAdio Detecting And Ranging</blockquote>
<dd></...>
Delimita una definicin. Suele utilizarse en combinacin con <dl> (lista de definiciones) y <dt> (trmino a definir). Ejemplo:
<dl> <dt>RENFE</dt> <dd>REd Nacional de Ferrocarriles Espaoles</dd> <dt>RADAR</dt> <dd>RAdio Detecting And Ranging</dd> </dl>
<dt></...> <code></...>
Delimita un trmino que se define en un elemento <dd>. Usa el estilo de cdigo de programacin. Ejemplo:
<code> <pre> <html> </html> </pre> </code>
<samp></...>
Usa el estilo de respuesta del ordenador. Ejemplo:

El resultado del comando <code><? echo "HOLA"; ?></code> es <samp>HOLA</samp>
<kbd></...> <var></...> <em></...>
Indica que el texto debe ser escrito por el usuario. Ejemplo:

Pulse la tecla <kbd>barra espaciadora</kbd>.
Delimita un texto que es una variable de un programa. Ejemplo:

El resultado se almacenar en la variable <var>testRes</var>.
Usa el estilo de texto enfatizado. Ejemplo:

Te repito que tienes que utilizar la funcin <em>seno</em>
Juan Flix Mateos
Aula Mentor
<strong></...> <big></...> <small></...> <i></...> <b></...> <u></...> <strike></...> <s></s> <sup></...> <sub></...> <tt></...> <font></...>
Indica un nivel de nfasis mayor que <em>. Ejemplo:

Texto en <strong>negrita</strong>
Muestra un texto con un tamao de letra grande. Ejemplo:

<big>Este texto es grande</big> y este otro no.
Delimita un texto que debe mostrarse con un tamao de letra menor. Ejemplo:
Texto normal, <small>texto pequeo</small> y <big>texto grande</big>
Usa el estilo de cursiva. Ejemplo:

<i>texto en cursiva</i>
Usa el estilo de negrita. Ejemplo:

<b>Texto en negrita</b>
Usa el estilo de subrayado. Ejemplo:

texto <u>subrayado</u>
Usa el estilo de tachado. Ejemplo:

<strike>cavayo</strike>
Igual que <strike>. Usa el estilo de superndice. Ejemplo:

E=mc<sup>2</sup>
Usa el estilo de subndice. Ejemplo:

H<sub>2</sub>O
Usa una fuente monoespaciada. Ejemplo:

<tt>Fuente monoespaciada</tt>
Permite configurar ciertos parmetros de la fuente. face Nombre de la fuente. size Tamao de la fuente. Slo admite los valores del 1 al 7(mayor). color Color de la fuente. style Permite especificar el tamao en puntos de la fuente mediante una expresin como "font-size: 40pt". Ejemplo:
<font face="arial" color="red" size="7">TEXTO</font>
<pre></...>
Delimita un texto que queremos que se muestre tal y como lo hemos escriot (preformateado): Ejemplo:
<pre> 0 000 00000 000 00000 0000000 000000000 00000000000 000 000 </pre>
<ol></...>
LISTAS Delimita una lista ordenada. Las listas pueden anidarse unas dentro de otras. start Indica la numeracin del primer elemento de la lista. type Indica el tipo de numeracin. Los valores posibles son: 1, I, i ,A y a. Ejemplo:
<ol type="A" start="3"> <li>Primer elemento</li> <li>Segundo elemento</li> </ol>
<ul></...>
Delimita una lista no ordenada o lista de boliches. Las listas pueden anidarse unas dentro de otras. type Indica la forma de boliche. Los valores posibles son: disc,
Juan Flix Mateos
Aula Mentor
circle y square. Ejemplo:

<ul type="disc"> <li>Primer elemento</li> <li>Segundo elemento</li> </ul>
<li></...> <dl></...>
Delimita cada elemento de la lista. Delimita una lista de definiciones. Suele utilizarse en combinacin con <dt> y <dd>. Ejemplo:
<dl> <dt>RENFE</dt> <dd>REd Nacional de Ferrocarriles Espaoles</dd> <dt>RADAR</dt> <dd>RAdio Detecting And Ranging</dd> </dl>
<hr.../>
GRFICOS E IMGENES Crea una lnea horizontal en la pgina. align Define la alineacin de la lnea (regla), y sus valores posibles son: left center right size Grosor de la lnea en pxeles. color Color de la lnea. noshade Anula el efecto visual de relieve de la lnea. Ejemplo:
<hr size="3" color="blue"/>
<img.../>
Inserta una imagen. src align
alt border usemap
width height hspace vspace lowsrc Ejemplo:
Ruta de acceso a la imagen. Alineacin de la imagen respecto a la lnea base de un texto (top, middle o bottom) o respecto a la pgina (left o right). Texto alternativo de la imagen. Indica el grosor en pxeles del contorno que aparece alrededor de la imagen. Permite eliminar este contorno (0) cuando la imagen es el origen de un hipervnculo. Indica el nombre de la descripcin del mapa que queremos asignar a la imagen (precedido del signo #) para que se comporte como un mapa de imagen (consulte el atributo name de la etiqueta <map> de la seccin Mapas de imagen). Ancho en pxeles o en porcentaje de la imagen. Puede no coincidir con su ancho real pero conviene que coincida. Alto en pxeles o en porcentaje de la imagen. Puede no coincidir con su alto real pero conviene que coincida. Espacio vaco en pxeles por encima y por debajo de la imagen. Espacio vaco en pxeles a los lados de la imagen. Ruta de acceso a una versin de la imagen en baja resolucin que se descarga antes.
<img src="miImagen.gif"/>
<map></...>
MAPAS DE IMAGEN Delimita la definicin de las zonas de un mapa que se aplicar a una imagen para que se comporte como un mapa de imagen. name Indica el nombre del mapa (consulte el atributo usemap de la etiqueta <img> de la seccin Grficos e imgenes). Ejemplo:
<map name="miMapa"> <area shape="polygon" coords="5,0,10,0,0,10" href="t.html"/> <area shape="circle" coords="15,15,5" href="c.html"/> <area shape="rect" coords="20,20,30,30" href="r.html"/> </map> <img src="mapa.jpg" usemap="#miMapa" border="0"/>
<area>
Define una zona dentro de un mapa.
Juan Flix Mateos
Aula Mentor
shape
coords
href noref Ejemplo:
Indica la forma de la zona. Los valores posibles son rect, polygon, circle y default (engloba todo el espacio que no pertenece a ninguna de las otras zonas del mapa), Indica las coordenadas (en pxeles) de la zona respecto a la esquina superior izquierda de la imagen. Para rect son las coordenadas de dos vrtices diagonalmente opuestos; para polygon son las coordenadas de cada vrtice; y para circle son las coordenadas del centro y el radio. Indica la ruta del destino del hipervnculo de la zona. Indica que la zona no se comporta como un hipervnculo.
<map name="miMapa"> <area href="madrid.html" shape="circle" coords="225,25"/> </map>
<a></...>
HIPERVNCULOS Delimita un elemento (texto o imagen) que va a actuar como ancla (anchor). Un ancla puede actuar como origen y/o destino de un hipervnculo. name Nombre del ancla. Imprescindible cuando se desea utilizar el ancla como destino de un hipervnculo. Los nombre de ancla deben comenzar con el signo #. href Destino del ancla. Si el destino es otro ancla, su nombre deber aparecer precedido del signo #. El destino tambin puede ser una direccin de e-mail; por ejemplo: href="mailto:juanfe@juanfe.com" target Indica el nombre del marco dentro del que queremos mostrar el destino del hipervnculo (consulte el atributo name de la etiqueta <frame> de la seccin Marcos o frames). En lugar de un nombre concreto de marco, tambin podemos utilizar los siguientes valores predefinidos: _blank: Abre el destino indicado por href en una ventana nueva del navegador. _self: Muestra el destino indicado por href en el mismo marco en el que se encuentra el hipervnculo. _top: Muestra el destino en el marco principal de la ventana actual del navegador. _parent: Muestra el destino en el marco padre del que contiene el hipervnculo. Ejemplo:
<a href="pagina2.html">Ir a pgina 2</a>
TABLAS <table></...> Delimita una tabla. border cellspacing cellpadding bgcolor width align Ejemplo:
<table border="1"> <thead> <tr> <th>Cabecera de la tabla</th> </tr> </thead> <tbody> <tr> <td>Cuerpo de la tabla</td> </tr> </tbody> <tfoot>
Anchura en pxeles de los bordes exteriores o interiores de la tabla. Separacin en pxeles entre bordes de celdas adyacentes. Separacin en pxeles entre el borde de cada celda y su contenido. Color de fondo de la tabla. Ancho (en pxeles o porcentual) de la tabla. Alineacin de la tabla. Los valores posibles son left, right o center.
Juan Flix Mateos
Aula Mentor
<tr> <td>Pie de la tabla</td> </tr> </tfoot> </table>
<tr></...>
<td></...>
<th></...> <caption></...>
Delimita una fila dentro de una tabla. align Indica la alineacin horizontal del contenido de cada celda de la fila respecto a los propios bordes de la celda. Los valores posibles son: left, center o right. valign Indica la alineacin vertical del contenido de cada celda de la fila respecto a los propios bordes de la celda. Los valores posibles son: top, middle o bottom. Delimita cada celda dentro de una fila. Dentro de una celda puede anidarse cualquier texto o imagen, o incluso otra tabla completa. bgcolor Indica el color de fondo de la celda. width Indica el ancho (en pxeles o en porcentaje) de la celda. height Indica la altura en pxeles (no en porcentaje) de la celda. Todas las celdas de una misma fila estn obligadas a tener la misma altura. rowspan Indica cuntas filas de la tabla ocupar la celda. colspan Indica cuntas columnas de la tabla ocupar la celda. align Indica la alineacin horizontal del contenido de la celda respecto a sus propios bordes. Los valores posibles son: left, center o right. Tiene prioridad sobre el atributo homnimo de la etiqueta <tr>. valign Indica la alineacin vertical del contenido de la celda respecto a sus propios bordes. Los valores posibles son: top, middle o bottom. Tiene prioridad sobre el atributo homnimo de la etiqueta <tr>. Define una celda especial que acta como encabezado de fila o columna. Posee exactamente los mismos atributos que la etiqueta <td>. Delimita el pie de tabla. align Indica si el pie de tabla aparece delante (top) de la tabla o debajo de ella (bottom). Ejemplo:
<table border="2"> <caption valign="top"> Descripcin en la parte superior </caption> <tr><td>Primera fila</td></tr> </table>
<thead></...> <tbody></...> <tfoot></...> <col></...>
Delimita las filas que delimitan el encabezado de una tabla. Delimita las filas que delimitan el cuerpo de una tabla. Delimita las filas que delimitan el pie de una tabla. Establece las propiedades predeterminadas de las columnas de una tabla. Si este elemento se anida dentro de <colgroup>, sus atributos tienen preferencia sobre los de ella. align Establece la alineacin horizontal de las celdas que componen la columna. Sus valores posibles son left, right y center. span Indica cuntas celdas conforman la columna. valign Establece la alineacin vertical de las celdas que componen la columna. Sus valores posibles son: top, middle y bottom. width Establece el ancho de la columna en pxeles o porcentaje. Ejemplo:
<html> <body> <table border="2"> <col span="2" style="color:red"> <col style="color:blue"> <tr> <td>primera columna, primer grupo.</td> <td>segunda columna, primer grupo.</td> <td>tercera columna, segundo grupo.</td> </tr> <tr>
Juan Flix Mateos
Aula Mentor
<td colspan="2">primera y segunda columna, primer grupo.</td> <td>tercera columna, segundo grupo.</td> </tr> </table> </body> </html>
<colgroup></...>
Establece las propiedades predeterminadas de las columnas o grupos de columnas de una tabla. align Establece la alineacin horizontal de las celdas que componen la columna. Sus valores posibles son left, right y center. span Indica cuntas celdas conforman la columna. valign Establece la alineacin vertical de las celdas que componen la columna. Sus valores posibles son: top, middle y bottom. width Establece el ancho de la columna en pxeles o porcentaje. Ejemplo:
<html> <body> <table border="2" rules="groups"> <colgroup span="2" style="color:red"/> < colgroup style="color:blue"> <tr> <td>primera columna, primer grupo.</td> <td>segunda columna, primer grupo.</td> <td>tercera columna, segundo grupo.</td> </tr> <tr> <td colspan="2">primera y segunda columna, primer grupo.</td> <td>tercera columna, segundo grupo.</td> </tr> </table> </body> </html>
<frameset></...>
MARCOS o FRAMES (XHTML desaconseja el uso de frames) Define filas o columnas de marcos. Una misma etiqueta <FRAMESET> no puede definir filas y columnas de marcos, pero s pueden anidarse unas dentro de otras. border Indica el grosor en pxeles de los bordes de los marcos. frameborder Permite mostrar (1) u ocultar (0) los bordes de los marcos. cols Define el ancho de los marcos en que queremos dividir la pgina u otro marco. Admite un valor absoluto en pxeles, un valor porcentual (seguido del signo %) o el carcter * (que representa todo el espacio no ocupado por otros marcos). rows Define el alto de los marcos en que queremos dividir la pgina u otro marco. Admite un valor absoluto en pxeles, un valor porcentual (seguido del signo %) o el carcter * (que representa todo el espacio no ocupado por otros marcos). Ejemplo:
<frameset rows="50%,*"> <frameset cols="20%,30%,*"> <frame src="pagina1.html"/> <frame src="pagina2.html"/> <frame src="pagina3.html"/> </frameset> <frameset cols="50%,*"> <frame src="pagina4.html"/> <frame src="pagina5.html"/> </frameset> </frameset>
<frame.../>
Define las caractersticas propias de cada marco. name Indica el nombre del marco. Es imprescindible si queremos mostrar el destino de un hipervnculo en un marco concreto (consulte el atributo target de la etiqueta <A> de la seccin Hipervnculos). src Indica la ruta de acceso a la pgina web que se muestra en el marco. frameborder Sirve para mostrar (1) u ocultar (0) los bordes del marco. Prevalece sobre el atributo homnimo de la etiqueta <frameset>. marginheight Indica el alto en pxeles de los mrgenes superior e inferior del
Juan Flix Mateos
Aula Mentor
marginwidth noresize scrolling
marco. Indica el ancho en pxeles de los mrgenes laterales del marco. Indica que el usuario no puede cambiar el tamao del marco arrastrando su borde. Indica cmo se desplaza el contenido del marco. Los valores posibles son yes (muestra siempre una barra de desplazamiento), no (no muestra nunca una barra de desplazamiento) o auto (muestra la barra des desplazamiento slo cuando el tamao del marco no permite visualizar todo su contenido.).
Ejemplo:
<frameset cols="20%,40%,*"> <frame src="pagina1.html"/> <frame src="pagina2.html"/> <frame src="pagina3.html"/> </frameset>
<iframe></...>
Delimita un "marco en lnea", que es un objeto flotante capaz de mostrar en su interior un documento HTML completo. Ejemplo:
Un marco en lnea: <iframe src="pagina1.html"/>
<noframes></...>
Delimita el contenido HTML que se muestra en los navegadores Web que no admiten marcos (frames). Ejemplo:
<frameset cols="20%,*"> <frame src="pagina1.html"/> <frame src="pagina2.html"/> <noframes>Su navegador no admite marcos.</noframes> </frameset>
<form></...>
FORMULARIOS Delimita un formulario. name Indica el nombre del formulario. action Indica la ruta de acceso al agente de procesamiento. Al pulsar el botn SUBMIT, el formulario se enviar a este agente. Tambin podemos enviar el contenido del formulario a una direccin de e-mail mediante la sintaxis mailto:direccin_de_email. method Indica cmo se enviar el contenido del formulario al agente de procesamiento. Los valores posibles son get (enva el contenido dentro de la propia ruta de acceso al agente) y post (enva el contenido de forma independiente). enctype Indica cmo queremos codificar el contenido del formulario para envirselo al agente de procesamiento. Si el formulario contiene un selector de archivos utilizaremos el valor multipart/form-data. Si el formulario se va a enviar por e-mail utilizaremos el valor text/plain. Ejemplo:
<form> <fieldset> <legend>Datos personales</legend> Nombre: <input type="text"/> Apellidos: <input type="text"/> </fieldset> <fieldset> <legend>Nivel de estudios</legend> <input type="radio" name="estudios"/>EGB <input type="radio" name="estudios"/>BUP <input type="radio" name="estudios"/>COU </fieldset> </form>
<input.../>
Permite crear controles de los siguientes tipos: cuadro de texto de una sola lnea, cuadro de texto de tipo contrasea, casillas de activacin, botones de opcin, selectores de archivos, controles ocultos y botones de accin. type Indica el tipo de control que queremos crear. Los valores posibles son: text (cuadros de texto), password (cuadros de contrasea), checkbox (casilla de activacin), radio (botn
Juan Flix Mateos
10
Aula Mentor
name
value checked size maxlength
src tabindex Ejemplo:

<form>
de opcin), hidden (control oculto), file (selector de archivos), submit (botn de accin para enviar el formulario al agente de procesamiento), reset (botn de accin para restituir los valores iniciales en los controles que componen el formulario), image (botn de accin de tipo submit que contiene una imagen en lugar de un texto) y button (botn de accin normal; habitualmente se utilizan para ejecutar guiones del lado del cliente, por ejemplo en JavaScript). Indica el nombre del control. Suele utilizarse para referirse al control desde guiones del lado del cliente o del lado del servidor. Adems, cuando se enva el formulario, el valor de cada control aparece al lado de su nombre. Indica el contenido inicial del control. Indica que un control de tipo casilla de activacin o botn de opcin debe aparecer inicialmente seleccionado. Este parmetro no requiere ningn valor. Indica el tamao del control, expresado en caracteres si se trata de un control de tipo texto o contrasea, o en pxeles si se trata de un control de otro tipo. Indica el nmero mximo de caracteres que puede contener un control de tipo texto o contrasea. Su valor puede ser mayor que el de SIZE, en cuyo caso el contenido del cuadro de texto se desplazar. Indica la ruta de acceso a la imagen que se desea utilizar en un control de tipo IMAGE (que no es sino un botn de tipo SUBMIT que contiene una imagen en lugar de un texto). Indica el orden de tabulacin del control dentro del formulario. Admite como valores nmeros enteros.
Cuadro de texto: <input type="text"/><br/> Cuadro de contrasea: <input type="password"/><br/> Casilla de activacin: <input type="checkbox"/><br/> Botn de opcin:<input type="radio"/><br/> Archivo:<input type="file"/> </form>
<button></...>
Permite crear botones de accin con cualquier contenido (no slo texto o imgenes, como los creados con <input>). El contenido del botn debe incluirse anidado dentro de la etiqueta <button></button> name Indica el nombre del control. value Indica el valor que se enviar al agente de procesamiento al pulsar el botn de tipo SUBMIT. No es el contenido que se muestra dentro del botn. type Indica el tipo de botn que queremos crear. Los valores posibles son SUBMIT (para crear un botn que enve el formulario al agente de procesamiento), RESET (para crear un botn que restituya los valores iniciales del formulario) o BUTTON (para crear un botn de accin genrico que, normalmente, tendr asociado algn guin JavaScript o similar). tabindex Indica el orden de tabulacin del control dentro del formulario. Admite como valores nmeros enteros. Ejemplo:
<button name="miBoton"> <img src="botonOff.gif"> </button>
<textarea></...>
Permite crear controles de tipo cuadro de texto con varias lneas. El contenido inicial del cuadro de texto debe escribirse anidado dentro de esta etiqueta. name Indica el nombre del control. rows Indica el nmero de lneas de texto que se mostrarn en el control. cols Indica el nmero de caracteres que puede contener cada lnea de texto.
Juan Flix Mateos
11
Aula Mentor
readonly tabindex Ejemplo:
Indica que el usuario no puede modificar el contenido inicial del cuadro de texto. Indica el orden de tabulacin del control dentro del formulario. Admite como valores nmeros enteros.
<form method="get"> <textarea cols="50" rows="5" name="desc">Escriba la descripcin</textarea> </form>
<select></...>
<option></...>
<optgroup></...>
Delimita los controles de tipo cuadro de lista, tanto desplegables como desplazables. En su interior deben anidarse las etiquetas <optgroup></...> y <option></...>. name Indica el nombre del control. size Indica el nmero de opciones visibles dentro del control. Es un cuadro desplegable su valor ser 1. multiple Indica que el usuario puede elegir ms de una opcin. Este atributo no requiere ningn valor. tabindex Indica el orden de tabulacin del control dentro del formulario. Admite como valores nmeros enteros. Delimita cada una de las opciones que componen un cuadro de lista. selected Indica que la opcin debe mostrarse inicialmente seleccionada. Este atributo no requiere ningn valor. value Indica el valor que se enviar al agente de procesamiento si la opcin est seleccionada cuando el usuario pulsa el botn SUBMIT. Permite agrupar varias opciones de un cuadro de lista bajo un mismo ttulo, de modo que sea ms sencillo para el usuario localizar una opcin concreta. Suele utilizarse en cuadros de lista que contienen muchas opciones. label Indica el ttulo bajo el que se desean agrupar todas las opciones definidas con <option></...> y anidadas dentro de la etiqueta <optgroup></...>. Ejemplo:
<form> <select> <optgroup label="Madrid"> <option>Alcobendas</option> <option>Getafe</option> <option>Alcorcn</option> <option>Aravaca</option> </optgroup> <optgroup label="Extremadura"> <option>Plasencia</option> <option>Mrida</option> <option>Badajoz</option> </optgroup> </select> </form>
<fieldset></...>
Delimita controles de un formulario que estn relacionados entre s. Ejemplo:

<form> <fieldset> <legend>Datos personales</legend> Nombre: <input type="text"/> Apellidos: <input type="text"/> </fieldset> <fieldset> <legend>Nivel de estudios</legend> <input type="radio" name="estudios"/>EGB <input type="radio" name="estudios"/>BUP <input type="radio" name="estudios"/>COU </fieldset> </form>
<legend></...> <label></...>
Delimita la leyenda de un conjunto de controles agrupados mediante <fieldset>. Delimita una etiqueta para un control de un formulario. Ejemplo:
<form> <label for="cuadroTexto1">Escriba su nombre:</label> <input type="text" id="cuadroTexto1"/> </form>
Juan Flix Mateos
12

Referencia HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Referencia HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Aula Mentor

Micro-referencia HTML Dreamweaver MX 2004

MICRO-REFERENCIA HTML 4.01/XHTML 1.0

Delimita el documento HTML Ejemplo:

<head></...> <title></...> <meta.../>

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

bgcolor text link alink vlink Ejemplo:

Esto es el cuerpo de la pgina web. </body> </html>

Delimita un comentario. Ejemplo:

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

<p>Pulse este botn para obtener ayuda.</p> </div> </body> </html>

<param.../> <h1></...> <h2></...> ... <h6></...>

Delimita un prrafo. align

Define la alineacin del encabezado y su valores posibles son: center left

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

<br/> <abbr></...> <acronym></...> <del></...> <ins></...>

Introduce un salto de lnea. Ejemplo:

Indica una abreviatura. Ejemplo:

Indica un acrnimo. Ejemplo:

Identifica un texto que ha sido suprimido del documento. Ejemplo:

Usa el estilo de direccin postal. Ejemplo:

Usa el estilo de respuesta del ordenador. Ejemplo:

<kbd></...> <var></...> <em></...>

Indica que el texto debe ser escrito por el usuario. Ejemplo:

Delimita un texto que es una variable de un programa. Ejemplo:

Usa el estilo de texto enfatizado. Ejemplo:

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

Indica un nivel de nfasis mayor que <em>. Ejemplo:

Muestra un texto con un tamao de letra grande. Ejemplo:

Usa el estilo de cursiva. Ejemplo:

Usa el estilo de negrita. Ejemplo:

Usa el estilo de subrayado. Ejemplo:

Usa el estilo de tachado. Ejemplo:

Igual que <strike>. Usa el estilo de superndice. Ejemplo:

Usa el estilo de subndice. Ejemplo:

Usa una fuente monoespaciada. Ejemplo:

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

circle y square. Ejemplo:

Inserta una imagen. src align

alt border usemap

width height hspace vspace lowsrc Ejemplo:

Define una zona dentro de un mapa.

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

href noref Ejemplo:

<map name="miMapa"> <area href="madrid.html" shape="circle" coords="225,25"/> </map>

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

<tr> <td>Pie de la tabla</td> </tr> </tfoot> </table>

<thead></...> <tbody></...> <tfoot></...> <col></...>

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

marginwidth noresize scrolling

Juan Flix Mateos

Micro-referencia HTML Dreamweaver MX 2004

value checked size maxlength

src tabindex Ejemplo: