Como criar um template HTML: veja o passo a passo

Avatar

Redação

0 avaliações

7 de agosto de 2019 às 5:55

Aprenda como criar um template HTML

Um template HTML é uma estrutura predefinida, que pode ser utilizada como base para sites e outras peças gráficas. Na prática, ele elimina a necessidade de “reinventar” a roda, já que os sites geralmente seguem um padrão — cabeçalho, menus de navegação, artigo, barra lateral e rodapé.

Para fazer o template de um site simples diretamente no código HTML, você precisará aprender a estrutura base de um documento HTML, além de saber o básico de CSS.

Aqui está o passo a passo para criar um template HTML:

  1. Escolha um editor de texto e códigos
  2. Crie um documento HTML com a estrutura básica
  3. Defina uma estrutura para o corpo da página;
  4. Estilize o template HTML usando CSS

Confira abaixo os detalhes de cada passo para criar um template HTML de forma fácil.

1. Escolha do editor de texto e códigos

Para criar o código HTML, você precisará de um editor de texto com suporte para códigos. Microsoft Word, Libre Office Writer e outros aplicativos similares não são recomendados para tal atividade, pois são voltados somente para criação de documentos de texto e não códigos.

Template HTML - Escolher do editor de texto

Você pode criar um template simples, com poucas linhas, usando o bloco de notas ou o programa padrão de edição do seu sistema que vem em seu sistema operacional. Mas, se o objetivo for criar um código mais elaborado, é aconselhável baixar ferramentas apropriadas para programação.

Existem bons editores de texto gratuitos que facilitam a edição de documentos HTML — Notepad++, Visual Studio Code e Sublime Text, são opções populares. Esses programas têm atalhos que facilitam a vida do desenvolvedor e diminuem a necessidade de digitar alguns trechos de código.

Você pode conferir a lista com os melhores editores HTML para escolher o que preferir.

2. Crie um documento HTML com a estrutura básica

Depois de escolher um editor para os documentos HTML, você deve criar uma pasta para os documentos do template HTML a ser criado. Nesta pasta, você deverá adicionar todos os arquivos que serão utilizados na produção de seu template. O arquivo HTML principal deve ser nomeado como "index.html".

Você pode criar esse arquivo a partir do próprio editor HTML que escolher. Geralmente, os arquivos pode ser criados do menu "File" > "New file" nos editores.

Template HTML - Criar arquivo HTML

O "index.html" refere-se à página inicial do seu site – o índice do seu site, de onde todas as outras páginas serão chamadas. Por exemplo, depois de hospedar o site, ao acessá-lo, ele será será exibido sempre a partir desse arquivo.

Aqui está a estrutura básica para um documento ou template HTML:

<!DOCTYPE html>

<html lang="pt-br">
<head>
<meta charset="utf-8">

<title>Template HTML</title>
<meta name="description" content="Template HTML">
</head>

<body>
</body>

</html>

Esse é o ponto inicial para qualquer template HTML. Cada parte desse código tem um significado e deve ser utilizado na ordem correta para que seja corretamente interpretado pelos navegadores:

  • <!DOCTYPE html> - indica ao navegador que este é um documento HTML;
  • <html> - tag de abertura de um documento HTML, todos os outros elementos HTML devem estar dentro deste, que também indica o idioma do documento;
  • <head> - nessa tag, você deve colocar as informações específicas da página, o título, o estilo, a codificação etc;
  • <meta charset="utf-8"> - deve ser inserida entre <head> e </head>, para definir a codificação de caracteres;
  • <title></title> - outra tag “filha” de <head>, que indica o título da página. Você precisa escrevê-la entre as tags;
  • <meta name="description" content="texto"> - descrição do documento HTML para mecanismos de busca;
  • </head> - fechamento da tag <head>;
  • <body> - inicia a parte visível de seu template HTML, todo conteúdo do corpo da página fica depois dessa tag;
  • </body> - fechamento da tag <body>; encerramento do corpo do documento ou conteúdo visível na página;
  • </html> - fechamento da tag <html> e fim do código.

Essa é a base qualquer documento HTML e pode partir para o próximo passo – a estrutura do corpo do documento.

3. Defina uma estrutura para o corpo da página

Como vimos no tópico anterior, é dentro das tags <body> e </body> que definimos qual conteúdo será exibido no corpo do template. É no corpo do documento que o template HTML começa a tomar forma. Aqui, são determinados o  determinado padrão de layout: barras laterais, rodapé, cabeçalhos, menu de navegação, artigo etc.

Todas essas partes da página são representados por elementos com um significado específico, os elementos semânticos:

  • <header> - esse elemento representa o cabeçalho da página: logotipo da empresa, título do site. Também pode representar o cabeçalho de um elemento;
  • <nav> - esse elemento é utilizado para o menu de navegação da página. Nela, você deve inserir links para outras páginas do site.
  • <section> - elemento que indica uma seção do corpo da página. Como os locais nos quais você colocará o conteúdo principal da página.
  • <article> - indica que os artigos da página, postagens, notícias e informes estão nesse local. Ela deve ser inserida entre as tags <section> e </section>.
  • <aside> - serve para a adição de conteúdos secundários nos templates, como as barras laterais. Você pode colocar links, resumos dos principais artigos, chamadas para redes sociais, banners de publicidade e outros conteúdos.
  • <footer> - serve para indicar o rodapé do template. Trata-se do local onde serão inseridas as informações de contato, os links, as chamadas para redes sociais e as informações de copyright.

Exemplo de estrutura do corpo de um documento em um template HTML com elementos semânticos:

<!DOCTYPE HTML>

<html lang=pt-br>

<head>
	<meta charset="UTF-8">
	<title>Template HTML</title>
</head>

<body>

	<header>
		<h1>Título da página</h1>
	</header>
	<section>
	<nav>
		<ul>
			<li>Item do menu</li>
		</ul>
	</nav>		
		<article>
			<h2>Título do artigo 1</h2>
			<p>Conteúdo do artigo.</p>
		</article>
		
		<article>
			<h2>Título do artigo 2</h2>
			<p>Conteúdo do artigo.</p>
		</article>
		
	</section>

	<aside>
		<h2>Barra lateral</h2>
		<p>Algum texto da barra lateral.</p>
	</aside>

	<footer>
		<p>Texto do rodapé</p>
	</footer>

</body>

</html>

Pronto, com isso, você já tem base para o template HTML e pode começar a estilizar com CSS.

4. Estilizando o template HTML com CSS

Agora, a estrutura do template HTML está pronta. No entanto, se você abrir o arquivo HTML no seu navegador, você vai visualizar uma página aparentemente desorganizada. Isso acontece porque a estrutura de um template HTML existe para que o navegador consiga entender aquele documento corretamente.

A linguagem é uma espécie de alicerce semântico, que indica ao navegador quais são os elementos contidos na página.

Template HTML sem estilos

Antigamente, o estilo das páginas era atribuído diretamente ao código HTML. Por uma questão de organização e manutenção, o CSS passou a ser a linguagem responsável por toda a formatação gráfica dos templates.

Para definir a aparência dos elementos e dar forma ao template HTML, é preciso usar CSS – que é responsável por estilizar o template. É o CSS que defini as cores, tamanhos dos elementos, fonte e formatação dos textos das páginas. Sem ele, uma página seria apenas um texto simples.

Depois de adicionar algum CSS, você pode visualizar melhor como a estrutura do template é criada. Como exemplo, você pode adicionar o seguinte código CSS para ver o template estilizado:

header, section, nav, aside, footer {
  background-color: lightskyblue;  
}

article {
  border: 5px solid white;
  margin: 5px;
  padding: 5px;
  background-color: lightskyblue;
}

header { grid-area: header; }
nav { grid-area: menu; }
section { grid-area: main}
aside { grid-area: sidebar; }
footer { grid-area: footer; }

body {
  font-family: sans-serif;
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu menu menu menu menu menu'
    'sidebar main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 10px;
  padding: 10px;
}

O resultado será o seguinte:

Template HTML com estilos

O CSS pode ser aplicado no HTML de formas diferentes, você pode entender melhor como ele funciona em nosso artigo: O que é CSS.

Essa atribuição contribuiu bastante para o desenvolvimento da parte visual dos sites, possibilitando a criação de códigos mais limpos e layouts mais leves.

Conclusão

Pronto, agora você já sabe como criar um template HTML do zero. Como você pôde ver, a estrutura HTML é a parte mais simples, porém é extremamente importante para que os navegadores consigam entender o conteúdo da página. Um template HTML mal estruturado pode implicar na exibição incorreta nos navegadores.

A parte mais complicada fica na estilização do template. Por isso, saber como usar o CSS ajuda bastante na hora de melhorar a aparência de um site. Felizmente, os editores de textos e sites facilitam bastante esse processo. O editor Brackets, por exemplo, mostra uma pré-visualização do documento em tempo real.

Uma hospedagem é outra ferramenta que pode ajudar no aprendizado de web design e desenvolvimento web. Com uma hospedagem, além de visualizar suas páginas na Internet, você pode compartilhá-las com outras pessoas e obter feedback do seu trabalho.

Coloque em prática seus conhecimentos sem gastar nada com uma hospedagem grátis!


Avatar
Redação

Melhor Hospedagem de Sites é um projeto com o objetivo de ajudar as pessoas na busca pelo lugar ideal para hospedar seus sites, trazendo informação e conhecimento sobre o universo de hospedagem de sites.


Hostinger logo
9.9 /10
GoDaddy logo
9.1 /10
Deixe um comentário