html Aula 2 - Listas ordenadas, listas não-ordenadas, listas de definição

[Lordfire 309]

Se você não acompanhou a aula anterior, faça isso agora: http://www.xtibia.co...inks-e-imagens/

 

Para organizar as coisas, o HTML nos permite estruturas básicas de listas e tabelas. Vou começar pelas listas:

 

Listas

As listas são divididas em 3 tipos: temos as listas ordenadas (que são tipo 1, 2, 3 ou i, ii, iii); temos as listas não-ordenadas, que são as com pontinho na frente; e temos as listas de definição, que são listas de itens e suas descrições.

 

Listas ordenadas

A tag da lista ordenada é <ol> (ordered list), e cada um dos itens é um elemento <li> (list item). Assim:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

O resultado é este:

 

As listas ordenadas tem 5 tipos diferentes de ordem: por números, letras maiúsculas, letras minísculas, números romanos maiúsculos, e números romanos minúsculos. Também existem diversos outros tipos especiais, como ideogramas japoneses, números armênios, letras gregas... mas só vou tratar destes 5. Você pode me perguntar se quiser outro.

Para alterar, você tem que colocar, no atributo style, o código list-style-type: <tipo>. Nos 5 tipos, na ordem:

<ol style="list-style-type: decimal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol style="list-style-type: upper-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol style="list-style-type: lower-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol style="list-style-type: upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol style="list-style-type: lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Usar o atributo style é, essencialmente, usar CSS. Então, que isso sirva como introdução para nossas aulas futuras

 

Listas não-ordenadas

Já as listas não-ordenadas tem apenas 3 tipos: círculo, disco e quadrado. Da mesma forma que nas listas ordenadas, você usará o list-style-type, só que a tag é <ul> (unordered list):

<ul style="list-style-type: circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul style="list-style-type: disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul style="list-style-type: square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

 

Em ambos os casos, tanto listas ordenadas quanto listas não-ordenadas, você pode definir list-style-type como none para não ter nenhuma marcação:

<ul style="list-style-type: none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

 

Listas de definição

O terceiro tipo de lista, a lista de definição (<dl>), é diferente: você tem um item (<dt> (definition topic)), e debaixo dele adiciona a(s) descrição(ões) (<dd> (definition description)). Assim:

<dl>
<dt>Café</dt>
	<dd>Quente</dd>
	<dd>Preto</dd>
<dt>Leite</dt>
	<dd>Frio</dd>
<dt>Chocolate</dt>
	<dd>Melhor se quente</dd>
	<dd>Marrom</dd>
</dl>

Pode ter quantas descrições forem necessárias. O recuo é automático e não há configuração.

 

Não vou definir uma tarefa pra essa aula, mas testem, mexam com as listas, insiram uma lista dentro da outra pra ver como fica, vejam os resultados, pratiquem! qualquer dúvida, responderei de prontidão.

[Bernardo 87]

Links Úteis

http://www.w3schools.com/cssref/pr_list-style.asp

http://www.w3schools.com/cssref/pr_list-style-type.asp

[DiogoTemporario 91]

Meio simples, mas bom.

 

É pecado fazer isto?

 

<a name="Indice"><dt><h2># Índice</h2></dt></a>

 

Como em: http://www.teste442.xpg.com.br/aulas/2/#Indice

Editado Janeiro 29, 2013 por DiogoTemporario

[Lordfire 309]

Meio simples, mas bom.

 

É pecado fazer isto?

 

<a name="Indice"><dt><h2># Índice</h2></dt></a>

 

Como em: http://www.teste442....aulas/2/#Indice

Usando âncora só pra localizar pela página não precisa fechar. Nesse link tu só fez uma coisa errada, colocar o link por fora dos <dd>, link deve ficar o mais interno possível.

[FelipeGorreri 12]

Muito bom!

Estou fazendo o curso, a primeira parte que era HTML já acabou e muita coisa interessante.

Agora estamos entrando na parte de CSS, é meio chatinho mas é fácil também!

[Tonynh 514]

Olha aí o Admin mais eficiente do Éks auhauha

Não é todo dia que vemos administradores postando conteúdos, e principalmente bons conteúdos. =)

Acho que o mais legal disso, foi quando você resolveu assumir a seção ao invés de deixá-la abandonada com a saída do ex-coordenador.

 

Parabéns Ranieri, ótimo trabalho brother.

 

#Tópico

Realmente é algo bem simples, mas isso é uma "escola" de web. Temos que ir devagar mesmo.

[AlexandreKG 134]

Foi como o Tony disse,temos que ir devagar para todos aprenderem.É mais facil assim,pois os membros conseguem se ligar no conteudo e aprender com mais facilidade.Do que ir adiantando e encinando tudo de uma ves só.

[Lordfire 309]

Olha aí o Admin mais eficiente do Éks auhauha

Não é todo dia que vemos administradores postando conteúdos, e principalmente bons conteúdos. =)

Acho que o mais legal disso, foi quando você resolveu assumir a seção ao invés de deixá-la abandonada com a saída do ex-coordenador.

 

Parabéns Ranieri, ótimo trabalho brother.

 

#Tópico

Realmente é algo bem simples, mas isso é uma "escola" de web. Temos que ir devagar mesmo.

Valeu broder x)

 

Vou devagar porque aí TODOS vão chegar no mesmo nível lá na frente. Temos gente que já sabe (como o Bernardo) e só acompanha, mas tem gente que não sabe nada e vai acompanhar também

[Bloxx 15]

opa ta aí mais uma aulinha ^^ por enquanto eu acho (eu disse acho) que estou indo bem, até porque eu já sabia algumas coisas de HTML por isso que eu entrei na escolinha, pra aprender mais, obrigado de novo!

 

Abraços.

[Lordfire 309]

Quer postar algo?

Faça uma lista, por exemplo, do seu char no Tibia e as informações dele

 

Aliás, é sempre bom postar o que vocês fazem pra eu conferir se não há nada fora dos padrões, sempre passa algo batido na hora que eu escrevo

[DiogoTemporario 91]

Vou devagar porque tenho mais o que fazer da vida

 

[guilhermeip 0]

Muito loco, parabéns ae. Primeira vez que to vendo sobre isso, ta muito dahora..

mais uma pergunta, o que seria CSS, ele se envolve no Html? como funciona

[Lordfire 309]

Muito loco, parabéns ae. Primeira vez que to vendo sobre isso, ta muito dahora..

mais uma pergunta, o que seria CSS, ele se envolve no Html? como funciona

CSS é uma linguagem de estilos para HTML. Você pode configurar margens, bordas, cores, fundo, tamanho, distância de outros elementos, fazer texto ficar em caixa alta... centenas de coisas diferentes.

[guilhermeip 0]

vlw, Rep+ (:

Ta mto legal a escola, mas sai de quanto em quanto tempo uma aula diferente? e o negocio do skype, ainda falta arrumar ou ja esta tendo?

Editado Fevereiro 1, 2013 por Guilhermeip

[Lordfire 309]

Não tô usando Skype, pouca gente quis passar. Dependendo da complexidade, vou dar mais tempo pra assimilar o conteúdo, e se precisar de tarefa também posso dar um pouco mais de tempo, mas em geral 1 por semana.