Grouping Tags em HTML5 - @Curso em Vídeo HTML5 e CSS3

é isso aqui é mais um vídeo que diz respeito ao Capítulo 16 do nosso material [Aplausos] [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS aqui agora nós vamos dar continuidade ao Capítulo 16 nos vídeos anteriores A gente já entendeu o modelo das caixas e agora vou te mostrar para que que serve esse modelo das Caixas né porque não adianta Ah tá eu entendi Anatomia da Caixa entende pede entende mais gente mas hoje eu aplico isso dentro de um site na

verdade você aplica em todo lugar o site ele é feito de caixas e agora a gente vai começar a aprender a colocar todas as caixas agrupadas de uma maneira mais inteligente para começar a construir os sites Então vamos diretamente pro nosso computador e vamos começar um exercício novo na verdade vamos lá a mesma pasta do exercício anterior mas não criar um documento novo e o recado dessa aula aqui que ele vai trazer para você é um estudou na alta e como eu disse um recado anterior traz vários cursos para você mas não pense só que

é só curso para quem é muito avançado não aqui não consegui por exemplo nós temos um curso de introdução à programação utilizando a ferramenta aviso o áudio e para você que tá se perguntando o a função programação se você tá querendo aprender só a criar site pois saiba que parte Inicial você não precisa saber programar o problema quando você vai aprender JavaScript PHP Java ser que aí você precisa nos fundamentos de programação e não estudou na alta a gente tem um curso mais atualizado muito mais atualizado do que esse que a gente disponibiliza aqui no

curso em vídeo mas não estudou na outra a gente tem cinco módulos de desenvolvimento dentro de princípios básicos os primeiros passos utilizando uma ferramenta Nacional muito mais atualizada que é o Portugal estúdio então se você já teve algum problema em relação à desenvolvimento nos princípios de desenvolvimento Talvez seja uma ótima pedida dá uma olhada nesse curso de cinco módulos cheio de aulas e cheio de exercícios para você e você pode ter maiores informações apontando a câmera do seu celular para esse código que tá aparecendo aqui embaixo ou pegando link na descrição desse vídeo voltamos agora

a nossa aula normal né bom então clicando aqui nos nossos documentos Vamos acessar os estudos HTML CSS exercícios exercício 21 Vamos abrir esse exercício com o visual Studio code ele já vai ter o caixa 01 e nós vamos criar aqui um novo arquivo caixa 02. HTML Vamos criar o nosso código base aquele negócio de sempre e nós vamos começar a falar o seguinte vamos botar de grupo Intex que o assunto dessa aula astério de agrupamento basicamente sempre foram duas né que foi a div e span tem nada a ver na Espanha Advil como a gente

já viu é uma caixa do tipo Box level e o spam é uma caixa do tipo em você já viu isso e é muito comum a gente criar sites assim antigamente a dizer aí criar uma div aí dentro você criava outra div e dava o aí dela de cabeçalho aí dentro do cabeçalho você colocava um título e colocava um menu aí você vai fazer o melodizzy aí botava uai in the menu aí depois do cabeçalho você tinha uma outra div que era o conteúdo Então você botar uma div e de conteúdo começava a fazer um

monte de Diva uma dentro da outra aqui no final você gostava de mim ou e de rodapé tem muito professora ainda ensina assim né na verdade cara o HTML5 a linguagem HTML ela evoluiu muito a isso daqui a gente que a gente tá vendo aqui a gente fazia muito no HTML 4 no HTML antigo o HTML5 HTML moderna com semântica ela tem grupo entregues também ela permite utilizar times você pode continuar a tag div não morreu ela não tá em vermelho ela pode ser usada sem problema só que existem as grupo tags semânticas existe uma

semântica envolvida você pode montar um site de forma semântica isso vai ajudar e muito os mecanismos de busca EA organização seu conteúdo na tela gente vai ver algumas tags semânticas exatamente nesse exercício e do corpo da página nós vamos fazer o seguinte Mas vamos começar criando o nosso conteúdo principal na verdade é o seguinte antes do conteúdo principal todos os sites tem um conteúdo principal né que é a essência do site tem um cabeçalho que apresentação do site tem um rodapé realmente alguns quilinhos extras quem foi que fez e tudo mais então eu vou fazer

seguinte header cuidado não confunde a cabeça com cabeçalho tá cabeça só as configurações do site cabeçalho que faz parte do conteúdo dele tanto que tá dentro do Vale A gente tem o Reza a gente tem um conteúdo principal que a gente chama de estar tag nem que na verdade o Harry era uma div o meio uma diva é visto como uma diversão Só que os mecanismos de busca em seu navegador conseguem valores da mais o seu conteúdo principal em detrimento do cabeçalho onde vai pegar o título do site ou do rodapé tem um furo ter

esse não precisa ficar dando aí de para certas Você pode até da rede para formatar na verdade mas essas tags são semânticas é muito mais útil eu vou botar aqui por exemplo olha um é meu site ou menos dentro do cabeçalho geralmente vontade Live - agora você consegue trança aqui ó nave aqui você vai colocar os seus links então botar aqui um link eu vou botar sei lá um dois três quatro cinco ele tá a outra coisa aqui no footer eu vou botar um parafusinho desenvolvido pelo curso em vídeo tá aqui no meu código principal

Tá vendo como agora começa a fazer sentido sentido semântico a organização do seu conteúdo e se por acaso você é um daqueles alunos ou uma lona aqui nunca desenvolveu um site faltou mas é assim mesmo que se faz ótimo você não tem a mania você não tem vícios prévios de que acha que tudo tem que ser divido volto a dizer nada impede você de usar dele você pode usar sem problema só que para organização do conteúdo é muito melhor você utilizar essa organização semântica que funcionam como se fossem isso aqui como se fosse uma diva

que você quer como se fosse uma de homem isso aqui o fundo ele começou sua div só que são deveres especiais questão de vistos semânticas então quê o grupo tags semânticas tá dentro do meio eu vou ter uma sessão sei lá umas Action que é um ar de assuntos eu posso ter umas Action que vai ser com o ai de Notícias aí dentro das notícias eu vou ter sei lá duas notícias eu tenho arte com uma outra tag semântica eu vou ter duas notícias aqui outro Ártico E aí por exemplo esse artigo aqui eu vou

ter além do conteúdo nos parágrafos eu vou ter um a sai né que é um conteúdo periférico o artigo relativo ou artigo né Mas você quer coisa periférica por exemplo posso botar que o nome do autor artigo escrito por José da Silva então eu consigo aqui vão até o parágrafo lá como o assunto o artigo pode ter um título também será uma H2 notícia sobre o Brasil tá então você consegue organizar o seu conteúdo de maneira muito mais muito mais prática outra coisa Oi gente que gosta de botar Ártico e dentro do artigo ter sections

tem gente que gosta de botar sexo e dentro da sétima arte nada tem de errado até as primeiras versões do gato gatinho + tags que você não podia botar uma dentro da outra mas isso era uma limitação que às vezes Surgiu uma oportunidade de você fazer isso e era proibido a partir de agora na versão 5.1 da linguagem vamos chamar assim é permitido colocar qualquer grupo entregue dentro de qualquer outra grupo interno então assim basicamente isso aqui não vai tornar o teu site bonitão logo de cara quer ver vou abrir aqui o o caixa dois

abrir o caixa dois é ótimo no momento que a gente tá vivendo aqui do Brasil que tá lá basicamente Você não tem nenhuma formatação de a sagge de nada a formato essa feita pela CSS só que você já tem aqui a estrutura do seu site meio que já modelado e você consegue vir aqui em cima por exemplo e dizer por exemplo aqui que voltamos saio aqui você consegue por exemplo dizer que o Bari do meu do meu site eu sei lá font-family sem serifa vai ter um background-color a essa aqui e vai ficar 15 escuro

eu posso fazer por exemplo com que o meu header é tenha uma largura de 600 pixels um background-color o branco já fiz ele aqui ó 600 pixels branco não vou nem botar 6 anos Pixel Quero ele na largura certinha tá na rua completa do site vai ter um pede igualitário na interno de 10 pixels se você não sabe o que que tá acontecendo aqui no mercadinho Oeste só pede você assistir os vídeos anteriores nela já botei um pedem aqui se você quiser você pode colocar uma margem margem também de 10 pixels isso tudo aqui ó

no meu menu posso também fazer com que o meu código principal tenha um background color branco também ele vai ficar branco também vai ter a imagem de 10 pixels para ficar legal Zinho nossos besteira aqui colei meu rodapé aqui ó o footer vai ter background-color Black EA cor da letra branca ó já tá lá e o nosso text-align vai ficar sempre para ficar centralizada aqui desenvolvido por consegui vídeo vou botar um pezinho de 5 pixels só para ficar né mas arrumadinho a eu quero margem na esquerda e mais cinco Pixel achei muito não fixa então

eu quero aqui margem zero que eu não quero margem zero Pixel verificar o footer sem margem vou fazer aqui olha isso aqui é a margem do bari eu quero margens 0 aqui também ó que ele vai ficar coladinho lá então eu consigo ter a cara do meu site já que eu já falei artigo aqui eu posso fazer tudo artigo Oi tia um background color Light Grey sofre ficar travando mais Quinzinho aqui eu quero por exemplo com que o meu Ártico é a Side aqui tá dentro né a gente viu isso no capítulo anterior essa aqui

é o filho né o açaí é filho de Ártico tem a sei lá um background-color é um pouquinho mais escuro que o leite preta vou pegar aqui Light cure a mesma cor e vou dar uma puxadinha Aqui para baixo por isso é um pouquinho mais escuro tá vendo escrito por José tá vendo eu consigo começar a modelar o meu conteúdo para botar um pezinho aqui no artigo de 5 pixels enfim eu consigo organizar o meu site da já consigo ter cara de site no meu site eu consigo por exemplo aqui no meu menu de navegação

Vou botar aqui nave no menu de navegação vai ter background-color de preto também preto não preto não vou botar um Light Grey e vou escurecer bastante ó ó tá lá consigo botar um pezinho de três Pixel só para dar uma engordadinha tá vendo consigo também por exemplo fazer com que o nave todo link que tem dentro do nave tem o tex decoration and went atirar decoração a cor da fonte vai ser branca e o Font Whey Gold Standard ficou mente quando passar o mouse em cima nave a vovô eu quero text-decoration underline ó tudo a

gente tá trazendo tu passado tá vendo aqui ó eu quero uma margem entre eles então eu quero uma margem direita margem Rick de 30 pixels que ele vai dar uma separada entre os links enfim você consegue começar a organizar o seu conteúdo para começar a criar um site então essa parte aqui de você utilizar tags semânticas fica muito isso é essa parte aqui fica muito mais tranquila se a utilizar essas tags agrupadoras aqui né o nave para menu nave de navegação o header para cabeçalho homem para o seu conteúdo principal seções dentro do seu site

essas ex-chefe de assuntos ela não apareceu porque não tem nada dentro mas se você criar um parágrafo aqui ó o assunto vai ser esportes a política e tecnologia na aí você consegue ter uma área diferente aqui ó uma certa jantar e tenho um parágrafo dentro isso tudo aqui a gente consegue a organizar dentro do nosso conteúdo para construção do nosso site Então já vai se acostumando você cria esse documento aqui no seu site né no seu computador aí e e vamos começar a construir sites mesmo tá já que a gente não mexeu na altura e

na largura você pode ter certeza que quando diminui aqui o conteúdo mais se adaptar enfim a gente tá começando aqui os primeiros passos na criação de sites efetivamente colocando o conteúdo aí e na internet Fechou então nesse capítulo a gente aprendeu está aprendendo a organizar os nossos conteúdos no próximo vídeo a gente vai fazer algumas configurações pontuais aqui de arredondamento das dos cantinhos usar uma sombra pontual em alguma coisa então vai aprender isso no próximo vídeo Fechou então monta isso daqui monta esse exercício entenda Qual é a posição de cada um deles outra coisa não

considere que só porque eu usei um artigo o dentro de um ser único lugar onde você pode colocar o Ártico é dentro do sexo não Você pode organizar esses esse as tags da maneira que você quiser se o seu menu não tiver dentro do seu cabeçalho você não vai botar ele dentro do header então assim Organize você não precisa saber o que que tem que estar dentro do que isso foi só um exemplo que eu criei aqui para a gente poder ter esse site aqui só uma sugestão de site não fica só copiando os meus

sites meu objetivo aqui nesse curso é ensinar você a criar sites a criar o seu próprio site com layout e não só fazendo com layout que eu tô estabelecendo aqui fechou muitos alunos sempre entrar em contato comigo dizendo assim armas Guanabara às vezes sai um vídeo novo um curso novo não consegui vídeo e eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar t.me/o se vídeo esse é o nosso link do canal mas não é o canal do YouTube é nosso canal no telegram Eu

costumo sempre dizer o telegram tipo o WhatsApp só que muito bom é só você acessar excelente confirmar a inscrição no nosso canal isso é gratuito e você vai receber sempre notificações daquilo que a gente vai lançar essa é a maneira mais segura de se manter sempre atualizado o atualizada com as novidades do curso em vídeos Então é isso a gente se vê no próximo vídeo a gente vai aprender mais algumas configurações. Um grande abraço e até a próxima um beijo E aí [Música]