O arquivo index.html é a página inicial do seu site — é ele que aparece quando alguém digita o endereço do seu domínio no navegador. Por isso, criar esse arquivo costuma ser o primeiro passo de qualquer site feito do zero.
Neste guia, você vai aprender o passo a passo para criar um arquivo index.html, montar sua estrutura básica, adicionar conteúdo e fazer o upload para a sua hospedagem.
Entendendo o arquivo index.html
O index.html é o arquivo que o servidor procura e exibe automaticamente quando alguém acessa o seu site. Quando você digita seusite.com.br, o navegador carrega o conteúdo desse arquivo como página inicial — sem precisar informar o nome dele no endereço.
É por isso que o nome precisa ser exatamente “index”: é uma convenção que praticamente todos os servidores web seguem. Se o arquivo tivesse outro nome, o visitante teria que digitá-lo manualmente na URL para acessá-lo.
Ferramentas Necessárias
Antes de começarmos, certifique-se de ter um editor de texto instalado, como Visual Studio Code ou Sublime Text. Além disso, você precisará de um navegador web para visualizar seu trabalho à medida que avança.
Estrutura Básica do HTML
Vamos começar criando a estrutura básica do HTML. Abra seu editor de texto e insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página</title>
</head>
<body>
<!-- Seu conteúdo vai aqui -->
</body>
</html>
Esta estrutura inclui elementos essenciais como a tag <html>, <head>, <title>, e <body>.
Adicionando Conteúdo
Agora que temos a estrutura, vamos adicionar alguns elementos de conteúdo simples:
<!-- Seu conteúdo vai aqui -->
<h1>Bem-vindo ao Meu Site</h1>
<p>Este é um exemplo de parágrafo.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://www.exemplo.com">Visite Exemplo.com</a>
Estilo com CSS (opcional)
Para adicionar um toque de estilo, você pode incorporar uma seção CSS:
<!-- Dentro da tag <head> -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
/* Adicione mais estilos conforme necessário */
</style>
Visualizando no Navegador
Salve o arquivo como index.html e abra-o em um navegador. Você verá sua página com o conteúdo e estilo que adicionou.
Adicionando em seu site através do Gerenciador de Arquivos
Após criar o index.html, é necessário subi-lo em sua hospedagem de site. Aqui na Homehost os planos possuem o painel de Gerenciamento de Arquivos e você pode realizar o upload por lá, mas vamos lhe ensinar através do cPanel.
Como alternativa, o arquivo index.html pode ser enviado também através de FTP.
Acesse gerenciador de arquivos da sua hospedagem
Faça login no seu Gerenciador de arquivos de seu domínio. Normalmente, você encontra isso pelo Painel de Controle, ou através de seu domínio seguido por /cpanel, como, por exemplo, http://seusite.com/cpanel
Navegue até o Gerenciador de Arquivos:
Em outros sistemas, você precisa encontrar o WebUpload, “gerenciamento de html” ou “gerenciador de arquivos”. No cPanel, procure por “Gerenciador de Arquivos” “Gerenciador de Ficheiros”, ou “File Manager” e clique nele.
Encontre a pasta public_html:
No “Gerenciador de Arquivos”, localize a pasta “public_html”. É aqui que você armazena os arquivos do seu site.
Acessando a área de Upload do Arquivo HTML (index.html):
Com a pasta “public_html” aberta, clique em “Carregar”, “Upload” ou “Enviar”, localizado na parte superior. Ao clicar, você irá acessar uma nova página.
Faça o Upload
Clicando em carregar, você irá verificar um campo com seleção do arquivo.
Após o upload, o arquivo “index.html” estará listado na pasta public_html.
Visualize seu Site
Acesse o seu site digitando o endereço do seu domínio no navegador. O arquivo “index.html” será carregado como a página inicial.
Obs: Caso seu site tenha um outro arquivo nesta mesma pasta com nome de index.html ou index.php, renomeie o arquivo antes de enviar o criado com este tutorial.
Pronto! Você adicionou com sucesso um arquivo HTML chamado “index.html” à sua pasta public_html usando o gerenciador de arquivos web no cPanel. Este arquivo será a página inicial padrão do seu site. Lembre-se de que o procedimento pode variar um pouco dependendo do seu provedor de hospedagem específico.
Dicas para o seu index.html
- Mantenha o nome exato: o arquivo precisa se chamar
index.html, tudo em minúsculas. Nomes comoIndex.htmlouindex.htmpodem não ser reconhecidos como página inicial pelo servidor.
- Use
lang="pt-BR"na tag<html>para páginas em português. Isso ajuda navegadores, leitores de tela e os mecanismos de busca a entenderem o idioma do seu conteúdo.
- Valide seu código no validador oficial do W3C. Ele aponta erros de HTML que podem passar despercebidos e quebrar a exibição da página em alguns navegadores.
- Mantenha o
<meta charset="UTF-8">no cabeçalho. É ele que garante a exibição correta de acentos e caracteres especiais do português, evitando aqueles símbolos estranhos no lugar de “ç” e “ã”.
- Separe o CSS quando o site crescer: para uma página simples, o estilo dentro do
<head>funciona bem. Mas conforme o site aumenta, o ideal é mover o CSS para um arquivo separado (comostyle.css), deixando o código mais organizado.
- Faça backup antes de substituir: se já existe um arquivo
index.htmlouindex.phpna pastapublic_html, baixe uma cópia antes de enviar o novo, para não perder o conteúdo anterior.
Perguntas frequentes
Para que serve o arquivo index.html?
index.html que aparece, sem precisar informar o nome do arquivo na URL. Onde devo salvar o arquivo index.html?
public_html, que é a raiz pública do seu site. É lá que o servidor procura a página inicial para exibir aos visitantes. Por que meu index.html não abre como página inicial?
index.html, ou porque existe outro arquivo de índice na mesma pasta (como index.php) que tem prioridade. Verifique também se ele está dentro da pasta public_html. Qual a diferença entre index.html e index.php?
index.html exibe conteúdo estático, sempre igual. Já o index.php permite conteúdo dinâmico, processado pelo servidor a cada acesso. Se os dois existirem na mesma pasta, o servidor geralmente dá prioridade ao index.php. Preciso saber programar para criar um index.html?
Como faço o upload do index.html para o meu site?
public_html pelo Gerenciador de Arquivos do painel da sua hospedagem (cPanel ou DirectAdmin) ou por um programa de FTP, como o FileZilla.