Meus Tutoriais

Tutoriais, Design, Programação, Linux e Tecnologia.

listas

julho 18th, 2007 by Lucas

html2.jpgAprenda criar listas na sua pagina da web

HTML aceita listas que podem ser numeradas, não numeradas e de definição, sendo possível, inclusive, incluir sub-itens nas listas. Podemos usar as tags <ul> fechadas com </ul> para iniciar listas não numeradas, marcadas apenas com pontos gráficos. Por exemplo,

<h3>Lista não numerada</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<li> Terceiro item
</ul>produzirá:
Lista não numerada
Primeiro item
Segundo item
Terceiro item
Essa tag também pode ser usada para criar sub-itens na lista:

<h3>Lista não numerada com sub-itens</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<ul>
<li> Primeiro sub-item
<li> Segundo sub-item
<ul>
<li> Primeiro item de sub-item
<li> Segundo item de sub-item
</ul></ul>
<li> Terceiro item
</ul>
Eis o resultado:

Lista não numerada com sub-itens
Primeiro item
Segundo item
Primeiro sub-item
Segundo sub-item
Primeiro item de sub-item
Segundo item de sub-item
Terceiro item
Quando desejamos tabular um parágrafo à direita, podemos usar uma lista de definição. Nas listas de definição, podemos usar as seguintes tags: <dl> para iniciar e </dl> para fechar a lista; <dt> para abrir e </dt> para fechar um título; e <dd> para iniciar e </dd> para encerrar um texto. Obs. Essas tags devem ser usadas em conjunto:

<dl>
<dt>Esse é um título da lista</dt>
<dd>Eis aqui um primeiro texto</dd>
<dt>Eis outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>

resultado:

Esse é um título da lista
Eis aqui um primeiro texto
Eis outro Título
Novo texto para a lista
Se quisermos uma lista numerada, usamos: <ol> </ol>

<h3>Lista numerada</h3>
<ol>
<li> Primeiro item da Lista
<li> Segundo item da Lista
<li> Terceiro item da Lista
</ol>

resultado:

Lista numerada
Primeiro item da Lista
Segundo item da Lista
Terceiro item da Lista
Bem… podemos fazer uma salada de listas:

<h1>Salada de listas</h1>
<DL>
<DT>Primeiro item da lista
<DD>Primeiro item da lista de definição
<UL>
<LI>Primeiro item não numerado desta lista
<OL>
<LI>Primeiro sub-item numerado desta lista
<LI>Segundo sub-item numerado desta lista
<UL>
<LI>Primeiro item não numerado do sub-item numerado
<LI>Segundo item não numerado do sub-item numerado
</UL>
<LI>Terceiro sub-item numerado desta lista
</OL>
<LI>Segundo item não numerado desta lista
<LI>Terceiro item não numerado desta lista
</UL>
<DT>Segundo Item da Lista
<DD>Segundo item da Lista de Definição
<OL>
<LI>Primeiro item numerado desta lista
<LI>Segundo item numerado desta lista
</OL>
<DT>Terceiro Item da Lista
</OL>
</DL>

Eis a saída:

Salada de listas
Primeiro item da lista
Primeiro item da lista de definição
Primeiro item não numerado desta lista
Primeiro sub-item numerado desta lista
Segundo sub-item numerado desta lista
Primeiro item não numerado do sub-item numerado
Segundo item não numerado do sub-item numerado
Terceiro sub-item numerado desta lista
Segundo item não numerado desta lista
Terceiro item não numerado desta lista
Segundo Item da Lista
Segundo item da Lista de Definição
Primeiro item numerado desta lista
Segundo item numerado desta lista
Terceiro Item da Lista

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Posted in Programação, html

One Response

  1. juliana

    bom o efeito sureal em fotos e mesmo lindo eu tenho muitas fotos e vou comprar o progama pára fazer isso tudo

    ju

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Newsletter

Receba nossos feeds por email.

  

Categorias

Pesquisar posts


Tutoriais Anteriores

Tags

Anúncio provido pelo BuscaPé
BlogBlogs
VoceSabia

Sites Amigos

Mais Jogos

Jogos de Meninas