Listado de Ejemplos en HTML

Etiquetas Básicas

Etiquetas	Descripción	Ej
...	Títulos de diferentes tamaños.
	Escribir un párrafo.
	Poner un comentario en el código.
	Para hacer un salto de línea.
	Dibujar una línea horizontal.

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.
	Texto grande.
	Texto enfatizado.
	Texto en itálica.
	Texto pequeño.
	Texto fuerte.
	Texto por debajo.
	Texto por encima.
	Texto subrayado.
	Texto tachado.
	Texto teletipo.

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.
	Marcapáginas de un documento.
	Abrir un vínculo en una nueva ventana.
	Abrir un vínculo en el frameset padre.
	Abrir un vínculo en el mismo frame.
	Abrir un vínculo 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.
	La respuesta al formulario se abrirá en una nueva ventana.
	La respuesta al formulario se abrirá en el mismo frame del formulario.
	La respuesta al formulario se abrirá en el frameset padre.
	La respuesta al formulario se abrirá en una ventana de tamaño completo.
	Usar un botón gráfico para mandar los formularios.
	Un formulario tipo checkbox.
	Un formulario para subir archivos.
	Un formulario con datos ocultos.
	Un formulario para subir imágenes.
	Un formulario con ingreso de password.
	Un formulario del tipo radio.
	Dibujar un recuadro alrededor del formulario con un título.
	Menú desplegable.
	Poner subtítulos dentro del 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.
	Modificar las medidas de una imagen.
	Crear 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.
	Definir marcos horizontales.
	División de marcos sin bordes.
	Uso de márgenes dentro de los marcos.
	Marcos fijos que no permiten cambiar su tamaño.
	Uso de la barra de desplazamiento dentro de los marcos.
</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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uz-Yjefvk847BKFAG9DS13ve7B3pVtfT63aQNFoiNR6yUlRjnmvlsPLRTU9RwzpSb_NCNu0TjIyyIfmIJBDPvyQnw-Db9JBjCPjP7wUw=s0-d"></a></td></tr></tbody></table>