Diseño y desarrollo de sitios web, México DF
Referencia para diseño web, HTML, hojas de estilo, colores para la web
Página anterior
Su identidad de entrada:
log out   
 Referencia sobre HTML 4

HTML (HyperText Markup Language) se usa con etiquetas, la etiqueta para abrir un comando, por ejemplo, <html> y para cerrar </html>, cada etiqueta esta escrito dentro de un < y un > . La siguiente es una lista de etiquetas para HTML y descripciones para sus usos. HTML no es sensativo de mayusculas y minusculas. Esta guía no está completa, pero serán adiciones frequentes en el futuro.

Vea el indice abajo para la información de referencia completa:


 Las etiquetas básicas del documento de HTML

<html> abrirá el contenido de HTML en el documento, dentro de las etiquetas HTML son las etiquetas de la cebaza o "head" y las etiquetas del cuerpo o "body", en el orden anterior.
</html> Cierre el contenido de HTML en el documento.

<head> Abrirá el contenido de la cabeza o "head" del documento de HTML, el código en esta sección del documento no será desplegado en el navigador. Pero hay excepciones, por ejemplo cuando JavaScript esta usado dentro de las etiquetas de la sección de la cabeza o "head" del documento. Estas etiquetas se encuentran dentro de las etiquetas de HTML y antes de las etiquetas del cuerpo o "body" del documento.
</head> Cierre el contenido de la cabeza o "head" del documento de HTML.

<body> Abrirá el contendo del cuerpo o "body" del documento de HTML, la información aparecará en el navigador será dentro de estas etiquetas.
</body> Cierre el contenido del cuerpo o "body" en el documento de HTML.

Entonces la estructura del documento de HTML será así:

<html>
<head>
Contenido de la cabeza o "head" aqui
</head>
<body>
Contenido del cuerpo o "body" aqui
</body>
</html>

 Etiquetas para la sección de la cabeza o "head" del documento de HTML

<title> Abrirá la área del titulo del documento, el contenido dentro de estas etiquetas aparecerá en la esquina de la izquierda de arriba en el navigador como titulo del documento.
</title> Cierre la área del titulo del documento.

<script language="JavaScript[versión]"> Abrirá la área para programación en JavaScript, esta etiqueta puede ser usado en la cabeza o "head" del documento o en el cuerpo o "body".
</script> Cierre la área del código de JavaScript en el documento.

<style type="text/css"> ó <style> Abrirá la área de las hojas de estilo ó CSS en el documento.
</style> Cierre la área de las hojas de estilo ó CSS en el documento.

<link rel="stylesheet" href="ruta al documento de .css ó hojas de estilo" type="text/css"> Está etiqueta es un enlace a un documento de hojas de estilo externo que usará el documento de HTML.

 Opciones de etiquetas para el cuerpo o "body" del documento de HTML

<body bgcolor="valor hexadecimal aqui"> define el color del fondo del documento, nesecita añadir un valor hexadecimal, por ejemplo #000000 (negro).

<body text="valor hexadecimal aqui"> define el color del texto del cuerpo ó "body". Como el ejemplo anterior necesita definir un valor hexadecimal.

<body link="valor hexadecimal aqui"> Define el color de las enlaces en el documento. Otra vez usando un valor hexadecimal.

<body vlink="valor hexadecimal aqui"> Define el color de las enlaces visitados, otra vez usando un valor hexadecimal.

<body alink="valor hexadecimal aqui"> Define el color de un enlace en cuando el usuario haga click en ella, otra vez usando un valor hexadecimal.

<body onload="funcción de JavaScript aqui"> Esta etiqueta carcará un funcción o funcciones de JavaScript en cuando el documento cargará en el navigador.

<body marginheight="valor aqui"> Define la medida del alto de la margen del documento. El valor es en pixeles.

<body marginwidth="valor aqui"> Define la medida del ancho de la margen del documento. El valor es en pixeles.

<body topmargin="valor aqui"> Define la medida del margen de arriba del documento, ó no, dependiente en el valor proporcionado. Valores son "1" (Si) ó "0" (no).

<body leftmargin="valor aqui"> Define un margen de la izquierda del documento, ó no, dependiente en el valor proporcionado. Valores son "1" (Si) ó "0" (no).

 Etiquetas de texto y formateo

La etiqueta del fuente ó "font" puede incluir más que un valor, por ejemplo:
<font face="tipo del fuente aqui" size="valor aqui">su texto aqui</font>

<font face="tipo del fuente aqui"> especifíca el fuente para usar dentro de las etiquetas, por ejemplo, arial.
</font> Cierre el estilo del fuente.

<font size="tamaño del fuente aqui"> Especifíca el tamaño del fuente dentro de las etiquetas. Valores son "1" y arriba, media medidas no son permitidas, por ejemplo: 0.5.
</font> Cierre el valor del fuente.

<font color="valor hexadecimal aqui"> especifíca el color del texto usando un valor hexadecimal.
</font> Cierre el valor del fuente.

<h1> a <h6> Para crear una cabezada en el documento, valores son 1 a 6, 1 es lo más grande y 6 es el tamaño más pequeño.
</h1> a </h6> Cierre el valor de la cabezada.

<b> Define el texto como negrito ó "bold".
</b> Cierre el estilo de texto en negrito ó "bold".

<i> Define el texto como italicos ó "italics".
</i> Cierre el estilo de texto en italicos ó "italics".

<pre> Define texto preformateado.
</pre> Cierre el texto preformateado.

<tt> Define un texto en estilo de máquina de escribir.
</tt> Cierre el texto en estilo de máquina de escribir.

<strong> Define émfasis en el texto.
</strong> Cierre la émfasis.

<em> Otra manera de crear émfasis en el texto.
</em> Cierre la émfasis.

<br> Crea un espacio vertical de una línea en el texto.

&nbsp; Crea un espacio de un carácter.

<p> Crea un paráfaro.
</p> Cierre el paráfaro.

<p align="valor aqui"> Abrirá un nuevo paráfaro con un valor de formateo, valores puede ser "left", "right" ó "center".
</p> Cierre el aliniación del paráfaro.

<div align="valor aqui"> Formateo del texto con valores de "left", "right" ó "center", dependiente en cual valor esta usado.
</div> Cierre el formateo.

<blockquote> Crea un espacio en los dos lados del texto.
</blockquote> Cierre el espacio.

<dl> Crea una lista de definiciones.
</dl> Cierre la lista de definiciones.

<dt> Procede cada termino de definición.

<dd> Procede cada defenición.

<ol> Crea una lista con números.
</ol> Cierre la lista con números.

<li> Crea una lista con puntos.
</li> Cierre la lista.

<ul> También crea una lista con puntos.
</ul> Cierre la lista.

 Etiquetas que forman enlaces

<a href="URL aqui"> Crea un enlace a un URL (Uniform Recourse Locator). e.j. el URL "http://mexartwork.com".
</a> Cierre el enlace.

<a href="URL aqui" target="valor aqui"> La etiqueta del target se abrirá el documento enlacado. Valores son, _parent (abrirá en la mísma ventana que el documento original), _new (abrirá el documento en una ventana nueva), el nombre del marco (abrirá el documento en un marco definido en un "frameset").

<a href="mailto:dirección de correo electrónico aqui"> Crea un enlace que abrirá el cliente de correo electrónico y pone el dirección defenido en el nuevo mail.
</a> Cierre el enlace.

<a name="nombre del target ó blanco"> Crea un "target" ó blanco por el enlace. El valor puede ser un número, letras ó una palabra.
</a> Cierre el "target" ó blanco.

<a href="#nombre del target ó blanco"> Crea un enlace hacia el target ó blanco mencionado anteriormente.
</a> Cierre el "target" ó blanco.

 Etiquetas para imágenes

<img src="ruta al gráfico ó imágen"> Con la ruta al gráfico ó imágen definido, se pone un gráfico, foto ó otro imágen en el documento.

<img src="ruta al gráfico ó imágen" align="valor" border="valor"> Se pone un gráfico ó imágen, también un valor de formateo y marco. El valor de formateo puede ser left, center, right, top, middle ó bottom. Los valores del marco puede ser 1 y arriba (para el tamaño del marco al redidor del imágen), 0 significa no marco.

<img src="ruta al gráfico ó imágen" vspace="valor" hspace="valor"> El vspace y hspace valores define un espacio vertical y horizontal. Valores son 1 y arriba.

<hr size="valor" width="valor" noshade> Crea una línea horizontal en el documento, los valores son size, width y noshade. El size define el alto de la línea, ó grueso. El width define el ancho de la línea en pixeles ó percentaje y el valor de noshade crea una línea sin sombra.

 Etiquetas para tablas ó "tables"

<table> Crea un tabla ó "table".
</table> Cierre la tabla ó "table".

<tr> Crea una fila de una tabla ó "table".
</tr> Cierre la fila de una tabla ó "table".

<td> Crea una celda en una fila de la tabla ó "table", una fila puede tener más que una celda.
</td> Cierre la celda en una fila de la tabla ó "table".

<th> Crea una celda de la cabeza de la tabla ó "table", eso es una celda normal, pero con texto en negrito y centrado.
</th> Cierre la celda de la cabeza de la tabla ó "table".

<table width="valor en pixeles ó %"> Define el ancho de la tabla ó "table", valores son en pixeles, ó como un porcentaje del ancho del documento.

<table border="valor aqui"> Crea un marco al redidor de la tabla ó "table", el valor es en pixeles, si un valor de 0 esta proporcionado, la tabla no va tener marco.

<table cellspacing="valor aqui"> Para definir la cantidad de espacio entre celdas de una tabla ó "table", valores son en pixeles.

<table cellpadding="valor aqui"> Para definir la cantidad de espacio entre el marco y todos las celdas en la tabla ó "table", valores son en pixeles.

<td align="valor aqui"> ó <tr align="valor aqui"> Para definir el alinamiento del contenido de las celdas ó fila de una tabla ó "table. Valores son left, center ó right.

<td valign="valor aqui"> ó <tr valign="valor aqui"> Para definir el alinamiento vertical del contenido de las celdas ó filas de una tabla ó "table". Valores son top, middle ó bottom.

<td colspan="valor aqui"> Para definir la cantidad de columnas que ocupa una celda.

<td rowspan="valor aqui"> Para definir la cantida de filas que ocupa una celda. El valor predeterminado es 1.

<td nowrap> Para que el texto no corre a la línea siguiente.

 Marcos

<frameset> En cuando creas un documento de marcos, esta etiqueta reemplaza la etiqueta del cuerpo ó <body>.
</frameset> Cierre los marcos.

<frameset rows="primer valor,segundo valor"> Para dar un valor a las filas dentro del conjunto de marcos, el primer valor es desde la parte de arriba en el documento, el segundo desde el punto final del primer valor. Valores son en pixeles ó porcentajes del alto de la ventana del navigador.

<frameset cols="primer valor,segundo valor"> El mísmo que frameset rows, pero esta vez los valores son desde la izquierda de la ventana del navigador.

<frame> Para crear un marco sencillo dentro de un conjunto de marcos.

<noframes> Abrirá la etiqueta de noframes ó no marcos, describe que aparecerá en el navigador si el navigador no puede soportar marcos.
</noframes> Cierre la etiqueta.

<frame src="URL de documento aqui"> La ruta a un documento de HTML u otro que desplega dentro del marco.

<frame name="nombre del marco"> Define un nombre por el marco.

<frame scrolling="valor aqui"> Cominica al navigador si un marco tiene barra de desplazamiento vertical ó no, valores son yes, no ó auto. el valor automático es auto.

<frame marginwidth="valor aqui"> Define el tamaño de las margenes de la izquierda y derecha dentro de un marco, valores son 1 ó más.

<frame marginheight="valor aqui"> Define las margenes de arriba y abajo dentro de un marco, valores también son 1 ó más.

<frame noresize> Impede un usuario cambiar el tamaño de un marco.

 Formatos

<form> Para crear un formato dentro de un documento de HTML.
</form> Cierre el formato.

<form method="valor aqui"> Describe el método que usa el formato, valores son post y get.

<form action="URL aqui"> Para definir el URL donde la información del formato se enviará. El URL puede ser un CGI, ó documento de PHP ó ASP.

<select multiple name="valor aqui" size="valor aqui"> Crea un menú de deplacamiento vertical, el nombre ó name será el nombre proporcionado para la área de selección y el tamaño ó size definará el número de objetos visibles del menú.
<option value="valor aqui"> Crea cada artículo del menú y proporciona un valor ó nombre. El valor proporcionado es el valor que será enviado.
</select> Cierre la área de selección de articulos.

<select name="valor aqui"> Crea y proporciona un nombre a un menú de tipo deplazamiento vertical.
<option value="valor aqui"> Crea cada artículo del menú y proporciona un valor ó nombre. El valor proporcionado es el valor que será enviado.
</select> Cierre la área de selección.

<input type="text" name="valor aqui" size="valor aqui"> Crea una área de texto de una sola línea, el valor del nombre ó name se usa para identificar el campo de texto y el tamaño ó size será su tamaño en caráctares.

<input type="checkbox" name="valor aqui"> Crea una área de "checkbox" ó cajita para palomita, el valor del nombre ó name es el valor que será enviado.

<input type="radio" name="valor aqui"> Crea un "radio button", el valor del nombre ó name es el valor que será enviado.

<textarea name="valor aqui" cols="valor aqui" rows="valor aqui"> Crea una área de campo de texto, el valor del nombre ó name será el valor para identificar el campo de texto, los cols son los columnas que ocupa el campo de texto y los rows será el alto del campo de texto.
</textarea> Cierre el campo de texto.

<input type="submit" value="valor aqui" name="valor aqui"> Crea un boton para enviar la información del formato el valor es el text que aparece en el boton. El valor del nombre ó name es el nombre usado para identificar el boton para enviar.

<input type="reset" value="valor aqui"> Crea un boton para borrar la información del formato. El valor ó value es el texto que aparece en el boton.

<input type="image" name="valor aqui" src="ruta al gráfico ó imágen" border="valor aqui"> Crea un boton el la forma de una imágen ó gráfico (su propio imágen), El nombre ó name es el nombre que usará para identificar el boton, el src es la ruta hacia el gráfico ó imágen usado y el marco ó border define si hay o no hay marco al redidor del gráfico, dependienmte del valor proporcionado, los valores del marco ó border son 1 por un marco ó 0 para sin marco.

Para más información sobre HTML 4, vea http://www.w3.org/TR/html4/.
Diseño y desarrollo de páginas web, México D.F.  Arroba Web Design, México DF, contacto por e-mail - design@mexartwork.com Tel. (México D.F.) 044-552079-4944