EBAC Logotipo
Menú

3.2 Construye la base: estructura de una página con HTML

Conocer la anatomía esencial de un archivo HTML y su función como base estructural de cualquier sitio o aplicación web.

1. ¿Qué es HTML?

Hyper Text Markup Language


El componente más elemental de un sitio web, si bien es un lenguaje tenemos que tener claro que html es:


  1. Lenguaje de marcado, no de programación
  2. Define la estructura de una página web
  3. Usa etiquetas para organizar contenido
  4. Elementos: títulos, párrafos, imágenes, listas, enlaces

2. Etiquetas HTML

  1. Base de la estructura HTML
  2. Se escriben entre < >
  3. Generalmente vienen en pares: apertura y cierre
  4. Algunas son autocontenidas: <img>
  5. Se pueden incluir comentarios: <!-- comentario --> 


<!-- Esto es una etiqueta de comentario -->





<!-- h1 Etiqueta de título principal -->


<h1>Hola Mundo</h1>





<!-- Etiqueta de imagen, no cierra con par -->


<img src="/logo.svg" alt="Logotipo" width="100">

3. Estructura de documento

  1. Archivo básico: index.html
  2. <!DOCTYPE html> declara HTML5
  3. <html> etiqueta raíz
  4. <head> = metadatos (título, codificación, estilos)
  5. <body> = contenido visible
  6. Archivo con extensión .html


Ejemplo: index.html



<!DOCTYPE html>


    <html lang="en">


        <head>


            <meta charset="UTF-8">


            <meta name="viewport" content="width=device-width, initial-scale=1.0">


            <title>Hola Mundo</title>


        </head>        


<body>


            <!-- Contenido de la página -->


        </body>    


</html>


4. Etiquetas más comunes

  1. <h1> a <h6> para encabezados de diferentes niveles.
  2. <p> para párrafos de texto.
  3. <ul> y <ol> para listas no ordenadas y ordenadas, respectivamente.
  4. <li> para elementos de lista.
  5. <a> para enlaces.
  6. <img> para imágenes.
  7. <div> y <span> para agrupar elementos.

5. Atributos HTML

Proporcionan información adicional sobre los elementos HTML.

  1. Se escriben dentro de la etiqueta de apertura y consisten en un nombre y un valor, separados por un signo igual =.
  2. Se utilizan para especificar propiedades de los elementos, como el color, el tamaño, la fuente, la alineación, etc.


Ejemplo:

<img src="/ruta-a-imagen.jpg" alt="Descripción de imagen" width="100">