Listas OL e UL - @Curso em Vídeo HTML5 e CSS3

Você sabe como criar listas em HTML5? Conhece as listas ordenadas e as listas não ordenadas? Sabe personalizar as listas e escolher os seus marcadores? Veja a resposta para todas essas perguntas assistindo esse vídeo até o final.

Tópicos deste vídeo:
00:00 - Capítulo 09, aula 01
00:16 - Onde usamos listas?
01:07 - Curso grátis de criação de aplicativos
02:09 - Iniciando um exemplo de lista
04:16 - Listas ordenadas
06:23 - Personalizando listas ordenadas
08:33 - Me segue lá no Instagram
09:00 - Listas não ordenadas
10:17 - Personalizando listas não ordenadas
11:45 - Outros tipos de lista

O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.

Acesse o material de apoio em PDF:

Receba notificações de novos vídeos:

Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:

Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:

Torne-se apoiador do projeto:

Siga-nos nas redes sociais:

Conheça os patrocinadores desse curso:

#cursohtml5css3 #modulo01 #C09A01

[guilhermeribeiro]

Um atalho legal pra cria varias tag iguais com uma digitação e o "*"
Um exemplo as <li> voce digita li*7 por exemplo e vai cria 7 <li> quando der enter

[brunoosio]

pra quem ta aprendendo html desde o começo, ja fique em mente que ul é uma das coisas mais uteis de um site

[GuilhermeSilva-ixmr]

Para quem está vendo o vídeo agora, eu dei uma olhada na documentação MDN que o VsCode sempre recomenda e o parâmetro "type" dentro do <ul> ou <ol> está ultrapassado. O correto é colocar esse parâmetro dentro das CSS. Fica mais ou menos assim:

<style>
ol {
list-style-type: 1;
}

ul {
list-style-type: circle;
}
</style>

Valeu pessoal, ótimo curso para vocês!

[leonardomotta]

Um bom exemplo é uma receita gente. A não ordenada nós usamos nos ingredientes necessários, nquanto a ordenada usamos no modo de preparo, no qual há uma ordem a ser seguida.

Olhem:

<ul>
<li> 1 Ovo
<li> 1/2 Xícara de chá de leite
<li> 2 Xícaras de farinha
<li> etc etc
</ul>
<ol>
<li>Quebre o Ovo
<li> Coloque o ovo
<li> etc etc.
</ol>

[guilhermegnunes]

Esse conteúdo foi tão confuso no primeiro semestre de ADS, até a professora ficava perdida na explicação/correção. Já aqui parece ser tudo tão fácil, eu mal vejo a aula e consigo pegar tudo de primeira, Guanabara é fera demais!!!

[oGomesdeJesus]

Queria deixar minha humilde contribuição por aqui, eu tenho o costume de fazer bastante marcações nos códigos, um atalho legal pra não ficar precisando digitar " <!- - " é selecionar todo texto que servirá como marcação e pressionar SHIFT + ALT + A.
Espero ter ajudado.

[nandoangelo]

*MOTIVOS PARA VER ESSE VÍDEO:*
• Ver como listas são importantes
• Saber quais tipos de listas existem
• Aprender a personalizar listas facilmente
• (adicione mais motivos no comentário abaixo)

[Davi-yzhl]

As vezes eu penso que o Guanabara é um Anjo mn, namoral, Que Curso Foda!

[alexandrecsx]

Muito bom o curso, não vejo a hora de entrarmos em CSS! 👏👏👏

[RickSimon]

Estou fazendo o curso agora em 2022, estou muito satisfeito com a didática, da forma geral como o curso é ministrado!
E que show de bola né, o curso é inteiramente gratuíto!
Guanabara, você é o cara que vai me fazer, finalmente, entrar para área de TI, e isso é algo que não vou esquecer jamais!
Valeu demais!

[brunolima]

25º aula em 19/07/2024 e aprednedno muitooo, obrigado Marcelo Guanabara por disponibilizar esse conhecimento, mil vezes melhor que muito curso pago. Deus abençoe você mais e mais irmão.

[jailsoncrepaldi]

Juntei esta aula com aquela das imagens e fiz uma lista de imagens usando o img dentro do <li> da lista ordenada ficou legal e me deu umas boas ideias

[murilomendes]

Se você tiver dúvida de como ele vai pro final da linha tão rápido, é só apertar a tecla "end" no seu teclado, geralmente esta em cima das setinhas

[lucasdias]

Uma coisa bacana é apertar Shift+alt+seta pra baixo para duplicar a linha, assim é possivel fazer varias list itens sem muito esforço.

[juninho]

Grande Professor!
Eternamente grato pela sua dedicação em passar conhecimento p/ todo mundo!
Estudo Análise e Desenvolvimento de Sistemas, mais sem dúvida nenhuma se não fosse seu canal estaria completamente perdido.
Ainda tá pra existir uma didática tão fera quanto à sua.
Gratidão eterna pelo seus ensinamentos.
Abraços!

[arthur-vcil]

Guanabara é um gênio, bagunçou a ordem dos exercícios exatamente para poder dar um exemplo prático do uso de listas ordenadas. Um homem á frente de seu tempo.

[unknown.code]

Amei a aula!
Oh pessoal, eu estou fazendo assim:

Tenho um site meu que já estava desenvolvendo há bastante tempo (desde que comecei a seguir os cursos de HTML5 e CSS3 do Gustavo Guanabara) tudo que estou aprendendo aqui estou indo adicionando no meu site afim de treinar já criando um site... Como por exemplo, tudo que foi abordado aqui, também botei lá no meu site

[cursos-hnnm]

Atualmente estou com 13 anos, e já me identifico muito com programação!
Estou gostando muito do curso e vou assistir ate o módulo 4 (estou esperando o 5 começar)
Desejo boa sorte a todos que estão vendo este comentário e muito sucesso!

[festejodafarinha-manoa]

<h1>Listas ordenadas</h1>
<ol>
<li>Acordar</li>
<li>Escovar os dentes</li>
<li>Tomar café</li>
<li>Ir para o trabalho</li>


</ol>

<h2>
Listas não ordenadas</h2>
<ul>
<li>Pão</li>
<li>Açúcar</li>
<li>Leite</li>
<li>Arroz</li>
</ul>

valeu, , gustavo. tô TREINANDO AS AULAS. 👏👏👏🤙✍

[moi]

Para escolher quantos <li> você vai usar, você pode usar ol *OU* ul>li*4

Você pode colocar qualquer número de acordo a sua necessidade no lugar do 4 que vai ser gerado automáticamente pré determinados "li"