Como criar o arquivo index.html em 5 passos simples

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.

criar o arquivo index.html

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.

Dica Alguns planos da HomeHost utilizam o painel DirectAdmin em vez do cPanel. O processo de upload é praticamente o mesmo, mas a interface muda um pouco. Veja como usar o Gerenciador de Arquivos do DirectAdmin para enviar o seu index.html.

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

painel de controle 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.

pasta public_html

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.

upload do arquivo index.html

Faça o Upload

Clicando em carregar, você irá verificar um campo com seleção do arquivo.

enviar o arquivo index.html

Após o upload, o arquivo “index.html” estará listado na pasta public_html.

upload concluido

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.

Pronto para colocar seu site no ar? Já tem seu index.html criado? O próximo passo é publicá-lo. Com a hospedagem da HomeHost, você sobe seus arquivos em minutos pelo Gerenciador de Arquivos e seu site fica acessível para o mundo.
Gerenciador de arquivos SSL grátis Suporte humano
Ver planos de hospedagem

Dicas para o seu index.html

  • Mantenha o nome exato: o arquivo precisa se chamar index.html, tudo em minúsculas. Nomes como Index.html ou index.htm podem 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 (como style.css), deixando o código mais organizado.
  • Faça backup antes de substituir: se já existe um arquivo index.html ou index.php na pasta public_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?
É o arquivo que o servidor exibe automaticamente como página inicial do site. Quando alguém digita o endereço do seu domínio, é o conteúdo do index.html que aparece, sem precisar informar o nome do arquivo na URL.
Onde devo salvar o arquivo index.html?
Na hospedagem, o arquivo deve ficar dentro da pasta 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?
Geralmente é porque o nome do arquivo está diferente de 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?
O 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?
Não. Para uma página simples, basta um editor de texto e o conhecimento básico de HTML mostrado neste guia. Você pode copiar a estrutura básica, adicionar seu conteúdo e já ter uma página funcional.
Como faço o upload do index.html para o meu site?
Você envia o arquivo para a pasta public_html pelo Gerenciador de Arquivos do painel da sua hospedagem (cPanel ou DirectAdmin) ou por um programa de FTP, como o FileZilla.

Este artigo foi útil?

Obrigado pela resposta!
Picture of Gustavo Gallas

Gustavo Gallas

Analista de sistemas, formado pela PUC-Rio. Programador, gestor de redes e diretor da empresa Homehost. Pai do Bóris, seu pet de estimação. Gosta de rock'n'roll, cerveja artesanal e de escrever sobre assuntos técnicos.

Contato: gustavo.blog@homehost.com.br

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!