Como Criar Um Template HTML

Como criar um template HTML: veja o
passo a passo
Redação
1 avaliações
10 de dezembro de 2019
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.
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.
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.
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:

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!

Como Criar Um Template HTML

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Criar Um Template HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Como criar um template HTML: veja o

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

1. Escolha um editor de texto e códigos

1. Escolha do editor de texto e códigos

Existem bons editores de texto gratuitos que facilitam a edição de documentos HTML

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

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

 <!DOCTYPE html> - indica ao navegador que este é um documento HTML;

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

Como vimos no tópico anterior, é dentro das tags <body> e </body> que definimos

 <header> - esse elemento representa o cabeçalho da página: logotipo da

Exemplo de estrutura do corpo de um documento em um template HTML com

4. Estilizando o template HTML com CSS

header, section, nav, aside, footer {

header { grid-area: header; }

O resultado será o seguinte:

Você também pode gostar