Colegio Costa Sur
Tecnología
Lic. Aroldo de León Martinez
4to Bachillerato
Programación HTML
Heremy Noe Martinez Esrrada
Ciclo Escolar 2025, Santa Lucía Cotzumlaguapa
Introducción a la Programación HTML
Introducción
HTML (HyperText Markup Language) es el lenguaje estándar para la creación y
estructuración de páginas web. A través de etiquetas y atributos, permite definir títulos,
párrafos, imágenes, enlaces, formularios y mucho más. HTML es la base de todo sitio web, y
su conocimiento es esencial para cualquier persona que desee incursionar en el desarrollo
web.
En este documento, exploraremos desde los conceptos más básicos hasta prácticas
modernas y etiquetas avanzadas que forman parte del estándar HTML5.
1. Estructura básica de una página HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Este es un párrafo.</p>
</body>
</html>
Cada parte tiene una función específica:
- <html>: contenedor de todo el documento
- <head>: incluye metadatos y recursos
- <body>: contiene el contenido visible de la página
2. Etiquetas comunes:
- <h1> a <h6>: Encabezados jerárquicos
- <p>: Párrafo
- <a href=''>: Enlace
- <img src='' alt=''>: Imagen
- <ul>, <ol>, <li>: Listas no ordenadas y ordenadas
- <div>: División genérica de contenido
- <span>: Contenedor en línea
3. Formularios en HTML:
Los formularios permiten la entrada de datos por parte 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>
Tipos de input:
- text, password, email, number, checkbox, radio, date, file
- textarea: para textos largos
- select y option: listas desplegables
4. Atributos comunes:
- id: identificador único
- class: para aplicar estilos CSS
- style: estilo en línea
- title: texto emergente
- alt: descripción alternativa de imagen
5. HTML5: Etiquetas semánticas
HTML5 introdujo etiquetas que mejoran la semántica y estructura del documento.
- <header>: encabezado de la página o sección
- <nav>: menú de navegación
- <main>: contenido principal
- <section>: secciones dentro de main
- <article>: contenido independiente
- <footer>: pie de página
6. Multimedia:
HTML5 también permite incrustar contenido multimedia fácilmente:
<video controls width='320'>
<source src='video.mp4' type='video/mp4'>
Tu navegador no soporta video HTML5.
</video>
<audio controls>
<source src='audio.mp3' type='audio/mp3'>
Tu navegador no soporta audio HTML5.
</audio>
7. Buenas prácticas:
- Usar etiquetas semánticas para mejorar SEO y accesibilidad
- Escribir código claro y ordenado
- Validar el código en [Link]
- Añadir descripciones a imágenes (atributo alt)
- Separar contenido (HTML), presentación (CSS) y comportamiento (JavaScript)
Conclusiones
Conclusiones:
1. HTML es la base fundamental de cualquier sitio web, sin él no existiría la web como la
conocemos.
2. Conocer la estructura, etiquetas y atributos de HTML permite crear contenido web claro y
funcional.
3. Aplicar buenas prácticas en HTML mejora la accesibilidad, mantenimiento y rendimiento
de los sitios web.