ICC Turma D - UnB 2/04

Prática 2

1- Dados textuais e Diretivas de Referência em HTML

Dados textuais (visíveis ou audíveis) contidos (ou referenciados) numa página web podem ser classificados como texto, imagem, áudio ou vídeo (com e sem áudio), dependendo de como são representados no código fonte correspondente.

A capacidade de integrar esses diversos tipos de dados em documentos multimídia (ex: documentos html), via código que dá suporte a texto na arquitetura do sistema (ex: ASCII), é característica principal das linguagens de hipertexto (ex: HTML). Entretanto, tal capacidade de integrar conteúdos talvez não seja o aspecto mais inovador dessas linguagens. Como vem mostrando o HTML, seu maior potencial estaria nas possibilidades de integração em níveis mais amplos, envolvendo processos de comunicação e manipulação desses dados.

Até  o momento, estivemos produzindo documentos html cujos dados textuais eram apenas texto. Vamos logo diversificar esse conteúdo. Porém, antes de aprendermos, por exemplo, a incluir imagens em nossas páginas web, vamos aprender a explorar as possibilidades de comunicação entre documentos html. Vamos nessa ordem porque é dessas possibilidades que a linguagem HTML se vale para integrar texto e imagem em páginas web. 

Essas possibilidades são exploradas por uma classe de diretivas que podemos chamar diretivas de referência.

2- Links: Ligações entre documentos HTML

Uma das possibilidades de integração prometidas pela idéia de hipertexto é a de que quem vê uma página web possa iteragir com seu conteúdo, usando periféricos de entrada de dados (mouse, teclado, etc.) no computador onde é vista.  Por meio desta interação, quem vê a página -- chamado "usuário" (do navegador) ou "visitante" (da página) -- poderá, por exemplo, tomar decisões e comunicá-las ao navegador web, ou a programas que com ele interagem.

Quando a decisão é sobre um novo conteúdo que o visitante queira em seguida acessar (ver, ouvir, produzir, etc), a comunicação se dá através do conceito de hiperlicagação. Uma hiperligação será um elemento da página através do qual esse novo conteúdo é sugerido ao visitante e, ao mesmo tempo, através do qual a decisão de acessar tal conteúdo pode ser transmitida ao navegador. Uma hiperligação é também chamada de ponteiro, ou simplesmente ligação html: em ingles, hipertlink, ou simplesmente link

Normalmente o conteúdo indicado (sugerido, apontado) por um link é o de outra página web. E normalmente o elemento indicador é um trecho de texto destacado em cor específica e sublinhado. Mas o conteúdo apontado pode ser outra coisa, inclusive uma ação de manipulação de dados, e o elemento indicador não precisa ser texto sublinhado ou mesmo texto; pode ser uma imagem.

Ao falarmos do ponto de vista da programação (na metalinguagem), chamamos de face do link o elemento da página que indica ou aponta novo conteúdo, e de referência do link a informação necessária para que o navegador possa localizar e intermediar o acesso a esse conteúdo. Links podem ser classificados de acordo com as possíveis formas de localização do conteúdo apontado.

Formas de localização para links HTML
Na próxima prática aprenderemeos a distinguir referências absolutas de relativas, e veremos o que são âncoras internas. Nesta, estaremos praticando apenas com referências absolutas. Podemos, agora, conhecer a diretiva para formação de links.

3- Diretiva para formação de links HTML

Localizador

A diretiva cujas instâcias formam links precisa prescrever uma rota para o conteúdo apontado. Uma tal rota pressupõe não só um endereço, mas também uma forma de encontrar, obter e exibir o conteúdo apontado. Em jargão de programação HTML (metalinguagem), essa rota é chamada localizador. Para a diretiva que forma links, o localizador é dado em um parâmetro de nome href (hypertext reference)

href="____________________"
 localizador:
seta valor do parâmetro href

Código fonte de um link

A etiqueta (nome) da diretiva cujas instâncias formam links é a, abreviação de "anchor" ("âncora", metáfora que dá nome à diretiva). Uma instância da diretiva a formará um link na página web onde ocorrer se contiver o parâmetro href. A diretiva a é de efeito extendido. Numa instância contendo o parâmetro href, o hipertexto na extensão da diretiva formará a face do link, indicando (sugerindo ou apontando) novo conteúdo, e o valor do parâmetro href formará a referência, indicando a localização desse conteúdo.

<a href="_________">_____________</a>
link: referência do link seta

seta  face do link 
         


Para que o conteúdo apontado seja acessado, o link precisa ser acionado. O acionamento se dá pela interação do usuário com a face do link. Essa interação pode ocorrer de duas formas.

Formas de acionamento de links
  1. Se o cursor do mouse estiver sobre a face de um link, a ação de clicar no botão esquerdo do mouse comunica ao navegador o acionamento desse link. Um link pode ser reconhecido de forma intuitiva. Um elemento gráfico de uma página web se revela como face de link  se o cursor do mouse transformar-se enquanto estiver sobre ele: normalmente, de seta para a figura de mão com dedo indicador aberto.
    Já a ação de clicar no botão direito sobre a face do link, por sua vez, geralmente comunica o desejo de se escolher entre distintos modos de acionamento, ou de se obter mais informações sobre esse link.
  2. Se o focoda página estiver na face do link, a ação de teclar "Enter" comunica ao navegador o acionamento desse link.  Um link estará "focado" se sua face aperecer destacada dos demais elementos gráficos da página por um contorno pontilhado. Em algumas situações, o foco na página pode ser mudado teclando-se a tecla "Tab". Seguidas tecladas no "Tab" fazem o foco percorrer os elementos focáveis da página (na sequência em que suas respectivas diretivas aparecem no código-fonte correspondente).

4- Criando links em páginas web

Vamos praticar o uso da diretiva âncora para formação de links em nossas páginas web. Execute o roteiro da prática 1 - pedalando a programação em html para criar, via editor ASCII, um arquivo contendo a estrutura básica de um documento html. Dê-lhe um nome que se refira a esta prática, por exemplo  "exemplo2.htm".
  1. No corpo do documento html, digite algum texto para situar o visitante no assunto da página, e insira uma diretiva âncora com referência. No exemplo abaixo:
    1.    texto em verde-escuro é código-fonte;
    2.    texto em preto -- pontilhado (...) e tracejado-sublinhado (__) -- é metalinguagem.
    ...
    <body>
    <center><h1>Meu primeiro link html</h1></center>
    ...
    <a href="_____">______</a>
    ...
    </body>
    ...

  2. Da janela de edição do código-fonte, salve o documento html desta prática (conforme o roteiro da prática 1, em arquivo de nome exemplo2.htm) e volte a esta janela do navegador.

  3. No comando "Novo" (New) do menu "Arquivo" (File), abra uma nova janela (window). Na caixa de localização da nova janela, digite o endereço de alguma página web conhecida, disponível na internet, ou navegue até ela. Esta será a página para qual o seu primeiro link irá apontar. Nesse roteiro, usaremos o endereço da página do nosso curso a título de exemplo. 

  4. Clique "Enter" para testar se o endereço da página escolhida foi digitado corretamente, ou para que o navegador o complete se preciso e possível. Se funcionar, o endereço que aparece na caixa de localização obedece a regras que o classificam como "endereço URL" ou, abreviadamente, "URL" (sigla para Universal Resource Locator ou Uniform Resource Locator,  a ser explicado depois). A imagem abaixo ilustra o que voce verá se tiver digitado corretamente o endereço sugerido.

    janela do navegador
    Nesta imagem, a janela é do navegador Mozilla, rodando no sistema operacional GNU/Linux (distribuição Mandrake) com interface gráfica KDE, em um computador conectado à internet, quando a página apontada estava disponível. A imagem ilustra também (com legendas em fundo amarelo) os elementos da janela do navegador web que precisamos conhecer, para aprendemos HTML e Javascript.

  5. Se a página escolhida estiver disponível, copie seu URL (se não estiver disponível, escolha outra que esteja). Copie o URL da caixa de localização onde foi testado, para entre as aspas que delimitam o localizador do seu primeiro link. Para evitar erros de digitação, voce pode copiar esse URL diretamente da caixa de localização para a janela de edição do código-fonte do seu exemplo2.htm, usando a área de transferência do sistema operacional e teclas de atalho. O procedimento seria:
    1. Selecione o texto do URL na caixa de localização (usando "Tab" ou então clicando e arrastando sobre a extensão do texto)
    2. Mantenha a tecla CTRL pressionada enquanto clica na tecla "C" (ou equivalente para "Copiar", conforme indicado no menu "Editar" do navegador).
    3. Ative a janela do editor ASCII onde o código-fonte de exemplo2.htm está sendo editado.
    4. Selecione o que estiver entre as aspas na citada instância do parâmetro href, ou insira o cursor entre consecutivas aspas delimitadoras do valor desse parâmetro.
    5. Mantenha a tecla CTRL pressionada enquanto clica na tecla "V" (ou equivalente para "Colar", conforme indicado no menu "Editar" do navegador).

    Em jargão de programação (especificação de programa), daríamos esta orientação dizendo: "atribua ao parâmetro href o URL escolhido para essa instância da diretiva a" (a instância que formará o seu primeiro link no documento html desta prática, em exemplo2.htm).

  6. Pense num texto indicativo do conteúdo apontado, para compor a face do seu primeiro link. Digite, na extensão da referida instância (ou seja, entre <a...> e </a> no seu código-fonte), o texto indicativo desse conteúdo. Se o conteúdo apontado for a página do nosso curso, esse texto poderia ser, por exemplo, "Turma D de ICC - UnB - 1/04"

  7. Da janela em que está editando o código-fonte, salve seu documento html em exemplo2.htm, e volte para a janela do navegador onde o URL do seu primeiro link foi testado.

  8. No menu "Arquivo" (File), escolha o comando "Abrir Arquivo" (Open File). Navegue no sistema de arquivos do computador onde voce está "pedalando" até localizar o arquivo contendo o seu documento html desta prática (exemplo2.htm). Abra esse arquivo e veja se a página correspondente é visualizada pelo navegador conforme esperado, link principalmente. A face do link deve estar visível e reagir à sobreposição do cursor do mouse conforme esperado, tal como sublinhado no passo 1 acima.

  9. Teste seu primeiro link. Se funcionar como esperado, ao clicar na face do link duas coisas devem acontecer:
    1. O conteúdo apontado aparecerá na janela que antes mostrava sua página do exemplo2.htm,
    2. O URL desse conteúdo na caixa de localização.
    Se deu tudo certo, volte ao início deste roteiro e faça um segundo link, apontando para uma outra página disponível na internet. Se não deu certo, volte ao início, releia e refaça os passos corretamente. Use o botão "Voltar" no navegador para ir e vir entre sua página do exemplo2.htm e as páginas dela apontadas.
Links assim construídos são externos e absolutos. Para criarmos links internos ou relativos, precisamos entender melhor a sintaxe dos URLs. Antes, porém, vamos conhecer outra diretiva que também emprega URL para fazer referência a conteúdo externo ao documento html onde esteja instanciada.

5- Diretiva para inserção e diagramação de imagens em páginas web

Fonte da imagem

A etiqueta (nome) da diretiva que insere imagens  é img, abreviação de "image" ("imagem", "figura", etc.). A diretiva img é de efeito pontual. Este efeito será o de inserir uma imagem na página web correspondente, se a instância contiver parâmetro src corretamente atribuído. O nome desse parâmetro é uma abreviação de "source" [fonte], mneumônico para "código-fonte" (da imagem). O valor desse parâmetro, muitas vezes chamado fonte da imagem, é o localizador da imagem que se deseja inserir.

Resumindo: o localizador atribuído a src numa instância da diretiva img (fonte da imagem) deve ser o URL do arquivo contendo uma representação digital da imagem (figura, etc.) que se pretende inserir na correspondente página web. 

Vizualização da imagem

Na página web correspondente, a visualização de tal imagem ocorrerá:
  1. em posição relativa à da referida instância no código-fonte, e
  2. de acordo com parâmetros de diagramação opcionais (mencionados adiante).
<img src="_________" ..................>
URL de arquivo com imagem seta

seta  parâmetros de diagramação 

Parâmetros

Um parâmetro (também chamado atributo) serve para detalhar alguma característica no efeito de uma diretiva tag, em determinada instância da diretiva. A carcaterística é dado pelo nome do parâmetro, e o detalhe escolhido para aquela instância é dado pelo valor do parâmetro. Parâmetros são separados, entre si e da etiqueta da diretiva, por espaço em branco. A definição oficial de cada diretiva inclui a lista de parâmetros que ela deve ser capaz de reconhecer. Mas como são muitas essas listas, e não é decorando dicionário que se aprende uma linguagem, nesta série de práticas vamos nos ater a apenas alguns parâmetros e diretivas. O que não impede voce de experimentar ou consultar outros tutoriais, se tiver curiosidade.

Parâmetros de diagramação, assim como os de referência que já conhecemos (href e src), obedecem à mesma sintaxe que qualquer parâmetro para diretivas tag: nome , seguido do sinal de igual, seguido entre aspas do valor do parâmetro.
 
<...  ______________="_____________"  ...>
parâmetro:
 nome do parâmetroseta  
seta valor do parâmetro
parâmetro:

Um Parâmetro só terão efeito se o valor a ele atribuído for válido e se a diretiva onde ocorre souber reconhecê-lo. Para ilustrar, podemos notar o caso de inserção de imagem. O valor atribuído ao parâmetro src numa instância da diretiva img (URL da fonte da imagem) resultará em correta visualização pelo navegador, obedecendo-se aos demais parâmetros de diagramação que porventura nela ocorram, se:
  1.  o arquivo apontado representar uma imagem (figura, etc.) em algum formato que o navegador conheça, e
  2.  o arquivo apontado estiver disponível quando a página onde for inserida a imagem estiver sendo visualizada. 
Formatos de imagens digitais

Assim como o formato de documentos html, o formato em que está codificada uma imagem em arquivo digital é indicado por uma extensão (sufixo) no nome desse arquivo. É através desta extensão que o navegador escolhe o programa utilitário, adequado ao formato, para renderizar (isto é, traduzir para código compreensível ao driver do monitor instalado no sistema) a imagem ali armazenada.

Extensões (e formatos) de imagens que são conhecidos dos nagegadores web hoje em uso incluem .jpg, jpeg (formato jpeg),  .gif, .giff (formato gif), .bmp  (formato bitmap), .png (formato png). O formato gif se destaca por permitir em sua codificação a cor "transperente" e uma forma rudimentar de animação. Imagens .gif animadas são formadas por uma sequência circular de imagens, representadas num único arquivo, que se sucedem no tempo de visualização na área fixada para sua diagramação, na página onde é inserida.

6- Inserindo e diagramando imagens em páginas web

Vamos praticar o uso da diretiva img em nossas páginas web. 
  1. Volte à janela de edição do código-fonte do seu arquivo exemplo2.htm. No corpo do documento html, digite dados textuais (texto) antes e depois da diretiva  img, incluindo algumas diretivas de quebra de linha ou parágrafo. Esse texto contíguo à diretiva (acima e abaixo dela) servirá para verificarmos como funciona a diagramação, ou seja, o efeito que determidados parâmetros -- ou sua ausência -- em instâncias da diretiva img exercem durante a interpretação do código-fonte correspondente. No exemplo abaixo:
    1. texto em verde-escuro é código-fonte;
    2. texto em preto -- pontilhado e tracejado -- é metalinguagem.
      ...
      <body>
      ...
      <center><h2>Minha primeira inser&ccedil;&atilde;o de imagem</h2></center>
      ...
      <img src="_____">
      ...
      </body>
      ...

  2. Ative uma janela do navegador distinta desta. Na sua caixa de localização, digite o endereço de alguma página web conhecida, disponível na internet, que contenha alguma imagem, ou navegue até tal página. Clique "Enter" para visualizá-la. Esta será a página com a qual a sua página irá "compartilhar" uma imagem, através de uma referência absoluta no código-fonte. Nesse roteiro, usaremos o endereço da página do nosso curso a título de exemplo.

    Quando visualizamos uma página contendo imagem, o URL mostrado na caixa de localização do navegador será o da página, não o da imagem. Mas os navegadores web oferecem vários meios de se conhecer o URL de imagens inseridas em tais páginas. Cada navegador (marca e modelo) disponibiliza essa informação de maneira ligeiramente diferente dos demais, mas em geral todos a disponibilizam por meios semelhantes. Listamos algumas maneiras de se obter essa informação (URL de uma imagem inserida em uma página), tomando por referência o navegador Mozilla em português. Escolha uma delas, ou alguma alterantiva equivalente no navegador que vc estiver usando neste momento:

  3. Para este exemplo, sugerimos a imagem com o logotipo da UnB que aparece na página da turma D, no canto superior esquerdo (veja-a dentro da imagem acima). Copie o URL da imagem escolhida para entre as aspas que delimitam a fonte da imagem, no código-fonte de exemplo2.htm. Em jargão de programação (especificação), daríamos esta orientação dizendo: "atribua ao parâmetro src o URL escolhido para essa instância da diretiva img" (a instância que inserirá a primeira imagem na página desta prática, em exemplo2.htm).

  4.  Da janela em que está editando o código-fonte, salve seu documento html (em exemplo2.htm) e volte para a janela do navegador que mostra a página web correspondente (exemplo2.htm). Clique em "Recarregar" (ou botão equivalente). Veja se a imagem correspondente é visualizada pelo navegador como esperado. Se não aparecer como esperado, volte, releia, refaça. Se aparecer, observe como a imagem se posiciona na página em relação ao texto contíguo à sua diretiva no código-fonte. Por que o texto não aparece ao lado da imagem, e sim antes e depois? Como fazer o texto aparecer ao lado da imagem? Hora de conhecermos os parâmetros opcionais disponíveis para a diretiva img.

  5. Procure em um tutorial HTML on-line de sua preferência, ou então experimente diretamente com o código-fonte de seu exemplo2.htm, para descobrir para que serve e como funcionam os seguintes parâmetros (opcionais) da diretiva img:
alt, width, height, vspace, hspace, border, align.
Por exemplo, verifique  que os únicos valores possíveis -- isto é, que produzem algum efeito -- para o parâmetro align  são "top", "middle""bottom", "left" e "right". Descubra que efeitos são esses. Investigue, também, em quais diretivas de formatação de texto este valores têm efeito. Depois de descobri-los, tente fazer em seu exemplo2.htm uma diagramação semelhante àquela que inclui a imagem do logotipo da UnB, no topo da página da turma D. 

Pedale e divirta-se!