Curso de HTML para iniciantes - Aprenda HTML em 1 hora

e Fala galera beleza sejam bem-vindos a mais aí um minicurso Nossa aqui do canal arte de podar eu sou Mateus bate o assunto principal hoje vai ser HTML HTML5 aprender tudo que é necessário para iniciar a codificar nossas páginas web com essa tecnologia que é o HTML e também ter uma imersão prática de html a gente vai aprender algum recurso e já vai utilizar ele na prática para conseguir consolidar Nossa experiência esse curso aqui é mais para quem iniciantes para quem tá começando agora para quem tem algumas dúvidas HTML ainda mas olha só que legal

tu já teu conhecimento na área Eu também já consiga Dá uma olhadinha no curso porque vai que tu aprende algo mais específico Augusto ainda não utilizou sempre acontece quando a gente faz o curso alguma aprendizado a gente sempre tira então recomendo fortemente a todos mas Mais é claro para os iniciantes é e os vídeos avançados aqui de frente vou continuar normalmente no canal só tô querendo abraçar essa galera que tá começando agora a gente aprender do jeito certo para ter uma invenção prática para conseguir fazer relação com a teoria e prática tudo em um curso

só pensam grande propósito do vídeo beleza e querendo paraquedas aí na inscrito no canal por favor se inscreva me ajuda muito conteúdo deixe aqui e de outros tipos de desenvolvimento web sempre são postados aqui com frequência bem alta novamente três quatro vezes por semana tá E também deixa eu tô aqui que é super importante para mim para me ajudar muito no desenvolvimento do canal beleza Olha aí nos esquecem líquido importantes aqui na descrição como um artigo explicando tudo sobre HTML então tem umas coisas que eu vou não falar aqui para ele não ficar com 5

horas também mas está no artigo Com certeza fazer super completo e também tem os nossos cursos aqui na descrição que tem dois o CSS fazer mais de 10 projetos já os dois beleza tudo aquele precinho né então vamos começar aqui vou deixar de conversa fiada e bora começar o assunto principal do vídeo já começar nos tu falasse com o mesmo né do parte menos um quê que é o HTML não era muita gente confunde o gato mulheres com uma linguagem de programação foi na verdade né o a palavra o tema HTML e uma crônica vai

pertex marcar lembrete então a própria não tava o nome da linguagem né a gente vê que não é bem especificamente programação mas é sim uma linguagem para gente trabalhar com código né então faça essa Associação HTML não é uma linguagem programação propriamente dita a gente vai ver porque mas é diante mas essas duas palavras aqui mas a dizem muito sobre o que que é então basicamente a gente vai ter uma linguagem de marcação e para que que serve a marcação quero provar porque eu vou marcar coisas tô toda a ideia é que a gente tem

estruturar nossa página Web a gente tem que ter elementos estruturais para poder formar o layout bonito que vocês vêm por exemplo em redes sociais se você acessa são no site Internet Banking tudo lá é formado com base uma estrutura de html Então ela é essencial para web é uma linguagem que vai com espada presente em todos os projetos que vocês acesso aí no celular no computador de vocês enfim se você sabe um site em html no meio daqui eu boto o porquê de ser considerada uma linguagem de programação pela verdade a gente consegue fazer operações

lógicas nela e ainda assim isso não pode fazer um gel aí não pode fazer cintura de repetições como looks with four mas não pode tirar funções para por exemplo reaproveitar código Então essas características são de linguagem programação certo por exemplo qualquer coisa assim JavaScript no PHP no Python mas não tem como sprays então daí tu começa a criar as diferenciações mas não tem orientação a objetos por exemplo no HTML mas em Java Script pode criar projetos orientados a objetos então a gente cria uma vocação muito grande quando começa a ver recursos essenciais para formar uma

linguagem programação tá eu boto jogo até ele faz parte da Tríade da web essas três linguagens recursos como ter fechar lá HTML CSS JavaScript sempre não está presente né provavelmente esses dois muito mais do que o JF junto mas só que a ter menos cresce quase certeza que o todo site vai ter para poder utilizar pelo menos fossati tático tac um currículo uma pessoa Talvez não tem JavaScript Mas tu ver um site com animações em Java Script sim atendeu as suas consegue fazer com CSS Mas provavelmente a pessoa já faz com JavaScript porque tem mais

recursos entrando fml estrutura a página Beleza a gente tem um Sesc este Lisa a página o primeiro e não há suficiente a gente ficaria vendo a passar com os as letras pretas e fundo branco né então para chegar em layout avançados como está acostumado a ver Empresas Grandes por exemplo já passaram CSS se ele quiser animar a página é a Cliquei no botão Abrir formulário e isso vai ser feito com JavaScript então esses três caras aqui são aspectos muito utilizado no front and né então é essencial para tu pegar o que existe front-end ou fustec

aprender esse caso aqui até o biquinho se ele quiser ter noções do que é front né Então essa informação é importante porque a gente nossa importância do HTML que muitas vezes deixado de lado a galera não costuma aprofundar porque ele parece ser muito fácil no começo mas né tem seu detalhes que vão propiciar o melhor projeto projeto melhor outro lado então é bom avançar nele também tá eu boto que ela pode ser executada diretamente no navegador então é muito bom e ela porque ela não precisa de setup tem outras linguagens que se instalar a própria

linguagem se vou fazer alguns etapa o maior para poder ter o recurso rodando 100% no Windows da vida por exemplo né às vezes temos as ferramentas desenvolvidas para Linux na então ele tem que fazer algumas manobras a mais para rodar no Windows eu HTML tem a boa notícia que não mas tendo um editor de código ou seja algo que a gente consiga digitar lá é formar um arquivo HTML a gente já consegue tá praticando programando em HTML Beleza então ela é muito interessante que nesse porte o bota que toda a página web tem composição HTML

isso a gente já comentou antes né se tu foi ver uma passagem de um titular pro você pega aqui só pai já tem uma imagem pronto ela já vai ter algo a temer lá então todos os elementos que tu tá vendo em uma página Web são provenientes do HTML todos eles foram inicializados pela HTML tá E aí a gente vai nosso próximo assunto O que forma a estrutura né gente falou muito a gente falou que HTML estrutura o gatinho a estrutura as páginas web mas o que é essa estrutura tá de uma ideia resumida do

que é mas é bom e aprofundar entender a fundo o que que faz parte desse cara então bota que geralmente ainda criar elements só parecido com os do Word então quando a gente está vendo um site se você estiver uma analogia com o Microsoft Word Por exemplo vocês vão ver que muitos dos recursos são parecidos né claro tu não vai devolver o site no hoje e jogar no servidor mas os elementos tem a sua semelhança por exemplo vai ter títulos e até parágrafos então um site ali como é que ia fazer uma chamada principal ele

coloca um título e isso é um elemento HTML um elemento que baixo durar também o nosso site a gente vai ter a forma de criar este título Já poder escrever textos mais longos com parágrafos certo e também escreveria por exemplo nosso TCC a gente leva diversos parafusos aqui ela mesma que vai ter parágrafo de texto a coisa explicando um produto por exemplo medalhistas e podem ser ordenadas né passo a passo um dois três quatro uma receitinha de bolo e batentes não ordenadas com suas para citar tópicos ou itens presente numa embalagem a gente vai ter

tabelas para tirar dados tabulares quando a gente precisa colocar por exemplo a composição de algum alimento lá então a gente coloca ali qual é o produto ingredientes Quantas gramas tem dele e tudo mais a gente consegue fazer isso por meio de tabelas e imagens né também pode colocar imagem no Word e o nosso site também então não é conversa como que é basicamente imagens.net tem a imagem de cada produto para fazer a venda só pelo contato visual então ele vai poder criar esses aqui e outros elementos a partir do HTML o que fazer os principais

só pra gente fazer essa analogia com o olho e consegui fazer um contato com alto já trabalhando da vida todo mundo digitar um texto no olho não gosta de notas que seja mas e os parecidos a estrutura um elemento também a estrutura um trabalho quem tá criando lá para escola vou para faculdade então é basicamente que eu vou fazer com HTML e se fez tem uma simpática uma forma de escrever no diferente do que só ele tá digitando e aí galera está quase entrando na prática então eu vou pular um pouco da teoria e começar

a executar HTML com vocês no navegador a partir desse momento depois a gente volta para os slides para prender outros recursos mas aqui é muito importante que já consigo comprar ela prática comigo para entender que é simples é fácil de fazer e tu vai conseguir agora aqui nesse momento então bota aqui para executar a já tem mais embaixo navegador ou tu tá me vendo também esse vídeo aqui tem um navegador já preenchi o requisito ainda tem que ir umas código em algum editor de código aqui né Tem um parente certinho e de todos a gente

tem um submetendo perde mais mais a gente tem o próprio Notepad do Windows a gente tem ouvindo lindo que você tem um Black Code Geass code ele é um estou decore muito poderoso e em diversos outros recursos que vão ajudar a gente a trabalhar com várias iguais programação não só html html inclusive também mas por vários motivos ele acaba sendo Hoje em dia a melhor opção para quem quer programar Então a gente vai instalar esse cara para já ficar aí pareado com os programadores profissionais estão já um passa dia que tu tá aí na sua

carreira de programador Pode ser que até já tem esse cara instalada então tu vai poder acompanhar só eu instalando aqui e já executando em seguida um código a primeira navegador que ele vai passar fazer depois converso com ele aberto e o navegador aberto também a gente vai salvar um arquivo do projeto em uma pasta e tu tem passando desse tópico o senhor pastor cria aí na pasta usuário com extensão. HTML isso aqui é de fundamental importância pelo navegador entender quem tá arquivo não é um arquivo de texto como ele também consegue interpretar esses arquivos a

gente quer trabalhar com HTML que a gente vai salvar com essa extenção Zinho aqui ele automaticamente vai conseguir se interpretado navegador o código HTML válido que a gente digitar nesse arquivo no navegador vai ler e vai pedir para gente que ele consegue interpretar com base nisso aí eu botei aqui já falei já vi esse arquivo no navegador a gente pode copiar o caminho relativo dele ou seja a pasta aqui ele tá no seu computador universo onde tem uma funcionalidade interessante que aperta o botão direito em cima do arquivo que consegue comprar esse tal de caminho

relativo aí para tua comunidade' digamos assim mas poderia ditar o caminho do arquivo na própria barra de pesquisa do navegador para lavagem endereço somente digita os carros quem quer você tá então bora melhor prática aí que já tá conversando muito ainda não criou nenhum código para lá e agora como é que você tem que fazer é Abrir navegador o meu já tá aqui aberto não tô com o Chrome aqui e já estou na página do visual Studio code tanto entra aí o link é esse aqui Cold. Visualstudio.com outro basicamente procura do Vert código assim ó

deu entre aqui eu caí na mesma página que eu tô aqui já aberta tá então assistindo aqui e vai ter uma sugestão de acordo com o sistema operacional a melhor o melhor executável para instalar no seu PC o vs code então no meio das vezes que vai só clicar aqui mas se não tiver correto pode abrir a certinha e achar a distribuição é o teu sistema operacional e baixar a que tu quer né ela aqui vou ficar ele vai baixar um executável para mim ele tá indo caminho para outra página que eu já aprender utilizar

esse cara a gente não vai precisar porque eu vou mostrar pra vocês ó baixou aqui eu vou executar esse executável a mente executa ele abre essa tela dia 7 a gente vai aceitar o acordo aqui né a gente tem algumas opções para inserir marcar os marcar a criar recomenda Stop adicionar o pênis ficou de Cubatão direito adicionar variável peste para poder abrir o versículo pelo terminal então só opções boas aqui eu vou deixar todas elas tá aí tu vai ficar aqui em install tá eu não vou brincar que eu já tenho instalado aqui eu só

vou abrir o meu vou cancelar ele vai ser exibido basicamente como tu vai ver o meu aqui ó galera vai ter provavelmente a religião é a versão que tá agora ele comentando um pouco sobre ela este Welcome que tem que fazer aqui dá um saio Open folder e abrir uma pasta que tu quer que o arquivo projeto seja só pertence a parte que vá achar depois para poder fazer os códigos né então aqui né só pasta já tô com a porta aberta aqui ó o direito em new files aí ele começa abrir um tronco de

ali de nome de arquivo para mim então a gente pode voltar-se ao arquivo. HTML tá e vejo que já reconhece né e extensão quer HTML eu vou dar um leite aqui ele vai criar este arquivo e já abre automaticamente nem eu sei digitar aqui alguma coisa testando o HTML e salvar me dá um contra o s e tu vai vir aqui com o botão direito no nome do arquivo de novo e apertar Tem copo e pés copiar caminho tá aí agora tá não tô contra você não é o caminho deixa arquivo no teu PC então

eu vou dar um controle aqui na barra de navegação e ele vai imprimir um arquivo HTML isso aqui por mais que tenha só um texto a galera é a gatinha já a gente não digitou nada tenha levado tanto interpretado como texto mesmo a gente já entendeu que a gente quer uma somente de código HTML aqui vai conseguir fazer qualquer site Apesar que botou e inspecionar a gente consegue ver tudo o código HTML vocês vem aqui que a gente não digitou nada lá no editor Solta esse HTML e já criou um monte de coisa aqui então

mais uma vez tem um indício que deu certo nossos experimentos de html mas agora a gente vai voltar para o slide tá gente aprender a digitar HTML e depois a gente volta na prática Então galera talvez se tenham visto ali do lado do meu texto aparecer algumas coisas estranhas que eu não digitei Red bor I vários nomes ninhos ali e roxo lá do texto e aqui o ação tags aí tem que ficar digitando tags para o navegador entendeu que a gente quer dizer para ele nem parece como HTML nem exime as tags já prontas em

nosso navegador e se quiser aprender agora o que são Texas a gente vai aprender a sintaxe EA gente vai criar o sal na prática eu boto aqui que os elementos HTML são inscritos através de tex não vai ter uma sintática semelhante para quase todas elas estão os elementos HTML eles são escritos pela forma em alguns clima diferenças mas a gente tem que entender a base dele pra gente entende um gente consegue interpretar qualquer outro elemento HTML com as suas diferenças Claro e nem aceitou usar Mas você vai ter Mary tentar não gravei na cabeça mas

se eu ver um elemento diferente não sei que ela lembra que eu tinha é isso vocês tem que conseguir entender ao final secos também tomando que assim táxi eu botei sintática que quer é a forma decodificado algo em uma linguagem programação Então essa palavra esse presente no dia a dia da carreira de vocês toda controlador do pai tá mais simples a não gosta sintaxe JavaScript essa palavra ela significa um modo que tem de escrever alguma coisa é uma linguagem tá E assim tá que só quer dinheiro eu boto aqui é semelhante para quase todas as

tags tá então a gente vai ter a mãe de maneira de escrever em quase todas as tags vale a pena entendeu então é só você exemplo aqui eu tirei alguns prints do editor ficou meio de torcida mas a ideia a apresentar para vocês isso aqui mesmo vai dar para entender corretamente eu quero passar você vai conseguir entender tá olha só isso aqui era Anatomia de uma tempo tá realmente né essa letra que tá em roxo ela vai descrever o que até e representa aqui é um P um p significa parágrafo tá então Aqui estamos escrevendo

no parágrafo em HTML Só que não é só isso tá em estudos servir sempre esse sim táxi para ele que é os coloque sinal de menor e esse sinal de maior né E no meio o nome da terra então isso aqui é a região daí de abertura tá depois daí de abertura mas seguida pelos sinais o nome dela ele vai ter o conteúdo nem que eu até encontrou eu vou ficar só para você também mas aqui essa aqui como um parágrafo né tem que ter um texto porque todo parado que tem um texto certo a

gente colocou Este é um texto dentro dentro do baralho + HTML Não entendi onde espalhados acaba então é justamente por isso o técnico fechamento que exatamente igual a tag abertura porém com essa barra aqui quer dizer que isso é roupa para tá então É isso aí tem que saber aí abertura conta eu uso tags fechamento o quê que isso aqui gera quando navegador ele gera não parar Então vamos criar o nosso primeiro para o nosso primeiro corre lá tem média Bora lá então a ideia que não feche o editor ao longo essa hora que a

gente vai estar indo e voltando lá no slide direto até depois a gente criar um mini projeto prático preciso entender melhor como é que funciona aí caudalimetro tá mesmo tem que ter a base para isso eu vou criar o nosso trabalho como é que eu vou fazer aqui primeiramente cara a gente vai pagar nosso texto aqui tá eu vou abrir a minha pele daquele fecho automático mas é o verso coisa e mostrando pra poder olha só que eu fiz aqui e coloquei um sinal de menor o nome da tag p e um sinal aí de

maior melhor que marque certo a da matemática básica lá deve lembrar e eu abrir a tag aqui isso aqui até então não quer dizer nada então tem que digitar alguma coisa meu primeiro texto em HTML beleza finalizei é isso que eu quero aí agora eu tenho que fechar a boca tem nele ele não gerem a gente vai ver que também depois mas para eu tirar a primeira bem escrito conciso eu tenho que fazer fechamentos tá para ele poder entender realmente que eu tô querendo fazer então vai conhecer e até que fechamento que é é o

melhor de novo em vez de botar o pé agora em volta/quer dizer o fechamento mais um p porque ele tem colocar o mesmo não né a gente tava mexendo aqui até que a gente abriu ali certo e aqui sinal de maior de novo a gente fechou abriu Fechou tá aí e colocou conteúdo pronto a gente tem parado queria fazer agora basta a gente navegador da Oeste Sim lá no nosso HTML alto aqui com testando eu vou dar F5 e agora e imprimir um texto que aparentemente é a mesma coisa que antes porém Galera vocês vem

com as tags não estão aparecendo aqui negócio que a gente estou aqui ó essa abertura e fechamento não apareceu ali tem a gente pode dizer que a gente fez navegador interpretar a tag caramba eu consegui digitar o outro aqui ó eu vou comprar e colar e ele vai te emprestar de novo ó tem mais um parágrafo aqui beleza e como é que vai fazer a prova real por aqui navegador entendeu mesmo Será que Mateus não tá me enganando Olha só deve botão direito de novo essa lá e aqui em Vejam Só as terras estranhas estão

aqui ainda Beleza a gente vai vai ver as futuramente mas o que é interessante é que as nossas terras também ficaram manchinhas Então a gente tem que as outras são tarde também tá mas não precisa preocupar tudo certo navegador tá só jogando a gente então a gente criou as nossas duas semanas atrás a gente tem dois parágrafos inseridos no nosso HTML Beleza então bora perdi então agora a gente já viu que tag a gente já conseguiu criar nossa primeira mas como HTML Não é só isso ele tem outro recurso interessante também como os atributos tá

mostrando atributos E se eu como opções especiais para configurar determinadas tags nem toda a tag tem atributo mais algumas tem em que se utilizar eles para o bom funcionamento dela que a escada e olha só tem uma tag a gente não sabe o que que é ainda um cara que tá HF com um site e um conteúdo e para o Google Então se vocês forem pensar que vocês imaginam que tá acontecendo aqui bom tem um site e eu tenho uma uma menção de ir para esse site Então a gente vai ser um link certo eu

boto aqui embaixo essa tag gera um elemento Porque caso que nos leva até uma outra página eu como é que eu vou fumar HTML em que página Eu quero ir a partir de um clique certo eu vou ter que informar ele primeiro atributo porque senão ele colocar no link na faixa Isso não é legal certo então este atributo HF aqui da tag ar significa rancor ou Âncora na que é até de links pede própria para Mix solicita quente coloque um link entre aspas consulte um texto tá nesse atributo a gaffe o momento que comece Ir

para o Google gente vai sempre se ela tá lá porque é o que só tá e faça Beleza então bota que o link dessa página é determinado pela tribo Takahashi E aí galera esse aqui é só um exemplo a gente vai ter outras dez que necessita de atributos então se você tiver algo dentro da abertura percebo que fechamento aí não precisa de falar provavelmente é um atributo da tag para configurar ela de uma maneira então você já perderam mais uma coisa agora vamos lá criar nosso link do Google agora vou chegar aqui eu vou criar

me até aí a certo diâmetro e aqui eu tenho que seguir o fechamento nela Então barrar beleza 30 essa tag a gente vai ser um atributo aqui dhf ele tem que igual a consulta um variado que está declarando que tem que atribuir um valor de texto Então a gente manda entre "aí aqui dentro eu coloco algum texto por exemplo e fala o Google como tava lá mas tu pode brincar para um site conhece site o direto então o que que tem que fazer parecer de funcionar tem digital sair daqui então https/BA www.google.com domínio né esse

é o endereço Google tá agora a gente criou não atende Âncora que leva para Google vou ver se funciona ou a ouvir o projeto aqui Monarch cinco agora quando eu ficar aqui olha só que legal eu estou no Google Então sempre que tu clica em alguma coisa na página e redirecionar para outra página é por meio de uma tag de âncora para só que legal sentir precioso elemento aqui a gente consegue ver exatamente com a gente criou ali e o link está aqui a gente consegue ver até o link que botão vai nos levar certo

tanto pode chegar toda a página de processa para onde link está te levando geralmente cara é para o site né mas às vezes é para outro um site externo tem o que faz quanto não quer perder esse visitante né de ele sair do teu site para acessar outro porque tu precisa limpar o site a gente tem um outro tributo para taguear tô Target o Instagram aqui vai colocar o valor de Underline Black filha fazer com que quando clique nesse link ele abra a página em outra aba olha só que legal porque carregar o projeto sempre

Recarregar para pegar as últimas mudanças que a gente fez o arquivo agora clicando aqui ou em outra página ou seja eu não saí do meu site então recurso muito interessante também bem procurado pela galera aí de deve tá beleza a gente Aquilo Que atributos a gente vai utilizar ainda mais atributos tá Bora para seguir e ver outros elementos aí os recursos da letra m então garoto um recurso interessante e muito utilizado que a gente tem que aprender quando o programa HTML é um encadeamento ou né se não é que é o nome do recurso em

inglês tá eu boto aqui encadeamento também conhecido como Unesp é quando a gente são um elemento dentro de outro tá eu não tenho só pega de conteúdo mas tem 10 que dividem parte do nosso site por exemplo sessões tensão superior a seção intermediária e tchau eu vou gravar bagunça todas as peças ficarem soltas na Idade Média encosto criar divisões certo eu boto a técnica muito importante HTML para criar seções acabei de falar eu era só utilizou duas novas tags aqui agora conhecimento de vocês se você estiver não tem prestar esse código aqui e vocês pensaram

que tá acontecendo o bom é bem simples então criando o encadeamento aqui de um título tão H1 significa Redding título um é o bastante para títulos e um parágrafo esses dois caras percebam esse espaçamento aqui ó interno Tão dentro de uma tag de que é uma tag tabox mas tem que tá divisões e ela vem de divisão então aí tá querendo a divisão aqui no site Uma seção tá com um título eo subtítulo que é super comum também então eu boto aqui a gente tem uma tem livre com o título palavra ambos encadeados isso tuas

conversa daqui não só para si e subtítulos né Não só títulos e parágrafos Claro você muito comuns pra gente poder organizar o nosso código melhor pode fazer mais sentido ao Cassino apresentado na tela tente até conseguir utilizar depois que você acesse Beleza então bora ver aqui como que acha divisão no nosso ali né então agora agora você quiser trabalhar com Netinho aqui como é que eu ia fazer a a dividir esse dois parágrafos aqui em uma sessão então eu vou dar contra os fiz aqui e vou criar me atende diz a gente pode ver se

for digitar div e apertar deve ele alto completa esse recurso chama e me Tá mas tensão que já vem que vai escutar eu vou dar um enter ele aqui dentro vou dar o controvertido as tags e vocês lembra que eu falei com HTML não gera erro nenhum ele não vai reclamar e eu fazer esse jeito aqui mas paga Tem média como colocar embaixo relação a gente tem que ter um mínimo de organização para outros programadores conseguir entender umas código de fazer mais sentido e a gente conseguir dar manutenção ao longo do tempo eu queria fazer

aqui ó primeiro parágrafo já tá certo tem um tag aqui a gente vai descer lá no outro deve aqui nesse palavras para ele ficar como nesta você já alinhado um cadeado ao meio de um toque que eu tenho que duas partes estão encalhados alma deve ter que embaixo é que poderia criar uma outra dica Tá eu vou dar um título Então olha um dizendo clique no link: e eu vou jogar essa Aguiar aqui em baixo agora querido duas divisões no site utilizando né sim que horas e sempre comece tinha ele é infinito eu posso entrar

quantas vezes eu quiser nós vai ter que manter o bom senso tá isso nem com experiência prática e formação Bora para visitar isso aqui lá no navegador ao forno F5 aqui e como a gente percebe Não tem nenhuma alteração visual macho na nossa escolhe aqui a gente pressionar está realmente dividido então a gente passa o mouse em cima das tags div percebo que ele criou realmente a divisão me abraçou todas as terras que estão encadeadas nelas lá no Mercadão é uma com os dois pares e uma com título e o link então é exatamente isso

aqui parece não fazer sentido mas depois quando tivesse SS em jogo a gente poderia fazer essa Diva aqui que ocorra de fundo preta e essa aqui cinza Então eu queria realmente separar os elementos para fazer essa diferenciação deste com tender por isso é muito útil essa técnica aqui tá tem alguns elementos que não podem ser alinhados mas sim um assunto um pouco mais específico que a gente vai deixar para uma outra vez agora bom então aprofundar é mais ainda na HTML voltamos Lights Então galera uma outra coisa bem interessante aqui no HTML que vai ser

não tô corriqueira mas é importante aprender são as tags sem fechamento não tem algumas tarde a gente não vai criar aquela segunda até ele com a barra para poder encerrar lá porque porque geralmente essas que não tem fechamento as não possuem conteúdo então não tem nada entre a abertura e fechamento Então quem Olá pessoal por essas aqui não precisa fechamento então a gente coloca só tem de abertura e pronto um exemplo é a tag de imagem que é MG tá aqui a gente vai ser os atributos e pronto os atributos configuram até e completamente a

gente vai colocar o que o caminho da imagem que é o surf src tá no áudio que consulte uma legenda ao que a imagem representa só de forma textual tá então colocando isso aqui a gente vai fazer a imagem apareça quem se por alguma porventura ela não aparecer aí o áudio ele tem ação conseguindo exibir algo que a imagem contém só que por meio de texto claro que você que vai ficar são mais simples do Alce ele tem os outros porém está entrando mais em S ou enviar-nos acham mas eu acho para dançar tá bom

se ater a tag que não possui fechamento vamos criar uma imagem para gente ver como é que funciona então para a gente quer uma imagem HTML a gente tem duas maneiras ou tem a imagem o patinho aqui do lado do arquivo ou a gente vai ter mais internet não tem problema nenhum então vou aqui procurar alguma coisa e por exemplo HTML5 eu procurei aqui vou pegar imagens eu posso copiar Olha só o endereço da imagem isso a fazer com que eu tenho acesso a colocar ela no meu código e claro até quando sai de ficar

no ar depois que a imagem foi excluída dele a gente pega essa certo Por isso que é importante também tem a imagem no próprio projeto tá E que vai acontecer aqui as processo é o mesmo vai acontecer aqui daqui até aí de imagem certo e não tem fechamento depois é só botar ela assim a gente tem que ter dois atributos o src e o áudio tá os dois são textos para ele vai ser todos entre aspas e não sei não é certo pode colar ter o link de Março copiou dando controver é que ficou bem

grande o link né Beleza talvez se eu entrasse no site ficasse menor que pegou ele de perto boa e aqui no áudio galera a gente vai colocar tivesse eu consigo eu melhorasse aqui o pé daqui ó o que é melhor para todo mundo né melhorzinho Mas beleza eu posso colocar aqui na segunda linha não tem pela nenhum seu trabalho do fechamento da tag a gente pode dividir ela acertar tô aqui no áudio comigo dizendo que eu tenho ter alto Descreva a imagem é assumidamente né o que ela representam voltar logo do HTML Beleza então é

isso que mandando áudio você está aqui já inserido né Beleza mas da Wikipedia e eu vou dar um contraste especial pequeno meu Editora aqui eu tenho um organizador de código de grande assim e ele me sugeriu colocar essa barra aqui de fechamento na tem ela opcional tá eu consigo colocar HTML sem ela mas você pode colocar também aí esse recurso chama self-closing tag ou seja tem fecha sozinho mas colocando a barra ou não ela funciona na mesma né antivírus aqui projeto de novo dando F5 agora a minha imagem está aqui gigantesca mais tarde o seu

inspecionamento eu consigo ver ela aqui não percebemos aqui nunca tem medo navegador ele não tem o fechamento certo então por isso que eu falei que a gente pode colocar sempre não tem problema nenhum aparece a URL da imagem o caminho relativo poderia ser também se eu tivesse em baixo no computador e o áudio tá esse áudio ela tem muita sensibilidade ele vai estar presente ali para explicar por exemplo o motor de busca que entra no site para entendeu qual conteúdo dele o que imagem Presente porque ele não vem mais só texto tá mais interessante a

gente conseguiu colocar uma imagem aqui e forma fácil com HTML puro Beleza então assim é como você vai ser qualquer outra imagem em outro projeto que vocês tenham tá com a tag MG Beleza bora O slide a gente vai começar agora a avançar mais para prática do que te Oriente quase evita os conceitos iniciais Olha só alguns fundamentos para a gente poder prosseguir aí para só pra ti vá lá então lá ali até aquele ponto a gente escrevendo aqui mede muito solto certa E aí julgar e tal a gente viu que foram criados umas ideias

que a gente tem digitou e exatamente por isso proposta a gente tem uma estrutura básica de html qualquer documento todo comendo HTML temos muito semelhante se eu composta tags especiais que são basicamente essas aqui tá então eu vou explicar para vocês para o que ela serve e depois a gente vai criar a nossa estrutura lá no vs code tentei a tag o doctype HTML que é uma técnica aqui sozinha tá basicamente ela informa o navegador que este é um documento dele até menos cinco para entender diversão da minha primeira quem tá trabalhando tudo mais tá

Até de configuração gente pode dizer assim depois a gente tem uma tag de html que ela tem fechamento também tá e ela pode definir a linguagem do documento a gente poderia votar pt-br por exemplo tá e interessantes até que eu abraça todo o nosso HTML Beleza então tudo o que ela página fica dentro dessa técnica Oi e aí depois que você se você vai bem mas tem duas divisões o Red e o bar está e aqui a gente pode pensar no corpo humano ele fazer essa não hoje o Régis seria o nosso sério tá todas

as configurações todas as formas que a gente tem tudo que a gente sabe até hoje está guardado nossa cabeça tá então aqui no ren vai ser ir assistente de configuração que vão desde definir a linguagem do documento né esse aqui é o padrão de charset de para receber acentuação a processar cedilha a seguinte tio então ele define este a sete gerações que eu tava trabalhando como português tá depois ele tem um ataque de ir neta também estão crescendo meta meta e duas três metros porque a sua meta tags a gente configuração e a segunda aqui

a definir a viewport né seria a possibilidade do nosso site trabalhar de forma responsiva sem essa terra aqui aí não consegue deixar o nosso site pronto para celulares cartão Sodexo a discutir a dito depois a gente até aqui detalhe tu está tu aqui não vai na página está aparecendo lá em cima da barriga o navegador como a gente consegue ver por exemplo entrando o site que a gente acesso a gente vê ele a Google Facebook e Instagram então estão criados A partir dessa terra aqui beleza e depois sim e tem o Bari quero que aparece

as tags e vão estruturar nosso site Então a gente tem por exemplo a um conteúdo site então tudo que tá dentro do baile vai aparecer vai ser exibido para quem acessar o site Beleza então essa estrutura aqui essencial que não pode faltar em nenhum projeto ERP vocês forem criar Bora que a nossa tô aqui agora eu vou deixar de arquivo assim para vocês terem Com referência eu vou querer um outro arquivo chamado estrutura. Html e daqui não responde tem uma coisa bem legal aqui nunca ficar digitando tudo que eu acho que ele é muito como

tô correndo ainda tem que digitar aquela mesma estrutura Então como é que ele pode fazer aqui não respondi para ela aparecer sem digitar quase nada escrever de exclamação tá e dá um tempo aí tudo que eu não sei vocês lá tá aqui também eu percebo né você só gastar meta aqui tá mas ela também é importante para compatibilidade com o Internet Explorer beleza navegador terra é claro que tem para definir a questão de html para o navegador a gente tem HTML que abraça todas as 10 a bifurcação do red do baile que são as ideias

configuração eu vou tá aqui ó minha estrutura HTML ainda consegui ver isso aqui lá no parque e aqui no bar eu vou botar h11 o mateicu tá então a inserir conteúdo eu inseri Tito e a minha estrutura agora que até que foram geradas que a gente viu no outro documento não aparece mais porque eu já coloquei a maioria delas inclusive mais alguns Então bora pela prática tô aqui no navegador eu simplesmente posso trocar o nome do arquivo aqui ó aqui para HTML para estrutura. HTML aí vai abrir aquele nosso novo projeto aqui galera olha só

eu já tenho meu H1 meu título digitado beleza e nenhuma daquelas outras informações aparece aqui ó exatamente quem quer cientes pressiona a gente consegue ver aquela mesma estrutura a gente criou Agora sim tudo que a gente colocou lá tá aparecendo aqui a gente procurou o mínimo necessário para que a tem médico só corretamente e Red todos nós também traz que a gente colocou inclusive nosso site e veja axila e apareceu o time exatamente igual a gente colocou é que eu falo pra vocês que aparece nesse nosso documento no antigo documento de botar aqui arquivo nós

estamos aqui então nós que a gente quer quer colocar o nome nosso projeto não temos sempre a diferença tem um detalhe ela é uma das redes sociais como as outras aqui em Bari acha corpo nosso site vejam aqui tudo que eu coloquei em baixo e aparece o resto não então é exatamente isso que a gente quer e ao atendimento para colocar aí em qualquer projeto web gente for trabalhar Beleza agora ele vai conversar com uma outra parte mais interessante que é principais elementos do HTML alguns a gente já viu mas é bom a gente rever

para praticar a gente vai ver outros novos também então galera vamos seguir agora para essas tags aí mais utilizadas que eu vou fazer aqui é diminuir um pouco o som tá Ele disse que já deu para entender a simpática agora não vai bater uma escrever pega porém outras que a gente ainda não viu então o H1 acho que vocês queriam título certo gente vai ter outras pegue de título que é o H2 H3 H4 bom e até o HC está que acontece Clínica inteiras para poder criar títulos não menos importante devemos assim por exemplo pagar

um a gente tem um por página a gente vai definir o assunto principal e depois a gente pode ter 2 ou 3 H2 para definir assuntos secundários né e assim a gente pode ir indo Porém na maioria das vezes ele vai utilizar Hotel H3 no máximo Tá então botar aqui ó outro título a gente precisa criar um H4 mas um título sei se fosse ver isso lá na página Web Olha só eles vão diminuindo o tamanho da fonte certo mas a gente não deve utilizar eles por esse motivo porque isso a gente vai deixar carro

do CSS que nós mudar o tamanho a cor ou se ele vai estar com a letra mais próxima que seria o ou senão vai estar vai ficar em itálicos não vai aqui a gente tem que levar em conta o nível de importância tá Oi e aí queria perguntar para vocês também agora galera atende de comentário comentário quando tinha inserir alguma informação por exemplo determinando alguma sessão do site o algo que é essa parte aqui representa porque esse título tá aqui então fiquem seria uma formação mais para os programadores ver ele mas é importante tem aí

nos comentários no HTML são disponíveis para todo mundo teu irmão para botar dados sensíveis mãe escreve comentário é basicamente nenhuma tag a gente vai iniciar ali com o sinal de menor exclamação traço traço a gente fecha né achei que o fechamento do comentário HTML com esse traço traço e o sinal de maior que beleza ninguém faz com esse aqui né a gente vai ser um conteúdo Este é o meu comentário o negócio de fui ver ele é o único os elementos que não vai aparecer no baile mas ele tá aqui não pode colocar lados em

cima porque todo mundo vai conseguir ver beleza e para que eu quero colocar o comentário ali eu quero definir as sessões quem tá prendendo Então vou tá aqui ó ren tá agora eu vou para outra pegue seria osso parágrafos Beleza a gente já viu como a gente vai abrir e fechar a tag P certo colocar algum conteúdo aqui no meio Este é o meu parágrafo é que eu tenho que ter mais longos eu vou colocar parágrafos tem um texto mais objetivos curte que determinam algo é um título é assim que diferencia esses dois caras para

os dois representam em texto vai no projeto ele representa isso aqui Oi gente vai continuar agora a gente tem até aí dele que a gente a ver também pegue de mim ele vai colocar a tag ar certo e ela recebe esse atributo HF e vai ter o site que ela vai limpar por exemplo para descuidar. Com.br ir para o hora de colar aí a parte nome clique neste link você levado esse novo site ó aí ele me impressiona lá para o Blog certo Ai eu não quero que usuários sai do meu site eu posso fazer

eu posso criar um link em nova aba para que a gente faz tarde igual a Ana vai não é aí agora o link aqui vai abrir uma nova aba em vez de abrir na mesmo vocês vêm aqui que quando a mesma linha o quê que isso acontece só o de CSS mas eu vou ficar para você rapidamente alguns elementos como os títulos de parafusos são elementos de bloco Deus vou comprar sempre tem de largura da tela gente pode ver aqui ó ocupando né mas isso essa tag ar e outros alimentos são inline-block ou seja eles

ocupam o tamanho do texto deles tá então como é que agente faz para imprimir um lá em cada linha a gente pode secundar eles né fazer um neste uma div pede visão é um elemento de bloco então coloquei um ar em cada dia vive fazendo o quê agora eles sejam impressos em linhas diferentes cara tá muito interessante aí eu te conhecer esses caras tá outra técnica que poderá utilizar também por exemplo Vamos ver que eu tenho mais o link aqui mas eu não quero decidir mais diz e esse aqui é o Google tá o irmão

até que elas não estão utilizada eu já serve para resolver esse problema também e eu vou usar aqui eu vou até BR galera que é uma tag também é selfie closen ou seja não tem conteúdo nem atributo e ela vai fazer com que a linha seja aprovado simples assim tá mas como falei pra vocês geralmente é feito com CSS hotéis de bloco A gente não vai estar colocando aí BR só que coisa mais código antiga né galera e também tem uma outra variação que seja a HR que a linha horizontal horizontal rua né não a

grade horizontal e é ridículo né pra gente ver aqui ó a gente ganha essa Barrinha embaixo a Pode até parecer bem urso galera vai no fim das contas aquela mais atrapalham do que ajudam então geralmente costuma fazer essa linha com bordas e não com HR tá Mas é interessante entender essas quebras de linha também tá estão perto Pode encontrar em algum outro projeto aí que tu for utilizar é que tu for mexer no teu dia-a-dia e também que as listas tá e as listras são divididas em duas categorias as OLX estante inicia aqui com essas

daí ou ele melhora de hora deles está que significa gente coloca vários itens com eles significa list item tão tanto faz a lista a tag tá encadeada está nesta vai ser o ele ainda ter que primeiro passo aí isso e depois aquilo e novamente isso então com seus passos para o usuário seguir se tu vê lá essa lista como ela é a ordem seja você nada a ver primeiro esses um dois três aqui tá E ela é a mesma utilizada geralmente é para isso que a gente tem procedimentos a serem seguidos também é que a

gente vai mais tá utilizando é o 1l One Order list seja lista não contém nada e quem vai colocar itens Tina possui uma hora né Por exemplo ele e tem 1 l e tem dois e tem três quando eu quero citar Rita ideal tá tem que eu vou ter aqui basicamente né uma sequência de itens com Bullet que é o que representa essa lista aqui galera então geralmente ele vai tá utilizando esses caras aqui e até né em alguns casos removendo esses bandidos para fazer algumas operações que a gente pode fazer com listras a navegação

tá e eu queria a revista ver que vocês as imagens não vou copiar o meu link aqui de imagem tá meus urso como é constituída a imagem onde vai criar a tag é o Finn Close eu posso perder fechar ou não né fazendo a mesma tag eu tenho dois atributos src e aut-aut uma legenda para a imagem né um tipo objetivo para ela e essa RC Suécia fonte caminho base para imagem seja arquivo externo ou interno beleza com a gente vai colocar aqui vou colar meu link e depois eu vou colocar aqui em out a

descrição desse cara já tml5 né então a imagem vai tá formado é importante lembrar né que é imagem ela não necessita deste áudio para funcionar mas a gente coloca por convenção porque isso vai fazer com que ela fique aceitável digamos digamos assim aos padrões de código a gente vê hoje em dia outra coisa que a gente tem também é o texto E aí se eu posso colocar um parágrafo por exemplo eu vou tá digitando aqui alguma coisa uma palavra forte aí eu quero grifar esse forte por exemplo né como é que eu falei isso aqui

eu posso envolver esse cara pela tag bebê de voos tá eu fazer com que a gente tenha esse texto aqui apenas em para só embaixo da imagem uma palavra forte bem aqui no cantinho vou até de posicionar essa imagem aqui se a gente conseguir ver lá em cima o código né só vou para forte história pode ser realizado com a tag show tá agora aqui novamente a gente tem peças semânticas né só a palavrinha muito importante para HTML Porque dependendo até aí que a gente usa elas podem ter visualmente o mesmo efeito Mas elas significam

coisas diferentes isso com esse especialista no HTML é importante entender tá por isso que eu falo que não é tão simples parece à primeira vista aí a galera não foca e não sabe de alguns detalhes como está e ainda tem também texto em itálico em Itálico no HTML é entendido como dá ênfase é quase bom aí o grifar deixar em no texto mas tem o significado levemente diferente de 15 a fazer o meio da tag estão vou daqui ó parágrafo e com abre a tag fashion em fazer eu posso fazer isso também do mesmo jeito

só que a tag TPM Tá novamente As duas têm significados semânticos diferente os resultados visual vai ser o mesmo a gente nunca vai usar uma tag resultado visual as exceções tem algumas exceções Claro por exemplo a tag b e a tag que elas não adianta semântica assim tá agora strong e me adiciona semântica nosso corpo tem que ter cuidado com a gente usa nesse momento você vai acabar mais confundindo a gente do que ajudando a gente entendeu HTML Mas a nossa em algum lugar estudar sobre HTML semântico que é super importante também agora essas tags

aqui são os mais corriqueiras assisto mais vai ver aí é em projetos que tu vai utilizar tem algumas outras tags tem os formulários que eu quero fazer um vídeo preparado também para gente ficar ele tá mas tô entendendo como adquirir eu estou entendendo como elas que as representam né tu vai já consegui decifrar outros HTML né analisando outros códigos conseguindo assim entender o que que é uma tag e o que ela representa a ideia entender a essência depois a gente vai se especializando e vai procurando mais para entender sobre outros assuntos que estão aí em

volta do que o HTML agora agora para fechar bora fazer um mini projetinho pra gente juntar todos os conceitos e fazer algo aí eu vi realmente bonito tá eu vou adicionar um pouquinho de CSS que é o que eu pretendo fazer um vídeo futuramente mas aqui a gente vai conseguir fazer as ligações necessárias eu achar mais arquivo de índice para HTML que geralmente Como é que chama o arquivo principal do nosso projeto tá bem Vai começar comente aviões exclamação até adquirir tudo que é necessário Eu vou daqui ó mini projeto que é o título desse

cara aqui quem vai fazer aqui primeiro vou criar uma barra de navegação ainda faz assistir os dela e como é que a gente faz a barra de navegação na Idade Média a gente primeiramente crie uma tag chamada Neve essa terra aqui ela é um pouco nova tá nem tanto assim mas a gente não costumo ver um site muito antigos ela representa é isso que estão vendo aqui para/navegação e não necessariamente precisa o topo pode ser qualquer barra de navegação no site todo plantado no rodapé que vai dar certo entregar ela tá aí aqui dentro vou

criar uma barra de navegação para Mesquita que voltar malwele que chama a gente faz assim como a lista não-ordenada uma Ele está aqui um botar meus links eu vou botar Aliexpress aqui precisa Resgate lá para nada então a gente botar essa hashtag aqui depois a gente preencher com leite certo ou está aqui home os produtos e compacta 3 mics e geralmente o que que vai na barra de navegação também vai o nome do projeto né eu vou criar aqui um H2 com o nome dele mini projeto tu vamos buscar o navegador ver como é que

tá ficando Vou botar aqui ó nosso endereço para HTML Beleza a gente aqui ó num bar navegação mais ou menos o nome dele aqui tá E vamos continuar a ficar aqui vou criar uma sessão aqui agora que será Ah um samba site vai te falo muito simples mesmo que determinou a sessão a gente poder acabar digitar então isso aqui não adiciona é nem efeito se mais com o site tô indo queima que é uma divisão mas esse é um site que ela tem um propósito geralmente de coloca tem sexo agora também ela tem 65 mas

tem que semântica tem que botar um Olá seja bem-vindo ao mini por pa deixar o título ele vai ter um parágrafo aqui é esse projeto o intuito de ensinar HTML5 para quem não sabe nada de html tá tudo é justamente a seguinte pega essas tags em que coloca no título ou subtítulo um pouco menor título H1 substituto pe a gente dá uma olhada lá já tá tudo misturado aqui é isso aí perto E aí aqui vai colocar uma imagem em colocar mais de uma cidade só para ter uma imagem representando o nosso projeto aqui tá

eu vou buscar sem mais cidade botar aqui ó cidade à noite eu gostava de noite eu vamos pegar uma imagem legal aqui galera eu gostei essa aqui ó aqui na interessante eu vou copiar o endereço da imagem a gente vai colocar aqui no ssc áudio tá tô bem grande mas tem problema eu vou estar sua cidade à noite beleza e volte e ficou assim tá vou botar mais tu quiser aí a gente vai conversar enfrentar problemas talvez né Eu não quero essa imagem aqui no cantinho cara tudo Centralizado é a minha/navegação está correta e começa

a CSS necessário né Porque só isso aqui não tem graça nenhuma nenhuma que entra no teu site tá e eu vou botar aqui agora um rodapé a pipoca até escuta essa galera que ela indica justamente isso o rodapé no site botar aqui ó no parágrafo como é é Matheus batistussi é tu bota o teu nome aí e vou botar um símbolo especial tchau tem comercial cop e; 2021 Isso aqui vai imprimir o símbolo de copyright no HTML tá ele é basicamente um código um atalho para imprimir esse cara você dorme cinco aqui tá tudo aqui

beleza essa é a nossa página agora vamos dar uma cara legal para ela nós vamos mudar tudo com CSS a gente não sabe se é certo aí não aprendeu ainda então eu vou te ensinar o básico do básico só pra gente conseguir terminar esse projeto aqui e sair feliz aqui beleza Tô comendo você tem que fazer a gente poderia trabalhar sucesso aqui no HTML também mas eu não gosto e eu não vou te ensinar de ser maneira porque eu acho que a maneira correta tá tudo criar um novo aquilo aqui que eu te falar hoje

tá eu estou sucesso tá vocês vem que eles e tem uma extenção diferente do que a gente criou né Ele é o CSS em Londrina stakes beleza não independente mas essa intenção é que nunca trabalhou Exatamente isso ele é um arquivo de folha E aí o HTML você entender quem quer colocar excesso nele como é que ele vai fazer é uma meta tem chamada link tá aqui no link ainda colocar esse atributo chamado real igual stylesheet para informar o navegador que isso aqui é uma folha de tios aqui na Garrett exatamente como os links ou

consertar imagem eu tenho que apontar esse cara que o meu arquivo está nas pontas S como é que posso fazer eu digito o nome dele porque tá na mesma pasta do arquivo Então vai dar tudo certo beleza agora se não tiver aqui no projeto em especial os elementos eu consigo ver aqui ó no Red que eu tenho minha folha de estilos em cada então deu certo tá eu percebe aqui agora lava Neto é bem ao aqui tá tudo certo tá se vocês colocaram nome errado pode ser que ele deu um erro 404 não encontrar então

é importante que de tudo bonitinho aqui alfinete 200 né então nem um erro entrada vermelha aqui quem vai fazer aqui agora então a gente vai criar o nosso sucesso não assistiu Então vamos agora aqui o resultado mais impactante talvez nunca tenham visto CSS na vida tá eu começo eu vou fazer eu vou utilizar a tag Bori Então como a matéria eu vou colocar o nome dela aqui diretamente tá o que eu vou fazer eu vou dizer que a font-family seja a fonte de todo o baile vai ser helvética em HTML Eu tenho algumas Fontes disponíveis

são carregados para mim aí o médico é uma delas quando a gente faz isso aqui toda a fonte do elemento do HTML todo já muda ela vira essa fonte sem serifa é interessante para projetos web e depois eu vou centralizar todo o texto do baile todo o dar um text-align-center só fazer com que tudo conteúdo seja Centralizado beleza eu deixo aspecto aqui no meu projeto eu vou dizer que a cor dele colo vai ser branca todas as coisas você vai esses vão ver que vai sumir tudo beleza mas o texto é que ainda eu vou

então mudar a minha cor de fundo para um cinza Hibisco 333 está leque isso aqui nem sequer vocês mas se aqui a cor em hexadecimal toda cor eu poderia escrever ela com o Haiti aqui para executar o macho isso aqui me limita um pouco da criação de cores então a gente coloca hexadecimal gente consegue criar porque a gente quer fazer isso aqui ó e vai girando Letícia decimal um RGB diferente para cada uma das coisas então eu tenho infinitas possibilidades tá eu posso criar em RGB ou hexadecimal eu quem mais curte inspirar esse desse mal

então vou fazer aqui aceitar e agora a gente consegue ver as coisas beleza tá ficando melhor né eu vou fazer aqui eu vou agora trabalhar na minha barra de navegação aqui aí vai utilizar uma regra na mesma tag Não mesmo na terra eu tô colocando lá tá E aqui eu vou colocar um estilo que vai mudar como os elementos se comportam é o display Flex isso fazer com que os elementos de barra navegação e títulos ficam um lado tá vai me ajudar a posicionar ele é melhor eu vou botar uma outra regra do site vai

ser justify-content especial que que vai fazer isso aqui ele vai criar o espaçamento entre os elementos e fala até botar o bico in tá de modo que eles fiquem espaçados em forma igual Ok só que em cada canto então vocês vem como é que funciona ainda eu joguei o Tito tá lá e a Barra Velha só pra cá que comumente feita aí ensaio tá eu vou colocar aqui nessa nave também um pede de dez Picos Esse é um espaçamento interno ele serve para tirar o meu site aqui nos cantos tá então eu ganho no espírito

digamos assim pastor aumentar botar 20 vocês viram aqui nosso conteúdo mentor Ele criou também uma barra Desculpa Isso é normal eu vou fazer agora eu vou trabalhar na minha Wellington está dentro da nave para fazer sua nave Wellington eu tô dizendo que eu quero trabalhar com a lista que está dentro da nave estou acessando mestre né um elemento encadeado a minha Lógico é Beleza então trabalho naquela específica aí eu colocar mesma coisa tipo de fax é isso aqui eu falei com que cada um deles fica igual ao outro já estão entendendo que eu tô querendo

fazer para baixo na ligação mesmo tá eu vou colocar também aqui essa Naty uma borda Bora você já bota embaixo e o Pixel tá é a medida que eu tenho aqui para misturar as coisas né que não entendi certo vai ficar um pouco perdido mas é basicamente com sucesso que essa bosta aqui tem 1 cm né então eu tô mudando unidade de medida da web se eu colocar uma outra cor Vou botar aqui um cinza mais claro 666 para já e vocês vem que eu vou criar uma bolinha aqui embaixo e ainda eu vou tirar

todo o meu pede e toda margem meu bairro tá consequentemente hoje eu vou estar deixando os elementos mais padronizados a gente costuma fazer isso tá porque ele vem com mais de pele e a gente não usa Então esse aqui construção R7 tá a beleza agora eu vou lá na minha lista ainda eu vou dizer que Elle Style vestido Alice você nome o que que é esse aqui eu tiro aqueles bugs ó eu cada vez mais a minha barra de navegação se parece com uma barra veja só e outra coisa para fazer aqui é que eu

vou agora usar os meus eles da minha lista então welita não tem uma margem faço hiit de 10 pixels ou seja tô afastando um item outro não se percebe Agora ficou mais ficar desgrudados ó eu consigo sim clicar em cada um deles eu quero você botar 12 pra ficar um pouquinho maior e eu vou em Cadeia mais ainda meu l l i a ou seja o meu link está dentro do meu ele tá dentro do meu Wellington eu tô sendo muito específico nessa que se chama especificidade é o CSS e vai ter uma cola de

branca que é Tudo branco no site não tem que eu deixar aqui meu nick ali daquela corpo né Então olha só agora já ficou mais a cara dele né E aqui ainda cara parece né que esse título ele está desalinhado com a minha H2 ali tudo que eu posso fazer para melhorar esse aqui eu posso dar um aqui no meu l The Lights sempre vou centralizar meus itens da huelen nela aí eles ficam centralizados horizontalmente nenhum mesmo eu acho que corta no mini projeto vai cortar esse Samambaia navegação bom então agora agora poderia também aumentar

meu H1 é só o que tem na página a fonte site de 32 pixels eu vou deixar bem grandão olha só que legal Oi e aí poderia também adicionar uma borda da minha imagem por exemplo uma borda de um pixel Solid vou pegar mas por aqui ó vou até vindo color picker aqui o que eu tenho vs code vou pegar um azul bem clarinho aqui E aí o que botou RGB não tem problema vou botar a borda de três Picos Então é só entendeu detalhezinho nosso projeto também e por último ainda mexer no footer quero

deixar um folder parecido com a minha navbar né Para dar padronização o projeto a gente vai ser aqui no fruta e quer dizer que tem um pede de 20 peixes também ele vai ter uma borda no topo border-top o Pixel Solid e foi 666 gente colocou ele se não me engano e agora olha só eu tenho uma fruta bem parecido com o meu redor aqui só quem tá colado na imagem Isso não é legal então vamos passar em um pouco mais um toque daqui almargem top Bom dia 20 pessoas e agora eu vou ter uma

distância maior entre imagem no rodapé e assim galera você perceber entre um mini projeto web aqui com os nossos conhecimentos de html que a gente aprendeu certo e também com esse pouco de sucesso que eu ensinei pra vocês agora que é fundamental qualquer projeto é que tá esse aqui não com sucesso chegar tem um propósito foi concluído que era ensinar HTML HTML5 para você beleza então galera estamos chegando ao fim ou pedir mais uma vez aí para se inscrever no canal não é inscrito ainda deixa o teu like me ajuda muito compartilhe com os amigos

quer aprender programação quer aprender desenvolvimento web tem muitos vídeos aqui no canal Nesse estilo aqui de cursos mais longos tem curte playlist mais curso com aula aula né Cada um ela uma funcionalidade em Deus custa também que está nos links aqui na descrição da hora lá que vale a pena eu falei antes tem dois curso HTML e CSS e com os dois que vai ter mais 10 projetos e portfólio isso é muito importante caso queira ser um desenvolvedor ué tá pode nos comentários esses curtiu Ovídio qual custo queria ver também aqui no canal próximo eu

li que 7 é seja bem interessante para gente poder criar páginas mais bonitas ainda né entender realmente propósito dele entender melhor essas regras e que a gente criou Tá mas deixa a sugestão que eu vou ver vou te responder também por hoje é isso vou ficando por aqui obrigado por acompanhar e até a próxima valeu