background img
Eleito melhor tutorial do ano:

Como Fazer um Site HTML5 - Tutorial Completo para Iniciantes

A capacidade de criar páginas da web bonitas e atraentes é uma habilidade útil de se ter. Ela permite que você apresente as informações que lhe interessam e, ao mesmo tempo, prenda a atenção das pessoas que visitam sua página da web.

Se você não quer usar plataformas de website (tais como WordPress, Drupal e Joomla) para construir o seu site e quer aprender noções básicas de HTML5, então este é o manual certo para você. Nele você vai aprender como fazer um site HTML5 para iniciantes. Vamos lá!

como fazer um site html5

Introdução a Construção de sites HTML

Historicamente, os websites foram construídos com ferramentas HTML, CSS e Javascript. Estas são tecnologias de 'frontend' bem conhecidas e controlam a estética do site. Nos últimos anos, essas ferramentas têm passado por uma modernização drástica e agora possuem alguns recursos surpreendentes, que lhe permitem fazer coisas que antes teriam sido impossíveis sem o uso de uma tecnologia de backend complicada, tais como PHP, Perl ou Ruby On Rails.

Esta modernização é conhecida como HTML5 e foi adotada com grande entusiasmo por empresas e desenvolvedores. Neste artigo, eu vou te ensinar como usar os aspectos do HTML5 em seus próprios projetos web. Um conhecimento prévio de web design básico pode ser útil, mas não é essencial.

Vamos fazer um site HTML de banda como exemplo

html

Charlie and the Roundheads é uma banda de indie rock da cidade de Huntingdon Beach, Califórnia, que recentemente fechou um contrato com uma grande gravadora. O gerente de A&R da banda está ansioso para que eles façam um site e te contratou para criar um para eles.

Você vai precisar adicionar recursos de streaming de música, um local em que a banda Charlie and the Roundheads possa mostrar seus vídeos de música, postagens em blog e também uma forma para que os fãs se inscrevam para receber um aviso por email quando a banda tiver novidades.

Além disso, o código deve ser limpo e de representar o estilo moderno de codificação do HTML5. Isto pode parecer difícil no começo, mas realmente não é.

Nos próximos trinta minutos você vai aprender como fazer tudo isso e muito mais.

Editor de códigos HTML

html

Em primeiro lugar, temos de falar sobre o que nós iremos usar para escrever nosso código. Você provavelmente está bastante familiarizado com o Microsoft Word ou com o Apple Pages. Estes processadores de texto são muito bem adaptados para escrever cartas e documentos, mas são completamente inadequados para escrever códigos.

Há muitas razões para isso, mas a principal é que processadores de texto criam arquivos que não podem ser facilmente lidos por navegadores, tais como Internet Explorer, Chrome e Safari, e adicionar formatação e informações supérfluas aos documentos da web. Em vez disso, precisamos criar arquivos que são tão 'limpos' quanto possível. Chamados de arquivos de 'texto simples'.

Para criar e editar esses arquivos, usamos Editores de Texto. Você provavelmente conhece e sabe usar o Bloco de Notas do Windows. Este programa é um exemplo de um editor de texto, embora seja realmente básico. Os programadores e web designers tendem a usar editores de texto que são mais adequados para escrever códigos.

Há várias programas editores para montar site

Se você estiver usando o Windows, você usar o Notepad++ ou oTSW WebCoder. Algumas versões de Linux têm o Gedit, que é um editor de texto excelente para codificadores. Usuários do Mac OS X podem usar o TextMate, que é mais adequado às suas necessidades.

Para este tutorial, eu vou usar o Sublime Text 2. Disponível no OS X, Linux e Windows, este programa é um grande editor de texto com todos os recursos necessários e, apesar de não ser gratuito, ele tem um período de teste ilimitado. Faça o download e instale o programa antes de continuar lendo este tutorial.

HTML é uma linguagem de marcação

html

TML significa Hypertext Markup Language, que se refere ao código que estrutura todos os elementos em uma página da web. Ele não estiliza a página, nem adiciona qualquer interatividade. Isso são recursos do CSS e do Javascript, que veremos mais adiante neste artigo.

Primeiro, vamos estruturar nosso documento e criar um formulário de inscrição. Vamos nos preocupar com a estética só mais tarde.

html

De cara, crie uma nova pasta onde você irá armazenar todo o seu código. Abra o Sublime Text 2 e crie um novo arquivo. Salve o arquivo com a extensão "signup.html" e verifique se ele está armazenado na pasta que você criou. Agora, vamos adicionar alguns códigos.

basico html

Isso pode parecer um pouco assustador no começo. Este é o clichê (boilerplate) usado em praticamente todos os websites. Você vai perceber que tem duas marcações (tags) <html> envolvendo tudo, assim como um par de marcações <head> e .<body> Para que servem essas marcações?

html

O <head> é onde você armazena coisas como Meta Marcações (úteis para que seu site seja notado nos mecanismos de busca), o título da sua página, bem como arquivos externos de CSS e JavaScript.

<Body> é onde todo o resto vai e é aqui que nós iremos focar. Mas, primeiro, vamos pensar sobre como os sites são estruturados.

Se você visitar os sites de empresas de notícias como G1, Estadão, e Veja, você poderá notar que eles têm algumas características em comum. Eles têm cabeçalhos, rodapés, artigos, barras laterais e, muito frequentemente, caixas que contêm informações relacionadas, mas que não fazem parte de um artigo.

Como você poderia esperar, existem algumas marcações em HTML que são explicitamente usadas nestes casos. Apesar delas terem sido introduzidos recentemente no novo padrão do HTML5, desenvolvedores e designers reagiram a elas de forma arrebatadora. Isso ocorreu por que elas ajudam os desenvolvedores a estruturar seu código de uma maneira que lógica, de fácil leitura e bem organizada.

Isso é chamado de Marcação Semântica. O incrível disto é que as marcações soam como suas funções. Você conhecerá algumas marcações aqui, mas elas são bem autoexplicativas.

Section (Seção)

html

Você encontrará o conteúdo principal de uma página nas marcações entre seções. Pense nelas como um capítulo de um livro, englobando tudo, independente se for um diagrama, uma imagem ou algumas palavras.

Aside (Aparte)

Aside é uma marcação útil que contém informações que se relacionam com o artigo principal, mas que podem ser removidas sem que o artigo principal se torne incoerente.

Footer (Rodapé)

O footer é onde você deve colocar as informações de contato, informações de direitos autorais e talvez um ou dois links.

Article (Artigo)

O article é exatamente o que parece. Esta marcação deve conter posts de blogs, notícias, entre outros do gênero. Deve ser possível separar esta marcação do resto da página e ainda manter a coerência.

Header (Cabeçalho)

Cabeçalho é onde você provavelmente vai colocar o logotipo do seu site.

Nav

A marcação nav é para a barra de navegação e é onde você vai armazenar os links para outras partes do site.

Formulário

formulário

Agora que já aprendemos sobre os diferentes tipos de marcação semântica que o HTML5 tem para oferecer, nós vamos usar algumas destas marcações para adicionar algumas características necessárias para o website da banda Charlie and the Roundheads. E que lugar melhor para começar do que com um formulário?

Como não estamos adicionando uma postagem de blog ou uma notícia, nós usaremos a Marcação Seção. É aqui que nós vamos escrever o código para nossos formulários. Antes de continuarmos, é importante acrescentar uma ressalva de que, para usar os dados de nossos formulários de forma realmente útil, nós vamos ter que usar uma tecnologia de backend. Essa tecnologia não entra no escopo deste artigo, infelizmente. No entanto, se você estiver interessado em tecnologias de backend, veja o PHP. É fácil de usar e é usada por milhões de desenvolvedores em todo o mundo.

formulário

Mas, primeiro, vamos falar sobre os dados que nós vamos tentar e registrar. Charlie and the Roundheads vão querer manter contato com seus fãs por e-mail. Eles também querem saber onde eles sairão em turnê, por isso pode ser uma boa ideia coletar informações de CEPs. Por fim, os fãs podem querer deixar uma mensagem para a banda. Com isto em mente, vamos começar a trabalhar em nosso primeiro formulário e trazer conceitos do HTML5 à medida que progredimos.

Formulários consistem de rótulos, entradas e botões, e estão cercados por marcações <form>.

primeiro formulário

A primeira entrada que vamos aceitar é para um endereço de e-mail. Para fazer isso, nós adicionamos uma marcação de <entrada> e a deixamos em aberto. Nós vamos prefaciar esta marcação com 'E-mail: ‘.

primeiro formulário

Isto não é mais um problema. Você simplesmente dá a sua marcação 'entrada' um tipo de 'e-mail', como visto no exemplo abaixo.

Antes do HTML5, você teria apenas que aceitar qualquer input antigo, e, em seguida, teria escrito algum código para se certificar de que as informações que tinha recebido do usuário eram de um endereço de e-mail legítimo e real. Isso era demorado e tedioso.

primeiro formulário

Nós também queremos tornar este campo obrigatório, então vamos colocar um outro atributo de 'obrigatório'. No caso de uma tentativa de usuário de enviar este formulário com o campo de e-mail em branco, o site irá responder com uma mensagem de erro dizendo "Por favor, digite um endereço de e-mail". Ele também irá fazer isso se o usuário tentar enviar algo que não seja um e-mail válido. Finalmente, devemos também dar um nome para identificar o campo, caso façamos também um código de backend. Isto é feito através da adição de um atributo 'nome' com um valor de 'e-mail'. Isto está demonstrado abaixo.

Agora, vamos seguir em frente e adicionar os campos de código postal e mensagem. Como eu tenho certeza que você imaginou, você não pode usar um tipo de 'email' para estes campos. Então, o que nós sabemos sobre códigos postais? Bem, eles estão sempre representados por um valor numérico. Você consegue adivinhar o tipo de valor numérico? É isso mesmo. Números.

Por fim, vamos ver como aceitar mensagens. Como eu tenho certeza que você imaginou, Charlie and the Roundheads tem um monte de fãs que podem querer quebrar com a tradição e não usar uma marcação de entrada, mas sim algo mais.

A marcação <textarea> é usada para quando sua entrada pode abranger várias linhas. Enquanto isto pode ser apropriado para uma mensagem de fãs, é menos apropriado para coisas como e-mails, senhas e nomes.

A marcação <textarea> pode ter um monte de atributos. Nós estamos interessados ​​em quatro destes atributos. Em primeiro lugar, queremos dar um nome. Queremos também definir algumas linhas e colunas; isto especificará o quão grande a área de texto será. Por fim, queremos definir se é obrigatório ou não.

Com isto em mente, eu decidi dar um nome significativo e torná-la razoavelmente grande. Eu não quero tornar o campo obrigatório, pois eu não acho que todos os fãs vão querer deixar uma mensagem para a banda. O que nos resta não é exatamente bonito. Não se preocupe com isso. Nós melhoraremos a aparência depois, mas primeiro vamos ver como adicionar mídias pesadas em nosso site.

Como colocar Música e Vídeos

navegadores de internet

Antigamente, se você quisesse adicionar música e filmes em uma página da web, você teria que contar com um framework volumoso e lento, como o Flash ou Silverlight. O HTML5 tem efetivamente jogado fora estes frameworks e os substituiu por algo muito melhor.

Para a próxima parte da página da banda Charlie and the Roundheads, vamos criar um lugar para que eles possam publicar e compartilhar músicas e vídeos. Isso parece complicado, mas é realmente muito fácil. Mas vamos primeiro falar sobre as temidas codecs. Como eu tenho certeza que você sabe, há uma enorme quantidade de navegadores no mercado no momento. Há o Internet Explorer da Microsoft, o Chrome da Google, o Firefox da Mozilla, o Safari da Apple e o Opera da... hmm, Opera.

Cada um destes manipulam a reprodução de música e vídeos de forma ligeiramente diferente. Por exemplo, enquanto o Internet Explorer é capaz de reproduzir músicas e vídeos codificados com o codec H.264 MOV, ele não pode usar o codec Theora, que é o preferido do Opera e do Firefox.

Então, como é que vamos contornar isso? Bem, não há nenhum truque realmente. Nós apenas temos que codificar nossas música e filmes de um monte de maneiras diferentes.

Então, vamos começar. Crie um novo arquivo usando o mesmo clichê do HTML5 que usamos antes. Vamos também adicionar uma marca semântica de seção.

Agora, estamos prontos para adicionar algumas músicas e vídeos. Mas, primeiro, você gostaria de ouvir o que eu realmente amo com relação ao HTML5? Tudo é exatamente o que parece. Não sabe o que eu quero dizer? Ok, você gostaria de dar um palpite sobre qual o nome da marcação para adicionar vídeos a uma página? Exatamente. Vídeo.

Então, agora nós precisamos adicionar os arquivos de vídeo. Tudo o que fizemos aqui é adicionar um contêiner para eles. Assim, dado o que sabemos acima, vamos adicionar mídias MOV H.264 e WebM8. Como um bônus adicional, nós vamos ter um espaço reservado para que, se alguém visitar a página com um navegador antigo de web, eles vão ver uma mensagem informando-os de que eles devem usar algo mais moderno.

Adicionar um vídeo é fácil. Basta digitar em uma marcação <font> para cada vídeo que você desejar inserir. Mensagens de fallback não precisam estar em uma marcação.

Nós também queremos colocar algumas músicas. Ao contrário dos vídeos, existem apenas dois codecs com os quais você deve se preocupar.

Como seria de esperar, a marcação para áudios é <audio> e você pode adicionar suas fontes da mesma forma que você fez com filmes.

Agora que nós resolvemos isso, vamos enfrentar o último requisito para o site da banda Charlie and the Roundheads.

Fazendo o Blog da banda

Vamos recapitular rapidamente o que aprendemos até agora. Nós falamos sobre a marcação semântica, sobre formulários HTML5 e sobre a incorporação de mídias pesadas. Vamos tentar algo simples e criar alguns posts de exemplo e, em seguida, vamos ver como estilizar o nosso site. Isso não vai demorar muito.

Primeiro vamos criar outra página chamada 'index.html' e adicionar o mesmo clichê que tínhamos antes. Nós também vamos adicionar uma marcação de artigo, que é a marca especifica para posts e artigos de notícias. Usando a familiar marcação <p>, vamos colocar alguns parágrafos de "lorem ipsum".

Lorem Ipsum são palavras em Latim que na verdade não significam nada, mas permitem que você preencha algo com texto e o estilize mais tarde sem ter que se preocupar em escrever o conteúdo.

Feio, não é? Agora nós vamos melhorar a aparência.

Tipografia do Site

A palavra tipografia soa como uma ciência arcaica envolvendo prensas de impressão, mas na realidade é algo completamente diferente. É a arte de organizar e estilizar o texto para que as palavras sejam legíveis e de boa aparência.

Parece simples, mas é tudo menos isso. Um olhar mais atento com relação à tipografia poderia encher um bom número de livros, mas não temos tempo para isso. Vamos pular tudo isso e saltar diretamente para fazer o nosso texto com um bom aspecto.

Você vai ter algumas fontes prontamente disponíveis para uso no seu computador e navegador web. Estas são aquelas que você pode ter se deparado enquanto escrevia algo no Word. Você pode não saber que um bom número de fontes está disponível online, criadas por designers apaixonados por tipografia.

As fontes do Google são uma grande fornecedora destes, e nós vamos usar uma fonte disponível gratuitamente chamada de Droid Sans.

Em cada um de nossos arquivos HTML, nós vamos adicionar a seguinte linha entre as nossas marcações <title>

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >.

Aproveitando este momento, vamos criar um novo arquivo chamado style.css e adicionar esta linha para cada um de nossos arquivos HTML.

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >

Não sabe o que é CSS? Então, você se lembra que eu lhe disse que era a estrutura HTML de uma página web? Bem, o CSS é o que faz que a estrutura parece bonita, é a estética da página.

Ele trabalha através da seleção de elementos em uma página (elementos como o Corpo, P, Seção), e em seguida, adiciona regras. Então, vamos selecionar todo o conteúdo dentro das marcações Seção e colocar o estilo da fonte do Droid Sans.

Isso resultará que todo o texto dentro de nossas páginas fique com o estilo da Droid Sans, que é muito melhor do que a fonte padrão.

Agora temos algumas tarefas para fazer. Nós precisamos adicionar links para cada página, adicionar alguns fundos e adicionar algumas bordas. O último capítulo vai focar mais detalhadamente na estética.

Arrumando o Website ( como adicionar link)

Vamos abordar os frutos mais baixos primeiro. Nós vamos criar uma barra de navegação para os usuários da banda Charlie and the Roundheads usarem Acima da marca Seção em cada página, vamos criar uma marca Nav. No meio disso, vamos criar uma lista desordenada. Esta será identificada pela <ul> dentro dessas, temos marcas <li> de cada um dos links de cada página dentro do site.

Agora, vamos estilizar isso. Agora cada uma dessas marcações estão em cascata. Nós vamos consertar isso para que eles fiquem todas em uma linha. Edite o arquivo CSS antes e adicione as seguintes linhas.

Agora que isto está resolvido, vamos pensar no blog. Então, nós temos um monte de (com uma aparência bem mais bonita) texto. No entanto, queremos fazer um pouco mais. Queremos lhe dar uma largura fixa de 640 pixels, colocar uma borda espessa, sombreado e uma cor de fundo.

Então, vamos editar o arquivo CSS novamente. Nós vamos adicionar as seguintes linhas. Estas são razoavelmente autoexplicativas.

Finalmente, queremos aplicar um fundo uniforme em todas as páginas. E agora vamos voltar para o arquivo CSS! Como estamos criando um plano de fundo em todas as páginas, nós vamos criar um seletor do tipo "corpo". Vamos também tentar algo um pouco diferente.

Planos de fundo com cores sólidas não são muito bonitos. Fundos texturizados são. Vamos usar o CSSMatic e gerar uma textura que nós gostamos. Brinque com as configurações até que você esteja feliz e clique em 'Baixar Noise Texture'.

Agora, vamos aplicar isso como um fundo. Vamos mergulhar de volta em nosso arquivo CSS e adicionar um seletor para o "corpo". Também vamos aplicar um fundo de imagem. Antes de avançar, por favor, certifique-se de que a sua imagem está no mesmo diretório que seus arquivos HTML.

Uma vez editada, a página deve estar semelhante a esta. Como você pode dizer, há muito mais a fazer a partir daqui. Esta foi apenas uma introdução bem básico a edição e criação de conteúdo com CSS & HTML5. Se você quiser construir um site usando o WordPress, vá até minha página inicial.

Conclusão

Esta foi uma breve introdução as ferramentas de web design usando tecnologias HTML5, bem como algumas técnicas de HTML e CSS padrão. Enquanto eu espero que eu tenha efetivamente aprendido sobre os conceitos básicos de web design, eu ficaria ainda mais satisfeito se você terminar de ler este artigo e se sentir confiante com o conhecimento de que a criação de belas páginas da web está ao seu alcance. Ah, se você quiser fazer o download dos arquivos do site do Roundheads, clique aqui.


5 comentários: Deixe seu Comentário

  1. Fabiano

    Olá, Fábio, seu site é incrível. Sobre esse tutorial HTML5 eu tenho uma dúvida. Eu consegui criar a página como vc ensinou, mas não sei como deixá-la visível para as pessoas na internet. Obrigado e continue o belo trabalho.

    Responder
    Replies
    1. Fábio

      Olá, Fabiano! Obrigado pelas suas palavras. Você vai precisar enviar os arquivos html que criou para a sua hospeagem de sites. Assim que fizer isso, seu site ficará disponível para as outras pessoas na internet.

  2. Xavier

    Agradeço por fazer este tutorial excelente. Eu estava procurando um texto esplicando sobre sections e article no HTML5 e tive a sorte de encontrar o seu.

    Responder
  3. Bruno

    Sensacional este guia! Indico pra todo mundo que me pergunta como criar um site html5. É didático e muito fácil de entender o básico da coisa.

    Responder
  4. Fábio

    Uma dica para os visitantes que estão em dúvida se devem fazer um site html ou Wordpress:

    -Se você quiser construir um site decente rapidamente e você não tem muita experiência com codificação aconselho o WordPress. Há um tutorial completo sobre ele na página inicial - http://www.comofazerumsite.org

    -Se você quer aprender as noções básicas de desenvolvimento web, ponha a mão na massa com HTML5. No começo, obviamente, você não será capaz de criar algo realmente incrível - uma vez que leva tempo para aprender HTML5, mas eventualmente você vai pegar o jeito da coisa.

    Responder