Quarta Aula: Links, Âncoras, Tabelas e Imagens

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.

Tags: , , ,

Outros Artigos:

38 comentários para “Quarta Aula: Links, Âncoras, Tabelas e Imagens”

  1. claudio Sousa disse:

    Quero agradecer a ao belo trabalho que está sendo com esse aulas. Muito bem explicadas. Não problema nenhum em resolver os exercicios.
    Sou de Fortleza – Ce. Fiz até o terceiro semestre de progração em Faculdade Particular. Atualemnte, faço Design de Grafico, que gosto muito, mas não deixei o gosto pela programação. Então encontrei esse site com essas aulas e me voltou a vontade de aprender mais.
    Estou na quarta aula Curso Gratuito de Programação para Web em Java.

    Mais ums vez parabens pela sua iniciativa!!

    abraço!!!

  2. Rafael disse:

    Boa tarde professor, estou fazendo este exercício no curso mais quando eu mando para validar dá erro nas tags de imagem.
    eu já tentei sem o comando alt, mais comoé strict deu erro, tirei o fechamento da tag mais não mudou em nada, pedi ajuda pro meu irmão que já fez html e ele não resolveu também.
    tag:
    error: Line 12, Column 103: document type does not allow element “img” here; missing one of “p”, “h1″, “h2″, “h3″, “h4″, “h5″, “h6″, “div”, “address”, “fieldset”, “ins”, “del” start-tag.

    o que eu posso fazer?

    • Gilberto disse:

      coloque uma tag “p” ou “div” no inicio e não esqueça de fecha-lá para indica que a imagem esta dentro de um paragrafo como dito na aula.

  3. Rafael disse:

    tag: img src=”http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-001.thumbnail.jpg” alt=”logo”/

  4. Olá professor, fiz o exercício, está tudo certo na hora de rodar no IE8, mas na hora de validar aparecem erros… rs 46 erros.

    To tentando encontrar mas não estou conseguindo.

    Poderia em ajudar?

    • Cristian, estou vendo que está seguindo as aulas com persistência, meus parabéns.
      Quanto aos erros de validação, o ideal é tentar entender as mensagens de erro apresentadas. Se o Inglês for um limitante, tente usar o translate.google.com para ajudar. Elimine os erros um a um e teste novamente para ver se resolveu.
      Acredite, cada problema detectado diminui vários na lista de erros apresentados. Bons estudos.

  5. Escrevi la no exercicio anterior… rs apanhei mas consegui, tanto esse exercicio como o classificação de conteudo tava sinistro para fazer o validador aceitar…

    Professor, qual a importancia de fazer o teste no validador. pq tipo, a pagina aparecia tranquilo no ie8, mas o validador acusava erros….

    Abraço!

  6. O processo de validação garante que você está seguindo o padrão web em seu código. Isso aumenta a possibilidade de seu site obter a mesma aparência em todos os navegadores que seguirem o padrão corretamente (ie8, firefox e safari novos ficam perfeitos)

  7. Rachel disse:

    Professor, a segunda imagem não está sendo encontrada. O senhor poderia, por favor, corrigir o endereço?

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

  8. Olá professor!

    Encontrei alguma dificuldade na tradução do documento de referencia w3c , utilizei a tradução disponível no site w3c brasil:

    http://desenaviegas.com/cover.html#minitoc

    Apesar da demora na confecção do exercício (sou muito inesperiente) a fixação esta legal, e a consulta aos tópicos para aprofundamento são indispensáveis!!

    Obrigado!

  9. Fábio Magalhaes disse:

    Parabens, esse conteudo é otimo , tou estudando todo dia um conteudo.
    Só queria te parabenizar pelo trabalho.
    Felicidades e sucesso.

  10. Wellington disse:

    Olá Prof, parabéns muito bom esse curso, eu sempre lia algumas coisas sobre HTML, XHTML e meio q não entendia muito bem e com esse curso eu estou na quarta aula e ja estou conseguindo detectar erros só de olhar no codigo.

    parabéns

  11. João Paulo Tinoco disse:

    Prof. eu estava fazendo o execício proposto nesta página, e quando terminei, pus pra checar no validator W3c, só que pelo que eu vejo o xhtml strict diferente do que eu usava transitional não pode usar o , porque quando eu pus pra validar apareceu como erro, há outra maneira de pular uma linha, sem ser essa?

    Obrigado, sua aula está sendo bastante útil.

  12. Júnior Leão disse:

    Professor gostaria de saber porque quando eu utilizo o site http://validator.w3.org/ ele encontra vários erros, mas o codigo funciona e a pagina aparece normal?

    Parabéns pelas aulas.

  13. Eli Camargo disse:

    Parabéns, professor, pelas aulas. São ótimas.
    Comecei a fazer o curso hoje e fiz quatro aulas seguidas.. em todas consegui realizar os exercícios e validar. Deu tudo certo!
    Sou leigo e estou tentando aprender pela internet.
    Muito obrigado.

  14. Joao disse:

    qundo vou validar o site aparece esse erro com frequencia
    Line 12, Column 1: character “<" is the first character of a delimiter but occurred as data

    Este artigo faz parte da cobertura de Tecnoclasta para a missão STS-120 do Ô…

    This message may appear in several cases:

    * You tried to include the “<" character in your page: you should escape it as "<"
    * You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
    * Another possibility is that you forgot to close quotes in a previous tag.

    ele diz q o primeiro "<" antes do p está errado, o q devo fazer?

  15. Acabei a 4ª aula e o respectivo exercício sem erros. Apenas o link http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-011.jpg não funciona…
    Tudo o resto aparece certinho..

  16. Dejair disse:

    Comecei o curso estou na 4ª aula, estou gostando do mesmo. Sou fã de informática em especial gosto de programação espero me dedicar 1 hora ou mais por dia, abraços Professor Luis Eduardo. Agradeço pela oportunidade deste curso e estou ansioso para concluir o mesmo.

  17. Gustavo disse:

    Fiz o exercício, aí deu 75 erros. Aí eu arrumei um negócio q eu escrevi errado no <!DOCTYPE …> e foi pra 9 erros só. Aí eu fechei um <p> com </a> e deu tudo certo.

  18. Gustavo disse:

    Podia ter um botão “Visualizar” aqui nos comentários ^^. Escrevi errado denovo:
    Aí eu tinha fechado um com , quando corrigi isso deu tudo certo.

  19. João Henrique disse:

    Tentei incluir uma imagem, e deu certo, porém quando eu abro o arquivo a imagem fica gigantesca na pagina da internet(mozila), tem algum jeito de delimitar o tamanho da imagem?

    E a propósito, muito boa as aulas, esta me ajudando pacas, vlw ^^

  20. Danilo disse:

    Pessoal é normal as tabelas ficarem sem as linhas?

  21. Gomes disse:

    Excelentes aulas bastantes instrutivas e fácil de seguir sem problemas, depois com CSS vai ser mais interessante a programação web.

    Parabéns pelas aulas e mais uma aula concluída.

  22. Renato disse:

    Professor, parabéns pela iniciativa!
    Gostaria de saber se alguém pode me ajudar?
    Estava indo tudo bem, já fiz até o arquivo css da próxima aula, mas não consigo colocar a imagem, como faço?
    Já tentei colocar deste modo:

    onde está o erro?

  23. Patricia disse:

    Estou tentando validar a pagina no site de validação , mas quando coloco para validar aparece como se estivesse sem internet
    pq está acontecendo isso?

  24. Teodomiro Santos disse:

    Só posso dizer obrigado. Com essas 4 aulas já aprendi tanto…

    Valeu pela iniciativa, prof. E por favor, continue com esse bom trabalho.

  25. Teodomiro Santos disse:

    Só posso dizer “obrigado”. Com essas 4 aulas já aprendi tanto…

    Valeu pela iniciativa, prof. E por favor, continue com esse bom trabalho.

Deixe um comentário