Programação Web #01 - Primeiros passos no desenvolvimento de sites e sistemas web

o Opa tudo bem por aí é ver aqui falando e hoje vamos começar a falar de um assunto aqui no canal que é muito pedido aí né pro pessoal que me acompanha aqui é a parte de programação web esse conhecimento de programação web aí acaba abrindo um leque de grantesco de opções aí para gente quer programador né porque primeiro é gratuito para se desenvolver é multiplataforma nativamente multiplataforma idealmente é muito barato aí dente hospedar essas nossas páginas aí na web antes de mais nada se você ainda não inscrito no canal já se inscreve e todos

os links aqui de todos os assuntos que eu for falar que durante essa aula eu vou deixar aqui embaixo para você na descrição ficaram Já de início deixe o seu like aqui para você não esquecer então vamos lá vamos seguir sempre que te falo de programação web é importante de começar lá assim só cê já tenho que tava esse vídeo aqui fiquei muito básico para você mas muita gente não conhece a gente nunca fez nada aí de programação web não comprou uma página já conhece os conceitos de de html as tags etc então sim aos

poucos a gente vai aprofundando né com o passar dos vídeos aqui então vou pedir para você que já fez alguma coisa de webb aí que você possa aqui aí um pouco de paciência nem pensar naqueles que nunca fizeram nada nesse dia então é muito importante a gente iniciar ali os movimentos ali dos nossos sistemas web a gente precisa entender ali alguns conceitos básicos e as que ele vai começar então aqui nesse vídeo e assim o outro é muito comum que muita gente pode ter aí é a diferença entre site ou sistema web site é um

conjunto de páginas web ali armazenados lá em algum servidor E essas páginas podem ou não acessar informações ali em uma quantidade e não vejo qualquer pessoa pode acessar Esse site é só ele que ele o endereço dessa página abriu o seu navegador ali colocar o endereço aí na barrinha e dá uma entra ali ele já vai conseguir acessar aí Esse site é muito comum aí de site são as e funcionais aí das empresas né hoje tem ali os vários serviços que ela oferece tá de contato telefone whatsapp enfim como se fosse o cartão de visitas

ali da empresa né então é um site ali pode estar sendo os dados de algum banco de dados ou não mas você simplesmente para acessar e você digita o endereço lá na URL do navegador você consegue abrir ali e abrir aquele site né acessar o controle daquele site sem muita dificuldade já falamos de um sistema web seja sempre foi pensar e estruturalmente falando é a mesma coisa que eu sai só por trás ali você tem uma página Web que tá rodando a rodar né e normalmente essas páginas leve aí ficam hospedados também o escritor e

normalmente cara sincero web e seu site aí nessas paragens vão você sabe o banco de dados A grande diferença entre um site no sistema web é que novamente né para você acessar a web a gente precisa ser autenticar aí com um login e uma senha né e se você poder visualizar e o controle daquelas páginas mas estruturalmente falamos tanto no site continuar paixão no sistema web gente vai ter uma página Alice nos pedais em algum servidor essa página Web vai prover conteúdo para gente e essas páginas podem olhar vocês ao banco de dados aí no

caso o seu a web ela geralmente acesso retirados EA gente sempre tem que ser criticar para rir um login e uma senha aliança de exibir os conselhos dela e claro você consegue interagir com essa página né você consegue cadastrar dados né que ela está pedindo se cadastrar clientes fazer consulta se faz o que fazer filtro de dados é então ela tem alguns recursos esses ali e um site normalmente não tem mas estruturalmente falando a ambos em ali a a mesma estrutura muda realmente um pouquinho desse conceito aí né mas a forma de fazer um exatamente

a mesma forma de se fazer o outro para mim e para te falar na construção dessas páginas web aí não tem como conversar diferente fala sobre HTML JavaScript ali uma linguagem de marcação de hipertexto né que o básico ali para você fazer construção de baixo e aí tipo através ali das tags HTML Sé reconstruindo aí o layout dessas páginas de vai passar um pouquinho aí vai entender um pouquinho mais sobre as tags HTML é o vamos fazer aqui alguns exemplos e depois disso depois que você tem ali o teu código entre aspas HTML aí entra

depois os navegadores ali neuroses e com o objetivo de interpretar esses arquivos aí essas páginas HTML pode ter também além do HTML você pode ter-lhe CSS junto e aonde você vai dar um pouco mais de estilo para essas páginas né para trabalharem com cores o tamanho do objeto sem fim e também você pode acrescentar ali o Java script né E aí importante você não confundir já diz que ficou Java né São coisas completamente diferentes e com esse trenzinho não mente né com HTML CSS java script os graus ele consegue a interpretar exibir né Website aí

ou sistema web para você eu vou compartilhar minha tela que você que agora então para gente cair mão na massa ali pra gente conversar dá uma olhada algumas coisinhas de html para entender como que é o HTML funcione tudo mais a vovó compartilha na questão que minha tela mais para frente a gente vai pegar entrar no editor de código pouco mais avançado né então cheguei aqui eu abrir o meu bloco de notas só para te entender as coisas básicas Mas fique tranquilo que mostra frente a gente vai entrar no editor um pouco mais profissional né

pra gente poder fazer aí nossas páginas passo layout etc enquanto eu vou direto aqui no nosso bloquinho de nossas mesmo então bloco de notas e uma vereadora aqui do lado e aqui vocês o seguinte vai escrever um texto qualquer Então coloca aqui por exemplo cadastro de clientes por exemplo e eu escrevi esse texto aqui vou salvar esse arquivo aqui ó salvar como aqui vou colocar ele todos os arquivos Vou Chamar esse cara aqui de index.hr melhor tomar que vinho chamado index.hu ml nem vou vir aqui navegador agora e você pode usar o navegador que você

quiser aí eu vou dar um arquivo abrir aqui e você Nacional meu arquivo HTML lá e com isso ele abriu aqui pra gente olha só estamos aqui cada cliente vou colocar aqui botar dois entes Vou colocar aqui 99 colders mais dois enters Vou colocar aqui hello world por exemplo só seu vai perceber o seguinte eu vim aqui eu vou dar um salvar vem aqui no navegador vou dar um F5 força aconteceu e aqui no arquivo de texto aqui Que Nós criamos Apesar de eu te dar dois centros aqui que ele tem que ir para a

quebra de linha etc a hora que te pede para o navegador interpretar isso aqui né a brisa aqui no HTML olha só que acontece isso que tá acontecendo porque isso que a gente tá fazendo lado de cá não é HTML gente não tá usando as tags aqui que HTML de formatação etc então navegador não está entendendo isso então aqui basicamente a gente tem que envolver né isso nosso texto aqui com as tags aí HTML a gente poder processar de acordo com quem quer então por exemplo um documento HTML novamente começa aqui em cima a gente

abrindo a tag aqui de html ó Isso aqui é uma tag HTML a gente abre aqui com o sinal de menor coloca aqui dentro a tag e fecha aqui na frente algumas tags a gente tem que abrir e fechar a tag HTML a gente tem que abrir ela aqui no começo e no final do documento aqui a gente tem que fechar ela e para fechar eu coloco barra e aí o meu o código Zinho aqui né então se eu comecei a com HTML eu fui achando aqui embaixo com barra HTML Então já tô dizendo para

o navegador que tudo tinha aqui dentro é um documento HTML isso só não basta se eu salvar vir aqui dá umas cinco não mudou nada precisa acrescentar mais algumas tags aqui de formatação Mas vamos só continuar olhando aqui a estrutura básica aí de um HTML antes de mais nada aqui no patrãozinho do HTML 5 aqui precisa colocar uma tag aqui em cima aqui é o seguinte eu coloco exclamação e coloca aqui ó doc time passo HTML nesse padrãozinho aqui quando o navegador abrir seu arquivo aqui a gente tô dizendo para ele olha esse aqui você

tá abrindo é um aquilo que pobres ml em alguns sites a gente vai ver algumas coisas da frente aqui gente setra mais momento vamos vamos focar aqui então coloca o doctype HTML e coloco Abra minha tag HTML aqui e fecha a minha pega tratamento de Baixo tudo Essa é a minha página HTML aí isso independente São site se é um sistema web Enfim tudo vai começar dessa forma aqui legal ainda assim seu Salvar esse cara e vier aqui dá umas cinco nada mudou legal continuar só explorando aqui pouco mais aí o nosso HTML aqui depois

dentro da página HTML a gente tem aqui uma tag que a tag head a tag de cabeçalho então abro a tag head precisou fechar aqui a minha tag head esse aqui é o cabeçalho da minha página assim como tem gente tem o cabeçalho a gente vai ter o corpo da página que é a tag Baião então eu abri o Bari como esse meu texto aqui eu quero que fique no corpo da página é o conteúdo ainda minha página eu vou fechar o meu barbárie aqui embaixo Ok eu vou só dar uns tabefes isso não faz

diferença nenhuma só para facilitar a gente vê aqui na pessoalmente né e tal só daqui uns paciência para ficar melhor para gente ver há mais ou menos assim tô Seria algo do tipo estou aqui então só para ti visualizar um pouquinho melhor era aqui aqui então eu abrir vai terminar aqui em cima ou aqui embaixo abrir uma rede fechei ele aqui abrir meu Bari tem todo controle da minha página aqui e fechei meu barbárie aí o que que a gente tem aqui dentro do Red Bull Red normalmente está aqui entre outras coisas ou título da

página Então abre uma tag Tiger on ó e vou fechar aqui a nossa tag tá isso aqui pouco não faz diferença se eu deixo tudo na mesma linha seu faço a quebra de linha aqui isso aqui não tem diferença nenhuma é mais fiz aumente aqui pra gente fazer entendeu E aí só formatar o texto um pouquinho menor aqui e para poder caber mais informação aqui tudo o título a minha página que vou colocar por exemplo 99 com Deus olha só se eu salvar aqui nessa hora ideia aqui umas cinco navegador a gente vai ver que

bom terça eu não mudou nada mas como eu já comecei a trabalhar aqui com Réver olha aqui em cima na aba do navegador já conseguiu colocar o título da minha página 99 coisas que é o que está contido aqui nessa minha ideia legal só como foi agora então para começar a formatação desse notícia Vamos ver que eu quero que o cadastro cliente seja o título aí a minha página Então existe uma tag HTML que é o h-1h é derreter então eu vou abrir a minha tag algum aqui e no final aqui do meu cadastro eu

vou fechar a minha pega um aqui e a tag header uma olha só eu salvar aqui agora dinheiro navegador deu assim vai perceber que o que tá entre a minha tag header uma aqui o navegador já interpretou como um o jogador destaque já aumentou o tamanho da fonte é isso para o padrão Aí eu posso envolver por exemplo aqui ou 90 licor de cinema header 2 O que é uma reta que tem um pouco menos de destaque e o hello world aqui numa rede três por exemplo H3 vou fechar aqui o Barra H três aqui

na frente eu salvar esse cara e daqui mais cinco olha só o papo ficou faltando fechar h2ac salvar e de atualizar recebeu pouca diferença entre os dois aqui vou colocar aqui um H4 Hello diálogo salvar como a gente percebe mais diferença Olha só deu para perceber mais tô a tag header ela vai diminuindo de importância aqui né até os seis estão vai jogar um até h-6 e ele vai diminuir de importância aqui então a regra principal começa num e vai até o h60i através dessas tags aqui que a gente vai formatando aí o nosso texto

RG dezenas e dezenas de tag Diferentes né e forma diferente é isso aqui é só o começo né se você não está familiarizado com isso aqui fica tranquilo aí com bastante tempo aqui vai ficar tranquilo vai ficar fácil para você e é claro é mais fácil pesquisar né tags HTML aí você tem vários sites aqui tem listas e listas dessas tags né e as funcionalidades de cada uma certa vamos entrando aqui devagarzinho cada uma delas aqui só pra gente for analisar esses caras aqui e a gente vai ver que algumas tags tem esse formato aqui

de gente abre a tag coloca que alguns algum conteúdo com esse dentro dela e fecha até que no final mas tem algumas tags que não precisa dessa estrutura por exemplo vou colocar aqui ó abrir se acha aqui a tag BR tag BR é uma tag de quebra de linha né Só se eu salvar aqui agora olha só já que mais cinco hora que aconteceu Ele fez o cadastro de quebrou nossa linha e continuou o cliente aqui embaixo e esse aqui já é um tipo de tag que a gente não tem uma tag de abertura e

uma outra tag de fechamento até uma tag única então algumas teclas tem esse conceito aqui e outras é simplesmente uma tese em algum outro exemplo de tag que ela não tem esse fechamento é a tag HR por exemplo aqui é uma horizontal ou que a balinha é uma matéria que desenha uma linha horizontal na tela vamos salvar e atualizar aqui ó a tag também funciona da mesma forma com br o HR também ela é uma tag que não precisa de fechamento né ela própria já se inicia e já se se fecha automaticamente aqui e aí

já é hora de ti acrescentar um novo conhecimento o que que é o seguinte gente abriu a nossa tag aqui tem um elemento da nossa tag em que fechou aqui a nossa tem legal em alguns casos a gente tem aqui mas eu complemento aqui e são os atributos dessa nossa tag São José em HTML aqui a por exemplo a tag HR ela aceita aqui mas tributo chamado size por exemplo size igual eu posso colocar aqui entre aspas algum valor e vamos colocar por exemplo sai igual a 5 tô dizendo para o para que for processar

essa minha página aqui quando ele for processar essa minha tag aqui ele deve ficar atento e processar também esses atributos aqui ó eu tô dizendo que minha horizontal bro aqui tem agora tamanho cinco seu salvar a ideia F5 Olha que acontece a minha tag aumenta aqui né A minha linha horizontal aumento aqui um pouquinho de tamanho e aí já trazer aqui essa página para vocês têm aqui na W3 escusam aqui tem basicamente tudo o que precisa sobre a documentação de html tá vou deixar a menina em casa aqui embaixo na descrição do vídeo para vocês

olha só que tem a malícia de todas as tags a gente pode utilizar e etc ou no caso ele por exemplo está utilizando a tag HR vamos pegar se você precisar morando vou clicar nela aqui vai trazer aqui todas as documentação dela etc e aqui embaixo vamos ver tem aqui também os navegadores que suportam em filho porque aqui ó nossa listinha aí de de tex outro site bacana que tem também é o Davi Docs deve Docs contrai ou você botar aqui/HTML ó ele traz pra gente a documentação do HTML e sentindo aqui nos elementos Ó

tem aqui também todas as tags ó vou molhar ali a nossa tag Zinha HR por exemplo o que está aqui nela Então tá aqui ó e a gente descer aqui um pouquinho ele mostra aqui ó todos os nossos atributos ali que pode ter aula porque o tributo alinhamento color outside US size next week so well hid olha só aqui também tem uma documentação complementar aí que a gente consegue visualizar é aprender um pouco mais sobre cada uma das tags aí claro que com o passar o tempo o automático é você nem precisa ficar recorrendo aí

a documentação Zinho outra coisa que a porta de lembrar é que assim está fazendo isso manualmente aqui no editor de texto mas parte poder entender como as coisas funcionam mas lá na frente a gente vai usar algumas frameworks aí que vão ajudar a gente por exemplo um Bootstrap da vida qualquer coisa assim eu já traz uma série de coisas prontas já pré-formatadas né porque senão trabalho a gente consegue montar legal que sair Super Interessante mas é importante entender o que cada coisa faz aqui né Se um dia você pessoal da manutenção nos a página precisa

fazer algum ajuste é manual ali quando as coisas não estão do jeito que você imagina você vai ter que abrir o HTML eventualmente tá alguma manutenção ele por isso é importante você entender pelo menos esse básico aí outra coisa que é interessante gente vir aqui olha só é isso aqui ó vou copiar isso aí algum aqui mas é um controle aqui embaixo o seu salvar exatamente como tá aqui e dar uma atualizada aqui no cinco ele colocou os cabeçalhos aqui e aí como é que faz para comentar uma linha aqui dentro do o ou a

gente comentário a gente faz assim se nós menor net abre a tag exclamação--e aqui embaixo e fecha isso com if e fecha a tag abre a tag escovação traço traço o que tem aqui dentro vai ficar como comentário tá sente salvar aqui agora ideia aqui mais cinco vai ver que ele sumiu daqui ó então caso você queira deixar comentários aí no meio do seu código HTML ó exatamente dessa forma aqui ó o que a gente faz aí para deixar os comentários tranquilo só mais um item importante aí falar uma simples o Brasil legal outra Tech

super importante que a gente pode usar aqui no nosso cabeçalho aí Tanto faz ser antes e depois aquele aí que é a tag chamada meta e dentro dessa meta aqui um atributo e sim encaixado name daqui a pouco falar aqui então posso colocar aqui um carros para discription é super chá e aí chata maximiza aqui e aí o conteúdo que eu conto de dessa meta essa você tem que vai ser alguma coisa parecida com você lá página o 99 coldre outra outra meta name que que é super importante utilizar a gente vai fazer isso mais

para frente mas ela também aqui uma chamada keywords por exemplo é super importante aqui no contente dela e coloca as principais palavras-chave Sair do site cancelar pro a Web Apps e aqui etc que essas meta tags que querem dizer só que não aparece visualmente na tela vou dar um salvar aqui ó a gente voltar lá no nosso carregador e daqui 5 horas ela só aparece aqui mas por que que isso aqui é tão importante quanto o Google tava renda a internet e olhando o cada um dos Sites é através dessas tags aqui que ele entendi

qual é a que se refere o teu site quais são aí as keywords é quais são os assuntos que você tá falando de seu site então por exemplo cobrir aqui mano trava vou abrir aqui o site do Google por exemplo vou jogar por exemplo aqui o vamo Abrir o site da Apple por exemplo eu falei chave aqui para o site da Apple tem aqui é para outra assim oficial em baixo iPhone iPad Apple ótima tô sempre Abrir site aqui ó eu abrir site da Apple O que consigo dar um botão direito aqui em cima aí

ver código fonte da página ele vai abrir o código HTML da página para gente será que eu consigo dar um control f e procurar aqui por discription mas se vai deixar aqui pra gente tá aqui ó aquela aquela meta até que nós colocamos então a descrição do site é conhecer o mundo inovador da Apple e compre seu iPhone eu senti volta lá no Google e essa frente e site que abriu a porta aqui ó conheço o novo da Apple e compras iPhone então é através da Lei dessas metas Texas que os já ferramenta de busca

consegue arrancar o teu site nem ali né aquela informação e Através disso que eles trazem aqui para gente é bem importante ainda toma cuidado com essas meta tags aí você está criando essas páginas é etc é um recurso bem bem bacana Aí é que hora que a gente não vai ver aqui todas as tags HTML né o ideal é que a gente vai aprendendo e acompanhando aqui conforme projeto for andando né vai introduzindo mais e mais tags aqui conforme for precisando dela não só nesse momento aqui que ia trazer o editor bacana para trabalhar e

com o nosso HDL com o nosso cssl Street team que é o visual Studio code vs code vamos lá nossa vereadora sobre o Google aqui aqui pesquisa por vs code queres Editora aqui de código que é gratuito né é super poderoso e muito utilizado pela comunidade deve Então vou acessar esse cara esse cara aqui ó visual Studio code então ele tem uma serve Thugs aqui você pode trabalhar com várias linguagens é muito legal para se você já utilizar o outro tipo de Editora aí que você já tá com a spline tem tantos outros aí mas

esse aqui é um cara bacana se você não usou nenhum esse é um cara bacana que eu indicaria para você baixar vou deixar também esse essa URL para você poder baixar aqui o vs code aí aqui na descrição do vídeo e é só você dão download fora ou seja usando Mac eventualmente até no próprio lindo que só você vai conseguir utilizar aí o versículo senhor tem para alguém dos MEC e para minutos também tranquilo não faz download Aí estava sendo super simples é next next next E aí ele vai abrir instalar esse cara aqui para

gente ó toda essa hora que eu vou fazer um vir aqui meu bloco de notas vou fechar o bloco de notas eu vou abrir agora o nosso arquivo em HTML com esse dito aqui ó o Fael o daqui Open folder vou lá na caixinha onde eu salvei o arquivo HTML que nessa baixar fontes aqui ó eu vou dar um selecionar pasta o recurso Ele vai abrir aqui né todos os arquivos que tiver dentro dessa pasta vai trazer a Bixinha aqui e bastante de clicar sobre o arquivo que ele já vai abrir aqui vai trocar a

gente te dar um um pouco maior aqui e aí ó ele já traz né o nosso código ali já com a coloração específico para facilitar aí a nossa visualização astremg coloco de couro então é super bacana esse editor aqui vai ver aí como ele ajuda bastante a gente legal eu só ver aqui mais uma tag HTML que é super importante é muito utilizada aqui a tag para descarregar imagens aqui na nossa página só em baixo aqui no Reload um trazer aqui ó e aqui dentro dos vs code você digitar só o começo da tag ó

a tag MG por exemplo quando eu dou um enter ele já monta para mim aqui ó a as características básicas aí dessa Essa técnica completa ó então a minha tag mês é uma tag onde eu utilizo carregar uma imagem na página aí os atributos tela aqui o primeiro atributo é o sorte é de onde tem que buscar essa imagem isso aqui você pode colocar no caminho x colocar aí na sua máquina ou pesquisar buscar essa imagem de alguma alguma URL da web fininho vamos voltar lá no navegador Vamos jogar aqui no Google alguma coisa por

exemplo aqui vou jogar aqui profile pesquisar aqui nas imagens ó e para teus imagem de perfil tá vou pegar aqui alguma imagem pra gente fazer um teste o Japão esse cara aqui só clicar melhor tem que ser mais vou dar um botão direito nela e aqui tem um copiar o endereço da imagem Estou usando o Firefox nesse caso né volto a dizer sobre como deveriam control vem aqui ó e aí ó ele vai colar dentro ali do meu o meu ser só essa semente URL onde tem aquela imagem é legal esse áudio aqui é como

se fosse um Hit ele é o que ele vai mostrar para você então vou colocar aqui um perfil para dizer que não é obrigatório isso aqui né legal então vou daqui você pode vir falha ou seja né ou contra o s em salvar a gente voltar lá no nosso navegador fechar aqui eu vou dar aqui o F5 nossa página e agora eu já trouxe aqui para a gente a nossa imagem aquela que pode diminuir a leque um pouquinho não estão mais aqui um atributo da nossa tag então se eu colocar aqui o atributo vídeo tchau

tchau em ter você colocar aqui por exemplo Senhor hoje contra o Oeste para salvar volta lá vamos aqui umas cinco ele diminuiu o tamanho delas Imagina eu então carregamos aqui a imagem na nossa tela legal só fazer mais uma alteraçãozinha aqui que é o seguinte ó presente agora vou remover esses caras aqui vou deixar só o h uma ali e a nossa imagem e no H1 eu vou colocar aqui login e vamos começar a simular aí né lembrar um pouquinho de um sistema web e vou envolver aqui todos esses caras em uma tag chamada Center

Tom aa a tag Center joga para cá que ela que tinha fique mais para frente a tag Center e acaba substituindo ela usando outras coisas do lugar de sempre aqui é só para facilitar o nosso atendimento por enquanto ó vou dar um controverso para salvar volta lá vamos dar um F5 eu já começou a modificaria o nosso lentes legal agora quero pintar o fundo da minha página E aí aqui vou pintar o corpo território Então vem aqui embora e aqueles vamos começar estilizar esse cara então vamos começar a trazer esses tratamentos estilo aqui ó Tá

vou dar um Style Dá um enter e aqui eu coloco cobra pedágio aqui que eu quero colocar esse estilo Então vamos colocar no background-color ó então em ter e aqui posso comer uma cor pronta eu vou colocar uma eu já sei aqui ó vou dar uma hashtag que é a corzinha né hexadecimal f777 essa coisinha aqui I don't control SP ele salvar volta lá vamos dar aqui um F5 Oi e agora a página de ganhou essa tonalidade de um pouco cinzinho beleza depois a gente vai entender como jogar esse estilo aqui para um CSS né

para mim não ficar fixo aqui no nosso código né E vai evoluir com isso aí por enquanto não se preocupa com isso então temos aqui o nosso login temos a nossa imagem e um pouquinho para baixo aqui eu vou colocar aqui mas algumas coisas coisa dito aqui o input O que é um carinha que usa para criação de formulários ali ó tá vou dar uma inteira aqui nesse o tipo dos cinco ti vai ser texto mesmo negócio nesse cara aqui tem uma outra outro cara que a gente pode utilizar aqui ó quer placeholder tava aqui

poderia ser o colocar aqui no PC roda o e-mail por exemplo eu vou copiar esse cara colar aqui embaixo e ficar aqui vai ser a nossa senha bom então aqui olha só no Type desse cara eu já traz o corante eu apaguei as duas horas quando eu abri primeira Rastro já traz tudo que é possível importante aqui pó um monte de o que quer que agora é um Pastor John placeholder Vou colocar aqui como senha por exemplo e por último aqui vamos colocar novamente o input só que agora input Button botão e o valor em

texto dele vai ser um vocativo enviar ou fazer login sei lá coisa tipo dual control s para salvar Vou molhar lá como ficou a rodar umas 5 horas a gente tem os ossos elementos aqui todas as bolinhas só para visualizar isso é um pouco melhor vamos fazer uma quebra de linha aqui ó Tá vou colocar um BR aqui de novo a gente vai resolver tudo isso de outras formas é mais para frente mas quem tiver eu tô quebrando a linha depois de cada um dos elementos e depois a imagem aqui eu vou ter que quebrar

mais de uma aliança pra gente viu control S volta lá F5 E já começa a tomar forma né ó a nossa telinha de login olha só é claro que depois quando eu ti e se essa aqui entrar e consegui colocar umas margens maiores aqui né vai modificar um pouquinho mas queria só te mostrar como assim é simples é uma vez que a gente conversa entender como funciona de html as tags HTML etc né como é fácil de começar a criar as nossas interfaces aí outra coisa que poderia fazer com essa imagem que aqui tá pegando

essa imagem diretamente daquela URL né Nós configuramos a gente poderia fazer aqui é o seguinte eu vou dar o botão direito dessa imagem eu vou dar aqui um salvar imagem e dentro da faixinha onde está aqui o meu HTML seu exibe todos os arquivos tá aqui o carinho eu vou salvar essa imagem aqui dentro mas não criar uma subpasta chamada imagens ó só para organizar melhor aí vou salvar aqui dentro dessa postinho hoje esse mesmo por aqui eu vou chamar de perfil tá vai ser o meu perfil ponto.png salvar se eu for lá que a

parte aí ó então tem junto aqui no meu index HTML agora tem uma parte 6 Oi gente tem a nossa que vinha perfil eu volto lá no nosso código invisível deixar tudo isso e fixo aqui o que eu posso fazer vou dizer aqui ó você abrir aqui ele já vai te ajudar até com isso aí vai ler ali tudo que eu tenho nessa pastas lá você vai colocar aí Beijos barra e lá dentro ó perfil tá com isso você deixa de usar vou dar um controle aqui você deixa de usar autoimagem que tava web passa

os autoimagem local aqui ó fechei aqui de morte cinco não vai mudar absolutamente nada mas a gente ganha a vantagem que tá usando uma imagem local aqui não é um recurso local aqui você aquela imagem daquele site lá sai do ar você perde aqui a referência daquela imagem e a imagem vai deixar de ser exibida aqui é uma uma coisa bacana né Nós utilizamos esse projeto é você colocar suas próprias imagens aí você hospedar as suas próprias imagens aí legal só voltar nosso código aqui e aqui embaixo do nosso botão Vamos colocar aqui umas duas

quebra dele E aí Oi e aí vamos trazer aqui uma nova tag é super importante é muito utilizado também que a tag de link né para você como você clica ele abrir outra página é filho e aí é a nossa tag a começa a digitar aqui e eu dou interligar preencher para mim automaticamente Olha só um atributo que super importante na tag de link é a referência dela seja qual é a página ele tem que abrir ali por você clicar aqui nesse lindo nesse caso a gente vai criar uma nova página você pode ser por

exemplo após a chamada esqueci e sem senha. HTML legal tão essa aqui é a página que vai tentar abrir quando explicar esse livro e o texto que vai aparecer como sendo o link é o que coloca aqui ó dentro da tag ó só que a gente pode colocar um texto assim ó ele esqueci a minha senha legal não só vai ficar para ver volta lá como daquilo F5 Olha só vai ficou mexer não tem a página só tentar clicar ele não vai ele eu estava de volta lá no gesto aqui na nossa parte a fonte

ó eu vou clicar aqui nesse ícone Zinho New files vamos ficar ativo no Raio e vou colocar tirando arquivo ó esqueci traço senha ponto HTML Dom Inter e criou o nosso louvor que vinha HTML aqui e aqui como a gente já tá usando um editor para facilitar as coisas para gente olha só se eu começar ou esse cara aqui com uma exclamação e der um enter ele já vai criar para mim aqui o documento HTML evitando que digital monte de coisa você não tiver traz uma uma capa padrão aqui né de marketing HTML pelo título

da página e vou colocar aqui ó esqueci minha senha que pode fazer aqui É bom voltar lá no Whindersson Tudo nessa primeira minha bolsa copiar tudo aquilo que fez aqui no centro volta ela não esqueci minha senha vou colar dentro do pai aqui ó o e aquilo que a gente pode fazer o seguinte vamos copiar até ou a estilização do bode aqui ó hoje eu vim aqui dá um controle esse Bori Oi aqui é vegi de login é uma escrevi aqui lembrete de senha o título da página né E aí não tem nenhuma imagem aqui

vamos ter só um campinho para digitar aqui o texto o e-mail dele mas quebra de linha aqui e vamos colocar aqui o botão para reenviar senha no texto no botão e aí aqui embaixo essa segunda página vai colocar um link para ele voltar lá pro nosso its como pagar vermelho então aqui um voltar Oi para o login aqui ó esse cara antes dele e aparecer aqui a caixinha para digitar o e-mail começou a trazer uma outra terra aqui que a bateria de parágrafo só é onde eu coloco aqui algum texto que eu queira né então

dentro dessa tag the paragraph Vão colocar aqui ó informe seu e-mail abaixo por exemplo eu vou colocar mais uma quebra de linha aqui na frente dele contra o ecce homo' só mais cara vem aqui do login vou dar um controle também vamos lá no navegador para mudar o S5 quando eu clicar aqui agora não esqueci minha senha e automaticamente leva a gente lá para aquela outra página lembrete de senha informe seu e-mail abaixo e setra reenviar senha seu aplicativo voltar para login ele volta lá para nossa página through Então essa essa tag HTML aí dos

dois links é bem importante né e assim então que a gente trabalha com ela então só a prima abrimos aqui a tag ar colocamos aqui o atributo HF dela E fechamos aqui no final a nossa tag de link tudo que vier aqui dentro seja uma imagem feijão texto teto baixo ficar clicável né E sempre que você clicando que tiver aqui dentro ele vai te jogar para essa outra página aqui ei esse link que pode ser uma página é sua ou você pode colocar alguma outra página aqui uma http-response/barra e jogar o cara para algum outro

site quiserem filho em outra coisa que é importante ficar ciente aqui no em HTML todo esse esses campos aqui de login de e-mail de 100 que colocou quando for tirar fazer isso aqui produção né tiver colocando a mão na massa fazendo esse funcionar de verdade todo esses caras aqui na verdade desse do input aqui do e-mail a senha o meu portão aqui ó tudo isso aqui vai ter que ter envolvido em uma tag chamada forma então eu vou abrir o form em cima aí vai ter que os inputs etc e aqui embaixo eu vou fechar

o meu fome por quê que isso é importante porque aqui no meu form eu vou dizer para ele como eu clicar no botão para Qual é a página para onde é que ele tem que enviar essas informações aqui do e-mail e da senha então por exemplo posso colocar aqui vou colocar minha própria página aqui porque eu mexi não vai ter nada programado ainda tô ele vai mandar aqui passa mesmo para sua própria página então um atributo interessante aqui do forma a Edson que é qual é a página que ele tem que se submeter o que

você digitou as caixinhas outra coisa importante que é que é o método que eles vão utilizar para enviar aqui eu conteúdo do dos dados aqui nesse aos formulários segue é tipo hoje vou colocar aqui pra gente vai enviar isso aqui dia post e mais para frente a gente vai ver que tem a utilização dele aqui a gente poderia colocar aqui a classe dele onde japonês utilizar aqui os objetos então mais por enquanto quando deixar isso Oi e aí para assumir o botão aqui esse futebol está aqui automaticamente submeter os dados eu troco esse tipo aqui

em vez de portão aqui ó tem um carinha chamado sumition ele eu continua sendo um botão mas o meu HTML aqui entende que automaticamente quando ele é um botão do tipo submit e eu clico nele ele vai pegar o form onde ele está contido e vai submeter se forme para esse endereço aqui ó é só saber aqui um contra o s voltar para cá o JAC S5 tive que não mudou nada mas quando eu clico que fazer login já vê que ele tenta carregar a mesma página lá e ele carrega de Diogo e flecha acontecendo

aqui ó E aí depois a gente faria um tratamento tá receber as informações que Digitam aqui nesse campinho só é bem importante entender também esse conceito aí de forma né aqui dentro do HTML legal se você foi a primeira parte aqui né então nossa introdução aí a programação web nos próximos vídeos a quente já entra com os conceitos de CSS para que deixar tudo isso aqui mais utilizado mais bonito né E também o traz aqui alguns curso de javascrip a gente poder validar esse campo se você digitou corretamente as informações aqui ou não para poder

submeter essas informações aqui para uma página que vai receber esses lados e processar isso a futuramente acessar um banco de dados 27 tranquilo assim é bem importante a gente trazer que os conceitos né para você que tá começando agora a gente a gente nunca criou nada de programação para web nesses primeiros passos aqui são importantes para você pelo menos entender o que está acontecendo aqui mesmo que lá na frente você vai utilizar algum frio um treco alcançou cidade que ele já vai trazer algumas formatações prontas para gente aqui algumas coisas trompas mas é importante que

você entendeu o que que ele tá fazendo aqui né a gente somente você precisa fazer uma customização ou personalização que você queira e que aquele favor que não tá trazendo para você é importante você entender o que tá acontecendo aqui no HTML e futuramente no CSS e JavaScript também você poder fazer as suas próprias alterações aí tranquilo vocês se fala que os primeiros passos é para te entender como funciona a programação para web eu vou finalizando esse primeiro vídeo por aqui para deixar que baixo para cima na descrição todos os links em que eu utilizei

durante esse vídeo se você ainda não inscrito no canal já se inscreve e não esquece de deixar o like se você gostou desse vídeo aqui e deixa um comentário aqui se você gostou desse vídeo alguma sugestão alguma coisa que você acha que eu deveria abordar aqui durante essa série de programação para web fim deixa aqui embaixo do seu comentário que é bem importante para mim legal forte abraço a gente se vê aí no próximo vídeo