e agora que nós já fizemos as instalações básicas dos programas no vídeo anterior chegou a hora de botar a mão na massa e criar o nosso primeiro projeto [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vinda a mais uma aula aqui de HTML5 e css3 onde a gente vai aprender a desenvolver sites a gente está começando agora o início Zinho ele precisa de muita dedicação sua por isso que eu sempre digo não adianta Só assistir os vídeos é celular na mão assistindo o vídeo ou uma janela aberta no seu computador assistindo o vídeo e a outra janela você praticando não adianta Só assistir e só porque você viu fazendo você considera que você também já sabe fazer cuidado com isso vamos voltar lá para nosso ambiente vamos voltar para o nosso Windows e vamos começar nosso primeiro projeto é é o recado de hoje dessa aula aqui é da hostnet que é uma das patrocinadoras do nosso curso e o que eu vim trazer hoje aqui não é um serviço pago da Rosinete é algo que a empresa está oferecendo gratuitamente para você não sei se você sabe mas aqui no canal do curso em vídeo existem playlists específicas que são 100 porcento patrocinadas pela empresa ela tá trazendo pra vocês cursos como princípios básicos de marketing digital construção de sites WordPress otimização de sites WordPress para deixares mais rápidos mais infecções criação de loja online e automação de marketing utilizando o balde tudo isso sem por cento gratuito e utilizando ferramentas gratuitas que você não vai precisar ser um assinante da Rosinete para fazer esses cursos tudo ensinado para qualquer tipo de pessoa e é claro que quando você fosse profissionalizar Você vai precisar de um local para hospedar o seu site utilizando WordPress utilizando o começo utilizando malte e a partir daí opção mais sábia Você já sabe o é um grande abraço aqui pela host. net Obrigado pelo Patrocínio constante e agora vamos dar continuidade à nossa aulas em primeiro lugar que a gente vai fazer aqui é criar uma pasta onde nós vamos colocar todos os nossos exercícios a gente vai criar uma pasta que o curso de html a gente vai ter uma pasta para o curso de JavaScript e a gente vai colocar tudo lá dentro organizadamente porque por um bom programador a organização é fundamental e fica aqui ó no hexplorer vou te dar uma dica você pode aparecer o teclado agora ele não tem um botãozinho do lado do espaço né não é imediatamente zoado perto do espaço ali na lateral do espaço não tem um botãozinho com símbolo do Windows ou com símbolo do fabricante do seu computador você pode segurar esse botão e apertar a letra e the Explorer ó vou fazer isso aqui é exatamente agora não vou mexer no mouse janelinha é ele vai abrir o Xperia certo então ficar de cair para você trabalhar com mais produtividade você vai clicar em documento já acessar o jogo ó e aqui dentro de documentos nós vamos criar a nossa pasta de estudos tá então nós vamos fazer o seguinte aqui vamos clicar aqui no início nova pasta e aí nós vamos colocar estudos dentro da pasta de estudos penso dos documentos dentro da pasta de estudos Mas vamos criar duas pastas pode vir aqui no início nova pasta ou você pode clicar com o botão direito no mar é livre novo pasta Sem problema vamos criar uma página HTML traço CSS e nós vamos criar uma outra pasta mais para frente que você vai precisar chamada JavaScript certo Por enquanto nós vamos abrir a pasta HTML acompanha aí ó dentro de documentos Nós criamos uma pasta estudos dentro da pasta estudos Nós criamos uma página HTML e CSS e dentro dessa página HTML e CSS nós vamos criar uma nova pasta chamada exercícios Então tá lá já tenho minha paz exercícios pode clicar duas vezes para entrar nela primeira coisa que não vou fazer é criar um nosso exercício 001 então o direito novo pasta apps 001 iraime essa pasta vai ter o nosso vai conter o nosso exercício e aí se você assistiu o vídeo anterior e seguir os passos bonitinhos na hora de instalar e configurar o visual Studio code que você tem um recurso muito legal você clicar com o botão clica duas vezes não se por acaso você é Abrir sem querer né quiser voltar lá é aqui ó na setinha que voltar ou clica no botão de backspace no seu teclado você pode clicar com o botão direito em cima essa pasta e agora olha isso que legal você tem esse comando isso a gente habilitou lá naquelas configurações que a gente fez durante a instalação do visual Studio code que eu falei habilita aqueles dois lá Marca é isso daqui ó na hora que você clicar Open with Cold ele já vai abrir a pasta exercício 001 aqui com a a parte da Já tá aberta certo o que nós vamos fazer dentro desse exercício 01 é fazer o seguinte ó aqui nesse caso você tem dois botõezinhos do lado de exercício 001 aqui ó esse aqui a gente cria um novo arquivo e aqui a gente crie uma nova pasta tá você pode até criar pastas aqui dentro mais pra frente a gente vai criar mas no caso aqui a gente vai criar um novo arquivo Você vai clicar uma vez ele já vai abrir essa esse espacinho aí embaixo e você vai colocar o nome desse espacinho seguinte nome index. hu ml cuidado bota tudo em letras minúsculas não bota espaço tá é tudo em minúsculas e tem que ter html no final senão ele fica com esse botãozinho aqui tá vendo esse deseinho Quando você bota.
H que você vai tá pronto Agora É parece ser porque é da linguagem seja com a biblioteca de linguagem ser HTML aí ele vai colocar aqui perto você vai dar em ter quando você apertar enter ele vai criar o seu primeiro documento isso é nós temos a primeira o primeiro documento que você fez já está criado Aqui tá dizendo aqui que ele vai marcar os seus códigos com o Highlight né pode botar para não mostrar novamente e aqui é o seguinte existe um código base que todo o arquivo HTML tem eu vou te dar uma dica muito legal para ele criar o código base o tomaticamente para você basicamente você vai digitar uma exclamação vai esperar um segundinho ou dois para ele aparecer isso daqui e você vai só apertar enter ou clicar nessa primeira é exclamação aqui eu vou só apertar enter apertei e ele já criou o código base do seu documento HTML você estudou isso durante o material em PDF numa creme. pdf eu te expliquei para que que serve cada um deles eu vou dar uma revisada rápida aqui ah não pula o material de PDF não tá Não esquece ele não porque ele é muito útil para sua vida vamos lá a primeira coisa a primeira linha do arquivo index ela vai indicar que esse documento que tá aqui é um documento em HTML 5 da o HTML que você tá trabalhando agora que a gente vai trabalhar durante esse curso é o é a primeira na versão cinco que a versão atual do momento em que eu tô gravando esse vídeo o próximo a próxima linha a linha dois ela tem uma marca essas marcas elas são conhecidas como tags você deve ter visto lá no seu material em PDF por exemplo vou dar um exemplo aqui agora tag head que tá vazia tá vendo ó o que tem abertura toda não né quase todas as tags possuem abertura e fechamento tá vendo aqui quando eu cliquei duas vezes na tag de abertura ele já marcou a tag de fechamento então Red tem barra rede exemplo tiro tem barra Tayron Bari tem barbárie HTML tem barra HTML certo então você que são as tags aqui na tag HTML você tem um parâmetro chamado leng que indica Qual é o idioma que o meu site vai ser meu site vai ser em português do Brasil Então vou botar PT traço BR tá pode fazer assim você vai ver as vezes as pessoas botando BR maiúsculo tanto faz eu gosto de botar assim em minutos então beleza todo o documento HTML ele começa com HTML e fecha com barra HTML tá vendo aqui dentro do HTML só existem duas áreas área de cabeça que a rede e área de corpo cara Bari área redes é a parte de configurações no seu site parte Bari Bari é a parte do conteúdo do seu site que nós vamos fazer aqui nas configurações como configurar o meu conjunto de caracteres cassete para utf-8 o que significa esse utf-8 ele é um padrão de codificação de caracteres que suporta acentuação então por exemplo se você pegar a língua inglesa pensa numa palavra em inglês aí que tem acento agudo no ar ou que tenha c cedilha o que use tio simplesmente não existe por conta disso se você não colocar essa linha aqui o seu site vai ter problemas com acentuações a Então essa linha é importante essa minha cinco tá vendo aqui que eu liguei o Word rack lembra do quebra de Minas como a salinha meta ficou muito grande ele quebrou a linha e três Tá vendo Por que bonita es não significa que a ele tá ocupando três linhas tanto que essa Kelinha 5 e a linha sei só começa aqui isso foi feito do Word rap essa linha daqui do viewport ela indica que a sua tela ela vai ter né o seu site ele vai ocupar sem por cento da tela disponível dada pelo navegador então o Bari ele em uma escala de 1.
