sábado, 25 de setembro de 2010

4. Estrutura básica de um documento

          A estrutura de um documento HTML apresenta os seguintes componentes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="pt">
   <head>
      <title>Título do Documento</title>
   </head>
   <body>
      texto,
      imagem,
      links,
      ...
   </body>
</html>
          As etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.
          As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:
  • <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
  • <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
  • <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

Cabeçalho

          Dentro do cabeçalho podemos encontrar os seguintes comandos:
  • <title>: define o título da página, que é exibido na barra de título dos navegadores.
  • <style>: define formatação em CSS.
  • <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript.
  • <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc.
  • <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento. Para o sistema Google, comandos meta como keywords por exemplo não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada.
         Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

Corpo

          Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
  • <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra)
  • <p>: novo parágrafo.
  • <br>: quebra de linha.
  • <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.)
  • <div>: determina uma divisão na página a qual pode possuir variadas formatações.
  • <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto.
  • <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
  • <img>: imagem.
  • <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.
  • <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos.
  • <acronym>: acrônimo (sigla)
  • <cite>: citação
  • <address>: endereço

Hiperligações

Uma propriedade importante dos documentos HTML é a possibilidade de fazer hiperligações. Para isso usa-se a etiqueta <a> (do inglês, anchor). Esta tem os atributos: href que define o alvo da hiperligação (que pode ser uma página de Internet, uma parte da mesma página ou um endereço de email) ou name que define um alvo nessa página (a onde se pode fazer uma hiperligação usando a etiqueta a com o atributo href). Exemplos:
  • <a href="ht­tp://pt.wikipedia.org/">Clique aqui para aceder à página principal da Wikipédia em português.</a>
  • <a name="nome">texto</a>
Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a href="#nome"> </a> para hiperligar a este "anchor".

Nenhum comentário:

Postar um comentário