Como criar uma lista ordenada em HTML - HTML Básico


Quando vamos criar vários exemplos de um determinado assunto, usamos as listas. Mas, vemos por aí, que as pessoas não ordenam estas listas, o que não é muito bonito de se ver. Hoje aprenderemos uma coisa muito simples, muito fácil, e muito útil, como criar listas ordenadas em HTML. Nós sabemos que, a maioria dos programas editores de HTML cria automaticamente, com um piscar de cliques todas estas listas, mas, e o conhecimento, onde fica? Você deve aprender os códigos! Então, vamos lá?

Primeiro, vamos dar um exemplo que uma lista comum:

- Nome
- CPF
- RG
- Telefone
- Endereço
- Bairro
- Cidade
- Estado
- País

A lista acima, é uma lista simples, certo? Agora, vamos ordena-la:
  • Nome
  • CPF
  • RG
  • Telefone
  • Endereço
  • Bairro
  • Cidade
  • Estado
  • País

Não ficou mais bonito? Mais organizado? De fácil leitura? Então, vamos aos códigos!

Primeiro, inicie a ordenação com o comando:

<ul>

Para cada linha desta lista, você deve incluir e fechar o comando:

<li>

Ao final de cada linha, você deve fechar o comando "li" e, ao final da lista, você deve fechar o comando "ul". Não entendeu? Veja o exemplo abaixo:

<ul>
<li>Nome</li>
<li>CPF</li>
<li>RG</li>
<li>Telefone</li>
<li>Endereço</li>
<li>Bairro</li>
<li>Cidade</li>
<li>Estado</li>
<li>País</li>
</ul>

Os que estão em negrito, são para informar que estão abertos e fechados. Todos os comandos que forem aberto devem ser fechados, caso contrário, não dará certo.
E agora, pronto para deixar todas as listas do seu blog organizadas?



5 comentários:

  1. Bom dia, como posso criar uma lista de cadastro de usuários no meu blog obrigado!

    ResponderExcluir
  2. Respostas
    1. Siga os passos direitinho que você conseguirá ;)

      Excluir
  3. Eu queria criar uma lista em ordem alfabetica com as letras em cima

    ResponderExcluir

Visualizações dinâmicas

Arquivo do blog

Estamos aqui também

Copyright© 2010 - 2013 - Redes e Blogger - Todos os direitos reservados.

Redes e Blogger é orgulhosamente desenvolvido com Blogger


Termos de uso | Política de Privacidade | Mapa do blog

Template by Dicas Blogger | Modified by Wilamis Rogério