[Música] fala pessoal Janer aqui no vídeo de hoje nós vamos estar falando aqui um pouco sobre os tipos de elemento né Nós temos na verdade e tipo de elemento é bem abstrato né Nós vamos falar na verdade aqui sobre os elementos em bloco e os elementos em Line né é um conceito bem interessante PR gente já tem mente desde o início aqui quando a gente tá trabalhando com esses elementos do HTML né com essas tags e eu vou aqui para vocês alguns exemplos de como eles se posicionam já por padrão né no na nossa página
porque futuramente a gente vai abordar mais esses tópicos Quando a gente tiver ali no nível de estilização né mexendo com CSS mas eu já vou abordar isso aqui nesse momento para ficar bem claro eh alguns comportamentos que alguns elementos T por padrão Tá certo então vamos vir aqui no nosso tô aqui no vs code né Vamos abrir aqui o notion para nós vermos né que nessa aula que os tópicos dela serão somente os elementos em bloco Block elements né e os inline elements e para falar disso né de antemão e eu pesquisei aqui no Chrome
né pesquisei aqui no Google na verdade eh sobre HTML Block and inline e ele já me traz um primeiro link aqui ele trouxe esse link do W3 schools né que é um site incrível aí para não só para documentação mas também para exemplos né de não só de html também como HTML CSS JavaScript skq enfim a gente pode ver aqui na parte superior né que tem muito conteúdo aqui muita coisa mesmo e o HTML e Nesse artigo aqui né sobre HTML Block inline elements ele dá aqui muitos exemplos fala de alguns elementos aqui tá e
o interessante desse site também é a questão aqui do dessa funcionalidade que ele tem né do Try It Yourself que é basicamente quando eu clico aqui ele vai abrir para mim um editor de de de documento né onde eu vou conseguir editar aqui o meu documento HTML e ver o resultado aqui na direita né então é muito interessante isso aqui e e dá pra gente brincar muito com os valores e ver tudo funcionando tá então vou deixar isso aí de recomendação e aqui pra gente né eu criei aqui ã a pastinha né número quatro elementos
Block inline né e Já criei aqui também um arquivo index P HTML que é onde a gente vai iniciar tá então para iniciar aqui a gente vai usar aquele nipt né que eu falei na aula passada não não não me lembro qual aa foi mas o sniped aqui do HTML5 né que ele já traz essa estrutura aqui pra gente gente apaga essas tags meta aqui que a gente não vai usar e vamos Apagar também essa definição da linguagem porque a gente não tá eh se importando com isso no momento tá o título da página vai
ser elementos Block e inline tá Vou salvar isso aqui já vou vir aqui na minha extensão né no canto inferior direito aqui do vs code para rodar o Live server ou então então né Vamos aqui no control shift p e Live server Open with Live server ele vai abrir aqui pra gente o servidor com a nossa página o título tá ali né elementos Block inline Então a partir daqui a gente já pode começar a abordar isso aqui tá e basicamente quando a gente fala de elementos em bloco e elementos em line e os elementos em
bloco A gente pode pensar em colunas tá e o que que isso quer dizer é que eles por padrão Eles já ocupam uma linha inteira né ali do nosso na verdade não é bem que eles ocupam uma linha inteira mas eles são posicionados um acima do outro na verdade não é nem coluna né seria linhas é que linhas já começa a confundir com o inline Tá e por isso que eu já quero abordar isso aqui logo de início pra gente ter bem claro isso em mente eh um exemplo de um elemento em bloco é a
tag P que nós trabalhamos com ela na aula passada na na verdade desde a primeira aula né a gente já tá fazendo o uso dela mas a tag P eu posso passar aqui por exemplo o texto Hello em outro tag eu vou aqui tem que ser em português né Olá eh trocar aqui o meu teclado Opa tô confundindo tudo isso Olá tá em maiúsculo olá mundo né em duas tags diferente tá tag P duas tags P uma tá escrito há e outra tá escrito mundo se eu sa isso aqui e a gente vem aqui no
browser para dar uma olhada nós temos aqui né olá mundo um em cima do outro né Ou lá em cima e mundo embaixo se a gente inspeciona essa página aqui a gente pode ver que e aqui no B né Nós temos as duas tags aqui Olá e mundo e elas estão ocupando a linha inteira Olha lá ela vai até o final até o o o extremo direito aqui do nosso da nossa página né então isso esse é um exemplo de um elemento em bloco ele ocupa toda a horizontal e é sempre posicionado um acima do
outro certo e o que que é o elemento inline né o elemento inline é o nome e agora vai começa a ficar intuitivo que é um elemento traduzindo me literalmente né um elemento em linha ou seja quando a gente vai pos colocando esses elementos eles vão se se agrupando em linha né um ao lado do outro tá e um exemplo né que vai ficar aqui e claro pra gente é a tag boton né um botão em si Então esse botão vou escrever nele aqui Enviar eh e vou colocar outro botão atualizar salvando isso aqui a
gente olha lá no Browser olha lá ó o botão enviar e e o botão atualizar estão um ao lado do outro tá certo e por padrão eh isso aqui é tudo alterável via CSS tá a gente consegue trocar esse esse tipo de posicionamento usando CSS facilmente Tá certo mas eu quero explicar isso aqui justamente porque a gente vai começar a criar pasta a criar e documentos aqui e essas e as coisas irão se posicionar de formas um pouco diferente e pode gerar dúvida Então já tô explicando esse conceito logo para ficar claro esse esse conceito
Tá então vamos brincar aqui um pouco com esses com esses elementos né Por padrão por exemplo se a gente volta aqui nós temos o a tag div né que eu falei lá na aula passada que basicamente cria uma divisão né uma divisória algo que vai eh Ela vai ficar em volta de algum pedaço de código alguns elementos né que a gente tem em tela então por exemplo eu posso pegar essa div e colocar o botão enviar dentro dela tá e a div por padrão ela é um elemento em bloco né então se a gente volta
aqui no código o o o botão enviar ficou em cima né e o atualizar embaixo e se a gente olha aqui dá um inspecionar né a div em si Olha lá ela ocupa a linha inteira né Por padrão então a gente consegue a gente consegue começar a manipular esses elementos né tirar eles de colocar eles dentro de outros elementos para tentar mudar esse posicionamento ou Enfim fazer algumas coisas aí que não é que a gente usa isso realmente para estilizar porque normalmente com o CSS eu consigo vir diretamente no botão e falar com ele que
agora ele é um display Block ele vai se comportar como um bloco né mas o fato é que de acordo a gente for criando essa esses elementos aqui no o no nesse nesse projeto né nesses documentos nessas aulas que a gente tá eh passando eh a gente pode ter comportamento diferente H uma hora o botão os botões estão um lado do outro outra hora eles estão se posicionando diferente então por isso essa aula aqui pra gente esclarecer esse ponto tá então a aula basicamente é isso né voltando aqui nos tópicos a gente já abordou esses
dois tipos de elementos né V novamente reforçando aqui eh a gente consegue facilmente com o CSS alterar esse tipo de posicionamento e mas novamente né essa aula aqui é mais pra gente esclarecer futuras dúvidas evitar que tenhamos dúvidas futuras Tá certo então para essa aula é isso Espero que tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
