Listas ordenadas em html
Usando as listas ordenadas em html
As listas ordenadas no HTML podem ser usadas de várias maneiras. Os quatro exemplos a seguir demonstrarão alguns de seus cenários de uso:
Exemplo #1: Uso simples das listas ordenadas
Neste exemplo, aprenderemos a criar uma lista simples ordenada em HTML. Para isso, você terá que passar pelo script HTML mostrado na imagem a seguir:
As listas ordenadas no HTML podem ser criadas usando a tag "OL". Depois de aplicar esta tag, você menciona todos os elementos desta lista ordenada, envolvendo -os na tag "Li". Neste exemplo, criamos uma lista ordenada de três cursos. Portanto, usamos a etiqueta "OL" seguida pelas três tags "Li" neste script.
Então, depois de salvar este script e executá -lo em nosso navegador, a seguinte página da web aparece em nossa tela. Você pode ver que nossos cursos especificados são exibidos na forma de uma lista ordenada nesta página da web.
Exemplo #2: listas ordenadas com letras maiúsculas
Não é necessário ter apenas a lista ordenada de números. Também podemos ter as listas ordenadas de alfabetos. O script HTML mostrado na imagem a seguir demonstrará como criar uma lista ordenada com as letras maiúsculas em html.
Neste script HTML, exibimos as três direções diferentes na forma de uma lista ordenada. No entanto, desta vez, queremos uma lista ordenada das letras maiúsculas. Portanto, usamos um atributo adicional de "tipo" com a tag "OL" para mencionar o tipo exato da lista ordenada. Equalizamos esse atributo a "A" para criar uma lista ordenada com os alfabetos maiúsculos. Então, simplesmente mencionamos todos os elementos desta lista ordenada com a tag "Li".
Nossa lista ordenada com os alfabetos de maiúsculas é mostrada na imagem a seguir:
Observação: números, respectivamente. No entanto, por padrão, uma lista ordenada no HTML compreende números. Portanto, você não precisa mencionar especificamente o tipo "1" neste caso.
Exemplo #3: listas ordenadas com um ponto de partida aleatório
Às vezes, você não deseja que sua lista de pedidos comece com "1". Em vez disso, você quer ter um ponto de partida aleatório para isso. Para fazer isso, você pode usar o script HTML mostrado na imagem a seguir:
Neste script, queremos que nossa lista de pedidos seja iniciada com o número "10". Portanto, usamos o atributo "Start" com a tag "OL" e a equalizamos para "10". Então, mencionamos os três elementos diferentes com a tag "li".
Nossa lista ordenada com um ponto de partida de nossa escolha que não "1" é mostrado na imagem a seguir:
Exemplo #4: Listas ordenadas aninhadas
Neste exemplo, aprenderemos a criar as listas ordenadas aninhadas, eu.e. Listas ordenadas em uma lista ordenada em HTML. O script HTML para esse fim é mostrado na imagem a seguir:
Neste exemplo, queremos ter uma lista de pedidos externos das diferentes bebidas. Dentro de cada categoria, queríamos ter as listas de ordens internas para mencionar as diferentes bebidas pertencentes a cada uma dessas categorias. Portanto, aninhamos as tags "OL" e "Li" de acordo com o script HTML mostrado na imagem anterior.
A página da web a seguir mostra nossa lista ordenada aninhada em HTML:
Conclusão
Este tutorial é para discutir o uso das listas ordenadas em HTML. Damos a você uma breve introdução das listas ordenadas em HTML, seguidas de alguns exemplos que pretendiam trazer mais clareza a esse conceito. Depois de entender bem esses exemplos, você poderá usar as listas ordenadas em HTML com bastante eficácia.