Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos /Python SELF ES /Introducción a HTML

Introducción a HTML

Python SELF ES
Nivel 29 , Lección 0
Disponible

1. Etiquetas en HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es un lenguaje de marcado utilizado para crear y estructurar páginas web. Con HTML podemos organizar el contenido de una página utilizando diferentes etiquetas y atributos, para que el navegador sepa cómo mostrar la información. En esta lección vamos a ver los conceptos básicos de HTML, como etiquetas, árbol de etiquetas, atributos, etiquetas individuales y la estructura de un documento HTML.

En HTML, las etiquetas son los elementos clave que permiten marcar el contenido. Rodean el texto y otros elementos, ayudando al navegador a entender cómo mostrarlos exactamente. Por ejemplo, las etiquetas <h1> y <p> indican al navegador que el texto dentro de ellas es un encabezado o un párrafo.

Las etiquetas se escriben dentro de corchetes angulares <>. La mayoría de las etiquetas se abren y se cierran, es decir, consisten en una etiqueta inicial y otra final. Por ejemplo:

HTML 
                      
                        <h1>Esto es un encabezado</h1>
                        <p>Esto es un párrafo.</p>
Java university

Aquí <h1> es la etiqueta inicial, y </h1> es la etiqueta final.

Árbol de etiquetas

Un documento HTML tiene una estructura jerárquica, donde las etiquetas están anidadas unas dentro de otras, formando una estructura en forma de árbol. Este "árbol de etiquetas" define cómo los elementos de la página están relacionados entre sí y en qué orden deben mostrarse.

Aquí tienes un ejemplo de un árbol de etiquetas sencillo:

Python 

<html>
<head>
  <title>Página de ejemplo</title>
</head>
<body>
  <h1>Encabezado de la página</h1>
  <p>Aquí se encuentra un párrafo de texto.</p>
</body>
</html>

En este ejemplo, la etiqueta <html> es el elemento raíz, dentro de ella están <head> y <body>. Dentro de <body> están las etiquetas <h1> y <p>. Esta estructura permite organizar lógicamente el contenido de la página.

Atributos

Los atributos en HTML se utilizan para agregar información adicional a las etiquetas. Se colocan en la etiqueta inicial y constan de un nombre y un valor. Por ejemplo:

HTML 

<a href="https://example.com">Enlace al sitio</a>
<img src="image.jpg" alt="Descripción de la imagen">
  • href indica la dirección del enlace.
  • src — la ruta de la imagen.
  • alt — texto alternativo que aparecerá si la imagen no se carga.

Los atributos permiten agregar características adicionales a los elementos, como un identificador (id), clases (class), estilos (style) y mucho más.

Etiquetas individuales

Algunas etiquetas HTML no contienen contenido interno y no requieren una etiqueta de cierre. Estas etiquetas se llaman individuales. Por ejemplo, la etiqueta <img> se utiliza para insertar imágenes, y su estructura es así:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Descripción de la imagen">
HTML 
  
    <img src="image.jpg" alt="Descripción de la imagen">

Otros ejemplos de etiquetas individuales:

  • <br> — para un salto de línea.
  • <hr> — para agregar una línea horizontal.

2. Introducción al documento HTML

Un documento HTML comienza con la declaración <!DOCTYPE html>, que indica al navegador que este es un documento HTML5. Luego va la etiqueta raíz <html>, que contiene las etiquetas <head> y <body>. En <head> se encuentran los metadatos del documento (título, estilos, scripts), y en <body> — el contenido principal de la página.

Ejemplo de documento HTML

Python 
      
        <!DOCTYPE html>
        <html lang="es">
        <head>
          <meta charset="UTF-8">
          <title>Mi primera página</title>
        </head>
        <body>
          <h1>¡Bienvenido!</h1>
          <p>Este es un ejemplo de un documento HTML.</p>
          <a href="https://example.com">Visita nuestro sitio</a>
        </body>
        </html>
  • <!DOCTYPE html> dice al navegador que el documento está escrito en HTML5.
  • <html lang="es"> indica el idioma del documento.
  • <meta charset="UTF-8"> define la codificación, lo que ayuda a mostrar correctamente los caracteres.
  • <title> establece el título de la página, que será visible en la parte superior de la ventana del navegador.

Etiquetas adicionales en <head>

La etiqueta <head> contiene información que no se muestra directamente en la página, pero es importante para el funcionamiento del sitio. Dentro de <head> puedes agregar las siguientes etiquetas:

  • <meta name="description" content="Descripción de la página"> — una breve descripción de la página para los motores de búsqueda.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — permite que el sitio sea adaptable para dispositivos móviles.
  • <link rel="stylesheet" href="styles.css"> — conecta un archivo CSS con los estilos.
  • <script src="script.js"></script> — conecta un archivo externo de JavaScript.

Estas etiquetas ayudan a mejorar la interacción con los usuarios, optimizar la página para motores de búsqueda y conectar recursos necesarios.

Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION