Ejemplo HTML
- Página Anterior HTML5 SSE
- 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 en el navegador.
- Párrafo simple
- Este ejemplo demuestra cómo se muestra el texto en un elemento de párrafo en 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 formato en HTML.
- Salto de línea
- Este ejemplo demuestra el uso del salto de línea en un documento HTML.
- Título
- Este ejemplo muestra las etiquetas para mostrar los 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 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 una dirección 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
- 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 enlace HTML
- Crear enlace hipertexto
- 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 enlace en una nueva ventana del navegador
- Este ejemplo muestra cómo abrir una página en una nueva ventana del navegador, de modo que los visitantes no tengan que salir de su sitio.
- Enlazar a diferentes posiciones en 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 del 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 de documento, y los coloca mezclados en filas y columnas.
- Estructura de marco con atributo 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 apuntan a un segundo marco. El archivo llamado "contents.htm" contiene tres enlaces.
- 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
- Este ejemplo muestra dos marcos. Uno de los marcos tiene enlaces que se refieren a una sección específica en otro archivo. El archivo "link.htm" especifica la sección usando <a name="C10">.
- Navegar a una sección específica en el marco
- Este ejemplo muestra dos marcos. El marco izquierdo contiene una lista de enlaces de navegación, que se refieren al segundo marco como destino. El segundo marco 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 la tabla
- Este ejemplo muestra varios tipos de bordes de tabla.
- Tabla sin borde
- Este ejemplo muestra una tabla sin borde.
- Encabezado de la tabla (Heading)
- Este ejemplo muestra cómo mostrar la cabecera de la tabla.
- Celdas vacías
- Este ejemplo muestra cómo manejar celdas sin contenido usando " ".
- Tabla con título
- Este ejemplo muestra una tabla con título (caption).
- Celdas de tabla que se extienden a 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
- Este ejemplo muestra cómo mostrar elementos dentro de diferentes elementos.
- Margen de celda (Cell padding)
- Este ejemplo muestra cómo usar Cell padding para crear un espacio entre el contenido de la celda y su borde.
- Espacio entre celdas (Cell spacing)
- Este ejemplo muestra cómo usar Cell spacing para aumentar el espacio 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 las celdas de la tabla
- Alinear contenido en las celdas de la 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 con 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 multilinea). 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.
- Cuadro con título 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 sobre 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 clicables. Cada área es un enlace.
- 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
- Fondo y colores bien combinados
- Ejemplo de combinación de colores de fondo y texto adecuados, lo que facilita la lectura de los textos en la página.
- Fondo y colores mal combinados
- Ejemplo donde la combinación de color de fondo y color del texto no es buena, lo que hace que el texto en la página sea difícil de leer.
- Imagen de Fondo de Alta Usabilidad
- 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 Usabilidad 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 Usabilidad
- 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
- Estilos en HTML
- Este ejemplo muestra cómo usar información de estilo añadida 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 Estilos Externa
- Este ejemplo muestra cómo enlazar a una hoja de estilos externa usando la etiqueta <link>.
Ejemplo de Encabezado (head) HTML
- Título del Documento
- La información del título dentro del elemento de cabecera no se mostrará en la ventana del navegador.
- Un target, todos los enlaces
- Este ejemplo muestra cómo usar la etiqueta base para abrir todos los enlaces en una nueva ventana en la página.
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 demuestra: Redirigir al usuario a otra dirección en caso de cambio de URL.
Ejemplo de Script (Script) HTML
- Insertar un fragmento de script
- Este ejemplo muestra cómo insertar scripts en un documento HTML.
- Ejecutándose en navegadores que no admiten scripts
- Este ejemplo muestra cómo manejar navegadores que no admiten scripts.
- Página Anterior HTML5 SSE
- Página Siguiente Pruebas HTML
