Si necesitas crear un archivo index.html, en este artículo te muestro todo lo que debes saber para hacerlo empleando diferentes herramientas, así como un ejemplo de «index.html» visualmente atractivo.
¡Empezamos!
Índice de Contenidos
¿Qué es un archivo index.html?
Un archivo index.html es un archivo de página web que suele ser el primero que se muestra cuando un usuario visita un sitio web. Por ejemplo, si un usuario escribe «www.ejemplo.com» en su navegador, lo más probable es que el navegador cargue el archivo «index.html» que se encuentra en el directorio principal del sitio.
Si usas un CMS como WordPress donde se emplea de forma mayoritaria el lenguaje PHP, este papel será llevado a cabo muy seguramente por el archivo «index.php». Sin embargo, siempre podrás crear un archivo «index.html» y alojarlo en la carpeta raíz de tu hosting o el de tu cliente (si trabajas para otros), ya que tendrá prioridad sobre el fichero «index.php».
Crear un index HTML con el bloc de notas
Para crear un archivo «index.html», puedes emplear cualquier editor de texto. El más sencillo y conocido de todos es el bloc de notas de Windows. Puedes crear un archivo index en HTML con este editor siguiendo los próximos pasos:
- Abre el bloc de notas.
- Crea el esqueleto básico de una página HTML agregando las etiquetas imprescindibles. Debería verse algo así:
<html>
<head>
</head>
<body>
</body>
</html>
- Agrega el contenido que quieras mostrar en tu página entre las etiquetas <body> y </body>. Puedes utilizar etiquetas HTML para dar formato al texto, agregar imágenes y enlaces (tanto internos en tu dominio como externos), entre otras cosas. Por ejemplo, puedes añadirle un encabezado H1 en el que ponga «Página web en construcción», para que aparezca mientras construyes la web si alguien entra en tu dominio o el de tu cliente:
<html>
<head>
</head>
<body>
<h1>Página Web en construcción</h1>
</body>
</html>
- Guarda el archivo con el nombre index.html. Asegúrate de seleccionar «Todos los archivos» en el menú desplegable «Tipo» o «Save as type» al guardar el archivo, para que no se guarde como un archivo de texto normal.
- Una vez has creado el archivo «index.html», puedes subirlo a la carpeta raíz de tu servidor o hosting, de forma que sea esta la primera página que muestre tu sitio web. Normalmente, la carpeta raíz se llama «httpdocs», «public_html», «public» o «www».
Crear un index HTML con Visual Studio Code
Visual Studio Code es nuestro editor de código favorito. Y, si quieres crear un archivo index.html de forma rápida, este editor te ofrece algunos atajos interesantes para ahorrar tiempo. Debes seguir los siguientes pasos:
- Abre Visual Studio Code en tu ordenador.
- Antes de escribir nada de código, guarda el archivo con el nombre «index.html».
- Escribe lo siguiente: html:5
- Lo anterior es un atajo de teclado que te permite generar las etiquetas básicas de cualquier documento HTML. El resultado tras pulsar intro será el siguiente:
- Lo que ha hecho Visual Studio Code es indicar que el lenguaje del documento es castellano, que la codificación es UTF-8 y otras etiquetas que aportan información adicional al navegador. Si no quieres usar Visual Studio Code, puedes copiar el código del siguiente bloque:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio web en construcción</title>
</head>
<body>
<h1>Sitio web en construcción</h1>
</body>
</html>
Ejemplo de index.html con estilos CSS
Los «index.html» anteriores, son bastante básicos, muestran simplemente el texto «Sitio web en construcción», pero no se visualizan de forma atractiva:
Para mejorar un poco su visualización, es posible añadir algunos estilos CSS y algo más de texto para lograr un resultado como el siguiente:
El código para crear un archivo index.html como el anterior es el siguiente, puedes subirlo a tu hosting y usarlo para tus proyectos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio web en construcción</title>
<style>
body {
background: linear-gradient(to right, #1CB5E0, #000046);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
font-size: 3rem;
text-align: center;
}
h2 {
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1>Sitio web en construcción</h1>
<h2>Este sitio web estará disponible pronto</h2>
</body>
</html>
El color de fondo se define estableciendo un determinado valor «linear-gradient» en la propiedad «background». Para obtener ideas, puedes emplear el siguiente sitio web.
Conclusión
Ya has visto qué es un archivo index.html, cómo crearlo con herramientas como el Bloc de Notas o Visual Studio Code o cómo darle estilos para que se muestre de forma atractiva. Te recomiendo usar el código anterior en tus proyectos.
Recuerda siempre que tras crear tus archivos index.html, deberás subirlos a tu servidor para que se visualicen. También puedes crear estos archivos directamente en tu hosting.
Si tienes cualquier duda, no dudes en escribir un comentario o buscar más información en nuestra web.
¡Hasta la próxima!
