Logo

HTML Básico

  1. Estrutura
  2. Texto
  3. Listas
  4. Links
  5. Imagens

  1. Estrutura

    1. Especificação da versão de HTML utilizada no documento (Data Type Document):
      • HTML 4.01 Strict DTD pode conter todos os elementos e atributos que não foram marcados como desaconselhados (deprecated): 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
      • HTML 4.01 Transitional DTD pode conter todos os elementos e atributos do Strict DTD inclusive aqueles que são desaconselhados (a maioria destes atributos têm a ver com a apresentação visual): 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
      • HTML 4.01 Frameset DTD difere do Transitional DTD por permitir a utilização de frames: 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
    2. O elemento HTML:
      A seguir à definição do tipo de documento, todo o resto do documento é englobado pela etiqueta (tag) HTML: 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...o cabeçalho e o corpo do documento ...
</HTML>
    3. A cabeça do documento:
      A cabeça contém informação sobre o documento como o título, o autor, palavras-chave que serão utilizadas por motores de busca, etc. A informação contida na cabeça não é geralmente apresentada.
      • O título:
        • Todo o documento html tem que ter um título.
        • O título deve ser uma frase curta mas indentificadora do documento.
        • O título só pode aparecer uma única vez em cada documento. 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>O título do documento.</TITLE>
... outros elementos do cabeçalho...
</HEAD>
<BODY>
... o corpo do documento...
</BODY>
</HTML>
      • Meta-Informação:
        A linguagem HTML permite que os autores coloquem no documento informação sobre o próprio documento, denominada meta-informação. Por exemplo, é possível:
        • indicar o autor do documento 
          <META name="Author" lang="pt" content="Ant&oacute;nio Pereira">
        • indicar palavras-chaves 
          <-- Palavras chave -->
<META name="keywords" lang="pt" 
         content="html, estrutura, tutorial">

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>O título do documento.</TITLE>
<META name="Author" lang="pt" content="Ant&oacute;nio Pereira">
<-- Palavras chave -->
<META name="keywords" lang="pt" 
         content="html, estrutura, tutorial">
... outros elementos do cabeçalho...
</HEAD>
<BODY>
... o corpo do documento...
</BODY>
</HTML>
    4. O corpo do documento:
      1. É no corpo do documento que se encontra o conteúdo (informação) propriamente dita.
        A forma como esse conteúdo é apresentado pode variar consoante os dispositivos e o software que o utilizador está a utilizar para aceder aos documentos.
        Para os browsers gráficos mais comuns, o corpo do documento pode ser encarado como uma "tela" onde se posicionam elementos de texto, cores, figuras, gráficos, etc. No entanto, o mesmo documento pode ser acedido por browsers de texto, em que a informação relativa aos elementos gráficos deve estar presente de outra forma. Podemos pensar ainda que esse conteúdo possa vir a ser processado por um sintetizador de voz, ou mostrado no reduzido visor de um telemóvel.

        As folhas de estilo devem ser utilizadas para tratar da apresentação da informação (aspectos visuais).

        O corpo do documento deve conter o mínimo possível de atributos visuais.

        Mostra-se em seguida um exemplo (a evitar) da utilização de atributos visuais no corpo do documento: 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>HTML básico</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... corpo do documento...
</BODY>
</HTML>
        O mesmo efeito pode ser conseguido utilizando uma folha de estilo incorporada no documento: 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>HTML básico</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... corpo do documento...
</BODY>
</HTML>
        De uma forma mais correcta, é possível ligar o documento a uma folha de estilo externa. Assim, podemos alterar o estilo do documento sem o editar e aplicar o mesmo estilo a vários documentos: 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>HTML básico</TITLE>
 <LINK rel="stylesheet" type="text/css" href="estilos.css">
</HEAD>
<BODY>
  ... corpo do documento...
</BODY>
</HTML>
      2. Os elementos que aparecem no corpo do documento são classificados em:
        • elementos de bloco (block level)- aqueles que podem conter outros elementos de bloco ou elementos em linha. Geralmente cada elemento de bloco tem início numa nova linha do ecrã.
        • elementos em linha (inline) - aqueles que apenas podem conter outros elementos em linha e dados. Geralmente estes elementos não dão origem ao aparecimento de uma nova linha.
      3. Os elementos do corpo do documento podem ser agrupos com dois "contentores" genérios de elementos, que permitem, conjuntamente com as folhas de estilo estruturar o documento e aplicar o layout desejado à informação:
        • DIV - permite agrupar elementos de bloco e elementos em linha. É um elemento de bloco.
        • SPAN - permite agrupar elementos em linha. É um elemento em linha.

  2. Texto

    1. Espaços em branco:
      Em qualquer documento HTML, sequências de espaços, tabulações e mudanças de linha, são tratadas como um único espaço.
      Os espaços, mudanças de linha e tabulações servem apenas para separar as palavras e os vários elementos do documento, não tendo assim qualquer influência na formatação do mesmo.
      O caracter &nbsp; (no breaking space) é muitas vezes utilizado para questões de formatação: essa utilização deve ser evitada!
      A função deste caracter (como o nome indica) é evitar que o browser separe duas palavras. Exemplo: 
      Windows&nbsp;2000
    2. Linhas e parágrafos:

      Para organizar o texto em parágrafos utiliza-se o o elemento P. Exemplo: 

      <P> Este é um parágrafo.</P>
<P> Este é outro parágrafo.</P>
<P> E mais um parágrafo.</P>

      Note que um parágrafo não pode conter elementos de bloco nem outros parágrafos.

      Para se forçar uma mudança de linha dentro de um parágrafo utiliza-se o elemento BR. Exemplo: 

      <P>Esta é a primeira linha de texto.<BR>
Esta é a segunda linha de texto<BR>
Esta é a terceira linha de texto<BR></P>

      Note que o elemento BR não tem a etiqueta de fim.

    3. Os elementos H1, H2, H3, H4, H5, H6:
      Estes elementos permitem descrever o título de uma secção do documento, desde o nível 1 (o mais importante) até ao nível 6 (que corresponde a uma sub-sub-sub-sub-sub-secção).
      Geralmente os browsers apresentam os cabeçalhos mais importantes com um tipo de letra maior que os menos importantes.
      O elemento DIV pode ser utilizado para associar um elemento Hi com cada secção do documento. Assim, é possível definir um estilo diferente para cada secção do documento: 
      <DIV class="section" >
  <H1>Título da secção</H1>
  <P>Nesta secção discutimos ....
  ...esta secção continua...
  <DIV class="subsection">
    <H2>Título da sub-secção</H2>
    <P>Nesta sub-secção ...
    ...esta sub-secção continua...
  </DIV>
</DIV>
    4. Elementos de estruturação de texto:
      • O elemento PRE permite escrever texto pré-formatado. Neste caso os espaços em branco, tabulações e mudanças de linha são respeitados. Exemplo:
        <PRE>
program ola;
var i:integer;
begin
for i:=1 to 100
do  begin
      writeln('olá');
      writeln('E viva o mundo!');
    end
end.  
</PRE>

      • EM: Este elemento dá ênfase ao texto.

        STRONG:Este elemento dá uma ênfase maior ao texto que o elemento EM.

        CITE: Contém uma referência.

        Exemplos: 
        <P>Nesta frase é dado ênfase na última <EM>palavra</EM><BR>
Nesta frase a última palavra ainda tem mais <STRONG>ênfase</STRONG></P>
      • O elemento BLOCKQUOTE utiliza-se para fazer citações longas de texto.
        O elemento Q serve para fazer pequenas citações numa linha.
        Exemplos: 
        <BLOCKQUOTE cite="http://www.twainquotes.com/Mathematics.html">
<P>We could use up two Eternities in learning all that 
is to be learned about our own world and the thousands of nations 
that have arisen and flourished and vanished from it.<>br> 
Mathematics alone would occupy me eight million years.
</P>
</BLOCKQUOTE>
<P>A Maria diz, <Q>Vi a Joana ao jantar, ela disse
<Q>Preciso de falar urgentemente com o Paulo.</Q> Acho que lhe vou telefonar.</Q>
</P>
        NOTA: O elemento BLOCKQUOTE não deve ser utilizado para fazer identação de blocos de texto.
      • Indices(SUB) e Expoentes(SUP) - servem para levantar ou baixar o texto numa linha.
        Exemplos: 
        <P>4<sup>2</sup> = 16<BR>
x<sub>1</sub> + x<sub>2</sub> = 0</P>

  3. Listas

    A linguagem HTML permite utilizar três tipos de listas: Por exemplo, a lista anterior é uma lista sem ordem (UL) e foi criada da seguinte forma: 
    <UL>
<LI>Listas sem ordem</LI>
<LI>Listas numeradas</LI>
<LI>Listas de definições</LI>
</UL>
    Um exemplo da utilização de uma lista ordenada (OL) é o seguinte: 
    <OL>
<LI>O primeiro item.</LI>
<LI>O segundo item.</LI>
<LI>O terceiro item.</LI>
</OL>
    O resultado do exemplo anterior é:
    1. O primeiro item.
    2. O segundo item.
    3. O terceiro item.
    Quanto às listas de definições (DL), estas são constituídas por sequências de pares da forma (termo , definição). Exemplo: 
    <DL>
<DT>Triângulo</DT><DD>Tem três lados.</DD>
<DT>Quadrado</DT><DD>Tem quatro lados.</DD>
<DT>Hexágono</DT><DD>Tem seis lados.</DD>
</DL>
    Este exemplo produz o seguinte resultado:
    Triângulo
    Tem três lados.
    Quadrado
    Tem quatro lados.
    Hexágono
    Tem seis lados.

  4. Links

    O que realmente diferencia a linguagem HTML de outras linguagens (como o TeX) é o poder de estabelecer ligações para outros documentos.
    Estas ligações (links) são definidas com o elemento A. Por exemplo, para definir um link para o ficheiro "aveiro.htm", existente no mesmo directório do documento actual, basta escrever: 
    Este é um link para <A href="aveiro.htm">a página de Aveiro</A>
    Para estabelecer um link para um documento num outro lugar da Web é necessário escrever o endereço completo. Por exemplo: 
    Este é um link para o site do 
   <A href="http://www.w3.org/">World Wide Web Consortium</A>
    Para estabelecer um link para um outro ponto do mesmo documento, é necessário primeiro que tudo identificar esse ponto, com o atributo "name". Por exemplo, para identificar a secção "Introdução ao HTML" fazemos: 
    <H1><A name="int_html">Introdução ao HTML<A></H2>
    O atributo "name" identifica unicamente a secção do documento e é possível criar um link para ela em qualquer outra zona do documento (ou mesmo em outro documento). Por exemplo: 
    Vamos seguir para a secção <A href="int_html">Introdução ao HTML</A>

  5. Imagens

    As imagens podem ser usadas para suscitar o interesse por uma página.
    Note-se no entanto que à máxima "uma imagem vale por mil palavras" se pode contrapôr: "mil imagens podem não valer uma única palavra".
    Vamos supôr que "foto_ferias.jpg" é uma imagem com 200×300 pixels existente no mesmo directório que o documento. Para inserir a imagem usa-se o elemento IMG: 
    <IMG src="foto_ferias.jpg" width="200" height="300" 
   alt="Foto das férias nos Açores">
    Notas: