ICC Turmas D - UnB 2/04

Prática 1

1- O conceito de hipertexto

Hipertexto é um conceito de programação. Significa a idéia de se colocar no mesmo arquivo digital uma mistura de instruções e dados textuais.

As instruções são escritas no mesmo "alfabeto" (código de suporte) que os dados textuais, e terão efeito sobre esses dados quando interpretadas. Uma linguagem para tais instruções é chamada linguagem de hipertexto.  Um exemplo de linguagem de hipertexto é o HTML (Hipertext Markup Language), surgida em 1991.

2- Uma linguagem de hipertexto: HTML

Embora não seja a primeira linguagem de hipertexto implementada, o HTML se popularizou e é hoje, de longe, a linguagem de hipertexto mais difundida e usada. É a linguagem que descreve para os navegadores web (Internet Explorer, Mozilla, Opera, Konkeror, etc.) as páginas web que hoje vemos na internet. Os navegadores web são, portanto, softwares interpretadores de HTML.  A descrição oficial da linguagem e sua evolução é hoje controlada por um consórcio de empresas, organizações ou pessoas, o World Wide Web Consortium, em www.w3c.org.

O HTML se tornou a linguagem de hipertexto mais difundida muito provavelmente porque é livre: qualquer um pode escrever um programa interpretador de HTML sem ter que pagar royalties a ninguém, como ocorre com as lingagens humanas, pois os inventores da linguagem HTML assim o desejam. O HTML não chega a ser uma linguagem de programação propriamente dita, no sentido em que suas instruções permitiriam ao programador explorar todos os recuros do hardware onde serão interpretadas. É mais simples, sendo uma linguagem cujas instruções servem apenas para formatação, diagramação e navegação de textos. Porém, o HTML serve também de suporte para lingagens de programação completas, assunto da segunda metade deste curso.

Código de suporte do HTML:  O código de suporte da linguagem HTML é o código ASCII básico. Um arquivo contendo um documento HTML consiste, portanto, de uma  sequência de bytes interpretáveis como caracteres ASCII, cujos valores numéricos correspondentes estão na faixa entre 0 e 127 (caracteres do ASCII básico não incluem letras com acento). Em alguns casos, cujas implicações veremos adiante, será possível o emprego de extensões ASCII (qualquer valor numérico possível para os bytes).

Resumindo: Um arquivo que armazena um documento html irá conter instruções da linguagem html (que constituem as chamadas diretivas) e dados desse documento (que constituem texto), gravados na forma de sequência de bytes interpretáveis por códigos ASCII.

3- Apresentações de um documento HTML

Como um arquivo digital só pode ser visto por intermédio de um programa ou software, um arquivo contendo um documento HTML poderá ser visto de formas distintas, dependendo do programa empregado para visualizá-lo.  Estas formas de visualização podem variar entre:
Observe que não se trata de arquivos diferentes, mas de visões diferentes do mesmo arquivo.

Geralmente, um software para visualização de texto ASCII permite também a manipulação (criação, modificação, gravação) do arquivo onde o texto está armazenado.  Esses softwares são chamados editores ASCII. Nos ambientes windows o editor ASCII mais simples é o "bloco de notas" (em ingles "notepad"), e nos sistemas operacionais que seguem o padrão POSIX, derivado do Unix (diversas implementações de Unix, Linux, BSD), o editor ASCII mais simples é o "vi".

De início estaremos trabalhando apenas com o bloco de notas (notepad) e um navegador web (internet explorer ou mozilla). O notepad para editar o código-fonte e gravar o arquivo com o documento html, e o navegador para visualizar a pagina web correspondente. O editor para o código fonte será o mais simples possível porque, enquanto está aprendendo html, o aluno precisa ter controle completo sobre o que é gravado nos arquivos dos seus trabalhos e práticas. Para isso, só deve gravar (save, save as..., salvar, salvar como...) o arquivo a partir do edidor ASCII (notepad, bloco de notas) .

Dentre os softwares que interpretam a linguagem HTML, temos dois tipos.
Exemplos de navegadores web já foram citados; exemplos de editores web são o  "front page" (proprietário), para o ambiente windows, e o "composer", módulo que faz parte do navegador mozilla (software livre), disponível para qualquer sistema operacional.  O "Word" não é um editor ASCII, pois no formato padrão dos arquivos que grava o código é próprio, fechado e proprietário (__.doc). A partir da versão 2000 o Word incorpora um interpretador o HTML, como formato alternativo para gravação e visualização de arquivos. Portanto, embora certas versões do Word possam também ser consideradas editores HTML, não usaremos o Word neste curso.

4- Exemplo de documento HTML

Como a página web que voce está vendo (e lendo) agora é a interpretação de um documento html, documento que se encontrava armazenado em um arquivo digital, poderíamos perguntar:  como será a visão código-fonte deste documento? O próprio navegador pode lhe responder. No mozilla em português, por exemplo, o menu "exibir" contém o comando "código fonte" (em inglês: "view" e "source code"). Quando acionado, este comando chama um módulo visualizador ASCII do próprio mozilla que, numa outra janela, irá mostrar a visão código fonte desta pagina web.

Se, no momento, voce está vendo esta página através de outro navegador, procure o comando correspondente e examine o código fonte relativo a esta página web, para ter uma idéia de como são escritas as diretivas html, e de como elas se misturam aos dados textuais do documento html. No caso, os dados textuais correspondem ao texto que vc está lendo aqui, agora.

Tendo feito isso, vamos agora criar nosso primeiro documento html, usando o editor ASCII de sua escolha. Como a tarefa é menos simples do que precisaria ser na plataforma windows,  vamos apresentar o roteiro para esta tarefa no windows.  Esta tarefa é menos simples no windows do que poderia ser porque esse sistema operacional tenta esconder do usuário a forma como ele, windows, reconhece o formato de um arquivo, talvez numa tentativa de evitar que o usuário manipule diretamente esta informação.

Mas essa tentativa não nos deterá, e aprenderemos a controlar a informação sobre o formato dos nossos próprios arquivos.

5- Criando e salvando um documento HTML


Para que não só o sistema onde o criamos, mas também qualquer plataforma na internet, e qualquer navegador web, possam reconhecer o arquivo onde gravarmos nosso documento html como sendo um arquivo que contenha html, o nome deste arquivo deve incluir a extensão (sufixo) .htm (ou .html). O problema no windows é que, a partir da versão 98, os programas que vem com ele, como o notepad (bloco de notas), tomam para si, na sua configuração "default" (configuração normal "de fábrica") a tarefa de apor a extensão que julgam correta ao nome do arquivo, extensão que por sua vez quase nunca é mostrada nas listas e pastas, responsável pela identificação do formato dos dados contidos no arquivo. 

Temos então que nos desviar da configuração normal na hora de gravar (salvar) o arquivo, para podermos escolher não só o seu nome principal, mas também a extensão, que deve ser  .htm   (ou .html). Faremos isso conforme explicado no roteiro abaixo.

  1. Abra o bloco de notas (notepad) [no XP, ele fica na pasta "Acessorios" do menu "programas"]
  2. Digite "a casca" do seu primeiro documento html:

    <html>
    <head>
    <title>    </title>
    </head>
    <body>

    </body>
    </html>


  3. No menu "Arquivo", escolha o comando "salvar como"
  4. No campo "salvar como tipo" (save as type) da janela de diálogo do comando acima, escolha "qualquer tipo" (any type)
  5. Escolha um diretório (pasta) que voce possa depois dele se lembrar. Na configuração default do windows, este diretório será o "meus documentos" (my documents). Voce pode manter esta escolha.
  6. No campo "nome", digite o nome do arquivo -- incluindo a extensão.htm. Nesse arquivo será armazenado a sequência de bytes correspondente ao conteúdo ASCII mostrado na janela do notepad. Digite, por exemplo, como nome de arquivo exemplo1.htm
  7. Clique no botão "salvar". O arquivo deve aparecer na pasta, associado ao ícone do navegador "padrão" da plataforma. Se vc clicar nesse arquivo, esse navegador padrão irá abrir uma janela onde não aparece nada. Voce não verá nada pois seu documento html por enquanto só contém uma "casca" de diretivas html, nenhum conteúdo textual.
  8. De volta à janela do notepad, preencha o espaço entre  <title>  </title> e entre <body>  </body> conforme pedir o professor em aula.
  9. Clique novamente no botão "salvar" no menu "arquivo" dessa janela do notepad.
  10. Se voce já abriu esse arquivo num navegador, vá para a janela correspondente e clique no botão "Recarregar". Se ainda não abriu,abrra ou retome a uma janela do navegador. Procure o comando "abrir arquivo" (open file) no menu arquivo. Navegue no sistema de arquivos do computador local até encontrar o arquivo que voce salvou no notepad, que será o exemplo1 se voce seguiu as sugestões acima. (Observe que vc não verá a extensão do nome do arquivo, mas, o ícone do navegador web configurado para ser o "padrão" nesse computador). Selecione e abra o seu arquivo.
  11. Veja como o conteúdo html do documento que voce salvou no editor ASCII é interpretado pelo navegador. Volte na janela do notepad, digite mais dados textuais, e salve (regrave as alterações no arquivo)
  12. Volte ao navegador e recarregue a página correspondente. Ao fazer isso, voce acaba de dar a sua primeira pedalada da programação!