Este documento discute o W3C, versões do HTML e XHTML. Resume as aulas 28, 29 e 30 sobre introdução ao HTML e XHTML, detalhes para converter arquivos HTML para XHTML, e versões do HTML como HTML5 e XHTML5. Também discute doutypes, validação de código e editores XHTML.
2. 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...
3. 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...
4. 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.
5. 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
6. 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)
7. 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
8. Doctypes e Validadores – (x)HTML – Aula 29
DTD – doctypes is mandatory
Até o momento vimos a estrutura básica, sem o DTD
A surpresa é que em xhtml devemos usar o doctype.
9. 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.
11. 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...
12. 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....
13. 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/
14. Doctypes e Validadores – (x)HTML – Aula 29
Faça todas as validações no W3C
Código com 2 Worning(s)
15. Doctypes e Validadores – (x)HTML – Aula 30
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)
16. 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....
17. 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.