Como Criar uma Tela de Login com HTML, CSS e Python
Criar uma tela de login é um dos primeiros passos para entender como sistemas web funcionam. Em muitos projetos, o HTML é responsável pela estrutura do formulário, o CSS define o visual da página e o Python pode ser utilizado posteriormente para validar os dados no backend, controlar usuários e permitir acesso ao sistema.
Neste tutorial, você aprenderá como criar uma tela de login com HTML e CSS, preparando a base visual para que, em uma próxima etapa, ela possa ser conectada ao Python.
Passo 1: Abrir o VS Code e criar o projeto
1. Abra o Visual Studio Code
- Clique no ícone do VS Code no seu computador.
2. Crie a pasta do projeto
- Crie uma pasta chamada: tela-login
3. Abra a pasta dentro do VS Code
Vá em File > Open Folder…
Escolha a pasta: tela-login
Clique em Open
Passo 2: Criar o arquivo principal
No VS Code:
Clique com o botão direito na pasta → New File
Nomeie como: index.html
Passo 3: Criar o esqueleto básico do HTML
Adicione dentro do arquivo:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
</body>
</html>
Explicação das tags
<!DOCTYPE html>→ indica que o documento é HTML5<html>→ raiz da página<head>→ configurações internas<title>→ texto da aba do navegador<body>→ conteúdo visível do site
Passo 4: Criando tela de login (html)
Substitua todo o conteúdo do arquivo index.html pelo código abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login</title>
</head>
<body>
<div class="card">
<h1>Login</h1>
<label for="usuario">Usuário:</label>
<input type="text" id="usuario" placeholder="Digite seu usuário" />
<label for="senha">Senha:</label>
<input type="password" id="senha" placeholder="Digite sua senha" />
<div class="requisitos">
<p id="r-tamanho">• Mínimo 8 caracteres</p>
<p id="r-maiuscula">• Uma letra maiúscula</p>
<p id="r-numero">• Um número</p>
<p id="r-especial">• Um caractere especial (#@$%&*!)</p>
</div>
<button onclick="entrar()">Entrar</button>
<div class="mensagem" id="mensagem"></div>
</div>
</body>
</html>
Explicação de todas as tags HTML usadas
<!DOCTYPE html>
Define que o documento está usando HTML5.<html lang="pt-BR">
Inicia o documento HTML e define o idioma da página como português do Brasil.<head>
Guarda configurações internas da página, como título, codificação e estilos.<meta charset="UTF-8">
Permite que acentos e caracteres especiais sejam exibidos corretamente.<meta name="viewport">
Faz a página se adaptar melhor a telas menores, como celulares.<title>
Define o nome que aparece na aba do navegador.<style>
Permite escrever o CSS diretamente dentro do arquivo HTML.<body>
Contém todo o conteúdo visível da página.<div>
Cria blocos de organização dentro da página.<h1>
Cria o título principal da tela.<label>
Cria o texto que identifica cada campo do formulário.<input>
Cria campos para o usuário digitar informações.<p>
Cria textos em formato de parágrafo.<button>
Cria o botão de ação da tela de login.
Passo 5: Criar o arquivo style.css
Agora vamos criar o arquivo onde ficarão todos os estilos do site.
No VS Code, na pasta do projeto, clique com o botão direito
Clique em New File
Digite o nome:
style.css
Importante
No seu index.html, a linha abaixo precisa existir dentro do <head>, porque é ela que conecta o HTML ao CSS:
<link rel="stylesheet" href="style.css">
Se o arquivo style.css não existir ou estiver com outro nome, o CSS não será aplicado.
Passo 6: Estilizando a tela inicial
No arquivo style.css, adicione:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
Explicação de cada propriedade
font-family→ define a fonte do sitebackground-color→ cor de fundo da páginadisplay: flex→ ativa o sistema de alinhamento flexíveljustify-content: center→ centraliza horizontalmentealign-items: center→ centraliza verticalmenteheight: 100vh→ ocupa toda a altura da telamargin: 0→ remove margens padrão
- Agora vamos estilizar o bloco central da tela de login.
.card {
background-color: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
width: 320px;
}
Explicação de cada propriedade
background-color→ cor de fundo do cardpadding→ espaço internoborder-radius→ arredondamento das bordasbox-shadow→ sombra para dar profundidadewidth→ largura do card
- Agora os textos.
h1 {
text-align: center;
color: #333333;
margin-bottom: 24px;
}
label {
display: block;
margin-bottom: 6px;
color: #555555;
font-size: 14px;
}
Explicação de cada propriedade
Define o estilo do título.
text-align→ centraliza o textocolor→ cor do títulomargin-bottom→ espaço abaixo do título
Define o estilo dos textos que identificam os campos.
display: block→ força cada label a ficar em uma linhamargin-bottom→ espaço abaixocolor→ cor do textofont-size→ tamanho da fonte
- Agora vamos transformar os campos de entrada.
input {
width: 100%;
padding: 10px;
margin-bottom: 16px;
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
input:focus {
border-color: #4a90e2;
outline: none;
}
Explicação de cada propriedade
Define o estilo dos campos de entrada.
width: 100%→ ocupa toda a largurapadding→ espaço internomargin-bottom→ espaço entre camposborder→ borda do campoborder-radius→ bordas arredondadasfont-size→ tamanho do textobox-sizing: border-box→ mantém tamanho correto com padding
Aplica estilo quando o usuário clica no campo.
border-color→ muda a cor da bordaoutline: none→ remove borda padrão do navegador
- Vamos definir o estilo do botão.
button {
width: 100%;
padding: 12px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #357abd;
}
Explicação de cada propriedade
Define o estilo do botão.
width: 100%→ ocupa toda a largurapadding→ espaço internobackground-color→ cor do botãocolor→ cor do textoborder: none→ remove borda padrãoborder-radius→ arredonda bordasfont-size→ tamanho do textocursor: pointer→ muda o cursor para “mão”
Aplica efeito ao passar o mouse.
background-color→ muda a cor do botão
- Vamos definir o estilo do texto dos requisitos.
.requisitos {
margin-bottom: 16px;
font-size: 13px;
}
.requisitos p {
margin: 4px 0;
color: #888888;
}
.requisitos p.ok {
color: #27ae60;
}
.requisitos p.erro {
color: #e74c3c;
}
Explicação de cada propriedade
margin→ espaçamento entre linhascolor→ cor padrão (cinza)
- Vamos definir o estilo do texto de resultado.
.mensagem {
margin-top: 16px;
padding: 10px;
border-radius: 4px;
text-align: center;
font-size: 14px;
display: none;
}
.mensagem.sucesso {
display: block;
background-color: #d4edda;
color: #155724;
}
.mensagem.erro {
display: block;
background-color: #f8d7da;
color: #721c24;
}
Explicação de cada propriedade
margin-top→ espaço acimapadding→ espaço internoborder-radius→ bordas arredondadastext-align→ centraliza textofont-size→ tamanho do textodisplay: none→ escondido inicialmente
Conclusão
Criar uma tela de login com HTML, CSS e Python é um passo importante para entender a base de sistemas web. Neste primeiro momento, você estruturou o formulário com HTML e criou a aparência visual com CSS, preparando a página para futuras validações e integração com Python. Essa base poderá evoluir para um sistema real de autenticação, com verificação de usuário, senha e controle de acesso.
