martes, 15 de noviembre de 2011

Listado de Ejemplos en HTML

Etiquetas Básicas

Etiquetas Descripción Ej

...

Títulos de diferentes tamaños. Ejemplo de las etiquetas <h1> a la <h6>

Escribir un párrafo. Ejemplo del uso de la etiqueta <p> </p>
Poner un comentario en el código. Ejemplo del uso de los comentarios en un código HTML

Para hacer un salto de línea. Ejemplo del uso de un salto de línea dentro del código HTML

Dibujar una línea horizontal. Ejemplo de como definir una línea horizontal dentro del código

Si desea profundizar en el tema de etiquetas básicas, dirijase a HTML Etiquetas Básicas



Formatos de texto

Etiquetas Descripción Ej
Texto en negrita. Ejemplo
Texto grande. Ejemplo
Texto enfatizado. Ejemplo
Texto en itálica. Ejemplo
Texto pequeño. Ejemplo
Texto fuerte. Ejemplo
Texto por debajo. Ejemplo
Texto por encima. Ejemplo
Texto subrayado. Ejemplo
Texto tachado. Ejemplo
Texto teletipo. Ejemplo

Si desea profundizar en el tema de formatos de texto, dirijase a HTML Formato de texto



Enlaces - Links

Etiquetas Descripción Ej
Crear un vínculo simple. Ejemplo del uso del atributo href
Marcapáginas de un documento. Ejemplo para definir un enlace a una ubicación determinada de la página
Abrir un vínculo en una nueva ventana. Ejemplo que muestra como abrir un enlace en una nueva ventana
Abrir un vínculo en el frameset padre. Ejemplo que muestra como abrir un enlace en un frameset padre
Abrir un vínculo en el mismo frame. Ejemplo que muestra como abrir un enlace en el mismo frame donde fue apretado
Abrir un vínculo en una ventana de tamaño completo. Ejemplo que muestra como abrir un enlace en una ventana de tamaño completo

Si desea profundizar en el tema de vínculos, dirijase a HTML Enlaces



Formularios

Etiquetas Descripción Ej
Crear un formulario simple. Ejemplo del uso del atributo action en el formulario
La respuesta al formulario se abrirá en una nueva ventana. Ejemplo que abrirá una nueva ventana al enviar el formulario
La respuesta al formulario se abrirá en el mismo frame del formulario. Ejemplo que mostrará en el mismo frame los resultados, al enviar el formulario
La respuesta al formulario se abrirá en el frameset padre. Ejemplo que mostrará los resultados en el frame padre al enviar el formulario
La respuesta al formulario se abrirá en una ventana de tamaño completo. Ejemplo que mostrará los resultados en una ventana de tamaño completo al enviar el formulario
Usar un botón gráfico para mandar los formularios. Ejemplo mostrando un botón de enviar alineado a la izquierda
Un formulario tipo checkbox. Ejemplo de un formulario checkbox
Un formulario para subir archivos. Ejemplo de un formulario para enviar archivos
Un formulario con datos ocultos. Ejemplo de un formulario con un dato oculto
Un formulario para subir imágenes. Ejemplo de un formulario con un botón imagen en lugar del botón submit
Un formulario con ingreso de password. Ejemplo de un formulario con un campo de ingreso de un password
Un formulario del tipo radio. Ejemplo de un formulario radio
Dibujar un recuadro alrededor del formulario con un título. Ejemplo de como dibujar un recuadro alrededor del formulario
Menú desplegable. Ejemplo del uso del atributo name en un menú desplegable
Poner subtítulos dentro del menú desplegable. Ejemplo de como definir rótulos dentro de un menú desplegable

Si desea profundizar en el tema de formularios, dirijase a HTML Formularios



Imágenes

Etiquetas Descripción Ej
Colocar una imagen en el documento. Ejemplo básico de como insertar una imagen
Modificar las medidas de una imagen. Ejemplo de como definir la altura de una imagen en pixels
Crear un mapa de una imagen. Ejemplo de como definir un mapa de una imagen

Si desea profundizar en el tema de imágenes, dirijase a HTML Imágenes



Frames - Marcos

Etiquetas Descripción Ej
Definir marcos verticales. Ejemplo que divide una página en columnas por pixels
Definir marcos horizontales. Ejemplo que divide una página en filas por pixels
División de marcos sin bordes. Ejemplo del atributo frameborder sin el borde alrededor
Uso de márgenes dentro de los marcos. Ejemplo que deja un margen inferior y superior en el frame
Marcos fijos que no permiten cambiar su tamaño. Ejemplo que define un frame que no puede ser modificado
Uso de la barra de desplazamiento dentro de los marcos. Ejemplo que muestra el comportamiento de la barra de desplazamiento
</td> <td>En caso que el navegador del usuario no soporte marcos.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=noframes" target="_blank" title="Ejemplo mostrando el uso de noframes para navegadores que no soportan frames"><img alt="Ejemplo mostrando el uso de noframes para navegadores que no soportan frames" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td rowspan="5"><iframe></td> <td>Alineamos un iframe a la derecha de la página.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=iframe-align-right" target="_blank" title="Ejemplo que alinea el iframe a la derecha"><img alt="Ejemplo que alinea el iframe a la derecha" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Mostrar un iframe sin los bordes.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=iframe-frameborder-0" target="_blank" title="Ejemplo que oculta el borde alrededor del iframe"><img alt="Ejemplo que oculta el borde alrededor del iframe" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Definir la altura del iframe a nuestro gusto.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=iframe-height-pixels" target="_blank" title="Ejemplo que define la altura del iframe en pixels"><img alt="Ejemplo que define la altura del iframe en pixels" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Definir el ancho del iframe.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=iframe-width-porcentage" target="_blank" title="Ejemplo que define el ancho del iframe en porcentaje"><img alt="Ejemplo que define el ancho del iframe en porcentaje" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Mostrar un iframe sin las barras de desplazamiento.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=iframe-scrolling-no" target="_blank" title="Ejemplo que deshabilita la barra de desplazamiento para el iframe"><img alt="Ejemplo que deshabilita la barra de desplazamiento para el iframe" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> </tbody></table> <br /><p>Si desea profundizar en el tema de marcos, dirijase a <a href="http://www.virtualnauta.com/es/html/html-frames.php" title="Usos de frames - marcos">HTML Frames</a></p> <br /> <hr /> <h2><a name="ta" style="color:#000000">Tablas</a></h2> <table class="tablas" rules="all"> <tbody><tr> <th width="23%">Etiquetas</th> <th>Descripción</th> <th width="20px">Ej</th> </tr> <tr> <td rowspan="6"><table></td> <td>Definir el espesor del borde de una tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-border-pixels" target="_blank" title="Ejemplo que define el borde exterior de la tabla"><img alt="Ejemplo que define el borde exterior de la tabla" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Tamaño del relleno de cada celda de la tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-cellpadding-pixels" target="_blank" title="Ejemplo que define el espacio entre contenido y borde de celda en pixels"><img alt="Ejemplo que define el espacio entre contenido y borde de celda en pixels" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Separación entre celdas de una tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-cellspacing-pixels" target="_blank" title="Ejemplo que define el espacio entre diferentes celdas en pixels"><img alt="Ejemplo que define el espacio entre diferentes celdas en pixels" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Especificar los bordes que serán visibles de la tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-frame-hsides" target="_blank" title="Ejemplo que muestra todas las líneas horizontales de la tabla"><img alt="Ejemplo que muestra todas las líneas horizontales de la tabla" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Visualizar solo las líneas horizontales de una tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-rules-rows" target="_blank" title="Ejemplo que muestra solo las líneas horizontales de una tabla"><img alt="Ejemplo que muestra solo las líneas horizontales de una tabla" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Especificar el ancho de la tabla.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-width-porcentage" target="_blank" title="Ejemplo que especifica el ancho de la tabla en porcentajes"><img alt="Ejemplo que especifica el ancho de la tabla en porcentajes" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td rowspan="2"><tr></td> <td>Alinear horizontalmente el contenido de las celdas de una fila.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-tr-align-pixels" target="_blank" title="Ejemplo que compara los diferentes tipos de alineación dentro de las celdas"><img alt="Ejemplo que compara los diferentes tipos de alineación dentro de las celdas" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Alinear verticalmente el contenido de las celdas de una fila.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-tr-valign" target="_blank" title="Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas"><img alt="Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td rowspan="4"><td></td> <td>Alinear horizontalmente el contenido de una celda.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-td-align" target="_blank" title="Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas"><img alt="Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Alinear verticalmente el contenido de una celda.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-td-valign" target="_blank" title="Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas"><img alt="Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Agrupamos un número de celdas horizontalmente.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-td-colspan" target="_blank" title="Ejemplo que muestra como anexar celdas entre si horizontalmente"><img alt="Ejemplo que muestra como anexar celdas horizontalmente" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td>Agrupamos un número de celdas verticalmente.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=table-td-rowspan" target="_blank" title="Ejemplo que muestra como anexar celdas entre si verticalmente"><img alt="Ejemplo que muestra como anexar celdas entre si verticalmente" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> </tbody></table> <br /><p>Si desea profundizar en el tema de tablas, dirijase a <a href="http://www.virtualnauta.com/es/html/html-tablas.php" title="Todos los usos posibles de lass tablas">HTML Tablas</a></p> <br /> <hr /> <h2><a name="li" style="color:#000000">Listas</a></h2> <table class="tablas" rules="all"><tbody><tr> <th width="23%">Etiquetas</th> <th>Descripción</th> <th width="20px">Ej</th> </tr> <tr> <td><ol></td> <td>Hacer una lista ordenada.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=ol-listas-desordenadas" target="_blank" title="Ejemplo de como definir una lista ordenada con números o letras"><img alt="Ejemplo de como definir una lista ordenada números o letras" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td><ul></td> <td>Hacer una lista sin orden alguno.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=ul-listas-desordenadas" target="_blank" title="Ejemplo de como definir una lista remarcada con puntos o símbolos"><img alt="Ejemplo de como definir una lista remarcada con puntos o símbolos" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td> </tr> <tr> <td><dl></td> <td>Hacer una lista descriptiva.</td> <td><a href="http://www.virtualnauta.com/es/html/ejemplos/editor-html.php?ejemplo=dl-dt-dd" target="_blank" title="Ejemplo de como se define una lista de definición"><img alt="Ejemplo de como se define una lista de definición" src="http://www.virtualnauta.com/graficos/ok.gif" /></a></td></tr></tbody></table>


EmoticonEmoticon