Académique Documents
Professionnel Documents
Culture Documents
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.
Confira abaixo os detalhes de cada passo para criar um template HTML de forma fácil.
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.
Você pode conferir a lista com os melhores editores HTML para escolher o que preferir.
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.
<!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:
Essa é a base qualquer documento HTML e pode partir para o próximo passo – a
estrutura do corpo do documento.
Todas essas partes da página são representados por elementos com um significado
específico, os 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.
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:
article {
border: 5px solid white;
margin: 5px;
padding: 5px;
background-color: lightskyblue;
}
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;
}
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!