Tags usuais – parte 2
Continuaremos vendo as tags comumente usadas em um documento HTML, porém se não leu alguma das aulas anteriores, faça isso agora:
Curso de HTML – Introdução
Listas
Com o HTML Ă© possĂvel definr várias formas de apresentar listas em um documento. Toda lista possui um rĂłtulo inicial e final e sĂł pode conter rĂłtulos <li>, que por sua vez podem conter texto, parágrafos ou outras listas. Isto Ă© mais facilmente explicado atravĂ©s de exemplos, que veremos a seguir.
Ordenadas
<ol>
Atributo – type (cria um marcador para os elementos)
Valores -A, a, I, i
As listas ordenadas sĂŁo marcadas pelos rĂłtulos <OL> e </OL>. Cada item Ă© contido dentro de <LI>, cujo fechamento Ă© determinado pela prĂłxima ocorrĂŞncia de <LI> ou pelo rĂłtulo de fechamento </OL>, mas por questĂŁo de organização usaremos o rĂłtulo de fechamento </LI>. No exemplo, usamos <OL> para relacionar os trĂŞs perĂodos da Era Mesozoica:
<ol>
<li> Triássico</li>
<li> Jurássico</li>
<li> Cretáceo</li>
</ol>
NĂŁo ordenadas
<ul>
Atributo – type (cria um marcador para os elementos)
Valores – circle, disc,square
As listas não-ordenadas são marcadas pelos rótulos <UL> e </UL>. Cada item é contido dentro de <LI>, que não necessita de rótulo de fechamento (qualquer novo <LI> ou o rótulo </UL> automaticamente fecham o item <LI>). No nosso exemplo, utilizaremos o rótulo </UL> para fazer um pequeno sumário dos itens constantes da nossa página:
<ul>
<li>PerĂodos da Era MesozĂłica</li>
<li>Lista de Dinossauros</li>
<ul>
<li type="circle">Tabela</li>
<li type="circle">Imagens</li>
</ul>
<li>Endereço para contato</li>
</ul>
Observe que, dentro do segundo item da lista acima, alĂ©m do texto "Lista de dinossauros", há uma outra lista de nĂvel hierárquico inferior, com mais dois itens. O browser formatará a sub-lista de uma forma diferente (uso do atributo type).
Faça um teste, coloque a lista acima em uma página HTML, pode ser uma das que já criou, salve e observe o resultado, que deverá ser parcido com este:
- PerĂodos da Era MesozĂłica
- Lista de Dinossauros
- Tabela
- Imagens
- Endereço para contato
Links(âncoras)
<a>
Atributo – href= (endereço para onde o link será apontado)
Valores – mailto:, http://, ftp://
Atributo – target= (alvo onde a página será aberta)
Valores – _blank, _self, _parent, _top
Links Remotos
Nesta seção, adicionaremos ligações de hipertexto (links) Ă nossa home page. O texto (ou imagem) que aciona o link e o objeto-alvo do mesmo sĂŁo chamados de âncoras. Um link Ă© um dos dois lados de um hyperlink (ligação de hipermĂdia), que consiste de uma link-fonte que aponta para o endereço de uma link-destino. O destino pode ser qualquer formato de mĂdia eletrĂ´nica (um arquivo HTML, um arquivo de texto, uma imagem, um arquivo de vĂdeo, etc.)
O elemento <A> marca um link. <A HREF="URL da link-destino> define um link-fonte. O texto que for marcado com <A HREF> aparece na página em destaque (geralmente azul e sublinhado, por default, nos browsers mais populares). Se o link for acionado (clicando o mouse sobre o texto marcado), o browser irá buscar o objeto apontado pela URL. Alguns exemplos tornarão a compreensão mais fácil:
ExercĂcio:
Crie uma página chamada primeira_pagina.html, com um link para uma outra página chamada segunda_pagina.html e nesta, um link de volta para a primeira página.
<html>
<head>
<title>primeira_pagina.html</title>
</head>
<body>
<h3>Primeira página</h3>
<br><br><br>
<a href="segunda_pagina.html">
Eu sou o link que te levará para a segunda página
</a>
</body>
</html>
<html>
<head>
<title>segunda_pagina.html</title>
</head>
<body>
<h3>Segunda página</h3>
<br><br><br>
<a href="segunda_pagina.html">
Eu sou o link que te levará para a primeira página
</a>
</body>
</html>
Agora um exemplo de um link para um arquivo de musica. Se você tiver algum programa relacionado com esse tipo de arquivo, esse programa será chamado (pode usar .mid, .mp3,.wav).
<html>
<head>
<title>Arquivo de mĂşsica</title>
</head>
<body>
<h3>Link para arquivo de mĂşsica</h3>
<br><br><br>
<a href="clouds.mid">
Eu sou o link que abrirá o arquivo de musica(mid)
</a>
</body>
</html>
É importante vocĂŞ saber como alcançar um arquivo quando este nĂŁo estive no mesmo nĂvel da página de onde Ă© chamado. No exemplo acima o arquivo de mĂşsica tem que estar dentro da mesma pasta que a página com o link.
Imaginemos que essa página estivesse dentro de uma pasta chamda “teste” o arquivo de mĂşsica tambĂ©m teria que estar; nesse exemplo acima, porĂ©m poderia estar em uma subpasta, dentro da pasta “teste”. Por exemplo, dentro da pasta teste tem outra pasta chamada “musicas” entĂŁo o nosso link de exemplo nĂŁo funcionaria, pois estaria procurando o arquivo de mĂşsica na raiz da pasta teste, estando nosso arquivo na subpasta o endereço no link deveria ser href=”musicas/clouds.mid”
Isto serve pra qualquer tipo de link apontando para qualquer tipo de arquivo.
Links Locais
É possĂvel tambĂ©m usar âncoras para navegar dentro de um documento local ou remoto. <A NAME="nome-do-link"> marca uma posição no documento (âncora-destino) que pode ser referenciada, dentro do mesmo documento, por <A href="#nome-do-link">. No exemplo a seguir, marcaremos as trĂŞs seções:
(Crie um página com esse conteúdo dentro e salve como ancoras.html)
<ul><li><a href=”#primeira”>Primeira âncora</a></li>
<li><a href=”#segunda”>Segunda âncora</a></li>
<li><a href=”#terceira”>Terceira âncora</a></li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name=”primeira”></a>primeira âncora</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name=”segunda”></a>segunda âncora</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name=”terceira”></a>terceira âncora</h2>
IMPORTANTE: Cuidado com as aspas, porque as vezes ao copiar e colar elas mudam o formato, nesse caso você terá que repor manualmente. São aspas duplas comum
OBS:
A lista, que Ă© o sumário, irá no topo do cĂłdigo. Se quisĂ©ssemos referenciar as âncoras acima a partir de outro documento, terĂamos apenas que complementá-la com o trecho #nome-da-âncora.
Por exemplo:
Crie um documento html (com o nome que preferir) coloque o código seguinte, que as âncoras irão chamar a página ancoras.html a partir dos trechos definidos depois do caractere “#”.
<h3>CHAMA Ă‚NCORA</h3><br>
<a href=”ancoras.html#primeira”>Primeira âncora da página âncoras</a>
<br>
<a href=”ancoras.html#segunda”>Segunda âncora da página âncoras</a>
<br>
<a href=”ancoras.html#terceira”>Terceira âncora da página âncoras</a>
<br>
OBS:
A propriedade target, define se a página abrirá eu uma nova janela ou na mesma janela.
Experimente colocar nos links target=”_blank”
Na próxima aula continuaremos, até lá.
