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="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=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_sXbCqENYnxLt9sKMjAaEh674LnlzZqa7HEilHKmjvYGGvJ7AICpdSsrgsdx1Q4u6NgHTbi4uDP2RTMuT5EGB3raas3HTyTQIQKh-iqfg=s0-d"></a></td></tr></tbody></table>

Comentarios

Publicar un comentario

Entradas populares de este blog

Material de la charla "La nueva pedagogIA" y herramientas de IA en educación.

-
Imagen
¡Saludos colegas y amigos de la Red de docentes líderes TIC de la Secretaría de Educación de Cali! El pasado viernes tuve el placer de compartir con ustedes una presentación sobre llamada "La nueva pedagogIA", que busca resaltar el potencial de la Inteligencia Artificial (IA) para transformar la educación en nuestras aulas. En esta entrada de blog, me gustaría resumir los puntos clave de la presentación y compartir la presentacón y algunas herramientas para implementarla la IA de manera efectiva en nuestro contexto educativo.  El poder de la IA en la educación La IA tiene el potencial de revolucionar la educación de varias maneras. Puede ayudarnos a: Personalizar el aprendizaje: La IA puede usarse para crear experiencias de aprendizaje personalizadas para cada estudiante. Esto significa que podemos adaptar el contenido, el ritmo y la dificultad de la instrucción a las necesidades individuales de cada estudiante. Optimizar la evaluación: La IA puede usarse para evaluar el ap...
Read more »

Cómo profe... ¿Para qué me sirve la Inteligencia Artificial?

-
Imagen
La inteligencia artificial (IA) está transformando el panorama educativo, le está abriendo paso a un mundo de posibilidades tanto para docentes y estudiantes, como para toda la comunidad educativa.  En esta entrada de blog, exploraremos las principales tendencias de IA en educación, destacando su potencial para revolucionar la enseñanza y el aprendizaje; e intentaremos responder a ese interrogante que se ha vuelto tendencia entre los profes, ¿para qué me sirve la Inteligencia Artificial? Personalización del aprendizaje La IA permite crear experiencias de aprendizaje personalizadas para cada estudiante. Los sistemas inteligentes pueden evaluar las fortalezas y debilidades de cada individuo, adaptando el contenido, las actividades y el ritmo de aprendizaje a sus necesidades específicas. Autoevaluación y retroalimentación La IA ofrece herramientas para la autoevaluación y la retroalimentación en tiempo real. Los estudiantes pueden recibir comentarios personalizados sobre su progr...
Read more »

Revoluciona la Forma de Evaluar a tus Estudiantes con Inteligencia Artificial

-
Imagen
La Inteligencia Artificial Generativa (IAG) es una rama de la inteligencia artificial que va más allá del simple análisis de datos. Tiene la capacidad de crear contenido original y nuevo, como texto, imágenes, música, vídeo e incluso código de programación. En el ámbito educativo, la IAG se utiliza para diseñar planes de clase, generar preguntas de examen, crear materiales de estudio personalizados, proporcionar retroalimentación a los estudiantes e incluso simular conversaciones para practicar habilidades de comunicación. La IAG funciona mediante el uso de algoritmos avanzados que aprenden de grandes cantidades de datos. Estos algoritmos pueden identificar patrones y relaciones en los datos, lo que les permite generar contenido nuevo que es similar en estilo y contenido a los datos de los que aprendieron. Por ejemplo, un sistema de IAG entrenado en un conjunto de datos de preguntas de examen podría generar nuevas preguntas que sean similares en dificultad y formato a las preguntas exi...
Read more »