Curso de HTML Completo: Aula 02 - Estrutura Básica

Muito bem pessoal... nessa aula nós vamos aprender a criar a estrutura básica, um documento simples em

HTML que é a base de qualquer site. Esse padrão, essa base, essa estrutura que a gente vai ver,

esse esqueletinho aqui... é o padrão, a base para todos os sites. Então vai ser bem interessante para você

já começar a entender como funciona o HTML . O HTML como a gente viu na aula passada... ele funciona com

abertura e fechamento de tags... que é o sinal de menor <, aí o elemento, por exemplo, o elemento que é

de parágrafo e o sinal de maior >. E aí, o VS Code, inclusive, é bem inteligente e já fez o fechamento

para nós aqui. Então se eu colocasse um texto aqui dentro isso aqui seria um parágrafo porque eu

determinei que essa tag que é de parágrafo tem abertura e fechamento aqui, certo? Alguns alunos têm

a dificuldade para fazer esse símbolo aqui ó esse símbolo de menor "<" e esse símbolo de maior ">". Como é

que você faz isso no teclado?... Então eu tenho aqui um teclado virtual só para mostrar para vocês... fica aqui ó em cima do...

da vírgula e do ponto, pessoal... da vírgula e do ponto. Então você vai segurar a tecla SHIFT+VÍRGULA... aí ele

vai fazer o sinal de menor <... e a tecla SHIFT+PONTO pra fazer o sinal de maior > conforme elas aparecem aqui

em cima. Esse é o padrão da maioria dos teclados, pode ser que no seu teclado, eventualmente, esteja

num lugar diferente... aí você observa em que tecla está esse símbolo, mas não tem segredo, né pessoal... tudo

que sempre está em cima aqui, para você conseguir acessar, você precisa do SHIFT. Então, por exemplo

aqui, para fazer o ponto de exclamação, precisaria dar um SHIFT+1... e aí, eu faria um ponto de exclamação, né...

se eu fosse fazer aqui um acento circunflexo: SHIFT e aqui o "~" porque ele vai pegar o de cima, que é

o acento circunflexo "^". É informática básica, né... mas não custa a gente falar para você, se você tiver

dificuldade para estar fazendo esses símbolos aqui das tags, ok?... Então vamos lá... o Visual Studio

Code, ele tem uma vantagem muito legal em relação a outros editores de código, que é sugerir para

você o conteúdo e às vezes até preencher isso de forma automática. Então, por exemplo, para eu declarar que

esse documento é do tipo HTML, eu faria assim... eu faria o sinal de "<!" e aí você vê que o

VS Code , ele já me sugere que eu quero fazer um DOCTYPE... ele já sabe que eu vou precisar dessa

tag HTML e me sugere. Então à medida que a gente for digitando as tags que a gente quer usar o VS

Code, ele... já sugere para nós... e se a gente achar que é isso mesmo que a gente quer... a gente dá

simplesmente um ENTER e ele já preenche para nós aquilo ali. Então, isso facilita muito conforme você

vai digitando... em produtividade pra você não ter que digitar tudo... você começa a introdução dá um

ENTER... e ele vai preenchendo isso para você, o que é bem legal... essa primeira tag DOCTYPE, então

<! DOCTYPE html> é para dizer para o meu navegador que o meu documento é do tipo HTML. A próxima tag

que a gente sempre utiliza aí a tag HTML... que é a tag básica para a gente colocar o nosso conteúdo,

então como nosso documento é HTML ...aqui dentro eu vou colocar o meu conteúdo HTML... outra tag que eu vou

fazer é a tag se escreve assim ó... H E A D. Head quer dizer "cabeça"... tudo que eu colocar dentro da

tag ... da abertura do fechamento aqui da tag ... não vai ser mostrado para o usuário, isso

aqui só vai ser lido pelo navegador, pelo programa que tá interpretando meu site. Dentro da tag a

gente pode colocar várias coisas... mas para essa nossa aula, que a gente tá fazendo uma estrutura básica,

a gente pode colocar a tag ou "título"... qual vai ser o título do meu site... Então eu vou colocar

aqui "Meu primeiro site"... observe que a gente sempre tem uma abertura , de uma tag, e o fechamento dela...

abertura e fechamento < > , né... então dentro da abertura e do fechamento a gente vai colocar o conteúdo que a

gente quer então "Meu primeiro site"... Depois da tag aqui... que é o cabeçalho por assim dizer, né... o

que tá lá no topo... a gente tem uma tag que se chama se escreve assim ó B O D Y com "Y"... tem uns que

até brincam que é o bode mas é "body" ou "corpo", em inglês... dentro dessa tag é onde a gente vai

colocar o conteúdo que realmente, vai aparecer para os usuários, que vão estar acessando o meu site, né...

eu vou fazer aqui um título 1... vou botar assim ... você pode fazer no seu também... "Meu primeiro site"

Bom e depois desse ... pulando uma linha, eu vou dar uma tag para "Meu primeiro parágrafo"...

a gente vai ver mais a fundo aqui... cabeçalhos e parágrafos... uma aula pra frente... mas só para

você ver como funciona eu vou fazer dessa forma. Então, dentro da tag é onde a gente coloca

o conteúdo... que realmente vai ser mostrado para o nosso usuário... quando eu der um CTRL+S...

olha só que legal... você viu que pulou uma linha aqui... ajeitou o nosso código... isso aqui é outro

recurso que a gente colocou aqui no VS Code, que é para ele organizar o nosso código depois que

a gente dá um CTRL+S... aliás para você salvar o seu código, você vai lá no seu teclado e vai

teclar a tecla CTRL, né... no meu teclado na verdade fica aqui no cantinho... nesse virtual está "Fn"...

mas geralmente fica no cantinho aqui... CTRL e a tecla S... então CTRL+S... e aí eu vou salvar

esse meu documento... você vê que o documento está salvo, ou não... porque quando você digita ó...

digitei qualquer coisa aqui... repara que tem uma bolinha aqui em cima, tá vendo uma bolinha

branca?... Isso quer dizer que meu documento não está salvo... quando essa bolinha branca

está assim, é que NÃO está salvo o meu documento... aí eu preciso dar um CTRL+S e aí ó... você

vê aqui sumiu aquela minha bolinha branca... agora meu documento foi salvo, certo?... Então se eu apagar

aqui ó... voltou a bolinha branca lá... não está salvo esse meu documento... quando eu dou um CTRL+S ele salva e

ainda outra maneira da gente salvar é vindo aqui em "File" e "Save"... que é para salvar... essa é

outra maneira de a gente salvar o nosso documento... nunca se esqueça, depois de você ir fazendo alguma

alteração, de dar um CTRL+S... faz isso já quase como que automaticamente, tá... faz disso um

padrão na tua maneira de codificar... digitou alguma coisa, colocou uma tag, fez um pouco de conteúdo

aqui, já dá um CTRL+S para salvar... porque às vezes você esquece de salvar aí você vai olhar o

site parece que não tá funcionando, mas é que na verdade você não salvou seu documento, ok?

Agora... para gente ver esse nosso site rodando... como a gente tem aquela extensão do live-server que é

para rodar o nosso site em tempo real à medida que a gente vai modificando as coisas aqui, você

pode vir aqui embaixo nesse botão aqui ó, Go To Live... tá vendo você pode clicar aqui nesse

botão "Go To Live"... ir para ao vivo... ou clicar no documento com o botão direito e você pode dar

esse "Open with Live Server"... você pode dar essa opção aqui também... eu vou clicar aqui por baixo

em "Go To Live"... quando você clicar a primeira vez aqui nesse "Go To Live", pessoal ..."Go Live"... na verdade

não tem o To, né... Go Live... quando você clicar nesse "Go Live" a primeira vez ele vai pedir a permissão

do Firewall do Windows para poder o servidor rodar o nosso site. Você dá permissão, tá... coloca a opção

aí "Permitir"... como eu já tenho aqui... eu já fiz esse processo de permissão que nos testes que eu estava

fazendo então não vai aparecer para mim novamente, só faz uma vez... se aparecer para você aí a permissão

do Firewall... você permite, ok?... E quando eu clico aqui em Go Live ... olha o quê que vai acontecer...

Olha que show de bola, pessoal. "Meu primeiro site!"... você vê que... está aqui a nossa primeira página.

Que emoção, né pessoal... nosso primeiro site aqui renderizado na tela do navegador... nossas primeiras

frases aqui, né?.. Agora olha que legal... com o... esse live-server ativado, se eu dar um "Restaurar" clicando

aqui no quadradinho ó... eu posso fazer assim... eu posso arrastar aqui o meu navegador... para cá... e

posso... deixa eu diminuir ele um pouco...um pouco mais aqui... posso vir aqui no meu VS Code também restaurar ele...

e colocar ele aqui no canto... se eu ajeitar ele aqui ó... posso aumentar ele aqui... posso puxar ele

aqui... mais para o canto... e eu fico com os dois assim... ou eu posso fazer o seguinte... eu posso dar a tecla

"Windows" aquela que tem a bandeirinha do Windows... aqui no meu VS Code... Windows e a seta pro lado

setinha... WINDOWS+"setinha"... e aí ele vai pedir qual o outro documento que eu quero deixar aberto... quero

deixar aberto esse outro aqui do lado... e aí ele vai dividir a tela aqui para mim, beleza?... só que eu não

vejo os códigos agora, né... porque... está aqui com a minha pasta aparecendo. Lembra que a gente aprendeu

na aula passada? Se você dá um CTRL+B... olha o quê que acontece... se eu venho aqui e dou um CTRL+B

eu já a tiro aquela parte da pasta... dou CTRL+B de novo... parte da pasta aparece... ó posso alternar, certo?

e você vê que fica um pouquinho para o lado ainda meu código, porque talvez aqui a minha fonte está

muito grande, né?... pra tudo caber dentro desse quadradinho aqui, onde eu estou vendo meu código

e ao mesmo tempo eu consegui ver aqui o site, né... eu posso dar um ALT+Z... aí no nosso VS Code

se eu dou um ALT+Z ele organiza o meu código para ele aparecer aqui... tudo nesse quadradinho

aqui sem fazer rolagem aqui embaixo.. se eu dou ALT+Z... se eu dou um ALT+Z ele fica com a rolagem... vai

até para lá tem que fazer assim para enxergar meu código... se eu dou um ALT+Z ele fica

tudo nesse quadradinho aí eu posso programar aqui, legal?... E como tá rodando aqui meu servidor em tempo

real se eu alterar aqui "Meu primeiro site!" para o "Meu segundo o site!"... dou CTRL+S para

salvar... olha lá... já alterou lá em cima o título do meu site... já ficou alterado aqui... se eu mudar e falar assim...

"Olá pessoal!" e dou um CTRL+S... ele já alterou aqui em tempo real... "Olá pessoal!"... então é legal o

live-server justamente por isso... porque conforme você vai programando aqui, você já pode ir vendo em

tempo real o que está acontecendo aqui no lado direito... você pode até organizar esse daqui, né?

Você pode diminuir um pouco aqui... vamos dizer essa parte ó... pra deixar isso aqui menorzinho

para aqui ficar um pouco mais tranquilo de você enxergar o seu código, né... e ir vendo o que você está

codificando aqui... às vezes no YouTube a gente vê os programadores fazendo assim, né?... o código aqui

do lado esquerdo e do lado direito aqui o site sendo mostrado, renderizado em tempo real... então é

assim que a gente faz, beleza pessoal? Agora que você fez essa estruturinha básica aqui do HTML que

você entendeu, né?... que a gente sempre começa com o DOCTYPE para dizer para o navegador que é do tipo

HTML5 o nosso site... a tag que é a tag principal, a tag básica... depois a gente tem a onde a

gente vai colocar informações que só o nosso navegador vai interpretar... a gente vai ver mais

coisas na próxima aula... temos a tag que é onde vai aparecer o conteúdo aqui que o usuário

realmente vai ver, certo?... agora que você entendeu isso, olha só um recurso que você vai querer me

dar um chute quando descobrir que tem isso aqui no VS Code. Quando você tem o seu arquivo aí HTML

no VS Cold, se você digitar "html" assim ó... ele já vai te dar uma sugestão assim ó... "html : 5"... e quando

você clica em cima disso, olha só o que acontece... ele já preenche para nós aqui, pessoal... com uma estrutura

básica HTML inicial... olha que show de bola... deixa eu até maximizar aqui novamente para vocês enxergarem... ele

já deixa aqui com a estruturinha básica, inclusive com umas meta tags que a gente vai ver na próxima

aula... o que são essas meta tags e tudo mais... ele já deixa tudo prontinho... então, em vez de você ter

que ir lá na mão... fazer DOCTYPE... aí você faz , né... aí você faz o ... a aí você faz o ...

e assim por diante, você vai lá e digita "html : 5"... essa opção aqui... e ele já preenche

tudo para você aqui... inclusive com algumas meta tags bem úteis que a gente vai usar

na próxima aula. Espero que você tenha gostado dessa aula, se você gostou deixa

aquele seu like, continua assistindo esse curso clicando aqui num desses vídeos que

vai estar aqui na tela... para você continuar assistindo a Playlist e vendo as outras aulas

desse curso... se inscreve no canal se não for inscrito e até a próxima aula... valeu!