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

Lordfire
em Tutoriais de Websites

Lordfire

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

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:

OiOW3ZH.jpg

 

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>

WNLBKfK.jpg

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

 

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>

BTV8Het.jpg

 

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>

NXPNzMT.jpg

 

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>

Ee9HWga.jpg

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! :p qualquer dúvida, responderei de prontidão.

21nl25z.png

Lordfire

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

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

Sartori's Fotografia
avatar
Artesão
Artesão

INFOS

Grupo: ArtesãoRegistrado: 20/01/13Posts: 116Char no Tibia: Alia Dori

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!

Felipe Sartori Gorreri,

felipe@felipesartorifotografia.com

www.felipesartorifotografia.com

@feelipesartori

 

Estagiário (22/01/2013)

Moderador (24/02/2013)

Saída da Equipe (20/03/2013)

Tonynh

Miau! É isso ai!
avatar
Herói
Herói

INFOS

Grupo: HeróiRegistrado: 07/01/08Posts: 2282Gênero: MasculinoChar no Tibia: Tonynh

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

Estudante de TI
avatar
Marquês
Marquês

INFOS

Grupo: MarquêsRegistrado: 30/10/11Posts: 1153Gênero: Masculino

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

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

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 :D

Bloxx

Apenas os fortes conhecem \/
avatar
Artesão
Artesão

INFOS

Grupo: ArtesãoRegistrado: 10/08/12Posts: 114

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. happy.png

3jgm0.gif
Meus Trabalhos:


Fazendo Ícone Próprio para seu Client: http://www.xtibia.co...51#entry1445751

Hamachi - Tutorial Completão: http://www.xtibia.com/forum/topic/226660-hamachi-tutorial-completao/
dps faço outros...

 

 

Paul-Walker-Barbie-car-drift.gif

Lordfire

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

Quer postar algo?

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

 

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 :p

DiogoTemporario

Ex Bom Usuário
avatar
Marquês
Marquês

INFOS

Grupo: MarquêsRegistrado: 05/05/09Posts: 1231

Vou devagar porque tenho mais o que fazer da vida

 

icon_lol.gif

guilhermeip

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 31/10/11Posts: 24

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

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

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

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 31/10/11Posts: 24

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?

Lordfire

TFS Maintainer
avatar
Lenda
Lenda

INFOS

Grupo: LendaRegistrado: 04/10/06Posts: 2605Gênero: MasculinoChar no Tibia: Knight Orion

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.