Programação para Web: Listas, Imagens, Links Prof. Francisco do Nascimento UNIBRATEC - ADS
Listas Não-ordenadas: Tag
• 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 •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: Ex.: Lista ordenada:
Ex.: - Tópico 1
- Tópico 2
Lista Aninhada • Criar lista dentro de lista. Ex.: Uma Lista aninhada:
Tag (imagem) • insere uma imagem na página da web. • OBS.: Essa tag não precisa de fechamento. • O browser coloca a imagem onde a tag 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 • 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 (â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. • nome_do_link
Atributos de • href: Determina o endereço do link. • Ex1.: Clique aqui para ir ao Google • Ex2.: Clique aqui para ir ao Site da InfoJr. UFBa
Atributos da Tag • 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. • Destino • Local Destino
Interligando parte de página diferente • É utilizado quando se deseja fazer um link para um item de página diferente. • Destino • Local Destino (Local na página destino)
Link para E-mail • Link para o e-mail. Quando clicado abre o programa cliente de e-mail. • Clique aqui para enviar o email.
•“ mailto:ednmail?cc=email&bcc=email&subject=assunto ”; • % espaço em branco.
Exercícios