HTML Aula #4

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 <ul> e <li>.

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 <ol> e <li>.

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 <dl>, <dt> e <dd>.

<dl>: Define o início de uma lista de definição.
<dt>: Define o nome do item que receberá alguma definição.
<dd>: 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 <a> (âncora).

1	<a href="#" title="Título do link">Link</a>

Como ensinei na aula passada, as TAGs HTML podem ter atributos e na tag <a> 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.

Estao Gostando Desse Tutorial? Essa é uma pequena aula de Html antes de começar o conteudo Basico, Falta Apenas Mais 2 Aulas

1	<a href="#" title="">Link Falso</a>

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:

1 2 3

<h1 id="teste">Este elemento recebe o redirecionamento</h1> <a href="#teste">Clique aqui para ser direcionado para o H1</a>

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:

Valor	Definiçã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.

Arrastar & soltar!

Olá Hoje uma dica e um tutorial, uma grande forma de proteger seu blog contra Plagiamentos, geralmente quando postamos colocamos imagens e é possível move-las para a outra guia e salva-las,
por isso hoje vamos bloquear o famoso "Arrastar & soltar". Para que ninguém possa arrastar uma imagem de seu blog para outra guia e salva-la utilizando o Botão direito do mouse. este bloqueador está funcionando corretamente nos navegadores: Internet Explorer, Firefox, Google Chrome e Safari.

1. Faça login no blogger. Em seguida vá ate o Painel do seu blog acesse o modelo clique em editar HTML.

Obs: "Não Esqueça de fazer o Backup do template caso algo de errado você terá o template baixado"

Agora iremos adicionar o Bloqueio ao blog. apos ir ao Modelo e clicar em editar html utlizie Ctrl+F do seu navegador e procure pela "Tag"

1 2 3

Body Procure pela "tag" <Body você achara uma frase apague-a e substitua pela tag abaixo: <body ondragstart='return false'>

Agora salve e visualize e tente arrastar uma imagem e você verá que o bloqueio está funcionando corretamente.