Introducción
En este laboratorio, aprenderá a integrar un archivo de Hojas de Estilo en Cascada (CSS) personalizado en el archivo index.html de su portal cautivo. Si bien una página HTML básica es funcional, aplicar estilos personalizados la hace parecer más profesional y convincente. Creará un archivo style.css, le agregará reglas de estilo y luego lo enlazará a su documento HTML para transformar la apariencia de su página de inicio de sesión.
Abrir el Directorio de su Portal Personalizado
En este paso, navegará al directorio que contiene los archivos de su portal personalizado. Todo su trabajo, incluida la creación de nuevos archivos y la edición de los existentes, se realizará dentro de este directorio.
Primero, use el comando cd (cambiar directorio) para moverse al directorio custom_portal ubicado dentro de la carpeta de su proyecto.
cd ~/project/custom_portal
A continuación, use el comando ls -l para listar el contenido del directorio. Esto confirmará que se encuentra en la ubicación correcta y mostrará el archivo index.html con el que trabajaremos.
ls -l
Debería ver la siguiente salida, que indica la presencia de su archivo index.html:
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
Crear un Archivo 'style.css' con Reglas CSS
En este paso, creará un archivo CSS para definir los estilos visuales de su página de inicio de sesión. CSS le permite controlar el diseño, los colores, las fuentes y la apariencia general de sus elementos HTML.
Crearemos un archivo llamado style.css utilizando el editor de texto nano.
nano style.css
Una vez que se abra el editor nano, copie y pegue el siguiente código CSS en el archivo. Este código se dirige a varios elementos HTML para crear un diseño de formulario de inicio de sesión limpio y moderno.
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
Después de pegar el código, guarde el archivo y salga de nano presionando Ctrl+X, luego Y, y finalmente Enter.
Vincular la Hoja de Estilos en su Archivo 'index.html'
En este paso, vinculará el archivo style.css recién creado a su archivo index.html. Simplemente crear una hoja de estilos no es suficiente; debe indicar al documento HTML que la utilice. Esto se hace añadiendo una etiqueta <link> dentro de la sección <head> de su HTML.
Abra el archivo index.html con el editor nano.
nano index.html
Navegue a la sección <head> del archivo. Añada la siguiente línea justo antes de la etiqueta de cierre </head>:
<link rel="stylesheet" href="style.css" />
Su archivo index.html debería verse ahora así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
Presione Ctrl+X, Y, y Enter para guardar los cambios y salir del editor. Ahora su página HTML está vinculada a su hoja de estilos, y cualquier navegador que renderice la página aplicará las reglas CSS.
Inicie el Ataque con su Portal Personalizado
En este paso, previsualizará su página de portal cautivo con estilos. En lugar de lanzar un ataque de red completo, utilizaremos un servidor web simple de Python para alojar los archivos localmente. Esto le permitirá ver exactamente cómo se verá la página para un usuario.
Asegúrese de que todavía se encuentra en el directorio ~/project/custom_portal. Ejecute el siguiente comando para iniciar un servidor web en el puerto 8000.
python3 -m http.server 8000
Este comando le indica a Python que ejecute su módulo incorporado http.server, que sirve los archivos del directorio actual (custom_portal). El servidor será accesible en su máquina local en el puerto 8000.
La terminal mostrará un mensaje indicando que el servidor se está ejecutando:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
El servidor está ahora activo. Deje esta terminal en ejecución y continúe con el siguiente paso para ver la página.
Verifique que los Estilos Personalizados se Aplican en la Página de Inicio de Sesión
En este paso final, verificará que sus estilos CSS se aplican correctamente visualizando la página de inicio de sesión en un navegador web.
En el lado derecho del entorno de laboratorio, verá una interfaz de escritorio. Haga clic en el icono Web Browser (Navegador Web) para abrirlo.
En la barra de direcciones del navegador, escriba la siguiente URL y presione
Enter:http://127.0.0.1:8000
Ahora debería ver su página de inicio de sesión personalizada. En lugar de una página simple y sin estilo, debería tener un fondo gris claro, un cuadro de inicio de sesión blanco centrado con una sombra, campos de entrada con estilo y un botón de inicio de sesión azul. Esto confirma que su archivo style.css se vinculó y aplicó correctamente.
Después de verificar la apariencia, regrese a la terminal donde se está ejecutando el servidor Python y presione Ctrl+C para detenerlo.
Resumen
En este laboratorio, mejoró con éxito un portal cautivo básico integrando una hoja de estilos CSS personalizada. Aprendió a crear un archivo .css separado para gestionar los estilos, a escribir reglas CSS para apuntar a elementos HTML específicos y a vincular la hoja de estilos a un documento HTML utilizando la etiqueta <link>. Al previsualizar su trabajo con un servidor web local, pudo ver el impacto inmediato de su estilo, transformando una página simple en un formulario de inicio de sesión visualmente atractivo y más convincente. Esta habilidad es fundamental para el desarrollo web y crucial para crear portales cautivos personalizados y efectivos.