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.
Seria interessante adicionar a meta description http://www.w3schools.com/html/html_meta.asp
Esta considero importante pelo fato de permitir informar um breve resumo do conteúdo da página em questão.
Falopa!
Muito bom Professor da segunda aula muito legal …
John, obrigado pela lembrança. Ainda estou me perguntando como deixei passar esta!
[...] atento, siga os padrões web, faça testes nos principais navegadores e seja [...]
Ola amigos…
Gostaria de saber o curso de Java gratuito,como funciona,tenho um pouco de conheciento em web,mas não em Java,sou webdesigner,mas não tenho muito conhecimento profissional,um abraço e aguardo resposta……
Ateciosamente Alex….
Excelente!! Bela iniciativa!
Comecei a aula hoje, e estou tendo problema em validar o código acima, mesmo redigitando como está dá alguns erros, finalmente cheguei a apenas 1 erro, só que tive de mudar o cabeçalho segundo a recomendação da W3 org. O que devo fazer já que será usado o site para checar os outros códigos??
grato e abs.
Estou fazendo um curso de XHTML e queria uma pagina como exemplo para eu estudar e ter uma noção basica.
Se alguem puder me enviar..
pfarbelow@terra.com.br
abs e obrigado
Poxa,,, esta página do tecnoclasta contém 130 erros conforme o validador w3c,,,,quer dizer que isto não importa???
Me pegou Ronaldo.
Mas não pense que não importa. Simplesmente meu site não é acessível em vários dispositivos. Já testei em um smartphone e ficou horroroso.
As falhas se devem ao template que usei no sistema WordPress que uso no blog, e aos scripts gerados pelas ferramentas de anúncios e outros widgets. Como aprendizado, tente corrigí-los. Faça o salvar como do navegador e arrume. Vamos ver como você se sai!
Olá , professor. Eu tenho quase todos os conceitos de HTML, mas não entendo o que significa , nas minhas páginas em html não as ponho; Qual é a importância desse codigo? e o que significa? e a diferença entre XHTML e HTML?? desculpe o incomodo
Corrigindo a minha pergunta anterior…
Olá , professor. Eu tenho quase todos os conceitos de HTML, mas não entendo o que significa <!DOCTYPE… , nas minhas páginas em html não as ponho; Qual é a importância desse codigo? e o que significa? e a diferença entre XHTML e HTML?? desculpe o incomodo
Indica a versão do padrão que o documento estará utilizando. Como Html foi sendo modificado com o tempo, foram definidos vários padrões. Para facilitar o navegador montar sua página conforme sua expectativa, a informação de DOCTYPE é essencial. O Internet Explorer 7.0 por exemplo, usa a informação de doctype, para determinar se ele irá usar um tipo ou outro de medidas de borda de blocos. Existem várias possibilidades como Html4.1 transactional, strict e frameset, Xhtml1. 0 transactional, strict e frameset e outros.
Olá, mestre!
Simplesmente não consigo salvar meu texto referente segunda aula, me diga qual foi o erro:
Aprendendo Java
Nem acredito que estou dando meu primeiro passo em Java!
tento salvar como: texto1*.html
Perdoe a minha inesperiência, mas ainda estou engatinhando e vou conseguir!
Como entro no fórum?
Muito obrigado!
Se bem que quando te passei este recado, funcionou, isto é, os símbolos sumiram ficando apenas a mensagem…
Caro professor,
Ao tentar fazer a validação do código ” O autor do documento.” no W3c.com, um erro persiste, apontando para a letra “O”, que antecede o autor. Qual o porquê desse erro.
Desculpe-me pela ignorância. Ainda sou incipiente.
Obrigado
Você colocou todo o cabeçalho que eu indiquei no primeiro exemplo desta página?
[...] Página Mínima XHtml [...]
muito bom explicar cada linha do html
estou gostando do curso
valew professor
um pouco complicadinho, mas aos poscos vou entendendo…
Olá, pesquisando na internet um curso gratuito sobre Java acabei encontrando esse e gostei muito. Já dei uma lida até a aula 5 em apenas duas horas. É que eu já conheco sobre HTML, não tudo, mas uma parte, mas acabei aprendendo coisa que eu não sabia. Farei a primeira prova e enviarei ao professor para correção. Estou ancioso pra chegar logo a parte de Java.
Parabéns pela inciativa do curso professor.
olha professor eu fui no validator de o congratulations ms quando abri o doc no firefox abriu so nomes era pra acontecer isso
Encontrei 163 erros no site do Terra!
Oi Professor, tudo bem??
Estou iniciando seu curso e também iniciando no mundo da programação. Esbarrei numa dúvida bem básica: estou usando o bloco de notas e não consegui salvar o texto com extensão *.html.
pode me ajudar?
Estou gostando muito do curso.
Obrigado
Escolha salvar como “*.*” e digite o nome completo nomedoarquivo.html.
Prof. como fazer para analisar um site que já está funcionando?? Como o Tecnoclasta, como pegar o codigo pra analisar?
Obsv.: Dúvida sobre exercicio.
Obrigada.
Para Validar:
Copie o endereço na barra de endereços. Esta página por exemplo é “http://www.tecnoclasta.com/2007/06/11/segunda-aula-pagina-minima-xhtml/”. Depois vá para validator.w3.org cole o endereço em “Address” e clique em Check.
Esta página por exemplo tem 129 Errors, 65 warning(s) devido às ferramentas externas de propaganda e estatísticas.
Para ver o código fonte:
Basta escolher Exibir/Código fonte no navegador.
Valeu Prof. Luís Eduardo, esto gostando muito das aulas.
professor eu não comseguie faser a minha primeira pagina pode me explicar com detalhes?
Descrição detalhada a partir de “Exemplo Prático”. Releia o artigo e depois identifique a parte que não está entendendo.
estou adorando o curso, mas estou tentando descobrir no http://www.w3c.com por que de erros no script sugerido e quando vou olhar ele exibe uma resposta que bem examinada, acaba não seno erro! quais são os poadrões atuais de script para o w3c? Obrigado pela oportunidade do curso. meu primeiro HTML (contrariando o W3C) deu certo e está salvo.
Adorei esse site e muito bom para min que quero aprender mais de html, xhtml. Muito boa aula.
Esse site é massa… Digitei um texto com algumas acentuações e salvei como .xml,
não sei se estou certo. Me informe se existe alguma diferença entre xml e .*html e ainda xhtm.
Desculpe sou iniciante em programação web.
Há sim só complementando… quando salvei o arquivo .xml ele não abriu por completo.
Ou seja, as letras acentuadas estão assim…
d� p�gna das informa��es profissionais de Dan�a
Trajet�ria Profissional: …
Trajet�ria Acad�mica.
Essas palavras sairam dessa forma gostaria de saber o porque.
Grato desde já,
Prof estou gostando muito das aulas parabéns pela sua iniciativa de nos fornecer estes conhecimentos
pois não tenho muitos recursos mais estou muito feliz em ter a oportunidade de aprender esta linguagem de programação, Deus te abençõe Professor Lúis Eduardo
olá
veja como que eu fiz
padrão html1
teste
na hora de validar ele da um erro, veja qual erro:
Sorry, I am unable to validate this document because its content type is text/plain, which is not currently supported by this service.
The Content-Type header is sent by your web server (or web browser if you use the file upload interface) and depends on its configuration. Commonly, web servers will have a mapping of filename extensions (such as “.html”) to MIME Content-Type values (such as text/html).
That you received this message can mean that your server is not configured correctly, that your file does not have the correct filename extension, or that you are attempting to validate a file type that we do not support yet. In the latter case you should let us know that you need us to support that content type (please include all relevant details, including the URL to the standards document defining the content type) using the instructions on the Feedback Page.
aguardo, abraços..
Parabéns!
Estou acompanhando este curso e entendendo com facilidade,
muito obrigado!
eu fiz a minha página de HTML fiz manualmente como explicado na aula e coloquei no validation result e deu o erro seguinte this document can not be checked
eu não entendi
se você puder me ajudar eu estarei grato
muito obrigado
Parabens, aulas gratuitas isso é muito gratificante, sou contador não entendo sobre como programar em java, mas estou em um projeto de desenvolvimento de programa em java, web, a um ano tendo como servidor a Locaweb, com pessoal contratado, o sistema de gerenciamento de empresa comercial e serviços, com controle financeiro, contas a pagar, receber, controle de estoque, nf. eletronico, operação de vendas, compras e contabil.
Olá…estou fazendo o curso e surgiu minha primeira dúvida. No caso do cabeçalho:
é padrão? ou seja, pode ser usado para qualquer página a ser contruída…ou varia de acordo com a necessidade? Se varia…como faço pra saber o q usar?
Obrigado…
olá, professor sou novo no curso mais quero lhe parabenisar pela inicitiva nesse mundo egoista ,tenho minha primeira duvida eu programo em html e nao faco todo esse cabecalho sera porque voce ta usando xhtml eu noa conheco ainda .desde ja meu muito obrigado.
Um título
olá , professor tudo bom curso maravilhoso esse mais a tag (br).
Professor, boa noite.
Primeiramente gostaria de lhe parabenizar pela iniciativa de ensinar gratuitamente algo que é tão requisitado nos nossos dias. Também sou professora e sei que pra fazer o que o senhor está fazendo tem que gostar muito da profissão.
Agora me tire uma dúvida: No exercício da aula três eu tenho que fazer o cabeçalho como está explicado aqui e só depois fazer o restante do exercício. Só quero confirmar se entendi certo……
beleza prof: estou apredendo á fazer um belo de site!!!
Saldação:
Quero agradecer ao professor. Ja consegui encontrar a primeira aula, encerrei a leitura neste instante.
Tendo acesso ao conteudo, irei fazer a reeleitura do texto para melhor interpretação e apredizado.
Sendo que; acredido que o professor entenda, para quem esta iniciando, deve aplicar bem para entender a linguagem digital. Sera que existe um dicionario que explique todos sinais e siglas como este exemplo aqui colei do propio texto.
Se me interrogar se sei o significado disto, não sei. Se tiver no inicio que me aplicar em digitar, como no exemplo acima, ficarei com mais segurança para o desenvolvimento do aprendizado.
O professor pode dar alguma orientação sobre esta duvida.
Obrigado.
Aloizio luz.
Complentando o cometário acima.
O exemplo o qual fiz a referencia, estava no comentário que enviei; interesante! não apareceu.
Irei digita agora, em vez de copiar e colar, veremos se ira sumir após enviar o comentário.
Obrigado
Desculpe a persistência.
O exemplo que usei do texto aciama; com obgetivo de mostrar a duvida que tenho, mesmo digitando ele não aparece, incrivel!
O professor poderia dar uma ajuda; uma explicação, sobre…
Agradeço.
Aloizio Luz.
gostei muito desta 2ª aula, estava precisando muito saber sobre…
Encontrei 9 erros no validator, mas já consegui corrigi-lós!
Pronto para a próxima aula!