Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

#1 Sex Jul 12, 2013 11:26 pm

Sherlock Holmes

Sherlock Holmes
Administrador
Administrador
Quando se começa um documento HTML, a primeira coisa com a qual nos deparamos é a declaração DOCTYPE. Analise a que usamos nos documentos atuais:



Na versão 5, basta apenas colocar:



E já está feita a sua declaração DOCTYPE. Legal, não? Em geral, o inicio de um documento HTML 5 ficou muito simplificado, facilitando a nossa vida e não precisando decorar tudo aquilo que as versões anteriores pedem. Exemplo:





Que diferença em relação às versões anteriores. Uma outra modificação em relação a versão anterior (HTML 4), é a introdução de tags semânticas, na verdade se você já está acostumado a colocar semântica em seu código, utilizar as tags atribuindo nomes referentes ao conteúdo, você irá se adaptar facilmente ao HTML 5. Vejamos uma pequena estrutura convencional:








Se você já está acostumado a criar uma estrutura mais ou menos assim, separando por seções utilizando DIV’s, o HTML 5 introduziu novas tags. Então vamos lá. Veja o código HTML feito na versão 5, e logo abaixo confira a explicação e função de cada uma TAG.





Título da Página




Logomarca









Titulo


Subtitulo






Titulo 2


Texto do conteúdo – Texto do conteúdo




Titulo 3


Texto do conteúdo – Texto do conteúdo





Todos os direitos reservados






Análise:
Para separarmos por seções agora, foi criada a tag < section >. Mas isso não quer dizer que, tudo que for div colocaremos essa nova tag. A section será a tag que irá representar a seção, para cada parte do seu código haverá uma seção como topo, menu, rodapé e é para cada uma delas que a tag section foi feita. Logo em seguida vemos a tag < header >, essa tag significa o inicio de uma seção, nesse caso o topo. Dentro da tag header, podemos colocar a logomarca como no exemplo acima, um campo de busca por exemplo. Abaixo vemos a tag < nav > que é onde ficará a principal barra de navegação do site, o famoso menu. Em seguida vem a tag < article > como o próprio nome já diz, é a tag onde ficarão os artigos de um blog pessoal por exemplo. Para agrupar as tags < H1 >< H2 >, foi criado o < hgroup > e por fim, a tag < footer > significa o final de uma seção, nesse caso o rodapé do site. 

Este é um exemplo bem simples de um código feito em HTML 5, como vocês podem ver não é um bicho de sete cabeças, não é mesmo? Claro que foram feitas mais funções nessa nova versão, como o campo input type=”email”, para formulários que passem o email e muitas outras funções que aos poucos eu estarei ensinando pra vocês. 

Vale ressaltar que somente as versões mais atuais dos navegadores possuem suporte a essa versão, muitos já me perguntaram se já é viável começar a trabalhar com o HTML 5, isso vai variar muito por enquanto, vai depender do seguimento do site. Se for para clientes, visto que muitos ainda usam o IE 6 (infelizmente) por ser prejudicial e posteriormente você terá problemas com a visualização do site. Mais, nada impede de você utilizar um pouquinho do HTML 5 em sua página pessoal.

Fontes tirada do site --> http://www.oficinadanet.com.br/

#2 Sáb Jul 13, 2013 1:05 pm

Atrios

Atrios
Fundador
Fundador
Obrigado por compartilhar!


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permisos de este foro

Permissões neste sub-fórum
Não podes responder a tópicos