Sejam bem vindos, esta é a segunda aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web
O conteúdo da Web precisa estar codificado segundo um padrão. A partir da aula de hoje vamos estudar o padrão mais atual para codificação Web: o XHTML.
Este é um documento mínimo codificado em Xhtml 1.0 padrão:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Um título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Vamos analisar as partes importantes:
1, 2, 3 doctype: indica a versão do padrão que estará utilizando. Existem várias possibilidades como Html4.1 transactional, strict e frameset, Xhtml1.0 transactional, strict e frameset e outros. No nosso caso usaremos o padrão Xhtml Strict 1.0. Teremos uma aula só para conhecer os outros padrões.
4 e 11 html: download toy story marcador (tag) que indica o início efetivo da página html. As propriedades xml:lang e lang indicam a língua em que o documento está escrito. Use “pt-br” para português do Brasil. “en” para inglês.
5 e 8 head: bloco de cabeçalho. Dentro deste bloco iremos colocar as informações importantes sobre a página. Estes dados ajudarão os navegadores montarem o conteúdo de maneira que foi planejada pelo programador. E os motores de busca do google e outros obter informações para posicionar sua página corretamente. Os conteúdos colocados aqui não serão mostrados diretamente na página do navegador.
6 title: títudo da página. Texto que será colocada na barra de título do navegador e usada pelos motores dos buscadores para nomear o conteúdo de sua página.
7 meta content-type: indica detalhes de codificação de caracter para o navegador.
9 e 10 body: corpo ou conteúdo da página. Tudo que você quizer mostrar na área principal do navegador estará dentro deste bloco.
Todos os ítens apresentados são obrigatórios em uma página Xhtml padrão.
Exemplo Prático
Vamos fazer um exemplo prático que realmente funciona?
Para isso utilize um editor de texto simples: gedit, kedit, bloco de notas, vi, etc. No exemplo falta preencher alguma coisa dentro do bloco body:
... (todo o cabeçalho igual ao exemplo acima) <body> <p>Olá Mundo! Esta é minha primeira página XHTML padronizada e funcional.</p> </body> </html>
Salve o documento com extensão *.html. E pronto.
-Tag <p> delimita um parágrafo do documento. Cada um dos parágrafos devem ser delimitados individualmente.
Para ver como ficou sua primeira página abrir o arquivo com os navegadores Firefox e Ie:
Ie:
Arquivo/Abrir/Procurar…
Localizar o arquivo criado e clicar Abrir.
Firefox:
Arquivo/Abrir Arquivo…
Localizar o arquivo criado e clicar Abrir.
Para ambos existe um atalho de teclado: CTRL+O. (que funciona melhor no Firefox)
Você deverá ver no navegador o texto digitado entre os tags <p> e </p>. Nossos exercícios em xhtml serão todos testados desta maneira.
Para verificar se você seguiu corretamente o padrão, existe uma ferramenta online que faz o teste de conformidade. Entre em validator.w3.org selecione o seu arquivo e clique em “Check”. Se tudo estiver certo verá a mensagem “Congratulations”. No caso de erro o sistema apresenta o que você fez de errado. Corrija o que ele pediu e tente novamente.
Guarde o endereço do “Validator” no seu favoritos. Será necessário durante todo o curso.
Algumas regras para conseguir a validação:
- Os caracteres maiúsculos e minúsculos são obrigatoriamente como apresentados. (HTML <> html)
- Cuidado com o final do tag meta: …harset=iso-8859-1″ /> Observe que depois das aspas usamos espaço, barra e maior. O espaço é obrigatório.
- Cuidado ao usar o Ctrl+c e Ctrl+v do navegador: verifique que todas as aspas ” estão trocadas por aspas inglesas. Apague e use a aspa dupla que fica próxima ao número 1 do teclado. Recomendo pelo menos uma vez você mesmo digitar todo o código para se acostumar. Isso ajuda muito na memorização.
- Todo o resto é obrigatório.
Dúvidas até aqui? Corra para o fórum. (eu estarei lá somente terça, mas tem os moderadores)
Mais dados no cabeçalho.
No cabeçalho ou Head podemos colocar uma série de informações sobre o documento. Com estes dados o navegador e os sistemas de busca podem entender melhor o conteúdo do documento. O título do documento é a principal informação do cabeçalho. Porém com o tag meta podemos definir uma série de outras informações úteis:
<meta name=”author” content=”Prof. Luís Eduardo” /> O autor do documento.
<meta name=”copyright” content=”© 1996 Indústria Ltda ” /> Questões de copyright
<meta name=”keywords” content=”trabalho,mudanças,java” /> Importantíssimo: palavras chave para o motor de busca do Google e Yahoo.
<meta name=”date” content=”1994-11-06T08:49:37+00:00″ /> Data de criação formatada conforme orientador [RFC2616 sessão 3.3]
<meta name=”description” content=”Roteiro da Aula número 2″ /> Descrição do conteúdo da página
… você utiliza outra meta que julga importante? divulgue no fórum.
>>> Corrigido: a meta keywords é no plural.
Exercícios:
- Monte uma página completa e validada no W3.org com o conteúdo pedido na última aula.
- Caso tenha alguma página html de sua autoria que esteja fora do padrão Xhtml, identifique os problemas usando o validador e corrija o cabeçalho. (Apague o conteúdo todo antes de tentar validar. Corrigir o conteúdo fica para outra aula, ok?)
- Faça o mesmo com uma página de algum site famoso. (que tal o Tecnoclasta?)
Aprofundando:
- Leia as sessões 7.3 e 7.4 do padrão. (em português aqui) Atenção: Os ítens marcados como “Deprecated” não são aceitos no padrão Xhtml Strict que estamos adotando neste curso.
Para a próxima aula:
- Planeje um texto bem completo com títulos, tabelas, listas. Vamos fazer tudo isso semana que vem. Ainda não escreva código html. Faremos após a próxima aula.
juroo que estoou tentando, maiis ainda não enteendi quase nada :S KKKKK #ehserio
Professor, copiei os codigos colei no bloco de notas, salvei como html mas nao deu certo… abre no IE só o codigo como esta no bloco de notas. nao to conseguindo :/
Eu pelo menos segui, e pude perceber um pouco, consegui criara a pagina mas, so abre no firefox, no internet explorer abre como texto normal, tentei validar nao foi possivel, recebi uma mensagem de erro. preciso de ajuda.
O PROGRAMA W3C QAPONTOU O SEGUINTE ERRO ERROR(S)BLOCKING VALIDATION EU NÃO ENTENDI PORQUE EU NÃO SEI INGLES
Muinto bem esplicado consegui tudo certinho e fiz o teste e deu congruations.
Infelizmente não estou conseguindo nem salvar, por favor me dê uma dica.
Agora sim ……começei a usar um programa que tenho aqui, o Adobe Dreamweaver ja achei algumas ferramentas que estão me ajudando, valeu Ótima Aula!!!!
não foi desta vez
Não consegui apareceu essa mnsg de erro:
”Desculpe, este tipo de esquema de URL ( “file” ) não é suportado por este serviço. Por favor, verifique se você digitou o URL corretamente.
URLs deve ser na forma: http://validator.w3.org/ ”
então eu coloquei o ‘validator’ que pediram, mas aparece a mesma mensagem.
Bom eu fiz um blogger mas eu não estava satisfeito com o template dele, então fui lá e coloquei um novo template, o problema é que neste novo template só tem um espaço para Gadgets, que é na lateral esquerda, queria saber como adicionar um outro espaço encima ou do lado direito.
Se puder responder ficarei grato.
Ou também em baixo!
Até agora tudo dando certo, só não entendi porque um exercício para montar uma página validada no W3.org se logo abaixo é dito para não programarmos nada em HTML pois isso será feito a partir da próxima aula…
Tudo perfeito por aqui.
Estou usando o Notpad++. Até aqui tudo ok!
Bela iniciativa. Precisamos de mais pessoas como você em nosso país, certamente seriamos mais desenvolvidos.
Parabens.
Tudo certo!!!
Tenho seguido este programa sobre HTML, vou agora passar para a terceira aula e não tenho tido dúvidas de maior tenho lido muito e uso o Dreamweaver CS4 para fazer os trabalhos.
Estou lendo, mas ainda não tentei fazer nada. Mesmo assim lhe parabenizo pela iniciativa!
Obrigada pelas aulas!!
E Feliz Ano de 2012!!!
Professor, tudo ocorreu bem até a validação ele implica com com o sinal de maior que esse é antes do.
Professor, tudo ocorreu bem até a validação ele implica com o sinal de maior que do body que fica antes do p.
Poxa gostei muito da aula,sou estudante de sistemas de informação essas aulas vão me ajudar muito,
parabéns professor!