A diferença entre HTML, CSS e JavaScript - @Curso em Vídeo HTML5 e CSS3

Olá Esse vídeo é relativo ao capítulo 3 do seu material em PDF disponível lá no repositório de html [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de desenvolvimento web com a gente vai aprender HTML e CSS nas últimas aulas a gente falou sobre história da informática na história da internet como um todo como funciona a internet como funciona o mecanismo de transmissão de dados entre cliente e servidor nós falamos sobre hospedagem sob domínio e agora esse ativamente nós vamos falar sobre como funciona a HTML e aí CSS parece estranho essa frase do jeito que eu tô falando né bom pra tela eu vou te explicar mais sobre isso e o recado de hoje é trazido para você pela hostnet que traz soluções digitais para o seu negócio e uma dessas soluções digitais que a Rosinete já oferece há muito tempo é a hospedagem de sites e registro de domínios e se você não sabe ainda o que que é hospedagem o que que é domínio vai acompanhar esse curso que se já não saiu está prestes a sair um vídeo que explica a diferença entre eles a Rosinete oferece o registro de domínio você pode comprar em todas as terminações pontocom. com. br.

Net E você também pode escolher domínios com terminações bem recentes como ponto top. Clips. Live ponto Cloud e muitas outras esses registros tem uma taxa anual mais necessita de uma hospedagem paga rosto né mas também oferece hospedagens com servidores Ultra modernos localizados no Brasil esses servidores têm serviços de backup constante personalização do ambiente com o painel de controle exclusivo da hostnet e o melhor de tudo um suporte nota 10 que vai resolver seus problemas na hora que eles acontecerem Esse ato empresa de hospedagem promete que nenhum problema vai acontecer provavelmente lá tá mentindo para você a internet é muito grande problemas podem e vão acontecer mas a equipe da Rosinete vai tá pronta para resolver todos eles assim ó num estalar de dedos então se você está procurando um local para registrar o seu domínio e hospedar o seu site a escolha correta a Rosinete fica com isso na cabeça a nota isso no seu caderno mais cedo ou mais tarde você vai precisar desses você pode tá achando estranho mas a frase é exatamente essa como funcionam a HTML e as CSS é claro que você pode falar o HTML ou CSS Sem problema nenhum se eu só não pode é achar estranho quando uma pessoa falar a HTML e as CSS HTML geralmente é Tecnicamente é representada no feminino porque é a linguagem HTML e CSS é representada é referenciada no feminino plural porque são as folhas de estilo certo então basicamente você tem que a primeira dúvida que as pessoas têm como que eu falo você pode fazer que você quiser o HTML a vou estudar o HTML vou estudar o CSS Sem problema mas só não vai achar estranho quando as pessoas fazem a HTML e as CSS outra dúvida que muita gente tem e que eu já vou acabar com ela aqui o que a gente que diz o seguinte fala essa frase aí ó eu programo em HTML e CSS bem Olha só você não pode Tecnicamente dizer que você programa em HTML e em CSS essas duas tecnologias não são efetivamente linguagens de programação Java script é linguagem de programação PHP a linguagem de programação Python a linguagem de programação Ruby kotlin Swift secharp todas essas são linguagens de programação HTML e CSS não são linguagens de programação a própria sigla vai dizer isso mas vamos lá pular Mas então como é que eu falo né se eu não posso falar que o programa é melhor como é que eu digo basicamente você vai dizer que no lugar de programa que você desenvolve em HTML você faz coisas em Eletro médicos você cria sites com HTML você não programa em HTML você não programa em CSS HTML e uma linguagem elas são uma linguagem de programação CSS é uma linguagem elas são é uma linguagem de programação que elas não são linguagens de programação o programa Combinado então fala que você desenvolve fala que você cria site em HTML criar sites com HTML com CSS vamos ver as siglas é pra você poder entender a coisa do feminino tem coisa de que elas não são linguagens de programação a sigla HTML significa hypertext markup language Acho que já até falei algumas aulas anteriores raetex hipertexto é aquilo que eu falei lá na aula de história e pertence a quando você tem um texto e uma área que você pode clicar e ele vai para outro texto tá mas também pode ser aplicada imagens enfim me perguntei isso aí se você clica numa área e é desviada para outra markup é de marcas a linguagem HTML ela é fundamentada em marcas Ela não é uma linguagem que tem estruturas que a linguagem de programação tem variável condição repetição vetores na objeto acesso a banco de dados HTML não tem nada disso por isso ela não é uma linguagem de programação é uma linguagem de marcação a própria sigla significa que ela é HTML a imagem de marcação para hipertexto pronto ou linguagem de marcação hipertexto ele não é uma linguagem de programação é uma linguagem de marcação CSS CSS são as cake Style x x y folhas né folhas de estilo em Cascata o que folhas de estilo em Cascata porque uma vai modificando a característica padrão da outra da polícia em Cascata depois você vai entender um pouquinho melhor os seletores Eles vão mudando eles tem umas características que já são herdadas mas ele vai em Cascata acrescentando novas características então HTML linguagem de marcação hipertexto CSS folhas de estilo em Cascata então a HTML e a linguagem de marcação hipertexto as CSS as folhas de estilo em Cascata basicamente essas duas tecnologias tá Guanabara aí para que elas servem onde eu vejo as coisas funcionando Vou te dar uma prática muito legal a partir agora acessar o site que você quiser eu vocês aqui um grupo e não foi processo todo dia tá fazendo propaganda de ninguém voltei Globo Esporte que geralmente em sala de aula quando fala acessa um site festa todo dia a galera vai logo o Globo Esporte basicamente HTML ela é esse cara eu preciso muito desse anote isso que eu vou falar agora tá bota no seu caderno a linguagem HTML era uma linguagem focada em conteúdo Então você tá vendo aí na tela ó qual duelo entre São Paulo e Palmeiras você quer ver no SporTV essa essa quinta-feira estão conteúdo eu parado aqui embaixo jogos de volta para essa mensagem esse conteúdo aquela fotinha que tava SporTV como interrogação esse conteúdo então HTML ela é focada em conteúdo conteúdo pode ser texto pode ser imagem pode ser vídeo pode ser tabela enfim o que for tá Belinha né de time sei lá quem tá ganhando quem tem primeiro listas tudo isso é HTML tudo que foi focado em conteúdo é HTML você tá num site lendo uma matéria essa matéria é feita em HTML só que adianta botar um o período se o site tá feio a gente as pessoas vão mente não visitam sites que não tem atrativos visuais aí os atrativos visuais são CSS são Dados pela CSS CSS é foco em design então tudo que você tá vendo aí cozinha a posição da imagem o tamanho da imagem um texto escrito por cima da imagem tudo isso que você tá vendo aí na tela foi dado foi promovido foi proporcionado pela linguagem CSS né pela tecnologia CSS cores sombras tamanhos posicionamento tudo isso é feito em CSS Beleza então essas duas horas sempre que eu vou montar um site eu tenho que ter um conteúdo não adianta ter um site bonito não tem conteúdo ela já deu um conteúdo se ele não tá bonitinho você não tá visualmente bem distribuída na tela existe uma terceira tecnologia que é feita no curso separado mas que a gente sempre recomendo que você faça esse princípio antes e depois parta para esse outro curso que a linguagem JavaScript Tá mas me mostra onde se encaixa o diabo split não tem mais nada para se encaixar é o conteúdo já tá aqui o design já tá aqui já disse que tu tinha onde vai no site do Globo Esporte pega o mouse e Mexe em cima desses três linhas ali que a gente chama de mim não hamburguinho automaticamente vai aparecer um menu que vai poder escolher os esportes para poder escolher as notícias e tudo mais isso tudo é interatividade E aí entra uma outra linguagem essa assim linguagem de programação que trabalha as interações o Java script que representa como JS então basicamente essa trinca é a que vai fazer você desenvolver site adianta só aprender HTML Não adianta só para mim ver se é se não adianta Só aprender JavaScript você tem que aprender as três em conjunto para você poder construir bons sites java script eu posso criar aquela menus interativos e animações opacos é aquele quando você passa o mouse ele já abre um negócio você tá indo embora agora né a clica aqui assim nossas notícias tudo é javscript validações o site digite um nome de usuário de Nós Você não é inválido Isso tudo foi feito Provavelmente por já descritas também deu para entender então esse meio ambiente esse esse conjunto de três linguagens Eles são muito importante esse conjunto E é primordial para você aprender a construção de site e eu vou te dar uma dica bem legal eu sei que no próximo vídeo é que a gente vai fazer instalações e tudo mais mas eu vou te mostrar o seguinte se você não tem o Google Chrome você não sabe usar sem problema assistir o próximo vídeo depois que volta aqui as últimas tão uma coisa bem legal é um plugin Zinho que a gente utiliza que eu vou te mostrar a diferença entre HTML CSS java script uma maneira bem simples vem comigo então eu tô aqui no ambiente do Windows e vou abrir meu navegador vou abrir aquilo o Google Chrome tem que ser o Google Chrome tá aqui no Google Chrome você vai colocar assim ó Chrome Web Store tá você vai instalar extensões do Chrome Tá certo para Chrome Web Store The Winter e ele vai você vai abrir esse aqui ó Chrome Web Store Chrome do google.

com do Chrome Web Store você vai digitar aqui ó pesquisa na loja você vai digitar web developer web developer aqui ó web developer tá vai clicar aqui é uma engrenagem Zinha Exatamente Essa extenção aqui você vai clicar em usar no Chrome ele vai perguntar né Se realmente você vai querer adicionar extensão ou não pode adicionar e automaticamente quando você adicionar vai aparecer uma engrenagem zinha aqui do lado da sua barra de endereço certo vai aparecer aqui e aí você vai acessar qualquer site rouba você só Globo Esporte de novo dá uma olhadinha só então tá lá tô no site do Globo Esporte lembra que eu falei ó o meu conteúdo tá aqui ó no conteúdo tá aqui será golaço de falta contra efeitos do câmbio Flamengo laréu que tem prosseguir aqui ó esse prosseguir que apareceu aqui embaixo já vi escrito está aqui em cima eu tenho o menu quando eu passo Mouse eu tenho interatividade então javscript toda essa coisa de estar em duas colunas com CSS e nós estamos só com Ah tá vamos fazer o seguinte era só vamo primeiro entender a diferença do Java scripts vamos tirar o Java script essa página para você tirar o diabo esquecer essa página é só você clica nessa engrenagem Zinha Que Acabou de aparecer da extensão que você colocou que a web developer cliquei nela você vai vir aqui ó na primeira aba dizei vou dizer ou JavaScript cliquei ele já desabilitou já me escrevi isso é ele não vai mais rodar nesse site com já descrito Então deixa eu atualizar o seu site na hora que eu atualizo ó ele vai perder todas as interatividades Olha só já perdeu aquele coisa lá de cima já não tem menos a perder o meu é isso todo tirar JavaScript já era menos eu consigo ler as notícias ó até aqui embaixo ficou zuado E aí você consegue entender tu já disse que ele te deu várias funcionalidades Quer ver Vou ligar lá de novo habilitar o Java script e já digitei vem aqui e atualiza ó vai voltar tudo voltou as propagandas voltou aqui ó a o top né o destaque que era hoje é passou Mouse em cima do menu já abre o menu de novo então assim é bom para você essa extenção para você saber que que nesse site é feito em Java inscritos você consegue desabilitar e ver quais foram as funcionalidades que você perdeu e outra coisa que você consegue desabilitar cara olha isso clica aqui você vai vir em CSS que ela tem aqui ó CSS que você pode desabilitar todos os estilos ó vou clicar em desabilitar todos os estilos o que vai acontecer automaticamente desabilitei os estilos vou colar aqui ó olha isso olha esse site sem estilo Olha isso você visitaria o Globo Esporte se ele fosse assim ó isso as notícias estou aqui ó tá lá dá uma olhada na zona que ficou aqui a gente assim tá aqui você visitar esse site sem estilo sem estilo nenhum ó tá desliguei desliguei sucesso tem todas a gente só que vai ter que fazer procurar tá E tá me dando uma agonia Deixa eu voltar para voltar sempre se clicou aqui CSS e ficou ele volta com estilo Sem problema nenhum mas não sei se essa nem atualizar quando javscript eu preciso atualizar sim e aqui para finalizar essa coisa teste por exemplo o YouTube Eu já fiz isso também no curso de JavaScript do curso em vídeo aqui ó se você acessa o YouTube você tem acesso aos vídeos e tudo mais todas as informações se você clica aqui e desabilitar o Java script carioca Vamos tentar desabilitar o estilo e já virou uma zona Mas tá tudo ali se eu não me engano os vídeos vão tá aqui em algum lugar escrito aqui gigantes mas tão você consegue eu conseguiria ver um vídeo deixou habilitar o acesso de novo pelo amor de Jesus Cristo voltou agora se eu desabilitar o Java script cara YouTube ele é Totalmente Dependente do Jet preto é isso atualizei não dá não dá pra clicar não tem acesso cara então assim a parte de interatividade você clicar e abrir o vídeo no YouTube é essencial que tenha javscript vamos habilitar novamente atualizar página e o YouTube tá de volta viu para entender qual é a diferença HTML conteúdo CSS estilo javscript interatividade anota isso no teu caderno por favor isso vai te fazer falta lá na frente você tá gostando desse curso tá achando que ele é útil para você e também para uma comunidade inteira então não pensa duas vezes e compartilhar esse curso com as pessoas se você participa de qualquer comunidade qualquer grupo no Facebook e você tem aquele grupo Pão de estudo do seu colégio ou faculdade no WhatsApp ou no telegram Não esquece de divulgar os nossos links você ajuda muito divulgando o link da playlist completa e como esse curso vai ter cinco módulos vão ser cinco playlists eu te agradeço bastante se você ajudar Compartilhar esse o compartilhamento foi pelo Instagram não esquece de marcar a gente né gente sociais beleza Guanabara mas como é que eu crio conteúdo em html html que eu falei é uma linguagem de marcação então o foco dele é em um marcas ou em tags Vamos a um exemplo aqui de conteúdo em HTML o exemplo de título vou colocar um titular da matéria e o exemplo de parágrafo texto lá da matéria exemplo de título é o que a gente chama ela tem ela de conteúdo que é o que eu vou focar é o foco do HTML em conteúdo só que para transformar ele título eu tenho que usar uma tag específica tags em HTML são coisas colocadas em é de menor e maior ou que a gente chama de colchete angular Então você vai ter colocar aqui por exemplo para transformar um título H1 é isso abre um colchete angular H1 fecha colchete angular isso a gente chama de abertura de tag a maioria das tags tem abertura e fechamento Então paga um abriu para os finalizar o título exemplo de título oh1 inicia a marca do título e o título Termina depois da palavra título então eu boto lá/H um não pode ter espaço tá cê vai botar abre o colchete angular/h 1 fecha o coxa de rolar dessa maneira que tá aparecendo aí na tela não pode botar espaço tá grávida não tá muito colada aqui vou dar um espacinho para de funcionar na hora esse barra H um aí é o que a gente chama de fechamento de tag não pode ser espaço como acabei de explicar vamos passar por de baixo exemplo de parágrafo para eu criar um parágrafo Eu também tenho uma marca específica sempre assim até mesmo que marcas específicas para coisas tá o par E aí inicia batalha IP e finaliza com a tag/então todo parágrafo é delimitado entre p e barra pena é uma tag também existem tags mais complexas como por exemplo essa daqui ó é uma série para colocar uma foto na tela depois a gente vai ver isso na prática em MG src igual a foto ponto. png alto exemplo de foto não entender o seguinte o MG é a nossa abertura de tags como curiosidade em MG não tem barra e é ligeiro como eu falei A grande maioria das tags em abertura e fechamento mas existem algumas peles que não tem fechamento HR meta e MG São tags que não tem fechamento Tá mas não são tantas assim a maioria até abertura e fechamento mais o MG aqui com o exemplo que eu tô dando ele tem algumas outras coisas dentro que você tá percebendo ali por exemplo srce out são que a gente chama de parâmetro foto ponto. png e exemplo de foto que estão entre aspas é o que a gente chama de valor então basicamente apresentando Motorola ng-src SMC vendidos O que é origem então eu tô colocando imagem cuja origem é o arquivo foto.

pe ler o texto alternativo dele vai lendo o código é que tá aparecendo na tela o texto alternativo é exemplo de foto Isso é se eu não conseguir mostrar a imagem de alguma maneira ele vai mostrar exemplo de foto se por acaso tiver usando um leitor de tela ele não tá conseguindo identificar a imagem ele vai saber que é um exemplo de foto que eu tenho um texto alternativo nele então toda a tag pode ter parâmetros e valores tá eu posso preparamos valor também no parágrafo eu posso preparando esse valor também olha um mas isso é uma coisa um pouco menos usual normalmente a gente tem algumas tags que a gente usa parâmetros e valores específicos Beleza então essa é a anatomia de uma tag um conteúdo em HTML e CSS vamos supor que eu queira pegar sha-1 sha-1 normalmente é um título título geralmente aparece uma letra um pouco maior ou na Guanabara apareceu bater tá maior mas não gostei da fonte e não gostei da cor Eu quero mudar o tamanho e lembre-se é design você vai utilizar a tecnologia CSS E você também tem que ver como é que a gente muda o estilo CSS o estilo CSS ele geralmente está dentro de uma tag Style de html mas ele utiliza seletores então basicamente esse aqui ó se eu quero configurar o H1 eu vou botar pagar um sem os colchetes angulares e vou abrir Chaves e fecha a chave tá Exatamente isso o nome que se dá a esse pedacinho que eu coloquei aí chama seletor dentro dos seletores a gente vai colocar linhas por exemplo a primeira linha ali ó ponto Family are All a família da letra vai deixar de citar e nesse que é o padrão do navegador e vai passar a série aula essa linha inteira que eu coloquei é o que a gente chama de declaração em CSS vou botar outra declaração aqui ó font-size 20px vou botar uma outra declaração color Blue então basicamente que eu tô dizendo Nesse estilo que eu quero que o meu H1 que é o meu título que tá lá na página anterior que a gente fez ele vai ser na fonte Arial a família o material o tamanho da fonte vai ser 20 pontos e se PT significa pontos PX significa Pixel ele fazia as medidas e o colo é bom isso é o título vai aparecer com a letra Azul viu como é que é fácil outra coisa toda a declaração tem. E, no final toda a declaração em CSS tem que ter; mas não são obrigatoriedade da tecnologia color Glow color é o que a gente chama de propriedade Blue É o que a gente chama de valor Beleza então tá aí anatomia das CSS CSS que tem seletores dentro dos seletores eles têm declarações e cada declaração é um par de propriedade e valor simples fácil anota essa parada para você não ter que assistir esse vídeo todo de novo né e pegar todas as informações que no final você quer somente isso e para finalizar a gente vai ver a estrutura básica de um documento HTML todo o documento HTML tem essa estrutura básica obrigatória Vamos começar com a primeira linha a primeira linha de louco mento HTML tem que e olha eu vou desenvolver um site em HTML 5 para eu dizer isso para o meu navegador nós temos Esse comando aí exclamação doctype HTML exclamação doctype ele vai utilizar é uma tag específica de configuração para dizer que ele HTML5 porque a mente essa linha era bem maior mas a simplificação evolução do HTML 5 nos trouxe a ela depois disso a gente vai começar ou HTML Enfim então a gente vai montar a o parque abertura e fechamento da tag HTML que eu tenho a tag HTML tem um parâmetro Zinho ali leg pt-br que eu acho que você já sabe o que quer né eu estou dizendo que esse site vai ser construído o conteúdo dele vai ser em português do Brasil Isso facilita muito você deve ter entrado no site em inglês e fazer você quer traduzir esse site O louco não faz muito isso né aquele sabe que é para traduzir exatamente por essa configuração tá dizendo que esse site vai ser primordialmente em português a Guanabara mais no meu conteúdo vai ter umas palavras umas frases em inglês Depois eu te ensino como é que diz que aquela frase aquele parágrafo em inglês o seu site vai ser primordialmente em português toda HTML ele tem duas áreas bem definidas área da cabeça que Red e área do corpo que Bari essa estrutura para sem fundamental. doc tá lá em cima para dizer que HTML5 dentro do HTML tá vendo que tem uma hierarquia o Red e o bar estão dentro eles estão pra dentro tá nós estamos deslocados para minha direita Então isso é o que a gente chama de indentação tá é arrumação no seu código dentro da área Red área a área de configurações arabari é área de corpo no navegador o corpo é o que fica onde fica o site né a gente assessor Globo Esporte ainda pouco aquele site do Globo Esporte tá tudo dentro do baile as configurações lá em cima são feitas no algumas configurações básicas e importantes você viu isso não sei se nesse viram no vídeo anterior meta cassete utf-8 Lembra que eu falei que você pesquisar no vídeo anterior sobre o ps8 sobre o que que é a codificação utf-8 na unicode utf-8 O que que significa salinha essa linha meta cassete até se oito significa que o meu site vai ser compatível com caracteres de utf-8 isso vai me dar compatibilidade com acentuações palavras em português tem c cedilha dentinho tem acento agudo filho palavras em inglês não tem me diz aí uma palavra em inglês que tem acento que tem c cedilha não tem essa linha meta Cassete o teste oito ela é muito importante para você que vai desenvolver site em português não é obrigatória uma outra linha essa linha vai ser grande Tá meta name viewports e o contente é Windows device with initial Skill de 1.