Fundamentos de Desarrollo Web: HTML, CSS y JavaScript
Introducción a HTML
La estructura de una página web
Piensa en HTML (HyperText Markup Language) como el esqueleto de una página web. No se ocupa de los colores, las fuentes o el diseño visual; su única función es dar estructura y significado al contenido. Cada página web que visitas, desde la más simple hasta la más compleja, está construida sobre esta base.
Todo documento HTML sigue una estructura fundamental. Es un conjunto de etiquetas anidadas que le dicen al navegador cómo debe organizar la página.
<!DOCTYPE html>
<html>
<head>
<title>Título de mi página</title>
</head>
<body>
<h1>Encabezado principal</h1>
<p>Este es un párrafo de texto.</p>
</body>
</html>
Analicemos esto:
<!DOCTYPE html>: Esta es la primera línea y le dice al navegador que el documento es una página HTML5, la versión moderna de HTML.<html>: Es la etiqueta raíz que envuelve todo el contenido de la página.<head>: Esta sección contiene metadatos, información que no se muestra directamente en la página. Aquí es donde va el<title>, que es el texto que aparece en la pestaña del navegador.<body>: Aquí es donde vive todo el contenido visible: el texto, las imágenes, los videos y todo lo que el usuario ve e interactúa.
Etiquetas y atributos
HTML utiliza etiquetas para definir los diferentes tipos de contenido. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura como <p> y una de cierre como </p>. Todo lo que se encuentra entre ellas se considera parte de ese elemento.
Por ejemplo, para los encabezados y párrafos, utilizamos etiquetas específicas que le dan una jerarquía al texto.
Los encabezados van desde
<h1>(el más importante) hasta<h6>(el menos importante). Los párrafos se definen con la etiqueta<p>.
<h1>Este es el encabezado más importante</h1>
<p>Este es un párrafo que describe el contenido bajo el encabezado.</p>
<h2>Este es un subencabezado</h2>
<p>Y este es otro párrafo, relacionado con el subencabezado.</p>
Además de las etiquetas, los elementos HTML pueden tener atributos. Estos proporcionan información adicional sobre el elemento y siempre se incluyen en la etiqueta de apertura. Se componen de un nombre y un valor, como nombre="valor".
Creación de enlaces
La web se basa en la interconexión de páginas, y esto se logra mediante hipervínculos o enlaces. Para crear un enlace, usamos la etiqueta de anclaje <a>.
La etiqueta <a> necesita un atributo clave para funcionar: href (hypertext reference). El valor de este atributo es la URL o la dirección a la que quieres que el enlace dirija al usuario.
<p>Puedes aprender más sobre desarrollo web en el <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
Un buen consejo: el texto dentro de la etiqueta
<a>debe ser descriptivo. En lugar de "haz clic aquí", utiliza un texto que informe al usuario a dónde le llevará el enlace.
Inserción de imágenes
Las imágenes dan vida a una página. Para insertarlas, usamos la etiqueta <img>. A diferencia de otras etiquetas que hemos visto, <img> es una etiqueta de cierre automático, lo que significa que no necesita una etiqueta de cierre como </img>.
La etiqueta <img> requiere dos atributos esenciales:
src(source): Contiene la ruta o URL del archivo de imagen.alt(alternative text): Proporciona un texto descriptivo para la imagen. Este texto es crucial para la accesibilidad, ya que es lo que los lectores de pantalla leen a los usuarios con discapacidad visual. También se muestra si la imagen no se puede cargar.
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/PNG_Test.png" alt="Un logo de prueba con las letras PNG">
Con estos elementos básicos, ya tienes los componentes fundamentales para estructurar cualquier página web. Dominar las etiquetas, los atributos, los enlaces y las imágenes es el primer gran paso en el desarrollo web.
¿Cuál es la función principal de HTML en una página web?
Dentro del esqueleto básico de un documento HTML, ¿qué etiqueta contiene los metadatos y el título que aparece en la pestaña del navegador?