Informática Instrumental
Material de Referência

 Hipermídia
 
 Introdução

Quando começamos a entrar em contato com o mundo da Internet, nos deparamos com um mundo novo cheio de palavras desconhecidas. Muitos desses conceitos são usados amplamente, o que torna a importância de os conhecermos bem ainda maior.

Dentre esses termos que causam muitas dúvidas, podemos destacar hipertexto e hipermídia. O hipertexto é como um texto comum - pode ser armazenado, lido, ou editado, porém, existe uma importante diferença: o hipertexto contém conexões dentro do texto para outros documentos. Uma página na Internet é hoje o melhor exemplo de uma hipermídia.

Por exemplo, suponha que você pudesse de alguma maneira selecionar (com um mouse ou com o seu dedo) a palavra "hipertexto" no parágrafo anterior. Em um sistema hipertexto você poderia ter então um ou mais documentos relacionados - uma história do hipertexto, por exemplo, ou uma definição de um dicionário. Estes novos documentos por sua vez poderiam ter links e conexões para outros documentos. Dessa maneira, links hipertexto, chamados de hyperlinks, podem criar uma complexa "teia" (web) virtual de conexões.

A distinção entre os termos “hipertexto” e “hipermídia” torna-se cada vez mais obscura devido às crescentes facilidades de comunicação através das mais variadas tecnologias. Alguns autores definem a hipermídia como sendo uma maneira de se criar documentos, usando um computador, onde se pode combinar texto, gráfico, animação, vídeo, som e qualquer outra mídia que venha a ser desenvolvida usando os links para conectar entre si esses elementos. Pode se dizer que hipermídia é uma expansão do conceito de hipertexto que contempla outras mídias. Outros autores preferem conceituar hipermídia como o resultado da integração de hipertexto com multimídia, distinguindo, portanto, as duas tecnologias. Neste manual, os dois termos serão utilizados indistintamente. Embora o termo “hipermídia” subentenda, pela definição tradicional, uma maior abrangência com relação às maneiras de expressar o conhecimento, ele pode ser considerado simplesmente uma reavaliação do termo original “hipertexto” em conseqüência de uma evidente evolução tecnológica.

A hipermídia que foi inicialmente concebida como uma ferramenta para a recuperação de informações, atualmente tem sido considerada como uma ferramenta para a aprendizagem. Esta tecnologia é considerada bastante adequada para aplicações educacionais, principalmente por causa de sua flexibilidade e grande capacidade de exploração de informações relevantes. Esta flexibilidade é refletida no acesso não seqüencial da informação e na transferência de controle do programa para o usuário. Assim, os sistemas hipermídia estão baseados principalmente na suposição de que a interpretação do estudante ou aprendiz dá significado às ligações.

Conceitos básicos de HTML

HTML significa Hyper Text Markup Language. É a linguagem que permite criar páginas web. Uma página web é um texto contendo uma série de comandos HTML.

HTML é uma linguagem universal que permite a qualquer pessoa criar facilmente o seu conteúdo para a web utilizando texto, imagem, som e vídeo. Esse conteúdo pode depois ser visto por qualquer pessoa que esteja a navegar na web.

Ao contrário do que muitas pessoas pensam, não é necessário nenhum programa específico para criar páginas bastando utilizar um simples processador de texto e conhecer os comandos HTML. Por outro lado, existem editores de páginas HTML que facilitam bastante o processo de sua criação. Os comandos, normalmente conhecidos por diretivas ou tags, controlam a maneira como o conteúdo de uma página vai aparecer. Você verá exemplos dessas diretivas (tags) no código abaixo:

Apresentamos a seguir o código HTML de uma página:

<html>
  <head>
     <title> Meu primeiro Hipertexto </title>
  </head>
  <body>
      <p> Este é o meu primeiro documento hipertexto
            escrito na linguagem HTML. </p>
 </body>
</html>

 
 Se você carregar em seu navegador uma página com este código, você a visualizará assim : 

HTML não é uma linguagem de programação, mas tem em comum com estas a presença de diretivas, isto é trechos especiais de texto, geralmente destacados por algum caracter delimitador. No código acima vimos exemplos de várias diretivas, tais como html, head, title e body. As diretivas controlam ou alteram a maneira em que as diversas partes de um documento são apresentadas tipograficamente. Os caracteres que delimitam as diretivas HTML são: < (menor) e > (maior). Por exemplo: 

<TITLE>, <HEAD>, <P>, <BR>, etc.

A diretiva do HTML não é sensível ao tipo de caixa, isto é, tanto pode ser escrita em maiúsculas ou em minúsculas, ou em qualquer combinação de ambas. Por exemplo:

<Title>, <HeAd>, <P>, <br>, etc.

são diretivas interpretadas da mesma maneira que as listadas acima.

Numa diretiva, não deve haver espaço em branco nem quebra de linha entre o sinal de menor < e o nome da diretiva. Por exemplo, as seguintes codificações não são permitidas:

<  TITLE>,                         (uso de espaço em branco)
<       HEAD>,                    (uso de espaço em branco)
<                                     (quebra de linha)
P>

Uma diretiva não é visualizada literalmente, mas é identificada e adequadamente interpretada pelo programa navegador a fim de produzir algum efeito visual ou de estrutura lógica no documento hipertexto. Qualquer outra informação que não seja uma diretiva, deve ser um texto, consistindo do conteúdo do documento.

Exemplo:
<P> Este parágrafo ...  

Um fato importante sobre HTML é que, ao contrário do que acontece com editores de texto convencionais, o programador não tem controle completo sobre o efeito final do documento. Este pode variar, de acordo com as condições estabelecidas pelo usuário final no programa navegador. Por exemplo:

  • dimensões da área de visualização
  • escolha das fontes tipográficas
  • nível de HTML suportado
  • versão e marca do programa navegador
  • limitações de dispositivos (hardware e software)

A preocupação principal dos desenvolvedores do HTML era a de permitir transportar a estrutura lógica e o conteúdo de documentos através de diferentes plataformas (conjunto consistindo de computador, sistema operacional e programa de suporte utilizado) de computadores. A vantagem desta escolha é formar os documentos aceitáveis ao máximo número de indivíduos quanto possível.

Em HTML, existe uma diretiva para iniciar e outra para finalizar uma determinada especificação. No exemplo anterior, vimos que existe uma especificação para o título de uma página. Essa especificação é marcada pela diretiva <title> (<title>Meu primeiro Hipertexto</title>). Repare que o título aparece na barra de título do navegador mostrado anteriormente.  Desta forma, podemos generalizar que <[diretiva]> inicia a especificação e </[diretiva]> finaliza a especificação. A diretiva </[diretiva]> é denominada de diretiva de fechamento. Em alguns casos em que o final da especificação seja óbvio ou quando a diretiva não trata de especificação do bloco, a diretiva de finalização </[diretiva]> pode ser omitida. Caso tenha dúvida, sempre coloque para não cometer erro. 

Um documento HTML apresenta geralmente a seguinte forma declarativa:

<html>
  <head>
     [cabeçalho do documento]
  </head>
  <body>
      [corpo do documento]
 </body>
</html>

Todo par de diretivas representa alguma especificação. Assim, <html> e </html> indica o começo e o fim do documento hipertexto em HTML, <head> e </head> indica o começo e o fim do cabeçalho do documento, e <body> e </body> especifica o começo e o fim do corpo do documento HTML.

Como podemos ver, o documento HTML consiste basicamente de duas seções: cabeçalho e corpo.

Observação: os espaços em branco e as endentações (distâncias da margem usadas para facilitar a compreensão do código) exibidas até agora não tem significado para o navegador.

Toda linguagem apresenta a possibilidade de inserção de comentários - informações que são propositalmente ignoradas pelo navegador, mas que são de interesse do desenvolvedor. Em HTML, é possível inserir comentários em qualquer parte do código. Estas informações devem estar entre <!-- e >. 

Por exemplo:

<!-- Este é um comentário >  

O corpo do documento consiste de seu conteúdo: textos, imagens, hiperligações, etc. Para saber mais detalhes sobre como codificar os itens abaixo em HTML, veja os tópicos a seguir:

Na Internet, existem hoje várias tecnologias (asp, php, cgi, jsp, etc...) para se trabalhar na construção de páginas, principalmente para sites de grande porte ou comerciais, mas a linguagem básica fundamental para se visualizar o que vemos hoje na tela do navegador é o HTML. Portanto, é muito importante que você tenha noções básicas sobre esta linguagem e continue evoluindo seus conhecimentos nesta área.

Cabeçalhos em HTML

A linguagem HTML permite seis diferentes níveis de estruturação lógica do texto disponibilizando seis níveis de cabeçalhos. 

Na figura abaixo, vemos o uso de dois tipos de cabeçalho.

O código que produz a página mostrada acima é o seguinte:

<h1>Programação HTML</h1>
<h2>Conceitos Básicos</h2>
Esta seção tratará de ... 

Podem ser usadas até seis diretivas:

<h1> e </h1>
<h2> e </h2>
<h3> e </h3>
<h4> e </h4>
<h5> e </h5>
<h6> e </h6>  

Cada uma delas especifica o tamanho da letra utilizada para exibir o texto (de 1 a 6), na ordem decrescente de tamanho. Cada vez que muda o tamanho da fonte (através desta diretiva de cabeçalho), é criado um novo parágrafo.

Parágrafos em HTML

Como a HTML não faz distinção de espaços em branco, endentações ou quebras de linha presentes na codificação, torna-se necessário o uso de uma diretiva para definição de parágrafos que promova a quebra e o espaçamento desses.

A página mostrada abaixo faz uso de parágrafos:

Os parágrafos são especificados pela diretiva <p>. O código que produziu a página acima é:

<p> Este é o primeiro parágrafo.</p> <p> Este é o segundo parágrafo.</p>  

A diretiva de fechamento </p> não é realmente necessária, podendo ser omitida com segurança (normalmente, nós omitimos esta diretiva de fechamento). Com isso, podemos escrever apenas <p> no começo do parágrafo. Com isto, o exemplo acima torna:

<p> Este é o primeiro parágrafo. <p> Este é o segundo parágrafo.

que terá o mesmo efeito visual.

Se não utilizarmos a diretiva de parágrafo, não haverá quebra de linha visualmente no navegador, mesmo que esteja com quebra na codificação. Por exemplo, o seguinte código HTML produz a página exibida abaixo:

Este é o primeiro parágrafo.
Este é o segundo parágrafo.

Se você deseja apenas uma quebra de linha, use a diretiva <br>. Esta diretiva não possui diretiva de fechamento. Ela provoca apenas a quebra da linha, mas não inicia um novo parágrafo (quando um novo parágrafo é iniciado, o espaçamento é maior).

Por exemplo, o código a seguir produz a página mostrada abaixo:


<p> Esta é a primeira linha. <BR> Esta é a segunda linha.

 

Listas Enumeradas em HTML

A linguagem HTML permite produzir categorias distintas de listas entre elas as listas enumeradas.

A página abaixo faz uso deste tipo de lista:

Uma lista enumerada é definida pelas diretivas <ol> e </ol>. Cada item da lista é definido pelas diretivas <li> e </li>, sendo que a diretiva de fechamento </li> poderá ser omitida.  

Por exemplo, a página exibida acima possui o código mostrado a seguir:

 

<ol>
  <li> Conceitos Básicos</li>
  <li> Apresentação da Teoria</li>
  <li> Conclusão</li>
</ol>

Listas não Enumeradas em HTML

A linguagem HTML permite produzir categorias distintas de listas entre elas as listas não enumeradas. 

Na figura abaixo, podemos ver um exemplo deste tipo de lista : 

 

A lista não enumerada utiliza a diretiva <ul> e </ul> em vez de <ol> e </ol> (para a lista enumerada). Cada item de lista é, da mesma forma, definido pelas diretivas <li> e </li>.

Por exemplo, o código mostrado a seguir produz a página exibida anteriormente:

<ul>
  <li> Definição</li>
  <li> Propriedades</li>
  <li> Resultados</li>
</ul>

Hiperligações em HTML

Em sua página HTML, muitas vezes você sentirá a necessidade de inserir hiperligações ou links para outras páginas da Internet.

Na figura abaixo, temos um exemplo de página que utiliza uma hiperligação.

A página acima é produzida pelo seguinte código :

Visite a <a href="http://www.bol.com.br"> página do BOL</a>

A diretiva que representa hiperligações em HTML, a qual é chamada de âncoraa, é da forma:

<a href="[url]"> [referência]</a>

onde <a indica a iniciação da diretiva de âncora, href="[url]" indica a criação de uma hiperligação para o endereço dado por [url] e a referência é o texto ou imagem a ser destacado e considerado como sendo ponto de ligação (Quando a página for visualizada, esta referência ficará com a forma de link - da cor azul e sublinhada). Ao clicar o mouse sobre [referência], o navegador automaticamente carregará o documento de endereço [url]. 

Por exemplo, ao clicar no item mostrado na página acima, a página cujo endereço é http://www.bol.com.br será acionada.

Hiperligações para a própria página

Muitas vezes, você pode querer inserir hiperligações que referenciam um trecho da sua própria página. A figura abaixo mostra um exemplo do uso de âncoras para este caso. Ao se clicar na palavra destacada como um link (Música), um trecho da mesma página será exibido, no caso, o título Minhas músicas preferidas. O uso de hiperligações para a própria página se torna bastante útil em um documento grande. Este exemplo é bastante simples e puramente didático. Na figura abaixo é mostrado um exemplo onde a palavra "Música" é uma hiperligação que referencia o texto "Minhas músicas preferidas".

A página acima é produzida pelo seguinte código:

Na figura abaixo mostra-se o que ocorre ao se clicar na hiperligação "Música".

 

Para produzirmos hiperligações como a mostrada anteriormente, utilizamos a diretiva exibida abaixo:

<a name="[nome]"> [trecho] </a>