< body > tag - O que é, para que serve e como usar a < body >

Tutorial de HTML
Webmasters entenderão
Para finalizar os estudos básicos de nosso curso de HTML, vamos apresentar a tag <body>, que junto com a tag <html> e a <head> formam a tríade de tags mais importantes e essenciais de qualquer site feito em HTML.

Ao final deste tutorial de HTML, você fará um site completo, embora simples, pois já irá dominar as principais estruturas básicas de qualquer página na Internet. Como irá entender como um site é feito, como funciona e já terá criado um 'na unha', já poderá se considerar um Webmaster :)



A tag body - O corpo de um site

Vamos relacionar um site a um livro.

A tag <html> seria a capa do livro (tanto a parte da frente, como a de trás).
Elas definem o livro, onde começa e onde termina.

Já a tag <head> seria o sumário, informações e dedicatória do autor.
É onde se encontra as informações do livro. Quem não conhece o livro, vai ler lá seu resumo.
Bem como os Bibliotecários usariam estas informações sobre o livro para decidir sua categoria, assim como o Google vai usar as informações das meta tags keyword e description para rankear seu site em seus resultados de buscas.

Pronto, capa, contracapa e informações do livro.
O que mais está faltando?

O principal, ué: o conteúdo.
E é aí que entra a tag <body>.
Tudo o que vemos em um site, estará dentro da tag body. Como o próprio nome sugere, a tag body é que vai definir o corpo de um site. Lá é que estarão as informações visíveis para o usuário.

Tudo que você está lendo nesse momento, os links e imagens que estão vendo, estão dentro da tag <body>.
Se <html> e <html> serviam para que nós, webmasters, nos comunicássemos com os navegadores (Firefox, Internet Explorer, Google Chrome etc) e com os buscadores, através da tag < body > é que vamos nos comunicar com os leitores de nossos sites.

Como usar e onde colocar a tag <body>

A tag body está aninhada (dentro) da tag <html>, e está no mesmo nível da tag <head>.
E assim como estas, possui tag de abertura e fechamento:
<body> e </body>

Se antes, escrevíamos o texto que iria aparecer para o usuário em qualquer lugar, agora devemos escrever ele dentro da tag body. Então, é com muito prazer e orgulho que apresento para você o código HTML de um site completo, correto e bem estruturado, se aprender isso, já saberá mais que muitos donos de sites por aí :)
<!DOCTYPE html>
 
<html>
 <head>
  <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
  <meta name="description" content="Como criar um site completo, com as tags <!DOCTYPE>, <html>, <head> e <body>">
 </head>
 
 <body> Este é meu primeiro código de completo de um site! O primeiro de muitos! </body>
 
</html>

Exercício de HTML:

Crie um site completo, com todas as tags principais, incluindo as meta tags description e keyword.
Idente seu código, e seu tema será sobre seu seriado favorito.
Seu site deverá conter um link para o site oficial do seu seriado.

Quais as funções da tag body ?

Ok, já sabemos que a tag body serve para o conteúdo.
Mas o que vem a ser conteúdo?

Quando pensamos em conteúdo, nos surge a mente textos, informações escritas.
Sim, com certeza os textos são o tipo mais abundante de conteúdo existente na internet, mas conteúdo não se limita somente a isso, a letras.

Imagens, vídeos, animações e qualquer coisa que o usuário possa a ter contato, é conteúdo.
Se muita coisa pode ser considerada conteúdo, muitas são as utilidades da tag <body> então, é por esse motivo que ela é uma tag tão importante e considerada básica/essencial para qualquer site da internet.

Ao longo de nosso curso online e grátis de HTML, vamos aprender a usar tudo que a tag body tem a nos oferecer, como:

  • Manipulação de textos: através da body, podemos definir a cor de um texto, por exemplo.
  • Fundo de um site: na tag <body> podemos escolher uma figura de fundo para a página de um site, ou mesmo definir apenas uma cor para o background, que é o que iremos fazer no próximo artigo de nosso curso de HTML
  • Links - já reparou que os links tem cor? Já reparou que as vezes eles são de uma, mas ao serem clicados, mudam de cor? Você até já sabe se visitou um site ou não pela cor do link. Pois é, iremos aprender a fazer isso, através da body.

3 comentários:

Douglas Klann disse...

Galera!

No trecho... "Já a tag (body) seria o sumário, informações e dedicatória do autor.
É onde se encontra as informações do livro. Quem não conhece o livro, vai ler lá seu resumo."

Ele quis dizer "Já a tag (head) seria..."

Apostila HTML Progressivo disse...

Douglas, agradecemos a errata!

Quem ver mais alguma coisa errada, vamos contribuir para termos uma fonte de consulta bem completa, é quase impossível fazer dezenas de tutoriais e não ter alguns erros ;)

Supergirl Planet disse...

Não acho estas tags no meu blog