Curso de HTML Completo: Aula 03 - Meta Tags, Cabeçalho e Parágrafo

124.87k views3605 WordsCopy TextShare

Programação Web

Nesta terceira aula do nosso Curso de HTML Completo vamos aprender a importância das meta tags. Que ...

Video Transcript:

Agora pessoal nós vamos aprender aqui a respeito das meta tags e para que elas servem. . .

as meta tags são tags do tipo meta que ficam aqui dentro do HEAD. . .

dessa parte de cima do nosso código HTML. As meta tags, elas são metadados, ou seja, são informações que são lidas somente pelos navegadores. .

. e servem para algumas finalidades, como por exemplo, para mecanismos de busca saber palavras-chaves do seu site. .

. para você dizer quem é o autor. .

. o tipo de codificação de caracteres que a gente vai estar utilizando, né? .

. . o tipo também de visualização de dispositivo que a gente quer que que apareça entre outras coisas, né.

. . eu vou mostrar aqui para vocês pessoal as principais meta tags que a gente tem disponível.

A primeira é a que já vem aqui padrão ó. . .

se eu apagar esse nosso conteúdo aqui e colocar aqui HTML5, né. . .

que é o padrão zerado, a gente já vê que já vem com três meta tags, já por padrão. . .

nós vamos entender o quê que são essas três meta tags e vamos ver também mais algumas que não estão inseridas aqui nesse modelinho padrão, que já vem do nosso VS Code. Primeira coisa, pessoal, antes a gente vê essa questão das metas, é aqui em cima na tag <html>. .

. nós temos aqui um atributo chamado LANG tá vendo. .

. isso aqui é de language ou idioma. .

. língua. .

. ele por padrão vem em inglês só que se eu rodar esse site. .

. eu vou salvar e vou rodar esse site vou aqui Go Live, né. .

. como a gente viu na aula passada, para rodar o nosso projetinho aqui. .

. olha só o quê que acontece. .

. ele aparece aqui eu para traduzir o site, porque ele entende que o site está em inglês, então ele abre aquele sistema de tradução. .

. olha só que interessante. Agora se eu fechar isso aqui.

. . e eu vir aqui e botar assim, ó "pt-br".

. . burro não precisava ter fechado, né pessoal?

. . .

porque o nosso servidor já ia atualizar em tempo real. . .

mas, é a força do hábito. . .

então vou clicar aqui para fechar. . .

fechei. . .

e vou abrir de novo aqui o servidor. . .

do live-server que a gente tá usando, né. . .

agora eu rodei. . .

claro não tenho nada no meu BODY e não vai aparecer nada aqui. . .

mas você viu que não apareceu mais aquela mensagem dizendo para traduzir o meu site para de inglês para português? Por quê? .

. . Porque agora eu informei que o idioma do meu site é português então a gente coloca esse atributo dentro da tag <html> ó.

. . "Lang=".

. . e a gente põe "pt-br".

. . que é português do Brasil.

. . para informar aqui o meu navegador de que esse meu site tá rodando em português.

. . posso até colocar um conteúdinho aqui ó.

. . "conteúdo para ver que tem coisas aqui".

. . vou dar um CTRL+S.

. . e aí.

. . está lá.

. . "conteúdo".

. . certo?

. . .

beleza. Essa meta tag charset="UTF-8". .

. pessoal. .

. ela serve para gente definir que os tipos dos caracteres que a gente está utilizando é do tipo "UTF-8". .

. que é um tipo de padronização de caracteres. Quando a gente informa esse.

. . essa meta tag charset="UTF"-8.

. . que é o padrão da web mais moderna.

. . você não vai ter problemas com acentuações, por exemplo.

Em alguns navegadores, se você não colocar essa meta tag charset="UTF-8". . .

se você colocar coisas com acento ele não vai funcionar, ele vai dar um probleminha. . .

vai ficar com aquela acentuação toda embaralhada, sabe? Então, esse <meta charset="UTF-8"> ele serve para dizer que o nosso documento, ele vai ter um sistema de caracteres que é compatível, por exemplo, com a língua portuguesa. .

. sem ter problemas de compatibilidade com acentuação, certo? Essa outra meta tag aqui, que já vem por padrão é uma meta tag que a gente utiliza por causa da compatibilidade com o Internet Explorer.

Lembra aquele navegador que a gente usava antigamente, o Internet Explorer? Então, aquilo lá era uma porcaria e continua sendo, né. .

. e se você rodar um site no Internet Explorer, ele costuma não funcionar de forma correta. Agora quando a gente coloca essa <meta http-equiv.

. . > e põe esse códigozinho aqui ó "X-UA-Compatible".

. . e aí coloca que o conteúdo do "IE=edge" aqui, ele vai pegar sempre pelo.

. . pela versão mais atual do.

. . navegador da Microsoft.

. . então vai rodar o teu site sem ele entrar num modo de compatibilidade estranha que tem.

. . o seu site ia ficar todo embaralhado.

. . então, resumindo essa meta tag que já vem aqui por padrão, ela serve para determinar que o seu site vai ser compatível com o.

. . Internet Explorer, tá.

. . com versões do navegador mais antigo.

Já essa outra meta tag que vem aqui que é "viewport", tá vendo? . .

. que fala assim content="width=device-width, initial-scale=1. 0" .

. . o quê que é essa meta tag aqui?

. . .

"viewport" quer dizer a área visível do usuário na página, né. . .

então, por exemplo, isso aqui seria o viewport. . .

área visível aqui da tela, do seu usuário. Quando a gente coloca essa meta tag, a gente está dizendo que a tela, ela vai se adaptar ao dispositivo da pessoa. Dessa forma, se a pessoa estiver no celular ou numa tela de computador os elementos eles vão poder ter uma certa adaptação à tela, vai poder ter um dimensionamento de acordo com o dispositivo e isso aí vai ficar numa escala de 1.

0 . . .

quer dizer a escala para aquele dispositivo. . .

a primeira. . .

escala convencional, né? . .

. define que o zoom vai ser carregado de forma adequada. Então essa meta tag aqui, pessoal.

. . ela é importante para a gente não ficar com um site esquisito, por exemplo em dispositivos móveis.

Claro, que a gente precisa colocar CSS. . .

a gente vai prender mais para frente como o nosso site vai se adaptar à telas de celulares, tablets. . .

não é só colocar essa meta tag já tá tudo certo, ele já vai se adaptar. . .

mas essa meta tag ela é importante para que o site. . .

ele fique com o formatinho certo para o celular. . .

senão ele vai. . .

não sei se já aconteceu com vocês? . .

. você entrar num site e parecer que ele tá rodando versão para computador no celular. .

. fica com umas coisas bem minúscula, assim. .

. você quase não consegue arrastar no celular aquele tipo site. .

. isso acontece porque não tem essa meta tag colocada aqui, certo pessoal? E uma série de outros fatores que a gente ainda vai ver mais para frente, ok?

Então só para explicar o quê são essas três meta tags que vem por padrão. . .

como ela já vem por padrão aqui no nosso HTML5 que a gente coloca, né. . .

se eu colocar aqui HTML5 ele já vai colocar essas meta tags de padrão. . .

é só para você entender como elas funcionam. . .

aqui lembrando sempre colocar "pt-br", né. . .

aqui na parte do idioma. Mas tem outras meta tags, pessoal, que a gente utiliza muito e que não vieram aqui por padrão. .

. e que a gente pode utilizar. Uma meta tag que a gente usa bastante e é uma meta tag importante.

. . é a meta tag.

. . a gente põe assim <meta name="description" O quê será que quer dizer isso.

. . "description"?

. . .

É DESCRIÇÃO. . então a gente coloca aqui content=.

. . qual que é o conteúdo " ".

. . e aí a gente fala qual é o objetivo desse site.

. . é como se fosse, assim, uma sinopse, né?

. . .

então eu poderia colocar "Esse é o meu primeiro site! ". Por quê essa meta tag aqui.

. . ela é importante?

Porque ela é uma descrição do site. Quando você coloca essa meta tag. .

. quando você envia o link do teu site para outra pessoa. .

. você já viu que fica uma pequena descriçãozinha. .

. do que é aquele site embaixo. .

. tem um título que vai aparecer aqui, que a gente coloca, por exemplo, "Meu Primeiro site! " .

. . Ficaria assim o título aparecendo se você mandasse pelo WhatsApp.

. . e o que você coloca nessa meta tag aqui "description" é o que aparece embaixo.

. . uma pequena sinopse.

. . "Este é o meu primeiro site!

" . . .

aparecia aquela legendinha embaixo. . .

do quê é esse site. . .

para quê é esse site. . .

que é uma descrição da sua página. Então você pode fazer uma descrição aqui nessa parte. .

. Não é interessante você fazer uma descrição muito grande. .

. até porque não vai aparecer tudo isso. .

. eu não me lembro agora, de cabeça, quantos caracteres. .

. o Google leva em consideração. .

. o que aparece na hora de você mandar o link. .

. mas uma coisa assim que seja uma, ou duas frases, está muito bom. Então essa aqui é uma meta tag que a gente usa bastante a meta tag "description".

Outra meta tag importante. . .

ela tem o name aqui. . .

a propriedade name que é. . .

"keywords". . .

assim "keywords". O quê quer dizer keywords? Quer dizer palavras-chave então eu vou colocar aqui o content.

. . pode ver que é sempre o mesmo padrão.

. . e a gente coloca o name.

. . o atributo name.

. . para dizer que tipo de meta é.

. . então essa aqui é "keywords" que é palavra-chave.

E aqui você vai colocar palavras-chaves relacionadas ao conteúdo do seu site. Essas palavras-chaves elas dão uma ideia para os mecanismos de pesquisa, por exemplo: Google, Bing. .

. os lugares onde as pessoas vão pesquisar sobre o quê o teu site é. .

. então eu poderia colocar assim, por exemplo, se o seu site fosse. .

. ah. .

. que nem eu tenho um curso de aplicativos. .

. poderia ser assim: curso aplicativos, aplicativos, app. .

. Você poderia colocar coisas que são termos talvez até de pesquisa das pessoas, para você explicar do que se trata. Então, por exemplo, eu poderia colocar aqui agora.

. . se a gente vai fazer.

. . está falando sobre programação, né.

. . programação, HTML, CSS, JavaScript.

. . é os temas que o seu site aborda de que assunto.

. . é a palavra-chave.

. . para que.

. . o Google.

. . o mecanismo de busca consiga entender do que se trata esse site.

Quanto mais palavras-chaves você conseguir colocar aqui, tendo a ver com o assunto que você realmente aborda no site, isso vai dar uma auxiliada para que seu site seja bem "rankeado" no Google, certo? Hoje em dia essa meta tag, ela não é tão importante assim, como era uma vez no passado. No passado se você colocasse essa meta tag aqui.

. . colocasse os termos que eram realmente buscados, isso fazia muita diferença nos navegadores.

Hoje em dia, o Google. . .

principalmente que é o mecanismo de busca mais usado no mundo . . .

ele tá usando Inteligência Artificial e ele tem um algoritmo muito inteligente. Então ele consegue varrer o teu site e entender qual é o conteúdo, do que se trata, o que são até as imagens que você tem lá no teu site. .

. do quê você está falando, se o seu conteúdo é bom, se é ruim. .

. e uma série de fatores que vai te rankear bem. Então às vezes se você colocar aqui palavras-chaves mas que não tem, realmente, a ver com conteúdo que você têm em texto dentro do teu site.

. . não vai fazer grande diferença isso daí, tá bom?

. . .

mas é uma meta tag bem importante. . .

nessa aula nós estamos aprendendo sobre as meta tags. . .

essa é a meta tag "keywords" ou palavras-chave. Lembrando pessoal, que toda a meta tag, tudo que tá aqui dentro do <head> . .

. não vai aparecer para o usuário, tá. .

. isso só vai aparecer para o navegador que vai estar lendo. Isso se chama meta tags, metadados.

. . que é só o navegador que compreende.

Outra bem importante, essa meta tem o name "author" com th. . .

assim author. . .

que é para dizer de quem é esse site. Então. .

. eu poderia colocar autor Dimitri Teixeira. Isso aqui é interessante vocês colocarem, pessoal.

. . porque conforme você vai tendo vários sites na internet, o Google, vai te conhecendo como autor e se você tem um site bem rankeado.

. . ele verifica que, o autor é aquela mesma pessoa que ele já tem registrado, isso pode até aumentar.

. . vamos dizer assim.

. . a tua pontuação no mecanismo de busca porque ele conhece você como autor daquele site, entendeu?

A sequência que você fez de sites na internet. Então é interessante você colocar o autor. .

. até porque também é como se fosse uma assinatura para dizer quem que fez aquela página, né? e tudo mais.

. . beleza?

Então essas são as principais meta tags que a gente trabalha. As três que já vem por padrão aqui no VS Code e essas três aqui, seriam essenciais você colocar também. Que é a "description" - que é uma pequena descrição do seu site.

A "keywords" - para você colocar as palavras-chave. E "author" - para dizer quem é o autor, beleza? Ok, agora nós vamos, pessoal, conhecer aos poucos as tags que a gente utiliza aqui no HTML.

Já nessa aula nós vamos aprender algumas tags importantes relacionados ao cabeçalho e também a parágrafo. . .

quer dizer a partir de texto, né. Então aqui, as tags de cabeçalho. .

. elas são tags que são referentes à títulos. Eu vou mostrar aqui para vocês.

. . eu vou deixar aqui ó.

. . deixa eu só organizar.

. . então vou dar tecla WINDOWS+"tracinho" para o lado.

. . e esse aqui.

. . WINDOWS+"tracinho" para o lado.

. . onde é que foi parar?

Eu acho que foi para o meu outro monitor aqui. . espera aí pessoal.

. . deixa eu puxar isso aqui para cá.

. . é eu fiz uma bagunça aqui.

. . deixa eu ver esse aqui WINDOWS+"teclinha" para o lado.

. . isso eu vou deixar essa daqui.

. . beleza.

Então aqui eu tenho site, aqui tem a codificação. . .

deixa eu diminuir aqui esse site assim. . .

beleza. . .

e vou dar um ALT+Z aqui para ficar tudo. . .

no tamanho desse quadrado aqui dessa tela. . .

a gente viu isso a aula passada. Então a gente vai começar a aprender agora algumas tags. As tags de cabeçalho, pessoal, são tags de título.

Elas começam com a letra "h" que quer dizer head. . .

de cabeçalho. . .

header né. . .

e começa no 1 e vai até o 6. . .

então eu vou falar assim. . .

"Título 1" . . .

apareceu aqui o título. . .

e isso aqui vai até o número 6. . .

então eu poderia fazer assim ó. . .

Olha só. . .

o que acontece. . .

esses títulos eles vão do mais importante, do maiorzão, para os menos importantes, para sub-itens. Então imagine o seguinte. .

. imagine um livro, né? O livro vai ter o capítulo, que a parte mais importante.

Depois, dentro do capítulo, talvez vão ter subtítulos. . .

que é o segundo item mais importante. . .

dentro daquele subtítulo talvez tenha uma lista de itens ainda menores. . .

e assim por diante. . .

até que você chega no menor tamanho que é o título 6, tá. . .

isso é ordem de relevância dentro do texto que você está colocando aqui no teu HTML. Nós nunca. .

. presta atenção aqui no que eu vou te falar. .

. NUNCA, JAMAIS. .

. usamos títulos por causa do tamanho da letra nem para ficar mais escuro como se fosse negrito. Títulos não servem para isso.

Títulos servem para mostrar para o navegador qual a importância do texto eu estou fazendo. Então essa é a importância do título, porque o tamanho da letra ou se vai ser em negrito. .

. a gente usa outras tags para fazer isso. Não o título aqui, né?

Então só para ter um exemplo vou fazer assim ó. . .

"Aula de HTML", certo? Esse é o meu título principal. .

. então eu poderia colocar aqui ó. .

. a próxima tag que nós vamos aprender, que a gente usa muito para texto, que é a tag <p>. .

. que é de parágrafo. .

. então na tag <p> eu posso colocar assim: "Nesta aula vamos aprender um pouco sobre HTML". Até uma coisa interessante, que eu quero mostrar para vocês aqui, um recurso, pessoal.

. . para quando vocês querem preencher com o texto aleatório aqui.

. . só para vocês terem um conteúdo.

. . <p>Lorem.

. . espera aí que eu não me lembro como é.

. . isso.

. . então para você colocar um texto, você coloca a tag <p> que é de parágrafo.

. . faz o sinal de maior > como se fosse uma flechinha.

. . e escreve "Lorem".

. . e você dá ENTER .

. . vai fazer um texto de "Lorem ipsum dolor" que é um texto em latim que é um padrão de texto aleatório, certo?

. . .

e aí olha só o que acontece. . .

Aula de HTML "Nessa aula vamos aprender um pouco sobre html" vou pôr um ponto aqui. . .

e fiz um outro parágrafo. Repare que eu coloquei dois parágrafos aqui. .

. eu tenho um primeiro parágrafo e um segundo parágrafo. Esse é o meu título principal, é o meu <h1>, certo.

. . e aqui eu coloquei um pouco de conteúdo.

Agora no <h2> eu poderia colocar assim: "O que são no TAGS? ". .

. isso daqui já seria um subtítulo do meu ponto aqui sobre aula de HTML. Então esse é o ponto principal.

. . Aula de HTML.

. . esse é um subtítulo.

. . O que são TAGS?

. . .

aí eu poderia colocar aqui <p>Lorem. . .

só para a gente ter um conteúdo. . .

dou um ENTER. . .

botei um parágrafo aqui, certo? . .

. e aí eu poderia colocar assim ó. .

. uma primeira tag. .

. h1. .

. vamos fazer assim ó "H1 até H6 - Cabeçalho". .

. já é um sub-item desse do que são tags. .

. está entendendo a ideia? Então eu vou fazendo uma hierarquia aqui de conteúdo na minha página, certo?

Isso é importante para o Google entender do que se trata o teu conteúdo. . .

e se você colocar mais de um <h1>, vai dar problema. Sempre no nosso site a gente deve ter apenas uma tag do tipo <h1>, um título principal. Todo o restante é subtítulo.

. . todo o restante deve ser usado o <h2>.

. . tá pessoal.

. . nunca se usa mais de um <h1> numa página.

. . isso confunde os mecanismos de busca você deve sempre usar o H1 para título principal e, o que você tiver de subtítulo, usar sempre o H2.

E os outros você pode ir usando também, conforme você for tendo subtítulos cada vez menores. . .

é muito difícil a gente usar do H4 até o H6, mas pode acontecer, certo. . .

mas você sempre usa o H1 e o H2 bastante. O H3, às vezes, também. .

. do H4 até o H6 é mais difícil a gente usar, beleza. Ainda um outro detalhe sobre a tag <p> de parágrafo.

. . é que essa tag ela independe dos espaços que você dá.

. . se eu pegar aqui e dar um monte de espaço aqui ó.

. . tem um monte de espaço, está vendo?

Dou um CTRL+S para salvar. . .

olha lá. . .

não aconteceu nada, está vendo? . .

. porque ele não pega esses espaços, assim. .

. então os parágrafos, conforme você colocar uma tag <p> ele vai fazer um parágrafo. .

. então por exemplo, assim ó, se eu quisesse que nessa parte aqui ó. .

. que faz "earum! " aqui.

. . isso aqui estivesse num outro parágrafo.

. . o que eu faria?

Eu viria aqui ó. . .

"earum" aqui. . .

vou colocar um <p> aqui. . .

ele já fez o fechamento do <p> e colocaria o fechamento lá no final. . .

é que daí eu teria que fechar aqui, ó, antes desse <p> para fechar esse <p> aqui, com esse </p> aqui. . .

então esse aqui seria um parágrafo. . .

e esse daqui seria outro parágrafo. . .

olha só o que acontece. . .

beleza! . .

. ele já ficou em outro parágrafo. A gente vai ver ainda mais para frente, na próxima aula, mais detalhada a questão de formatação de texto.

A gente vai ver quebra de linha, negrito e tudo mais. . .

mas é só para você já conhecer essas primeiras tags. Então, o quê a gente aprendeu nessa aula, pessoal? Nós aprendemos.

. . deixa eu fechar essa nossa tela aqui.

. . deixa eu maximizar de novo.

. . parar aqui o meu live-server.

. . Nós aprendemos aqui as meta tags, principalmente essas três aqui que não vem pelo padrão.

. . nós aprendemos também a colocar a língua aqui.

. . que é "pt-br".

. . que é português do Brasil.

. . a descrição.

. . palavra-chave e autor.

. . e nós aprendemos também aqui as questões de títulos, tá?

. . .

nós temos do <h1> até o <h6>. Aprendemos que a gente usa só uma vez o <h1> e depois a gente pode usar sempre <h2>. .

. mas sempre um <h1> só na página. .

. isso vai atrapalhar o SEO chamado. .

. que é o Search Engine Optimization. .

. que é a capacidade do Google ler o teu site e colocar ele lá nas pesquisas do Google para as pessoas encontrarem, certo? Nós aprendemos também a tag <p> que é a tag de parágrafo.

Então quando a gente coloca um conteúdo dentro de tags <p> ele forma um parágrafo, né? Nós vimos também que dá até para preencher um texto aleatório aqui colocando "p>lorem". .

. dá um ENTER e ele já coloca um texto aleatório aqui, só para ter um conteúdo, certo? Se eu precisasse ter três parágrafos tem também um outro truque aqui do VS Code.

. . se eu não me engano é assim.

. . "p*3".

. . eu dou um ENTER.

. . olha lá.

. . ele fez três tags <p>, tá vendo?

. . .

se eu ponho assim "p>lorem*3". . .

o símbolo aqui de multiplicação. . .

olha só o que ele fez. . .

ele fez uns. . .

deixa eu ver. . .

ele colocou os spans aqui. . .

ele pôs uns spans não deu muito certo a minha ideia aqui, né. . .

mas enfim tem alguns macetes assim que conforme a gente for fazendo, a gente vai mostrando aqui como é que dá para fazer para multiplicar tags. . .

tem uns. . .

como se fosse uns atalhos assim que facilitam bastante na hora de você estar fazendo. . .

então <h1> <h2> . . .

aí temos H 3, 4, 5 e 6 e as tags de parágrafo. A próxima aula nós vamos ver um pouco como formatar esse texto aqui, com algumas tags de formatação de texto. Eu 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 deste curso. Se inscreve no canal se não for inscrito. .

. e até a próxima aula. Valeu!