Como criar um site em minutos usando HTML5 Boilerplate

Como criar um site em minutos usando HTML5 Boilerplate

Quando você está construindo um novo site, hoje em dia você deseja que seja compatível com HTML5. Mas você também não quer perder tempo desnecessário aprendendo os meandros do HTML5 a partir do zero, não é?





Felizmente, o Modelo HTML5 Boilerplate pode ajudar. É um modelo de front-end simples que você pode usar para criar um site HTML5 em apenas alguns minutos. Mas também é poderoso o suficiente para que você possa usá-lo como a base de um site complexo e repleto de recursos.





laptop conectado a wi-fi, mas sem acesso à Internet Windows 10

Este tutorial HTML5 Boilerplate abordará o que vem no modelo, o básico que você precisa saber sobre como usá-lo e alguns recursos para aprendizado adicional. Também mostrarei como usei o modelo para criar um site muito básico com apenas algumas linhas de HTML.





O modelo HTML5 Boilerplate

Ao baixar o modelo do HTML5 Boilerplate, você obtém várias pastas e arquivos. Aqui está o conteúdo do arquivo ZIP:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

Não examinaremos todos os elementos do modelo aqui, apenas o básico. No entanto, para garantir que você tenha os recursos para usar todos os arquivos, começaremos com os documentos de ajuda.



Documentação de ajuda do HTML5 Boilerplate

Boilerplate tem uma coleção de documentos de ajuda hospedados no GitHub . Isso é uma grande ajuda quando você tem dúvidas técnicas ou está se perguntando por que algo foi projetado dessa maneira.

Quase tudo na documentação também está incluído na pasta doc do modelo. Você verá vários arquivos Markdown (.md) que são uma grande ajuda para descobrir como construir seu site Boilerplate.





Se você quiser ler tudo, comece com TOC.md e siga os links de lá para outros arquivos Markdown. Se você está procurando ajuda sobre um problema específico, encontre o arquivo que parece estar relacionado; usage.md é um bom lugar para começar.

Começando com CSS do Boilerplate HTML5

O modelo HTML5 Boilerplate vem com dois arquivos CSS: main.css e normalize.css.





O segundo arquivo, normalize.css, ajuda diferentes navegadores a renderizar elementos de maneiras consistentes. Para saber mais sobre como funciona, confira o projeto normalize.css no GitHub .

Enquanto isso, main.css é onde você colocará qualquer código de que precisar formate seu site com CSS . O CSS padrão incluído com o modelo é o resultado de pesquisas conduzidas por desenvolvedores e pela comunidade HTML5 Boilerplate. É legível e exibido muito bem em diferentes navegadores.

Se você deseja adicionar seu próprio CSS, pode adicioná-lo à seção Estilos personalizados do autor. Vou adicionar um pouco de estilo de link para nossa página de exemplo:

Existem também várias classes auxiliares úteis incluídas no CSS base. Alguns deles ocultam itens de navegadores e leitores de tela padrão (ou alguma combinação).

Também em main.css, você encontrará suporte para design responsivo e configurações de impressão úteis.

Todos esses itens são claramente explicados por comentários no CSS:

Em geral, você pode começar com o CSS básico.

Adicionando seu próprio HTML ao modelo

O Boilerplate inclui dois arquivos HTML: 404.html e index.html.

A página de índice é onde você criará sua página inicial (ou sua única página, se estiver optando por uma página simples).

Se você abrir a página de índice em um navegador, verá uma única linha de texto. Mas olhar para o HTML revela muito mais ocultação no código. A única coisa com que você realmente precisa se preocupar com a alteração é o código do Google Analytics (encontre o texto 'UA-XXXXX-Y' e substitua-o pelo seu próprio código de monitoramento).

O restante do HTML na página de índice inclui informações para aplicativos da web, notificações para navegadores antigos e JavaScripts úteis. Quando você estiver começando, não deve se preocupar com nada disso.

Tê-los já pré-preenchidos, no entanto, é uma boa maneira de garantir que seu site esteja preparado para obter o máximo do HTML5.

Para criar sua página, insira seu HTML entre as tags no arquivo. Aqui estão algumas informações básicas que acrescentarei sobre mim:

Quer criar mais páginas? Crie cópias deste arquivo e renomeie-as para que você não precise copiar e colar todo o HTML. Em seguida, adicione seu conteúdo.

Se você gostaria de personalizar sua página 404, apenas modifique o arquivo HTML. Não tem certeza do que colocar em sua página 404? Confira esses ótimos exemplos de design de página 404.

Adicionando um Favicon (e outros ícones)

Quer substituir seu favicon? Então favicon.ico é o arquivo que você precisa substituir.

Se você ainda não tiver um, precisará criar um. Você pode usar um gerador de favicon online ou criar o seu próprio. Apenas certifique-se de que é 16 x 16 pixels e tem o tipo de arquivo .ico.

como bloquear um aplicativo específico no iphone

É uma boa ideia pensar um pouco no seu favicon. Use estes famosos favicons para orientar seu brainstorming. Certifique-se de que, ao adicionar o novo favicon, ele seja chamado de favicon.ico.

Você pode notar que existem três outras imagens no diretório raiz do seu site: icon.png, tile.png e tile-wide.png. Para que servem?

  • icon.png é usado para ícones de toque da Apple. Se você criar um aplicativo da web, este ícone será usado quando um usuário de iPhone ou iPad adicionar o aplicativo à sua tela inicial.
  • tile.png e tile-wide.png são para a funcionalidade de '' fixação 'do Windows e aparecerão no Windows 10.

É uma boa ideia fornecer ícones para todos esses casos --- mas se você não estiver criando um aplicativo da web, pode ter uma prioridade mais baixa.

Adicionando mais funcionalidade

Depois de adicionar seu HTML e um favicon (bem como qualquer CSS que você queira incluir), seu site está pronto para ser publicado. É fácil usar o HTML5 Boilerplate. Faça upload para o seu servidor e pronto!

Esta é a aparência de nossa página:

Como você pode ver, apenas algumas linhas de texto criaram um site totalmente funcional (embora um pouco sem graça). Não é muito, mas demorou apenas alguns minutos. E é altamente extensível com HTML5. Esse é o poder do modelo Boilerplate.

Mas há muito mais que você pode fazer com o modelo Boilerplate, se desejar. Se houver algo específico que você está procurando, há uma boa chance de encontrá-lo na documentação de ajuda.

Se você não tem certeza do que pode fazer com HTML5, mas gostaria de descobrir, existem muitos tutoriais de web design para ajudá-lo.

Compartilhado Compartilhado Tweet O email Posso instalar o Windows 11 em um PC incompatível?

Agora você pode instalar o Windows 11 em PCs mais antigos com o arquivo ISO oficial ... mas é uma boa ideia fazer isso?

Leia a seguir
Tópicos relacionados
  • Programação
  • HTML5
  • Tutoriais de codificação
Sobre o autor Então Albright(506 artigos publicados)

Dann é um consultor de marketing e estratégia de conteúdo que ajuda as empresas a gerar demanda e leads. Ele também bloga sobre estratégia e marketing de conteúdo em dannalbright.com.

Mais de Dann Albright

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever