Faculdade de Medicina - UFRGS
Informática em Saúde

HTML: Básicos
Professor Paul Fisher
Última atualização: 2007-08-10 (PDF)

Etiquetas (Tags) :: A Página Básica :: Formatação da Página :: Formatação do Texto
Links :: Tabelas :: Listas :: Imagens :: Faixas Decorativas :: Frames
Códigos Hexidecimal de Cor :: Códigos para Símbolos Especiais


O elemento básico do HTML (HyperText Markup Language) chama-se "Tag" (ou traduzindo-se, "Etiqueta"). As etiquetas normalmente, mas nem sempre, ocorrem em pares: uma para abrir e uma para fechar a função, estilo, estrutura, etc. Quando um arquivo HTML é transferido de um servidor http (um "web site") para um cliente http ou "browser" (navegador, o aplicativo que está sendo utilizado para navegar na Internet: Netscape ou Internet Explorer), as etiquetes são usados pelo browser para formatar a "página" (o arquivo) no seu computador.

A etiqueta (tag) que abre aparece assim: <ETIQUETA>. (Observe que todas as etiquetas possuem os sinais < e >.)

A etiqueta (tag) que fecha aparece assim: </ETIQUETA>. (Todas as etiquetas que fecham possuem o sinal /.)

Por exemplo, o código
Eu comi <I>todas</I> as bolachas ao <B>mesmo</B> tempo
produzirá:
Eu comi todas as bolachas ao mesmo tempo
As etiquetas podem incluir modificadores dentro dos símbolos < e >.

Por exemplo, o código:
<FONT SIZE=+2 COLOR=ff0000>eu comi todas as bolachas ao mesmo tempo</FONT>
produzirá:
eu comi todas as bolachas ao mesmo tempo
As etiquetas também podem ser combinadas, e não é preciso fechar uma antes de começar uma outra.

Por exemplo, o código:
<FONT SIZE=+2 COLOR=ff0000>eu comi <I>todas</I> as bolachas ao <B>mesmo</B> tempo</FONT>
produzirá:
eu comi todas as bolachas ao mesmo tempo

<HTML> o começo do arquivo HTML <HEAD> o começo do cabeçalho da página <TITLE> o começo do título da página o título da página - vai aparecer na barra de título do browser </TITLE> o fim do título da página </HEAD> o fim do cabeçalho da página
<BODY> o começo do corpo da página o corpo da página - o que vai aparecer na tela do browser (a página em si) </BODY> o fim do corpo da página
</HTML> o fim do arquivo HTML


<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">


<!-- comentários que não vão aparecer na tela, só para a manutenção da página pelo programador-->

Alguns símbolos (£ ¥ © ®, entre outros) e letras (letras gregas) que não aparecem no teclado podem ser incluídos no texto que aparece em uma página, pela inclusão de códigos para símbolos.

Etiquetas que não exigem Tag de fechamento

<HR ***>
  • SIZE="altura da linha"
  • WIDTH="largura da linha em pixels ou em % da tela"
  • ALIGN="alinhamento (right/left/center)"
  • COLOR="número hexadecimal da cor da linha"

<BR> quebra de linha

<P> quebra de parágrafo

Etiquetas que exigem Tag de fechamento

<I> texto itálico </I>

<B> texto negrito </B>

<U> texto sublinhado </U>

<CENTER>texto centralizado na tela </CENTER>

<SUP> texto sobrescrito </SUP>

<SUB> texto subscrito </SUB>

<TT> texto com formato "teletype" </TT>

<FONT ***> muda a aparência do texto </FONT>

  • FACE="nome da fonte a ser usada no texto (o cliente HTTP precisa ter acesso à fonte)"
  • SIZE="tamanho absoluto ( 8, 10, 12, etc.) ou relativo (-2, +1, +6, etc.) da fonte a ser usada no texto"
  • COLOR="número hexadecimal da cor a ser usada no texto"

<BLOCKQUOTE> recua o texto das margens </BLOCKQUOTE>

Por exemplo, o código:

<BLOCKQUOTE> Este é um exemplo do comando BLOCKQUOTE. </BLOCKQUOTE>

produzirá:

Este é um exemplo do comando BLOCKQUOTE.

<P ***> formatação de parágrafo </P>

  • ALIGN="alinhamento de texto (right, left, center, justified)"

<DIV> Alinha blocos de texto. Precisa ser usada apenas uma vez, podendo ser usada para alinhar qualquer elemento (parágrafos, tabelas, imagens, etc).

Por exemplo, o código:

<DIV ALIGN="RIGHT">
<P>Comando DIV
<P>Teste do Comando DIV
</DIV>
produzirá:

Comando DIV

Teste do Comando DIV

Cabeçalhos:

Os cabeçalhos são utilizados para a divisão do texto em seções. Eles se destacam do restante do texto, existindo 6 níveis, que são indicados pela Tag <H*>, onde * corresponde ao nível do cabeçalho.  

Por exemplo:

<H1> H1 - Primeiro nível </H1>

<H2> H2 - Segundo nível </H2>

<H3> H3 - Terceiro nível </H3>

<H4> H4 - Quarto nível </H4>

<H5> H5 - Quinto nível </H5>
<H6> H6 - Sexto nível </H6>

Para abrir uma página hospedada no mesmo servidor: <A HREF="caminho/nome do arquivo html"> o que aparece na tela </A>

Para abrir uma página hospedada em um outro servidor: <A HREF="http://nome do servidor/caminho/nome do arquivo html"> o que aparece na tela </A>

Para criar um ponto de referência em um arquivo: <A NAME="nome do ponto"> o que aparece na tela </A>

Para levar o usuário a um ponto de referência no arquivo atual: <A HREF="#nome do ponto"> o que aparece na tela </A>

Para levar o usuário a um ponto de referência em um outro arquivo no mesmo servidor: <A HREF="caminho/nome do arquivo html#nome do ponto"> o que aparece na tela </A>

Para levar o usuário a um ponto de referência em um arquivo em um outro servidor: <A HREF=" http://nome do servidor/caminho/nome do arquivo html#nome do ponto "> o que aparece na tela </A>

Para que o usuário possa enviar um e-mail: <A HREF="mailto:o endereço de e-mail completo"> o que aparece na tela </A>

NOTA: Para que um link abra uma página em uma nova janela, utiliza-se o comando target="_blank". <A HREF="caminho/nome do arquivo html" target="_blank"> o que aparece na tela </A>


Criação de Tabelas

<TABLE> o começo da tabela <TR> o começo da primeira linha <TD> o começo da primeira célula o conteúdo da primeira célula da primeira linha </TD> o fim da primeira célula
<TD> o começo da segunda célula o conteúdo da segunda célula da primeira linha </TD> o fim da segunda célula
</TR> o fim da primeira linha
<TR> o começo da segunda linha <TD> o começo da primeira célula o conteúdo da primeira célula da segunda linha </TD> o fim da primeira célula
<TD> o começo da segunda célula o conteúdo da segunda célula da segunda linha </TD> o fim da segunda célula
</TR> o fim da segunda linha
</TABLE> o fim da tabela

Formatação de Tabelas

<TABLE ***>
  • BORDER="tamanho das margens exteriores"
  • BORDER COLOR="número hexadecimal da cor das margens"
  • CELLPADDING="espaço entre as margens e o conteúdo das células"
  • CELLSPACING=tamanho das margens interiores"
  • WIDTH="largura da tabela em pixels ou em % da tela"
  • ALIGN="alinhamento horizontal do conteúdo da tabela (left/center/right)"
  • VALIGN="alinhamento vertical do conteúdo da tabela (top/center/bottom)"
  • BGCOLOR="número hexadecimal da cor do fundo da tabela"

<TR ***>

  • ALIGN="alinhamento horizontal do conteúdo da linha (left/center/right)"
  • VALIGN="alinhamento vertical do conteúdo da linha (top/center/bottom)"
  • BGCOLOR="número hexadecimal da cor do fundo da linha"

<TD ***>

  • WIDTH="largura da célula em pixels ou em % da tabela"
  • ROWSPAN="altura da célula em linhas"
  • COLSPAN="largura da célula em colunas"
  • ALIGN="alinhamento horizontal do conteudo da célula (left/center/right)"
  • VALIGN="alinhamento vertical do conteudo da célula (top/center/bottom)"
  • BGCOLOR="o número hexadecimal da cor que quer usar para o fundo da célula"


Criação de Listas

Listas ordenadas:
 

<OL> o começo da lista <LI> primeiro item da lista
<LI>
<LI>
<LI>
</OL> o fim da lista

Listas não ordenadas:
 

<UL> o começo da lista <LI> primeiro item da lista
<LI>
<LI>
<LI>
</UL> o fim da lista

Listas de Definições:
 
São utilizadas principalmente em glossários, onde cada termo possui sua respectiva definição.

<DL> o começo da lista <DT> primeiro termo da lista
<DD> definição do primeiro termo da lista
<DT>
<DD>
</DL> o fim da lista

Por exemplo, o código:

<DL> <DT>Tag DL
<DD>Definition List
<DT>Tag DT
<DD>Definition Term
<DT>Tag DD
<DD>Definition Definition
</DL>

Produzirá:

Tag DL
Definition List
Tag DT
Definition Term
Tag DD
Definition Definition

Formatação de Listas

<OL ***> TYPE="1/A/a/I/i"

O atributo START permite a especificação do número ou letra pelos quais se deseja iniciar a lista.
O atributo VALUE redefine a numeração de uma lista.

Por exemplo, o código:

<OL TYPE="1" START=2>

<LI>EXEMPLO 2
<LI>EXEMPLO 3
<LI>EXEMPLO 4
<LI VALUE="12">EXEMPLO 12
<LI VALUE="20">EXEMPLO 20
</OL>

produzirá:

  1. EXEMPLO 2
  2. EXEMPLO 3
  3. EXEMPLO 4
  4. EXEMPLO 12
  5. EXEMPLO 20

<UL ***> TYPE="disc/circle/square"
Para incluir uma imagem a uma página utiliza-se o seguinte comando:

<IMG SRC=" caminho/nome do arquivo gif ou jpg" > ALT="texto a ser mostrado ao se posicionar o cursor sobre a imagem"
WIDTH="largura da imagem em pixels"
HIGHT="alutura da imagem em pixels"

As imagens inseridas como links possuem uma borda em seu redor, para que se possa distingui-las de uma imagem comum. A largura dessa borda pode ser alterada utilizando-se o atributo BORDER, que pode assumir valores absolutos (o valor 0 oculta totalmente a borda).

Por exemplo, o código:

<IMG SRC="imagem.gif" ALT="imagem.gif" WIDTH="50" HIGHT="50">

Produzirá:

imagem.gif

Para tornar essa imagem um link, utiliza-se o seguinte código":

<A HREF="caminho/nome do arquivo html"> <IMG SRC="imagem.gif" ALT="imagem.gif" WIDTH="50" HIGHT="50"></A>

<MARQUEE>

Atributos:
  • ALIGN = alinha a faixa (left/right/middle)
  • BEHAVIOR = define a animação do texto (scroll/slide/alternate)
  • BGCOLOR = cor de fundo do texto
  • DIRECTION = direção do texto (right ou left)
  • HEIGHT e WIDTH = tamanho da faixa em pixels
  • HSPACE e VSPACE = define o tamanho das margens onde a faixa deverá ser posicionada.
  • LOOP = nº de vezes que o texto vai passar (para que o texto passe continuamente, usa-se o valor inifinite)
  • SCROLLAMOUNT = define a velocidade do texto (2 a 5)
  • SCROLLDELAY = define a velocidade entre os intervalos (em torno de 20, normalmente)

* Não funciona no Netscape
Por exemplo, o código:

<MARQUEE ALIGN="middle" BEHAVIOR="scroll" BGCOLOR=CCFFCC DIRECTION="right" HEIGHT="50%" WIDTH="80%" HSPACE=10 VSPACE=10 LOOP="infinite" SCROLLAMOUNT="2" SCROLLDELAY ="20" > Comando MARQUEE</MARQUEE>

Produzirá:

Comando MARQUEE

<BLINK>

Faz com que o texto pisque.

* Não funciona no Internet Explorer
Por exemplo, o código:

<BLINK>Comando BLINK</BLINK>

Produzirá:

Comando BLINK

O uso de frames permite a criação de páginas com um novo aspecto, no qual a janela do browser está "dividida em seções". A seguir, seguem os comando básicos necessários para a criação de uma página utilizando-se frames.

Documento de Definição de Frames:
 
Inicialmente é necessário criar um arquivo HTML que será o documento de definição de frames.

A Tag <FRAMESET> contém a definição de frames (dimensões, bordas, etc.). Substitui a Tag <BODY>.

Por exemplo:

<HTML>
<HEAD>
<TITLE>Título da página</TITLE>
</HEAD>
<FRAMESET> Definição de frames </FRAMESET>
</HTML>

Os atributos COLS e ROWS definem as dimensões dos frames, dividindo a janela vertical e horizontalmente, respectivamente.
Tanto a largura, quanto a altura podem ser especificadas em pixels, na forma de percentual ou com um asterisco (*), que utilizará todo o espaço que sobrou na tela.

<FRAMESET COLS="largura_da_coluna,largura_da_coluna"> ou
<FRAMESET ROWS="altura_da_linha,altura_da_linha">

Por exemplo:

<FRAMESET COLS="20%,80%"> ou
<FRAMESET COLS="20%,*"> (nesse caso, a segunda coluna ocupará automaticamente o espaço restante da tela.)

O Atributo FRAMEBORDER assume os valores 1 (com bordas entre os frames) ou 0 (sem bordas)
O Atributo BORDER especifica o tamanho das bordas.


A Tag <FRAME> associa um documento HTML ao seu respectivo frame. Para cada divisão definida na Tag FRAMESET haverá uma Tag FRAME correspondente. A seguir seguem os atributos da tag FRAME:

SRC: Nome e extensão do arquivo HTML que aparecerá no frame
NAME: Nome do frame. Esse nome será utilizado para se indicar em qual frame determinada página irá aparecer. Para indicar em qual frame um link será aberto, utiliza-se o comando TARGET="nome do frame".
SCROLLING: Incluir barras de rolagem no frame

AUTO (padrão): Só aparecerão barras de rolagem, se o espaço disponível no frame não for suficiente para comportar todo o conteúdo.
NO: Desativa o uso de barras de rolagem, mesmo se o espaço disponível não for suficiente.
YES: Inclui barras de rolagem, independentemente de serem ou não necessárias.
NORESIZE: Fixa as bordas de um frame, impedindo que elas sejam movidas.
MARGINHEIGHT: Ajusta as margens apresentadas acima e abaixo de um frame, indicadas em pixels.
MARGINWIDTH: Ajusta as margens esquerda e direita de um frame, indicadas em pixels.
FRAMEBORDER: Inclui bordas no frame. YES: Com borda.
NO: Sem borda.
BORDERCOLOR: Cor da borda.
O Tag <NOFRAME> serve para apresentar informações em navegadores mais antigos, que não oferecem suporte para frames, evitando a apresentação de uma página em branco, e fazendo com que a página funcione bem nos dois tipos de navegadores (com e sem suporte para frames). A Tag NOFRAME fica depois de todos os comandos dentro da Tag FRAMESET.

Por exemplo:

<HTML>
<HEAD>
   <TITLE>Título da página</TITLE>
</HEAD>
<FRAMESET>
   Definição de frames
</FRAMESET>
<NOFRAME>
   Essa será a página apresentada em navergadores sem suporte para frames.
   Pode-se usar quaisquer tags.
</NOFRAME>