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.