HTML BÁSICO – PARTE 3 – LISTA E LINKS

Lista e Links em HTML

Olá pessoal, tudo joia?
Hoje iremos falar sobre Listas e Links.
É muito importante que vocês prestem bastante atenção neste tutorial.

Conheça os outros artigos

LISTAS

As listas em HTML são utilizadas para dar destaque, linha por linha, passo por passo, sobre algum determinado assunto.
Pense em uma lista de mercado, onde se destacam itens que devem ser lembrados.

O HTML suporta 3 tipos de listas:

  • listas ordenadas;
  • não ordenadas;
  • e de definições.

LISTAS NÃO ORDENADAS

As listas não ordenadas são utilizadas para listar itens que não possuem ordem lógica.
Por padrão recebem ao lado esquerdo de cada item um bullet (tipicamente pequenos círculos) que podem ser alterados conforme sua necessidade.
São construídas pelas tags  e .

LISTAS ORDENADAS

Muito parecida com as listas não ordenadas, as listas ordenadas, como o nome já diz, são listas que apresentam ordenação, possuem uma sequência lógica.
Por padrão cada item é numerado.
São construídas pelas tags  e .

LISTAS DE DEFINIÇÕES

Não é lista de itens, mas de definições.
Imagine que você escreveu a mesma lista de itens de mercado, mas ao invéz de apenas listar os itens, você descreveu detalhes de cada item.
São construídas pelas tags ,  e .

: Define o início de uma lista de definição.
: Define o nome do item que receberá alguma definição.
: Definição do item.


LINKS

Os links são utilizados para vincular documentos na Web.
Ele pode redirecionar o usuário para outra página ou para outra parte dentro da mesma página.
Pode ser utilizado para dar “play” em um vídeo, abrir uma imagem, acionar eventos de animação e etc.
São objetos clicáveis que recebem alguma ação.

São mundialmente conhecidos como “HIPERLINKS”.

A construção dos links é feita pela tag  (âncora).

 

 

Como ensinei na aula passada, as TAGs HTML podem ter atributos e na tag os atributos padrão que devemos utilizar são:

  • href
  • title
  • target

ATRIBUTO HREF

O atributo “href” é utilizido para informar o endereço para onde o usuário vai ser redirecionado, ou o arquivo de vídeo que queremos que o usuário assista, ou o endereço da imagem que será aberta em tamanho real na tela e etc.

Caso o link não possua um endereço, devemos informar um “link falso”. O sinal de “#” indica um link falso.

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

 

 

Sempre que o link não possua um endereço, informe o sinal de “#” no atributo “href”.

REDIRECIONAMENTO PARA DENTRO DA MESMA PÁGINA

Podemos também fazer links para elementos dentro da própria página.
Por exemplo: vamos fazer uma ligação do link abaixo com o título desse artigo “Lista e Links em HTML”. Você vai perceber que ao clicar você vai ser redirecionado para o título.

Vamos para o título?

É muito simples!
Basta que você adicionar o atributo “id” ao elemento que vai receber o redirecionamento e no atributo “href” do link, você informa o mesmo “#id” do elemento. Exemplo:

 

 

ATRIBUTO TITLE

O atributo “title” funciona da mesma forma em praticamente todas as Tags do HTML. Ele representa o título daquela Tag, uma breve descrição do que aquele elemento faz ou representa.
Esse atributo faz com que o browser represente em forma de “balão” o título que informamos.

Posicione o mouse sobre este link para visualizar.

ATRIBUTO TARGET

“Target” em inglês significa “Alvo”. Com esse atributo podemos definir onde o link será aberto, se em uma nova aba, na mesma página ou até mesmo em uma nova janela.

Os valores definidos são:

ValorDefinição
_blank O link será aberto em uma nova aba do seu browser.
_self O link será aberto na mesma janela.
_top O link alvo é aberto na mesma janela, sem frames
_parent O link alvo é aberto no frameset principal (Pai)

FINALIZANDO

Bom galera, eu acho que é isso.
Estudem mais sobre essas tags e conheçam seus atributos afundo.

Espero que tenham gostado da aula.
Não deixem de comentar e dar suas opiniões.
Caso queiram que eu explique algo a mais, é só pedir, ok?

Muito obrigado e até a próxima

Envie um Comentário

Comentários

Seja o primeiro a comentar

Artigos Relacionados