Post on 29-Jun-2015
description
W3C, Versões, HTML5(X)HTML
Professor Jolvani
Aulas 28, 29 e 30
W3C, Versões, HTML – (x)HTML Olá prezados programadores de Interface,
codificadores html. A partir desse ponte, vcs podem dizer que já sabem programar em html...
Agora vamos ver alguns detalhes que permitem trocar alguns arquivos (código) html para xHtml.
Nesta aula vamos aprender sobre as versões existentes do html, o que são doctypes, validação e até certificação ref. ao conhecimento adquirido...
W3C, Versões, HTML – (x)HTML Nós apresentamos dois portais o W3C – www.w3c.org ou
www.w3c.br e W3Schools – www.w3schools.com, ele são mantidos pelo mesmo grupo.
Quem mantem os portais são os criadores e fundadores da Web, as pessoas que deram inicio as primeiras tecnologias web, os primeiros browsers, as pessoas que definiram com as tags iam funcionar, fazem sugestões para toda comunidade onde eles (indústria de hardware e software, ...) seguem os padrões da W3C.
E seguindo esses padrões vc terá a garantia que ele funcionará em todos os navegadores, será mais rápido. Então é bom aderir a web standards, ou seja, os padrões da web, já é estar em um outro nível de codificação...
A W3C trata muito mais do que html, além do html...
W3C, Versões, HTML – (x)HTML Coloca pagina W3C brasil e W3Schools. O Html é o básico do mundo web. Na W3C vc pode ver as
disciplinas que são tratadas para os web designer... www.w3c.br
Html + css JavaScript + Ajax Gráficos Intercionalização Acessibilidade Áudio e vídeo Dispositivos móveis Privacidade e Matemática na web Normartizadas pela W3C.
W3C, Versões, HTML – (x)HTML Na w3Schools encontramos materiais pra auxiliar vc estudante
de html, xhmtl, ajax, jquery, javascript divididos em categorias... Páginas em português que devem ser acessadas para agregar
conhecimento...
www.caelum.com.br www.k19.com.br www.maujor.com www.tableless.com.br Nessas páginas nos temos
tutorias em html e html5,
referências, exemplos e
Elementos para manipulação de medias
W3C, Versões, HTML – (x)HTML Falando de html, notamos que o mesmo possui varias
versões. Mas no site podemos ver html e html, dentro de html temos as versões 4.0 e o xhtml.
Observe as versões Podíamos programar as tags
em maiúsculo (html4), abrir
tag e não fechar, causando
Problemas. Então criaram o
Xhtml,H5. Por isso o cuidado de
sempre codificar em minúsculo e fechar as tags, atributos em minúsculo e valores dos atributos em aspas duplas. Existe uma série de vantagens em estar utilizando a formatação em xhtml e html5 (velocidade do navegador)
W3C, Versões, HTML – (x)HTML Se olharmos para as versões notamos que html5 foi criado
em 2012, e xhtml5 em 2013, os dois padrões estão recém se estabelecendo (em 2011 nem todos os browser suportavam html5)
O xhtml 1.0 é a versão estável suportada por todos os browser.
Veremos os DTDs
DTD – doctypes is mandatory Até o momento vimos a estrutura básica, sem o DTD A surpresa é que em xhtml devemos usar o doctype.
Doctypes e Validadores – (x)HTML – Aula 29
Doctypes e Validadores – (x)HTML – Aula 29 Pra que serve o doctype? DTD – Document Type Definition É o conjunto de definições para o tipo que estamos
construindo Informamos quais são as regras que devemos usar, ou
seja, o tipo de documento que quais são as regras pra validar o documento.
Doctypes e Validadores – (x)HTML – Aula 29 Tipos de Validadores?
Script
Transitional
FrameSet
Acessar -> http://www.w3schools.com/html/html_intro.asp
Doctypes e Validadores – (x)HTML – Aula 29 DTD é uma arquivo de validação
Script DTD mais rigoroso, não permite usar atributos depreciados, construir xhtml
perfeitamente como manda a norma w3c (desenv. Profissional). Deve usar css externo...
Transitional Dtd mais utilizado na web. Mais flexível, usa tag depreciadas e atributos
também, usa-se estilos dentro do html, é mais tranquilo para o desenvolvedor (
FrameSet Validador para quem usa frames, (já esta em desuso) não deve ser usado, por
isso não foi visto nessas aulas. Frames comprometem acessibilidade do portal.
Na prática os dois utilizados são script ou transitional. E a representação deles nos vimos nos slides anteriores (também no site) Espero que nenhum aluno use frameset. Como usá-los...
Doctypes e Validadores – (x)HTML – Aula 29 Vamos criar uma arquivo usando um editor xhtml... Exemplo TopStyle5.0
Observe que quando selecione xhtml 1.0 Transicional ele cria automaticamente o DTD.... E também adicionou xmlns informando qual o tipo de arquivo....
Observe também que é criado a estrutura básica do html. Crie um exemplo com html5....
Doctypes e Validadores – (x)HTML – Aula 29 Quando quer mudar as regras de validação eu altero o doctype isso em
xhtml....
Para exemplificar alterar nossa tag <p> eliminando o fechamento dela...
Observe que mesmo com a falta da tag o navegador carregou a página e apresentou o resultado (compensação). Esta correto?
Se usarmos assim o código e não verificarmos a sintaxe correta, de nada adianta usar o DTD. As ferramentas já possuem validador on-line use-o....
Veja o resultado.... Neste caso o validador irá acusar um erro na linha correspondente Também pode-se validar em... http://validator.w3.org/
Doctypes e Validadores – (x)HTML – Aula 29 Faça todas as validações no W3C
Código com 2 Worning(s)
Considerações (padrão de encoding) mas o código passou... Sempre que vc estiver construindo passam pelos
validadores. Agora vamos mudar o nosso DTD.... Para Script
(profissionais xhtml)
Doctypes e Validadores – (x)HTML – Aula 30
Vamos mudar para o dtd Script.... Podemos criar um documento novo com TopStyle e copiar o dtd
com o código html.
Coloque outra tag <p>simples</p> dentro do paragrafo e teste...
Na oportunidade de codificar em html, procurem ser exímios programadores....
Doctypes e Validadores – (x)HTML – Aula 30
Finalizando, se vcs usarem doctype procurem fazer a validação do código de vcs, do contrário nem usem doctype.
Doctypes e Validadores – (x)HTML – Aula 30
Próxima Aula: Certificação