Etiquetas Básicas

Etiquetas Bsicas
Headings
Nos definen el tamao de un ttulo o cabecera. <h1> nos da el tipo de letra ms grande. <h6> nos da el tipo de letra ms pequeo. HTML agrega automticamente 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
<html> <head> <title>Prrafos</title> </head> <body> <p>Este es el primer prrafo.</p> <p>Y este es el segundo prrafo.</p> </body> </html>
Resultado
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
<hr>
Resultado
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 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> <sup>Texto superndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt> Resultado
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto normal normal normal normal normal normal normal normal normal normal normal Texto en negrita
Texto grande
Texto pequeo
Texto enfatizado Texto en itlica Texto fuerte

Texto subndice Texto superndice
Texto subrayado Texto tachado Texto teletipo
Etiquetas para dar forma al texto

Etiquetas <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <tt> <s> <strike> <u> Descripcin Define Define Define Define Define Define Define Define Define Define Define Define Define Define un un un un un un un un un un un un un un texto texto texto texto texto texto texto texto texto texto texto texto texto texto en negrita grande enfatizado en itlica pequeo fuerte subndice superndice subrayado tachado de teletipo tachado. Desaprobado. Use <del> en su lugar tachado. Desaprobado. Use <del> en su lugar subrayado. Desaprobado. Use <ins> en su lugar
Etiquetas de "Texto estructurado"
Estas estiquetas son usadas comunmente para mostrar cdigos de programacin. Etiquetas <code> <kbd> <samp> <var> <pre> <listing> <plaintext> <xmp> Descripcin Define un texto en cdigo de computadora 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
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
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 <a> Atributos href hreflang name rel 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 designates stylesheet start next prev contents Especifica la relacin entre el destino del vnculo y el documento actual(vnculo inverso). Valor Descripcin Define un vnculo Direccin URL a conectar. Especifica el lenguaje de la URL. Para crear un marcapginas dentro de un documento. Especifica la relacin entre el documento actual y el destino del vnculo. Ej.
index glossary copyright chapter section subsection apendix help bookmark coords shape rect rectangle circ circle poly polygon target _blank _parent _self _top type tipo de contenido 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. Usamos coords="x1, y1, x2, y2, .., xn, yn" coordenadas Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del rea. Usamos coords="izquierda, arriba, derecha, abajo" Usamos coords="centro x, centro y, radio"
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.
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.
etiquetas <body> </body> <frameset rows="25%,75%">
<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
<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> Atributos cols Valor pixels % * rows pixels % * <frame> frameborder longdesc marginheight marginwidth name noresize scrolling 0 1 URL pixels pixels frame_name noresize yes no auto src <noframes> <iframe> align left right top middle bottom 0 1 height longdesc marginheight marginwidth pixels % URL pixels pixels 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 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 frame. Define un nombre para el frame. No le permite al usuario modificar el tamao del frame. Determina la accin de la barra de desplazamiento. Asigna el nmero y el tamao de las filas. Descripcin Organiza ventanas mltiples. Asigna el nmero y el tamao de las columnas. Ej
frameborder
Especifica si se mostrar o no el borde alrededor del iframe. Define la altura del iframe. 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.
name scrolling
nombre yes no auto
Define un nombre para el iframe. Determina la accin de la barra de desplazamiento. Archivo que va a ser mostrado en el iframe. Define el ancho del iframe.
src width
URL pixels %
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.
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> </tr> </table>
Resultado
Nombre Apellido Pedro Garcia
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
Resultado
Borde 3 pixels
Ejemplo
Cdigo Resultado
<table> Esta tabla es Sin bordes <tr> <td>Esta tabla es</td> <td>Sin bordes</td> </tr> </table> 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 Resultado
<table border="1px"> Nombre Apellido <tr> <th>Nombre</th> Pedro Garcia <th>Apellido</th> </tr> Juan Perez <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table> 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 Resultado <table border="1px" cellpadding="20px"> <tr> Nombre Apellido <th>Nombre</th> <th>Apellido</th> </tr> <tr> Pedro Garca <td>Pedro</td> <td>Garcia</td> </tr> </table> 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 Resultado <table border="1px" cellspacing="15px"> Nombre Apellido <tr> <th>Nombre</th> Pedro Garcia <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> 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> Atributos align Desaprobado bgcolor Desaprobado border cellpadding cellspacing frame left center right rgb(x,x,x) #xxxxxx nombre_color pixels pixels % pixels % void above below hsides lhs rhs vsides box Especifica cual de los bordes alrededor de la tabla ser visible. Color de fondo de las tablas. Use la propiedad background de CSS en su lugar. Espesor del borde de la tabla. Espacio entre la pared de la celda y el contenido. Espacio entre celdas. Valor Descripcin Define una tabla. Alnea las tablas. Use la propiedad position de CSS en su lugar. Ej
border rules none groups rows cols all summary width <tr> align right left center justify bgcolor Desaprobado char charoff valign char rgb(x,x,x) #xxxxxx nombre_color carcter pixels % top middle bottom baseline <td> <th> abbr align texto abreviado left right center justify axis bgcolor Desaprobado char nombre de la categora rgb(x,x,x) #xxxxxx nombre_color Sita una celda en categoras conceptuales. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Define una celda. Define los encabezados de una tabla. Especifica una versin abreviada del contenido de una celda. Alnea horizontalmente el texto en la celda. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. 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. texto % pixels Define una fila. Alnea horizontalmente el texto en la celda. Resumen del contenido de la tabla para navegadores sin visualizador. Especifica el ancho de la tabla. Especifica las lneas divisorias horizontales y verticales.
char charoff colspan headers
carcter pixels % nmero lista de nombres de celdas pixels nowrap nmero col colgroup row
height Desaprobado nowrap Desaprobado rowspan scope
valign
rowgroup top middle bottom baseline
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. Lista de celdas de encabezado que proporcionan informacin de encabezado para la celda de datos actual. 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. Especifica la posicin vertical de los datos dentro de una celda.
width Desaprobado <caption> align Desaprobado
pixels % top bottom left right
Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar. Define el ttulo de la tabla. Ubicacin del ttulo con respecto a la tabla. Use la propiedad caption-side de CSS en su lugar.
<colgroup> <col> align right left center justify char carcter pixels %
Crea un grupo explcito de columnas. Permite a los autores compartir atributos entre varias columnas. Alnea horizontalmente el contenido en el grupo de columnas.
char charoff
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.
span valign
nmero top middle bottom baseline % pixels longitud relativa
Especifica el nmero de columnas de un grupo de columnas. Alnea verticalmente el contenido en el grupo de columnas.
width
Define el ancho del grupo de columnas.
<thead> <tbody> <tfoot> align right left center justify char character pixels % top middle bottom baseline
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>. Alnea horizontalmente el texto en la celda.
char charoff valign
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.
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.
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
Resultado
1. Naranjas 2. Manzanas 3. Bananas
<ol>
<li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li>
</ol>
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 Resultado
Tomates Pepinos Cebollas
<ul>
<li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li>
</ul>
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>
Resultado Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar
</dl>
Dentro de las etiquetas <dd> se pueden agregar imgenes, prrafos, otras listas, etc.
Etiquetas y atributos de las listas

Etiquetas <ol> Atributos compact Desaprobado start Desaprobado type Desaprobado nmero del 1 objeto A a I i 1 <ul> compact Desaprobado type Desaprobado <li> type Desaprobado disc square circle disc square circle 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. 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 CSSen su lugar. Ej.
A a I i 1 value Desaprobado <dl> <dt> <dd> <dir> Desaprobado <menu> Desaprobado nmero del objeto 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.
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 Resultado <form action="datos.php" method="get"> Nombre: Nombre: <input type="text" name="nombre"> Apellido: <input type="text" name="apellido"> Apellido: </form> 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 Resultado
Edad? menor de 17
<input type="radio" name="edad" value="mayor">mayor de 61

</form>
entre 18 y 60 mayor de 61
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 </form> Resultado Pasatiempos?
TV Libros 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> Resultado
Nombre: Password:
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: <input type="text" name="nombre"> Contrasea: <input type="password" Resultado
name="secreto"> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>
Nombre: Contrasea:
Enviar Borrar
Nota: el valor de la propiedad value define el texto dentro del botn.
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> Resultado
Ingrese la foto:
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> Resultado
Nombre: Contrasea:
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> Resultado
Nombre: Contrasea:
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> Resultado
</select>
</form>
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. Resultado
</textarea>
</form>
Etiquetas y atributos de los formularios
Etiquetas <form>
Atributos
Valor
action Obligatorio accept
URL Lista de tipos de contenido
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.
Ej
accept-charset
Lista de codificacin de caracteres tipo de contenido
enctype method
get post
name target
cdata _blank _self _parent _top
<input> accept Lista de tipos de contenido
align
left right top texttop middle absmiddle baseline bottom absbottom texto
Especifica la lista de codificacin de caracteres para los datos introducidos que son aceptados por el servidor que procesa este formulario. 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. 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. 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".
alt checked
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".
disabled
maxlength
nmero
name
nombre de control
readonly size nmero de caracteres URL checkbox file hidden image password radio reset submit text value valor
src type
Deshabilita el control para la entrada de datos por parte del usuario. Nota: No debe usarse con type="hidden". 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". 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.
<textarea> col Obligatorio rows Obligatorio disabled nmero nmero
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.
name readonly <label> for <fieldset> <legend> align Desaprobado
nombre del rea de texto
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. 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. 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. Especifica el valor inicial del control. Define un botn. Deshabilita el botn.
idref
top bottom left right
<select> disabled multiple name size <optgroup> label Obligatorio disabled <option> label texto texto nombre nmero
disabled selected value <button> disabled name type nombre button reset submit value valor texto
Especifica un nombre para el botn. Define el tipo de botn.
Asigna un valor inicial al botn.
<isindex> Desaprobado
Use <input> en su lugar.
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.
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> Atributos alt Requerido src Requerido align Desaprobado Valor text URL top bottom middle left right border Desaprobado height hspace Desaprobado ismap longdesc pixels pixels % pixels Deja espacios en blanco a derecha e izquierda de la imagen. Use las propiedades de ubicacin de CSS en su lugar. Define el mapa de la imagen del lado del servidor. La URL a un documento con una larga descripcin de la imagen. Define el borde alrededor de la imagen. Use las propiedades de los bordes de CSSen su lugar. Define la altura de la imagen. Descripcin Define una imagen. Breve descripcin de la imagen. Direccin URL de la imagen a mostrar. Alnea la imagen de acuerdo al texto circundante. Use las propiedades de ubicacin de CSS en su lugar. Ej.
URL URL
usemap vspace Desaprobado width <map> name <area> alt Requerido coords href nohref shape
URL pixels pixels %
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. Define el ancho de la imagen. Define el mapa de una imagen del lado del cliente. Define un nico nombre para la etiqueta <map>. Define una regin en el mapa de una imagen. Breve descripcin de la imagen. Especifica las coordinadas en donde se puede apretar. Direccin URL del rea. Excluye un rea en el mapa de la imagen. 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.
nombre nico
text
URL true false rect rectangle circ circle poly polygon
target _blank _parent _self _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.

Etiquetas Básicas

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Etiquetas Básicas

Hochgeladen von

Copyright:

Verfügbare Formate

Etiquetas Bsicas

Trazar una lnea

Tabla con las etiquetas bsicas

Formato bsico del texto

Texto enfatizado Texto en itlica Texto fuerte

Texto subrayado Texto tachado Texto teletipo

Etiquetas para dar forma al texto

Etiquetas de "Texto estructurado"

Etiquetas de citaciones y definiciones

Los Enlaces o Links

<a atributo="valor">Texto del enlace</a>

<a href="/#destino-uno">Ir al Captulo 1</a>

Creando un enlace a un email

Un enlace a partir de una imagen

Etiquetas y atributos de los enlaces

etiquetas <body> </body> <frameset rows="25%,75%">

Etiquetas y atributos de los marcos

nombre yes no auto

Caractersticas de las tablas

Bordes de las tablas

Encabezados de las tablas

Mrgenes de las celdas

Espaciado entre celdas

Etiquetas y atributos de las tablas

char charoff colspan headers

height Desaprobado nowrap Desaprobado rowspan scope

rowgroup top middle bottom baseline

width Desaprobado <caption> align Desaprobado

pixels % top bottom left right

nmero top middle bottom baseline % pixels longitud relativa

Define el ancho del grupo de columnas.

char charoff valign

Ordenadas. Desordenadas. De definicin.

Resultado Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar

Etiquetas y atributos de las listas

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

<input type="radio" name="edad" value="mayor">mayor de 61

El control "submit" y el control "reset"

name="secreto"> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>

Nota: el valor de la propiedad value define el texto dentro del botn.

Las etiquetas select y option

Etiquetas y atributos de los formularios

action Obligatorio accept

URL Lista de tipos de contenido

Lista de codificacin de caracteres tipo de contenido

cdata _blank _self _parent _top

<input> accept Lista de tipos de contenido

<textarea> col Obligatorio rows Obligatorio disabled nmero nmero

name readonly <label> for <fieldset> <legend> align Desaprobado

nombre del rea de texto

top bottom left right

Especifica un nombre para el botn. Define el tipo de botn.

Asigna un valor inicial al botn.

Use <input> en su lugar.

Las etiquetas map y area

Etiquetas y atributos de las imgenes

URL pixels pixels %

URL true false rect rectangle circ circle poly polygon

target _blank _parent _self _top <applet> Desaprobado

Das könnte Ihnen auch gefallen