Sejam bem vindos, esta é a quarta aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java – CPW

Na última aula estudamos um pouco com o que podemos preencher o conteúdo de uma página xHTML. Hoje vamos ver mais alguns detalhes. Vamos ver o que torna a Web uma Teia de Aranha, e como deixar uma página mais “quadradinha”.

Links e Âncoras

Direto ao primeiro assunto. O que torna a internet uma Teia de Aranha, são os links. Todo mundo que já navegou alguma vez na vida na internet sabe que todos estes textos com um sobrescrito embaixo e normalmente em azul, quando clicados te levam a um outro conteúdo da internet. Tudo automaticamente.

Fácil clicar, mas como fazer? Nada mais simples, quando se escreve uma página xHtml, para construir um link basta indicar para onde irá com o código abaixo:

<a href=”http://www.tecnoclasta.com/“>Ir para Tecnoclasta</a>

O texto em itálico indica o local que o navegador irá carregar no momento que o usuário clicar no link, em negrito está o texto que o usuário verá: Ir para Tecnoclasta.

Pode-se apontar para uma página específica de um site:

<a href=”http://www.tecnoclasta.com/category/aula-cpwj/“>Ir para o histórico das Aulas do CPWJ</a>

Na verdade é possível ir até uma posição específica da página. Por exemplo diretamente no formulário de contato da página de anúncio do Curso de Programação Web:

<a href=”http://www.tecnoclasta.com/2007/10/01 /curso-gratuito-de-programacao-para-web-em-java/#respond“>Comentários do Anúncio do Curso</a>

Observe que utilizamos o símbolo #respond para indicar uma posição dentro de outra página. Se a posição se referisse a algo dentro da própria página:

<a href=”#respond“>Comentários do Anúncio do Curso</a>

Na página de destino é preciso definir onde fica os comentários. Utilizamos uma âncora:

<a name=”respond”>Local onde se quer ir</a>

Nos casos em que a posição na página de destino é um título marcado com ‘hn’, ou mesmo um parágrafo ou qualquer objeto específico, pode-se usar o parâmetro ‘id’. Veja que no exemplo da página de anúncio a posição ‘respond’ está definida assim:

<h4 id=”respond”>Envie um comentário</h4>

Isso é o básico do básico de links e âncoras, voltaremos a apresentar mais detalhes conforme a necessidade do curso.

Aprofunde sobre links seguindo o padrão em: http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html

Tabelas

Tabelas já foi o único recurso para construir páginas html com aparência profissional. Para montar layout de páginas cada vez mais elaboradas e detalhadas ainda é uma ferramenta muito usada, embora não recomendada.
Porém hoje existem outros recursos mais avançados para isso (css). Se quizer se livrar das tabelas em layout de página, use e abuse de http://www.tableless.com.br.

Portanto, volto a insistir: xHtml é para conteúdo, não aparência. E Tabelas são somente para construir coisas assim:

Notas da Turma

Número	Nome	Notas
001	Maria	10,0
002	José	0,4
003	Carlos	0,8
004	Elaine	10,0

Somente para isso, ok?

Para fazer basta o seguinte código:

<table>
<caption>Notas da Turma</caption>
<tr><th>Número</th><th>Nome</th><th>Notas</th></tr>
<tr><td>001</td><td>Maria</td><td>10,0</td></tr>
<tr><td>002</td><td>José</td><td>0,4</td></tr>
<tr><td>003</td><td>Carlos</td><td>0,8</td></tr>
<tr><td>004</td><td>Elaine</td><td>10,0</td></tr>
</table>

Vamos analisar cada pedaço do código:

<table> Indica início e fim da tabela
<caption> Um título para a Tabela.
<tr> Indica início e fim de cada linha. Observe que os dados de células ficam dentro de uma linha
<th> Uma Célula de Cabeçalho (head). O título de uma coluna, por padrão já vem em negrito e centralizado.
<td> Uma Célula de Dados. Delimita cada informação da tabela

Temos ainda os parâmetros rowspan e colspan, que são usados para gerar algo parecido com o “mesclar” células do Word e Excel. A diferença aqui é conceitual: duas células não são mescladas, mas uma célula é que é esticada.

Exemplos de usos semânticos para colspan:

Notas da Turma

Número	Nome	Notas
001	Maria	10,0
002	José	0,4
003	Carlos	0,8
004	Elaine	10,0
Média da turma		3,73

Veja que a última linha da tabela temos somente 2 células: “Média da Turma” e “3,73″, sendo que a primeira célula nós esticamos para ocupar duas colunas. O código:

…
<td>Elaine</td>
<td>10,0</td>
</tr>
<tr>
<td colspan=”2″>Média da turma</td>
<td>3,73</td>
</tr>
</table>

Muito simples. Podemos fazer o mesmo com as linhas:

Notas da Turma

Turma CPWJ	Número	Nome	Notas
	001	Maria	10,0
	002	José	0,4
	003	Carlos	0,8
	004	Elaine	10,0
	Média da turma		3,73

Neste caso nós incluímos uma nova célula na primeira linha e esticamos 6 linhas para baixo:

<table border=”1″ height=”109″ width=”304″>
<tr>
<th rowspan=”6″>Turma CPWJ</th>
<th>Número</th>
<th>Nome</th>
<th>Notas</th>
</tr>
<tr>
<td>001</td>
<td>Maria</td>…

Aprofunde sobre Tabelas seguindo o padrão em:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

Imagens

A Web é rica em imagens. Para inserir imagem em um documento xHtml, é preciso que a imagem esteja disponível na internet através de um endereço:

http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg

Como estamos fazendo testes localmente as imagem devem ser colocadas no mesma pasta do arquivo xHtml em que será inserido. Depois é só incluir uma referência no xHtml:

<img src=”harmony.jpg” />

Em caso de referência em outro servidor ou em algo publicado na net, devemos usar o endereço completo:

<img src=” http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg” />

Imagens devem estar dentro de parágrafos ou outros blocos para serem validadas.

Dois parâmetros são altamente recomendados:

• alt – Define um texto alternativo caso o dispositivo não possa carregar a imagem (celulares ou navegadores texto). Usado pelo Internet Explorer como ajuda (hint) em amarelo quando paramos com o mouse sobre a imagem. Obrigatório para Strict.
• title – Define um título para a imagem. Usado pelo navegador para identificar a imagem. No firefox é usado como ‘hint’.

<img src=”imagem.jpg” alt=”Imagem de jacaré” title=”Imagem de jacaré” />
Aprofunde sobre imagens seguindo o padrão em:

http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2

E é isso!

Já estamos encerrando o básico de xHtml. Na próxima aula iremos começar a ver CSS, que permite mudar o comportamento e aparência padrão dos tags que já vimos.

Vários outros tópicos de xHtml serão aprofundados junto com Css, Javascript, Jsp, conforme forem necessários. O objetivo até agora é escrever páginas xHtml com o conteúdo bem básico, usando links, tabelas e listas que sejam validadas no W3c validator.

Dica para alunos que conhecem Html ou usam outras fontes de referência. Para a validação xHtml Strict não é permitido o uso dos tags e parâmetros “Deprecated”. Uma lista completa de “Deprecated” você encontra no site do Maujor.

Exercícios

Vamos fazer um exercício bem completo desta vez. Copie o texto abaixo e faça uma página xHtml completa validada no W3c:

Lançamento: Discovery construindo a ISS <<Título de nível1

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-001.thumbnail.jpg

Este artigo faz parte da cobertura de Tecnoclasta para a missão STS-120 do Ônibus Espacial Discovery.
Mais notícias em:

<<fazer uma lista não numerada>>
* Lançamento: Discovery construindo a ISS http://www.tecnoclasta.com/2007/10/24/lancamento-discovery-construindo-a-iss/
* Discovery: Casco checado, aproximando da ISS http://www.tecnoclasta.com/2007/10/25/discovery-casco-checado-aproximando-da-iss/
* Discovery: Docagem na Estação Espacial http://www.tecnoclasta.com/2007/10/25/discovery-docagem-na-estacao-espacial/
* Discovery: Curiosidades da missão STS-120 http://www.tecnoclasta.com/2007/10/26/discovery-curiosidades-da-missao-sts120/
* Harmony: já instalado na Estação Espacial http://www.tecnoclasta.com/2007/10/26/harmony-ja-instalado/

Foi executado com sucesso o lançamento da Discovery ontem dia 23/10/2007 às 13:38 horário de Brasília. Esta viagem tem como missão a continuidade da construção da Estação Espacial Internacional.

Chamada STS-120 é o vigéssimo terceiro vôo para construção da IIS e o 120º vôo de ônibus espaciais.

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-011.jpg

Lançamento da Discovery para a Missão STS-120 em 23/10/2007

Será instalado o módulo Harmony de construção italiana, que será utilizado para interconectar os futuros módulos Japoneses e Europeus à estação. Também será reposicionado um painéis solares para a posição definitiva.

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/182721main_harmony_iss_small.jpg

Módulo Harmony: conectando os futuros módulos com a Estação Espacial

Veja o cronograma de atividades na missão STS-120:
<<fazer uma tabela>>
dia atividade
1 lançamento
2 verificação do escudo de proteção térmica
3 preparação para primeiro EVA
4 instalação do módulo Harmony na Estação
6 preparação para segunda EVA
5 desconecção da estrutura P6 de painéis solares
7 preparação para terceira EVA
8 reconeção da estrutura P6 de painéis solares na sua posição deficitiva

Conforme o andamento da missão teremos novos posts.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML, Livros JSP ou Celularesnas melhores lojas do Brasil.

Sejam bem vindos, esta é a terceira aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java – CPWJ

Na última aula estudamos como montar uma página Xhtml de acordo com o Web Standard. Hoje vamos ver o que podemos colocar no body, isso é, o que é permitido fazer no conteúdo da página.

>>>>Parênteses >>>>>>>>

Amigo Web Designer presente no curso: fique atento. Estamos utilizando o padrão Web, ou Web Standard. Existem muitas vantagens em utilizar o padrão diante de todos os recursos despadronizados presentes nos navegadores mais utilizados pelo mercado. A principal é a facilidade de portar o código para vários outros navegadores mais simples, como os presentes em celulares, e outros equipamentos. Falaremos também sobre Tableless, pode começar lendo um FAQ.As regras de utilização de xHTML de acordo com o padrão é muito mais restrita. Então atenção aos detalhes.

<<<< Fecha parênteses <<<<

Voltando ao conteúdo. Em primeiro lugar, os tags permitidas no bloco body tem por objetivo indicar o tipo de informação ali colocada. Repetindo: explicar o tipo da informação.

Desde a versão 4.01 do HTML a aparência não é objetivo do HTML. Então esqueçam da aparência do documento neste momento. O que vamos fazer no (x)HTML é indicar o que é um bloco de texto de forma semântica. Para aparência usaremos CSS.

Um bloco de texto na página Html pode ser uma porção de coisas:

• Um parágrafo
• Um título
• Uma lista, ou um ítem de uma lista
• Uma citação
• Um endereço
• Código de programação
• Texto predefinido
• Texto enfatizado
• etc.

Observe novamente, todos estes indicadores são nomes de coisas lógicas em uma página html. Não indicam nunca a aparência. É claro que uma lista na sua cabeça tem uma determinada aparência. Mas em Xhtml indicar que um bloco de texto é uma lista, tem exatamente este objetivo: indicar que é uma lista. A aparência é conseqüência.

Vamos começar com as coisas simples.

Parágrafos

Em xHtml todo o texto corrido como este que estou escrevendo deve ser delimitado com o tag ‘p’. Desta maneira:
<p>Este é o primeiro parágrafo. Veja que uma frase na mesma linha não deve ser delimitada. Um parágrafo é diferente de uma frase, ok?</p>

<p>Veja que este é o segundo parágrafo. A aparência padrão de parágrafos já coloca um pequeno espaço entre parágrafos. Isso é configurável via CSS, aliás toda a aparência é.</p>

Títulos

As páginas Web são recheadas de títulos. Como estes títulos aí em cima: “Parágrafo”, “Títulos”, “Terceira Aula: Classificando o conteúdo”. Observe que existem títulos e subtítulos. No caso deste artigo, “Parágrafo” é um subtítulo de “Terceira Aula….”

Para permitir a construção de títulos e subtítulos o xHtml permite a utilização de até 6 níveis de títulos: ‘h1′, ‘h2′, ‘h3′, ‘h4′, ‘h5′ e ‘h6′. O nível 1 é para os títulos mais importantes da página e ou os outros devem ser usados para caracterizar subtítulos.

Neste site Tecnoclasta (http://www.tecnoclasta.com), por exemplo, o nome do site no topo da página tem título de nível 1: <h1>Tecnoclasta</h1>, os títulos dos artigos tem título de nível 2: <h2>Terceira Aula: Classificando o conteúdo</h2>, os títulos das sessões a direita, nível 3: <h3>Assine Tecnoclasta</h3>, e por fim os subtítulos dentro de um artigo tem nível 4: <h4>Parágrafos</h4>.

Observe que a hierarquia de títulos é construída de acordo com a importância relativa de cada uma das informações, não tem nenhuma relação com aparência. De novo: esqueça a aparência por enquanto.

Listas

Outro tipo de informação comum em uma página web são as listas. Listas existem dois tipos: numeradas e não-numeradas. As lista não numeradas usam dois tags ‘ul’ (unordered list) e ‘li’ (list item), respectivamente para delimitar a lista, e o ítem da lista. Para cada ítem da lista ele coloca um marcador, que pode ser uma seta ou bolinha. Assim:

<ul> use este para o ínício

<li>primeiro item da lista</li>
<li>segundo item da lista</li>
<li>terceiro item da lista</li>

</ul> e este para o fim da lista

Resultado:

• primeiro item da lista
• segundo item da lista
• terceiro item da lista

As listas numeradas automaticamente incluem números antes de cada ítem da lista. Funcionam igual a lista não-numerada. No exemplo anterior trocando ‘ul’ por ‘ol’ (ordered list) obteríamos:

1. primeiro item da lista
2. segundo item da lista
3. terceiro item da lista

Não é necessário digitar os números.

Listas de Definição

Em várias situações precisamos construir uma lista de definições, como num dicionário. Em uma lista de definições nós temos os termos a serem definidos e temos cada uma de suas definições. Para construir uma lista de definição temos 3 tags:

‘dl’

De definition list, delimita o início e fim da lista

‘dt’

Delimita cada um dos termos da lista

‘dd’

Delimita cada defininição da lista

A própria lista acima foi construída em forma de lista de definição. Veja o código:

<dl>
<dt>’dl’</dt><dd>De definition list, delimita o início e fim da lista</dd>
<dt>’dt’</dt><dd>Delimita cada um dos termos da lista</dd>
<dt>’dd’</dt><dd>Delimita cada defininição da lista</dd>
</dl>

Endereços

Indicar o endereço de um local:

<address>Este é meu endereço</address>

Citações

Quando citamos o texto de um livro, site ou mesmo uma frase de outro autor utilizamos a tag ‘cite’: <cite>Ser ou não ser, eis a questão.</cite>

Uma segunda maneira de fazer citações é utilizar o tag ‘q’ de quotation ou cotação. Este tag automaticamente <q>”coloca um texto entre aspas”</q>. Porém não é reconhecido pelo Internet Explorer (os testes do aluno Fábio Costa nem no IE7 funciona. Testes do aluno Cristian indicaram que no Ie8 está ok). Portanto dê preferência ao ‘cite’ e ao ‘blockquote’.

Para blocos de citações mais longas com parágrafos inteiros temos ainda o tag ‘blockquote’. Observe que ele exige um ou mais blocos dentro:

<blockquote><p>Esta citação inclue mais de um parágrafo</p>
<p>Este é o segundo parágrafo da citação</p></blockquote>

Sem os tags ‘p’ dentro do blockquote o código não é validado.

Para os tags ‘blockquote’ e ‘q’ é opcional indicar quem é o autor da citação. Use o parâmetro ‘cite’:
<q cite=”Einstein”>A velocidade da luz é igual para todos os referenciais inerciais.</q>

O texto em ‘cite’ não é mostrado, mas fica armazenado para o robô dos sistemas de busca.

Código

Código de programação é um dos tipos de informação mais comuns em sites. Este site mesmo está repleto de códigos. Para indicar que algo é código temos o tag ‘code’:
<code>
for(i=0;i<10;i++){
System.out.println('contar até 10: '+i);
}
</code>

Ênfase e ênfase forte

Para destacar uma frase ou palavra no meio de um parágrafo temos duas opções: utilizar de ênfase ou de ênfase forte. Os tags são, respectivamente, ‘em’ e ‘strong’:

<p>Isso é um parágrafo. Isso é <em>importante e deve ser destacado</em>. No entanto isso é <strong>ainda mais importante e deve ser ainda mais destacado.</strong></p>

Observe que a aparência padrão para ‘em’ é o itálico e ‘strong’ é o negrito. Mas isso é o padrão e podem ser modificados via CSS. Textos enfatizados devem fazer parte de um parágrafo, ou outro tipo de bloco, como code, cite, etc.

Texto pré-tabulado

Para entender este ‘tag’, temos que aprender a forma que o navegador lida com espaços, enter e tabs. Estes caracteres são descartados, desprezados pelos navegadores e substituídos por um espaço. Assim uma porção de espaços, tabs e enters, viram um espaço:

Uma tabela digitada assim (pontos são espaços):

Nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5<enter>

Seria apresentada pelo navegador assim:

Nome.n2.n2.média.José.4,0.5,0.4,5

Para colocar textos com tabulação definida por espaços, utilizamos o tag ‘pre’. Exemplo:

<pre>
nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5
</pre>

Desta maneira iria funcionar conforme o esperado. Isso é, com os espaços e retorno de linha apresentados.

Sobrescrito e Subscrito

Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags ‘sub’ e ‘sup’:

H₂SO₄ : H₂S0₄.
a²= b²+c² : a²=b²+c²

Por hoje é só. Na próxima aula vamos lidar com links, tabelas e blocos, e por incrível que pareça iremos terminar XHTML. Formulários vai ficar para um momento mais adequado do curso. (quando vermos javascript).

Quero lembrar que o curso não tem intenção de esgotar o assunto com todos os detalhes, mas dar o pontapé inicial, e indicar material para aprofundamento. Fazer o básico bem feito, para conseguir acompanhar o vasto material disponível na net, esta é a visão.

Exercitando

• Para exercitar a matéria apresentada, vamos treinar a codificação copiando todo o conteúdo deste artigo para um editor de texto comum e montando uma página Xhtml. Esqueça por enquanto os links. Validar no validator do W3C.
• Se você tem algum site de sua autoria, refaça uma das páginas utilizando unicamente os tags apresentados nesta aula, e outros definidos nos dois links apresentados em aprofundando. Valide.

Aprofundando

Estudar o padrão do W3c:

• http://www.w3.org/TR/html401/struct/text.html
• http://www.w3.org/TR/html401/struct/lists.html

Cuidado: não considerar os tags e atributos marcados como DEPRECATED.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros JSP nas melhores lojas do Brasil.

1

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.

killshot divx

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.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros JSP nas melhores lojas do Brasil.