18
W3C, Versões, HTML5 (X)HTML Professor Jolvani Aulas 28, 29 e 30

Aula 28,29 e 30 w3 c, versões, html5

Embed Size (px)

DESCRIPTION

Aulas HTML

Citation preview

Page 1: Aula 28,29 e 30   w3 c, versões, html5

W3C, Versões, HTML5(X)HTML

Professor Jolvani

Aulas 28, 29 e 30

Page 2: Aula 28,29 e 30   w3 c, versões, html5

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...

Page 3: Aula 28,29 e 30   w3 c, versões, html5

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...

Page 4: Aula 28,29 e 30   w3 c, versões, html5

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.

Page 5: Aula 28,29 e 30   w3 c, versões, html5

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

Page 6: Aula 28,29 e 30   w3 c, versões, html5

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)

Page 7: Aula 28,29 e 30   w3 c, versões, html5

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

Page 8: Aula 28,29 e 30   w3 c, versões, html5

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

Page 9: Aula 28,29 e 30   w3 c, versões, html5

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.

Page 10: Aula 28,29 e 30   w3 c, versões, html5

Doctypes e Validadores – (x)HTML – Aula 29 Tipos de Validadores?

Script

Transitional

FrameSet

Acessar -> http://www.w3schools.com/html/html_intro.asp

Page 11: Aula 28,29 e 30   w3 c, versões, html5

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...

Page 12: Aula 28,29 e 30   w3 c, versões, html5

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....

Page 13: Aula 28,29 e 30   w3 c, versões, 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/

Page 14: Aula 28,29 e 30   w3 c, versões, html5

Doctypes e Validadores – (x)HTML – Aula 29 Faça todas as validações no W3C

Código com 2 Worning(s)

Page 15: Aula 28,29 e 30   w3 c, versões, html5

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

Page 16: Aula 28,29 e 30   w3 c, versões, html5

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

Page 17: Aula 28,29 e 30   w3 c, versões, html5

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

Page 18: Aula 28,29 e 30   w3 c, versões, html5

Próxima Aula: Certificação