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. 

Html Basico #2

ATRIBUTOS

Antes de falar sobre outras tags, devemos conhecer o que é ATRIBUTO.

Atributos são propriedades adicionais que as tags possuem. Algumas tags possuem atributos específicos e alguns atributos são globais, podendo ser aplicados a qualquer tag.

Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo.

1 2 3

<h1 id="titulo-site">Designer Express</h1> <h2 id="description" class="descicao-site">Ensinando Designer desde de já</h1> <img class="img-thumbnail" src="endereco-da-imagem.jpg" alt="Descrição da imagem">

TÍTULOS H1, H2 … H6

Em HTML, quando queremos indicar um título, devemos declará-lo com as tags <h1>, <h2>, <h3> até o <h6>, sendo o mais importante o <h1> e o <h6> de menor importância.

1 2	<h1>Designer Express</h1> <h2>Ensinando Designers desde já</h1>

Os mecanismos de busca (Google, Yahoo e Bind) utilizam essas tags como meio de identificação do seu Site, portanto, devemos levar em consideração a ordem e relevância.

Geralmente utilizamos a tag <h1> para representar o título(logo) do site, pois será o primeiro elemento no qual os mecanismos de busca irão interpretar.
O <h2> colocamos para a descrição do site. O <h3> torna-se o título dos artigos do site e assim por diante.

Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.

TEXTO

Conforme aprendemos na aula passada, a tag <p> é utilizada para apresentar texto em uma página.
Quando queremos representar um texto longo, com diversos parágrafos, cada parágrafo deve ser iniciado com um novo <p>.

1 2	<p>Conforme aprendemos na aula passada, a tag &lt;p&gt; é utilizada para apresentar texto em uma página. </p> <p>Quando queremos representar um texto longo, com diversos parágrafos, cada parágrafo deve ser iniciado com um novo &lt;p&gt;.</p>

ÊNFASE NO TEXTO

Quando queremos dar ênfase em alguma palavra ou em algum texto, utilizamos as tags <strong> para deixar o texto em negrito e a tag <em> para deixar o texto em itálico. Existe também a tag <small>, que diminui o texto.

1 2 3

<p>Site de tutoriais para <strong>web designers</strong>. Aprenda HTML, CSS, jQuery com quem entende!</p> <p><em>Site de tutoriais para web designers</em>. Aprenda HTML, CSS, jQuery com quem entende!</p> <p>Site de tutoriais para web designers. <small>Aprenda HTML, CSS, jQuery com quem entende!</small></p>

CITAÇÃO

Tem o propósito de fornecer informações sobre algo dito por alguém. Existem 2 tags, o <blockquote> e o <q>.

<blockquote>: fornece a delimitação de um parágrafo citado que pode conter várias linhas. Esta tag destaca o parágrafo, deslocando-o um pouco para a direita (dependendo da direção do texto). O uso de blockquote como forma de indentar o texto foi definido como inadequado pela W3C em favorecimento ao uso de folhas de estilo.

Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da citação, ou seja, de qual página da internet veio tal citação.

1 2 3

<blockquote cite="http://www.fulanodetal.com.br"> Texto dito pelo fulano de tal no site http://www.fulanodetal.com.br que fala sobre algumas coisas. </blockquote>

<q>: A tag Q tem a mesma finalidade que blockquote, mas a diferença é que ela apenas delimita uma pequena porção dentro do texto. Então, se blockquote serve para identificar um parágrafo inteiro que tenha sido citado, q serve apenas para identificar uma pequena frase.

Existem uma curiosidade na tag <q> quanto aos browsers. O browser Internet Explorer, simplesmente, não modifica a formatação do texto. Já o Mozilla Firefox irá substituir as tags <q> por aspas (“).

1	<p>Texto dito pelo fulano de tal no site <q>http://www.fulanodetal.com.br</q> que fala sobre algumas coisas.</p>

COMENTÁRIO

Os comentários são utilizados para deixar o código compreensível ao programador. Eles não aparecem na tela, somente nó código fonte.
Aula passada eu passei uma forma de comentar o código HTML. <!– –>
Existe outra forma que eu utilizo muito e que poupa tempo.
Essa forma é utilizada para comentar várias linhas de código que você não queira que seja visualizado pelo usuário.
Você pode utilizar a própria abertura da tag para começar um comentário e finalizar utilizando o fechamento da mesma.
Ex: <!–p>teste</p–>

1 2	<p>Texto dito pelo fulano de tal no site <q>http://www.fulanodetal.com.br</q> que fala sobre algumas coisas.</p> <!--p>Esse texto eu não quero mais que aparece para o usuário. Vou verificar posteriormente.</p-->

IMAGENS

As imagens são declaradas pela tag <img> e pelos atributos src e alt. O atributo “src” indica o local da imagem e o “alt”, um texto alternativo para a imagem caso não possa ser visualizada ou carregada.

1	<img src="img/local-da-imagem.jpg" alt="Texto alternativo">

Com a chegada do HTML5, foram introduzidas 2 novas tags para imagem <figure> e >figcaption>. O <figure> é inserida antes da tag <img>, define a imagem com a tag <img> e o <figcaption> permite adicionar uma legenda para a imagem.

1 2 3 4

<figure> <img src="img/local-da-imagem.jpg" alt="Texto alternativo"> <figcaption>Legenda da imagem</figcaption> </figure>

PRATICANDO

Agora que vocês já conheceram novas tags, vamos praticar?

• Crie uma nova pasta em sua área de trabalho com o nome do seu site
• Importe uma imagem qualquer para dentro desta pasta
• Crie o documento index.html com ó código abaixo e salve dentro da pasta
• Após finalizado o documento, abra-o em algum navegador.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<!DOCTYPE html> <html> <head> <title>Título do site</title> <meta charset="utf-8"> </head> <body> <h1 id="logo">AQUI VAI A LOGO</h1> <h2 id="descricao-site">Aqui vai a descrição do seu site</h2> <h3 class="titulo-artigo">Aqui é o título do primeiro artigo</h3> <figure> <img src="img/endereco-imagem.jpg" alt="Texto alternativo"> <figcaption>Legenda da imagem</figcaption> </figure> <p>Aqui é o texto do primeiro artigo</p> <h3 class="titulo-artigo">Aqui é o título do segundo artigo</h3> <figure> <img src="nome-da-imagem.jpg" alt="Texto alternativo"> <figcaption>Legenda da imagem</figcaption> </figure> <p>Aqui é o texto do segundo artigo</p> <h4>Notícias</h4> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 1</a></li> </ul> </body> </html>

Opa! Nesse código apareceram coisas novas. Serão parte do tema da próxima aula!.

FINALIZANDO

Bom galera, espero que vocês tenham aprendido e que tenham gostado dessa aula.
Próxima aula iremos tratar de tags para criar: lista, links e tabela.

Em caso de dúvidas não deixem de perguntar e caso tenham gostado da aula deixem seus comentários para ajudar a D.E a continuar com o trabalho de transmitir conhecimento.

Muito obrigado e até a próxima.

Jake60346 Designer Express