[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos abordar aqui mais o que que é o o documento HTML em si né a gente vai entrar mais a fundo aqui na estrutura em si na aula passada a gente viu ali um pouco e por cima né como que era ali o documento HTML e nessa aula em si a gente vai estar criando o nosso primeiro documento rodando ele né no aqui na nossa máquina no nosso ambiente de de desenvolvimento e vamos também explorar algumas tags aqui pra gente entender um pouco aí e como
estruturar como esse esse esse documento é estruturado e como que a gente pode começar a criar aí e coisas pra nossa página Tá certo então vindo aqui no notion eu tenho aqui os tópicos né A gente vai ver o que que é um documento o que que são os elementos a vai explorar algumas tags né tag HTML Head e b e também a gente vai entender um pouco mais como que o browser entende esse documento que a gente tá criando nesse documento HTML Tá certo então vou vir aqui no meu vs code tá no vs
code aqui na aula passada eu falei para você eh abrir uma pasta né abrir uma pasta aqui dentro do vs code e com essa pasta aberta né Relembrando Aqui você clica em file e clica aqui em Open folder escolhe alguma pasta aí no seu eh diretório né no seu dispositivo para armazenar Esses códigos e uma vez que essa que essa pasta eh foi aberta aqui no vs code eu criei né mais duas pastas aqui dois diretórios né Eh chamei chamei de introdução e dentro dele eu criei um outro diretório com o número da aula e
o nome dessa aula né pra gente conseguir se organizar Aqui esse introdução é meio que são meio que módulos né a gente vai dividir esse curso aqui em alguns módulos e esse esse de agora né Nós estamos na introdução aí do curso a gente vai se introduzir ao HTML e aí nos próximos módulos a gente vai estar abordando coisas diferentes tá então na um aqui né O que é HTML eu vou clicar aqui com o botão direito e só voltando aqui um pouco né para criar uma pasta no vs code a gente tem aqui os
ícones nessa parte superior esse aqui é o de criar nova pasta né tem aqui o Create file também New file um refresh e esse outro aqui esse outro ícone para fechar todas as pastas né se a gente clica ele contrai aí Fecha todas essas PES Mas enfim e o fato é clicando com o botão direito aqui a gente consegue criar um arquivo e criar uma pasta tá vou criar então dentro da pasta O que é HTML né eu seleciono ela com botão esquerdo botão direito New file vou criar um arquivo aqui index.html.gz e esse arquivo
é o que a gente chama de index não só no HTML mas no JavaScript também a gente tem bastante disso é que é o arquivo de entrada Então sempre que eu for importar alguma coisa de alguma pasta né de algum diretório e e eu não especificar nome nenhum de arquivo o o sistema em si o sistema operacional ou o node ou enfim o o que a gente estiver usando ali para fazer esse essa importação eles se a gente não esp fica o nome ele já vai no arquivo index né que é o arquivo de entrada
o arquivo Inicial então aqui eu tenho index P HTML mas se eu quiser chamar esse arquivo aqui de página P HTML eh futuramente a gente pode ter outros arquivos HTML então vou ter um arquivo HTML eh de para cada página do meu Website então cada arquivo vai ter um nome né mas de por padrão a gente sempre cria um arquivo a gente sempre cria um arquivo index tá então eu criei aqui index P HTML né o arquivo aqui o vscode né já abriu aqui o arquivo vazio né não tem nada aqui dentro e para criar
um documento HTML de início a gente começa com uma tag tá e a tag é basicamente Qual que é a anotação das tags né a gente usa o sinal menor maior né para indicar que uma tag está sendo aberta e na verdade o sinal menor né o nome da tag e o sinal maior tá então vamos vamos vamos criar aqui por exemplo a tag HTML essa tag aqui ela é a de abertura e a tag de fechamento eu coloco o sinal de o símbolo né de menor barra e aqui ele já até autoc completou para
mim né que foi as extensões que eu mostrei para vocês na aula passada mas a tag de fechamento ela tem essa barra tá e nós temos também as tag self Close que seria por exemplo isso aqui ó HTML e aí eu já coloco a barra e o sinal de fechar tá nesse caso aqui a teg HTML em si ela não vai ser self Close vai ser difícil a gente ter e tags self close no ã HTML mas quando a gente vai pro react react rect Native a gente já começa a ter bastante delas tá mas
enfim voltando aqui e a gente vai ter uma tag de início que vai descrever o tipo desse documento e ele já até me sugeriu aqui né Essa exclamação doc doctype que a gente usa essa tag para descrever para meio que indicar pro browser que esse arquivo esse documento é do tipo HTML tá então eu abro aqui a tag né com sinal de menor exclamação doct Type espaço né HTML e fecho essa tag aqui E com isso aqui eu já descrevo já indico pro browser que esse documento é um documento HTML tá logo embaixo nós já
temos a a tag HTML eu criei ela aqui não foi totalmente aleatório HTML S né é uma tag que a gente tem que descreve o documento em si né o doctype HTML indica que isso é um documento HTML e as tags HTML né abre e fecha a gente só tem uma no documento é o o o documento em si né vai ficar tudo dentro das tags HTML tá então aqui dentro a gente tem duas tags aí que também essas três tags né que a gente deixou aqui descrita no notion HTML Head e B são sempre
tags que a gente vai ter em um documento HTML tá então partindo aqui PR a gente já falou a t HTML né é o corpo em si é o HTML em si né o documento em si e aqui dentro a gente vai ter as tags Head né aqui ele Já criei fecha para mim né a extensão que eu criei e a tag Body tá essas tags elas são irmãs tá então fica uma ao lado da outra e não e não filhas né que que seria uma dentro da outra né ou seja HTML é uma tag
pai né e o Red é uma tag filha de html esse conceito de de tag pai tag filho é componente né parent e Children é algo que a gente aborda bastante HTML aborda bastante no react react Native então é um conceito que é já bom a gente Air indo eh se familiarizando com ele porque é uma coisa que a gente tá sempre pensando dessa forma tá e aqui a gente tem a tag head que essa tag head ela é uma tag que vai descrever e esse head aqui é de header né que é de cabeçalho
que vai basicamente descrever o documento HTML Então se o meu documento HTML ele tem um título se ele tem um viport se ele usa uma fonte tal se ele usa algum script e tal isso tudo vai ser descrito aqui no Head no cabeçalho Ou seja a gente vai colocar ali dentro informações que não são necessariamente exibidas pro usuário né exibidas de forma e visual mesmo ali é claro que exibido de forma visual mas não é por exemplo um um botão eu não vou pôr um botão aqui dentro do R porque o botão né Ele é
específico pro usuário e ele ficaria aqui na próxima tag né que a gente vai falar que é do B que é o corpo do HTML em si tá então se por exemplo eu quero ter uma imagem um botão um texto alguma coisa que vai ser exibida pro usuário fica aqui dentro de body tá Então nesse nosso exemplo eh dentro aqui de head tem uma tag que é a gente usa sempre também que é a tag title abrindo fechando que esse title aqui é o título da página tá então se eu venho aqui no meu browser
e pesquiso aqui por exemplo por o próprio site do vs code né que foi o que a gente pesquisou na aula passada e clico aqui a gente tem ali ó visual Studio code tracinho ali né code editing que que tem mais aqui code editing defin Então essa essa mensagem aqui é o título desse documento que tá definido com essa tag aqui ó title Então se a gente até inspecionar aqui o elemento inspecionar essa página né a gente vai conseguir encontrar aqui no R olha lá ó a estrutura aqui ó HTML doct Type HTML né a
tag HTML as tag a tag r e a tag B tá no R no CAB S tem muita coisa aqui mas olha aqui o title ó visual Studio code code editing redefined Se eu quiser eu posso até renomear isso aqui ó apagar editar esse documento só pra gente brincar um pouco e olha lá ó tirei o o Code editing redefined né ficou só visual Studio code no título deste documento tá o próprio ícone também né a gente vai ter um aula específico mas o ícone ali esse ícone do vs code tá sendo definido aqui também
na tag head né no cabeçalho deste documento Beleza então aqui na página Nossa Vamos criar um título aqui esse título é o nome da aula né O que é HTML tá E aí com o título se eu salvo isso aqui eu já consigo ver eu já consigo eh ver esse documento lá no Browser e para ver ele né lembra que na aula passada eu falei do da extensão né o Live server a gente vai usar ele agora tá porque se eu quero eh abrir eu posso muito bem abrir esse arquivo aqui no meu aqui ó
review em file Explorer ele vai abrir aqui esse arquivo na pasta que eu escolhi para salvar se eu dou um duplo clique aqui ele vai abrir esse arquivo né no meu browser e tá lá ó o que é HTML no título né no conteúdo a gente não tem nada então a tela tá em branco mas eu já tenho um eh documento que está sendo aberto tá eh só que o problema disso a gente vai ver mais paraa frente eu na verdade eu vou deixar vamos vamos prosseguir aqui e aí eu já apresento para vocês a
extensão Live server resolvendo um problema que a gente tem de abrir o index HTML dessa forma que eu fiz né dando um duplo clique aqui beleza vamos voltar aqui pro browser e aqui dentro do Body né já falando aqui agora do corpo da parte visual eh da nossa página eu vou usar aqui a tag H1 H1 tá dessa forma aqui esse H1 ele significa heading um né heading seria meio que um título tá eu não vou entrar muito a fundo porque a gente vai ter uma aula explorando isso aqui tá mas é basicamente uma forma
de eu colocar um texto com algum estilo aqui ele vai ter um estilo que é padrão do browser né por isso que eu tô usando um H1 aqui mas eu poderia muito bem aqui dentro escrever um Hello from body Tá eu vou escrever direto o texto Dentro da tag Body e vou também colocar esse texto Dentro da tag H1 tá pra gente até ver aí um pouco das diferenças e salvando o arquivo se eu volto aqui no Browser eu não tenho di não tenho nada aqui e mas se eu atualizo a página eu cliquei al
em atualizar eu vou dar um zoom aqui eu já tenho o conteúdo né eu tenho o texto que eu escrevi e tenho aqui a tag H1 tá e não vou entrar a fundo da diferença da tag que por padrão ele já vem com um estilo diferente então eu vou voltar aqui no meu HTML e Apagar o texto Vou deixar só a tag H1 se eu salvo Olha lá eu tenho que vir aqui e atualizar a página né clicar ali no atualizar eu dar um F5 para mim conseguir ver a a a alteração e o Live
server ele já faz isso automaticamente para mim tá então com a com a extensão instalada né clicando aqui em extensões eu vou pesquisar aqui por Live server eu clico aqui né Live server aqui já vai já tá para mim desinstalar né mas teria aqui o botão de instal eu clicaria e ele iria instalar a extensão uma vez que tá instalado ela fica posicionada aqui no canto inferior direito tá tá escrito aqui go Live se eu clicar aqui ele vai iniciar no meu Servidor ou então se eu se eu dar aqui um control shift P né
no visual Studio code para ele abrir aqui essa aba de bu das configurações eu posso digitar aqui Live server e vai ter aqui a opção né Live server Open with Live server caso seu ícone não esteja exibindo ali né ou a gente tem essa outra opção aqui para abrir então eu vou clicar aqui né vou clicar no ícone aqui embaixo e aí ele já vai abrir esse Live server para mim já abriu no meu browser né E aí com esse Live server aberto eu vou voltar aqui ó no meu código no meu arquivo documento HTML
e vou duplicar essa tag H1 tá ou seja Agora eu tenho dois h1s aqui escrito Hello from Body Vou salvar e se eu volto lá no Browser Olha lá já tenho dois Hells from Body né só que no na outra aba que tava aberta só tem um né não atualizou se eu dou um F5 aqui ele aparece tá então com o Live server com esse servidor que ele in que essa extensão inicia pra gente vai ficar muito mais prático testar aí o código que a gente tá desenvolvendo tá bom então voltando aqui né no vs
code uma vez que o servidor tá iniciado a gente pode o ícone aqui na parte inferior né muda se eu clicar aqui agora ele vai fechar o servidor tá ele iniciou um servidor para mim ó na porta 5500 né 5500 e se eu clicar aqui novamente ele vai fechar o servidor eh pra gente sei lá você parou de trabalhar você quer abrir outro servidor em outro com outro arquivo a gente fecha ele aqui para abrir esse outro servidor Tá mas é basicamente isso tá que eu queria falar aqui sobre a extensão sobre as tags né
a gente já falou das tags O que é o documento e agora eu vou falar um pouco sobre como eh Na verdade essa explicação minha já ficou bem claro né Como que o browser entende o documento HTML mas só eh explorando aqui um pouco mais eu tenho uma imagem aqui né que representa a estrutura que a gente criou que é basicamente o a representação né na tag HTML por volta de tudo eu tenho aqui também a tag head que é uma tag que ela vai a gente vai ter dados sobre informações de escrever informações sobre
o documento Só que não é exatamente algo que vai ser visual né E aqui na tag Body a tag body em si também ela não não representa nada visual só que as coisas que estão dentro dela sim exceto alguns casos né que a gente vai chegar neles ainda mas a maioria dos elementos e aqui no exemplo eu tenho H1 e um p né um parágrafo e um heading One vai ser tudo exibido pro usuário tá então essa imagem aqui representa bastante representa também a questão de contêiner né de conteinerização da página ou seja a é
é volta naquela ideia da componente pai e a componente filha né onde uma componente tá por volta de outras né e por conta disso a gente vai conseguir criar estruturas bem interessante a vai conseguir e aplicar e artefatos visuais por por conta dessa estrutura de pai e filho então a gente vai conseguir fazer bastante coisa e a gente vai estar explorando isso e aprendendo mais nas próximas aulas Beleza então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e
até a [Música] próxima l
