HTML
Introducción a HTML
HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Se compone de una serie de elementos y atributos que definen la estructura y el contenido de una página web.
Estructura Básica de un Documento HTML
Un documento HTML comienza con la declaración <!DOCTYPE html>, que especifica la versión de HTML. La estructura básica de un documento HTML incluye las siguientes secciones:
html<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
</head>
<body>
<h1>Encabezado Principal</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Elementos Básicos de HTML
Encabezados: Se utilizan para definir títulos y subtítulos.
html<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6>Párrafos: Se utilizan para definir bloques de texto.
html<p>Este es un párrafo.</p>Enlaces: Se utilizan para crear hipervínculos.
html<a href="https://www.ejemplo.com">Visita Ejemplo</a>Imágenes: Se utilizan para insertar imágenes.
html<img src="imagen.jpg" alt="Descripción de la imagen">Listas: Se utilizan para crear listas ordenadas y desordenadas.
html<ul> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> </ul> <ol> <li>Primer elemento</li> <li>Segundo elemento</li> </ol>Tablas: Se utilizan para crear tablas de datos.
html<table> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Dato 1</td> <td>Dato 2</td> </tr> </table>Formularios: Se utilizan para recopilar datos de los usuarios.
html<form action="/enviar" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <input type="submit" value="Enviar"> </form>
Atributos Comunes en HTML
id: Identifica un elemento de manera única.
html<p id="parrafo1">Este es un párrafo con un id.</p>class: Agrupa elementos para aplicar estilos CSS o manipulación con JavaScript.
html<p class="clase1">Este es un párrafo con una clase.</p>src: Especifica la URL de una imagen, script, iframe, etc.
html<img src="imagen.jpg" alt="Descripción de la imagen">href: Especifica la URL de un enlace.
html<a href="https://www.ejemplo.com">Visita Ejemplo</a>alt: Proporciona un texto alternativo para una imagen.
html<img src="imagen.jpg" alt="Descripción de la imagen">title: Proporciona información adicional (aparece como un tooltip).
html<p title="Información adicional">Este es un párrafo con un título.</p>
HTML5: Nuevas Etiquetas y Características
HTML5 introdujo nuevas etiquetas y características que mejoran la semántica y funcionalidad de las páginas web.
Etiquetas Semánticas:
<header>: Encabezado de una sección o página.<nav>: Navegación principal.<section>: Sección de contenido.<article>: Contenido independiente.<aside>: Contenido relacionado pero no principal.<footer>: Pie de página de una sección o página.
html<header> <h1>Encabezado Principal</h1> </header> <nav> <ul> <li><a href="#inicio">Inicio</a></li> <li><a href="#acerca">Acerca</a></li> </ul> </nav> <section> <article> <h2>Artículo 1</h2> <p>Contenido del artículo 1.</p> </article> </section> <aside> <p>Contenido adicional.</p> </aside> <footer> <p>Pie de página.</p> </footer>Multimedia:
<audio>: Reproduce archivos de audio.<video>: Reproduce archivos de video.<canvas>: Dibuja gráficos en tiempo real mediante JavaScript.<svg>: Gráficos vectoriales escalables.
html<audio controls> <source src="audio.mp3" type="audio/mpeg"> Tu navegador no soporta el elemento de audio. </audio> <video controls> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta el elemento de video. </video>Formularios Mejorados:
- Nuevos tipos de input (
email,url,date,number, etc.). - Nuevos atributos (
placeholder,required,pattern, etc.).
html<form> <label for="email">Correo Electrónico:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Enviar"> </form>- Nuevos tipos de input (
Buenas Prácticas en HTML
Semántica: Usa las etiquetas HTML apropiadas para el contenido que estás representando.
Accesibilidad: Asegúrate de que tu contenido sea accesible para personas con discapacidades.
SEO (Optimización para Motores de Búsqueda): Usa etiquetas como
<title>,<meta name="description">, y encabezados adecuados para mejorar la visibilidad en los motores de búsqueda.Validación: Usa validadores de HTML para asegurarte de que tu código cumpla con los estándares.
Comentarios: Usa comentarios para explicar partes del código.
html<!-- Este es un comentario --> <p>Este es un párrafo.</p>
Recursos Adicionales
- Documentación Oficial: MDN Web Docs
- Tutoriales:
Ejemplo Completo
Aquí tienes un ejemplo completo de una página web básica en HTML:
html<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
padding: 20px;
}
header {
background-color: #f4f4f4;
}
nav {
background-color: #333;
color: white;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
footer {
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Bienvenidos a Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section>
<article>
<h2>Artículo 1</h2>
<p>Este es el contenido del artículo 1.</p>
</article>
<article>
<h2>Artículo 2</h2>
<p>Este es el contenido del artículo 2.</p>
</article>
</section>
<aside>
<p>Este es un contenido adicional, como enlaces o anuncios.</p>
</aside>
<footer>
<p>Pie de página © 2024</p>
</footer>
</body>
</html>
Comentarios
Publicar un comentario