Aula 2: Listas e Links

Nesta segunda aula, voc aprender a utilizar listas numeradas ou no, a

entender o que so listas de definies e como fazer referncias a outros
documentos. Vamos entender a diferena entre caminhos relativos e absolutos.
Aprenderemos a utilizar ncoras e a tornar possvel o envio de mensagens pela
pgina que construiremos via e-mail. Alm disso, veremos como fazer
referncias a documentos no HTML (como imagens, som, vdeo). Ou seja,
juntos faremos nossa pgina ter toda a versatilidade de um hipertexto!!!
Objetivos:
- Aprender a utilizar listas numeradas.
- Compreender listas de definio.
- Aprender a referenciar outros documentos.
- Diferenciar caminhos relativos de absolutos.
- Aprender a utilizar ncoras.
- Possibilitar o envio de mensagens via e-mail pela pgina HTML.
- Referenciar documentos de outros tipos.
Pr-requisito:
Voc entendeu bem a aula anterior? Fez com facilidade os exerccios? Se
respondeu afirmativamente estas perguntas est pronto para esta aula! Se no,
tire suas dvidas e releia a aula anterior!

1. Listas e Enumeraes

<LI> tambm
pode ser interpretado
por alguns
navegadores
corretamente se no
for escrita como do
tipo empty, mas a
W3C recomenda que
seja usada como
container tag.
Default um termo
muito usado em
computao para
indicar o valor que
assumido na falta de
qualquer
especificao.

Uma forma muito comum de organizar a informao atravs de listas. A

linguagem HTML oferece 3 formas diferentes de criar uma lista:
listas no numeradas,
listas numeradas, e
listas de definio (tipo verbete de dicionrio).
Vamos ver o que cada uma delas representa.

1.1. Listas No Numeradas

As listas no numeradas so formadas por itens precedidos de um smbolo
grfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista,
sendo que cada item indicado pela tag <LI>.
Tanto a tag <UL> como a tag <LI> tm o atributo TYPE. Este atributo indica
qual smbolo colocado antes de cada item: disc (um crculo cheio, o
default), circle (um crculo vazado) e square (um quadrado cheio).
Por exemplo, o cdigo HTML:
1

<UL>
<LI>Correio Eletronico</LI>
<LI>Telnet</LI>
<LI>FTP</LI>
</UL>
Telnet o servio
de conexes remotas
da WEB.

Produz uma sada parecida com:

Correio Eletronico

Telnet
Esse sistema permite

FTP
que sua mquina
possa ser um
terminal de outra
mquina na
Internet. Para isso o
usurio deve ter uma
conta (login) na
mquina remota. A
utilidade principal
do Telnet
possibilitar a
execuo de
programas na
mquina remota.
FTP o protocolo
usado na Internet
para transferncia de
arquivos entre
computadores.
O FTP um dos
recursos mais
importantes da
Internet, sendo
responsvel por um
grande volume de
trfego de dados.
Para voc se
conectar a uma
mquina remota
atravs do FTP
necessrio que a sua
mquina e a remota
estejam executando
um programa
servidor de FTP.

1.2. Listas Numeradas

As listas numeradas so formadas por itens precedidos de um nmero
indicando a sua ordem. Em HTML utiliza-se a tag <OL> ... </OL> para
delimitar a lista numerada, sendo que cada item indicado pela tag <LI>.
Tanto a tag <OL> como a tag <LI> tm o atributo TYPE, que no caso deste
tipo de lista, indica qual a forma de numerao ser usada em cada item. As
formas possveis so:
1 (nmeros arbicos, o default),
A (letras maisculas),
a (letras minsculas),
I (nmeros romanos com letras maisculas) e
i (nmeros romanos com letras minsculas).
A tag <OL> tem tambm o atributo START, que indica qual ser o primeiro
nmero da lista.
A numerao tambm pode ser modificada atravs do valor do atributo VALUE
da tag <LI>.
Por exemplo, o cdigo HTML:
<OL TYPE=A>
<LI> Correio Eletronico</LI>
<LI VALUE=4> Telnet</LI>
<LI> FTP</LI>
</OL>
Produz uma sada parecida com:
A. Correio Eletronico
D. Telnet
E. FTP
Enquanto que:
<OL TYPE=1 START=5>
<LI> Correio Eletronico</LI>
<LI VALUE=1> Telnet</LI>
<LI> FTP</LI>
</OL>
2

resultaria:
5.Correio Eletronico
1.Telnet
2.FTP
1.3. Listas de Definies
<DT> e <DD>
tambm podem
ser corretamente
interpretadas
como empty tag
nas verses
menos rigorosas
(isto , que no
seguem
precisamente
todas as
recomendaes
da W3C) de
alguns
navegadores
HTML.

As listas de definio (ou do tipo verbete de dicionrio) consistem de uma lista

de termos, seguido de um pargrafo deslocado, contendo sua descrio.
Em HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de
definies. Cada termo a ser definido indicado pela tag <DT> ... </DT>
e a sua definio indicada pala tag <DD>...</DD>.
Uma possvel aplicao para as listas de definio criar listas endentadas que
no so precedidas pelos smbolos grficos padro ou por numerao. O autor
da pgina pode criar os smbolos que deseja colocar no incio de cada item,
utilizando a tag que inclui imagens no documento. Voc ver como incluir
imagens mais adiante em nosso curso.
Por exemplo, o cdigo HTML:
<DL>
<DT>Telnet</DT>
<DD>&
&Eacute; o protocolo mais usado na Internet
para criar uma conex&atilde;o com uma
m&aacute;quina remota.</DD>
<DT>FTP</DT>
<DD>O
O "File Transfer Protocol" &eacute; o
principal m&eacute;todo de se transferir arquivos
pela Internet. </DD>
</DL>
Produz uma sada parecida com:
Telnet
o protocolo mais usado na Internet para criar
uma conexo com uma mquina remota.
FTP
O "File Transfer Protocol" o principal mtodo
de se transferir arquivos pela Internet.
A tabela 2.1 resume as tags relativas a listas.

Tabela 2.1 - Resumo das Tags de Listas

Elemento
Descrio
Atributos
<UL> ... </UL>
TYPE
Lista no ordenada
<LI> ... </LI>
TYPE
Item de lista no
ordenada
<OL> ... </OL>
TYPE,
Lista ordenada
START
<LI> ... </LI>
TYPE, VALUE
Item de lista ordenada
<DL> ... </DL>
Lista de definies
nenhum
<DT>
Termo a ser definido
nenhum
<DD>
Definio do Termo
nenhum
Note que:
Os caminhos de
diretrios seguem a
conveno do
sistema operacional
Unix utilizando o
caracter / em vez de
usar o caracter \.

2. Interligando Documentos
Uma das principais caractersticas do hipertexto a possibilidade de incluir
referncias no documento. As referncias so denominadas Links e quando
selecionadas levam exibio do documento referenciado.
As referncias ou Links podem ser feitas a:
documentos na mesma mquina,

documentos em uma mquina completamente diferente (que pode estar at

do outro lado do mundo),e

um outro ponto do prprio documento.

Ao se fazer uma referncia a um outro documento necessrio indicar a sua

URL. Caso o documento referenciado esteja na mesma mquina possvel (e
recomendvel) utilizar uma URL relativa (utilizando o caminho de diretrios
para chegar ao novo documento a partir do atual), ao invs da URL absoluta
(ou seja o endereo completo na Internet do novo documento).
Por exemplo, se na pgina:
equipe.nce.ufrj.br/joao/Programa.htm
houver uma referncia a um arquivo que se encontra no endereo:
equipe.nce.ufrj.br/Exemplos/arq.htm
no necessrio escrever a URL completa. Basta escrever o caminho relativo
at ela:
../Exemplos/arq.html
Pois "../ " significa: "a partir do diretrio atual" (que no caso joao),
v ao diretrio anterior (no caso equipe.nce.ufrj.br) e de l para um
sub-diretrio filho chamado Exemplos, onde h o arquivo arq.html.

Mrcia
e
Glaucia:
este
Outro mesmo
maiusculo?
Voces
falaram
que deveria ser
minuscula, mas
eu acho que no.
Continuo com a
dvida acima,
o outro tem a
mesma funo do
"Prprio " no
prximo ttulo,
e ai em 2.2 voces
mandaram por
maiuscula!
Ele tambem no
apenas uma
"ligao " entre
as palavras.....

2.1. Referncia a Outro Documento

A forma de inserir referncia em arquivo HTML atravs da tag <A> ...
</A> e de seus atributos.
O atributo HREF serve para definir a URL que ser aberta se o usurio
selecionar, com o mouse, o texto contido entre o <A> e o </A>. Os
navegadores costumam exibir este texto utilizando caracteres sublinhados e o
cursor do mouse modificado ao passar por cima dele.
No exemplo a seguir, a seleo do texto Pagina do NCE faz com que o
navegador abra a pgina http://www.nce.ufrj.br:
<A HREF="http://www.nce.ufrj.br">
Pagina do NCE
</A>
importante lembrar que, apesar da HTML no diferenciar maisculas de
minsculas, o mesmo no vlido para as URLs. necessrio indicar
corretamente quais letras esto em minsculas e quais esto em maisculas
para que o arquivo possa ser encontrado.
O arquivo destino no precisa necessariamente ser um documento HTML,
pode ser um arquivo de qualquer tipo: imagens, msica, arquivos comprimidos
etc. Caso o navegador no saiba como exibir este arquivo, ele permite ao
usurio receber o mesmo e salv-lo em um diretrio de sua escolha.
2.2. Referncias a Pontos no Prprio Documento
Como foi dito anteriormente, em um arquivo HTML possvel fazer uma
referncia a uma outra parte do mesmo arquivo. Neste caso, necessrio
indicar ao navegador o ponto exato que ser referenciado. Isto feito
colocando-se uma ncora no ponto desejado atravs da tag <A> ...
</A> com a definio do atributo NAME.
O cdigo HTML do exemplo abaixo associa o nome inicio a um
determinado ponto do documento.
<A NAME="inicio"></A>
Uma ncora colocada no meio do texto no tem efeito algum no aspecto da
pgina que ser visualizada.
O cdigo HTML abaixo permite incluir uma referncia no ponto do documento
marcado pela ncora acima:
<A HREF="#inicio">
Incio da Pgina
</A>

As ncoras tm duas utilidades bsicas:

permitir a criao de ndices no incio da pgina, e

permitir ao usurio voltar imediatamente ao incio da pgina.

Atravs da seleo do tpico de interesse no ndice, o usurio diretamente

remetido a este tpico, sem precisar avanar pgina a pgina procura do item
desejado.
Na URL possvel fazer referncia a uma ncora de uma pgina. No exemplo
abaixo, o link encontrar a ncora "bibliografia" na pgina em
referncia:
<A HREF=
"http://www.ic.uff.br/~aconci/II.htm#bibliografia">
Bibliografia
</A>
3. Enviando Mensagens de Correio Eletrnico
Correio eletrnico
ou e-mail o servio
que permite a
qualquer usurio da
Internet enviar e
receber mensagens.
O endereo
eletrnico de um
usurio contm todas
as informaes
necessrias para que
a mensagem chegue
ao seu destino. Ele
composto de uma
parte que identifica o
destinatrio
(username) e uma
parte relacionada
sua localizao, no
formato:
username@subdom
nios. domnio

Alm de criar links para a exibio de arquivos, a tag <A>...</A> permite que
o usurio execute outros servios da Web como: telnet, ftp, mail e news.
No exemplo a seguir, quando o link for acionado, o navegador abrir o
programa de correio eletrnico, permitindo que o usurio envie uma
mensagem para o endereo especificado (no caso: maria@ig.com.br).
<A HREF="mailto:maria@ig.com.br">
Mande um mail!</A>
Exerccios:
1. Substitua no exemplo atividade utilizado na aula passada, os textos
Primeiro, Segundo, Terceiro e Quarto no incio dos pargrafos
por uma lista numerada.
2. Faa com que cada uma das frases do pargrafo que antes iniciava com a
palavra Terceiro transforme-se em um item de uma lista no numerada
iniciada por (quadrado).
Depois mostre como voc faria para cada item corresponder a um smbolo
diferente ( )?

Por exemplo:
biba@ic.uff.br

3. Examine as linhas que seguem:

<HTML>
<HEAD>
<TITLE> Construo de Pginas Web </TITLE>
</HEAD>

Lembrete: as
tags tanto
podem ser
escritas em
maisculas
como em
minsculas,
mas nos links
esta diferena
importante

<BODY>
<CENTER>
<P><A NAME="inicio"></A>
<B>Construo de Pginas de Web</B>
</P>
</CENTER>
<P>O que j aprendemos:</P>
<P>Aula 1: Introduo</P>
<ul>
<li>Conceitos bsicos: URL, Navegadores e
Servidores</li>
<li>Estrutura de um documento HTML</li>
<li>Comandos bsicos de formatao.</li>
</ul>
<P>Aula 2. Listas e Links</P>
<ul>
<li>Listas numeradas, no numeradas e de
definies</li>
<li>Caminhos relativos e absolutos</li>
<li>Referncias a outras pginas</li>
<li>ncoras</li>
<li>Enviando mensagens</li>
<li>Referencias a outros documentos (<A HREF=
"http://www.ic.uff.br/~aconci/curso/imagem~1.htm">
imagens</A>, som, vdeo)</li>
</ul>
<HR WIDTH="100%">
<p><a href="mailto:aconci@ic.uff.br"> enviar
messagem</a></P>
<P><A HREF="#inicio">voltar inicio</A></P>
<p><A HREF="http://www.faperj.br">conhecer mais
sobre a FAPERJ</A></P>
</BODY>
</HTML>
Agora, faa com que cada item das aulas seja referenciado da seguinte forma:
procure na Internet sites relacionados a estes itens, e crie os links para a partir
deles visualizar os sites encontrados.
Resumo:
Nesta aula, voc aprendeu a incluir listas e links em uma pgina e a
transformar um texto em um hipertexto. Mas ainda h muitos recursos para sua
pgina! Imagens esto esperando por voc na prxima aula.
Auto-avaliao:
Voc concluiu com facilidade os exerccios? Ento podemos dizer que voc
entendeu bem os detalhes desta aula e est pronto para nossa prxima aula.
Mas se algo no ficou bem fixado, a melhor coisa a fazer rever esse ponto e
no acumular dvidas!
7