Vamos ver que também é possível, e as vezes necessário, que façamos com que uma lista esteja aninhada dentro de outra.
Como criar listas em ordem alfabética em HTML - O atributo style="list-style"
No tutorial de HTML passado de nosso curso, vimos que era possível criar listas ordenadas através da tag <ol> (ordered list).Porém, a ordem era numérica, e nem sempre queremos esse tipo de ordem.
Alguns artigos científicos e outros tipos de documento exigem que listemos informações organizadas numa ordem alfabética (A, B, C, D etc). Isso pode ser feito através do atributo style, da tag <ol>, que como o próprio nome pode sugerir, define o estilo de ordenamento.
O valor do atributo style é o "list-style: estilo", onde 'estilo' é o estilo de nossa lista.
Por exemplo, para que ele fique em ordem alfabética, com letras maiúsculas é: upper-alpha
Caso desemos a ordenação com letras minúsculas: lower-alpha
Assim, um site que mostra a ordem das coisas que você deve aprender para ser um webmaster, em ordem alfabética, com letras maiúsculas seria:
<!DOCTYPE html> <html> <head> <title> O que aprender para criar um site </title> <meta name="description" content="Veja o que é necessário aprender para ser um webmaster"> </head> <body> <h1>Lista do que e necessario aprender para criar sites profissionais:</h1> <ol style="list-style:upper-alpha"> <li>CSS</li> <li>PHP</li> <li>JavaScript</li> <li>HTML 5.0</li> <li>MySQL (Banco de dados)</li> </ol> </body> </html>Se desejar que as letras fiquem em minúsculo, usar "lower-alpha" no lugar e "upper-alpha".
Veja que não há dificuldades em decorar, basta aprender o que essas palavras significam em inglês "lower" é baixo, menor, minúsculo e "Upper" é maiúsculo. O "alpha" é de alfabeto.
Há uma série de valores para o list-style, pois há diversos tipos de alfabetos e sistemas numéricos ao redor do mundo.
Experimente colocar 'armenian' para ver que bacana. Para uma lista mais completa de valores, acesse:
http://www.w3schools.com/cssref/pr_list-style-type.asp
Como alterar o marcador das listas com list-style-type
Pois bem, ainda no atributo 'style', agora na tag <ul>, podemos escolher outros formatos para os bullets.
Escolhemos através do valor list-style-type:
<ul style="list-style-typo:TIPO">
Onde o tipo pode ser, por exemplo: circle, square, disc e none
Ou seja, um círculo (sem ser preenchida), um quadrado, um disco (um círclo preenchido) ou nenhum marcador.
Veja como ficaria o código HTML com essas 4 opções para os marcadores:
<!DOCTYPE html> <html> <head> <title> Diferentes tipos de marcadores </title> <meta name="description" content="Aprenda a alterar o marcador das listas não ordenadas de listas em HTML"> </head> <body> <h1>Tipos de marcadores (bullets)</h1> <ul style="list-style-type:circle"> <li>circle</li> </ul> <ul style="list-style-type:square"> <li>square</li> </ul> <ul style="list-style-type:disc"> <li>disc</li> </ul> <ul style="list-style-type:none"> <li>none</li> </ul> </body> </html>
Onde o resultado é:
- circle
- square
- disc
- none
Vamos aproveitar este trecho deste tutorial para usar no próximo item, sobre listas aninhadas.
Como aninhar listas em HTML
Algumas vezes será necessário criar listas dentro de itens de uma lista, como se aninhássemos uma lista em outra, como fizemos quando ensinamos como aninhar tags em HTML.Pois bem, isso é possível de ser feito em HTML, pois o navegador vai saber interpretar de maneira correta esse aninhamento.
A parte de HTML, e sua lógica, é bem parecida com o que havíamos feito com as tags.
Na verdade, vamos aninhar tags novamente, as tags de lista: <ol> e <ul>
Por exemplo, no menu superior é possível ver as seções de nosso curso de HTML.
Vamos usar algumas delas: Introdução, Básico, Textos, SEO e Monetização
Vamos criar uma página como se fosse o índice de um livro, com os capítulos e a subseções destes.
Vamos enumerar essas seções, com a tag <ol>. Vamos fazer isso com o seguinte código:
<ol> <li>Introducao</li> <li>Basico</li> <li>Textos</li> <li>SEO</li> <li>Monetizacao</li> </ol>Sem segredos, ok? Continuemos.
Agora vamos criar outra lista, que são as páginas que estão dentro da seção "Introdução".
Vamos chamar elas de: "O que é HTML", "O que é XHTML" e "O que é CSS".
Essa lista seria:
<ol> <li>O que e HTML</li> <li>O que e XHTML</li> <li>O que e CSS</li> </ol>Porém, precisamos aninhar essa lista dentro do item "Introdução", da lista passada.
Para isto, basta colocar o código desta segunda lista abaixo do item "Introdução". Use a tabulação (identação) para icar mais fácil de visualizar. Veja só como ficou nosso código:
<ol> <li>Introducao</li> <ol> <li>O que e HTML</li> <li>O que e XHTML</li> <li>O que e CSS</li> </ol> <li>Basico</li> <li>Textos</li> <li>SEO</li> <li>Monetizacao</li> </ol>O resultado é:
- Introducao
- O que e HTML
- O que e XHTML
- O que e CSS
- Basico
- Textos
- SEO
- Monetizacao
Vamos agora para o conteúdo da seção "Básico" em nossa lista.
Vamos colocar a seguinte lista:
<ol> <li>Como se criar um site ?</li> <li>Que programas sao necessarios para se criar um site ?</li> <li>Com criar seu primeiro site - "Ola mundo!"</li> </ol>Colocando na lista maior, abaixo do item "Basico":
<ol> <li>Introducao</li> <ol> <li>O que e HTML</li> <li>O que e XHTML</li> <li>O que e CSS</li> </ol> <li>Basico</li> <ol> <li>Como se criar um site ?</li> <li>Que programas sao necessarios para se criar um site ?</li> <li>Com criar seu primeiro site - "Ola mundo!"</li> </ol> <li>Textos</li> <li>SEO</li> <li>Monetizacao</li> </ol>O resultado deste código HTML é:
- Introducao
- O que e HTML
- O que e XHTML
- O que e CSS
- Basico
- Como se criar um site ?
- Que programas sao necessarios para se criar um site ?
- Com criar seu primeiro site - "Ola mundo!"
- Textos
- SEO
- Monetizacao
Exercício de HTML
Questão 1:
Complete com listas aninhadas os itens "Textos", "SEO" e "Monetizacao".Questão 2:
Note que na nossa lista, na seção Básico, tem uma sub-seção chamada "Que programas são necessários para se criar um site ?".Crie uma lista de programas que podem ser usados e coloque esta lista (não precisa ser numerada, use o <ul> mesmo) dentro da sub-seção. Que deverá ficar como mostra a figura:
Você consegue reproduzir isto?
Nenhum comentário:
Postar um comentário