Etiquetas Básicas de HTML

Etiquetas bsicas de HTML
Las etiquetas ms simples y de uso ms comn en HTML.
Etiquetas Bsicas
Headings
Nos definen el tamao de un ttulo o cabecera.
<h1> nos d el tipo de letra ms grande. <h6> nos d el tipo de letra ms pequeo.
HTML agrega automaticamente un espacio antes y despus de cada ttulo.
<h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que
es uno de los parmetros que Google y dems buscadores tiene en cuenta, a la hora de indexar un sitio web.
Ejemplo
Cdigo
<html> <head> <title>Headings</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
Resultado
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Prrafos
Los prrafos se definen con la etiqueta
<p>.
Ejemplo
Cdigo Resultado
<html> <head> <title>Prrafos</title> </head> <body> <p>Este es el primer prrafo.</p> <p>Y este es el segundo prrafo.</p> </body> </html>
Este es el primer prrafo. Y este es el segundo prrafo.
Comentarios
La etiqueta  se utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo.


* Nota que el signo de exclamacin se coloca solo al principio del cdigo.
Salto de lnea
El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos cortar una lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos.
Ejemplo
Cdigo
Esto es <br> un salto de l<br>nea. Esto es un salto de l nea.
Resultado
Trazar una lnea

La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta
<hr> no tiene cierre.
Ejemplo
Cdigo
Resultado
<hr>
Tabla con las etiquetas bsicas

Etiquetas <h1> a <h6> <p>  <br> <hr> Descripcin Define el tamao de los encabezados Define un prrafo Define un comentario Define un salto de lnea Define una lnea horizontal Ej.
Formato de texto con HTML

Elige como decorar y visualzar los textos de tu sitio.
Formato bsico del texto

HTML nos permite definir el formato de visualizacin del texto en la pantalla. Muy til para cuando queramos resaltar o enfatizar un texto en especial. Tambin muy usado para subrayar o escribir subndices o superndices. Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas:
Ejemplo
Cdigo
<b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itlica</i> <small>Texto pequeo</small> <strong>Texto fuerte</strong> <sub>Texto subndice</sub> Texto Texto Texto Texto Texto Texto normal normal normal normal normal normal
Resultado
Texto en negrita
Texto grande
Texto enfatizado Texto en itlica
Texto pequeo
Texto fuerte
<sup>Texto superndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>
Texto Texto Texto Texto Texto
normal Texto subndice normal Texto superndice normal Texto subrayado normal Texto tachado normal Texto teletipo
Etiquetas para dar forma al texto

Etiquetas <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <tt> <s> <strike> <u> Define un texto en negrita Define un texto grande Define un texto enfatizado Define un texto en itlica Define un texto pequeo Define un texto fuerte Define un texto subndice Define un texto superndice Define un texto subrayado Define un texto tachado Define un texto de teletipo Define un texto tachado. Desaprobado. Use <del> en su lugar Define un texto tachado. Desaprobado. Use <del> en su lugar Define un texto subrayado. Desaprobado. Use <ins> en su lugar Descripcin
Etiquetas de "Texto estructurado"

Estas estiquetas son usadas comunmente para mostrar cdigos de programacin. Etiquetas <code> <kbd> <samp> <var> <pre> <listing> <plaintext> <xmp> Define un texto del teclado Define un texto ejemplo de cdigo de computadora Define una variable Define un texto preformateado Desaprobado. Use <pre> en su lugar Desaprobado. Use <pre> en su lugar Desaprobado. Use <pre> en su lugar Descripcin Define un texto en cdigo de computadora
Etiquetas de citaciones y definiciones

Etiquetas <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Descripcin Indica una forma abreviada (p.ej., WWW, HTTP, etc.) Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.) Define la informacin sobre el autor Define la direccin del texto (p.ej., de izq. a der., de der. a izq.) Designa una cita larga Designa una cita corta Contiene una cita o una referencia a otras fuentes Indica que aqu es donde se define el trmino encerrado
Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos con los otros.
Los Enlaces o Links

Los enlaces o links(en Ingls) nos permiten conectarnos con otros documentos: una imagen un video un archivo de sonido sitios en la web(otra pgina web) mandar un email Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabraanchor(ancla). La etiqueta <a> tiene como cierre </a>.
Sintaxis
<a atributo="valor">Texto del enlace</a>
Ejemplo
Vamos a crear un enlace hacia la home de Virtualnauta.com
Cdigo
<body> <a href="/http://www.virtualnauta.com/">La home de Virtualnauta</a> </body>
Resultado
La home de Virtualnauta
EL atributo target
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.
Ejemplo
Vamos a abrir el documento en una nueva pgina del navegador.
Cdigo
<body> <a href="http://www.vitualnauta.com/" target="_blank">La home de Virtualnauta</a> </body>
Resultado
La home de Virtualnauta
EL atributo name
Este atributo se usa para definir una determinada ubicacin dentro de la pgina. Supongamos que definimos un destino de vnculo llamado "destino-uno" en el archivo "uno.html".
Sintaxis
...texto antes del destino de vnculo... <a name="destino-uno">Captulo 1</a>  ...texto despus del destino de vnculo... Y en otra parte de la pgina, del mismo sitio o de otro sitio, creamos un enlace a Captulo 1. Para ello utilizamos el signo # seguido del nombre del enlace. <a href="http://www.misitio.com/uno.html #destino-uno">Ir al Captulo 1</a> O en caso que el enlace est definido en el mismo documento: <a href="/#destino-uno">Ir al Captulo 1</a>
Creando un enlace a un email

Se utiliza en caso que queramos que un enlace mande un email. En el momento que presionamos dicho link se abrir automaticamente el programa de email que tenemos definido por defecto.
Ejemplo
Cdigo
<body> <a href="/mailto: alguien@gmail.com">Mandar email</a> </body>
Resultado
Mandar email mailto: nos indica la direccin email a la que va dirigida, en este ejemplo: alguien@gmail.com.
Un enlace a partir de una imagen

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.
Ejemplo
Cdigo
<body> <a href="http://www.google.com/"><img src="/../graficos/google.gif"></a> </body>
Resultado
Etiquetas y atributos de los enlaces

Etiquetas Atributos Valor Descripcin Ej.
<a> href hreflang URL cdigo de lenguaje nombre de seccin alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark nofollow rev alternate
Define un vnculo Direccin URL a conectar. Especifica el lenguaje de la URL.
name
Para crear un marcapginas dentro de un documento. Especifica la relacin entre el documento actual y el destino del vnculo.
rel
Especifica la relacin entre el destino del vnculo y
designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark coords coordenadas
el documento actual(vnculo inverso).
Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del rea.
shape rect rectangle circ circle poly
Usamos coords="izquierda, arriba, derecha, abajo"
Usamos coords="centro x, centro y, radio"
Usamos coords="x1, y1, x2, y2, .., xn, yn"
polygon target _blank _parent _self Indica donde abrir el URL. El URL se abrir en una nueva ventana. El URL se abrir en el frameset padre. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en una ventana de tamao completo. Especifica el tipo de contenido a conectar.
_top
type
tipo de contenido
Atributos estndard
id, class, title, style, dir, lang, tabindex, accesskey Si desea una descripcin completa, dirjase a: atributos estndard.
Eventos intrnsecos
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si desea una descripcin completa, dirjase a: eventos intrnsecos.
Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos documentos diferentes.
Los Frames
Los frames(marcos en espaol) permiten a los autores presentar documentos con vistas mltiples. Esto posibilita mantener cierta informacin visible mientras otras vistas se desplazan o se sustituyen.
Cada vista es un documento independiente de los otros.
La etiqueta frameset
La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos y a cada uno asignarle una medida distinta. Cada frameset define un grupo de filas y columnas.
Sintaxis
<frameset rows="valor1, valor2, valor_n" cols="valor3, valor4, valor_n"> ...el resto de la definicin... </frameset> Los posibles valores para definir el tamao de las filas y de las columnas pixels | % | *
La etiqueta frame
La etiqueta <frame> asigna que documento colocaremos en cada marco.
Sintaxis
<frameset cols="25%,75%">  <frame src="/URL_1"> <frame src="/URL_2"> </frameset> Nota: La etiqueta <frame> no debe llevar etiqueta de cierre
La etiqueta noframes
La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames. <noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames, el texto del <noframes> no se mostrar si usamos la etiqueta <noframes> el texto de la misma debe ir entre las etiquetas <body> </body> <frameset rows="25%,75%"> <noframes> <body> Su navegador no soporta frames </body> </noframes>
<frame src="/frame1.htm"> <frame src="/frame2.htm"> </frameset>
La etiqueta iframe
La etiqueta <iframe> se usa para crear un frame en lnea que contiene otro documento. El iframe puedo mostrar una ventana que contenga otra pgina Web dentro de la pgina que estamos diseando
Sintaxis
<iframe src="/URL del sitio que desea mostrar">
Ejemplo
Cdigo
<iframe src="/http://www.virtualnauta.com" width="100%"> </iframe>
Resultado
En este ejemplo podemos observar que la ventana del resultado nos est mostrando la pgina principal de Virtualnauta.com.
Etiquetas y atributos de los marcos

Etiquetas <frameset> cols pixels % * rows pixels % * <frame> frameborder 0 1 longdesc URL Define una subventana. Especifica si se mostrar o no el borde alrededor del frame. URL con una larga descripcin del contenido del frame (se usa para navegadores que no soportan frames). Define el margen superior e inferior del frame. Define el margen izquierdo y derecho del Asigna el nmero y el tamao de las filas. Atributos Valor Descripcin Organiza ventanas mltiples. Asigna el nmero y el tamao de las columnas. Ej
marginheight marginwidth
pixels pixels
frame. name noresize scrolling frame_name noresize yes no auto src <noframes> <iframe> align left right top middle bottom frameborder 0 1 height longdesc pixels % URL URL con una larga descripcin del contenido del iframe (se usa para navegadores que no soportan frames). Define el margen superior e inferior del iframe. Define el margen izquierdo y el derecho del iframe. Define un nombre para el iframe. Determina la accin de la barra de desplazamiento. Especifica si se mostrar o no el borde alrededor del iframe. Define la altura del iframe. URL Archivo que va a ser mostrado en el frame. Muestra un texto para los navegadores que no soportan frames. Crea un frame en lnea que contiene otro documento. Alineacin del iframe con respecto al texto. Define un nombre para el frame. No le permite al usuario modificar el tamao del frame. Determina la accin de la barra de desplazamiento.
marginheight marginwidth name scrolling
pixels pixels nombre yes no auto
src width
URL pixels %
Archivo que va a ser mostrado en el iframe. Define el ancho del iframe.
Atributos estndard
id, class, title, style, lang Si deseas una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si deseas una descripcin completa, dirgete a: eventos intrnsecos.
Tablas de HTML
Las usamos para componer un sitio o simplemente como tabla de datos.
Las tablas
Las tablas son herramientas muy tiles para presentar datos en forma de tablas y para el diseo de pginas y ubicacin de textos y grficos dentro de las mismas.
Caractersticas de las tablas

Definimos las tablas con la etiqueta <table>. La tabla est dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc.
Sintaxis
<table> <tr> <td>contenido celda 1</td> <td>contenido celda 2</td> </tr> </table>
Ejemplo
Vamos a crear una pequea tabla para ver su comportamiento
Cdigo
<table border="1px"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> Nombre Apellido Pedro Garcia
Resultado
</tr> </table>
Bordes de las tablas

Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se vern los bordes que dividen las celdas de la tabla.
Ejemplo
Cdigo
<table border="3px"> <tr> <td>Borde</td> <td>3 pixels</td> </tr> </table> Veamos un ejemplo sin bordes Borde 3 pixels
Resultado
Ejemplo
Cdigo
<table> <tr> <td>Esta tabla es</td> <td>Sin bordes</td> </tr> </table>
Resultado
Esta tabla es Sin bordes
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.
Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>.
Ejemplo
Cdigo
<table border="1px"> <tr> <th>Nombre</th> Nombre
Resultado
Apellido
<th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table>
Pedro Juan
Garcia Perez
La etiqueta <th> siempre muestra los encabezados remarcados.
Mrgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los mrgenes con el atributo cellpadding.
Ejemplo
Cdigo
<table border="1px" cellpadding="20px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> Nombre
Resultado
Apellido
Pedro
Garca
Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mnimo entre las palabras dentro de cada celda y los bordes de las mismas.
Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda. El mismo est definido con el atributo cellspacing.
Ejemplo
Cdigo
<table border="1px" cellspacing="15px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> Nombre Pedro
Resultado
Apellido Garcia
Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla.
Etiquetas y atributos de las tablas

Etiquetas <table> align Desaprobado left center right bgcolor Desaprobado rgb(x,x,x) #xxxxxx nombre_color border cellpadding pixels pixels % cellspacing pixels % Espacio entre celdas. Espesor del borde de la tabla. Espacio entre la pared de la celda y el contenido. Color de fondo de las tablas. Use la propiedad background de CSS en su lugar. Atributos Valor Descripcin Define una tabla. Alnea las tablas. Use la propiedad position de CSS en su lugar. Ej
frame
void above below hsides lhs rhs vsides box border
Especifica cual de los bordes alrededor de la tabla ser visible.
rules
none groups rows cols all
Especifica las lneas divisorias horizontales y verticales.
summary
texto
Resumen del contenido de la tabla para navegadores sin visualizador. Especifica el ancho de la tabla.
width
% pixels
<tr> align right left center justify
Define una fila. Alnea horizontalmente el texto en la celda.
char bgcolor Desaprobado rgb(x,x,x) #xxxxxx nombre_color char carcter Especifica que un carcter ("."o",") acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica la posicin vertical de los datos dentro de la celda. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar.
charoff
pixels %
valign
top middle bottom baseline
<td> <th>
Define una celda. Define los encabezados de una tabla. abbr texto abreviado Especifica una versin abreviada del contenido de una celda. Alnea horizontalmente el texto en la celda.
align
left right center justify char
axis
nombre de la categora
Sita una celda en categoras conceptuales.
bgcolor Desaprobado
rgb(x,x,x) #xxxxxx nombre_color
Color de fondo de las celdas. Use la propiedad background de CSS en su lugar.
char
carcter
Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Indica el nmero de columnas que esta celda debe anexar.
charoff
pixels %
colspan
nmero
headers
lista de nombres Lista de celdas de encabezado que de celdas proporcionan informacin de encabezado para la celda de datos actual. pixels Especifica la altura de la celda. Use la propiedad height de CSS en su lugar. Si est presente, deshabilita el ajuste automtico de lneas. Use CSS en su lugar. Indica el nmero de filas que esta celda debe anexar. Este atributo especifica el conjunto de celdas de datos para las cuales la celda de encabezado actual proporciona informacin de encabezado.
height Desaprobado nowrap Desaprobado rowspan
nowrap
nmero
scope
col colgroup row rowgroup
valign
Especifica la posicin vertical de los datos dentro de una celda.
width Desaprobado
pixels %
Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar.
<caption> align Desaprobado top bottom left right <colgroup> <col>
Define el ttulo de la tabla. Ubicacin del ttulo con respecto a la tabla. Use la propiedad caption-side de CSS en su lugar.
Crea un grupo explcito de columnas. Permite a los autores compartir atributos entre varias columnas. align right left center justify char char carcter Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica el nmero de columnas de un grupo de columnas. Alnea verticalmente el contenido en el grupo de columnas. Alnea horizontalmente el contenido en el grupo de columnas.
charoff
pixels %
span
nmero
valign
top middle bottom
baseline width % pixels longitud relativa <thead> <tbody> <tfoot> Las filas de una tabla pueden agruparse en una cabecera de tabla <thead>, un pie de tabla <tfoot> y una o ms secciones de cuerpo de tabla <tbody>. align right left center justify char char character Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica la posicin vertical de los datos dentro de la celda. Alnea horizontalmente el texto en la celda. Define el ancho del grupo de columnas.
charoff
pixels %
valign
Atributos estndard
id, class, title, style, dir, lang Si desea una descripcin completa, dirjase a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si desea una descripcin completa, dirjase a: eventos intrnsecos.
Listas - Listados
Las listas son ideales para el diseo de mens.
Las listas
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas: Ordenadas. Desordenadas. De definicin.
Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo nmeros ,letras o signos. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.
Ejemplo
Vamos a crear una lista ordenada
Cdigo
<ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol> 1. Naranjas 2. Manzanas 3. Bananas
Resultado
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.
Listas Desordenadas
Exponen la lista anteponiendo un punto, cuadrado o tringulo negro.
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.
Ejemplo
Cdigo
<ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul> Tomates Pepinos Cebollas
Resultado
Listas de definicin
Se utilizan para definir trminos. Las listas de definicin se representan con la etiqueta <dl>. Los trminos de las mismas con <dt>. La definicin de esos trminos comienza con <dd>.
Ejemplo
Cdigo
<dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azcar</dd> </dl>
Resultado
Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar
Dentro de las etiquetas <dd> se pueden agregar imgenes, prrafos, otras listas, etc.
Etiquetas y atributos de las listas

Etiquetas <ol> compact Desaprobado start Desaprobado type Desaprobado nmero del 1 objeto A a Atributos Valor Descripcin Define una lista ordenada. Representa la lista de un modo ms compacto. Use las propiedades de las listas en CSS en su lugar. Especifica el nmero del primer objeto de una lista. Use las propiedades de las listas en CSS en su lugar. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en Ej.
I i 1 <ul> compact Desaprobado type Desaprobado disc square circle <li> type Desaprobado disc square circle A a I i 1 value Desaprobado <dl> <dt> <dd> <dir> Desaprobado <menu> Desaprobado nmero del objeto
CSSen su lugar.
Define una lista desordenada. Representa la lista de un modo ms compacto. Use las propiedades de las listas en CSS en su lugar. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar. Define el comienzo del Item. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
Establece el nmero del objeto de lista actual. Use las propiedades de las listas en CSS en su lugar. Define una lista de definicin. Trminos de los objetos de lista. Descripcin de los objetos de lista. Acta como <ul>. Acta como <ul>.
Atributos estndard
id, class, title, style, dir, lang Si deseas una descripcin completa, dirjete a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si desea una descripcin completa, dirjete a: eventos intrnsecos.
Formularios en HTML
Gua prctica de como disear los formularios HTML para tu sitio.
Los formularios
Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).
La etiqueta form
La etiqueta <form> se utiliza para definir un formulario. El atributo action es obligatorio y nos indica el documento que procesar los datos del formulario enviado. Tambin contamos con el atributo method que nos define el mtodo por el cual se enviarn los datos del usuario al servidor.
Sintaxis
<form action="URL" method="valor"> ... </form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos. Los usuarios interaccionan con los formularios a travs de las llamados controles. Tipos de controles: Botones (buttons) Casillas de verificacin (checkboxes) Radiobotones (radio buttons) Menes (menus) Entrada de texto (text input) Seleccin de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls) El atributo type especifica el tipo de control a crear.
Sintaxis
</form> <input type="control" atributo="valor"> </form>
El control "text"
Crea un control que nos permite ingresar un texto en una lnea.
Ejemplo
Cdigo
<form action="datos.php" method="get"> Nombre: <input type="text" name="nombre"> Apellido: <input type="text" name="apellido"> </form> Nombre: Apellido:
Resultado
Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo
El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de posibilidades.
Ejemplo
Cdigo
<form action="edades.asp" method="post"> Edad? <input type="radio" name="edad" value="menor">menor de 17 <input type="radio" name="edad" value="adulto">entre 18 y 60 <input type="radio" name="edad" value="mayor">mayor de 61 </form> Edad? menor de 17 entre 18 y 60 mayor de 61
Resultado
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio. La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese el formulario.
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo
Cdigo
<form action="hobbie.php" method="get"> Pasatiempos? <input type="checkbox" name="pasa" value="tv">TV <input type="checkbox" name="pasa" value="libros">Libros <input type="checkbox" name="pasa" value="musica">Msica <input type="checkbox" name="pasa" value="otros">Otros TV Libros
Resultado
Pasatiempos?
</form>
Msica Otros
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox. La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese el formulario.
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseas.
Ejemplo
Cdigo
<form action="verificacion.php" method="post"> Nombre: <input type="text" name="nombre"> Password: <input type="password" name="pass"> </form> Nombre: Password:
Resultado
El control "submit" y el control "reset"

El control submit es el botn de envio de datos del formulario y el control reset es el botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
Ejemplo
Cdigo
<form action="datos_personales.php" method="post"> Nombre: Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" Contrasea: name="secreto"> Enviar Borrar <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> Nota: el valor de la propiedad value define el texto dentro del botn.
Resultado
El control "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo
Cdigo
<form action="archivo.php" method="post"> Ingrese la foto: <input type="file" name="foto"> </form> Ingrese la foto:
Resultado
El control "hidden"
El control hidden nos permite enviar informacin oculta a los ojos del usuario.
Ejemplo
Cdigo
<form action="oculto.php" method="post"> Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" name="contra"> <input type="hidden" value="cookie"> </form> Nombre: Contrasea:
Resultado
El control "image"
El control image nos permite utilizar una imagen personalizada como botn de un formulario.
Ejemplo
Cdigo
<form action="archivo.php" method="post"> Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" name="contra"> <input type="image" src="/enviar.jpg"> </form> Nombre: Contrasea:
Resultado
Las etiquetas select y option

La etiqueta <select> es usada para crear un men desplegable. Cada opcin ofrecida por el men se representa con la etiqueta <option>
Ejemplo
Cdigo
<form action="continentes.php" method="get"> <select name="continente"> <option value="america">Amrica</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceana</option> <option value="africa">Africa</option> </select> </form>
Resultado
La etiqueta textarea
Se usa para crear un control de entrada de texto multilnea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el recuadro del rea de texto.
Ejemplo
Cdigo
<form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aqu podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>
Resultado
Etiquetas y atributos de los formularios

Etiquetas <form> action Obligatorio accept URL Lista de tipos de contenido Atributos Valor Descripcin Define un formulario para el ingreso de datos. Especifica un archivo procesador del formularios. Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejar correctamente. Especifica la lista de codificacin de caracteres para los datos introducidos que son aceptados por el servidor que procesa este formulario. Ej
accept-charset
Lista de codificacin de caracteres
enctype method
tipo de contenido Especifica el tipo de contenido usado para enviar el formulario al servidor. Especifica que mtodo HTTP se usar para enviar el conjunto de datos del formulario. get Debera usarse cuando los datos del formulario no tienen efectos secundarios. Debera usarse cuando el formulario causa efectos secundarios(p.ej., subscripcin a un servicio o modificar una base de datos. Da nombre al elemento de modo que se pueda hacer referencia a l desde hojas de estilos o scripts.
post
name
cdata
target
_blank _self _parent _top
El URL se abrir es una nueva ventana. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en el frameset padre. El URL se abrir en una ventana de tamao completo. Define el tipo de control de entrada. Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejar correctamente. Nota: Usar solo con type="file". Define el alineamiento del texto siguiente a la imagen. Nota: Usar solo con type="image".
<input> accept Lista de tipos de contenido
align
left right top texttop middle absmiddle baseline bottom absbottom
alt
texto
Define un texto alternativo para la imagen. Nota: Usar solo con type="imagen". Especifica que el botn esta marcado("on"). Nota: Usar solo con type="radio" o type="checkbox". Deshabilita el control para la entrada de datos por parte del usuario. Nota: No debe usarse con type="hidden".
checked
disabled
maxlength
nmero
Nmero mximo de caracteres que puede introducir el usuario. Nota: Usar solo con type="text" o type="password". Asigna el nombre de control. Nota: Este atributo es requerido para type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", type="radio". Indica que el valor no puede ser modificado por el usuario . Nota: Usar solo con type="text".
name
nombre de control
readonly
size
nmero de caracteres URL checkbox file hidden image password radio reset submit text
Define el tamao del elemento input. Nota: No debe usarse con type="hidden". Define el URL de la imagen a mostrar. Nota: Usar solo con type="image". Especifica el tipo de control a crear.
src type
value
valor
Para los botones: reset y submit: define el texto en el botn. checkbox y radio: (requerido) define el resultado del elemento input cuando es pulsado. hidden, password y text: define el valor por defecto del elemento. Define un rea de texto(multi-lnea). Nmero de columnas visibles en el rea de texto. Nmero de filas visibles en el rea de texto. Deshabilita los controles de entrada. Especifica un nombre para el rea de texto. El usuario no puede modificar el contenido en el rea de texto. Adjunta informacin a los controles.
<textarea> col Obligatorio rows Obligatorio disabled name readonly <label> for <fieldset> <legend> align Desaprobado top bottom left idref nombre del rea de texto nmero nmero
Referencia a una palabra ID definida por otro atributo. Dibuja un recuadro alrededor de los elementos. Permite a los autores asignar un ttulo a un fieldset. Especifica la posicin de la leyenda con respecto al fieldset.Use las propiedades de ubicacin de CSS en su lugar.
right <select> disabled multiple name size <optgroup> label Obligatorio disabled <option> label texto texto nombre nmero Crea un men desplegable. Deshabilita el men. Si est activado permite selecciones mltiples. Define un nico nombre para un men desplegable. Define el nmero visible de Items en el men desplegable. Permite a los autores agrupar opciones logicamente. Especifica el rtulo del grupo de opcin. Deshabilita los controles de entrada.No funciona en IE Define una opcin en los mens desplegables. Permite escribir de forma sintetizada el conternido del atributo <option>. El navegador debera mostrar este valor en lugar del contenido de <option>. Deshabilita los controles de opcin. No funciona en IE Especifica que opcin aparecer como seleccionada. texto Especifica el valor inicial del control. Define un botn. disabled name type nombre button reset submit value <isindex> Desaprobado valor Asigna un valor inicial al botn. Use <input> en su lugar. Deshabilita el botn. Especifica un nombre para el botn. Define el tipo de botn.
disabled selected value <button>
Atributos estndard
id, class, title, style, dir, lang, acceskey, tabindex Si desea una descripcin completa, dirjase a: atributos estndard.
Eventos intrnsecos
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onselect, onchange Si desea una descripcin completa, dirjase a: eventos intrnsecos.
Imgenes en HTML
Las imgenes, grficos y fotos le dan vida y color a las pginas web.
Las imgenes
Para insertar imgenes en un sitio usaremos la etiqueta <img>. Esta etiqueta debe ir acompaada del atributo src que es el que contiene el URL de la ubicacin del archivo de la imagen. El atributo alt se utiliza para dar una breve descripcin de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razn, no muestre la misma. La etiqueta <img> no tiene cierre.
Sintaxis
<img src="/URL" alt="texto descriptivo">
Ejemplo
Cdigo
<img src="/../imagenes/foto1.jpg" alt="Dos nias de la mano">
Resultado
Las etiquetas map y area

La etiqueta map especifica un mapa de imgenes. Un mapa de imgenes es una imagen que permite clickear diferentes reas de la misma. Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributo
usemap de la etiqueta img. De esta forma se establece la relacin imagen-mapa. La etiqueta area se utiliza para definir regiones o reas dentro de un mapa de imgenes y los enlaces asociados a esas regiones.
Ejemplo
Cdigo
<img src="/../imagenes/formas.gif" usemap="#map1"> <map name="map1"> <area href="/cuadrado.html" shape=rect coords="0,75,100,175"> <area href="/circulo.html" shape=circle coords="175,50,50"> <area href="/triangulo.html" shape=poly coords="125,250, 225,250,175,165"> </map>
Resultado
Etiquetas y atributos de las imgenes

Etiquetas <img> alt Requerido src Requerido align Desaprobado text Atributos Valor Descripcin Define una imagen. Breve descripcin de la imagen. Ej.
URL
Direccin URL de la imagen a mostrar.
top bottom middle left right
Alnea la imagen de acuerdo al texto circundante. Use las propiedades de ubicacin de CSS en su lugar.
border Desaprobado
pixels
Define el borde alrededor de la imagen. Use las propiedades de los bordes de CSSen su lugar. Define la altura de la imagen.
height
pixels %
hspace Desaprobado
pixels
Deja espacios en blanco a derecha e izquierda de la imagen. Use las propiedades de ubicacin de CSS en su lugar.
ismap
URL
Define el mapa de la imagen del lado del servidor. La URL a un documento con una larga descripcin de la imagen. Define el mapa de una imagen del lado del cliente. Deja espacios en blanco arriba y abajo de la imagen. Use las propiedades de ubicacin de CSS en su lugar.
longdesc
URL
usemap
URL
vspace Desaprobado
pixels
width
pixels %
Define el ancho de la imagen.
<map>
Define el mapa de una imagen del lado del cliente. name nombre nico Define un nico nombre para la etiqueta <map>. Define una regin en el mapa de una imagen. alt Requerido coords text Breve descripcin de la imagen.
<area>
Especifica las coordinadas en donde se puede apretar.
href nohref
URL true false
Direccin URL del rea. Excluye un rea en el mapa de la imagen.
shape rect rectangle circ circle poly polygon target _blank _parent _self
Define la forma del rea. Usamos coords="izquierda,arriba,derecha,abajo".
Usamos coords="centro x,centro y, radio".
Usamos coords="x1,y1,x2,y2,..,xn,yn".
Indica donde abrir el URL. El URL se abrir en una nueva ventana. El URL se abrir en el frameset padre. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en una ventana de tamao completo. Permite incluir un applet Java en un documento HTML. Use la etiqueta<object> en su lugar.
_top
<applet> Desaprobado
Atributos estndard
id, class, title, style, dir, lang, tabindex, accesskey Si desea una descripcin completa, dirjase a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
Si desea una descripcin completa, dirjase a: eventos intrnsecos.
ndice de las etiquetas de HTML

Completo listado de todas las etiquetas HTML.
Gua de referencia
Se expone en esta pgina una tabla con todos los elementos de HTML. En la primer columna se exibe el nombre del elemento con un enlace a la pgina especfica del mismo. La columna "Des" con una letra "D" nos indica los elementos que estn desaprobados. La columna "DTD" con celdas vacas se refieren a todos los elementos que no han sido desaprobado o no aparecen en documentos con marcos o frames. La letra " L" se refiere a todos los elementos que no aparecen en documentos con marcos o frames. La letra "F" se refiere a todos los elementos incluidos aquellos documentos con marcos. La ltima columna nos da una pequea descripcin de cada elemento. Para una mejor comprensin de cada elemento, presione sobre el nombre del elemento deseado. Leyenda: D: Desaprobado L: Loose DTD (Definicin del Tipo de Documento Transicional) F: Frameset DTD (Definicin del Tipo de Documento con Marcos) Nombre a abbr acronym address applet area b base Etiqueta inicial <a> <abbr> <acronym> <address> <applet> <area> <b> <base> Etiqueta final </a> </abbr> </acronym> </address> </applet> Prohibido </b> Prohibido D L Informacin sobre el autor Applet Java rea de un mapa de imgenes en el lado del cliente Estilo de texto en negrita URI base del documento Des. DTD Descripcin Origen o destino del vnculo Abreviatura (p.ej.:WWW, HTTP, etc.)
basefont bdo big 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
<basefont> <bdo> <big> Opcional <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> Opcional <hr> Opcional <i> <iframe> <img> <input> <ins>
Prohibido </bdo> </big> </blockquote> Opcional Prohibido </button> </caption> </center> </cite> </code> Prohibido Opcional Opcional </del> </dfn> </dir> </div> </dl> Opcional </em> </fieldset> </font> </form> Prohibido </frameset> </h1> </h2> </h3> </h4> </h5> </h6> Opcional Prohibido Opcional </i> </iframe> Prohibido Prohibido </ins>
Tamao base de fuente Anular algoritmo BiDi I18N Estilo de texto grande Cita larga Cuerpo del documento Salto de lnea forzado Botn Ttulo de tabla
blockquote <blockquote>
Forma abreviada de DIV align=center Cita Fragmento de cdigo de computadora Columna de una tabla Grupo de columnas de una tabla Descripcin de una definicin Texto borrado Definicin
Lista tipo directorio Contenedor genrico de idioma/estilo Lista de definiciones Trmino definido nfasis Grupo de controles de un formulario
L F F
Cambio local de la fuente Formulario interactivo Subventana Subdivisin en ventanas Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado Cabecera del documento Separador horizontal Elemento raiz del documento Estilo de texto en itlica
Subventana en lnea Imagen incluida Control de formulario Texto insertado
isindex kbd label legend li link map menu meta noframes
<isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes>
Prohibido </kbd> </label> </legend> Opcional Prohibido </map> </menu> Prohibido </noframes>
Entrada de texto en una sola lnea con indicador Texto que debe introducir el usuario Texto del rtulo de un campo de formulario Leyenda de un grupo de campos Objeto de lista Un vnculo independiente del medio Mapa de imgenes en el lado del cliente
L F
Lista tipo men Metainformacin genrica Contenedor de contenidos alternativos para la representacin no basada en marcos Contenedor de contenidos alternativos para la representacin no basada en scripts Objeto incluido genrico Lista ordenada Grupo de opciones Opcin seleccionable Prrafo Valor de propiedad con nombre Texto preformateado Cita corta en lnea
noscript
<noscript>
</noscript>
object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea
<object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> Opcional <td> <textarea>
</object> </ol> </optgroup> Opcional Opcional Prohibido </pre> </q> </s> </samp> </script> </select> </small> </span> </strike> </strong> </style> </sub> </sup> </table> Opcional Opcional </textarea> D L D L
Estilo de texto tachado Ejemplo de salida de programas, scripts, etc. Sentencias de script Selector de opciones Estilo de texto pequeo Contenedor genrico de idioma/estilo Estilo de texto tachado nfasis fuerte Informacin de estilo Subndice Superndice Cuerpo de tabla Celda de datos de una tabla Campo de texto multilnea
tfoot th thead title tr tt u ul var
<tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>
Opcional Opcional Opcional </title> Opcional </tt> </u> </ul> </var> D L
Pie de tabla Celda de encabezado de tabla Cabecera de tabla Ttulo del documento Fila de una tabla Estilo de texto de teletipo o monoespacio Estilo de texto subrayado Lista no ordenada Variable o argumento de un programa
ndice de los atributos de HTML

Completo listado de todos los atributos de cada etiqueta HTML.
Los Atributos
Se expone en esta pgina una tabla con todos los atributos de HTML y a su lado el elemento al que corresponde con un enlace a la pgina especfica del mismo. La columna "Des" con una letra "D" nos indica que el atributo est desaprobado. La columna "DTD" con la letra "L" se refiere a atributos de los elementos que no aparecen en documentos con marcos o frames. La letra "F" se refiere a atributos de los elementos incluidos en documentos con marcos. La ltima columna nos da una pequea descripcin de cada atributo. Para una mejor comprensin de cada atributo, presione sobre el nombre del elemento deseado. Leyenda: D: Desaprobado L: Loose DTD (Definicin del Tipo de Documento Transicional) F: Frameset DTD (Definicin del Tipo de Documento con Marcos) Nombre abbr td, th Elementos Relacionados Des. DTD Descripcin Abreviatura de celda de cabecera Lista de codificaciones de
accept-charset form
caracteres soportados accept accesskey action form, input a, area, button, input,label, legend, textarea form Lista de tipos MIME para subir ficheros Carcter de la tecla de accesibilidad Procesador de formulario en servidor D D D D L L L L Ttulo de una tabla Alineacin vertical u horizontal Leyenda de un grupo de campos Posicin de la tabla respecto a la ventana Alineacin de texto Color de vnculos seleccionados Descripcin corta Descripcin corta Descripcin corta D L Lista de archivos separados por comas Lista de URIs separados por espacios Lista de cabeceras relacionadas separadas por comas D L Fichero de textura de fondo del documento Color de fondo de las celdas Color de fondo de una fila Color de fondo de una celda Color de fondo del documento
align align align align
caption applet, iframe, img, input,object legend table
align align align alink alt alt alt archive
hr div, h1, h2, h3, h4, h5, h6,p col, colgroup, tbody, td,tfoot, th, thead, tr body applet area, img input applet
D D D D
L L L L
archive
object
axis
td, th
background
body
bgcolor bgcolor bgcolor bgcolor
table tr td, th body
D D D D
L L L L
border
table
Controla la anchura del marco que rodea una tabla D L Anchura del borde de un vnculo Espacio dentro de celdas Espacio entre celdas Carcter de alineacin, por ej.: char=':' offset para carcter de alineacin Codificacin de caracteres del recurso vinculado Para radiobotones y casillas de verificacin URI del documento o mensaje fuente Informacin sobre la razn del cambio Lista de clases separadas por espacios Identifica una implementacin D D L L Control del flujo de texto Fichero de clase applet URI base para classid, data, archive D L URI base opcional para applet Tipo de contenido para code D L F Color de texto Lista de longitudes, por defecto: 100%(1 col) Nmero de columnas abarcado
border cellpadding cellspacing char
img, object table table col, colgroup, tbody, td,tfoot, th, thead, tr
charoff charset
col, colgroup, tbody, td,tfoot, th, thead, tr a, link, script
checked
input
cite cite class
blockquote, q del, ins Todos los elementosexcepto, base, basefont, head, html, meta, param, script, style, title object br applet object
classid clear code codebase
codebase codetype color cols
applet object basefont, font frameset
cols colspan
textarea td, th
por celda compact content coords coords dir, dl, menu, ol, ul meta area a D L Espacio reducido entre objetos Informacin asociada Lista de longitudes separadas por coma Para usar con mapas de mgenes en el cliente Referencia a datos del objeto Fecha y hora del cambio Declara el objeto pero no lo crea El AU puede retrasar la ejecucin del script Direccin de texto dbil/neutral Direccionalidad No disponible en este contexto D L Lista de nombres de fuentes separados por coma Empareja segn valor de campo ID Qu partes del marco representar F pintar bordes del marco? Lista de id's de celdas de encabezado L D D L L Altura del marco Altura de una celda Nueva altura Altura inicial URI del recurso vinculado URI que acta como URI base
data datetime declare defer
object del, ins object script
dir
Todos los elementosexcepto applet, base, basefont, bdo, br, frame, frameset, iframe, param, script bdo button, input, optgroup,option, select, textarea form basefont, font
dir disabled enctype face
for frame frameborder headers
label table frame, iframe td, th
height height height height href href
iframe td, th img, object applet a, area, link base
hreflang hspace http-equiv
a, link applet, img, object meta D L
Cdigo de idioma Espacio de relleno horizontal Nombre de encabezado HTTP de respuesta id nico en todo el documento Usar mapa de imgenes en servidor Para usar en menes jerrquicos Para usar en menes jerrquicos Cdigo de idioma
id ismap
Todos los elementos, excepto base, head, html, meta, script, style, title img, input
label label lang
option optgroup Todos los elementos, excepto applet, base, basefont, br, frame, frameset, iframe, param, script script D L
language
Nombre del lenguaje predefinido de scripts Color de los vnculos Vnculo a descripcin larga (complemente a alt)
link longdesc
body img
longdesc
frame, iframe
Vnculo a descripcin larga (complemente a title) Altura del margen en pxeles Anchura del margen en pixeles Mximo de caracteres para campos de texto Diseado para usar con estos medios Para representar en estos medios Mtodo HTTP usado para enviar el formulario Por defecto es
marginheight marginwidth maxlength
frame, iframe frame, iframe input
F F
media media method
style link form
multiple
select
seleccin simple name name button, textarea applet D L Permite a loa applets encontrarse entre s Nombre del campo Nombre del formulario, para los scripts F Nombre del marco, para designarlo como destino Nombre de la imagen, para los scripts Vnculo destino con nombre Enviar como parte del formulario Para su referencia por usemap Nombre de propiedad Nombre de metainformacin Esta regin no tiene accin F Permitir a los usuarios redimensionar marcos? Suprimir ajuste automtico de lneas Fichero applet serializado El elemento perdi el foco El valor del elemento fue modificado Se hizo clic con un botn del apuntador
name name
select form
name
frame, iframe
name
img
name name name name name nohref noresize
a input, object map param meta area frame
noshade nowrap
hr td, th
D D
L L
object onblur onchange
applet a, area, button, input,label, select, textarea input, select, textarea
onclick
Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title
ondblclick
Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a, area, button, input,label, select, textarea Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title frameset body F
Se hizo doble clic con un botn del apuntador El foco se dirigi hacia el elemento Se puls una tecla
onfocus onkeydown
onkeypress
Una tecla fue pulsada y soltada
onkeyup
Una tecla fue soltada
onload onload
Todos los marcos fueron cargados El documento fue cargado Se puls un botn del apuntador
onmousedown Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onmousemove Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onmouseout Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementosexcepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title form input, textarea form
El apuntador se movi al interior del elemento El apuntador se quit de encima del elemento El apuntador se movi encima del elemento Se solt un botn del apuntador
onmouseover
onmouseup
onreset onselect onsubmit
El formulario fue reinicializado Se seleccion parte de un texto El formulario fue enviado
onunload onunload profile
frameset body head
Se quitaron todos los marcos El documento ha sido quitado Diccionario con nombres de metainformacin
prompt readonly readonly rel rev rows
isindex textarea input a, link a, link frameset
Mensaje indicador Para texto y contraseas Tipos de vnculos directos Tipos de vnculos inversos
Lista de longitudes por defecto: 100%(1 fila) Nmero de filas abarcado por la celda Lneas de divisin entre filas y columnas Seleccionar forma de contenido Campo de aplicacin de una celda de cabecera
rows rowspan
textarea td, th
rules
table
scheme scope
meta td, th
scrolling
frame, iframe
Barra de desplazamiento o no Controla la interpretacin de las coordenadas Para usar con mapas de imgenes en el cliente
selected shape
option area
shape
size size size size
hr font input basefont
D D
L L [+/-]nn p.ej.: size="+1", size="4" Especfico de cada tipo de campo
Tamao de fuente
base para elementos "font" size span select col Filas visibles Los atributos de "col" afectan a "n" columnas Nmero de columnas por defecto en el grupo URI del script externo Para campos con imgenes F Fuente del contenido del marco URI de la imagen a incluir Mensaje a mostrar mientras se carga D L Nmero inicial de la secuencia Informacin de estilo asociada Propsito/estructura para salida de voz Posicin en el orden de tabulacin L D L Representar en este marco Color del texto del documento Ttulo consultivo Tipo de contenido consultivo Tipo de contenido para los datos Tipo de contenido para el valor cuando valuetype=ref Tipo de contenido para lenguaje de scripts Tipo de contenido para lenguaje de
span
colgroup
src src src src standby start style summary tabindex target text title type type type
script input frame, iframe img object ol Todos los elementos, excepto base, basefont, head, html, meta, param, script, style, title table a, area, button, input,object, select, textarea a, area, base, form, link body Todos los elementos, excepto base, basefont, head, html, meta, param, script, title a, link object param
type
script
type
style
estilos type type type type type usemap input li ol ul button img, input, object D D D L L L Qu tipo de control hace falta Estilo de objeto de lista Estilo de numeracin Estilo de grfico de lista Para usar como botn de formulario Usar mapa de imgenes en el cliente Alinecin vertical en celdas Especificar para radiobotones y casillas de verificacin Por defecto el contenido del elemento Valor de propiedad Se manda al servidor cuando se enva D L Reinicializar nmero de secuencia Cmo interpretar el valor D D D D L L L L L Anchura del marco Nueva anchura Anchura de la tabla D D L L Anchura de la celda Anchura inicial Especificacin de la achura de la columna Anchura por defecto Constante Color de los vnculos visitados Espacio vertical
valign value
col, colgroup, tbody, td,tfoot, th, thead, tr input
value
option
value value
param button
value valuetype version vlink vspace width width width width width width width
li param html body applet, img, object hr iframe img, object table td, th applet col
width
colgroup
de los COLs contenidos width pre D L
Eventos intrnsecos de HTML

Completo listado de todos los eventos que activan diferentes scripts.
Los Eventos
Esta es una lista de los eventos intrnsecos que pueden ser insertados dentro de ciertas etiquetas de HTML. Los eventos pueden ser, por ejemplo, scripts que se activan al realizar una determinada accin por parte del usuario del sitio. La tabla nos muestra los eventos, el elemento que lo utiliza y una pequea descripcin del mismo.
Eventos onload onunload onchange
Usar con frameset body frameset body input select textarea form form input textarea a area button input label select textarea
Descripcin El script corre cuando el documento es cargado. El script corre cuando el usuario elimina un documento de una ventana o marco. El script corre cuando el valor de entrada ha sido modificado. El script corre cuando se enva un formulario. El script corre cuando se reinicializa un formulario. El script corre cuando el usuario selecciona texto de un campo de texto. El script corre cuando el elemento pierde el foco ya sea con el mouse o por navegacin con tabulador.
onsubmit onreset onselect onblur
onfocus
a area button input label select textarea
El script corre cuando el foco se dirige hacia un elemento, ya sea con el mouse o por navegacin con tabulador.
onkeydown
Todos los elementos El script corre cuando se pulsa una tecla. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando se pulsa y se suelta una tecla. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando una tecla se suelta. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando se hace clic con el mouse. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando se hace doble clic con el mouse. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando el botn del mouse se pulsa
onkeypress
onkeyup
onclick
ondblclick
onmousedown
cuando est encima de un elemento. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onmousemove Todos los elementos El script corre cuando el mouse se mueve mientras est sobre un elemento. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando el mouse se aparta de un elemento. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando el mouse se sita sobre un elemento. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title Todos los elementos El script corre cuando el botn del mouse se suelta cuando est encima de un elemento. excepto applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title
onmouseout
onmouseover
onmouseup
Diseo de Pginas Web

Es la forma en que componemos nuestra pgina web. La ubicacin de cada elemento en su lugar.
Disposicin de los elementos de una pgina

La disposicin del contenido de nuestra pgina es importante para que esta sea ms simple de navegar o ms atractiva al usuario. La divisin de las diferentes secciones de una pgina(logo, men, banners, publicidad o el contenido mismo) se puede definir por medio de este sistema. Muchas veces deseamos que el contenido de nuestra pgina est dividido en 2 o ms columnas. Otras veces queremos insertar una imagen en algn lugar determinado de la pgina. Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes anchos de cada una de las columnas. Otro sistema ms efectivo, es el uso de estilos para la disposicin de los diferentes elementos dentro de la pgina. Pero ese tema lo estudiaremos en el tutorial de CSS.
Usando tablas para disear una pgina Web

El uso ms comn es el de las tablas para dar forma a la disposicin de los textos en la pgina. Esta seccin de la pgina est diseada en dos columnas. Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas. El secreto est en usar la tabla sin bordes y agregarle un pequeo valor a cellpadding. Se puede disear mucho ms de dos columnas. No importa cuanto texto le agregue a la pgina, siempre estar dentro de los bordes de la columna.
Cdigo del ejemplo

<html> <head> <title>Disposicin del texto</title> </head> <body> <table width="100%" border="0" cellpadding="5"> <tr> <td>Texto de la primera columna.</td> <td>Texto de la segunda columna.</td>
</tr> </table> </body> </html>
Disposicin de una pgina estndard

Este es un pequeo ejemplo de como disear una pgina estndard. Por supuesto que a cada seccin se le puede agregar un color distinto o grfica que le de vida a la pgina.
Ac ubicamos el logo o un banner
Men Vnculo 1 Vnculo 2 Vnculo 3
Ac va el contenido
Cdigo del ejemplo

<table width="100%" height="250px" cellspacing="1px" border="1px"> <tr height="50px"> <td colspan="2px"> <table title="Banner" border="0"> <tr> <td>Ac ubicamos el logo o un banner</td> </tr> </table> </td> </tr> <tr height="200px"> <td> <table title="Menu" border="0" width="100px"> <tr><td>Men</td></tr> <tr><td>Vnculo 1</td></tr> <tr><td>Vnculo 2</td></tr> <tr><td>Vnculo 3</td></tr> </table>
</td> <td> <table title="Contenido" border="0" width="400px"> <tr> <td>Ac va el contenido</td> </tr> </table> </td> </tr> </table>
Explicacin del ejemplo

La primera etiqueta <table> define el tamao general de la pgina. La segunda etiqueta <table> define la seccin superior de la pgina, donde se coloca generalmente el logo o un banner. La tercera seccin est definida por la etiqueta <table> y en el ejemplo colocamos el men. La ltima etiqueta <table> nos define el sector que lleva todo el contenido de la pgina. Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo cuantas veces sea necesario.
Hojas de estilo en cascada

El uso de CSS es el complemento ideal de HTML para el diseo de tu sitio.
Hojas de Estilo
Las hojas de estilo en cascada (CascadingStyle Sheets, CSS) son un lenguaje usado para definir la presentacin de un documento escrito en HTML. Con la versin HTML 4.0 todos los formatos de texto pueden ser definidos en una hoja de estilo por separado o dentro del mismo documento HTML. El uso de CSS es la manera ms adecuada de disear un sitio Web, ya que nos permite mucho ms flexibilidad a la hora de realizar cambios en el sitio.
Cmo se usan las hojas de estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma. Hay 3 formas de insertar una hoja de estilos: 1. Entre lneas
2. Hojas de estilo interna 3. Hojas de estilo externas
1. Entre lneas
Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style que se encuentra en casi todas las etiquetas. En este ejemplo aplicaremos un estilo(color rojo y un margen izquierdo de 30 pixels) a la etiqueta <p>, la cual determina que todo el contenido de la misma ser afectado.
Ejemplo
Cdigo
<p style="color:red; margin-left:30px"> Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo. </p>
Resultado
Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una sola pgina tiene un estilo nico. Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>
Ejemplo
Cdigo
<head> <style type="text/css"> body {background-color:blue} p {color:white} </style> </head> <body> <p>Fuentes blancas sobre fondo azul</p> </body> En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo por medio del valor text/css. En este ejemplo podemos observar que le hemos aplicado estilos a los siguientes elementos: body : define el color de fondo de la pgina en azul. p : define todas las fuentes de color blanco.
Resultado
Fuentes blancas sobre fondo azul
3. Hojas de estilo externas
Esta es la forma ideal para cuando queremos definir un sitio entero con una misma estructura y estilo. Para ello definimos todos los estilos en un documento en comn que se utilizar para todas las pginas del sitio Web. Con realizar los cambios en ese documento, podemos cambiar el aspecto de todo el sitio Web. Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento. Ejemplo de un enlace a una hoja de estilo <head> <link rel="stylesheet" type="text/css" href="/estilos.css"> </head> Las hojas de estilo deben llevar la terminacin (.css). Si desea estudiar ms en profundidad sobre las hojas de estilo, visite nuestro tutorial de CSS.
Etiquetas y atributos de las hojas de estilo.

Etiquetas <style> type media screen tty tv projection handheld print text/css Atributos Valor Define un estilo. Define el tipo de contenido. El medio para la informacin del estilo. Para pantallas no paginadas de computadora. Para medios que utilicen una cuadrcula de caracteres de ancho fijo, como teletipos. Para dispositivos tipo televisin . Para proyectores. Para dispositivos de mano (pantalla pequea, monocromos,etc). Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentacin preliminar a la impresin. Para dispositivos tctiles braille. Para sintetizadores de voz. Apropiado para todos los dispositivos. Define una seccin o un documento. align Desaprobado left right center justify Como alinear el texto en el elemento div. UseCSS Ubicacin en su lugar. Descripcin
braille aural all <div>
<span> <font> Desaprobado color rgb #xxxxxx nombre del color face listado de nombres de letras
Agrupa los elementos de una lnea para aplicarles estilos. Define el tipo, color y tamao del texto. UseCSS Fuentes en su lugar. Define el color del texto. Use CSS Fuentes en su lugar.
Define el nombre de la letra. Use CSS Fuentesen su lugar.
size
Un nmero Define el tamao de la letra. Use CSS entre 1 y 7. Si Fuentesen su lugar. se ha definido basefont debe especificar un nmero entre 6 y 6. Define la letra base. Use CSS Fuentes en su lugar.
<basefont> Desaprobado color rgb #xxxxxx nombre del color face listado de nombres de letras Un nmero entre 1 y 7.
Define el color del texto. Use CSS Fuentes en su lugar.
Define el nombre de la letra. Use CSS Fuentesen su lugar. Define el tamao de la letra. Use CSS Fuentesen su lugar. Centra un texto horizontalmente. Use CSS Ubicacin en su lugar.
size <center> Desaprobado
Atributos estndard
id, class, title, style, dir, lang Si desea una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si desea una descripcin completa, dirgete a: eventos intrnsecos.
La seccin Head de HTML

Aqu ubicamos datos de importancia para el navegador y para los buscadores
El elemento head
Este elemento est determinado por las etiquetas <head> y </head>. Dentro de las mismas queda determinada la seccin head la cual contiene toda la informacin sobre el documento. Esta informacin no ser mostrada por el navegador pero es de suma importancia para los navergadores y para los motores de bsqueda. De acuerdo a los estndares de HTML solo un nmero reducido de etiquetas pueden incluirse en la seccin head: 1. 2. 3. 4. 5. 6. <base> <link> <meta> <title> <style> <script>
El elemento base
En HTML, los vnculos y las referencias a recursos externos como imgenes, hojas de estilo, etc., se especifican siempre mediante una direccin URL.
Sintaxis
<head> <title>Ttulo del documento</title> <base href="http://www.virtualnauta.com/imagenes/" > </head> En este ejemplo podemos observar que la direccin de referencia sirve de base para todas las imagenes que se inserten en la pgina. Es decir, que en la seccin body para cada imagen que deseo ingresar solo debo escribir: <body> <img src="/paisaje.jpg"> </body> En lugar de: <img src="http://www.virtualnauta.com/imagenes/paisaje.jpg">
El elemento link
Este elemento est definido por la etiqueta <link> y establece un enlace que solo puede aparecer en la seccin head.
Sintaxis
<head> <title>Ttulo del documento</title> <link href="http://www.susitio.com/fuentes.css" type="text/css" rel="stylesheet" > </head> En este ejemplo podemos observar como definir un enlace hacia un archivo de hojas de estilo externo.
El elemento meta
Este elemento est definido por la etiqueta <meta> y puede ser usado para identificar propiedades de un documento(autor, descripcin, palabras claves, etc.)
Sintaxis
<head> <title>Ttulo del documento</title> <meta name="author" content="Jorge Perez" > <meta name="description" content="La seccin head de html contiene informacin sobre el sitio web"> </head> En este ejemplo podemos observar como definir el autor y la descripcin de un sitio. Si deseas etudiar en profundidad el uso de las etiquetas <meta>, dirgete a las meta etiquetas
El elemento title
Este elemento debe figurar en la seccin head y nos define el ttulo de la pgina Web. Para ello utilizamos las etiquetas <title> y </title>. Es recomendable poner ttulos ricos en contexto ya que estos aparecen en los motores de bsqueda y ayudan al usuario a identificar el contenido de la pgina.
Sintaxis
<head> <title>Curso introductorio al diseo de pginas Web</title> </head>
El elemento style
Este elemento define estilos dentro del documento y utiliza las etiquetas <style> y </style>.
Sintaxis
<head> <title>Ttulo del documento</title> <style type="text/css"> p {color:blue} h2 {color:red} </style> </head> Si deseas etudiar como funcionan las hojas de estilo dirgete al tutorial de CSS
El elemento script
El elemento script se utiliza para insertar scripts en el documento. Lo definimos por medio de las etiquetas <script> y </script>
Sintaxis
<head> <title>Ttulo del documento</title> <script type="text/javascript" src="http://misitio.com/calculos/calculos.js" > </script> </head> Para ms informacin sobre scripts dirgete a HTML Scripts
Etiquetas y atributos de los elementos en la seccin head

Etiquetas <head> <title> <meta> name author description keywords generator revised otros http-equiv contenttype expires refresh set-cookie content scheme valor valor Este atributo especifica el valor de una propiedad. Proporciona a los agentes de usuario ms contexto para la interpretacin correcta de los datos. Los servidores HTTP utilizan este atributo para obtener informacin sobre los encabezados. Atributos profile Valor URL Descripcin Especifica la localizacin de uno o ms perfiles de metadatos. Define el ttulo del documento. Especifica una pareja propiedad/valor del documento. Identifica un nombre de propiedad.
<link> charset href hreflang media screen tty tv handheld print
Define un vnculo. Solo puede aparecer en la seccin head de un documento. codif. de Especifica la codificacin de caracteres. caracteres Valor por defecto: ISO=8859-1. URL Especifica la localizacin de un recurso de la web. cdigo de Especifica el lenguaje de la URL. lenguaje El medio para la informacin del estilo. Para pantallas no paginadas de computadora. Para medios que utilicen una cuadrcula de caracteres de ancho fijo, como teletipos. Para dispositivos tipo televisin. Para dispositivos de mano (pantalla pequea, monocromos,etc). Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentacin preliminar a la impresin. Para dispositivos tctiles braille. Para sintetizadores de voz. Apropiado para todos los dispositivos. Especifica la relacin entre el documento actual y el destino del vnculo.
projection Para proyectores.
braille aural all rel alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark rev alternate designates stylesheet start next
Especifica la relacin entre el destino del vnculo y el documento actual(vnculo inverso).
prev contents index glossary copyright chapter section subsection apendix help bookmark target _blank _parent _self _top type <base> href target _blank _parent _self _top <script> src type language Desaprobado URL Indica donde abrir el URL. El URL se abrir en una nueva ventana. El URL se abrir en el frameset padre. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en una ventana de tamao completo.
tipo de Especifica el tipo de contenido a conectar. contenido URL Especifica la URL base que ser usada para todos los vnculos de la pgina. Indica donde abrir el URL. El URL se abrir en una nueva ventana. El URL se abrir en el frameset padre. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en una ventana de tamao completo. Coloca un script dentro del documento. Especifica la localizacin de un script externo. tipo de Especifica el lenguaje de scripts de los contenidos del contenido elemento. javascript Use el atributo type en su lugar. livescript vbscript otros
defer
Indica al agente de usuario que el script no va a generar ningn contenido en el documento.
Meta HTML
Aqu veremos la relacin que hay entre las etiquetas meta y los buscadores como Google
Etiqueta <meta>
La etiqueta <meta> se utiliza para identificar propiedades de un documento(p.ej.,el autor, una lista de palabras claves, la descripcin de una pgina, etc.) y para asignar valores a esas propiedades. Para ello nos servimos del atributo name que especifica la propiedad a usar y del atributocontent para definir el contenido de dicha propiedad. El siguiente ejemplo nos muestra un valor para la propiedad author: <head> <meta name="author" content="Jorge Perez"> </head> La etiqueta <meta> debe ubicarse en la seccin head del documento, entre las etiquetas <head> y </head>. La etiqueta <meta> no tiene cierre.
Meta y los motores de bsqueda

keywords
Uno de los usos ms importantes de la etiqueta <meta>, es especificar una lista de palabras claves relacionadas con el contenido de la pgina. Estas palabras claves (keywords) sern usadas por los motores de bsqueda para identificar el contenido de la pgina y de esa forma mejorar la calidad de los resultados de una bsqueda. Las palabras claves deben separarse con una coma (,) y se pueden escribir una, dos o ms palabras juntas. <meta name="keywords" content="vacaciones, vacaciones en el Caribe, Caribe, islas, playas del Caribe, sol"> Nota: observe que "vacaciones en el Caribe" y "Caribe" son trminos diferentes. "vacaciones en el Caribe" es un trmino ms preciso que la palabra "Caribe". Esto es importante ya que ayuda a los motores de bsqueda a encontrar trminos que se adecan a las exigencias de los usuarios. Lo que nos lleva a entender que hay ms posibilidades de aparecer en puestos superiores en los resultados de bsqueda.
description
Tambin es importante dar una descripcin lo ms precisa posible de la pgina Web. <meta name="description" content="Sus prximas vacaciones en el Caribe"> Nota: esta descripcin es la que aparece muchas veces por debajo del ttulo del sitio, en los resultados de los motores de bsqueda. Es por eso que debe ser una oracin o frase que refleje exactamente el contenido de la pgina.
Importante: es muy recomendable definir diferentes keywords y descriptions para cada una de las pginas de un sitio.
Meta e informacin por defecto

Las etiquetas <meta> pueden utilizarse para especificar la informacin por defecto de un documento en los siguientes aspectos: El lenguaje de scripts por defecto. El lenguaje de hojas de estilo por defecto. La codificacin de caracteres del documento. Para ello nos servimos del atributo http-equiv  <meta http-equiv="Content-Script-Type" content="text/javascript">  <meta http-equiv="Content-Style-Type" content="text/css">  <meta http-equiv="Content-Type" content="text/html; charset=ISO-88595">
Etiquetas y atributos de meta.

Etiquetas <meta> name author description keywords generator revised otros http-equiv content-type expires refresh set-cookie content scheme valor valor Este atributo especifica el valor de una propiedad. Proporciona a los navegadores ms contexto para la interpretacin correcta de los datos. Los servidores HTTP utilizan este atributo para obtener informacin sobre los encabezados. Atributos Valor Descripcin Especifica una pareja propiedad/valor del documento. Identifica un nombre de propiedad.
Atributos estndard
lang, dir
Si deseas una descripcin completa, dirgete a: atributos estndard.
La direccin URL
Nos permite encontrar cualquier sitio web en Internet.
Qu es la URL?
El URL (Uniform Resource Locator - Localizador Uniforme de Recursos) le permite al navegador encontrar una direccin o sitio en Internet. El URL combina el nombre del servidor que proporciona la informacin, el directorio donde se encuentra, el nombre del fichero y el protocolo o sistema a usar para recuperar los datos.
Sintaxis de la direccin URL

Una direccin Internet completa como esta: http://www.virtualnauta.com/es/html/una-pagina.html Sigue estas reglas de sintaxis. esquema://host.dominio:puerto/ruta/nombre_de_archivo esquema: define el tipo de servicio Internet. El ms comn es http. host: por defecto para http es www. dominio: define el nombre del dominio como por ej.: virtualnauta.com. puerto: define el nombre de puerto en el host. Por lo general este nmero es omitido. El nmero por defecto para http es 80. ruta: define el camino o subdirectorio en el servidor. Si es omitido, el documento debe encontrarse en el directorio principal, de lo contrario no ser localizado. nombre de archivo: define el nombre del documento. Se usan como nombres de archivo por defecto default.htmo index.htm.
Esquemas URL
El esquema indica el protocolo de red que se usa para recuperar informacin a travs de la red. Algunos ejemplos de esquemas URL: http : recursos http (Hypertext Transfer Protocol - Protocolo de Transferencia de Hipertexto). https : http sobre ssl (Secure Sockets Layer) proporciona comunicaciones seguras en Internet. ftp : File Transfer Protocol - Protocolo de Transferencia de Archivos. mailto : direcciones Email. file : recursos disponibles en el ordernador local, o en una red local. news : grupo de noticias Usenet. telnet : el protocolo telnet, sirve para acceder mediante una red a otra mquina.
Enlace a un sistema de correo electrnico

Si deseas crear un enlace a un Email, debes usar el siguiente cdigo: <a href="/mailto: sunombre@susitio.com"> sunombre@susitio.com</a> Nota: en este ejemplo, al presionar sobre el enlace, se abrir automaticamente el programa de correo electrnico definido por defecto en el ordenador.
Acceder a un grupo de noticias (Newsgroup).

Los grupos de noticias, son un medio de comunicacin en el cual los usuarios leen y envan mensajes textuales a distintos tablones distribuidos entre servidores con la posibilidad de enviar y contestar a los mensajes. Hay nueve jerarquas dedicadas a discusiones sobre distintos temas: comp.* : Temas relacionados con las computadoras. news.* : Discusin de grupos de usuarios. sci.* : Temas cientficos. humanities.* : Discusin de humanidades (como literatura o filosofa). rec.* : Discusin de actividades recreativas (como juegos y aficiones). soc.* : Socializacin y discusin de temas sociales. talk.* : Temas polmicos, como religin y poltica. misc.* : Miscelnea (todo lo que no entra en las restantes jerarquas). alt.* : Sali como alternativa a talk, pero es usada por los usuarios P2P. Si deseas crear un enlace hacia un grupo de noticias, usa este cdigo: <a href="/news:news.html">HTML grupo de noticias</a>
Transferencias ftp
Es un protocolo de transferencia de archivos, de manera que desde un equipo cliente nos podemos conectar a un servidor para descargar archivos desde l o para enviarle nuestros propios archivos. Si deseas crear un enlace para bajar un archivo, usa un cdigo como este: <a href="/ftp://www.susitio.com/ftp/archivo-a-bajar.zip>Download</a>
Scripts dentro de HTML

Diseo de pginas dinmicas que interactan con el usuario.
Los scripts
Los scripts nos permiten crear pginas Web ms dinmicas y atractivas. Un script es un programa que puede acompaar a un documento HTML o que puede estar insertado en l. El programa se ejecuta en el navegador del cliente cuando se carga el documento o junto con los eventos, como por ejemplo cuando se activa un enlace, o cuando se pasa el puntero del mouse por alguna imagen, etc. Un cdigo script puede ser ubicado tanto en la seccin head como en la seccin body de un documento.
Insertando un script dentro de un documento HTML

Para insertar un script dentro de HTML, debemos utilizar la etiqueta <script> junto con el atributotype para especificar el lenguaje de scripts que vamos a utilizar.
Ejemplo
Cdigo
<html> <head> <title>Insercin de un Script</title> </head> <body> <script type="text/javascript"> document.write("Este es un script en javascript") </script> </body> </html> Nota: en este ejemplo el tipo de script insertado "text/javascript" es en JavaScript.
Resultado
Este es un script en javascript
El elemento object
El elemento object est definido por las etiquetas <object> y </object> y se utiliza para insertar objetos dentro de una pgina Web. Entendemos por objetos: documentos HTML imgenes audio video Flash documentos PDF ActiveX Java applets etc. Ejemplo de como insertar una imagen JPEG
Ejemplo
Cdigo
<object data="fotos/flores.jpg" type="image/jpeg"style="width:100px; height:100px"> </object> Nota: el atributo data="flores.jpg" nos especifica la direccin del documento a insertar. El atributo type="image/jpeg" el tipo de documento o archivo a insertar.
Resultado
El elemento param
El elemento param est definido por la etiqueta <param> y se utiliza para especificar parmetros que pueden ser necesarios, para un objeto insertado con el elemento object, en tiempo de ejecucin. Veamos este ejemplo de un archivo de audio.
Ejemplo
Cdigo
<object data="media/applause.wav" type="audio/xwav" style="width: 100%; height: 50px"> <param name="src" value="media/applause.wav"> <param name="autoplay" value="false"> <param name="autostart" value="0"> </object> Notas: name="src" junto con value="media/applause.wav" - Internet Explorer necesita la direccin src para ubicar el archivo a ejecutar.
Resultado
name="autoplay" se usa para ejecutar Quicktime - value="false" es para que no se autoejecute al cargar la pgina. name="autostart" se usa para ejecutar Windows Media Player y Real Audio value="0" es para que no se autoejecute al cargar la pgina.
Etiquetas y atributos de los scripts

Etiquetas <script> src type Obligatorio lenguaje Desaprobado defer URL tipo de contenido Atributos Valor Descripcin Coloca un script dentro de un documento. Especifica la localizacin de un script externo. Especifica el lenguaje de scripts. Especifica el lenguaje de scripts. Use type en su lugar. Indica al navegador, que el script no va a generar ningn contenido en el documento. codificacin de caracteres Define la codificacin de caracteres usadas en el script. Texto alternativo en caso que el script no se ejecute. Define un objeto embebido. Usado para insertar multimedia a la pgina align Desaprobado left right top bottom archive lista URLs Especifica una lista de URLs, separados por espacios, de archivos que contienen recursos relevantes para el objeto. Define un borde alrededor del objeto. Use CSS Bordes en su lugar. Especifica la localizacin de la implementacin de un objeto. Puede usarse junto con el atributo data. Especifica la ruta de acceso base de los URLs especificados por los atributosclassid, data y archive. Tipo de contenido de datos cuando se carga el objeto especificado por classid. Especifica la localizacin de los datos del objeto. Hace que la definicin actual de objectsea Alineamiento del texto alrededor del objeto. Use CSS en su lugar. Ej
charset <noscript> <object>
border Desaprobado classid
pxeles URL
codebase
URL
codetype data declare
tipo de contenido URL declaracin
solamente una declaracin. height Desaprobado hspace Desaprobado name standby pxeles pxeles Define la altura del objeto. Use CSS Height en su lugar. Define los espacios horizontales alrededor del objeto. Use CSS Padding en su lugar. Asigna el nombre de control. Especifica un mensaje que puede presentar un navegador mientras carga los datos del objeto. Especifica el tipo de contenido de los datos especificados por data. Asocia un mapa de imgenes con un elemento. Define los espacios verticales alrededor del objeto. Use CSS vertical-align en su lugar. Define el ancho del objeto. Use CSS width en su lugar. Especifica los parmetros para un objeto insertado en el documento. name nombre nico Define el nombre de un parmetro de ejecucin que se supone que el objeto insertado conoce. Especifica el tipo de medio para el parmetro. Especifica el valor del parmetro de ejecucin especificado por name. Especifica el tipo de atributo value.
nombre nico texto
type usemap vspace Desaprobado width Desaprobado <param>
tipo de contenido URL pxeles
pxeles
type value valuetype
tipo de contenido valor data ref object
Atributos estndard
id, class, title, style, dir, lang Si deseas una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Si deseas una descripcin completa, dirgete a: eventos intrnsecos.
Atributos estndard de HTML

Lista de los atributos que son comunes para casi todas las etiquetas.
Atributos Comunes
En esta pgina se encuentran los atributos ms comunes de HTML. Los dividimos en tres grupos de acuerdo a la funcin que tiene cada uno. Atributos identificadores Atributos de lenguaje Atributos del teclado
Atributos identificadores
Vlido para todos los elementos excepto: base, head, html, meta, script, style, title. Atributos id nombre Valor Descripcin Asigna un nombre a un elemento. El atributo id acta: Como selector para las hojas de estilo(CSS). Como vnculo destino para vnculos de hipertexto. Como medio de hacer referencia a un elemento en particular desde un script. Como nombre de un elemento object declarado. Para procesos generales por parte del usuario. Asigna un nombre de clase. El atributo class acta: Como selector para las hojas de estilo(CSS), cuando se asigna informacin de estilo a un conjunto de elementos. Para procesos generales por parte del usuario. Este atributo especifica informacin de estilo para el elemento actual. Este atributo ofrece informacin consultiva sobre el elemento para el cual se establece.
class
nombre de clase
style title
estilo texto
Atributos de lenguaje
Vlido para todos los elementos excepto: applet, base, basefont, br, frame, frameset, iframe, param, script. Atributos lang Valor cdigo de lenguaje Descripcin Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. El atributo lang es til para: Ayudar a los motores de bsqueda. Ayudar a los sintetizadores de voz. Ayudar al agente de usuario a hacer decisiones sobre separacin de palabras, ligaduras, y espaciado. Ayudar a los verificadores de ortografa y gramtica. Especifica la direccin del texto. Valores posibles: ltr : De izquierda a derecha (left to right). rtl : De derecha a izquierda (right to lleft).
dir
ltr rtl
Atributos del teclado

Vlido para los elementos: a, area, button, input, label, legend, textarea. Atributos accesskey tabindex caracter nmero Valor Descripcin Asigna una tecla de acceso a un elemento. Al pulsar esa tecla el foco se dirige hacia ese elemento. Especifica el orden de tabulacin del elemento dentro del documento actual

Etiquetas Básicas de HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

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

Etiquetas Básicas de HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Etiquetas bsicas de HTML

Las etiquetas ms simples y de uso ms comn en HTML.

Este es el primer prrafo. Y este es el segundo prrafo.

Trazar una lnea

<hr> no tiene cierre.

Tabla con las etiquetas bsicas

Formato de texto con HTML

Formato bsico del texto

<sup>Texto superndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>

Texto Texto Texto Texto Texto

Etiquetas para dar forma al texto

Etiquetas de "Texto estructurado"

Etiquetas de citaciones y definiciones

Los Enlaces o Links

<body> <a href="/http://www.virtualnauta.com/">La home de Virtualnauta</a> </body>

Creando un enlace a un email

Un enlace a partir de una imagen

Etiquetas y atributos de los enlaces

Define un vnculo Direccin URL a conectar. Especifica el lenguaje de la URL.

Especifica la relacin entre el destino del vnculo y

el documento actual(vnculo inverso).

shape rect rectangle circ circle poly

Usamos coords="izquierda, arriba, derecha, abajo"

Usamos coords="centro x, centro y, radio"

Usamos coords="x1, y1, x2, y2, .., xn, yn"

Cada vista es un documento independiente de los otros.

<frame src="/frame1.htm"> <frame src="/frame2.htm"> </frameset>

Etiquetas y atributos de los marcos

marginheight marginwidth name scrolling

pixels pixels nombre yes no auto

Archivo que va a ser mostrado en el iframe. Define el ancho del iframe.

Caractersticas de las tablas

Bordes de las tablas

Encabezados de las tablas

La etiqueta <th> siempre muestra los encabezados remarcados.

Mrgenes de las celdas

Espaciado entre celdas

Etiquetas y atributos de las tablas

void above below hsides lhs rhs vsides box border

Especifica cual de los bordes alrededor de la tabla ser visible.

none groups rows cols all

Especifica las lneas divisorias horizontales y verticales.

<tr> align right left center justify

Define una fila. Alnea horizontalmente el texto en la celda.

top middle bottom baseline

left right center justify char

Sita una celda en categoras conceptuales.

rgb(x,x,x) #xxxxxx nombre_color

Color de fondo de las celdas. Use la propiedad background de CSS en su lugar.

height Desaprobado nowrap Desaprobado rowspan

col colgroup row rowgroup

top middle bottom baseline

Especifica la posicin vertical de los datos dentro de una celda.

Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar.

<caption> align Desaprobado top bottom left right <colgroup> <col>

top middle bottom

top middle bottom baseline

Etiquetas y atributos de las listas

</form> <input type="control" atributo="valor"> </form>

El control "submit" y el control "reset"

Las etiquetas select y option

Etiquetas y atributos de los formularios