1. ¿Qué es HTML?

HTML significa HyperText Markup Language, que en español se traduce como Lenguaje de Marcado de Hipertexto.

Es el lenguaje que utilizamos para definir la estructura y el contenido de una página web. Permite organizar textos, títulos, imágenes, enlaces, listas, tablas y otros elementos.

Ejemplo: en una página de una empresa comercial, HTML permite colocar el nombre de la empresa, sus productos, sus precios y los enlaces a sus secciones.

2. ¿Qué es una etiqueta HTML?

Una etiqueta es una instrucción escrita entre signos de menor que (<) y mayor que (>). Generalmente, se utiliza una etiqueta de apertura y otra de cierre para delimitar el contenido.

• <p>: etiqueta de apertura.
• Estoy aprendiendo HTML.: contenido.
• </p>: etiqueta de cierre.

La diagonal / indica el cierre de una etiqueta. Sin embargo, existen elementos que no necesitan una etiqueta de cierre, como <img> y <br>.

3. Estructura básica de una página HTML

Todo documento HTML moderno comienza con una estructura que permite al navegador interpretar el contenido.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
</head>
<body>

    <h1>Hola, mundo</h1>
    <p>Esta es mi primera página web.</p>

</body>
</html>

¿Qué significa cada parte?

4. Las etiquetas HTML más utilizadas

Conoce estas etiquetas. Cada una tiene una función específica en la construcción de una página web.

5. ¿Qué son los atributos?

Los atributos proporcionan información adicional a una etiqueta. Se escriben dentro de la etiqueta de apertura y, normalmente, utilizan la forma nombre="valor".

<a href="https://example.com">Visitar sitio</a>

<img src="producto.jpg" alt="Imagen de un producto">

<p id="bienvenida">Bienvenidos a mi página.</p>

• href: indica el destino de un enlace.
• src: indica la ubicación de una imagen.
• alt: ofrece una descripción textual de la imagen.
• id: identifica un elemento dentro del documento.
• class: permite agrupar elementos para aplicarles estilos con CSS.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
</head>
<body>

    <h1>Bienvenidos a mi página</h1>

    <p>Mi nombre es __________.</p>

    <h2>Mis intereses</h2>
    <ul>
        <li>Tecnología</li>
        <li>Programación</li>
        <li>Aprender cosas nuevas</li>
    </ul>

    <hr>

    <p>Estoy aprendiendo a desarrollar páginas web.</p>

</body>
</html>

7. Reto individual: personaliza tu página

Modifica la página anterior para convertirla en una presentación personal o en la página inicial de una pequeña empresa comercial.

8. Evidencias de aprendizaje

Entrega a tu docente:

• El archivo HTML que creaste.
• Una captura de pantalla de la página abierta en el navegador.
• Las respuestas a las preguntas de reflexión.

Reflexiona y responde con tus propias palabras

1. ¿Qué es HTML y cuál es su función en una página web?
2. ¿Cuál es la diferencia entre las etiquetas <head> y <body>?
3. ¿Qué sucede si olvidas cerrar una etiqueta que requiere cierre?
4. ¿Para qué sirven los atributos href y src?
5. ¿Qué diferencia existe entre HTML y CSS?

9. Criterios de evaluación