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

e vamos começar o nosso estudo em listas E para isso eu preciso que você abra o seu material do Capítulo 9 e deu uma lida antes de começar [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo a mais um vídeo aqui do seu curso de html com CSS e agora nós vamos começar o Capítulo 9 A gente vai ver listas listas como destino Capítulo lá são coisas muito importantes a gente usa a lista no dia a dia eu não faço nada sem lista esse vídeo que a gente tá gravando aqui eu precisei

criar uma lista aqui ó até a lista aqui eu sei que eu tive te falado que eu tinha que gravar é a sequência do que a gente vai colocar dentro do seu curso aqui não listas são coisas muito importantes e a gente vai aprender como é que se faz em três tipos de lista que o HTML vem suportes são as listas ordenadas mas não ordenadas e as listas de definição a gente vai ver misturas delas também não tem bastante coisa para aprender abre aí o seu computador vamos começar o exercício não começa a fazer o

seguinte a gente começar corrigindo um pequeno problema que aconteceu nas aulas anteriores bem comer interrompemos a sua aula para mais um recadinho aqui da Record e a quem tá trazendo aqui para o nosso curso em vídeo uma série de cursos que vão te preparar para o mercado de trabalho e o Eu vim falar aqui de um curso muito especial que é um curso de criação de aplicações para dispositivos móveis utilizando o evento o evento para quem não sabe foi o aplicação criada pelo próprio Google e que hoje é mantido pelo Instituto de Tecnologia de Massachusetts

o em mente e nesse curso que a recortar oferecendo o completamente gratuitamente para todos os nossos alunos do curso em vídeo você vai aprender os primeiros passos da programação de uma maneira bem prática e objetiva e utilizando o evento você vai ser capaz de criar o seu primeiro aplicativo para celular então não perca tempo aponte a câmera do seu celular o aplicativo de câmera para esse código QR que tá aparecendo aqui embaixo e você vai ser desviado para nossa página especial onde a Record Vai disponibilizar todas as instruções para você poder fazer esse e muitos

outros cursos que estão disponíveis na plataforma Obrigado pelo Patrocínio he could e a gente volta pra nossa aula E então é só Já estou aqui dentro do Windows e a gente tem um pequeno problema de organização aqui em relação ao repositório você acessar os documentos aqui da gente tem estudos HTML exercícios aqui tem um exercício até o 9 só que o nome é desse Capítulo esse daqui a gente fez para oito na verdade o oito aqui tem coisa do sete enfim o que você vai fazer aqui o seguinte Olha só nós vamos renomear Essa parte

aí você pode clicar com o botão direito nela e escolher renomear ou você faz o seguinte você selecionar ela publicou espera um pouquinho clica de novo espera um pouquinho ele já deixa você alterar nós vamos chamar esse aqui d008 de tá desculpa aí e vamos criar 009 que a gente vai trabalhar exatamente agora não sei se vai se repetir mas às vezes eu me enrolo aqui porque o curso está sendo planejado né não não foi totalmente planejado antes e durante as aulas eu acabo não olhando o número de exercícios E acabou dando esse desconforto perdão

aí mais segue barco a gente não perdeu nada botão direito no Exercício 009 abrir com code e vai abrir que com visual Studio code e nós vamos já dedicar a criar o que vou index dentro de x009 ela já fiz uma atualização aqui de diversão provavelmente vai acontecer bastante na sua casa também fica aqui em novo arquivo ou me chamar de index.hu ML Cara isso aqui você não pode ser dúvida que a gente tá Capítulo 9 ou se por acaso você tá com dúvida Nisso é porque você muita aula muita porque a aula não vamos

botar aqui para português do Brasil e vamos começar a trabalhar com listas e o que nós vamos fazer a concentrar todas as listas aqui nesse nosso exercício eu vou dividir assim eu vou botar aqui ó H1 eu tinha no principal trabalhando com listas e nós vamos começar vamos trabalhar dois subtítulo DH um a gente viu isso também nas aulas anteriores nós vamos colocar aqui listas ordenadas Vamos começar com as listas ordenadas as vezes os usuários são aquelas que a ordem faz diferença Tá então vamos abrir o arquivo ainda que seja acabou de criar Você vai

no gerenciador de arquivo vai no Exercício 09 um like já tem que ser criado aqui dentro peguei duas vezes ele abriu navegador com só organizar aqui para ele ficar direitinho beleza eu estou satisfeita Como trabalhar com arquivos ó eu já vou encolher aqui também para ficar com bastante espaço para gente poder trabalhar vamos começar o seguinte listas ordenadas são vistas assim ó primeiro eu vou acordar depois eu vou lavar roupa Ok patizona vou tomar café depois eu vou escovar os dentes depois eu vou lavar aí vamos prosseguir Ah tá depois de acordar eu tenho que

ligar para o João João precisa de alguma coisa assim daqui a dois Ligar para João E aí ferrou toda numeração aqui exatamente como eu faço constantemente aqui para os seus exercícios e ter que ficar mudando aqui ainda que a sua lista com 120 itens você tem que mudar o quarto eu vou ter que mudar o quarto quinto sexto estão grande problema se você digita assim existe uma tag que é Order list você viu aí também no material em PDF que é o l o l órgãos lista ou lista ordenada a gente das ordenadas estão entre

o l e barra web-seguro de um espacinho E aí o botando cada item de lista cada lista de item de lista é lixo e ele aqui ó vou colocar lá primeiro eu vou acordar depois eu vou tomar café depois eu vou cada um ele tá vendo escovar os dentes vão ver como é que funciona aqui ó tá lá a gente faz alternadas ele fica com um espacinho aqui a formatação é um dois três normal né eu tenho acordar tomar café escovar os dentes enfim você vai organizando tudo bonitinho aqui se por acaso surgiu um esse

ele fala outra Liga para o João aí no início aí eu venho aqui para botar senha bota um Um item na lista Ligar para o João assim que acordar tá lá na hora que eu atualizo ele já faz a numeração para mim então que a gente tem que fazer é colocar tudo dentro de ó ele entrou L Barro l e eu coloco aqui ó ele levar ele para fazer essas coisas certo uma coisa importante a partir do HTML5 o Barra L se torna opcional então eu posso só fazer assim ó o visual Studio code Quando

eu abro ele ele já fecha para mim mas se você quiser criar uma lista você achar que vai ficar mais organizado assim o bar e se tornou opcional a partir da versão 5 da linguagem HTML tá então você não tem obrigação o Barra ou l você tem obrigação de fazer certo beleza listas sempre só vou provar para você que funciona sem problema está sempre fechou se você quiser a gente pode personalizar essas listas mudando essa formatação aqui na frente eu posso utilizar numerações assim do jeito que tá um dois três quatro e aí você que

manda a ordem aqui do ele vai ser de acordo com a aparição dele e existe um parâmetro que eu posso botar em noelle que é o time eu posso botar aqui tá aí ele me dá uma duas três quatro cinco opções um a azão azinho bezão enfim eu tenho essas opções é a lista normal que a lista numerada então eu vou botar dois não é só o início de uma lista ela começa a por padrão nenhum se você quiser que ele começa em quatro por exemplo você vai botar as tardes 4 mas o Type só

tem essas opções um azão azinho e o indica o seguinte você quer uma lista ordenada do tipo numérica e começando em quatro vamos ver o que tá lá o quatro cinco seis sete e ainda é somando um por 11 a 1 no caso a partir do start a gente vai começar aqui no start normal é vou colocar mais alguns algum itens aqui a linha ir para a faculdade depois de ir para faculdade almoçar depois de almoçar eu vou para o trabalho ir para o trabalho depois voltar para casa aí esqueci o negócio aqui então faculdade

Ah não já ir para casa jantar e dormir tá então vamos ver se a nossa lista tá lá tá lá da lista do 1 ao 10 tá Dez itens a gente faz no dia a dia se você quiser você pode mudar isso aqui ó para a razão quando eu mudo para razão ele vai ficar assim a b c d e f g h i j tudo em letras maiúsculas obviamente se você é uma pessoa esperta se eu botar um azinho ele vai fazer uma sequência com letras minúsculas é a moleza eu ir fala bom mas

ele disse que não pode botar o dois três e quatro mas você pode botar e O que é uma numeração diferente quando eu boto o visão ele ficar em números romanos com letras maiúsculas arruma um dois três quatro cinco seis sete oito nove dez se você colocar o vizinho ele vai fazer a mesma numeração Romana Tá vendo só que com elementos Romanos em minúsculas Beleza então essa é a nossa primeira lista que são as listas ordenadas e o trouxe aqui mais um recado muito rápido bem tranquilo e um pedido para você não sei se você

sabe mas Além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram e no Instagram do consegui vídeo então que eu vim te pedir aqui nesse vídeo é bem simples gostou da aula tá gostando do curso segue a gente no Instagram Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação a segunda forma de lista que a gente vai ver o botão outro jogadores aqui são as listas não coordenadas eu nem sei se existe sim oi vem aqui mas

eu acho que não tem listas não ordenadas ó até que despejam orar a gente faz não ordenadas Como o próprio nome sugere são aquelas onde a sequência não faz sentido Não preciso enumerar e só eu de marcar só aquelas listas assim ó primeiro faz tal coisa depois eu faço tal coisa tá Então como que eu faço uma lista não-ordenada se ou l é ó dribles e virou L na listas não ordenadas é a norma eles a lista não-ordenada E aí eu posso fazer a mesma coisa aqui ó ele que que eu tenho que comprar pão

tem que comprar leite tem que comprar tomate em comprar manteiga tem que comprar arroz e tem compra mais uma vez mesmo princípio de raciocínio o ele não precisa ser fechado eu posso tirar o barro ele e aí eu também te dou uma dica né se você não botou nesse daqui você não gosta nenhum tá no caso aqui eu vou até voltar com esse bairro aí para ficar tudo igual né senão vira Bagunça mais posso vou colocar o que eu tô fazendo aquela só abrindo a tag né botando o sinal de menor e ele já fecha

automaticamente certo vamos ver como é que funciona ali fez uma lista com pequenas bolinhas essa bolinha é o tipo também posso personalizar aqui ó é o pai disse a esse Type eu tenho as seguintes opções aqui não vai me sugerir mas eu tenho a opção diz que é isso aqui que é um pretinho eu tenho também trocou tudo minúsculo está cercou que é uma bolinha aberta e eu tenho também Square que é um quadradinho perto um pequeno quadrado e assim só tem essas opções ou surta Worlds ou crescendo Kids aqui é o padrão listas não

ordenadas também não tenho muito o que falar se eu quiser por exemplar não além de tomate o preço de alface só você colocar aqui ó ao faz ele automaticamente já adiciona e faz a bolinha fica lá certo então assim listas ordenadas a gente tem o Type que a gente tem as opções chegou tá como comentário aqui ó comentar em HTML já viu né comentar aqui vou colocar a gente tem o Skype é um o azinho bezão ou esse aqui eu também tenho os seguintes tipos eu tenho diz que é o padrão só qual que é

aquele branquinho né não do meio e os poetas tem só esses três aqui beleza então é só você vai montar aí listas ordenadas e listas não ordenadas na sua casa e vai fazendo exercícios cria isso é bem tranquilo esse capítulo que ele é bem tranquilão mas é fácil de entender e é muito útil a gente usa no nosso dia a dia Inclusive a gente vai utilizar mais para frente na hora da gente criar menos Geralmente os menus são criados através de lista estado de listas não ordenadas treino Essa parte aí na sua casa e depois

a gente vai voltar aqui e vamos aprender um pouco mais sobre listas na verdade no próximo vídeo eu vou te mostrar o terceiro tipo de lista que a lista de definição e eu vou te mostrar que dá para misturar uma lista na outra né agora vou começar misturando uma lista na outra mas isso só no próximo vídeo mas não passa por próximo vídeo antes de treinar esse daqui combinado fechado então é isso a gente se vê no próximo um abraço e até já já [Música] [Aplausos] [Música] E aí E aí [Aplausos] [Música]