Criando um site HTML simples
1. Por que precisamos de um site em HTML?
Bem-vindo ao fascinante mundo do desenvolvimento web! Hoje, vamos criar um site HTML estático simples e colocá-lo em um servidor web que você configurou nas aulas anteriores. Mesmo que você nunca tenha escrito código HTML antes, relaxa – tudo será muito claro. Nosso objetivo será não apenas entender os fundamentos do HTML, mas também aprender como tornar seu site acessível ao mundo através de um servidor web.
Agora vamos dar o próximo passo – criar nosso próprio site em HTML e configurá-lo para ser exibido pelo seu servidor web. Preparado para conquistar o espaço da web? Então bora começar!
HTML (HyperText Markup Language) – é a base de todas as páginas da web. Ele é responsável pela estrutura e o conteúdo de um site. No HTML padrão, você pode descrever cabeçalhos, textos, imagens, links e até tabelas. É fácil de aprender, mas poderoso o suficiente para ser a base de qualquer site.
No mundo real, habilidades para trabalhar com páginas HTML estáticas são úteis em várias situações:
- Criação rápida de protótipos de aplicativos web.
- Escrita e teste de páginas estáticas para documentação.
- Preparação de uma interface básica para aplicativos server-side.
E além disso, HTML é uma maneira ótima de criar um currículo em forma de página web (sim, os recrutadores às vezes curtem isso). E pra gente, como programadores, conhecer o HTML básico é simplesmente um must-have.
2. Passo 1. Fundamentos do HTML: criando sua primeira página
Programar é como LEGO: uma atividade divertida pra todas as idades. Vamos começar com um pequeno "bloco" - nossa primeira página web.
Exemplo mínimo de documento HTML
Crie um arquivo chamado index.html em qualquer editor de texto (por exemplo, nano, vim ou até mesmo gedit, se você prefere uma interface gráfica) e escreva o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>Meu primeiro site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Essa é minha primeira página web em HTML.</p>
</body>
</html>Explicação do código
<!DOCTYPE html>– informa ao navegador que estamos usando HTML5.<html>– abre o documento inteiro. Todo o conteúdo da página fica dentro dessa tag.<head>– seção para metainformações do site (como o título da página, conexão de estilos ou scripts).<title>– o nome da página que aparece na aba do navegador.<body>– seção principal onde vai todo o conteúdo visível.<h1>– título da página de primeiro nível (quanto menor o número, maior o título).<p>– parágrafo de texto.
Sim, são apenas sete linhas, mas essas serão a base para o seu site!
3. Passo 2. Hospedando o site HTML no servidor
Agora que nossa página está pronta, é hora de mostrá-la ao mundo. Para isso, vamos usar nosso servidor web.
Preparando a pasta do site
Crie um diretório para armazenar os arquivos do seu site. Se, por exemplo, você quiser hospedar o site em um host virtual com o domínio example.com, então execute:
sudo mkdir -p /var/www/example.com
Depois, mova seu arquivo index.html para essa pasta:
sudo cp index.html /var/www/example.com/
A mágica real começa agora – o arquivo está pronto para uso.
4. Passo 3. Configurando o servidor web para hospedar o site
Configuração para Nginx
Abra o arquivo de configuração do host virtual:
sudo nano /etc/nginx/sites-available/example.comInsira a seguinte configuração:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Ative o host virtual e reinicie o servidor:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Configuração para Apache
Abra o arquivo de configuração do host virtual:
sudo nano /etc/apache2/sites-available/example.com.confInsira a seguinte configuração:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Ative o host virtual e reinicie o servidor:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Teste do site
Agora abra o navegador, digite http://example.com (ou o endereço IP do seu servidor) e aproveite o resultado. Se você vir o seu lindo "Olá, mundo!" – parabéns, tudo está funcionando!
5. Etapa 4. Decorando nosso site
Está certo que um site estático é legal, mas um pouco de CSS nunca é demais, né? Bora colocar um estilo nele.
Adicione um novo arquivo chamado style.css na mesma pasta /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Agora atualize o seu index.html, incluindo o link para o CSS:
<!DOCTYPE html>
<html>
<head>
<title>Meu primeiro site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Essa é minha primeira página web feita com HTML.</p>
</body>
</html>Assim que recarregar a página, você vai notar umas mudanças no estilo. Agora o seu site ficou mais bacaninha!
6. Problemas típicos e como resolvê-los
Ao trabalhar com sites, você pode encontrar alguns problemas, mas relaxa, a gente tá por aqui pra ajudar:
Erro "403 Forbidden". Confira as permissões da pasta do site. Use isso aqui:
sudo chmod -R 755 /var/www/example.comErro "404 Not Found". Garanta que os arquivos do site estão na pasta certa e com os nomes corretos.
O site não aparece. Verifique se o serviço do seu web server está rodando:
sudo systemctl status nginx sudo systemctl status apache2
Agora seu site tá disponível pra todo mundo que sabe o endereço dele. Não é incrível? Nas próximas aulas, você vai aprender ainda mais: como adicionar HTTPS pra segurança e gerenciar as configurações do servidor.
GO TO FULL VERSION