Primeiros Passos

WEB FAQ #1: Abrir Link em Nova Janela e Listas Numeradas

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Quem começa a trabalhar com blogs sem ter passado antes por um curso básico de desenvolvimento web vai, COM 100% de CERTEZA, ficar perdido quando precisar de mais do que os editores WYSIWYG¹ oferecem. Felizmente o Google (e o Bing, e o Ask, etc) é amigo e acaba respondendo quase todas as dúvidas, mas até estar acostumado com essas bases, o usuário perde tempo com questões elementares.

Se você encara seu projeto como profissão, é mais que recomendável que faça um curso. Não precisa ser muito aprofundado – a não ser que pretenda algo mais sério como desenvolvedor – mas deve deixá-lo preparado para resolver ao menos problemas simples com HTML e CSS – e se possível um pouco de linguagens como JavaScript e PHP não fará mal.

Vou começar a reunir algumas soluções de dúvidas comuns para quem escreve ou cuida de blogs e sites. Vamos chamá-las de WEB FAQ e apresentá-las nesse formato. Se você já tem conhecimento avançado, elas são banais, mas úteis para iniciantes e recém-iniciados.

Nesse primeiro artigo, vamos criar links que abrem em novas janelas e quebrar listas numeradas e reiniciá-las do mesmo ponto através de dois métodos.

¹ sigla para What You See Is What You Get, como são conhecidos softwares que  mostram em tempo real, durante a edição, a aparência que o documento terá depois de pronto. Exemplos: Dreamweaver, Word, o editor visual do WordPress, etc.

Q: Como abrir link em nova janela?

R: você já deve saber (se não, saiba o quanto antes!) que a estrutura básica de um link em HTML é algo assim:

<a href="aqui-o-link">Texto âncora</a>

Isso vai criar um link simples, que abre na mesma janela, ou seja: quando o visitante clicar, a página será carregada no mesmo lugar da atual (que dá lugar à outra, claro).

Esse é o comportamente padrão, mas às vezes pode ser ruim, levando o leitor embora do seu blog. Se quiser que a nova página abra numa nova janela ou guia do navegador, sem fechar a sua, acrescente um target (alvo). Fica assim:

<a href="aqui-o-link" target="_blank">Texto âncora</a>

Aproveite que começou a mexer no código e coloque também um título no link. Ele vai aparecer para os motores de busca e também quando o visitante passar o mouse.

<a href="aqui-o-link" target="_blank" title="Título do link">Texto âncora</a>

Q? Como parar e reiniciar lista numerada?

R: listas numeradas são simples de criar, mas às vezes geram uma situação difícil de ser contornada (se o usuário não souber esse truque): como interromper a lista, inserir um ou mais parágrafos, e continuá-la no número em que ela foi interrompida?

Há duas soluções. Uma está em desuso e outra é a recomendada pelos padrões.

Solução em Desuso

Começando com uma lista em HTML: a marcação ol inicia uma lista numerada (ordered list). Cada li abre um item da lista, devendo ser fechado ao fim de cada item (/li). No fim da lista, feche-a também (/ol).

Exemplo: o código…

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>

…vai gerar isso:

  1. Primeiro item da lista
  2. Segundo item da lista
  3. Terceiro item da lista
  4. Quarto item da lista
  5. Quinto item da lista

Se fecharmos a lista, ela não vai manter a numeração de onde foi parada se quisermos “reabri-la” depois. Exemplo:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>
<p>Uma interrupção na lista com conteúdo adicional</p>
<ol>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>
  1. Primeiro item da lista
  2. Segundo item da lista
  3. Terceiro item da lista

Uma interrupção na lista com conteúdo adicional

  1. Quarto item da lista
  2. Quinto item da lista

Para reiniciar a lista por um certo número, use:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>
<p>Uma interrupção na lista com conteúdo adicional</p>
<ol start=4>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>
  1. Primeiro item da lista
  2. Segundo item da lista
  3. Terceiro item da lista

Uma interrupção na lista com conteúdo adicional

  1. Quarto item da lista
  2. Quinto item da lista

Notou o maroto “start” ali né? Ele faz aquela lista começar pelo número indicado. Não precisa ter criado outra lista antes: se quiser começar qualquer lista por qualquer número, é só usar.

Solução Recomendada

Como usar estilização dentro do conteúdo é fora do padrão, o melhor quando possível é usar CSS, com a propriedade counter-reset. No mesmo exemplo de lista anterior:

<style type="text/css">
body {counter-reset: item;}
ol#4 {counter-reset: item 3}
li {display: block}
li:before {
counter-increment: item;
content:counter(item) ". ";
}
</style>

Primeiro a estilização da lista, explico daqui a pouco. E a nossa lista padrão, agora com um id na segunda parte, veja:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>
<p>Uma interrupção na lista com conteúdo adicional</p>
<ol id="4">
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>

Com tudo isso na página, vamos obter:

  1. Primeiro item da lista
  2. Segundo item da lista
  3. Terceiro item da lista

Uma interrupção na lista com conteúdo adicional

  1. Quarto item da lista
  2. Quinto item da lista

O counter-reset na tag body inicia as listas por itens quando a página é carregada. Criei um id na segunda parte da lista (id=”4″) e dei-lhe um estilo counter-reset com valor 3.

Mas a lista começou com 4” – isso porque o counter-reset é diferente do start visto antes: aquele determina o número inicial da lista, enquanto o reset inicia a contagem a partir dali. O counter-reset sem valor na body, por exemplo, começou com zero e deu valor 1 ao primeiro item da lista. Já o counter-reset 3 começou com esse valor como “ponto zero” e deu o valor 4 ao primeiro item da lista.

O before antes de cada item acrescenta o valor do item seguido por um ponto e um espaço (counter(item) “. “).

Se a estilização afetar outras listas da sua página, é só tornar os id mais específicos. Por exemplo, atribua uma classe às listas que devem ser afetadas e aponte no CSS, assim:

<style type="text/css">
body {counter-reset: item;}
ol#4 { counter-reset: item 3}
.lista-numerada li { display: block }
.lista-numerada li:before {
counter-increment: item;
content:counter(item) ". ";
}
</style>

<ol class="lista-numerada">
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>
<p>Uma interrupção na lista com conteúdo adicional</p>
<ol id="4" class="lista-numerada">
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>

Se tiver alguma dúvida sobre o que foi postado, ou sugestões para próximas edições do FAQ, comente.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin