Programação para

Web:
Listas, Imagens, Links
Prof. Francisco do Nascimento
UNIBRATEC - ADS
Listas
Não-ordenadas: Tag <UL>
• type: altera o tipo do marcador de toda a lista.
Os marcadores podem ser do tipo: circle
(circunferência), disc (disco) ou square
(quadrado).
Ordenadas: Tag <OL>
•type: altera o tipo do marcador de toda a lista
ordenada. Os marcadores podem ser do tipo: 1, A,
a, I, i.
• start: Especificar um número de começo.
Tags para criação de listas:
Lista não-ordenada: <ul></ul>
Ex.:
<ul>
<li>Tópico 1</li>
<li>Tópico 2</li>
</ul>
Lista ordenada: <ol></ol>

Ex.:
<ol>
<li>Tópico 1</li>
<li>Tópico 2</li>
</ol>
Lista Aninhada
• Criar lista dentro de lista.
Ex.: <h4>Uma Lista aninhada:</h4>
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Preto
<ul>
<li> Com açucar </li>
<li> Sem açucar </li>
</ul>
<li>
<li>Verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
Tag <img> (imagem)
• insere uma imagem na página da web.
•<img>
OBS.: Essa tag não precisa de fechamento.
• O browser coloca a imagem onde a tag <img>
ocorre. Se você colocar a imagem entre dois
parágrafos, o browser mostra o primeiro parágrafo,
então a imagem e depois o segundo parágrafo.
• Carregar imagens leva tempo, então devemos ter
cuidado com o uso de imagens.
Atributos da Tag <img>
• src: (source), especifica o caminho em que a imagem se encontra;
• width: especifica a largura da imagem;
• height: especifica a altura da imagem;
• align: altera o alinhamento da imagem;
TOP
LEFT MIDDLE RIGHT
BOTTOM
• alt: exibe um texto ao colocar o mouse sobre a imagem;
• border=# : espessura da borda
• vspace=# : margem vertical da imagem
• hspace=# : margem horizontal da imagem

• Obs.: o firefox utiliza alt para outra coisa, então para criar o efeito
do alt no firefox utilize o atributo title.
Tag <a> (âncora)
• Serve como uma ponte de ligação entre
determinados trechos de uma mesma página, ou
entre outras páginas (hiperlinks) ou ainda, qualquer
outro endereço acessível pelo browser.

• <a href="url"> nome_do_link </a>

Atributos de <a>
• href: Determina o endereço do link.
• Ex1.:
<a href = “http://www.google.com.br” >
Clique aqui para ir ao Google
</a>
• Ex2.:
<a href = “http://www.infojr.ufba.br”
target=“_blank”>
Clique aqui para ir ao Site da InfoJr. UFBa
</a>
 Atributos da Tag <a>
• href: define o endereço a ser acessado pelo link,
podendo até ser um endereço de email (mailto:);
• name: nomeia uma âncora de página. Quando
usamos isso podemos criar links que saltam para uma
determinada parte de uma página;
• target: define alvo para carregar o conteúdo do
endereço. “_blank”: sempre abre numa nova janela
“_self”: abre na mesma janela
“_parent”: abre na janela “chamadora” (apenas para
popup’s)
“_top”: abre sobre todos frames
title: exibe um texto quando o mouse é colocado
sobre o link.
Interligando parte da mesma
página
• É utilizado quando se deseja fazer um link
para um item da mesma página.
• <a href=“#ItemDestino”>Destino</a>
• <a name=“ItemDestino”>
Local Destino
</a>
Interligando parte de página
diferente
• É utilizado quando se deseja fazer um link para um
item de página diferente.
• <a href = “
http://Paginadestino.html#Destino”>
Destino
</a>
• <a name=“Destino”>Local Destino</a>
(Local na página destino)
Link para E-mail
• Link para o e-mail. Quando clicado abre o
programa cliente de e-mail.
•<a href=“mailto:EnderecoDoEmail”>
Clique aqui para enviar o email.
</a>
•“
mailto:ednmail?cc=email&bcc=email&subject=assunto
”;
• % espaço em branco.
Exercícios