Aprenda como criar um template HTML

Aprenda como criar um template HTML

Você sabe como criar um template com a linguagem HTML? Com a explosão de popularidade dos gerenciadores de conteúdo (CMSs), a criação de um site tornou-se acessível e simplificada.

Existem pessoas que são capazes de criar páginas complexas sem saber uma linha de código sequer, apenas usando essas ferramentas. Mas, apesar da facilidade, é importante aprender a estrutura da linguagem HTML, seja para personalizar os temas prontos ou para criar sites estáticos e layouts de e-mail marketing.

Neste post, você entenderá um pouco mais sobre a importância da linguagem de marcação e aprenderá a estruturar seu template. Continue a leitura!

O que é um template?

Trata-se de 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é.

Em CMSs, como o WordPress e o Joomla, por exemplo, você tem a opção de baixar templates prontos, com os mais variados estilos. Para fazer o template de um site simples diretamente no código HTML, você precisará aprender a base (que explicaremos em breve), além de saber o básico de CSS.

O que é HTML?

Essa é uma linguagem de marcação de hipertextos, utilizada para estruturar o conteúdo dos sites e as aplicações web. A versão mais recente é o HTML5.

A linguagem é uma espécie de alicerce semântico, que indica ao navegador quais são os elementos contidos na página. Além disso, o HTML define hierarquias que ajudam no ranqueamento dos sites nos mecanismos de busca.

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.

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.

Como faço para criar os arquivos HTML?

Para criar o código HTML, você precisará de um editor de texto sem formatação. Microsoft Word, Libre Office Writer e outros aplicativos similares não são recomendados para tal atividade, em nenhuma linguagem.

Se você pretende desenvolver templates simples, digitando poucas linhas, pode utilizar o bloco de notas 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 — Notepad ++, Brackets, Sublime Text, Netbeans, entre outros. Esses programas têm atalhos que facilitam a vida do desenvolvedor e diminuem a necessidade de digitar alguns trechos de código.

Se você pretende se profissionalizar como desenvolvedor web e está disposto a investir, pode adquirir o Adobe Dreamweaver, que é uma ferramenta profissional completa.

Como estruturar o template HTML?

A primeira coisa que você tem que fazer é criar uma pasta e adicionar todos os arquivos que serão utilizados na produção de seu template. O arquivo HTML principal deve ser nomeado como index.html.

Ao hospedar o template no servidor, o site será exibido sempre a partir desse arquivo. A base do código deve ser feita como na sequência abaixo:

  • <!doctype html> — indica ao navegador que este é um documento HTML;
  • <html> — inicia o código;
  • <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;
  • </head> — fechamento da tag <head>;
  • <body> — inicia a parte visível de seu template;
  • conteúdo — tags que serão inseridas dentro de <body> e </body>, definindo o conteúdo da página;
  • </body> — fechamento da tag <body>; encerramento de conteúdo visível;
  • </html> — fim do código.

Quais tags podem ser inseridas dentro de <body> e </body>?

Como vimos no tópico anterior, é dentro das tags <body> e </body> que definimos qual conteúdo será exibido no corpo do template. No primeiro tópico deste post, você lembrou que os sites têm determinado padrão de layout: barras laterais, rodapé, cabeçalhos, menu de navegação, artigo etc.

Todos esses elementos são representados por tags específicas. Confira, a seguir, algumas delas.

<header>

Dentro das tags <header> e </header>, você deve inserir o cabeçalho da página: logo da empresa, título etc. O menu de navegação vem inserido aqui, pois geralmente faz parte do topo de página.

<nav>

A tag <nav> é utilizada para a montagem do menu de navegação da página. Nela, você deve inserir links para outras páginas do site. O CSS permite a estilização e a criação de transições suaves no menu.

<section>

Section (sessão, em português) é a tag que indica são os locais nos quais você colocará o conteúdo principal da página.

Tag <article>

Como o nome da tag sugere, <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>

Essa é uma tag que serve para a adição de conteúdos secundários nos templates, as barras laterais. Você pode colocar links, resumos dos principais artigos, chamadas para redes sociais, banners de publicidade e outros conteúdos.

Tag <footer>

A tag <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.

Como criar um template HTML para e-mail marketing?

Para desenvolver um e-mail marketing, você deverá recorrer a uma prática que não é mais usual no desenvolvimento de sites atualmente — a estruturação em tabelas.

Esqueça o Tableless

Antigamente, os sites eram estruturados em tabela (ou seja: eram estáticos, “inquebráveis”). Com o crescimento e a popularização de tecnologias, que passaram a permitir o acesso à internet em múltiplas plataformas, os desenvolvedores começaram a estudar formas de criar páginas adaptáveis a todos os aparelhos — responsivas.

Infelizmente, essa inovação ainda não alcançou os templates para e-mail marketing, devido à limitação dos aplicativos de correio eletrônico. Portanto, você deve estruturar seu template na forma antiga, em tabela.

Para desenvolver o layout, é possível utilizar qualquer programa gráfico, como Photoshop, Illustrator, Inkscape, Gimp e, até mesmo, PowerPoint. Dê preferência às tabelas com algumas linhas e uma única coluna, colocando cada informação em cima da outra.

Tente equilibrar o conteúdo entre imagens e textos, numa proporção de 40% e 60%, respectivamente. Utilize o alt tag nas imagens não apenas como descrição, mas encorajando os usuários a clicarem em “exibir imagens”. Insira links para direcionar o receptor a seu produto ou serviço.

Após a montagem do layout de seu e-mail marketing no programa gráfico, é hora de estruturá-lo em linguagem HTML. Para a base do código, use a sequência que disponibilizamos no 4º tópico deste post.

Entre as tags <body> e </body>, crie a tabela de seu e-mail marketing, inserindo as informações entre <table> e </table>. Para as linhas, utilize <tr> e </tr> e, para incluir colunas ou conteúdo, <td> e </td>. As linhas de sua tabela deverão ser estruturadas na seguinte ordem:

  • <tr> — indica a linha da tabela;
  • <td> — indica a criação de uma coluna e a inserção de dados/conteúdos:
  • conteúdo — para inserir imagens, utilize a tag <img src=”endereço da imagem”>; para links, use <a href=”endereço do link”> e </a>;
  • </td> — fechamento da coluna;
  • </tr> — fechamento da linha.

Na inserção de imagens, na tag <img>, utiliza-se o atributo src., indicando seu endereço. A imagem pode estar hospedada no mesmo servidor do template ou em um externo.

Neste artigo, vimos como criar um template e a base estrutural do HTML. Lembre-se de que é necessário conhecer sobre CSS e JavaScrip para ter um bom visual. Para pré-visualizar e testar o código, execute o arquivo HTML em seu navegador padrão e, depois, é só escolher o local de hospedagem dos arquivos.

E então? Já sabe como criar um template? Que tal descobrir tudo sobre o JavaScript e suas aplicações? Até a próxima!

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.

Deixe um comentário

Receber novidades por email: