Ejemplo HTML
- Página anterior SSE de HTML5
- Página siguiente Pruebas HTML
Ejemplo de etiquetas básicas de HTML
- Un archivo HTML simple
- Este ejemplo es un archivo HTML muy simple, que utiliza la menor cantidad posible de etiquetas HTML. Le muestra cómo se muestra el contenido del elemento body por el navegador.
- Párrafo simple
- Este ejemplo muestra: cómo se muestra el texto en los elementos de párrafo por el navegador.
- Más párrafos
- Este ejemplo demuestra ciertos comportamientos predeterminados de los elementos de párrafo.
- Problema de poesía
- Este ejemplo demuestra ciertos problemas de formateo en HTML.
- Alineación
- Este ejemplo demuestra el uso de la alineación en documentos HTML.
- Título
- Este ejemplo muestra las etiquetas para mostrar títulos en un documento HTML.
- Título alineado al centro
- Este ejemplo muestra un título alineado al centro.
- Línea horizontal
- Este ejemplo muestra cómo insertar una línea horizontal.
- Comentarios ocultos
- Este ejemplo muestra cómo insertar comentarios ocultos en el código fuente HTML.
- Color de fondo
- Este ejemplo muestra cómo agregar un color de fondo a una página HTML.
Ejemplo de formateo de texto HTML
- Formateo de texto
- Este ejemplo muestra cómo formatear texto en un archivo HTML.
- Texto preformateado
- Este ejemplo muestra cómo controlar las líneas en blanco y los espacios en un documento HTML usando la etiqueta pre.
- Etiquetas de "salida de computadora"
- Este ejemplo muestra los efectos de visualización de diferentes etiquetas de "salida de computadora".
- Dirección
- Este ejemplo muestra cómo escribir direcciones en un archivo HTML.
- Abreviaturas y siglas
- Este ejemplo muestra cómo implementar abreviaturas o siglas.
- Dirección del texto
- Este ejemplo muestra cómo cambiar la dirección del texto.
- Cita en bloque
- Este ejemplo muestra cómo implementar citas de diferentes longitudes.
- Efecto de eliminación de texto y efecto de inserción de texto
- Este ejemplo muestra cómo marcar texto eliminado y texto insertado.
Ejemplo de hipervínculo HTML
- Crear hipervínculos
- Este ejemplo muestra cómo crear enlaces en un documento HTML.
- Usar imágenes como enlaces
- Este ejemplo muestra cómo usar imágenes como enlaces.
- Abrir enlaces en una nueva ventana del navegador
- Este ejemplo muestra cómo abrir una página en una nueva ventana del navegador, de modo que el visitante no tenga que salir de su sitio.
- Enlazar a diferentes posiciones de la misma página
- Este ejemplo muestra cómo usar enlaces para saltar a otra parte del documento.
- Salir del marco
- Este ejemplo muestra cómo salir de un marco, si su página está fijada dentro de un marco.
- Crear enlace de correo electrónico
- Este ejemplo muestra cómo enlazar a un correo electrónico. (Este ejemplo solo funcionará después de instalar el programa cliente de correo electrónico.).
- Crear enlace de correo electrónico 2
- Este ejemplo muestra enlaces de correo electrónico más complejos.
Ejemplo de marco HTML
- Marco vertical
- Este ejemplo muestra cómo crear un marco vertical usando tres documentos diferentes.
- Marco horizontal
- Este ejemplo muestra cómo crear un marco horizontal usando tres documentos diferentes.
- Cómo usar la etiqueta <noframes>
- Este ejemplo muestra cómo usar la etiqueta <noframes>.
- Estructura de marco mixto
- Este ejemplo muestra cómo crear una estructura de marco que contiene tres documentos y los coloca mezclados en filas y columnas.
- Estructura de marco con la propiedad noresize="noresize"
- Este ejemplo muestra la propiedad noresize. En este ejemplo, el marco no se puede ajustar en tamaño. Al arrastrar el ratón sobre los bordes entre marcos, notará que los bordes no se pueden mover.
- Marco de navegación
- Este ejemplo muestra cómo crear un marco de navegación. El marco de navegación contiene una lista de enlaces que tienen como destino el segundo marco. El archivo llamado "contents.htm" contiene tres enlaces.
- 内联框架
- 本例演示如何创建内联框架（HTML 页中的框架）。
- Marco en línea
- Este ejemplo muestra cómo crear un marco en línea (marco dentro de una página HTML).
- Saltar a una sección específica dentro de un marco
- Navegar a una sección específica usando navegación de marcos
Este ejemplo muestra dos marcos. El marco izquierdo contiene una lista de enlaces que apuntan a la segunda tabla como destino. La segunda tabla muestra el documento enlazado. Los enlaces en el marco de navegación apuntan a la sección especificada en el archivo de destino.
- Ejemplo de tabla HTML
- Tabla
- Este ejemplo muestra cómo crear una tabla en un documento HTML.
- Bordes de tabla
- Este ejemplo muestra diferentes tipos de bordes de tabla.
- Tabla sin borde
- Este ejemplo muestra una tabla sin borde.
- Encabezado de tabla (Heading)
- Este ejemplo muestra cómo mostrar la cabecera de la tabla.
- Celdas vacías
- Este ejemplo muestra cómo usar " " para manejar celdas sin contenido.
- Tabla con título
- Este ejemplo muestra una tabla con un título (caption).
- Celdas de tabla que se extienden a través de múltiples filas o columnas
- Este ejemplo muestra cómo definir celdas de tabla que se extienden a través de múltiples filas o columnas.
- Etiquetas dentro de la tabla
- Margen de celda (Cell padding)
- Este ejemplo muestra cómo usar el relleno de celdas para crear un espacio entre el contenido de la celda y su borde.
- Espacio entre celdas (Cell spacing)
- Este ejemplo muestra cómo usar el espacio entre celdas para aumentar la distancia entre celdas.
- Agregar color de fondo o imagen de fondo a la tabla
- Agregar color de fondo o imagen de fondo a la tabla
- Agregar color de fondo o imagen de fondo a la tabla
- Agregar color de fondo o imagen de fondo a celdas de tabla
- Alinear contenido en celdas de tabla
- Este ejemplo muestra cómo usar la propiedad "align" para alinear el contenido de las celdas, creando una tabla atractiva.
- Propiedad de marco (frame)
- Este ejemplo muestra cómo usar la propiedad "frame" para controlar el borde alrededor de la tabla.
Ejemplo de lista HTML
- Lista sin numerar
- Este ejemplo muestra una lista sin numerar.
- Lista numerada
- Este ejemplo muestra una lista numerada.
- Diferentes tipos de listas sin numerar
- Este ejemplo muestra una lista sin numerar.
- Diferentes tipos de listas numeradas
- Este ejemplo muestra diferentes tipos de listas numeradas.
- Lista anidada
- Este ejemplo muestra cómo anidar listas.
- Lista anidada 2
- Este ejemplo muestra una lista anidada más compleja.
- Lista definida
- Este ejemplo muestra una lista definida.
Ejemplo de formulario HTML e entrada
- Campo de texto (Text fields)
- Este ejemplo demuestra cómo crear un campo de texto en una página HTML. El usuario puede escribir texto en el campo de texto.
- Campo de contraseña
- Este ejemplo demuestra cómo crear un campo de contraseña en HTML.
- Casilla de verificación
- Este ejemplo demuestra cómo crear una casilla de verificación en HTML. El usuario puede marcar o desmarcar la casilla de verificación.
- Botón de opción
- Este ejemplo demuestra cómo crear un botón de opción en HTML.
- Lista desplegable simple
- Este ejemplo demuestra cómo crear una lista desplegable simple en una página HTML. La lista desplegable es una lista opcional.
- Otra lista desplegable
- Este ejemplo demuestra cómo crear una lista desplegable simple con un valor predeterminado. (Nota del traductor: El valor predeterminado se refiere a la opción preferida previamente especificada.)
- Campo de texto (Textarea)
- Este ejemplo demuestra cómo crear un campo de texto (control de entrada de texto multilínea). El usuario puede escribir texto en el campo de texto. En el campo de texto, no hay límite para el número de caracteres que se pueden escribir.
- Crear un botón
- Este ejemplo demuestra cómo crear un botón. Puede personalizar el texto en el botón.
- Fieldset alrededor de los datos
- Este ejemplo demuestra cómo dibujar un cuadro con título alrededor de los datos.
Ejemplo de formulario
- Formulario con campos de entrada y botón de confirmación
- Este ejemplo demuestra cómo agregar un formulario a una página. Este formulario contiene dos campos de entrada y un botón de confirmación.
- Formulario con casillas de verificación
- Este formulario contiene dos casillas de verificación y un botón de confirmación.
- Formulario con opciones de selección
- Este formulario contiene dos opciones de selección y un botón de confirmación.
- Enviar correo electrónico desde un formulario
- Este ejemplo muestra cómo enviar un correo electrónico desde un formulario.
Ejemplo de imagen HTML
- Insertar imágenes
- Este ejemplo demuestra cómo mostrar una imagen en una página web.
- Insertar imágenes desde diferentes ubicaciones
- Este ejemplo demuestra cómo mostrar imágenes de diferentes ubicaciones o servidores en una página web.
- Imagen de fondo
- Este ejemplo demuestra cómo agregar una imagen de fondo a una página HTML.
- Alinear las imágenes
- Este ejemplo demuestra cómo alinear una imagen en el texto.
- Imágenes flotantes
- Este ejemplo demuestra cómo hacer que una imagen flote a la izquierda o derecha del párrafo.
- Ajustar el tamaño de la imagen
- Este ejemplo demuestra cómo ajustar el tamaño de una imagen a diferentes dimensiones.
- Mostrar texto alternativo para la imagen
- Este ejemplo demuestra cómo mostrar texto alternativo para una imagen. Cuando el navegador no puede cargar la imagen, el atributo de texto alternativo informa a los lectores de la información perdida. Es una buena costumbre agregar atributos de texto alternativo a todas las imágenes en la página.
- Crear un enlace de imagen
- Este ejemplo demuestra cómo usar una imagen como un enlace.
- Crear un mapa de imágenes
- Este ejemplo muestra cómo crear un mapa de imágenes con áreas de clic que son enlaces.
- Convertir una imagen en un mapa de imágenes
- Este ejemplo muestra cómo establecer una imagen común como un mapa de imágenes.
Ejemplo de fondo HTML
- Un fondo y colores bien combinados
- Un ejemplo de buena combinación de color de fondo y de texto, que hace que los textos en la página sean fáciles de leer.
- Un fondo y colores mal combinados
- Ejemplo donde una combinación de color de fondo y color del texto no está bien equilibrada, lo que hace que el texto en la página sea difícil de leer.
- Imagen de fondo de alta accesibilidad
- Ejemplo donde la imagen de fondo y el color del texto hacen que el texto de la página sea fácil de leer.
- Imagen de fondo de alta accesibilidad 2
- Otro ejemplo donde la imagen de fondo y el color del texto hacen que el texto de la página sea fácil de leer.
- Imagen de fondo de baja accesibilidad
- Ejemplo donde la imagen de fondo y el color del texto hacen que el texto de la página sea difícil de leer.
Ejemplo de estilo (style) HTML
- Estilo en HTML
- Este ejemplo muestra cómo usar información de estilo agregada al <head> para formatear HTML.
- Enlace sin subrayado
- Este ejemplo muestra cómo hacer un enlace sin subrayado usando la propiedad de estilo.
- Enlazar a una hoja de estilo externa
- Este ejemplo muestra cómo enlazar a una hoja de estilo externa usando la etiqueta <link>.
Ejemplo de encabezado (head) HTML
- Título del documento
- La información del título dentro del elemento de encabezado no se mostrará en la ventana del navegador.
- Un target, todos los enlaces
- Este ejemplo muestra cómo usar la etiqueta base para que todos los enlaces de la página se abran en una nueva ventana.
Ejemplo de metadatos (meta) HTML
- Descripción del documento
- La información en los elementos Meta puede describir el documento HTML.
- Palabras clave del documento
- La información en los elementos Meta puede describir palabras clave del documento.
- Redirección
- Este ejemplo muestra: redirigir al usuario a otra dirección cuando la URL ha cambiado.
Ejemplo de script (Script) HTML
- Insertar un segmento de script
- Este ejemplo muestra cómo insertar scripts en un documento HTML.
- Ejecutado en navegadores que no admiten scripts
- Este ejemplo muestra cómo lidiar con navegadores que no admiten scripts.
- Página anterior SSE de HTML5
- Página siguiente Pruebas HTML
