Descripción del curso HTML
HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear y estructurar el contenido en la web. Es la base de todas las páginas web y define la estructura y el significado de los elementos que aparecen en ellas.
¿Qué es HTML?
HTML es un lenguaje de marcado que utiliza etiquetas para definir la estructura y el contenido de un documento web. Estas etiquetas indican al navegador cómo debe mostrar y organizar el contenido, permitiendo incluir texto, imágenes, enlaces, tablas, formularios y otros elementos multimedia.
Estructura básica de un documento HTML
Un documento HTML típico tiene la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
<!DOCTYPE html>: Indica al navegador que el documento utiliza HTML5.<html>: Etiqueta raíz que engloba todo el contenido de la página.<head>: Contiene metadatos, como el título y enlaces a estilos o scripts.<body>: Contiene el contenido visible de la página.
Etiquetas y elementos esenciales
Encabezados
Definen títulos y subtítulos, desde <h1> (más importante) hasta <h6> (menos importante).
<h1>Título principal</h1>
<h2>Subtítulo</h2>
Párrafos
La etiqueta <p> define un párrafo de texto.
<p>Este es un párrafo de ejemplo en HTML.</p>
Enlaces
Se crean con la etiqueta <a> y el atributo href.
<a href="https://www.ejemplo.com">Visitar Ejemplo</a>
Imágenes
Para insertar imágenes, se utiliza la etiqueta <img> con el atributo src.
<img src="imagen.jpg" alt="Descripción de la imagen">
Listas
Lista no ordenada
Utiliza <ul> para la lista y <li> para cada elemento.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Lista ordenada
Usa <ol> en lugar de <ul>.
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ol>
Tablas
Definen datos en formato de filas y columnas.
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>28</td>
</tr>
<tr>
<td>Luis</td>
<td>35</td>
</tr>
</table>
Formularios
Permiten recopilar información del usuario.
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>
Atributos globales
Los atributos proporcionan información adicional a las etiquetas.
id: Identificador único del elemento.class: Clase para aplicar estilos CSS.style: Estilos en línea para el elemento.title: Texto emergente al pasar el cursor.
Ejemplo:
<p id="parrafo1" class="texto-destacado" style="color: blue;" title="Información adicional">
Este es un párrafo con atributos.
</p>
Etiquetas semánticas
Mejoran la estructura y accesibilidad del documento.
<header>: Encabezado de la página o sección.<nav>: Contiene enlaces de navegación.<main>: Contenido principal.<section>: Sección temática del contenido.<article>: Contenido independiente.<aside>: Contenido relacionado.<footer>: Pie de página.
Ejemplo:
<header>
<h1>Mi Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<main>
<section id="inicio">
<h2>Bienvenido</h2>
<p>Contenido de la sección de inicio.</p>
</section>
</main>
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>
Multimedia y gráficos
Audio
Insertar archivos de audio con <audio>.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Video
Usar <video> para reproducir videos.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
Canvas y SVG
<canvas>: Dibujo de gráficos mediante scripts.<svg>: Gráficos vectoriales escalables.
Ejemplo de canvas:
<canvas id="miCanvas" width="200" height="100"></canvas>
Enlaces a CSS y JavaScript
Vincular hojas de estilo CSS
En el <head> del documento:
<link rel="stylesheet" href="estilos.css">
Incluir scripts JavaScript
Al final del <body> o en el <head>:
<script src="script.js"></script>
Metadatos y SEO
Los metadatos proporcionan información adicional sobre el documento.
<meta name="description" content="Descripción de la página para SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Tu Nombre">
Buenas prácticas en HTML
- Validar el código: Utilizar herramientas como el validador W3C.
- Usar etiquetas semánticas: Mejora la accesibilidad y SEO.
- Optimizar imágenes: Reducir el tamaño para mejorar la carga.
- Especificar atributos
alt: Importante para lectores de pantalla y SEO. - Estructurar el contenido: Utilizar una jerarquía lógica con encabezados.
Recursos adicionales
- Documentación: MDN Web Docs
- Validación: W3C Markup Validation Service
- Editores recomendados: Visual Studio Code, Sublime Text, Atom.
Ejemplo completo de una página HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página de Ejemplo</title>
<meta name="description" content="Una página de ejemplo en HTML">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Página de Ejemplo</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<main>
<section id="inicio">
<h2>Bienvenido</h2>
<p>Este es un ejemplo de una página HTML básica.</p>
<img src="imagen.jpg" alt="Descripción de la imagen">
</section>
<section id="sobre-mi">
<h2>Sobre Mí</h2>
<p>Información sobre el autor o el propósito del sitio.</p>
</section>
<section id="contacto">
<h2>Contacto</h2>
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Enviar">
</form>
</section>
</main>
<footer>
<p>© 2024 CertiDevs</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Lecciones y tutoriales de HTML
Ejercicios de programación de HTML
Módulos del curso
Explora todos los módulos disponibles en este curso de HTML
Explorar más tecnologías
Descubre más tecnologías de programación y desarrollo de software
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, HTML es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.