{"id":12684,"date":"2024-01-03T15:53:28","date_gmt":"2024-01-03T18:53:28","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=12684"},"modified":"2026-07-07T09:40:01","modified_gmt":"2026-07-07T12:40:01","slug":"criar-arquivo-index-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-arquivo-index-html\/","title":{"rendered":"Como criar o arquivo index.html em 5 passos simples"},"content":{"rendered":"\n

O arquivo index.html<\/strong> \u00e9 a p\u00e1gina inicial do seu site \u2014 \u00e9 ele que aparece quando algu\u00e9m digita o endere\u00e7o do seu dom\u00ednio no navegador. Por isso, criar esse arquivo costuma ser o primeiro passo de qualquer site feito do zero.<\/p>\n\n\n\n

Neste guia, voc\u00ea vai aprender o passo a passo para criar um arquivo index.html<\/strong>, montar sua estrutura b\u00e1sica, adicionar conte\u00fado e fazer o upload para a sua hospedagem.<\/p>\n\n\n\n

Entendendo o arquivo index.html<\/h2>\n\n\n\n

O index.html<\/code> \u00e9 o arquivo que o servidor procura e exibe automaticamente quando algu\u00e9m acessa o seu site. Quando voc\u00ea digita seusite.com.br<\/code>, o navegador carrega o conte\u00fado desse arquivo como p\u00e1gina inicial \u2014 sem precisar informar o nome dele no endere\u00e7o.<\/p>\n\n\n\n

\u00c9 por isso que o nome precisa ser exatamente “index”<\/strong>: \u00e9 uma conven\u00e7\u00e3o que praticamente todos os servidores web seguem. Se o arquivo tivesse outro nome, o visitante teria que digit\u00e1-lo manualmente na URL para acess\u00e1-lo.<\/p>\n\n\n\n

Ferramentas Necess\u00e1rias<\/h2>\n\n\n\n

Antes de come\u00e7armos, certifique-se de ter um editor de texto instalado, como Visual Studio Code ou Sublime Text. Al\u00e9m disso, voc\u00ea precisar\u00e1 de um navegador web para visualizar seu trabalho \u00e0 medida que avan\u00e7a.<\/p>\n\n\n\n

\"criar<\/figure>\n\n\n\n

Estrutura B\u00e1sica do HTML<\/h2>\n\n\n\n

Vamos come\u00e7ar criando a estrutura b\u00e1sica do HTML<\/a>. Abra seu editor de texto e insira o seguinte c\u00f3digo:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Minha P\u00e1gina<\/title>\n<\/head>\n<body>\n    <!-- Seu conte\u00fado vai aqui -->\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
Esta estrutura inclui elementos essenciais como a tag <html><\/strong><\/code>, <head><\/strong><\/code>, <title><\/strong><\/code>, e <body><\/strong><\/code>.<\/p>\n\n\n\n
Adicionando Conte\u00fado<\/h2>\n\n\n\n
Agora que temos a estrutura, vamos adicionar alguns elementos de conte\u00fado simples:<\/p>\n\n\n\n
<!-- Seu conte\u00fado vai aqui -->\n<h1>Bem-vindo ao Meu Site<\/h1>\n<p>Este \u00e9 um exemplo de par\u00e1grafo.<\/p>\n<ul>\n    <li>Item 1<\/li>\n    <li>Item 2<\/li>\n    <li>Item 3<\/li>\n<\/ul>\n<a href=\"https:\/\/www.exemplo.com\">Visite Exemplo.com<\/a>\n<\/code><\/pre>\n\n\n\n
Estilo com CSS (opcional)<\/h2>\n\n\n\n
Para adicionar um toque de estilo<\/a>, voc\u00ea pode incorporar uma se\u00e7\u00e3o CSS<\/a>:<\/p>\n\n\n\n
<!-- Dentro da tag <head> -->\n<style>\n    body {\n        font-family: 'Arial', sans-serif;\n        background-color: #f4f4f4;\n    }\n    h1 {\n        color: #333;\n    }\n    \/* Adicione mais estilos conforme necess\u00e1rio *\/\n<\/style>\n<\/code><\/pre>\n\n\n\n
Visualizando no Navegador<\/h2>\n\n\n\n
Salve o arquivo como index.html<\/strong><\/code> e abra-o em um navegador. Voc\u00ea ver\u00e1 sua p\u00e1gina com o conte\u00fado e estilo que adicionou.<\/p>\n\n\n\n
Adicionando em seu site atrav\u00e9s do Gerenciador de Arquivos<\/h2>\n\n\n\n
Ap\u00f3s criar o index.html, \u00e9 necess\u00e1rio subi-lo em sua hospedagem de site. Aqui na Homehost os planos possuem o painel de Gerenciamento de Arquivos<\/a> e voc\u00ea pode realizar o upload por l\u00e1, mas vamos lhe ensinar atrav\u00e9s do cPanel<\/a>.<\/p>\n\n\n\n
Como alternativa, o arquivo index.html pode ser enviado tamb\u00e9m atrav\u00e9s de FTP<\/a>.<\/p>\n\n\n\n\n\n