Ejemplos HTML y HTML5: Guía Completa de Código – Aprende a Programar

Los Mejores Ejemplos HTML y HTML5: Guía Completa de Código

Este artículo te guiará a través de una colección completa de ejemplos de código HTML y HTML5, explorando la sintaxis y los atributos de diferentes etiquetas. Desde enlaces y estilos hasta elementos semánticos y multimedia, este recurso te ayudará a comprender las bases de la creación de páginas web.

Enlaces y Atributos Esenciales

Comenzaremos con los elementos básicos para conectar diferentes partes de una página web:

1. Enlaces (<a>): Los enlaces son la columna vertebral de la navegación web. El atributo href se utiliza para especificar la URL a la que se dirige el enlace:

html
<a href="https://www.google.com">Ir a Google</a>

2. Anclas dentro de la Página (<a name> y #): Puedes crear enlaces que te lleven a diferentes secciones de la misma página web:

«`html
Sección 1

…Contenido de la Sección 1…

Ir a la Sección 1
«`

3. Enlaces de Imagen (<img>): El atributo src especifica la fuente de la imagen, mientras que alt proporciona texto alternativo para usuarios de lectores de pantalla:

html
<img src="imagen.jpg" alt="Imagen descriptiva">

4. Atributo target: Este atributo te permite controlar cómo se abre un enlace: _blank para abrirlo en una nueva pestaña, _self para abrirlo en la misma pestaña.

html
<a href="https://www.example.com" target="_blank">Ejemplo de sitio web</a>

Estilos Básicos de Fondo y Texto

El código HTML también te permite personalizar el aspecto de tu página web. Exploremos algunos atributos esenciales:

5. Establecer un Fondo de Imagen (body background): Este atributo te permite usar una imagen como fondo de tu página:

html
<body background="fondo.jpg">

6. Establecer un Color de Fondo (body bgcolor): Para un fondo de color sólido, utiliza el atributo bgcolor:

html
<body bgcolor="#f0f0f0">

7. Alinear Texto con div align: El atributo align dentro de un elemento div te permite alinear el texto:

LEER:  jQuery each(): Itera sobre Elementos con la Función de Callback

«`html

Este texto estará centrado

«`

8. Color de Fuente (font color): Con el atributo color, puedes cambiar el color del texto:

html
<font color="blue">Este texto será azul</font>

9. Tamaño de Fuente (font size): El atributo size te permite ajustar el tamaño de la fuente:

html
<font size="4">Este texto será más grande</font>

10. Alinear Imágenes (img align): El atributo align de la etiqueta img te permite alinear imágenes con el texto que las rodea:

html
<img src="imagen.jpg" align="left">

11. Establecer Ancho de Imagen (img width): Utiliza el atributo width para controlar el ancho de una imagen:

html
<img src="imagen.jpg" width="200">

12. Imágenes y Atributos (img src): El atributo src especifica la fuente de la imagen, mientras que alt proporciona texto alternativo para usuarios de lectores de pantalla:

html
<img src="imagen.jpg" alt="Imagen descriptiva">

Entidades HTML: Caracteres Especiales

13. Entidades HTML: Para representar caracteres especiales como comillas, signos de menor que o mayor que, se utilizan entidades HTML:

html
&nbsp; (Espacio en blanco)
&lt; (Signo de menor que)
&gt; (Signo de mayor que)
&quot; (Comillas)
&amp; (Ampersand)

Formularios HTML para Recopilar Información

14. Formularios HTML (<form>): Los formularios te permiten recopilar datos del usuario. El atributo action define la página a la que se enviarán los datos, y method especifica el método de envío (POST o GET):

«`html




«`

15. Tipos de Entrada (<input>): Los formularios usan diferentes tipos de entrada, como text para campos de texto, password para contraseñas, email para direcciones de correo electrónico, radio para botones de opción, checkbox para casillas de verificación, submit para botones de envío, reset para botones de reinicio, file para seleccionar archivos, etc.

LEER:  Append en Python: Guía Completa para Agregar Elementos a Listas

Reproducir Audio y Vídeo con HTML5

16. Elemento audio: El elemento audio se utiliza para reproducir archivos de audio. Los atributos src y controls son esenciales:

html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no admite la etiqueta de audio.
</audio>

17. Elemento video: El elemento video te permite incorporar vídeos en tu página web. Los atributos src, controls, width, y height son comunes:

html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no admite la etiqueta de vídeo.
</video>

Elementos Semánticos HTML5: Estructura y Significado

HTML5 introduce elementos semánticos que mejoran la estructura y la accesibilidad de tus páginas web. Estos elementos ayudan a los navegadores y a los motores de búsqueda a entender mejor el contenido:

18. Elemento section: Divide el contenido de la página en secciones temáticas:

«`html

Sección de Productos

…Descripción de los productos…

«`

19. Elemento article: Define un artículo independiente dentro de la página web, como una entrada de blog o una noticia:

«`html

Título del Artículo

…Contenido del artículo…

«`

20. Elemento header: Define el encabezado de una sección o del documento completo:

«`html

Título de la Página

«`

21. Elemento hgroup: Agrupa varios títulos <h1> a <h6> para un mayor control de la jerarquía de títulos:

«`html

Título Principal

Subtítulo

«`

22. Elemento aside: Define contenido lateral que complementa el contenido principal de la página:

«`html

«`

23. Elemento nav: Representa una sección de navegación en la página:

«`html

«`

24. Elemento footer: Define la información al final del documento, como derechos de autor o información de contacto:

LEER:  Extraer Subcadenas con java.util.regex.Matcher.group() - Guía Completa

«`html

© 2023 Tu Empresa. Todos los derechos reservados.

«`

25. Elemento small: Define texto que se muestra en un tamaño de fuente más pequeño:

html
<small>Este texto será más pequeño.</small>

26. Elemento time: Especifica la fecha y hora de un contenido:

html
<time datetime="2023-10-26T12:00:00">26 de octubre de 2023</time>

27. Elementos figure y figcaption: Define una figura (imagen) y su leyenda:

«`html

Imagen descriptiva
Leyenda de la imagen.

«`

28. Elemento video: El elemento video te permite incorporar vídeos en tu página web. Los atributos src, controls, width, y height son comunes:

html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no admite la etiqueta de vídeo.
</video>

Almacenamiento Web con HTML5

29. Almacenamiento Web: HTML5 introduce almacenamiento local y almacenamiento de sesión para guardar datos en el navegador del usuario:

«`javascript
// Almacenamiento local
localStorage.setItem(‘nombre’, ‘Juan’);
let nombre = localStorage.getItem(‘nombre’);

// Almacenamiento de sesión
sessionStorage.setItem(‘color’, ‘rojo’);
let color = sessionStorage.getItem(‘color’);
«`

Enlaces mailto para Enviar Correos Electrónicos

30. Enlaces mailto: Estos enlaces te permiten enviar correos electrónicos directamente desde tu navegador:

html
<a href="mailto:info@tuempresa.com">Enviar un correo</a>

Consideraciones de Compatibilidad con HTML5

Recuerda que los navegadores más modernos son compatibles con HTML5. Sin embargo, es crucial validar tu código para detectar errores y garantizar que tu página web se muestre correctamente en todos los navegadores.

Conclusión: Convirtiéndote en un Maestro del HTML

Ahora tienes una base sólida para crear páginas web con HTML y HTML5. Puedes construir estructuras complejas, agregar estilos, incluir multimedia y utilizar las últimas funciones de HTML5. Recuerda que este artículo solo cubre una selección de ejemplos, pero te animamos a explorar la amplia gama de posibilidades que ofrece HTML. ¡Comienza a crear tus propios proyectos web y experimenta con el código HTML!