Criando um site – Parte 4

Bem-vindo a 4ª parte do tutorial “Criando um Site”, de 15 partes. Se você não viu as partes anteriores, veja:

Hoje você vai aprender como se criam listas definidas e tabelas numa página web. Vamos lá

Listas definidas

Lembra que, na parte 2 do tutorial, eu prometi ensinar listas definidas nesta parte do tutorial. Eu vou ensinar agora!

As listas definidas são representadas pela tag <dl>. Elas são muito usadas para fazerem níveis diferentes de índices, como abaixo

Nível 1
Nível 1.1
Nível 1.2
Nível 1.3
Nível 2
Nível 2.1
Nível 2.2
Nível 2.3

Sabe o que é isso? Uma lista definida! Os níveis “Nível 1” e “Nível 2” são os níveis, e os “Nível 1.1” e “Nível 1.2” são os sub-níveis. Para fazer um nível samos a tag <dt> , e para fazer um subnível, a tag <dd>. Então, o código-fonte do exemplo ficaria assim:

<dl>
<dt>Nível 1</dt>
<dd>Nível 1.1</dd>
<dd>Nível 1.2 </dd>
<dd>Nível 1.3</dd>

<dt>Nível 2</dt>
<dd>Nível 2.1</dd>
<dd>Nível 2.2</dd>
<dd>Nível 2.3</dd>
</dl>

Viu? OK, então, você pode aprender mais um truquezinho para fazer um índice legal, as âncoras!

As âncoras (não, não são as âncoras do navio) são usadas para marcar uma parte da página com o intuito de um hiperlink redirecionar até este pedaço. O exemplo abaixo é uma âncora que o redirecionará ao título das listas definidas.

Exemplo

Viu? Mas, como se faz isso?

Se você respondeu “usando a tag <a>”, acertou! Como você pode ver, aquilo era um hiperlink. A tag <a> cria os hiperlinks! Mas usando qual atributo?

Na verdade, nós usamos dois atributos, mas não na mesma tag. Em tags <a> diferentes. Um é o atributo name, que marcará o local da âncora,  e o outro é o bem conhecido href, que redirecionará ao local da âncora. É assim que se usa (código comentado):

<a name="ancora">
<!-- Aqui é onde se marca a âncora. Usando a tag <a> com o
atributo name. Não se esqueça de fechar a tag! --> </a>
<h1>Título 1</h1> <!-- Este é um título "de enfeite" -->

<!-- Um pedaço da página -->
<a href="#ancora">Título 1</a>
<!-- O link acima redireciona a âncora lá em cima. -->

Como você pode ver, a tag <a name=…> cria a âncora. Você deve fechar a tag se não a âncora fica zuada. Continuando, a tag <a name=> cria a âncora e a tag <a href=…> redireciona a ela, com uma peculiaridade: o caractere “#”.

Esse caractere é o responsável por redirecionar o link à âncora. Mas deve ter uma âncora com este nome, o nome depois do caractere ‘#’. A âncora deve ficar aparecendo na barra de endereços, assim:

Viram, logo depois da barra “/” o “#exemplo”?

Bom, na próxima página, eu estarei explicando uma teoria sobre tabelas HTML e ensinando como fazer.

Anúncios

Publicado em 12/07/2010, em Nível médio, tutoriais e marcado como , , . Adicione o link aos favoritos. 2 Comentários.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: