TLP - Links, Listas e Imagens HTML

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22
Lição n° 7,8,9,10
2,4, Sumário: – Imagens, Listas e Links
Como vimos na primeira aula, uma página web é um documento capaz de conter
texto, som, vídeo, programas, links, imagens e muitas outras coisas e podem
proporcionar navegação a outras páginas web mediante ligações de hipertexto.
LINKS OU HIPERVÍNCULOS
A Tag <a>
A tag <a> define um hiperlink, que é usado para vincular de uma página para outra. O
atributo mais importante do elemento <a> é o atributo href, que indica o destino do
link.
Por padrão, os links aparecerão da seguinte maneira em todos os navegadores:
• Um link não visitado é sublinhado e azul.
• Um link visitado está sublinhado e roxo.
• Um link ativo está sublinhado e vermelho.
A criação de links é dada pela seguinte expressão:

<a href=“arquivo.extensão”> Link </a>
Atributo target.
Quando criamos um link, por defeito o navegador abrirá a página web destino na
mesma janela, mas podemos lhe pedir que abra a parte, isto é, numa outra janela.
Os valores de target mais habituais:
_blank: Abre o documento vinculado numa janela nova do navegador.
_self: É a opção predeterminada ou por defeito. Abre o documento vinculado na
mesma janela que o link.
<a href=“arquivo.extensão” target=“_blank”> Link</a>
Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

LISTAS
Em ocasiões, é possível agrupar determinadas palavras ou frases num conjunto de
elementos que têm mais significado de forma conjunta.
A linguagem HTML define 3 tipos de listas para agrupar os elementos:
1. Listas não ordenadas;
2. Listas ordenadas;
3. Listas de definições;
4. Listas Intercaladas.
LISTAS NÃO ORDENADAS
As listas não ordenadas são as mais simples e as que mais se utilizam.

É um conjunto de elementos relacionados entre si e não se indica uma ordem ou
sequência determinada.
A tag <ul> (unordered list) indica o início da lista e a tag <li> (list item) cada um dos
seus elementos.
<ul type=“formato”>
<li> Tópico 1
<li> Tópico 2
<li> Tópico 3
</ul>
Onde:
Type: o formato do marcador que pode ser:
• Disc: o marcador é um ponto (padrão).
• Square: o marcador é um quadrado.
• Circle: o marcador é um ponto.
None: Sem marcador.

<html>
<head>
<title>Ejemplo de etiqueta
UL</title>
</head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
LISTAS ORDENADAS
As listas ordenadas são quase idênticas às listas não ordenadas, salvo que neste
caso, os elementos se enumeram de forma consecutiva.
Define-se mediante a tag <ol> (ordered list). Os elementos da lista definem-se a
tag <li>, a mesma que se usa nas listas não ordenadas.
<ol type=“formato” start=“#”> Onde:

type: formato da numeração que pode ser:
<li> Tópico 1
1. Lista numérica (padrão).
<li> Tópico 2 A. Lista alfabética maiúscula.
<li> Tópico n a. Lista alfabética minúscula.
</o> I. Lista com nº romanos maiúscula.
i. Lista com nº romanos minúscula.
start: o valor inicial da lista.

LISTA DE DEFINIÇÕES
Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e
explicações dos termos.
Uma lista de definições começa com a tag <dl>. Cada termo da lista de
definições começa com a tag <dt>. Cada definição da lista de definições começa com a
tag <dd>.
<dl>
<dt> Café </dt>
<dd> Bebida Quente Preta </dd>
<dt> Leite </dt>
<dd> Bebida Quente Branca </dd>
</dl>
Café
Bebida Quente Preta
Leite
Bebida Quente Branca

IMAGENS
Sem o apelo visual das imagens, talvez a world wide web não tivesse conseguido
alcançar com a mesma popularidade que atingiu. Os principais navegadores podem
exibir de forma automática imagens no formato GIF e JPEG.
As imagens devem ser gravadas como arquivos separados, mesmo que sejam
referenciadas e exibidas num documento HTML. Para incluir uma imagem no
documento HTML, usamos a tag <img>.
Exemplo:
<img src=“minha_foto.jpg”>
A tag <img> possui alguns atributos importantes, são eles:
Exemlo:
<!DOCTYPE html>
<html lang="pt-pt">
<head>
<meta charset="utf-8">
<title>Exemplo Imagens</title>
</head>
<body bgcolor="#E8E8E8">
<img src="770521.jpg" height="30%" width="30%" align="middle“
alt=“Minha Imagem”>
</body>
</htm

Exemplo de outras midias
<audio src='midias/musica.mp3' controls loop></audio>

<video src='midias/video.mp4' controls autoplay loop></video>

Fim
Obrigado!

TLP - Links, Listas e Imagens HTML

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TLP - Links, Listas e Imagens HTML

Enviado por

Direitos autorais:

Formatos disponíveis

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

A criação de links é dada pela seguinte expressão:

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

As listas não ordenadas são as mais simples e as que mais se utilizam.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

<ol type=“formato” start=“#”> Onde:

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

A tag <img> possui alguns atributos importantes, são eles:

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

Exemplo de outras midias

<audio src='midias/musica.mp3' controls loop></audio>

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

Você também pode gostar