Como Criar Um Site, Blog ou Loja Virtual Gratis - WebMaster.pt » HTML

Como Criar Animações Com jQuery

Maicon Sobczak — Wed, 25 Aug 2010 13:00:50 +0000

Animações Com jQuery

O jQuery e outras bibliotecas javascript tornaram muito mais fácil adicionar pequenas animações ao website. Não muito elaborado à lá Flash, mas o suficiente para tornar a interação com as páginas muito mais interessante.

Neste tutorial será demonstrado como adicionar as animações através dos métodos nativos do jQuery, aspectos das animações e também alguns plug-ins que adicionam mais possibilidades nas animações feitas com o jQuery.

Preparativos

Para demonstrar os exemplos de animação apresentados aqui, você vai precisar de um arquivo HTML com o seguinte código no corpo do documento:





Texto animado.

No cabeçalho desta página importe a última versão do jQuery

Crie um arquivo Javascript e importe ele no documento HTML logo após a linha de importação do jQuery.

Opacidade

Este é um efeito suave que torna a navegação mais prazerosa. Dependendo da forma que é feita, torna-se quase imperceptível ao mesmo tempo em que é responsável pelo algo a mais no site.

É a animação mais básica que você pode adicionar a um link ou imagem Tanto, que o CSS 3 traz a possibilidade de fazer isso diretamente nas folhas de estilo.

O jQuery oferece três métodos para trabalhar com a opacidade: fadeIn(), fadeOut() e fadeTo(). O primeiro aumenta a opacidade, que é medida do 0 (invisível) ao 1 (visível), a segunda diminui este número e com a terceira podemos trabalhar o intervalo entre estes números.





$(function(){

  $('p').fadeOut(200);



})

Neste primeiro exemplo o texto do parágrafo desaparece da tela a uma velocidade de 200 milissegundos. Para que a opacidade demore um segundo para chegar ao zero, é preciso colocar 1000 no valor entre parênteses.

Ao invés de valores, você pode utilizar ‘fast’ ou ‘slow’ que se referem aos valores 200 e 600 respectivamente. Se não for configurado nenhum valor, a duração padrão é de 400 milissegundos.

Este efeito não remove o elemento da estrutura da página, apenas adiciona um “display:none” ao final da animação do texto.

Utilizar o fadeIn() segue o mesmo mecanismo:





  $('p').fadeIn(‘slow’);

O fadeTo() permite um maior controle sobre a animação onde você pode definir além da duração valores para a opacidade entre 0 e 1.





$('p').fadeTo(0.5,300);

O código anima faz com que o texto do parágrafo torne-se parcialmente transparente a uma velocidade de 300 milissegundos.

Todos estes três métodos permitem que uma função seja executada ao final da animação o que abre possibilidades para animações encadeadas.





  $('p').fadeOut(200, function(){

    alert('Término da animação.');

  });

Altura

Os métodos slideDown(), slideUp() e slideToggle() trabalham a altura do elemento. Escondem ou mostram com movimento deslizante.

As configurações são as mesmas mostradas acima para os efeitos de opacidade. Sendo que com o slideDown() a altura de elemento aumenta a partir do topo e com o slideUp() ela diminui em direção ao topo.

O slideToggle() para os casos em que não é possível saber se o elemento esta visível (altura 100%) ou invisível (altura 0). Se ele estiver visível o slideToggle() aplica o slideup(), caso contrário aplica o slideDown().





  $('p').slideUp(1000, function(){

    alert('Termino da animação.');

  });

  $('p').slideDown(1000);  

  $('p').slideToggle(1000);

animate()

O animate() é o método de animação por excelência no jQuery e o mais versátil em termos de configuração. Com ele você consegue aplicar os efeitos mostrados acima e qualquer outro baseado em uma propriedade CSS que aceite valores numéricos.

Devido a flexibilidade do método, vamos analisar baseado na sintaxe

.animate( properties, [ duration ], [ easing ], [ callback ] )

A primeira informação a ser fornecida para o método são as propriedades CSS a serem animadas. Vale margem, espaçamento, tamanho da fonte, largura, altura e outras que aceitem número. Falando em número, se você informar apenas o número e não a unidade de medida, será entendido que você se refere a pixels. Se você quiser utilizar porcentagem, pode apenas lembra de colocar entre aspas: ‘150%’.

O interessante é que algumas propriedades aceitam os valores show, hide e toggle. Então ao invés de digitar “width:100px” para mostrar uma div por exemplo, você pode digitar “width:show”.

Em seguida você define qual a duração da animação. O tempo será medido em milissegundos, mas se preferir pode indicar a velocidade com fast ou slow.

Os dois últimos parâmetros são de uso facultativo.

O easing permite que a progressão da animação ocorra de maneira não linear, um ponto mais rápido ou mais vagaroso. Deixa a animação muito mais interessante. As opções ‘linear’ e ‘swing’ que vem por padrão com o jQuery não valem muito a pena. Então você pode utilizar o plugin jQuery Easing Plugin que possibilita maior controle sobre este aspecto das animações sendo totalmente integrável ao método.

O parâmetro callback permite que seja executado código ao termino da animação.

Vejamos alguns exemplos da utilização do animate():





$('p').animate({fontSize:50},500, function(){

    $(this).animate({marginLeft:50},300);

    }

  );

Após aumentar o tamanho da fonte para 50 pixels, é iniciada outra animação deslocando o texto 50 pixels da borda esquerda. Observe que a propriedade CSS é escrita em camelCase.





  $('p').animate({

    opacity:0.2,

    padding:10,

    marginLeft:150,

    width:'hide'

    },'slow');

Diversas propriedades podem ser animadas ao mesmo tempo, sendo que altura, largura e opacidade aceitam os valores show e hide.

Se você tiver importado o plugin jQuery Easing Plugin, os valores que ele oferece serão postos após a duração:





  $('p').animate({marginLeft:150},'slow','easeInCubic');

:animated

Não raro, alguns elementos são animados diversas vezes e nem sempre em sequencia exata. Com o seletor :animated é possível atingir os elementos que estão sendo animados.





  $('p').animate({marginLeft:150},200);  

  $('p:animated').css({color:"#ff0000"});

Mais uma forma de chamar a atenção do visitante para alterações na página.

delay

As animações podem ser encadeadas tornando-se mais completas. Você pode engatar um slideDown() a um fadeTo() e este a um animate(). Mas se por algum motivo você quer que haja um intervalo entre eles, temos à mão o delay().

Ele tem o papel de retardar a execução por alguns milissegundos.





$('p').css({display:"none"}).slideDown().fadeTo(0.7, 'slow').delay(500).animate({marginLeft:50},300);

O texto foi escondido para podermos iniciar a animação. O texto então aparece com efeito deslizante, tem a opacidade reduzida e então a fila para por meio segundo devido ao delay(). E somente depois desse tempo o elemento de parágrafo tem a margem esquerda alterada.

Dica Para Evitar Problemas Com Animação Repetitiva

Adiconamos ao parágrafo um efeito em que o texto desliza alguns pixels para a direita quando o mouse passar sobre o texto e depois ele volta a posição normal.





  $('p').hover(function(){

    $(this).animate({marginLeft:20},500)},

  function(){

    $(this).animate({marginLeft:0},500);  

  })

Desta maneira ele funciona normalmente. Mas, ao passar o mouse rapidademente diversas vezes, vemos o problema: a animação continua mesmo sem o mouse sobre o texto.

Para evitar este problema, basta adicionar stop() antes que a animação comece, com isso, toda a animação que estiver acontecendo vai parar e a fila será reiniciada com a animação atual.





  $('p').hover(function(){

    $(this).stop().animate({marginLeft:20},500)},

  function(){

    $(this).stop().animate({marginLeft:0},500);  

  })

Conclusão

Quando bem explorados e integrados, os métodos de animação nativos do jQuery tornarão o website muito mais interessante e isso sem muitas linhas de comando.

Como Criar Animações Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Conheça O HTML 5 Parte 2

Maicon Sobczak — Wed, 12 May 2010 10:54:41 +0000

No primeiro artigo sobre HTML 5 foi mostrado a você como montar um layout semântico utilizando as novas tags.

Neste artigo apresentarei modificações introduzidas com o HTML 5 em formulários e as novas API de mídia e geolocalização, além da festejada canvas.

Formulário Em HTML 5

Tendo em vista que a principal via de entrada de dados em um website é através de formulários, as novidades desta nova versão do HTML ajudam a facilitar a vida dos desenvolvedores.

Agora é esperar que os navegadores resolvam dar suporte às novas funcionalidades. Pois até o momento, o Chrome suporta uns, o Opera outros e o Firefox quase nenhum. Sem falar no Internet Explorer…

A maioria dos atributos você já pode aplicar, pois eles não interferem significativamente no funcionamento do formulário caso não sejam suportados. Vamos a eles.

required

Para informar que um campo é de preenchimento obrigatório, basta adicionar o atributo required.

Quando o formulário for submetido se o campo requerido não tiver informações, o navegador apresenta uma mensagem informando que o campo precisa ser preenchido e não permite que o formulário seja enviado.

placeholder

O texto do atributo placeholder é mostrado dentro do campo do formulário e quando este recebe foco, a mensagem desaparece. Reaparecendo caso o campo continue vazio.

Mais um atributo de apoio para tornar os formulários mais claros e objetivos, substituindo a necessidade de soluções javascript para apresentar as dicas de preenchimento.

autofocus

O campo do formulário que tiver este atributo recebe o foco automaticamente quando a página é carregada. Utilizado pelo Google e pertinente já que acessamos o site justamente para digitar um termo no campo.

Novos Tipos De Campo De Formulário No HTML 5

O HTML 5 introduz 13 novos tipos de campo de formulário:

search – para campos de busca;
number – disponibiliza setas para aumentar e diminuir os números sendo possível limitar os número máximo e mínimo;
range – botão deslizante;
color – apresenta uma paleta de cores;
tel –números de telefone;
url – endereço de uma página web;
email – endereço de e-mail;
date/month/week – disponibiliza no campo um calendário que permite navegar entre meses e anos;
time – para informar a hora;
datetime – permite configurar a data e hora;
datetime-local – data e hora local.

Um grande avanço com a introdução desses novos tipos de campo além da formatação, é a validação dos dados por parte do navegador. Se os dados inseridos não estão no formato esperado, a submissão não ocorre. Com isso temos mais uma camada de garantia sobre a relevância dos dados submetidos.

O único navegador que oferece suporte a grande parte destes campos é o Opera 9.5+. No arquivo para download no final deste artigo existe um formulário já configurado que você pode testar no Opera e ter uma visão melhor do que foi explicado.

Elementos De Mídia No HTML 5

Antes da chegada do HTML 5, a inserção de vídeo na página era feita utilizando a tecnologia Flash, que além dos problemas de compatibilidade de versão tinha problemas com validação da página.

Utilizando HTML 5, o vídeo pode ser inserido na página com apenas uma linha de código:

É possível configurar a rodagem automática do vídeo quando a página carrega usando o atributo autoplay. Ou então apresentar os controles (play, stop) com o controls. Definir um menu de contexto, o pré-carregamento do vídeo, a repetição, adicionar marca d’agua. A lista de atributos é extensa e as promessas de interatividade também.

Você indica o vídeo a ser executado e o navegador se vira para encontrar o melhor codec para a execução.

Porém, o excitamento com esta novidade deve parar por aqui. Pois é em torno deste elemento que surge o ponto mais polêmico nesta nova versão do HTML. Os navegadores Mozilla e Opera querem implantar por padrão o codec Ogg Theora para a execução de vídeo nas páginas. Que é de domínio público e desempenha o papel tão bem quanto seu oponente, o H.264 que custa 5 milhões ao ano para ser licenciado, mas que é o formato de vídeo escolhido por grandes websites.

O Chrome, com o gigantismo do Google por trás, resolveu dar suporte aos dois e deixou os outros navegadores se engalfinhando.

É um debate que ainda vai gerar muita discussão e todos esperam que se resolva logo, já que isso atravanca o progresso da web. Não se espante se surgir um codec híbrido como solução.

Se você já quer utilizar esta novidade, mas também quer garantir que o vídeo esteja disponível caso não haja suporte por parte do navegador, pode ler este tutorial: HTML5: tag video com alternativa em Flash

O elemento audio funciona da mesma maneira e contém os mesmos dilemas que a video. Somente muda o nome e o propósito, que é a execução de áudio.

canvas

É um contêiner para mostrar gráficos. Basicamente você cria os gráficos com javascript e mostra eles dentro da canvas.

Oferece diversas propriedades para desenho diretamente no navegador: fillStyle (preenchimento), stroleStyle (cor da linha), lineWidth-lineHeight (tamanho da linha), lineTo, moveTo, closePath, drawImage (para inserir imagem) e diversos outros.

Um elemento bastante completo e com muitas possibilidades. É possível até criar um filtro para inverter as cores de uma imagem. E a possibilidade de interação com os gráficos é outro atrativo. Até jogo é possível criar utilizando canvas. Veja este exemplo: Canvascape – Experimenting With Textures

Apesar do suporte de todos os navegadores modernos ( menos IE) ainda existe uma certa inconsistência na interpretação dos valores para as propriedades do canvas entre eles.

geolocalization

Esta API possui especial utilidade em dispositivos móveis. Pois ela permite que você envie sua localização para um serviço online e receba em troca um mapa com locais de seu interesse perto de onde você esta. Para ficar em apenas uma possibilidade.

Apesar de prática, esta possibilidade levanta questões sobre privacidade. Por isso, antes de realizar a conexão com um servidor, o navegador informa que determinado endereço web deseja saber a sua localização. Oferece então a opção de permitir ou negar o envio desses dados.

Que tipo de informação será enviada para o servidor? Basicamente latitude, longitude e a precisão destas duas informações.

Pelos meus testes, o resultado foi bastante impreciso, pois ele acertou o país e o estado. Mas me identificou em uma cidade a pelo menos 500km de distância da minha localização real.

Com o tempo os resultados serão mais exatos conforme as informações forem coletadas e o desenvolvimento for refinado. Por hora, o geolocalization serve mais para experimentações.

Conclusão

A velocidade com que a comunidade de desenvolvedores esta implementando as novidades do HTML 5 e o apoio de grandes sites ao utilizarem os novos elementos mostram o estado de maturidade da internet.

Temos pressa em tornar o ambiente online mais eficiente e útil. Os dois tutoriais sobre HTML 5 apresentados aqui devem ser apenas o inicio dos seus estudos para manter-se à frente quando o assunto é qualidade e relevância dos serviços prestados.

Download do código utilizado neste artigo: Conheça O HTML 5 Parte 2

Conheça O HTML 5 Parte 2 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Conheça O HTML 5 Parte 1

Maicon Sobczak — Wed, 05 May 2010 13:17:21 +0000

Estruturando Uma Página Com HTML 5

O objetivo do HTML 5 é criar um web semântica. Isso significa organização, padrões na estrutura da página que implementados, facilitam principalmente o trabalho de programas rastreadores – robôs de busca. E qual a vantagem disso? Mecanismos de busca mais precisos e úteis.

Como usuário, você conseguirá encontrar informações mais relevantes. E como desenvolvedor você a princípio vai quebrar a cabeça até entender os princípios desta nova forma de pensar o desenvolvimento. Mas tenha certeza que os benefícios alcançados valem muito a pena.

Esta nova versão do HTML traz mudanças significativas com a criação de novas tags que possibilitam unir as partes da página de forma lógica. O que não significa necessariamente um código mais enxuto. Como já disse, o objetivo é torná-lo organizado.

É comum ler que o HTML 5 somente estará pronto em 2022. O que é um erro de interpretação. Para o ano referido esta programada a segunda especificação, melhorias. Já em 2012 estará finalizada a primeira etapa e o desenvolvimento estará a pleno vapor. Além do que os navegadores já mostram a preocupação em oferecer suporte.

Neste primeiro tutorial, vou mostrar como utilizar o HTML 5 para estruturar a página inicial de um blog. Quem acompanhou a série sobre CSS vai reconhecer a estrutura, já que é a mesma do tutorial CSS – Criação de Layout. Desta maneira você terá a possibilidade de comparar o código XHTML com o HTML 5.

Suporte Ao HTML 5

O único navegador que não oferece suporte algum às novas funcionalidades do HTML 5 é o famigerado Internet Explorer. O líder do mercado por ironia também é o mais atrasado. A promessa é de que na versão 9, o navegador da Microsoft ofereça suporte total.

Para lidar com a versão atual e anteriores do IE, temos como solução, a utilização de um código javascript que possibilita o funcionamento do HTML também no Internet Explorer. Ele será utilizado neste tutorial.

Apesar de não ser tão comum quanto os desenvolvedores gostam de alardear, caso o javascript esteja desabilitado, a página vai desmontar. O melhor é você avaliar o público alvo do site para decidir sobre a utilização do HTML 5.

Mudanças Gerais Do HTML 5

Ao contrário do XHTML que somente permite tags escritas em minúsculo, o HTML 5 é case-insensitive. Tanto faz escrever maiúsculo quanto minúsculo. Isso oferece liberdade ao desenvolvedor e margem a críticas sobre a legibilidade do código. Eu aconselho o padrão XHTML.

No HTML 5 não é mais obrigatório o fechamento da tag de elementos “vazios” como img, br. Mais uma vez o direito de escolha é seu.

A definição do tipo de documento tornou-se absurdamente mais simples.

A hierarquia de cabeçalhos (h1 – h6) também foi alterada. Agora ela não é mais relativa à página somente, mas à seção da página. É possível ter diversos h1 em uma mesma página, sendo que cada um com uma importância diferente conforme a seção em que esta sem influenciar diretamente os outros.

O papel Da div

Com já foi dito, as novas tag HTML 5 priorizam a semântica. As divs sempre tiveram o papel de estruturar a página e continuam assim. São utilizadas para fins “decorativos” e estruturas gerais, pois não possuem valor semântico e não ajudam a definir a importância do conteúdo.

Conforme eu explicar as novas tags retornarei ao assunto para esclarecer melhor.

header E hgroup No HTML 5

O elemento header especifica o cabeçalho da seção da página. Ele pode ser utilizado no topo da página englobando o logotipo da empresa e o menu, e ao mesmo tempo aparecer no lado direito para intitular a seção “mais artigos”.

Utilização no topo da página:





      

          


       

           

    Home


    Marketing


    Internet


    Granhar Dinheiro


    Webmaster


    Scripts


    Software
                            

    Comércio Eletrônico


    Downloads


    Contato

Neste exemplo, o cabeçalho da página é simples e o header serve muito bem. Para cabeçalhos mais complexos que envolvam footer e outros headers, deve-se utilizar section.

No corpo da página:







  

    Titulo do artigo


    Data da postagem


  


  Texto do artigo

Pelo senso comum, tudo o que vier antes do texto em um artigo, é o cabeçalho. Então fica fácil você saber quando utilizar o header. Não é preciso utilizar header quando houver apenas um cabeçalho, por exemplo, um título estilizado com h1.

A tag hgroup (head group) serve para englobar diversos cabeçalhos.







  

    Titulo principal


    Subtítulo


  

   Texto do artigo

Se antes do texto ainda houvesse um parágrafo com data, por exemplo, deve-se então englobar o hgroup e p com o header.

footer no HTML 5

A tag footer basicamente é o rodapé. Seja da página ou de uma seção.





        Criado por Maicon Sobczak para Webmaster.pt

Esta tag contém informações adicionais sobre o que foi exposto na seção. Útil nas chamadas para um post, onde você pode adicionar o nome do autor, ou um link para o topo da página.

Para a criação de rodapés mais completos, comuns nos dias de hoje, com links para outros blogs, informações sobre o autor e afins, ao invés do footer deve-se utilizar o sections.

Deixe o footer para informações sucintas.

nav No HTML 5

Identifica os links para navegação seja para outra página ou seções da mesma página.









    Home


    Marketing


    Internet


    Granhar Dinheiro


    Webmaster


    Scripts


    Software
                            

    Comércio Eletrônico


    Downloads


    Contato

Não se deve utilizar esta tag para links individuais ou seqüência de links que são apenas referências. Ela pode ser utilizada quantas vezes for necessário na página, contando que sejam links integrantes de um menu.

section no HTML 5

Assim como dividíamos a página em blocos de conteúdo com divs, faremos o mesmo com o section. Com o diferencial de que a utilização deste elemento é semântica. A seção precisa ter um significado como conteúdo.

Se a página é dividia em dois grandes blocos, um à esquerda englobando textos e um à direita com anúncios, utilize divs. A section será utilizada quando você for dividir o conteúdo entre “web design” e “web master”. Vejamos um exemplo:

É possível também aninhar sections.





   



Web Design


            

            

              Título
 

            Texto 
            

            




            

    Mais artigos


          

            

            Donec ac elit


            Lorem impsum amet


            Donec ac elit


            Lorem impsum amet

Toda section precisa de um cabeçalho, sejam h1-h6 ou header, e pode ter footer.

article No HTML 5

Para saber quando utilizar o article, isole o texto do resto da página. Se ele continuar fazendo sentido, estão use article. A utilização básica é para notícias, artigos e comentários. Ela cria seções da página que podem ser referenciadas via RSS.







Artigo em destaque
 



            Donec ac elit. Etiam posuere venenatis ante. Nun ullamcorper neque ac justo. Donec id alor purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. 
            

leia mais

O article e o section tem um relacionamento que pode confundir a princípio. Pois assim como é possível colocar article dentro de um section, o inverso também é permitido.

Uma forma de diferenciar é pensar que o section divide a página em blocos de conteúdo, enquanto o article engloba o conteúdo em si.

Não é permitido aninhar articles. Se dentro de um texto houver uma tabela de conteúdo, com um título e enxerto de outros artigos relacionados, então utilize o section, pois ele engloba seções relacionadas.

aside, figure E figcaption No HTML 5

Entre as tags aside você engloba informações adicionais ao conteúdo principal. Por exemplo, uma citação, anotações e afins. Ela esta gerando mais dúvidas sobre seu real papel do que funcionando.

A figure engloba bloco de dados que fazem sentido mesmo se retirados do contexto. Como é o caso de um gráfico, imagem ou trechos de um poema.

O figcaption trabalha como uma legenda para informar sobre os dados englobados por figure.

Conclusão

Com as tags apresentadas neste primeiro tutorial já é possível elevar o layout da página ao nível 5. A princípio desenvolver com HTML 5 será lento, pois é preciso racionalizar a utilização dos novos elementos. Mas é melhor começar a se acostumar desde já, pois a dupla HTML 5 e CSS 3 veio para ficar e esta ganhando terreno rapidamente.

Se você ainda não conhece as novas propriedades CSS 3, acesse a nossa série Aprende CSS.

Conheça O HTML 5 Parte 1 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

HTML Básico

Maicon Sobczak — Tue, 27 Apr 2010 09:56:09 +0000

Pela quantidade de tutoriais ensinando intrincados efeitos utilizando CSS e javascript é fácil termos a impressão que só existem desenvolvedores web experientes. O que sem dúvida é um engano.

Diariamente entra gente nova no mercado web e nem sempre com muito conhecimento. Vendo esta avalanche de informação ficam desnorteados e como não entendem muitos apenas copiam e colam. Tirando os preguiçosos, alguns simplesmente não conseguem encontram um material bem organizado que explique o básico.

E no caso de uma página de internet, o básico é a linguagem HTML. Já vi programadores criando código desnecessário ou inventando soluções mirabolantes devido à falta de conhecimento real sobre os elementos da página.

Neste artigo não vou abordar todas as tags HTML. Vou explicar ao papel das mais importantes, o que muda nelas com o HTML 5 e como utilizá-las corretamente para conseguir um melhor posicionamento em sites de busca.

HTML é a sigla para Hyper Text Markup Language, é uma linguagem para marcação de hipertexto. O que segundo diretrizes, não torna o HTML uma linguagem de programação. E sim uma linguagem de estruturação. Aí esta o principal motivo pelo qual não podemos inserir código CSS, de formatação, dentro das tags HTML.

A estrutura básica de uma página HTML é:







  

    texto

XHTML

O XHTML surgiu com a popularização dos dispositivos móveis e visualização dos websites em outras mídias. Ele tornou a escrita do HTML mais limpa e organizada baseando-se nas regras do XML.

Mas ao contrário do que somos levados a pensar, o XHTML não é uma versão posterior ao HTML 4, mas apenas uma forma de estruturar o código de forma otimizada. A W3C considera o XHTML uma recomendação apenas.

De qualquer maneira são apenas rótulos e uma página em XHTML é visivelmente superior em velocidade e percepção pelos mecanismos de busca.

Entre os melhoramentos esta a obrigatoriedade de escrever as tags em minúsculo, o fechamento dos elementos vazios e aninhamento correto das tags e inserir código CSS inline é pecado mortal.

Tags Do HTML

Os elementos utilizados para criar a estrutura são chamados de tags. Elas propriamente ditas não são mostradas pelo navegador que as utiliza apenas para interpretar o conteúdo da página. Ficam entre sinais de maior (>) e menor (<). Quase sempre trabalham em dupla que englobam a parte do código. Uma abre e a outra fecha.



  Texto entre tags.

Já nos elementos vazios, que são tags que não trabalham em dupla, por exemplo br, hr, img, o fechamento ocorre da seguinte maneira:

No HTML 5, o fechamento dos elementos vazios é opcional.

DOCTYPE

Antes mesmo da abertura da primeira tag HTML, é preciso informar ao navegador como o documento será estruturado. Existem três tipos:

Strict – O código segue rigorosamente os padrões sem misturar formatação com marcação. Além de outros por menores.
Transitional – O código segue os padrões na maioria das vezes, mas podem haver deslizes.
Frameset – A página é estruturada utilizando frames.

Sem uma declaração, o navegador acaba interpretando a página ao seu modo, chamado de quirks mode, o que pode desconfigurar o layout totalmente.

Para trabalhar com o HTML, o aconselhável é o strict. A declaração padrão fica:

…

No HTML 5, a definição do DOCTYPE foi reduzida ao extremo. Se a página for estruturada com esta versão, basta declarar:

Elemento Meta Do HTML

Dentro do elemento head estão contidas informações gerais sobre a página. São as meta-informações, que tem mais significado para os navegadores e sistemas de busca do que para o usuário.Estas meta-informações possuem um elemento específico para serem declaradas, o meta.

Você pode informar quem desenvolveu a página, palavras-chave, uma breve descrição sobre o conteúdo, atualizar a página automaticamente após algum tempo (refresh), a codificação da página e por aí vai. Vejamos três dos atributos mais úteis para esta tag:

As duas primeiras linhas dispensam explicações e tem como objetivo os buscadores. Apenas uma observação sobre a segunda: devido a utilização para fins maléficos, a declaração de palavras-chave já é considerada desnecessária. Mas eu sempre coloco por garantia.

A última linha informa o tipo de conteúdo da página, que é HMTL e a codificação dos caracteres. Muitos problemas de acentuação nas palavras ocorrem devido à configuração desta linha.

De forma resumida, o ISO é preferencial para idiomas advindos do latim, caso do português, pois as palavras podem conter acentos. O UTF-8 é um padrão internacional que também pode ser utilizado em páginas com palavras acentuadas com tanto que os acentos sejam representados por entidades. Neste caso no código da página o “á” fica:

á

Em última análise também influencia a configuração do navegador do usuário.

No HTML 5 esta linha foi simplificada e passa a ser declarada assim:

Para uma lista mais completa dos atributos do elemento meta acesse: http://www.w3schools.com/tags/tag_meta.asp

Outra Mudança No HTML 5

Ainda no cabeçalho da página, a nova versão do HTML trouxe uma mudança na declaração dos estilos e scripts.

Agora não precisa declarar o type.

Esta mudança já pode ser aplicada às páginas ainda desenvolvidas com a versão 4 ou com XHTML.

HTML Para SEO

Em tempos do Rei Google, uma página além de parecer atraente para o usuário, precisa ser relevante para os mecanismos de busca. Livros e discussões a este respeito são muitos e até o número de vezes que a palavra-chave aparece no texto é contado para obter melhores resultados.

Sem o intuito de aprofundar o assunto, vou apresentar os atributos e elementos HTML mais relevantes na página quando o propósito é a otimização para os mecanismos de busca.

title (elemento): Começamos pelo cabeçalho da página. O elemento title tem o maior peso na definição da relevância da página em relação as palavras-chave. Parte-se do suposto de que se o desenvolvedor colocou no título da página a palavra é porque ela realmente é importante e faz parte do conteúdo.
title(atributo) : Utilizado principalmente em links, este atributo pode ser configurado para outros elementos também, como imagens. Quase sempre tem a palavra-chave.
h1-h6: Definem os títulos. Sendo que o h1 tem o maior tamanho de fonte padrão e é o mais relevante de todos. Englobe o título principal com esta tag e conforme a importância utilize os outros até chegar ao h6.
strong e italic: Em ordem de importância, as palavras negritadas vem logo depois dos cabeçalhos (h1-h6). As palavras em itálico completam a lista.
alt: Um texto alternativo a ser mostrado enquanto a imagem não carrega ou não foi encontrada é uma bem-vinda adição nos esforços para atingir bom posicionamento nas buscas.

A correta utilização destas tags por si só trará ganhos significativos de SEO.

HTML em Conclusão

A preocupação excessiva com intrigados modos de otimizar a página, às vezes nos faz esquecer do básico, que é o que realmente funciona. Se você tem alguma dúvida ou adição ao que foi escrito, não hesite em adicionar um comentário, será muito bem vindo!

HTML Básico é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital