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

153.69k views2342 WordsCopy TextShare

Programação Web

Nessa segunda aula do Curso de HTML Completo vamos aprender a estrutura básica de arquivos do tipo H...

Video Transcript:

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 <p> 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 <p> 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 <head> se escreve assim ó. .

. H E A D. Head quer dizer "cabeça".

. . tudo que eu colocar dentro da tag <head>.

. . da abertura do fechamento aqui da tag <head>.

. . 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 <head> 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 <title> 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 <head> aqui. . .

que é o cabeçalho por assim dizer, né. . .

o que tá lá no topo. . .

a gente tem uma tag que se chama <body> 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 <body> é 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 <h1>. . .

você pode fazer no seu também. . .

"Meu primeiro site" Bom e depois desse <h1>. . .

pulando uma linha, eu vou dar uma tag <p> 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 <body> é 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 <html> que é a tag principal, a tag básica. .

. depois a gente tem a <head> 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 <body> 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 <html>, né. . .

aí você faz o <head>. . .

a aí você faz o <title>. . .

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!