Clase 8 de 56 • Curso Definitivo de HTML y CSS
Contenido del curso
En los albores de la era digital, la creación de páginas web ha pasado de ser una curiosidad técnica a convertirse en una habilidad esencial. Hoy abordamos el fascinante mundo de HTML5, la columna vertebral de internet, y la importancia de tener una sólida estructura de index. Nuestra travesía comienza con el primer archivo que toda página web necesita: index.html. Es una puerta de entrada al mundo del desarrollo web y en esta exploración, aprenderás sobre su estructura básica y cómo orientar tu navegador y editor de texto para potenciar tus proyectos en la web.
¿Qué es el index.html y por qué es tan importante?
El archivo index.html actúa como la cara frontal de tu proyecto web. Es el primer archivo que los servidores buscan al momento de presentar un proyecto en un navegador. Si este archivo no existe, tendrías que especificar explícitamente cuál página debería ser tratada como la inicial, y esto no es lo ideal, ya que podría exponer la estructura completa de los archivos y carpetas de tu sitio al usuario final.
¿Cómo estructuramos el archivo index.html?
Para construir el archivo index.html es necesario entender y aplicar una serie de etiquetas básicas, así como algunos atributos esenciales que permitirán a los navegadores interpretar y desplegar tu página adecuadamente. Vamos a observar el esqueleto fundamental del index.html:
<html> que encapsula todo el contenido y <head> y <body>, que son como el cerebro y el cuerpo respectivamente.
lang: Especifica el lenguaje del documento.Dentro del <head>, ¿qué información debemos incluir?
El <head> de un documento HTML contiene la información esencial para el navegador pero que no es visible para el usuario. Aquí se incluyen:
charset=utf-8), la descripción del sitio y las palabras clave para SEO.<title>, defines el título de tu página, que aparecerá en la pestaña del navegador.viewport, aseguras que tu sitio sea visualmente asequible en dispositivos móviles.¿Cuál es la función de los contenedores hermanos <head> y <body>?
Estos dos contenedores cumplen roles distintos pero complementarios:
<head>: Encargado de los aspectos técnicos y de configuración del sitio, como enlazar hojas de estilo (<link>), scripts y meta etiquetas.<body>: Contiene todo el contenido visible de la página web, desde texto hasta imágenes y videos.¿Cómo aplicamos los estilos CSS a nuestro documento HTML?
Para enlazar una hoja de estilo exterior con nuestro index.html, hacemos uso de la etiqueta <link>, especificando el rel="stylesheet" y el atributo href que apunta a la ubicación del archivo CSS.
Con estos fundamentos claros, estás listo para adentrarte en la siguiente fase: agregar contenido concreto a tu <body> y ver tu estática página cobrar vida. Recuerda, con cada etiqueta que dominas y cada línea de código que escribes, estás forjando tu camino en el desarrollo web. Mantén esa curiosidad insaciable y esa sed de conocimiento, porque cada paso que das, más grande te conviertes en este vasto y reluciente universo digital.