Introdução
Neste laboratório, você aprenderá como integrar um arquivo Cascading Style Sheets (CSS) personalizado ao arquivo index.html do seu portal cativo. Embora uma página HTML básica seja funcional, a aplicação de estilos personalizados a torna mais profissional e convincente. Você criará um arquivo style.css, adicionará regras de estilo a ele e, em seguida, o vinculará ao seu documento HTML para transformar a aparência da sua página de login.
Abra o Diretório do Seu Portal Personalizado
Nesta etapa, você navegará até o diretório que contém os arquivos do seu portal personalizado. Todo o seu trabalho, incluindo a criação de novos arquivos e a edição dos existentes, será feito dentro deste diretório.
Primeiro, use o comando cd (change directory) para entrar no diretório custom_portal localizado dentro da pasta do seu projeto.
cd ~/project/custom_portal
Em seguida, use o comando ls -l para listar o conteúdo do diretório. Isso confirmará que você está no local correto e mostrará o arquivo index.html com o qual trabalharemos.
ls -l
Você deverá ver a seguinte saída, indicando a presença do seu arquivo index.html:
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
Crie um Arquivo 'style.css' com Regras CSS
Nesta etapa, você criará um arquivo CSS para definir os estilos visuais da sua página de login. O CSS permite controlar o layout, as cores, as fontes e a aparência geral dos seus elementos HTML.
Criaremos um arquivo chamado style.css usando o editor de texto nano.
nano style.css
Assim que o editor nano abrir, copie e cole o seguinte código CSS no arquivo. Este código visa vários elementos HTML para criar um design de formulário de login limpo e 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;
}
Após colar o código, salve o arquivo e saia do nano pressionando Ctrl+X, seguido por Y e depois Enter.
Vincule a Folha de Estilos no Seu Arquivo 'index.html'
Nesta etapa, você vinculará o arquivo style.css recém-criado ao seu arquivo index.html. Simplesmente criar uma folha de estilos não é suficiente; você deve informar ao documento HTML para usá-la. Isso é feito adicionando uma tag <link> dentro da seção <head> do seu HTML.
Abra o arquivo index.html com o editor nano.
nano index.html
Navegue até a seção <head> do arquivo. Adicione a seguinte linha logo antes da tag de fechamento </head>:
<link rel="stylesheet" href="style.css" />
Seu arquivo index.html agora deve se parecer com isto:
<!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>
Pressione Ctrl+X, Y e Enter para salvar as alterações e sair do editor. Agora sua página HTML está vinculada à sua folha de estilos, e qualquer navegador que renderizar a página aplicará as regras CSS.
Lance o Ataque com o Seu Portal Personalizado
Nesta etapa, você visualizará sua página de portal cativo estilizada. Em vez de lançar um ataque de rede completo, usaremos um servidor web Python simples para hospedar os arquivos localmente. Isso permite que você veja exatamente como a página ficará para um usuário.
Certifique-se de que você ainda está no diretório ~/project/custom_portal. Execute o seguinte comando para iniciar um servidor web na porta 8000.
python3 -m http.server 8000
Este comando instrui o Python a executar seu módulo http.server integrado, que serve os arquivos do diretório atual (custom_portal). O servidor será acessível em sua máquina local na porta 8000.
O terminal exibirá uma mensagem indicando que o servidor está em execução:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
O servidor está ativo agora. Deixe este terminal em execução e prossiga para a próxima etapa para visualizar a página.
Verifique se os Estilos Personalizados Foram Aplicados na Página de Login
Nesta etapa final, você verificará se seus estilos CSS foram aplicados corretamente visualizando a página de login em um navegador web.
No lado direito do ambiente de laboratório, você verá uma interface de desktop. Clique no ícone Navegador Web para abri-lo.
Na barra de endereço do navegador, digite a seguinte URL e pressione
Enter:http://127.0.0.1:8000
Você deverá ver sua página de login personalizada. Em vez de uma página simples e sem estilo, ela deve ter um fundo cinza claro, uma caixa de login branca centralizada com uma sombra, campos de entrada estilizados e um botão de login azul. Isso confirma que seu arquivo style.css foi vinculado e aplicado com sucesso.
Após verificar a aparência, retorne ao terminal onde o servidor Python está em execução e pressione Ctrl+C para pará-lo.
Resumo
Neste laboratório, você aprimorou com sucesso um portal cativo básico integrando uma folha de estilos CSS personalizada. Você aprendeu a criar um arquivo .css separado para gerenciar estilos, escrever regras CSS para segmentar elementos HTML específicos e vincular a folha de estilos a um documento HTML usando a tag <link>. Ao visualizar seu trabalho com um servidor web local, você pôde ver o impacto imediato de sua estilização, transformando uma página simples em um formulário de login visualmente atraente e mais convincente. Essa habilidade é fundamental para o desenvolvimento web e crucial para a criação de portais cativos personalizados eficazes.