TODAS AS TAGS HTML QUE VOCÊ PRECISA SABER

E aí caras beleza vídeo de hoje vou falar sobre HTML basicamente um resuminho do que que eu preciso saber para mexer com HTML eu vou estar usando visual Studio code e também a extensão Live server Eu também Criei uma pasta na área de trabalho vocês podem fazer isso se quiser recomendo bastante e depois você vem aqui em Abrir pasta e você seleciona a sua pasta no meu caso essa aula YouTube aqui dentro tem um vídeo e uma musiquinha só para falar sobre a tag de vídeo e a tag de música e eu vou clicar aqui

nesse símbolo que é para criar um novo documento de nome index P HTML Esse é o nome padrão pra página principal de documentos HTML Mas o que você dá de nome é opcional você escolhe o que que você quer agora eu vou escrever exclamação e apertar enter e aqui no visual Studio code ele vai criar esse padrão esse template de html que tem que tem tudo que você for fazer em HTML algumas das coisas aqui funcionam mesmo se você não colocar na verdade a maioria delas Mas é interessante você deixar essa primeira tag aqui serve

para definir a versão do HTML e nós temos aqui a primeira tag comum que possui abertura e fechamento toda tag que você consegue escrever alguma coisa nela seja um conteúdo ou outra tag ela vai ter abertura e fechamento se você não consegue escrever coisa nela nem outra tag ela não vai ter isso por exemplo a tag meta ou a tag link elas são tags que não possuem fechamento algum toda tag tem abertura Mas algumas tem fechamento essas tagas que tem as duas coisas podem ter coisas escritas nela por exemplo um parágrafo ou um título daqui

a pouco a gente vai ver HTML é tag padrão de todo documento não existe nenhum documento HTML que não tenha ela você consegue colocar coisas aqui sem ter essa tag Mas provavelmente vai dar algum problema depois do lado tem o primeiro parâmetro que a gente vai ver que se chama leng eu não sei exatamente como que isso aqui afeta na sua página mas deixa em PTBR porque é melhor deixar assim talvez isso aqui é fete quando pede para traduzir ou algo assim e depois tem o Head e o buy dentro do R vão ficar met

tags tags que alteram o documento mas não mostram no documento Por exemplo essa metatag define o tipo de caracter que a gente tá usando no nosso caso Como é o português a gente usa o tf8 também é o padrão de inglês isso permite que exista cdil e acentos se você for um chinês ou um coreano um árabe você tem caracteres diferentes e você vai colocar outra coisa aqui isso aqui serve para melhorar um funcionamento no Internet Explorer se você não coloca isso aqui pode dar vários problemas no internet explor então Deixa aí esse aqui de

baixo serve para deixar seu site responsivo basicamente com isso aqui você pode alterar o CSS da página de acordo com o tamanho da tela ou seja coisas pequenas tipo un celulares vai ter um função funcionamento diferente do que um computador ou um tablet e debaixo nós temos a tag título isso aqui não é o título que vai aparecer na tela tipo não vai aparecer na página vai aparecer lá em cima ou seja se eu escrever Unity é uma merda ninguém deveria usar se eu rodar isso aqui para rodar você pode clicar com o botão direito

e em Open wif Live server vai aparecer aqui em cima unit uma merda ninguém deveria usar para usou minha cola de segurança aqui caso esqueça T legal e bora pro Body Como eu disse o body a gente coloca coisa que vai mostrar na tela por exemplo um título el tem diversos tipos de título diferente tipo H2 H3 vai até o h6 H7 não existe se você abre esse título aqui no navegador você vai pensar que esse título serve para mudar o tamanho porém não é assim por mais que sim ele muda o tamanho a forma

correta de se usar o título é para definir a hierarquia desse título tudo que estilo a gente deixa PR fazer no CSS você pode ver que eu fiz vários espaços aqui eu cortei isso aqui mas se eu olhar aqui vai est igual ele sempre vai tentar preencher a tela independente do que eu faça se você quer quebrar algum tipo de texto você precisa usar a tag BR e agora meu texto ele quebra aqui exatamente onde eu coloquei Ah eu não falei mas esse Loren que tá aparecendo aqui Loren Y Lor Y dolor é só uma

coisa que tem no visual Studio para você preencher algum documento caso você precise que aquele documento tenha algo preenchido e você não sabe o que colocar existem outras tag bem interessante tipo B que é para deixar em I que é para deixar em Itálico não ficou muito visível mas esse aqui é o e esse outro é Itálico Itálico ficou parecido mesmo mas tudo aqui parece tá meio sei lá por caso você queira fazer um parágrafo você pode usar o p caso você queira colocar uma lista Você pode usar o ol e dentro da lista a

gente coloca os conteúdos que no caso é o li deixa colocar aqui vários conteúdos para ficar um pouco mais legal e quando você renderiza aparece aqui esse 1 2 3 4 Isso aqui é uma lista ordenada Nós também temos as listas não ordenadas que é a ul exatamente do mesmo funcionamento da outra lista porém essas aqui ela não tem número só os pontinhos existe uma tag chamada a que serve para você mandar um texto que te lev algum link na Wikipedia deve ter bastante deixa eu entrar aqui para verificar ó esse aqui artigos é um

link link tudo isso aqui que tá azulzinho é link vamos até mandar aqui para este link pode ver que tem um parâmetro HF que é basicamente o link que vai ser mandado e dentro desse a a gente pode escrever coisas tipo página Wikipedia Wikipedia na Wikipedia É pédia né mas Ok quando vem aqui no meu navegador tem escrito página Wikipedia na Wikipedia E se eu clicar ele me leva pra página da Wikipedia na Wikipedia bem legal muito utilizado outra tag interessante é a IMG permite a gente colocar uma imagem eu não tenho nenhuma imagem adicionada

Então vamos colocar aqui Ah isso aqui mesmo pode ver que posso até arrastar aqui pro lado ele já vai organizar certinho dentro da página mas eu também posso criar uma pasta para imagem a convenção é utilizar IMG para imagens agora eu posso colocar essa imagem dentro da pasta imagens voltar aqui pra aba do Index fechar aqui fechar aqui e agora eu posso colocar essa imagem escrevendo barra e vai ter aqui IMG e ele coloca automaticamente pra gente com o tipo do arquivo bonitinho é importante você utilizar nome da Imagem e o tipo do arquivo sem

erro por exemplo algumas imagens pode estar escrito pon jpg e na verdade quando você clica com o botão direito vai em propriedades aqui vai tá escrito png então toma cuidado e assim que eu entro aqui no negócio vai ter eu muito lindo Ah também tem esse Alt se você quer validar a sua página no site da w3c tem esse w3c validator ele verifica erros que pode ter no seu site Você vai precisar colocar aqui alguma coisa tipo minha foto aqui tipo uma descrição Eu acho que isso aqui altera quando você coloca o mouse em cima

ele vai aparecer do ladinho escrito isso mas só que por algum motivo não tá tá acontecendo isso então sei lá se você quiser verificar aqui validar você precisa ter isso então deixa aí né coloca algo que Descreva a foto para adicionar vídeos você escreve vídeo e vai aparecer isso aqui ele pede onde que tá o arquivo Vamos colocar inscreva-se pon MP4 que a gente vai aparecer se você não quiser escrever você pode clicar o botão direito e em copiar caminho relativo ele vai botar ali também é importante o você colocar outra tag chamada controls senão

o seu vídeo ele não vai carregar Direito pode ver que o vídeo tá aqui do ladinho se você D Play ele funciona tá sem áudio porque o vídeo não tem áudio mesmo se você não coloca esse controls ele fica todo preto e para você ver o vídeo tem que clicar com o botão direito e abrir vídeo uma nova guia que não é nada comum vamos ver agora a tag de áudio é bem parecido com a tag de vídeo na verdade é igual só que você muda as coisas para vídeo Joy controls E se eu vir

aqui no navegador vai ter esse negocinho Só que eu acho que escrev errado vamos copiar aqui caminho relativo CTR V agora apareceu tem como controlar o volume clicar para baixar velocidade deção cois que já vem padrão bem legal agora outro dia e por algum motivo tem um cabelo que ele tá tipo para cima aqui enfim se vocês sentir agonizador aqu uma tabela dentro dessa tabela a gente coloca as linhas e colunas TR são as linhas e TD são as colunas TD coluna ou seja se você quiser aqui mat dela ela tem três linhas você precisa

colocar tr tr agora nós temos três linhas e vamos supor que você quer duas colunas em cada uma dessas linhas coloca assim agora nós temos a tabela de três linhas cada terra é uma linha e duas colunas se eu dar cont control S aqui ele vai aparecer embaixo bem pequenininho porque não tem nada escrito uma tabela de três linhas uma linha duas linhas três linha e duas colunas uma do vamos escrever alguma coisa aqui preencher com Loren vamos dar Ctrl c contol v nessa linha aqui agora já que é a mesma coisa né não precisa

ficar refazendo Ah uma coisa bem legal que tem aqui no visual Studio é poder editar várias linhas ao mesmo tempo só você segurar o alt e vai ficar com esses vários cursores bem interessante PR você mexer várias coisas agora tem várias coisas aqui cara Acho que eu copiei errado copiei totalmente errado deixa eu apagar aqui pronto agora vai ter corretamente TRS linhas 1 Du 3 duas colunas eu não vejo ninguém usando muito isso aqui mas né interessante usar pode ser útil para você formulário formulário complicadinho acho que é mais difícil que tem aqui quando você

coloca o formulário ele pede para você colocar o local que vai ser mandado esse formulário esse Action ele quer isso no caso a gente vai ter que criar outra página HTML vamos chamar de formulário P HTML só um nome qualquer que a gente não tem um servidor aqui PR mandar então a gente coloca aqui formulário hml e também a gente precisa colocar o método que tem esse get e post dialog eu não sei o que é mas get ele vai passar pela URL essas informações e post é para mandar no servidor Então vamos usar o

get que é o que a gente quer aqui dentro do formulário escreve esse código que eu vou deixar aí na descrição na real acho que na descrição não pode cara eu vou colocar um link no code pen aí quando vocês clicar lá vai abrir um site que vai ter escrito esse código aqui vocês copia e cola no seu formulário ele serve para poder mostrar as coisas na tela eu não vou falar sobre o que que tem aqui até porque eu não sei eu copiei de outro cara é porque faz muito tempo que eu não mexo

com PHP velho tudo isso aqui da série é porque há três anos atrás foi quando eu terminei meu curo de informática eu sabia sobre HTML CSS JavaScript PHP mais KL mas eu esqueci porque eu fiquei focando em desenvolvimento de jogos então eu esqueci de tudo tipo Não tudo eu sei a lógica porque eu continuei estudando programação mas é diferente html L CSS eu nunca gostei muito de desenvolvimento web sei lá velho eu acho meio fraco chato mas no Brasil é uma forma mais fácil de você conseguir um emprego Então vou voltar a estudar isso por

mais que meu objetivo mesmo criar um joguinho Mas vamos lá copia isso aqui no bagulho de formulário só poder mostrar na tela já dá para mostrar para vocês como é que funciona tem aqui do lado eu criei o bagulho um input para nome se eu coloco o meu nomezinho aqui não é esse meu nome Ok apertar no submit vai aparecer nome Henrique Eric né Vamos finalmente falar como é que funciona o formulário todo formulário funciona com input você escreve a tag input eo significa que alguma informação vai ser mandada tem o tipo dela existem diversos

tipos de input se você abrir o site da w3c HTML input vai aparecer aqui input tag tem tudo isso aqui cara muita coisa obviamente eu não vou falar de tudo só alguns mas você vai mexendo você vai entender cara não é difícil é só você ler traduzir que que é cada coisa ali e dá perceber o input ele tem um tipo acho que dá perceber tipo botão checkbox color data e-mail por exemplo vou fazer aqui do nome mesmo então name nome acho que é um ma exemplo mas ok e o ID é opcional Mas é

interessante porque a gente coloca la antes depois vamos colocar o id nome também nesse caso a gente pode deixar a mesma coisa assim que eu crio isso aqui você pode ver na minha página HTML que vai ter um campo aqui para mim colocar o nome pode ver que tem até algumas coisas aqui nome minha mãe meu nome Nick de jogo isso porque algum site que usa o input com o name nome eu já coloquei informação lá e ficou Salv mas se você deixar assim não vai dar para entender porcaria o que que o cara quer

que você faça então a gente coloca uma coisa chamada Label antes e dentro desse Label tem essa tzin chamado for que você tem que referenciar ao ID eu não sei se isso faz alguma diferença na prática mas é legal para você saber que esse Label é do id a última coisa que falta fazer aqui no Lab é colocar o texto que vai ser mostrado no nosso caso o nome deixa sempre espacinho para poder ter espaço e agora vai aparecer aqui o nome que é ligado a este Campo Vamos criar aqui um sistema de login simples

vou mudar isso aqui para e-mail vamos lá e-mail o Type vou deixar no tipo e-mail também porque existe um um dos tipos e-mails que ele verifica se possui ara porque todo e-mail tem ar esse tipo de coisa nome e-mail também ID e-mail também é diferente o id e o name o for vai sempre referenciar o id o name é o que a gente vai passar para o servidor aqui os nomes estão iguais porém não é todoo o caso que vai ficar desse jeito esse name vai ser o que a gente vai mandar pro servidor o

ID é um ID comum ou seja uma forma de identificação daquele conteúdo vou criar outro input do tipo password vou dar o name de senha aid senha também tenho que criar um Label para senha e claro escrever que ele quer solicitar a senha pro cara e por último vou criar um botão que vai mandar essa informação pro servidor ele é necessário Type submit o nome vai ser enviar o texto vai ser enviar e agora se eu venho aqui tem dois Campos nome e senha era para pedir e-mail né então vamos mudar aqui esqueci de trocar

e-mail e agora até aparece os e-mails que eu já tenho salvo aqui você coloca sua senha você pode ver que quando você coloca o Type senha password ele já fica escondido as informações aparece um botãozinho para você revelar ali quando você escreve tem esse aqui aí ele revela E agora se você clicar no botão enviar ele vai abrir essa página que eu criei Como eu disse só você copiar e colar aqui no formulário e vai aparecer as informações que foram enviada no nosso caso paraa outra página HTML isso por a gente colocou aqui na tag

formulário no Action formulário P HTML que é o nome da nossa página no método get método get ele só envia pela URL as informações você olhar aqui em cima você pode ver que tem formulário P HTML e-mail senha ele vai aparecer aqui porque eu utilizei o método get se você coloca no m post você tá mandando pro servidor e vai ser uma coisa completamente diferente outro input interessante pra gente ver é o input Number até deixei escrito ali em cima para não esquecer só você escrever Number como qualquer outro input o nome dele a gente

pode colocar número ID pode ser número também o Label tem que referenciar o ID então número e digite um número analfabeto número pronto Ah legal E agora você vem aqui embaixo calma aí que tá aparecendo um monte de coisa que não deveria aparecer como aqui cara por que tá aparecendo esse comentário velho tá assim eu sei que não aparece não lembro como é que se comenta em HTML beleza vamos aqui embaixo agora de primeira e apareceu a tag número com ela você pode colocar um número e sem querer eu deletei o botão input de novo

velho para vocês não apareceu mas eu isso aconteceu Vamos colocar aqui o botão Type input rapidinho sem enrolação e faltou também o botão reset só copiar isso aqui muda o tipo escreve errado velho submit tô ficando louco cara reset aí agora sim cara e finalmente mudar aqui para resetar Maravilha é importante ter esses botões aqui vou resetar não é importante não mas quando eu coloco aqui tem que colocar uma senha eu clico para enviar número 370 normal vamos supor que você queira colocar algo como Qual a sua idade você não quer que a pessoa coloa

um valor negativo nem algo muito grande e para resolver esse problema a gente pode colocar tag min definir o número mínimo tipo um e máximo 122 se eu não me engano Essa é a idade máxima que alué já chegou e quando a gente coloca algum valor que não se enquadra pé de senha ele fala o valor deve ser menor ou igual a 122 se eu coloco abaixo disso tipo menos um ele fala que o valor deve ser maior igual a um muito legal este foi outro input que também tem umas coisinhas que mudam é checkbox

então vamos colocar ele aqui input checkbox o nome dele você tem que colocar o tipo é complicado velho checkbox Deixa eu só mostrar que que é uma checkbox é esse bagulhinho aqui você pode ativar e desativar ele aí você pode ter vários deles você já deve ter visto uma checkbox na internet elas são bem comuns vamos supor que a gente quer colocar aqui as linguagens Você domina Então a gente tem que colocar um nome que vai ser in comum para todas elas por exemplo linguagens a gente precisa também adicionar um Label e esse Label vai

referenciar o ID deles ou seja a gente pode copiar isso aqui deletar esses outros dois aqui e agora a gente tem três checkbox diferentes com o mesmo tipo de name porque eles são do mesmo tipo todos eles é sobre linguagens que você domina português português e sei lá japonês o for vai referenciar o ID como eu disse é importante o for referenciar sempre o ID eu descobrir Por que o for referencia o ID daqui a pouco eu falo por quê português e japonês inglês inglês tem acento não lembro se era ali o acento mas nãoo

faz português e japonês japonês letra maiúscula e japonês também tem acento né ah japonês também tem acento cara enfim quando a gente olha aqui Maravilha inglês acho que o labor deveria trar atrás e não na frente mas é só alterar a ordem o for significa que quando você clicar em cima da do Label o Label é o que tá escrito no caso em inglês ele também vai funcionar como se ele tivesse colocando ou seja se você tá aqui na senha você clica em cima da palavra senha ele já vai selecionar o campo de senha é

para isso que serve e também para ficar adequado quando a gente seleciona algumas coisas aqui vou colocar aqui senha necessário tanto faz e-mail colocar qualquer um @p.com legal e agora se a gente enviar eu coloquei um valor errado colocar 22 agora vai ter aqui linguagens u E por que foi o que ficou selecionado e antes estava linguagens linguagens é a tag aqui tipo e todos eles são comuns e por isso coloquei linguagens mas o valor que ele retornou é um porque por padrão checkbox e radius tem o valor um Ou seja você selecionou ele manda

que aquilo tá ligado no nosso caso a gente precisa alterar o valor e vamos colocar aqui japonês português e value inglês e agora a gente voltar colocar aqui meu e-mail sem qualquer uma número alguma coisa que é aceitável se eu selecionar as caixinhas e enviar ele vai aparecer corretamente o que você provavelmente quer outro input que funciona da mesma forma só que um pouquinho diferente é o radios Type Radio vamos supor que a gente quer colocar o gênero das pessoas seja tipo gêneros aid vamos falar que esse aqui é o feminino depois a gente cria

um também pro masculino muda para Radio name eles T que ser incomuns e aig Masculino Vamos criar o Label agora depois só para ficar mais bonitinho né for feminino Vamos colocar aqui feminino eu acho que escrevi feminino escrevi errado feminino e o Label pro masculino também Label for masculino masculino Maravilha e agora se eu vim aqui embaixo vai tá escrito bonitinho feminino e masculino só que como vocês podem ver eu só posso selecionar um deles por isso é importante você deixar o name igual nesses casos que você usa Radio aqui no input de e checkbox

não vai fazer real diferença mas é interessante você deixar porque são Campos que tem relação mas aqui no radio é obrigatório caso eles sejam iguais você colocar o name igual Se eu colocar aqui generos errado quando eu vim aqui na minha página eu vou poder selecionar as duas coisas o que não é o que eu quero porque eu você é um ou outro esse aqui é o básico PR você fazer as coisas de resto se você tem alguma coisa aqui que queira saber você vem aqui no site da D 3 co vou deixar aí na

descrição de qualquer forma e você procura pelo tipo de input que você quer você pesquisa assim input file Type file aí escreve w3c push Type file aí vai ter a página aqui só sobre push Type file vai ter também a syntax se tiver algum atributo que você pode colocar nele diferente ele também vai falar aqui embaixo no caso eu acho que não tem é Label for file File my file é realmente outra tag interessante aqui do HTML é a iframe iframe ela pede um sece e vamos pegar aqui uma coisa estranha acho que é w3c

pode ser se a gente colocar aqui no e frame frame border vamos dexar em um E agora se a gente olhar nosso documento aqui embaixo vai ter uma pagin zinha aqui tá falando que recusou a conexão não é todo lugar que funciona então deixa eu procurar algum site que permite aí ó encontrei um site que permite como vocês podem ver wiame Abre uma outra página HTML você pode ser tanto uma página que você escolheu tipo aqui no seu do próprio documento por exemplo deixa eu criar um outro aqui eu tenho aqui a o formulário P

HTML se eu adicionar ele aqui ele vai mostrar a página do formulário sem nada porque não foi enviado né Tá diferente e também abriu essa outra página que é do site The gamers basicamente isso aqui permite você abrir outras páginas HTML você pode ver que tá muito pequeno a gente pode aumentar esse tamanho com CSS Ah vamos tentar fazer isso aí Style wiit 300 PX acho que tá bom se agora eu ir aqui vai tá maior e na real ficou é ficou maior mas coloquei maior não que eu queria eu coloquei o formulário ao invés

de ser a página da the gamers alguns sites não permite isso para evitar problemas de como que é o nome ah prec sobrecarregar o site deles porque vai ficar abrindo várias janelas pode criar vá aí você pode dar problema para eles eles só negam a conexão maior parte dos Sites grandes fazem isso a ó abriu e funciona exatamente igual como se fosse uma página da internet nenhuma diferença é isso aí bem legalzinho vai ser a frame Geralmente as páginas antigas usam bastante disso mas pode ser que você queira usar a última coisa que falta falar

nesse vídeo é sobre HTML semântico basicamente HTML semântico serve para organizar melhor as nossas páginas e trabalhar de uma forma mais arrumadinha tem até esses exemplos aqui tipo Antigamente você usava div div div div agora tem header Artico fter bem legal esses exemplos para ver como que isso pode melhorar mas geralmente esses exemplos eles estão errados porque se você faz errado não tem problema porque na prática tudo isso que é div vamos falar certinho que é quando você tá fazendo seu site Antigamente você usava muita div tudo que você quer colocar no seu site ia

ser uma div vamos entrar aqui no clear pro que é um site deles legalzinho para isso Tipo isso aqui seria uma div aí se formulário a div aqui embaixo div aqui no canto div div e se você tá fazendo um projeto só sozinho pô de boa para você fazer isso não tem nenhum problema mas quando você vai para trabalhar com as pessoas era complicado E para isso foi criado o HTML semântico basicamente existem diversas tags que são só divs elas têm o mesmo funcionamento de uma div exatamente igual uma div porém a forma que a

gente chama elas é diferente e a forma que a gente usa é diferente não que se você usar errado vai dar errado vai dar certo porque na prática não muda nada é só para organização a pessoa pegou o seu HTML e ela já vai conseguir saber onde que ela tá onde que é o começo Qual que é o fim vamos falar certinho o que que é heer é cabeçalho nave qualquer tipo de conjunto de links Main todo o conteúdo principal do seu site eu não sei como definir certinho mas vamos pegar aqui o site da

KaBuM deve ser bem fácil isso aqui é o heer e aqui tem um nave por mais que ele seja com um menuzinho aqui isso aqui é um nave também tem links todo nave isso aqui é cabeçalho aqui embaixo tem um nave e tudo aqui que tá mostrando os produtos é o Main e aqui embaixo tem outra tag chamada footer que é o rodapé E agora tem as três coisas complicadinha ver com o conteúdo daquela página é só uma informação que você vai colocar sempre no seu site Quando você quiser quando você decidiu você usa tag

Aide para ela s qualquer a sessão do seu site article qualquer coisa que seja repetida no seu site pode ver que aqui nesse exemplo tá errado tá bem errado porque tem um article dentro dele tem várias sessões e o cara trocou que que é uma sessão e que que é um artigo ele fez ao contrário os artigos Elas têm coisas em comuns por exemplo vários produtos produto um aí você criou lá vários produtos 1 2 3 bem legal quando você tem várias coisas você usa artigo aí vamos supor que dentro desse artigo tem E como

que você usa esse produto aí então dentro desse artigo você vai usar uma section por exemplo vamos supor que a gente tá fazendo um site de culinária Tem a sessão ingredientes aí vai ter a sessão preparo legal a gente fez o artigo para uma receita mas a gente tem aqui a receita dois e a receita três legal então dentro dessas receita dois e três também vai ter a sessão de ingredientes e a sessão de preparo mas tudo que tá aqui dentro tem que tá dentro da sessão de receitas eu vou copiar isso aqui só para

deixar um pouco mais legal e colocar duas vezes ah ingredientes preparo ingredientes preparo ingredientes preparo aqui em cima eu vou colocar uma borda legalzinho E agora se eu vi aqui no meu site acho que vai dar para ver mais ou menos certinho como é que funciona ah background color Ah tá faltou eu falar que é borda se eu vem aqui no meu site dá para ver que tem uma section de receitas aí tem a receita um a receita dois e a receita TR hum hum eu deveria ter colocado aqui H2 receita 1 colocar isso aqui

dentro de tudo receita dois receita 3 legal agora tem a sessão receitas que é tudo isso aqui dentro da sessão receita tem receita um que é um artigo aí tem a receita dois que é outro artigo e a receita três que é outro artigo dentro dessas receitas Tem a sessão de ingredientes e a sessão de preparo Talvez seja um Pouquinho complicado de entender certinho como é que funciona isso só lembra que quando você tem coisas repetidas você usa article e quando você tem sessões diferentes você usa section É isso aí você pode ter sessão dentro

do artigo e artigo dentro da sessão Então é isso aí Main tudo que vai principal reader cabeçalho Nav qualquer conjunto de links footer rodapé rodapé a gente coloca informações da loja e sei lá endereço copyright by Sei lá o qu é legal você olhar roda pés de outras páginas ess aqui não tem sempre loja vai ter essas coisas certinho aqui embaixo Aqui ó roda pé roda pé roda pé Então é isso aí acho que ficou um pouquinho longo é só para mostrar para vocês tem nove partes no total deu 1. 5 GB mais ou menos

o que deu no vídeo de Land escape também então eu acho que vai ser mais ou menos ao mesmo tempo ou seja 1 hora e me assim ah que legal enfim espero que tenha ajudado vocês para mim ajudou bastante relembrei muita coisa tchau