Listas mistas e de definição - @Curso em Vídeo HTML5 e CSS3

290.12k views2218 WordsCopy TextShare
Curso em Vídeo
Você sabe como misturar vários tipos de lista usando HTML5? Sabe como juntar listas ordenadas e list...
Video Transcript:
e isso é mais um vídeo que diz respeito ao Capítulo 9 do seu material [Aplausos] [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula do seu curso de HTML5 no vídeo anterior Espero que você tenha treinado quando eu sugeri a gente participou aqui a criação de lista esposa de nada e listas não ordenadas agora a gente vai fazer duas coisas primeiro misturar listas ordenadas como não ordenadas misturar elas entre elas e também a gente vai ver listas de definição e vamos começar misturando as letras Então você tem que ter
feito exercícios anteriores pra gente poder dar prosseguimento aqui que eu vou usar o exatamente o mesmo arquivo que vou continuar né Beleza então se você não viu o anterior volta do vídeo anterior assistir treina prática e aí volta tá se você fez tudo direitinho então diretamente para o nosso exercícios exatamente no ponto onde a gente parou interrompemos a sua aula para mais um recadinho aqui da Record que é 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 hoje eu vim falar
aqui de um consumo 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 uma aplicação criada pelo bom e que hoje é mantido pelo Instituto de Tecnologia de Massachusetts o emitir e nesse curso que a Record está 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 que é que tá aparecendo aqui embaixo você vai ser desviado para nossa página especial onde a Record Vai disponibilizar todas as instruções para você poder fazer esses e muitos outros cursos que estão disponíveis na plataforma Obrigado pelo Patrocínio he could e a gente volta pra nossa aula então já tô aqui exatamente onde eu parei não vou explicar de novo a gente já viu a basicamente o que eu vou montar aqui é junção entre listas tão botar aqui ó juntando 22 versão 1.0.0 meu
Deus que nós vamos fazer aqui olha só se você quiser pode sim mas estão ordenadas certo aí eu posso botar ela ir como a gente viu durante o vídeo anterior eu posso fazer assim ó vamos botar aqui em vez de junta do lixo seleção 1.0 Vou botar aqui ó minhas linguagens favoritas aí eu vou botar aqui ó antigas e novas então tem vez nem voz favoritas das antigas da época lá eu comecei a aprender a programa e as linguagens novas eu vi aqui ó beleza ele faz um antigas dois as novas só que eu quero
seguinte dentro das antigas eu quero ter uma lista de linguagens antigas que eu gostava então que eu vou fazer embaixo de antigas em vez de criar um outro ali eu vou criar outro ou L perto dá para fazer isso aqui também e aí ele vai ficando pra dentro tá vendo aqui o nome disso a gente já viu que chama alinhamento é uma coisa dentro da outra como se fosse um ninho não é alinhamento é aninhamento que alguns almoço até agora por que que você faz o seu código todo bagunçado e não tá bagunçado ele Tava
arrumado né não tá colado tudo na esquerda fica mais fácil você saber o ele abriu aqui fechou aqui ele tá com um vão vazio O que é chato vamos fazer aqui ó e linguagem favorita das antigas clip Sem dúvida nenhuma é linguagem que eu mais programei durante Minha Juventude depois eu programei bastante em fortran depois eu programei bastante em Delphi e eu tive não mento depois de clicar eu programei muito eles vão ver isso o ver bem antigo ela tá lá olha só só de colocar no lugar de 1l outro L dentro de um outro
L Olha só ele já fez aqui para mim as antigas clipper visual bem importante ao eu quero essa lista aqui essa lista de dentro eu vou colocar ela com o Type asinha pó ela linguagem de novas cara minha linguagem favorita a outra olha aqui sempre foi PHP é uma linguagem que eu criei paixão pai gosto muito também já descrito e Ultimamente eu tenho estudado bastante cosplay também chegou com um dois três quatro Sem problema nenhum outra coisa que você pode fazer é ABCD se eu trocar aqui também pra Zinho vai ver fazem para ele ficar
igual abcd abcd se assim desse jeito que tá certo tá mas vou o que eu quisesse assim a b c d e f g h certo aqui começando não é eu tenho que vir aqui e botar start e não funciona quer ver vou botar que horas parte é não funcionou ele ficou como ABC isso porque o start ele é um parâmetro numérico por mais que a nossa lista seja alfanumérica aqui no Érica então ué seria um dois três quatro seria um quinto né é um pouquinho alimento agora ele vai lá tá vendo das antigas clipes
visual dá esse portão é deu fai das novas espera Peppa Então já descritos encontrando que ficou a bem se ele é é na verdade verdadeira mesmo por certo é a lista ficar assim tá certo é assim mas vamos só deixar sem por título de curiosidade para você poder dar uma lembrada depois tá verdade essas uma lista ela começaria do primeiro de novo Beleza então eu consegui misturar aqui outra coisa que eu posso misturar ó posso misturar fazer um exercício que eu fiz até no material lá pela meus jogos favoritos Eu posso misturar o e com
malwele a por exemplo eu posso por aqui uma ó ele acabou dá uma lista ordenada e aqui eu vou colocar os meus vídeo games favoritos caro videogame que eu mais joguei na minha vida falou Não entendi Dinho depois joguei muito Super Nintendo depois joguei muito Playstation Playstation ter wi-fi maiúsculo Acho que sim vou tá lá eu jogos favoritos e nem entende Super Nintendo e Playstation aí eu posso fazer uma lista ordenada por exemplo de nintendinho eu vou ter uma lista ordenada dos jogos que eu mais joguei Então eu tenho Mário Mário Bros joguei muito joguei
muito Ninja Gaiden nossa como eu gostava de Super Nintendo outra lista ordenada eu tenho Mário também dormi muito mal e eu tenho também Donkey Kong tô botando dois só para ficar mais organizadinho de Playstation sem dúvida eu joguei muito Final Fantasy e também muito que essa online olha só aqui tá vendo ó Nintendo Super Nintendo playstation' Se eu quiser eu posso transformar e eu quero vou transformar essa aqui em U L aí eu tenho que mudar aqui e bota aproveitar e te ensinar um macete Eu quero mudar esse aqui de Wesley para Wesley eu vou
botar o curso aqui apliquei depois do Ó Segurei o áudio e vou pegar depois do outro ó Segurei o alto depois do outro ó Segurei o áudio eu tô eu não tô nem soltando altos ó segurando tá vendo eu botei cursores aqui ó eu vou apagar uma vez apaguei o botei o transformei todos os olhos em o Hélio viu como foi fácil ver se eu fiz certo tá lá eu entendo Mario Bros jogar entrando como o Hélio ficou interno ele já colocou o circo se você quiser você pode botar aqui ó vamos botar aqui aqui
e aqui ó liguei três vezes vou dar espaço Type igual colocar Square transformei para quadradinhos Olá pessoal eu 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 e 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 e e se você quiser dá para fazer outro nível por exemplo nem tendinho aqui ó Mario Bros ó eu vou botar um outro L aqui dentro e 1l eu joguei muito Mario Bros 3 joguei também Mário Lost levels verdade era uma fita chinesa que minha prima tinha que eu jogava muito laço levam aqui tá vendo ele já botou o quadradinho como padrão eu não quero Quadradinho esse dessa vez eu quero type-5 lá tá vendo eu tenho níveis eu tenho níveis aqui ficou uma o l do lado de fora uma
url dentro com outro L dentro da uma olhada nesse código assim você precisar pausar o vídeo agora vou deixar aqui direto de acredito deixar Direto você vai comparar esse código que eu marquei aqui com esse resultado aqui então dá uma olhada nessa parte que tá marcada Esse lado e dessa parte que tá marcada desse lado esse código daqui gerou esse resultado daqui para mim perto de chamar tudo então tudo que está marcado de e gerou esse resultado eu quero que você entenda o que é deixar uma lista na outra isso é possível isso é bastante
utilizado inclusive para criação de menus menos a gente queria baseado nesse princípio aqui de colocar uma lista dentro da outra combinado beleza faça seus testes aí se quiser pausa agora a gente a gente vê o último tipo de lista que é o mais tranquilo de todos na minha opinião humilde perto a última vez que a gente vai ver é uma lista de definições que eu criei aqui ó um H2 lista de definições a lista de definição é o seguinte eu tenho uma lista de definição que é uma definição no leite é como se fosse um
dicionário eu vou botar um termo EA definição dele então a lista de definição eu tenho o termo que é o de p k e depois do DP eu tenho o DDD é a descrição perto então tem o termo e descrição é assim houvesse assim o termo de inscrição fica assim ele não tem de marcação e vai ficar um pouquinho para fora um pouquinho pra dentro o que eu fiz foi o seguinte ó que eu fiz no seu material em HTML eu vou botar linguagem de marcação para a criação do conteúdo de um site Olha só
o que ele fez como são dicionário tá vendo HTML e a definição de html vou criar outro termo de te não é TV é de ter existido a gente vai ver a gente poder tabela CSS como está definição de CSS de de linguagem de marcação também é para criação do Design de um site e por último eu vou ter um de JavaScript e eu tenho um de de e vai ser linguagem de programação a gente já viu né que a única das três esferas de programação Eu já vi script para a criação de interatividade de
um site quando o atualizar aqui ó tá lá essa na lista de definição os termos ficam à esquerda E os As descrições ficam um pouco na deslocada para a direita claro que e pode ser personalizado com CSS geralmente é personalizado com CSS e essa coisa de usar dele tem de de nos facilita muito com o mecanismo de busca o Google na hora que você pesquisar alguém tapete lá qual é a definição de html ele pesquisa os sites ele dá valor para um site que tem lista de definições no seu interior Beleza então mas essa mistura
de definição Com certeza é muito menos utilizada do que essas outras listas aqui olha isso gente fez um código bem legal chegamos perto de 100 linha já com significa que é difícil significa que a gente teve muito que aprender muito que treinar muito que testar e assim partir de agora a gente vai começar aprender coisas bem legais HTML que tudo a gente aprendeu é bem legal né agora a gente vai se aprofundar um pouco mais inclusive no próximo capítulo esse capítulo 9 acabou aqui é fácil exercícios faça o desafio tente não chegou desafio que você
tem link né e inclusive link é o nosso próximo assunto nosso Capítulo 10 do nosso Beleza espero que você esteja gostando Espero sinceramente que você esteja praticando e entendendo tô se sair qualquer coisa conta com a gente então é isso chegamos ao final do capítulo 9 Como já também fica tudo 10 onde a gente vai falar da coisa mais antiga da linguagem HTML que são os hiperlinks foi a partir dele que a linguagem surgiu a gente vai falar sobre isso no próximo capítulo um grande abraço treinar ele não passa a próxima etapa antes de completar
essa grande abraço e até já já [Música] [Aplausos] [Música] E aí E aí E aí E aí
Related Videos
Links e Âncoras em HTML5 - @Curso em Vídeo HTML5 e CSS3
12:30
Links e Âncoras em HTML5 - @Curso em Vídeo...
Curso em Vídeo
344,192 views
Aprenda Flexbox em 10 Minutos | Tutorial de HTML & CSS
12:02
Aprenda Flexbox em 10 Minutos | Tutorial d...
Danki Code
102,228 views
Semântica na HTML5 é importante - @Curso em Vídeo HTML5 e CSS3
15:23
Semântica na HTML5 é importante - @Curso e...
Curso em Vídeo
373,772 views
Listas OL e UL - @Curso em Vídeo HTML5 e CSS3
12:32
Listas OL e UL - @Curso em Vídeo HTML5 e CSS3
Curso em Vídeo
328,388 views
40 Hz Brain Activation Binaural Beats: Activate 100% of Your Brain, Gamma Waves
40 Hz Brain Activation Binaural Beats: Act...
Good Vibes - Binaural Beats
lofi hip hop radio 📚 beats to relax/study to
lofi hip hop radio 📚 beats to relax/study to
Lofi Girl
TODAS AS TAGS HTML QUE VOCÊ PRECISA SABER
31:22
TODAS AS TAGS HTML QUE VOCÊ PRECISA SABER
Gimmi Codando
127,084 views
Criando um exemplo real - @Curso em Vídeo HTML5 e CSS3
15:57
Criando um exemplo real - @Curso em Vídeo ...
Curso em Vídeo
174,264 views
Using CSS custom properties like this is a waste
16:12
Using CSS custom properties like this is a...
Kevin Powell
169,721 views
Links internos - @Curso em Vídeo HTML5 e CSS3
15:08
Links internos - @Curso em Vídeo HTML5 e CSS3
Curso em Vídeo
330,617 views
Imagens Dinâmicas - @Curso em Vídeo HTML5 e CSS3
16:31
Imagens Dinâmicas - @Curso em Vídeo HTML5 ...
Curso em Vídeo
298,645 views
CSS Grid Layout e Flexbox - Quando Utilizar
39:09
CSS Grid Layout e Flexbox - Quando Utilizar
Origamid
653,332 views
Curso de HTML 5 - Trabalhando com Listas em HTML (Aula 06)
6:21
Curso de HTML 5 - Trabalhando com Listas e...
Refatorando
3,967 views
peaceful piano radio 🎹 music to focus/study to
peaceful piano radio 🎹 music to focus/stu...
Lofi Girl
Links para download - @Curso em Vídeo HTML5 e CSS3
8:55
Links para download - @Curso em Vídeo HTML...
Curso em Vídeo
287,527 views
Citações e Códigos - @Curso em Vídeo HTML5 e CSS3
19:26
Citações e Códigos - @Curso em Vídeo HTML5...
Curso em Vídeo
363,849 views
Deep Focus - Music For Studying | Improve Your Focus - Study Music
Deep Focus - Music For Studying | Improve ...
Greenred Productions - Relaxing Music
APRENDA TUDO SOBRE MEDIA QUERY - COMO DEIXAR UM SITE RESPONSIVO
27:24
APRENDA TUDO SOBRE MEDIA QUERY - COMO DEIX...
Matheus Battisti - Hora de Codar
58,852 views
Formatações adicionais em HTML - @Curso em Vídeo HTML5 e CSS3
15:46
Formatações adicionais em HTML - @Curso em...
Curso em Vídeo
371,419 views
Running "Hello World!" in 10 FORBIDDEN Programming Languages
18:07
Running "Hello World!" in 10 FORBIDDEN Pro...
Ardens
1,474,512 views
Copyright © 2024. Made with ♥ in London by YTScribe.com