O que é HTML e CSS?

fale impressionador sejam muito bem-vindos a mais uma aula de HTML CSS e hoje eu vou te explicar rapidinho o que que são esses dois termos e te mostrar alguns exemplos também e eu deixo todos aqueles pedidos mais pro meio ou pro final do vídeo Então vamos [Música] lá que esse t o de html CSS Na verdade o que são HTML CSS porque são duas linguagens de programação não é uma coisa só Então essas duas linguagens são as linguagens que estão presentes em 100% dos Sites não é 99.9 98 não porque HTML e CSS foram construídas

para a criação de sites então todos os sites que você vê na internet tem HTML CSS você tá vendo esse vídeo no YouTube o YouTube foi construído com HTML CSS e outras coisas mas o HTML CSS tá ali presente também que que o HTML CSS eles fazem eles estão ali presentes em todos os sites Mas eles atuam na parte visual então tudo que você vê no site ele foi construído utilizando HTML e CSS HTML atou numa parte que a gente já vai ver e o CSS em uma outra parte complementar junto com JavaScript Então pegando

HTML CSS e o JavaScript aí a gente compõe aquilo que é chamado de desenvolvimento front end o desenvolvimento frontend nada mais é do que a parte de desenvolvimento web ou seja de criação de site voltada ali pro front end o que que é o front end aquilo que você vê então você entra num site você tá vendo alguma coisa Você tá interagindo com alguma coisa tudo aquilo ali é frontend E aí o HTML o CSS e o JavaScript são as três linguagens principais na criação é dessa parte ali de desenvolvimento front end só que a

gente não tem só essa parte do frontend a gente tem além dele o backend Então se o frontend é o que você tá vendo o backend é o que tá rolando ali por trás das câmeras então é toda a inteligência do site que tá acontecendo para que você consiga interagir as coisas ali no frontend e o banco de dados são todas as informações que estão sendo armazenadas em algum lugar por você tá vendo alguma coisa Ali você vai lá e por exemplo entrei no site da Amazon tô vendo todos ali todos os produtos eu clico

num produto o meu backend vai fazer o quê vai me jogar para ali para um outro lugar vai fazer algumas interações ele vai pensar algumas coisas ou se eu for logar ali no site Quando eu for colocar meu e-mail a minha senha ele vai ter que ir lá buscar no banco de dados o meu e-mail minha senha para ver se tá tudo certinho se tiver certo aí sim ele me joga numa outra página Então esse sempre uma interação entre o que eu tô vendo e o que eu tô interagindo com a inteligência que tá rodando

ali por trás e o banco de dados também que armazena algumas informações e complementando aí no exemplo da Amazon eu entro num produto eu tenho que ter o stoque daquele produto e eu vou saber disso como o meu front chend não sabe disso eu tenho isso lá no meu banco de dados E aí eu jogo lá pra frente pro meu frontend juntando todos esses três conhecimentos aqui então o nosso HTML e o CSS que é o foco das aulas que eu trago aqui para vocês juntando com JavaScript a gente tem o front end agora se

você junta com conhecimentos de backend e de banco de dados também a gente tem os chamados desenvolvedores fullstack que são os desenvolvedores que dominam todo o espectro ali do desenvolvimento web então dado todo esse Panorama para você entender um pouco mais sobre o que que é desenvolvimento web onde atua HTML onde atua CSS é onde atua o JavaScript outras linguagens de programação também que onde elas atuam E aí a gente consegue ter esse geralzão daí agora Mais especificamente no HTML o que que é html html é uma sigla que ela significa hypertext markup language Então

ela é uma linguagem de programação focada ali em markup que que seria esse markup seriam aquelas tags que a gente vê muito comummente ali no JavaScript se você nunca programou em JavaScript mesmo assim Provavelmente você já deve ter visto uma dessas tags aqui Abre ali a tag o nome ali da tag e fecha ali tag tudo isso daqui é o que a gente vai ter bastante ali no HTML porque o HTML é todo feito por esses markups aqui que é mais pra frente a gente vai ver como é que a gente vai usando esse tipo

de coisa mas além de ser retratado dessa forma e ter esse nome o que que o HTML faz a gente já viu que ele atua na parte visual mas fazendo o que exatamente o HTML é a linguagem utilizada para construir o esqueleto do site então todas as estruturas que estão ali no site foram criadas com HT DL então para e pensa no corpo humano os ossos todo os ossos bonitinhos colocados no lugar certinho e tudo mais é o nosso HTML que tá atuando ali para criar isso então ele vai montando as coisas por exemplo os

títulos de uma página os parágrafos as imagens os vídeos tudo isso foi colocado ali no site através de html então toda a estrutura do site todos os pequenos elementos blocos tudo que tá ali foi criado utilizando html agora eu fiz analogia com os ossos de um corpo humano só que você vê os ossos de um corpo humano não não é nada estético não é bonito de se ver então falta algo para estilizar é aí que entra o CSS que tem essa parte o que também é uma sigla que significa cascading Style sheets que seriam é

folhas de estilização em Cascata folhas de estilização porque a gente vai em todos os documentos que a gente vai usar o CSS como linguagem de programação a gente vai criando folhas de estilo e por que em Cascata porque em o mesmo site eu posso ter várias folhas de estilo que vão atuando ali em Cascata Uma pegando as formatações de cada uma das folhas que eu vou colocando e dá para ficar criando coisas bem complexas até mas como eu falei é uma linguagem de programação que é utilizada para estilizar o site Então se o HTML foi

lá para pegar o esqueleto o CSS já vem com a parte da musculatura da pele então tudo que traz o nosso a nossa estética o visual tudo que deixa mais bonito Então tudo isso é feito com o CSS então no HTML a gente coloca o parágrafo a gente coloca a imagem a gente coloca o título O vídeo todas essas coisas e o CSS eu vou dizer qual que é a cor do título Qual que é o tamanho qual que é o espaçamento onde ele vai ficar posicionado Quais são as sombras as transições quando eu passo

por cima disso daqui que acontece então repara que elas sempre andam muito juntas por isso que muita gente acha que é uma só coisa o h hml e CSS mas não cada uma atua em uma coisa ali só que as duas são muito interligadas por isso que não se fala de html sem falar em CSS e vice-versa e agora que você sabe um pouco mais sobre essas duas linguagens alguns exemplos como eu falei lá no início todos os sites qualquer site que você pegar tem HTML CSS mas aqui alguns exemplos muito clássicos para vocês pegarem

isso daqui que eu tô falando o Google por exemplo a gente pode vir aqui ó a gente tem o site do Google aqui a gente tem HTML CS ss e outras coisas rodando também mas por exemplo essa imagem esse input essas imagens aqui que são ícones botões tudo isso é HTML agora essa sombra quando eu passo por cima tem essa sombrinha quando eu passo aqui ó ele dá um Realce o cursor daquela forma a cor diferente a cor do botão o posicionamento disso daqui CSS outro site que a gente pode ver de exemplo o YouTube

ah eu comentei do Google a gente tem uma aula aqui na verdade uma série de aulas que é um curso básico de html CSS onde a gente ensina a criar exatamente essa página do Google todas as interações para ele ficar bonitão assim vou pedir pro pessoal colocar aqui no card e também na descrição vai ter um link para você acessar gratuitamente já que a gente já falou do Google agora o YouTube que seria o segundo ali mesma coisa então ó aqui eu tenho o logo aqui eu tenho o input vários botõezinhos vários vídeos tudo isso

é HTML agora esse botão você é arredondado esse daqui tem uma cor esse outra aqui tem um negocinho tudo isso é CSS e outras interações aí a gente teria outras linguagens de programação mas em todos os ses a gente vai ter isso daqui e como a gente tá no YouTube também eu ten uma aula completaça te ensinando a criar essa página daqui ó do YouTube saindo do absoluto zero Diego eu nunca construi nada acabei de descobrir o que é HTML CSS pode entrar nessa aula tanto nessa quanto na série de aulas do curso de e

HTML CSS que eu tava ensinando a criar o Google você vai aprender do zer criar essas duas páginas Então vou pedir também pessoal colocar aqui no card e na descrição também o link dessa aula para vocês verem outras opções que a gente tem aqui a Amazon que é um site de produtos que eu até usei como exemplo aqui você entra lá ó tudo que tem aqui você também consegue entender o que que é HTML o que que é CSS então por exemplo é esse fundo aqui cinza esse fundo aqui dessa cor tudo isso é CSS

o tamanho dessa fonte essa daqui é essa daqui não é então muita coisa aqui a gente consegue consegue ver o que que é hml o que que é CSS outras páginas por exemplo páginas da hashtag site da hashtag #treinamentos pcom T vem para cá ó tem muito HTML CSS e outras coisas aqui também e aí quanto mais você vai pegando isso daí você vai falando Ah beleza então Ó o botão é HTML isso aqui é HTML o parágrafo HTML só que esse estar maior do que esse é CSS ele estarem posicionados dessa forma CSS esse

vídeo tá Centralizado aqui ó tá vendo que ele tá centr iado pela altura CSS esse espaço aqui no meio CSS quando eu passo por cima CSS E por aí vai quando eu venho aqui também uma Landing page da # treinamentos que vocês Muito provavelmente já devem ter visto pro intensivão de Python pro intensivão de po bi pra jornada do Excel a semana do Excel e vários eventos que a gente faz também são páginas com muito HTML CSS e todas as páginas que a gente tem são usadas criando eh São criadas usando HTML e CSS você

tiver vendo esse vídeo até o dia 4 de março Aproveita e já se inscreve lá vou pedir também pro pessoal deixar o link aqui embaixo que aí vocês TM o link também Mas a gente sempre tá fazendo esses eventos para vocês e daqui a pouco provavelmente vai ter um de html CSS para vocês também então aqui foi mais para mostrar alguns exemplos e também para deixar alguns mini cursos como é esse curso básico de e mostrando como a gente cria a página do Google e uma aula completaça realmente tem muito completa tem 4 horas essa

aula mostrando como a gente faz 200 zero para criar essa página aqui do YouTube e também as explicações que a gente deu aqui do que que é HTML CSS Espero que você tenha gostado se você gostou faz aquele favorzão like no vídeo se inscreve no canal porque é muito importante e clica no Sininho e eu te vejo numa próxima aula m