Lección

Desarrollo web 

Introducción a HTML

¡Bienvenido al mundo del desarrollo web! Esta lección te introducirá a los bloques de construcción fundamentales de Internet: HTML. HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), y es el lenguaje estándar para crear páginas web. Piensa en él como el esqueleto de un sitio web, ya que proporciona la estructura y el contenido.

Sin HTML, los navegadores web no sabrían cómo mostrar texto, imágenes o enlaces. Es esencial para cualquiera interesado en construir sitios web, desde simples páginas personales hasta complejas aplicaciones web. Empezaremos con lo básico y avanzaremos hasta crear un diseño de página web sencillo.

Estructura HTML: La Plantilla Básica

Todo documento HTML sigue una estructura básica. Esta estructura le indica al navegador que está leyendo un archivo HTML y proporciona los elementos esenciales para la página. Aquí tienes una plantilla HTML mínima:

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Desglosemos cada parte:

  • <!DOCTYPE html>: Esta declaración le indica al navegador que el documento es un documento HTML5. Siempre debe ser lo primero en tu archivo HTML.
  • <html>: Este es el elemento raíz de la página. Todo lo demás va dentro de esta etiqueta.
  • <head>: Esta sección contiene meta-información sobre el documento HTML, como el título, el conjunto de caracteres y los enlaces a hojas de estilo.
  • <title>: Especifica un título para la página HTML (que se muestra en la barra de título o pestaña del navegador).
  • <body>: Aquí es donde va todo el contenido de tu página web: el texto, las imágenes, los enlaces y todo lo demás que ven los usuarios.

Etiquetas HTML: Elementos y Atributos

HTML utiliza etiquetas para definir elementos. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una etiqueta de cierre. Por ejemplo, <p> es la etiqueta de apertura para un párrafo, y </p> es la etiqueta de cierre.

Algunas etiquetas se cierran a sí mismas, lo que significa que no necesitan una etiqueta de cierre separada. Un ejemplo es la etiqueta <br>, que crea un salto de línea. Las etiquetas también pueden tener atributos, que proporcionan información adicional sobre el elemento. Por ejemplo, la etiqueta <img> (para imágenes) utiliza el atributo src para especificar la fuente de la imagen.

Encabezados: <h1> a <h6>

Los encabezados se utilizan para estructurar tu contenido y facilitar su lectura. HTML proporciona seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante). Típicamente, <h1> se utiliza para el título principal de la página.

Aquí tienes un ejemplo:

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

Párrafos: <p>

Los párrafos se utilizan para mostrar bloques de texto. La etiqueta <p> define un párrafo.

Ejemplo:

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

Listas: <ul> y <ol>

HTML proporciona dos tipos de listas: listas desordenadas (<ul>) y listas ordenadas (<ol>). Las listas desordenadas se utilizan para elementos que no tienen un orden específico, mientras que las listas ordenadas se utilizan para elementos que necesitan estar en una secuencia particular. Los elementos de la lista se definen usando la etiqueta <li>.

Aquí tienes ejemplos de ambas:

            
<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

Enlaces: <a>

Los enlaces permiten a los usuarios navegar entre diferentes páginas web o secciones dentro de la misma página. La etiqueta <a> define un hipervínculo. El atributo más importante es href, que especifica la URL del enlace.

Ejemplo:

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

El atributo target se puede usar para especificar dónde abrir el documento vinculado. target="_blank" abre el enlace en una nueva pestaña o ventana.

Imágenes: <img>

La etiqueta <img> se utiliza para incrustar imágenes en una página web. El atributo src especifica la ruta al archivo de imagen. El atributo alt proporciona texto alternativo para la imagen, que se muestra si la imagen no se puede cargar y es importante para la accesibilidad.

Ejemplo:

            
<img src="image.jpg" alt="Descripción de la imagen">

Construyendo un Diseño de Página Web Sencillo

Ahora, combinemos todo lo que hemos aprendido para crear un diseño básico de página web. Incluiremos un encabezado, un párrafo, una lista, un enlace y una imagen.

Aquí tienes el código HTML completo:

            
<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página Web</title>
</head>
<body>
    <h1>¡Bienvenido a Mi Página Web!</h1>
    <p>Esta es una página web sencilla creada utilizando los fundamentos de HTML.</p>
    <ul>
        <li>Aprender HTML</li>
        <li>Practicar codificación</li>
        <li>Construir sitios web geniales</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visitar Google</a>
    <img src="placeholder.jpg" alt="Una imagen de marcador de posición">
</body>
</html>

Recuerda reemplazar "placeholder.jpg" con la ruta real a un archivo de imagen. Guarda este código como un archivo HTML (por ejemplo, "index.html") y ábrelo en tu navegador web para ver el resultado. ¡Ahora tienes una página HTML completamente funcional!



-/- ✔: 0, ✖: 0