Curso de HTML Completo: Aula 01 - Criando novo projeto

Olá seja muito bem-vindo seja muito bem-vinda o curso gratuito de html aqui do canal programação web nesse curso você vai aprender a linguagem de programação base de toda a internet e de vários outros sistemas também já que hoje a gente pode usar programação web para construir até mesmo programas para computador como o Windows e Linux e Mac iOS essa daqui é a base de tudo que você pode fazer com a programação web então aprender HTML é fundamental para toda aprendizagem que você vai ter dentro deste mundo esse curso é um curso 100% gratuito mais com conteúdo com material de curso pago então com certeza você vai tirar muito proveito Com certeza você vai aprender algo e vai te ajudar na sua vida profissional então desde já já deixa aquele seu like para fortalecer aqui espero que você goste desse conteúdo e vamos lá aprender como que a gente e a trabalhar com HTML caso você não saiba Qual é o programa que a gente usa para conseguir editar os códigos que não é mostrado nesse vídeo clica no card que vai tá aparecendo aqui em cima e nesse vídeo eu mostro qual é o melhor programa para você aprender a programar como você faz para baixar e usar ele então clica no card que vai te mostrar como você faz isso E aí você continua assistindo toda essa playlist aqui Combinado então vamos lá em HTML é uma sigla em inglês para hiper text markup language ou linguagem de marcação de hipertexto em português o HTML é o bloco de construção mais básico da web ele define o significado da estrutura do conteúdo da web como a gente viu na aula passada o HTML ele é responsável por texto imagens vídeos na parte do conteúdo a parte estrutural de uma página o formato de um arquivo HTML é ponto HTML ou você também pode ver. Htm sem o l do final né mais o mais comum que a gente utiliza o padrão amplamente aceito no mundo do desenvolvimento é ponto HTML então eu te recomendo usar sempre formato de arquivo. HTML é o formato mais comum a expressão hipertexto que tem na linguagem de marcação de hipertexto e e são hipertexto se refere aos links que conectam as páginas também chamado em inglês de hiperlinks Ou seja a partir de um documento você pode ir para outro documento na como quando a gente clica no link e a gente vai para uma outra página e quando usa a expressão linguagem de marcação é porque o HTML Ele trabalha com tags ou seja rótulos que são representados pelo sinal de menor e o sinal de maior e geralmente tem um fechamento também com o sinal de menor uma barra e o sinal de maior formando assim um elemento HTML Vamos dar um exemplo aqui um exemplo de uma tag seria essa que tá vendo aí na tela tag Tito você pode perceber que a tag título tem um abertura e tem um fechamento e também um conteúdo essa tag Título nós usamos ver qual vai ser o título do site que vai aparecer na aba no navegador e atualmente existem 140 tags HTML Nem todas elas são usadas com frequência algumas estão inclusive em desuso as tags indicam pro navegador o tipo de conteúdo que ele deve mostrar vamos ver se você adivinha para que servem as tags a seguir Oi e aí pensou para que essas tags ela servem ou se você disse imagem vídeo e áudio você acertou Essas são as tags responsáveis por informar pelo navegador que aquele trecho vai ter uma imagem um vídeo e um áudio essas tags apresentadas aqui são bem óbvias né porque elas são parecidas com como nós falamos em português e MG de imagem vídeo é vídeo em português também e áudio então é um pouco Óbvio a gente olhar essas tags e identificar o significado dela mas outras tags não são tão óbvias porque elas vende abreviações em inglês por exemplo Tente adivinhar para que servem as tags a seguir Oi e aí ficou mais difícil não é a tag weli significa em inglês o Nordeste list ou lista desordenada e l iehlist item ou item da lista não essas tags que a gente mostrou que servem basicamente para fazer uma listinha como por exemplo quando você vai fazer uma listinha no supermercado veja o exemplo do Propósito dessa tag aqui embaixo o que que isso aqui essa visão geral nos ensina PSOL a importância de nosso conhecermos bem Todas as tags e para que ela serve porque a medida que nós passamos a conhecer as tags e para que ela serve você vai sendo capaz de montando o seu site da forma correta de modo que o que o navegador possa interpretar exatamente o que você quer que ele interprete Mas fique bem tranquilo fique bem tranquila bem sossegado que nós vamos ver nesse módulo tudo que você precisa as tags que a é realmente usa com bastante calma bem explicar Dinho Então você vai ter um apanhado Geral das tags e para que ela serve bom isso era nossa introdução do módulo e agora vamos para a parte prática o objetivo da sala que aprender a criar um arquivo HTML aprender a criar o nosso projeto vamos lá a beleza pessoal tô aqui no meu Windows e eu vou criar o meu primeiro projetinho para criar o meu projeto de site eu vou fazer o seguinte eu vou criar né lá no cê: eu vou clicar aqui nessa pastinha que a gente tem aqui de explorar né vou ir lá em disco local C E aqui dentro eu vou criar o meu projeto de site por que que eu vou fazer no seu dois pontos porque quando eu queria no disco local C um projeto isso fica Independente de do usuário do Windows que está sendo usado né se você tem um usuário só não tem problema mas às vezes tem alunos aí computadores que tem mais de um usuário então se você fizer aqui no seu: o disco local C você vai conseguir criar os seus projetos tranquilamente sem nenhum problema certo então eu gosto de vir aqui no seu dois pontos Clica com o botão direito novo criar uma nova pasta ó e vou escrever assim sites porque dentro dessa pasta sites vai ser onde eu vou fazer os meus projetinhos pelo menos nessa parte inicial do curso onde a gente tá estudando front-end então só para você ver como que a gente chegou ali eu cliquei nessa faixinha aqui embaixo depois fui aqui em disco local C E aí cliquei com o botão direito novo basta querer uma pasta chamada sites certo bom então aqui dentro da pasta sites eu vou criar uma nova pasta vou clicar com o botão direito novo pasta e aqui eu vou dar o nome de site certo você pode dar o nome que você quiser algo que eu recomendo sempre que você vai criar um nome de uma pasta para você fazer um projeto é nunca usar espaços então por exemplo se você fosse inscrever-se o meu site tá vendo assim ou vamos fazer assim meu primeiro site O ideal seria você não criar ele dessa forma seria você poderia fazer com traços meu um traço primeiro traço site ou ainda você pode fazer com as letras maiúsculas para diferenciar uma palavra de outra então meu primeiro site assim dessa forma ou ainda usando o chamado underline que aquela aquele tracinho que fica embaixo que você faz segurando o shift e o botão de tracinho Meu Primeiro site fazer isso pessoal fazer com traços em espaços facilita Quando você vai trabalhar com links depois em caminhos absolutos ao que a gente ainda vai aprender mais para frente mas para evitar problemas Então sempre que você precisar fazer uma pasta com isso com nomes compostos né que seriam vários nomes em vez de você dá um espaço na pasta faça desse jeito como eu te te mostrei certo então eu vou fazer assim o meu braço primeiro traço site é ou vou fazer assim aula traço HTML certo porque daí a gente já vai saber que está relacionada essa parte desse módulo que a gente tá aprendendo então aula HTML Beleza então criei essa faixinha aqui como que eu faço agora para começar a trabalhar dentro dessa pasta lá no visual Studio code vs code bom eu vou digitar aqui no campo de pesquisa vs code ó visual Studio code e vou abrir o programa a beleza o programa foi aberto Inclusive eu te sugiro vir aqui embaixo clicar com o botão direito em cima dele e marcar essa opção fixar na barra de tarefas dessa forma se eu fechar o programa Olha que que vai acontecer ele continua aqui embaixo o ícone do programa fica como se fosse um atalho mais rápido para mim encontrar ele eu clico aqui e o programa já vai abrir para mim o nosso programa editor de código e se você assim como eu está aparecendo essa aba aqui com as configurações que a gente fez na aula de número dois aqui do curso você pode simplesmente vir aqui fechar sem nenhum problema se tiver alguma coisa aberta é só você fechar e aí você vai estar na tela inicial do programa certo para você abrir uma pasta específica aqui até mostra qual que é o comando se você quiser usar um atalho no teclado outra opção seria vir aqui em Fairy ou arquivos e a opção Open folder o Abrir passa eu vou fazer por aqui mesmo então vou vir aqui filho e paio o open folder e vou procurar Onde está a pastinha do nosso projeto que tá aonde tá que anos e é: aí vou aqui em sites e aí eu tenho aqui a minha pasta aula HTML que eu criei e eu vou dar um selecionar pasta E aí você vai observar que mudou um pouco a interface aqui a gente tem aqui a aba Explorer que é a água que mostra em que pasta eu estou ele tá marcando aqui para mim que eu tô na pasta aula HTML tá vendo essa parte aqui que tá mais escura esse aqui ó que vocês estão vendo marcado você pode fechar ela usando o atalho contra o b o seu dou um controle ela some se eu dou um control B ela aparece se eu dou um controle ela some se eu clico aqui nesse ícone ó hexplorer ela aparece porque eu tô com essa pasta aberta aqui no visual code Ok para eu criar um arquivo HTML é bem simples nós temos aqui ó alguns atalhos no no vs code que nos auxiliam muito a criar novos novos arquivos você tem esse primeiro ícone mil fácil e você tem aqui New Folder Então esse aqui é para criar um novo arquivo e esse a criar uma nova pasta então se eu clicar aqui nesse primeiro criar um novo arquivo newfire seu clicar nele aqui eu vou criar um arquivo dentro da pasta ao HTML que é onde eu estou o arquivo do tipo HTML que seria para página inicial do nosso site a gente sempre sempre esse é o padrão tá então você sempre faz esse se for a página inicial do seu site você sempre vai seguir esse padrão se escreve index o ponto HTML index olha como é que se escreve index1 index então falei que ainda ex.

HTML a minha página inicial certo posso dar um enter aqui e quando eu faço isso de um enter você já vai ver que é que o visual Studio code o vs code ele já abriu para mim um arquivo do tipo HTML inclusive ele já identifica aqui que esse arquivo do tipo HTML e vai até facilitar para gente poder colocar aqui dentro as tags na próxima aula nós vamos começar a entender a estrutura básica de um arquivo HTML Mas o que você aprendeu é como criar um novo projeto e como criar um novo arquivo vamos fazer do zero mais uma vez só para ficar bem fácil e bem gravado na mente como a gente cria um projeto e como que a gente faz para abrir esse projeto no vs code e fechar esse esse arquivo que eu tenho aqui fechei e também vou fechar a pasta que eu tenho aberto aqui aula HTML porque só não fechar Olha que vai acontecer se eu fechar simplesmente houvesse Cold fechei vs code e eu abro ele de novo Olha que que vai acontecer ele já vai voltar com a pasta aula HTML que foi a última que eu tava trabalhando aberta olha só que interessante inclusive com o arquivo aqui que é o que a gente criou que é isso aquilo que está vazio index. hr ml então a gente precisa fechar essa pasta se a gente quiser voltar do zero por assim dizer então vem aqui ensaio e aí eu tenho aqui embaixo opção o Close folder que é para fechar a pasta e olha só voltei para 10 né que é um irrita o quer dizer um arquivo gerado certo não tem nada aqui no meu vs code eu posso cozinha e fechar esse aqui que volta para o padrão Zerado aqui do vs code eu vou fechar o vs code vou apagar essa pasta htm aula HTML aqui vão ser dois pontos e vou apagar se minha pasta sites para a gente fazer rapidinho do zero o processo certo vou fechar aqui então na tela inicial do nosso Windows eu vou vir aqui embaixo nessa pastinha que é o explorador de arquivos Oi e aí eu vou vir em disco local C ou clicar com o botão direito novo pasta e vou dar aqui sites isso eu só vou fazer uma vez tá pessoal criar essa pasta site porque todos os sites que eu for fazer eu já vou criar aqui dentro vou entrar dentro da pasta sites vou clicar com o botão direito novo pasta e eu vou chamar de aula html e você vê que HTML5 para separar uma palavra da outra e usei o traço porque nunca é bom como Nós aprendemos aqui você dar espaços em palavras compostas de pastas no caso de desenvolvimento de programação Ok dentro aqui de aula HTML eu não tenho nada eu quero criar um arquivo então eu tenho que abrir essa pasta lá no vs code então quê que você pode fazer você pode clicar aqui no vs code vai vir aqui em Fairy ou Fábio e aqui Open folder Abrir folder o Abrir pasta né contra o ca contra o E aí procurar a pasta que você quer trabalhar vem aqui cê: você vai vir aqui em sites ao HTML selecione a pasta já tô com a pasta do projeto no vs code eu posso criar um novo arquivo vinda nesse primeiro clique aqui nesse primeiro e tem aqui cliquei index. hu ml que é o nome sempre do nosso arquivo tem que ser index é um padrão padrão que a gente sempre faz para a tela inicial no nosso site é index.

hu ml e pronto Nós criamos o nosso primeiro arquivo do tipo HTML certo pessoal tem um outro jeito para gente abrir uma pasta no vs code vou mostrar para vocês aqui também rapidinho e você pode vir aqui vou fechar aqui a pasta vou vir aqui em PA you close folder E aí eu fechei essa pasta beleza tá fechado eu posso vir aqui ó pegar essa pasta que eu criei arrastar ela e jogaram aqui ó no vs code eu acho que assim direto não vai deixa eu ver se se eu fizer assim ó vou abrir o meu vs code vou deixar ele aqui restaurado né com a Thalia menor aqui assim eu posso pegar essa pasta e jogar aqui E aí sim aí Já puxou a pasta também uma outra opção que eu tenho certo então você pode pegar a pasta e arrastar aqui eu achava que se puxando aqui embaixo e jogando aqui em cima ele também ia não sei se eu fiz errado chover e eu acho que não acho que eu tenho que abrir ele mesmo aqui arrastar não tem problema beleza para aqueles que já são mais avançadinho né se você a já vem do nosso curso de aplicativos já conhece um pouquinho do terminal e tudo mais tem um outro jeito de abrir essa pasta direto aqui no vs code deixa eu mostrar para vocês e o só fechar aqui fechar passa para gente tá zerado aqui eu tô com meu veste codesera das eu abrir ele você vai ver que não não abre na pasta ali já abre um arquivo novo certo tem um jeito da gente abrir essa parte aqui também é assim você copia o centra na pasta e Copie o endereço que tá aqui em cima contra você vai abrir o prompt de comando com cm de isso aqui pessoal você é iniciante não precisa fazer só fazer os passos que a gente mostrou antes eu tô mostrando todas as opções basicamente que você pode abrir uma pasta no vs code e fazer um novo arquivo certo então você pode vir aqui no cmd no prompt de comando e pode dar um CD e dá um controle aqui para colocar o caminho que você fez ali na sua pasta e aí você dá o comando Cold espaço. Cold espaço ponto e dar um enter e esse comandinho vai abrir a nossa pasta aqui no vs code certo então se você acessar a pasta do projeto pelo CMD e dá um Cold espaço.