HTML: Tags HTML, Head e Body

Definição da estrutura básica de um documento HTML e os Padrões web para as tags HTML, Head e Body que compõe a estrutura principal de uma página web.

Home Tecnologia

HTML – Hipertext Markup Language – Linguagem de Marcação de Hipertexto, foi inventada em 1990 pelo cientista Tim Berners-Lee. É uma linguagem de marcação de texto para ser interpretada pelos navegadores. Sua principal finalidade é fazer a estruturação das  páginas através de um conjunto de tags (etiquetas) que servem para definir a forma na qual se apresentará o texto e outros elementos da página.

O HTML pode ser interpretado por diversos dispositivos, como: desktop, celular, tablets, entre outros, desde que exista uma navegador capaz de ler e interpretar o código. Com isto ganha-se em acessibilidade.

Um website é composto por diversas páginas web ou documentos web como também são chamados e cada uma dessas páginas é escrita em uma linguagem própria que é o HTML.

Apesar de uma página ser um documento complexo e geralmente extenso, todos devem compartilhar de uma mesma estrutura básica e relativamente simples, composto por apenas três tags ou marcações, como também é conhecida. Assim, as tags <html>, <head> e <body> são essenciais a qualquer tipo de página e é a partir delas que inicia-se a construção de qualquer site.

Programação em HTML

Estrutura básica de um documento

<!DOCTYPE html> 

<html lang="en">

<head>

<title>Título da página </title>

</head>

<body>

</body>

</html>

A estrutura acima indica que que cada documento HTML precisa obrigatoriamente ter:

  • doctype – tipo do documento
  • <html> – tag principal, ela marca o início e o final do documento.
  • <head> – tag usada para delimitar o cabeçalho do documento. Dentro dela outras tags de cabeçalho serão usadas, como o title, meta, link, entre outros.
  • <title> – tag usada para indicar o título do documento.
  • <body> – tag usada para definir o corpo do documento. Dentro dela serão colocadas as tags que irão compor a nossa página

Tag HTML

A tag html faz parte da estrutura básica do documento, esta tag deve ser colocada no início do código do documento e é usada para indicar ao navegador que se trata de um documento HTML, já que os navegadores poderão ler outros tipos de documentos.

Assim como as demais tags, o <html> possui uma tag de fechamento </html> que deverá ser a última tag do seu documento, indicando assim que encerra ali o HTML. Veja abaixo um exemplo do uso desta tag.

<html lang="en">

<head>    

<title>Tag html</title>

</head>

<body>    

<!-- Aqui será colocado as demais tag do documento -->

</body>

</html>

Atributos

A tag html suporta o atributo xmlns, que é usado para definir o namespace XML do documento. Este namespace é na verdade um endereço válido de onde contém o documento XML do W3C. Veja um exemplo:

<html lang=”en”>

  • html é a tag
  • lang é o atributo
  • en é o valor do atributo.

Tag head

A tag head faz parte da estrutura básica do documento, sua finalidade é definir o cabeçalho do documento com informações que não serão exibidas dentro do conteúdo da página.

A tag <head> possui fechamento </head> e poderá suportar as tags <base>, <link>, <meta>, <script>, <style> e <title> dentro da sua estrutura., como no exemplo seguinte:

<html lang="en">

<head>    

<title>...conteúdo de title...</title>    

<base ...conteúdo de base... />    

<link ...conteúdo de link... />    

<script>...conteúdo de script...</script>    

<style>...conteúdo de style...</style>    

<meta ...conteúdo de meta... />

</head>

<body>    

<!-- Aqui será colocado as demais tag do documento -->

</body>

</html>

Tag body

A tag body faz parte da estrutura básica do documento, sua finalidade é definir o corpo do documento, ou seja, tudo que estiver dentro da tag body será mostrado de alguma forma no conteúdo da página.

A tag <body> possui fechamento </body> e na sua estrutura deverá ficar todas as demais tags, exceto as tags de cabeçalho visto no post da tag <head>.

Atributos

A tag body possui os atributos: alink, link, text, vlink, bgcolor e background, porém, estes atributos estão depreciados e devem ser substituidos pelas propriedades do CSS.

A tabela abaixo mostra como fazer a conversão destes atributos para as propriedades do CSS

  • alink – a:hover – Especifica a cor dos links ativos, ou seja, quando passar o mouse sobre eles.
  • link – a – Especifica o comportamento padrão dos links
  • vlink – a:visited – Especifica o comportamento dos links visitados
  • text – color – Especifica a cor padrão para textos
  • bgcolor – background-color – Especifica a cor de fundo da página
  • background – background-image – Especifica uma imagem de fundo da página

Eventos suportados pela tag body: onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown e onkeyup.

Gostou? Compartilhe



 

Leia também:



© 2008-2018 | Professor Digital | Política de Privacidade | Em Jesus Cristo eu confio