HTML do básico ao avançado parte 7

Gunnar CorreaGunnar Correa27/02/2015 às 02:10:29 - 8.563 acessos

Conheça e aprenda a utilizar os modelos de listas disponíveis no HTML, além de mesclar essas estruturas.


Listas ordenadas são muito utilizadas, nos tempos atuais ela é usada para substituir as tabelas, pois não se usa mais tabelas para exibir algo em linha, esta responsabilidade cabe às listas.

Existem listas ordenadas e não ordenadas, ambas são fácil de entender.

Vamos começar com lista ordenada, abaixo segue nosso código:

<ol>
	<li>Mouse</li>
	<li>Teclado</li>
	<li>Caixa multim&iacute;dia</li>
	<li>Monitor</li>
	<li>Estabilizador</li>
</ol>

Nosso resultado será:

Lista ordenada HTML 5

Ele enumera cada item de nossa lista, onde:

  • ol - (Ordered List) Lista ordenada
  • li - Item de lista

Agora vamos ver as listas não ordenadas, ela é praticamente a mesma coisa que ordenada o que muda é que ao invés de usar <ol>, vamos usar <ul>.

Veja o código e sua utilização abaixo.

<ul>
     <li>Processador</li>
     <li>Memoria</li>
     <li>HD</li>
     <li>Cooler</li>
     <li>Placa mãe</li>
</ul>

Usando lista não ordenada no HTML

Podemos incluir novas sequências de listas dentro de outras listas, isso é muito comum na utilização de menus de navegação Dropdown.

<ul>
    <li>Processador</li>
    <li>Memoria</li>
    <li>HD</li>
    <li>Cooler</li>
    <li>
       <ul>
           <li>Cabo Sata</li>
           <li>Fonte de alimentação</li>
           <li>Bateria</li>
           <li>Cabo IDE</li>
        </ul>
     </li>
</ul>

Lista dentro de lista no HTML


lista ordenada html hyper text tutorial web site página documento ul ol li atributos

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com


Aprenda a Planejar seus Jogos

Aprenda a planejar e documentar seus jogos com o eBook criado pela SatellaSoft e nunca mais se perca em seus projetos.

Quero obter a minha cópia.
X