En esta sección, aprenderás cómo añadir contenido y medios a tu sitio web. Esto incluye texto, imágenes, videos y otros elementos multimedia que harán que tu sitio sea más atractivo y funcional.
- Añadiendo Texto
Párrafos y Encabezados
El texto es el componente más básico de cualquier sitio web. HTML proporciona varias etiquetas para estructurar y dar formato al texto.
Ejemplo de Párrafo y Encabezado
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Web</title>
</head>
<body>
<h1>Bienvenido a Mi Sitio Web</h1>
<p>Este es un párrafo de ejemplo. Puedes añadir tanto texto como necesites aquí.</p>
<h2>Subtítulo</h2>
<p>Otro párrafo de ejemplo para mostrar cómo se estructuran los textos.</p>
</body>
</html>Listas
Las listas son útiles para organizar información en un formato fácil de leer.
Ejemplo de Lista Ordenada y Desordenada
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Listas en HTML</title>
</head>
<body>
<h1>Listas en HTML</h1>
<h2>Lista Ordenada</h2>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<h2>Lista Desordenada</h2>
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
</body>
</html>
- Añadiendo Imágenes
Las imágenes son una parte esencial de cualquier sitio web. Puedes añadir imágenes utilizando la etiqueta <img>.
Atributos de la Etiqueta <img>
src: La ruta de la imagen.alt: Texto alternativo que describe la imagen.
Ejemplo de Imagen
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Imágenes en HTML</title>
</head>
<body>
<h1>Imágenes en HTML</h1>
<img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen">
</body>
</html>
- Añadiendo Videos
Puedes incrustar videos en tu sitio web utilizando la etiqueta <video>.
Atributos de la Etiqueta <video>
src: La ruta del video.controls: Muestra los controles de reproducción.autoplay: Reproduce el video automáticamente.loop: Reproduce el video en bucle.
Ejemplo de Video
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Videos en HTML</title>
</head>
<body>
<h1>Videos en HTML</h1>
<video src="ruta/a/tu/video.mp4" controls>
Tu navegador no soporta la etiqueta de video.
</video>
</body>
</html>
- Añadiendo Audio
Para añadir audio, puedes usar la etiqueta <audio>.
Atributos de la Etiqueta <audio>
src: La ruta del archivo de audio.controls: Muestra los controles de reproducción.autoplay: Reproduce el audio automáticamente.loop: Reproduce el audio en bucle.
Ejemplo de Audio
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Audio en HTML</title>
</head>
<body>
<h1>Audio en HTML</h1>
<audio src="ruta/a/tu/audio.mp3" controls>
Tu navegador no soporta la etiqueta de audio.
</audio>
</body>
</html>Ejercicio Práctico
Instrucciones
- Crea una nueva página HTML.
- Añade un título y un párrafo de bienvenida.
- Incluye una lista ordenada y una desordenada.
- Añade una imagen con una descripción.
- Incrusta un video y un archivo de audio con controles de reproducción.
Solución
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Página Completa</title>
</head>
<body>
<h1>Bienvenido a Mi Página Completa</h1>
<p>Esta es una página de ejemplo que incluye varios tipos de contenido y medios.</p>
<h2>Lista Ordenada</h2>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
<h2>Lista Desordenada</h2>
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
<h2>Imagen</h2>
<img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen">
<h2>Video</h2>
<video src="ruta/a/tu/video.mp4" controls>
Tu navegador no soporta la etiqueta de video.
</video>
<h2>Audio</h2>
<audio src="ruta/a/tu/audio.mp3" controls>
Tu navegador no soporta la etiqueta de audio.
</audio>
</body>
</html>Conclusión
En esta sección, has aprendido cómo añadir diversos tipos de contenido y medios a tu sitio web, incluyendo texto, imágenes, videos y audio. Estos elementos son fundamentales para crear una experiencia de usuario rica y atractiva. En la próxima sección, nos enfocaremos en las pruebas y el despliegue de tu sitio web para asegurarnos de que todo funcione correctamente antes de hacerlo público.
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad