Introdução ao HTML - Os elementos da secção BODY

Introdução ao HTML
Os elementos da secção BODY

Títulos que aparecem no ecrã;

Parágrafos, Quebras de Linha, Texto Pré-formatado, Réguas Horizontais;

Diversos estilos para destaque de caracteres;

Ligações Hipertextuais;

Imagens e Sons;

Listas;

Tabelas;

Sequências de 'escape';

Cores.

| TOPO DA PÁGINA |

Títulos que aparecem no ecrã

Sintaxe: <h? align="?"> ... </h?>
Existem 6 níveis para os títulos - de H1 a H6. A título de exemplo veja-se a sintaxe para para o título de nível 1:

<H1 align="left">Este é o nivel 1</H1>

O resultado é:

Este é o nível 1

| TOPO DA PÁGINA |

Parágrafos, Quebras de Linha, Texto Pré-Formatado, Réguas Horizontais

A etiqueta <P> marca o início de um parágrafo

A etiqueta <BR> provoca uma quebra de linha

A etiqueta <PRE> permite texto pré-formatado

A etiqueta <HR> desenha uma régua horizontal

A sintaxe do 'tag' <P> é a seguinte

Sintaxe: <P align="?"> ... </P>

O valor do atributo 'align' pode ser, neste caso: 'Left', 'Right' e 'Center'.

O 'tag' <BR> provoca uma quebra de linha. Pode incluir o atributo 'Clear' que, por sinal, não funciona em todos os 'browsers'. Por exemplo:

<BR clear="all">

O HTML não funciona    como um processador de texto, podendo a quebra de linha ocorrer em qualquer ponto da janela do 'browser', o que depende exclusivamente da largura da janela ou da largura da célula da tabela (obviamente se tiver sido formatada uma tabela). Na generalidade, os 'Browsers' ignoram quebras de linha, tabulações, espaços a mais, etc.. Utilizando o 'tag' <PRE> ... </PRE>, o 'browser', respeita integralmente a formatação aplicada ao texto.

O 'tag' <HR>, que desenha uma régua horizontal, apresenta a seguinte sintaxe:

Sintaxe: <HR align="?" noshade size="pixels" width="valor ou %">

Os valores para o atributo 'align' são os mesmos que para o atributo do mesmo nome do 'tag' <P>. noshade é um atributo sem valores que determina a inexistência de sombreado. O atributo size refere-se à espessura em 'pixels' da régua e o atributo width ao comprimento da mesma.

| TOPO DA PÁGINA |

Estilos para destaque de caracteres

Os 'tags' que permitem o destaque de caracteres são os seguintes:

Estilos lógicos

<EM>...</EM>

-Para realçar; normalmente aparece em itálico.
Para realçar; normalmente aparece em itálico.

<CITE>...</CITE>

-Para titulos de livros, filmes, ect; normalmente em itálico, mas nem sempre.
A Cidade e as Serras

<CODE>...</CODE>

-Para partes de código de computador; fonte de tamanho fixo.
O ficheiro <stdio.h>

<KBD>...</KBD>

-Para entrada de dados através do teclado; fonte de tamanho fixo.
Insira a password para mudar a password.

<STRONG>...</STRONG>

-Para pôr palavras em destaque, normalmente em negrito.
Destaque

Estilos físicos

<B> ... </B>
Negrito

<I>...</I>
Itálico

<TT>...</TT>
Texto do tipo Máquina de Escrever.

| TOPO DA PÁGINA |

Ligações Hipertextuais

As ligações hipertextuais ou 'hyperlinks' podem conduzir do documento corrente para as seguintes localizações:

Outra página de HTML;

Outro local dentro da mesma página;

Imagens;

Filmes;

Sons.

No documento corrente, essas ligações aparecem normalmente sublinhadas ou com uma cor mais brilhante.

Syntax: <A href="?"> ... </A> ou
               <A name="?"> ... </A>

Considerando o primeiro caso o HREF pode indicar:

Um URL ('Uniform Resourse Locator') do documento de destino;

Uma referência relativa.

Para definir uma ligação hipertextual usando uma URL temos:

<A href="a URL do documento destino">Texto ou imagem que aparecerá no écran</A>

Concretizando:

<A href="http://www.expresso.pt">Jornal Expresso</A>

permitirá uma ligação à 'home page' do jornal 'O Expresso'.

As referências relativas dizem respeiro a localizações no disco local, nomeadamente e a título de exemplo:

<A href="../inicio.htm">Inicio</A>
<A href="../../indice.htm">Índice</A>

Para ligações hipertextuais dentro do mesmo lexia torna-se necessário:

Referênciar o 'link';
         <A href="#Maisafrente">Mais á frente</A>

Marcar, no lexia, o local de destino (esta marca designa-se habitualmente por 'bookmark');
        <A name="Maisafrente">

As ligações a imagens, filmes e sons podem ser feitas, basicamente indicando o nome do ficheiro de imagem, de video ou de som, ou seja:

<A href="nome do ficheiro"> ... </A>

Este assunto será tratado já a seguir.

| TOPO DA PÁGINA |

Imagens e Sons

Para a inclusão de imagens a sintaxe poderá ser a seguinte:

<IMG src="caminho/nome do ficheiro" align="?" alt="texto alternativo" border="?">

O atributo 'src', que quer dizer 'source', é obrigatório e permite especificar a localização e o nome do ficheiro de imagem que irá ser aberto. O atributo 'align' funciona com diversos valores, com destaque para 'Top', 'Middle', 'Bottom', 'Left' e 'Right' e vai reflectir-se na forma como aparecerá alinhado o texto que estiver junto da imagem. O atributo 'alt' permite a apresentação do texto especificado se, por acaso, o 'browser' não permitir a visualização de imagens. O atributo 'border' permite especificar a espessura de um bordo para a imagem (o valor por omissão é 0). Existem ainda outros atributos para este 'tag' que caem fora dos objectivos deste ciber-manual.

Exemplo
: <IMG src="../img/imagem1.jpg" align="right" alt="Imagem">

Como se verifica esta imagem, formatada de acordo com o exemplo anterior, aparece à direita do texto.

Para a inclusão de sons a sintaxe é a seguinte:

<BGSOUND src="caminho/nome do ficheiro de som" loop="infinite">

O atributo 'src' tem a mesma função que para o caso das imagens. Se se pretende que o som seja repetido indefinidamente enquanto o documento estiver a ser visualizado utiliza-se o atributo 'loop' com o valor 'infinite'.

No caso descrito, o som em questão é produzido automaticamente sempre que o documento for carregado pelo 'browser'. Isto implica a sua inclusão na secção HEAD. Se se pretender que o som toque só quando for solicitado então teremos:

<A href="caminho/nome do ficheiro de som">
Experiência Acústica!</A>

Um exemplo poderá ser:

<a href="../sounds/drumroll.wav">
Experiência Acústica!</a>

com o seguinte resultado: Experiência Acústica! (Carregue S.F.F.)

| TOPO DA PÁGINA |

Listas

As listas mais comuns em HTML são:

Listas não numeradas;

Listas com itens iniciados por 'bullets';

Listas numeradas;

Listas iniciadas com números.

Listas de definição;

Listas para definição de outras listas.

As listas podem ser incluidas umas nas outras ('nested lists').

Listas não numeradas

As listas com 'bullets' começam com o 'tag' <UL>
. Cada item da lista é iniciado com o 'tag' <LI>
, não necessitando, este último, de 'tag' de finalização. A lista termina com o 'tag' </UL>.
Exemplo:

   <Ul>
   <LI>Frutas
   <LI>Legumas
   <LI>Peixe
   </Ul>

O resultado será:
Frutas

Legumas

Peixe

Listas numeradas

As listas numeradas iniciam-se com o 'tag' <OL>
. Cada item é iniciado como o 'tag' <LI>
, não necessitando, este último, de 'tag' de finalização. A lista termina com o 'tag' </OL>.
Exemplo:

   <Ol>
   <LI>Frutas
   <LI>Legumes
   <LI>Peixe
   </Ol>

O resultado será:
Frutas

Legumes

Peixe

Listas de definição

Uma lista de definição começa com o 'tag' <DL>
. O 'tag' <DT>
permite especificar o termo a definir, enquanto que o 'tag' <DD>, especifica o descritivo da definição. A lista tem que terminar como 'tag' de finalização </DL>.
Exemplo:
   <DL>
   <DT>No mercado compra:
   <DD>Frutas
   <DD>Legumes
   <DD>Peixe
   <DT>Na drogaria compra:
   <DD>Bicarbonato de sódio
   <DD>Água de Javel
   <DD>Parafina
   </DL>

O resultado será:
No mercado compra:

Frutas

Legumes

Peixe

Na drogaria compra:

Bicarbonato de sódio

Água de Javel

Parafina

Listas incluidas umas nas outras

As listas podem ser incluidas umas nas outras.
Exemplo:
   <UL>
   <LI>Frutas:
     <Ol>
     <LI>Laranja
     <LI>Banana
     </OL>
   <LI>Legumes:
     <Ol>
     <LI>Couves
     <LI>Alfaces
     </OL>
   </UL>

O resultado será:
Frutas:

Laranja

Banana

Legumes:

Couves

Alfaces

| TOPO DA PÁGINA |

Tabelas

O HTML permite dispôr os dados em grelhas de linhas por colunas.
Cada célula pode conter texto, texto pré-formatado, imagens, 'hyperlinks', outras tabelas, etc.. As tabelas podem ainda conter um cabeçalho, sendo também possível a existência de um cabeçalho para cada coluna.

Elementos das Tabelas em HTML
  <TABLE> ... </TABLE> - Inicio ... fim de uma tabela
  <CAPTION> ...</CAPTION> - inicio ... fim do tíulo da tabela
  <TR> ... </TR> - Inicio ... fim de uma linha da tabela
  <TH> ... </TH> - Inicio ... fim do cabeçalho de uma coluna da tabela
  <TD> ...</TD> - Inicio ... fim dos dados de uma célula
Atributos das Tabelas

Atributos Descritivo Valores Possíveis

ALIGN Alinhamento Horizontal LEFT

CENTER

RIGHT

VALIGN Alinhamento Vertical LEFT

CENTER

RIGHT

COLSPAN Numero (n) de colunas que uma célula irá ocupar n (0 por omissão)

ROWSPAN Numero (n) de linhas que uma célula irá ocupar n (0 por omissão)

NOWRAP Para que as palavras não passem para a linha de baixo nenhum

BORDER Valor (n) para o rebordo da tabela n (0 por omissão)

O código HTML que foi necessário para a tabela anterior é o seguinte:

<TABLE border=3 align=center><CAPTION><h2> Atributos das Tabela </h2></CAPTION>
<TR>
<TH>Atributos</TH>
<TH>Descritivo</TH>
<TH>Valores Possiveis</TH>
<TR>
<TD rowspan=3>ALIGN</TD><TD ROWSPAN=3>Alinhamento Horizontal</TD>
<TD>LEFT</TD>
<TR>
<TD>CENTER</TD>
<TR>
<TD>RIGHT</TD>
<TR>
<TD rowspan=3>VALIGN</TD><TD ROWSPAN=3>Alinhamento Vertical</TD>
<TD>LEFT</TD>
<TR>
<TD>CENTER</TD>
<TR>
<TD>RIGHT</TD>
<TR>
<TD>COLSPAN</TD>
<TD>Numero (n) de colunas que uma célula ocupa</TD>
<TD>n (0 por omissão)</TD>
<TR>
<TD>ROWSPAN</TD>
<TD>Numero (n) de linhas que uma célula ocupa</TD>
<TD>n (0 por omissão)</TD>
<TR>
<TD>NOWRAP</TD>
<TD>Para que as palavras não passem para a linha de baixo</TD>
<TD>nenhum</TD>
<TR>
<TD>BORDER</TD>
<TD>Valor (n) para o rebordo da tabela</TD>
<TD>n (0 por omissão)</TD>
</TR>
</TABLE>

| TOPO DA PÁGINA |

Sequências de 'escape'

As sequências de 'escape' podem ter dois significados:

Mostrar caracteres especiais:
Para o caracter < a sequência a escrever é &lt
Para o caracter > a sequência a escrever é &gt
Para o caracter & a sequência a escrever é &amp
Para o caracter " a sequência a escrever é &quot

Mostrar caracteres que não fazem parte do conjunto ASCII standard, como por exemplo os caracteres portugueses:
Para o caracter é a sequência a escrever é é
Para o caracter ã a sequência a escrever é ã
Para o caracter ç a sequência a escrever é ç

| TOPO DA PÁGINA |

Cores

As cores podem ser aplicadas com diversos objectivos, nomeadamente:

Colorir o fundo da página

Exemplo: <BODY bgcolor="#008000" >

Colorir todo o texto de uma página

Exemplo: <BODY text="#008000">
Colorir apenas parte do texto

Exemplo: <FONT color="#008000"> ... </FONT>
Há duas particularidades a realçar em em qualquer um destes casos: ss códigos das côres são dados em hexadecimal e precedidos de '#' (cardinal).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| TOPO DA PÁGINA | SECÇÃO ANTERIOR |