ICC Turma D - UnB 2/04

Prática 3

1- Endereços de referência em HTML: URLs

Como explicado na prática anterior, diretivas de referência indicam conteúdo que está noutro lugar. Este lugar pode estar fora do documento html onde a diretiva está instanciada (link externo), ou dentro (link interno). A referência é feita através do valor atribuído a um parâmetro de localização. Desses parâmetros, até agora conhecemos o href para a diretiva a (que cria links),  e o src para a diretiva img (que insere imagens). O valor atribuído a esses parâmetros é chamado de localizador.

Também na prática anterior, foi mencionado que o localizador pressupõe não só endereço, mas também uma forma de encontrar, obter e exibir o conteúdo indicado.  Essas informações estarão codificadas no localizador de acordo com um conjunto de regras para composição de localizadores chamado URL (Universal Resource Locator, código que, ao evoluir, foi rebatizado Uniform Resource Locator).

Um localizador que obedeça a esse conjunto de regras é por sua vez chamado de endereço URL, ou simplesmente URL (do conteúdo apontado). Resumindo: do ponto de vista da programação, diretivas de referência (ex: a, img) se valem do código URL para interpretar localizadores atribuídos aos seus parâmetros de localização (ex: href, src).

É o código URL que determina, dentre outras coisas, se uma referência, link ou endereço é absoluto ou relativo, e se um link é externo ou  interno. Por isso precisamos conhecê-lo minimamente, para usá-lo corretamente em localizadores no código-fonte de nossos documentos html. Esse conhecimento mínimo será o objetivo desta prática 3.

2- Sintaxe URL

A sintaxe URL usada em HTML é oficialmente descrita pela documentação mantida pelo consórcio W3C em http://www.w3.org/Addressing. Esta sintaxe decompõe localizadores em três partes, todas opcionais (cada parte pode ou não ocorrer em um localizador).  Quando não ocorre no localizador, a interpretação do URL presumirá um valor padrão (default) para a parte ausente. O programador que escreve ou lê um localizador em código-fonte, e a diretiva que interpreta o URL, saberão se uma parte ocorre ou não devido ao fato de cada parte ser composta por regras que tornam essas partes distinguíveis, presumidos os valores default para as partes ausentes.

Essas partes podem ser abreviadamente chamadas de protocolo, endereço internet e endereço local.  Quando aparecem no localizador, as partes devem estar nessa ordem, e de forma contígua. Contígua nesse caso significa sem nenhum espaço em branco separando-as, conforme abaixo indicado pelo tracejado contínuo na metalinguagem. Também abaixo, as aspas HTML (mostradas em cor verde) delimitam o valor que se pretende atribuir a um parâmetro de localização.

"________________________________________"
localizador: protocolo seta
endereço internet
seta  endereço local 
 
endereço


Protocolo

Esta parte do localizador indica ao interpretador o modo como o conteúdo apontado deve ser obtido e exibido.

As opões mais importantes hoje disponíveis são http://, ftp://, file:// e mailto:____@. A presença desta parte no localizador é detectada pela ocorrência do caracter dois pontos (:) antes de caracteres barra de divisão (/) ou ponto (.). Na seção 3, abaixo, indicaremos como o localizador é interpretado se contiver uma dessas opções, qual opção é presumida quando esta parte estiver ausente no localizador, e exemplos.

Endereço internet

Esta parte do localizador indica ao iterpretador como encontrar, na internet, o computador onde o recurso apontado deve estar disponível.

O endereço internet é formado por uma hierarquia de nomes, ou por uma hierarquia de quatro números (entre 0 e 255), separados pelo caracter ponto (.). Em parâmetros de referência, a presença do endereço internet no localizador é detectada pela ocorrência do caracter ponto (.) depois da parte do protocolo e antes de subsequentes barras de divisão (/). Na seção 4 indicaremos como o endereço internet é interpretado, qual computador presume-se conter o recurso apontado quando o localizador não inclui endereço internet, e exemplos.
 
Endereço local

Esta parte do localizador indica ao interpretador como encontrar o recurso apontado no computador que o disponibiliza.

O endereço local é formado por um caminho (opcional) e o nome (incluindo extensão) do arquivo que representa o recurso (também opcional).  Um recurso pode ser o conteúdo de um arquivo digital cujo formato o navegador conheça (ex: documento html, imagem), ou um ponto de acesso a processo de comunicação ou de tratamento de dados (ex: script remoto). O caminho é formado por uma cadeia de nomes de diretórios (representados na interface gráfica de sistemas operacionais por pastas). O formato de nomes de arquivos foi assunto da prática 1.

No caminho, nomes de diretórios são separados pelo caracter barra de divisão (/), que também separa o endereço internet do caminho, e o caminho do nome do arquivo, quando esses ocorrem. Quando o endereço internet não ocorre, o caminho pode iniciar com uma barra de divisão. No parâmetro href o endereço local pode, ainda, conter, ao final, referência a uma âncora interna (mencionada na prática 2), que inicia com o caracter lazanha (#). Em parâmetros de localização, a ausência do endereço local é detectada pela ausência dos caracteres barra de divisão (/), ponto (.) ou lazanha  (#) depois das partes que correspondem ao protocolo e endereço internet. Na sessão 5, abaixo, indicaremos como o endereço local é interpretado, qual recurso presume-se apontado quando o localizador não inclui partes do endereço local (ou todo ele), e exemplos.

3- Protocolos em URLs

http://

Nome é sigla para hypertext transfer protocol. Indica o código através do qual navegadores web requisitam e recebem documentos html de servidores web, e estes atendem e enviam documentos solicitados aos navegadores web.

Um servidor web é um software que "fica escutando" requisiçoes de documentos ou recursos html em um endereço internet, enviando-os quando a recurso solicitado é encontrado no espaço de endereçamento local do sistema onde o servidor opera.  Em linguagem leiga, servidor web seria um tipo de software que faz funcionar a hospedagem de páginas web na internet. Os servidores web geralmente operam em endereços internet de provedores de acesso, mas nem sempre (intranet). Os servidores web mais conhecidos e hoje usados são o Apache (software livre) e o IIS (Internet Information System, proprietário).

Endereços, referências e links compostos com o protocolo http: são chamados absolutos porque a localização não depende do espaço de endereçamento do sistema que solicita o recurso, apenas do sistema que o fornece.

ftp://

Nome é sigla para file transfer protocol. Indica o código (precursor do http na história da internet) através do qual programas gerenciadores de arquivos (como o Windows Explorer e os programas shell de sistemas operacionais) requisitam e recebem arquivos digitais de servidores ftp, e estes atendem e enviam arquivos solicitados aos programas solicitantes.

Os servidores ftp operam de forma semelhante aos servidores web, exceto por não presumir de nenhum programa envolvido o conhecimento do formato dos arquivos requisitados e enviados. No HTML, o uso deste protocolo está restrito a localizadores em parâmetros href.  Quando um link cujo localizador referencia o protocolo ftp: é clicado, ao invés de exibir o conteúdo do arquivo apontado, o navegador pede ao usuário para escolher onde irá gravar cópia desse arquivo, no espaço de endereçamento local do sistema onde o navegador está instalado.

Endereços, referências e links compostos com o protocolo ftp: são também absolutos porque a localização tampouco depende do espaço de endereçamento do sistema que solicita o recurso, apenas do sistema que o fornece.

file://

file significa arquivo. Esse protocolo em um localizador indica ao navegador que o arquivo requisitado não será fornecido por nenhum servidor na internet, devendo ser encontrado no espaço de endereçamento de arquivos no sistema onde o navegador está instalado. 

Quando file: é usado, ou quando é presumido pela ausência de protocolo no localizador, a parte de endereço internet deve estar ausente do localizador, pois não faria sentido.  Nesse caso, se o primeiro caracter não alfanumérico do localizador for um ponto (.), este ponto será interpretado como parte do nome do arquivo solicitado, como veremos na subseção "nenhum protocolo".

Endereços, referências e links assim compostos são chamados relativos porque a localização é relativa ao espaço de endereçamento do sistema que solicita o recurso (no caso, o mesmo sistema que o fornece).

mailto:____@.

mailto é uma contração de "mail to", que significa "correio para". Esse protocolo é um exemplo do que foi comentado na introdução da prática 2, de que a integração proporcionada pela idéia de hipertexto não se restringe a dados de tipos distintos, mas alcança processos de comunicação e de tratamento de dados.

Quando um link que referencia o protocolo mailto:é clicado, ao invés de exibir o conteúdo que estaria sendo apontado pelo localizador, o navegador chama (através de um script interno) o programa de correio eletrônico padrão no sistema onde está instalado, instruindo-o a abrir uma janela de composição de mensagem, com o destinatário preenchido pelo nome de usuário entre o dois pontos (:) e a arroba (@), seguido do endereço internet que completa o localizador (Nesse localizador, a parte do endereço local não faria sentido, devendo ser omitida).

Exemplo: inspecione o cabeçalho da página web dos trabalhos de ICC, ou experimente fazer em sua página um link com referência

href="mailto:rezende@cic.unb.br"
Nenhum protocolo

Quando o protocolo estiver ausente do localizador, qual protocolo será presumido na interpretação URL? A resposta é: depende.

Por razões que serão adiante examinadas, a caixa de localização dos atuais navegadores web se comporta de forma diferente dos parâmetros de localização em código-fonte. Uma das diferenças é o protocolo presumido por default: quando omitido na caixa de localização do navegador, o protocolo presumido será o http:, enquanto nos parâmetros em código fonte será o file:. Em outras palavras, endereços na caixa de localização do navegador são por default absolutos, e nos parâmetros em código-fonte são por default relativos.

Parece natural que a ausência de protocolo na caixa de localização do navegador presuma http:, pois a caixa de localização existe primordialmente para o usuário poder navegar na internet "de memória" e pelo teclado. Doutra parte, também parece natural que a ausência de protocolo no código-fonte presuma file:, pois a linguagem HTML em si não depende da internet. Mas essa diferença implica em consequências no mínimo curiosas. Se voce, por exemplo, digitar na caixa de localização do navegador

      www.cic.unb.br        
 
e teclar "Enter", o navegador "corrigirá" o localizador se a página web correspondente estiver disponível, completando-o e mostrando

   http://www.cic.unb.br     
 
Mas se voce digitar no código-fonte de um documento html

href="www.cic.unb.br"

 na referência de um link, esse link não funcionará, pelo seguinte.

Sendo relativa ao sistema de arquivos onde opera o navegador, a referência desse link é interpretada como se contivesse apenas endereço local, já que endereço internet não faz sentido para o protocolo file:. A interpretação do URL irá então procurar por caminho, nome de arquivo ou referência a âncora interna no localizador. Como não encontra o caracter lazanha (#) no início do localizador, sabe que não se refere a âncora interna. Como não encontra nenhuma barra de divisão, deduz também que o localizador não contém caminho. Resta apenas nome de arquivo, cuja extensão, delimitada pelo último ponto, seria .br. Mas o navegador muito porovavelmente desconhece um formato.br. Desconhecendo-o, não seria capaz de fazer nada com a referência, mesmo que um arquivo de nome www.cic.unb.br porventura existisse localmente.

Resumo: programação é, antes de tudo, atenção aos detalhes.

4- Endereços internet em URLs

Endreços DNS

Quando o endereço internet é formado por uma hierarquia de nomes (conforme descrito na seção 2 acima),  esta parte do localizador (endereço internet) deve estar formada de acordo com um sistema de domínios chamado DNS (Domain Name System). Como exemplo, citamos o endereço do servidor web do departamento de ciência da computação da UnB.

www.cic.unb.br

Endereços internet nesse sistema são chamados endereços DNS. Navegadores web não trabalham internamente com endereços DNS, mas com endereços numéricos equivalentes, com os quais os sistemas interligados em rede pelo conjunto de protocolos denominado TCP/IP (conjunto que constitui a internet propriamente dita) internamente operam. Esses endereços numéricos são chamados endereços IP (Internet Protocol).

Um localizador pode conter, na parte referente ao endereço internet, um endereço DNS, um endereço IP, ou nenhum endereço. Se contiver um endereço DNS, este será traduzido, para um endereço IP equivalente, por um servidor de nomes de domínio (servidor DNS), para que o computador onde opera o navegador possa localizar o computador onde o recurso apontado estaria disponível. Endereços DNS são mais fáceis de memorizar, já que podem ser formados por mneumônicos de organizações, instituições ou países.

Partes de um endereço DNS

___________.____....._____.__________
endereço
DNS:
computadorseta
ou serviço
hierarquia de
domínios
seta  top level
domain
No exemplo acima:

Endreços IP

Quando o endereço internet é um endereço IP, como por exemplo 164.41.14.15 (endereço atualmente equivalente ao DNS www.cic.unb.br), ou após o navegador receber do servidor DNS (que serve à rede onde opera o navegador, ou a do seu provedor de acesso) a tradução do endereço DNS para o endereço IP que hora lhe equivale, os roteadores da internet, trabalhando com os procolos TCP/IP de mais baixo nível, se encarregam de  encaminhar e repassar o tráfego entre o computador do navegador e o computador do servidor web que atende à requisição. Se, por alguma razão, o sistema onde opera o navegador não estiver conectado à internet, ou o servidor DNS que atende ao navegador ou o servidor web no endereço absoluto não estiver disponível, ou estiver disponível mas desconhecer o endereço ou o recurso solicitado,  este recurso não será acessado.

Endereços DNS são mais práticos do que endeços IP para uso na caixa de localização do navegador; mas e quanto ao código-fonte HTML? A desvantagem de se usar endereços IP diretamente no código-fonte é a seguinte: o localizador pode deixar de funcionar com mudanças  na rede onde o recurso apontado estaria disponível, se endereços IP de serviços como ftp e http forem lá alterados. Quem oferece serviços na internet tem interesse em preservar seus nomes de dominio (através do qual se tornam conhecidos no ciberespaço), mas apreciam a liberdade de poder reconfigurar internamente seus dispositivos e recursos, pelas mais diversas razões.

Nenhum endereço internet

Quando o endereço internet estiver ausente do localizador, qual computador será presumido na referência? A resposta novamente é: depende.

Depende do protocolo e da posição do localizador. A tabela seguinte busca mapear como o localizador será interpretado, em cada caso quando não contiver enderço internet, (tabela baseada no Mozilla):

Na ausência de endereço internet, qual computador se presume localizar?

Protocolo
Localizador na
Caixa de localização do Navegador
Localizador em
Parâmetro no Código-fonte
http://
Tenta completar nome no endereço
 local como DNS www.___.com
Erro: protocolo incompatível
com endereço apenas local
file://
Computador onde
opera o navegador
Raiz do computador onde opera navegador,
se endereço local começa com /
[ ausente ]
Tenta completar http://www.___.com
(computador onde opera o navegador,
se endereço local começa com /)
Diretório onde o navegador
obteve o documento contendo o URL
(Raiz, se endereço local começa com / )

5- Endereços locais em URLs

Como já dito na seção 2, a parte do localizador referente ao endereço local é formada por caminho (opcional), que consiste numa cadeia de nomes de diretórios, nome (incluindo extensão) do arquivo que representa o recurso apontado (também opcional), e -- se o recurso for um documento html -- referência opcional a uma âncora interna. Como exemplo, citamos o endereço da página web da nossa turma (com o endereço DNS em cinza e o endereço local em verde-escuro), incluindo referência à âncora interna localizada na seção "Critérios de avaliação"

www.cic.unb.br/docentes/pedro/iccd.html#c

Partes de um endereço local
....../___/............/________.__#__________
endereço
local:
  caminho seta
(c. de diretórios)
nome de
arquivo
seta  âncora
interna (.htm)
Caminho

O caminho é formado por uma cadeia de nomes de diretório, que pode ser vazia, onde nomes de diretório são separados por uma barra de divisão (/). Esses nomes não devem conter caracteres ASCII extendido, espaço em branco ou ponto (.). Se contiverem, protocolos como o http podem usar sequências de escape URL para recodificá-los (com sintaxe %nn, nn o valor numérico do caracter ASCII em hexadecimal).

O primeiro diretório do caminho é o seu ponto de entrada, e o último é o seu ponto de chegada. O ponto de entrada é onde a busca do recurso no computador localizado será iniciada, e o ponto de chegada é o diretório onde esse recurso estaria armazenado ou disponível. Se o caminho for vazio, o ponto de entrada será já o diretório onde se deve encontrar o recurso apontado. O nome subsequente na cadeia deve ser o de um subdiretório do anterior. Num parâmetro de localização, a interpretação do caminho em um URL será a seguinte
Arquivo e referência a âncora interna

Se ocorrer no localizador, o nome do arquivo que representa o conteúdo apontado deve obedecer às mesmas regras que os nomes no caminho (exceto à regra que exclui o ponto, necessário para iniciar a extensão do nome do arquivo). Essas regras servem para evitar efeitos colaterais indesejáveis no funcionamento de protocolos através de diferentes sistemas, com diferentes modelos e marcas de navegadores e servidores web. A extensão do nome do arquivo, junto com o protocolo, informam ao navegador como lidar com o recurso apontado.

Uma referência a âncora interna, iniciada com o caracter lazanha (#), só pode ocorrer em parâmetro href e em duas situações
  1. Com o nome do arquivo presente no localizador, sendo sua extensão .htm ou .html (como no exemplo do início desta seção).
  2. Com o caminho e nome do arquivo ausentes, sendo a referência à âncora interna todo o localizador, formando um link interno
Exemplo de referência para link interno

href="#c"

Se o exemplo de endereço no início da seção funcionar em um link, o exemplo acima poderia ser usado dentro do documento apontado, em um link interno. Para que uma referência a uma âncora interna funcione, o documento html apontado precisa conter a âncora referenciada. Âncoras e links internos serão o assunto da próxima sessão. Antes, porém, examinaremos o efeito da ausência de nome de arquivo em links externos.

"Site" e "home page"

Se o nome do arquivo estiver ausente no localizador de um link externo, o navegador presume que o recurso apontado seja um arquivo de nome index.html. Se exisitir, o documento html correspondente -- e às vezes o endereço -- costuma ser chamado de home page. Se tal arquivo não existir no diretório que é ponto de chegada do caminho, o navegador listará -- se o servidor web estiver configurado para permiti-lo -- os nomes dos itens (arquivos e subdiretórios) contidos nesse diretório, ao estilo de um navegador de sistema. 

Se o endereço local inexiste, ou for apenas uma barra de divisão ao final de um endereço internet válido, o localizador irá presumir que a referência seja a um arquivo de nome index.html no diretório raiz do servidor web. Neste caso, o documento html correspondente costuma ser chamado de site (sítio).  Alguns, entretanto, usam site como sinônimo de home page, ou simplesmente como sinônimo de página web disponível na internet.

6- Âncoras internas

A diretiva a não serve só para formar links. Ela serve também para marcar a posição onde ocorre. Como o conceito de página web não corresponde, devido a suas dimensões variáveis e ilimitadas (especialmente a vertical), ao de página de livro, tais marcações podem cumprir, no documento html, função equivalente ao do número da página num livro de papel: a função de facilitar a indexação de conteúdos. Em páginas web, a indexação é feita através de links. Um link interno funciona, pois, como uma referência feita, em um ponto do documento, a um outro ponto do mesmo documento, esse outro ponto marcado por uma âncora interna.

Para que uma instância da diretiva a funcione como âncora interna, ou seja, como marco referenciável, ela precisa ser distinguida das demais instâncias da mesma diretiva (a) que porventura ocorram no mesmo documento. Esta distinção é dada por um atributo importantíssimo em programação: nome. Se, por exemplo, uma instância da diretiva a não tiver parâmetro href, mas tiver nome, ela não formará link mas servirá para marcar sua posição no documento. Poderá, assim, funcionar como âncora interna. Uma âncora interna será formada, portando, obedecendo-se a seguinte sintaxe:


<a ... name="______________">      ...        </a>
              âncora interna: nome da  âncora seta

seta  extensão da âncora
       

A interpretação á ea  seguinte: o valor atribuído ao parâmetro name nomeia a instância da diretiva a, identificando essa instância no documento html como uma âncora interna. Este valor passa a ser, pois, o nome dessa âncora interna. Esse nome é, pois, o que deve seguir ao caracter lazanha (#) em qualquer link que aponte para a posição onde a nomeada âncora ocorre no documento (observe que se a instância for apenas âncora interna, não contendo o parâmetro href, sua extensão perde a utilidade).

Assim, para que o exemplo de endereço na sessão anterior, precedido por http://, funcione adequadamente como localizador de um link absoluto

http://www.cic.unb.br/docentes/pedro/iccd.html#c,

O documento html por ele referenciado deve conter uma âncora interna formada por uma instância da diretiva a de nome c, ou seja, deve conter em seu código-fonte

<a ... name="c" ... > ... </a>
Na posição para a qual o enderço acima estará apontando.

7- Praticando com URLs relativos

Agora que já sabemos o suficiente sobre a interpretação de URLs, vamos praticar o uso de URLs relativos e links internos em nossas páginas web. 
Imagens que "acompanham" arquivos html

Vamos diversificar o exercício de inserção de imagens da prática 2. Manteremos a inserção de uma imagem com referência absoluta, enquanto buscamos uma outra imagem para iserir na mesma página, esta com referência relativa. Na primeira parte do roteiro, vamos fazer referências relativas para arquivos de imagens apenas. A mesma coisa poderia também ser feita com links, apontando para outros arquivos html no mesmo computador. Para simplificar esta prática, os links com referência relativa que aqui faremos apontarão para o próprio documento html, ou seja, serão links internos.

Para inserir em nossa página (a ser armazenada em exemplo3.htm) uma imagem através de referencia relativa, precisamos de um arquivo de imagem armazenado no mesmo computador.  Para simplificar este roteiro, vamos fazer referência (na metalinguagem e nos parâmetros de localização) a um diretório de trabalho que cada aluno possa claramente identificar.

Caso esteja usando a conta pessoal para logar na rede do laboratório de ICC, o aluno terá acesso a um diretório individual, que, abstraída a linguagem de interface do sistema operacional sendo usado, normalmente é chamado de diretório home (No windows, o diretório individual do aluno deve aparecer como um drive remoto, ou seja, um "disco virtual" conectado ao computador via rede, com nome formado a partir do seu número de matrícula). Caso não esteja usando sua conta pessoal, crie um diretório em algum disco local chamado "home". 

Vamos inaugurar seu diretório individual, doravante aqui chamado home, lá gravando, via editor ASCII, o arquivo exemplo3.htm, contendo a estrutura mínima de um documento html, conforme explicado no roteiro da prática 1 - pedalando a programação em html. (Se voce quiser repetir o roteiro desta prática 3 em seu computador pessoal, sugerimos que crie um diretório no sistema de arquivos local, digamos, de nome "ICC", para ser o seu diretório de trabalho home naquele computador).

  1. Repita a parte da prática 2 que insere (agora em exemplo3.htm) link e imagem através de referência absoluta. Ao pedalar testando a visualização de sua página, não feche a janela com esse roteiro: para abrir sua página com o mesmo navegador web sem "perder de vista" este roteiro, abra nova janela no menu "Arquivo" (File), comando "Novo" ("New"), subcomando "Janela" ("Window"), e, nessa nova janela, a partir do comando "Abrir arquivo" (Open File), navegue no sistema de arquivos local até encontrar seu diretório home e seu arquivo exemplo3.htm.

  2. Procure e escolha, onde puder encontrar, um arquivo digital de imagem inofensiva (no computador que voce está usando ou na internet, conforme explicado na prática 2), e copie para o mesmo diretório home (onde está armazenado seu exemplo3.htm), esse arquivo. Se voce estiver usando o navegador web para localizar arquivo de imagem na internet, pode comandar a cópia clicando com o botão direito do mouse sobre a imagem escolhida, escolhendo no menu local o comando "Salvar Arquivo de Imagem" (Save Image File), e navegando na janela "salvar arquivo" até abrir seu diretório home, onde deve salvar o referido arquivo de imagem.

  3. Volte à janela de edição do código-fonte de exemplo3.htm.  Escolha um ponto do hipertexto onde quer a imagem inserida, e digite a diretiva para inserção da imagem escolhida. Como o arquivo da imagem encontra-se no mesmo diretório que exemplo3.htm, a referência pode ser local, com caminho é vazio. O caminho é vazio porque o ponto de partida da referência relativa -- o diretório onde está o arquivo contendo a instância da diretiva -- é o mesmo ponto de chegada  -- o diretório onde está o arquivo com a imagem --. Assim, a referência terá a forma.

  4. src="_________.____"
    referência relativa
     c/ caminho vazio:
    nome e exentsãoseta
    do arquivo de imagem

    Pedale para testar sua diretiva. Se não funcionar, releia, refaça, reteste. Se funcionar, ou seja, se os links e as imagens inseridas com referência absoluta e relativa aparecem corretamente, vá ao passo seguinte.

  5. Volte à janela de edição do código-fonte de exemplo3.htm.  No menu "Arquivo" (File), acione o comando "Salvar como". Navegue até outro diretório, por exemplo o diretório "Meus documentos" (My Documents"), e lá salve uma cópia do arquivo que voce está editando, com um nome distinto, digamos exemplo3b.htm,

  6. Volte à janela do navegador que mostra exemplo3.htm. No menu "Arquivo" (File), acione o comando "Abrir Arquivo" (Open file) e procure a cópia de sua página que voce gravou nesse outro diretório, aqui chamado exemplo3b.htm. Abra a página exemplo3b.htm e veja o que acontece na visualização. Explique a si mesmo, e ao colega ao lado, o que está acontecendo de errado com esta página, e porque.
Referências Absolutas e Relativas: Conclusão

A conclusão que se pode tirar é a seguinte: referências relativas são úteis para links e imagens cujos arquivos "andam juntos" com o documento onde são inseridos, mas seu funcionamento depende dos respectivos arquivos "andarem juntos". Por sua vez, referências absolutas são úteis para links e imagens cujos arquivos estão disponíveis na internet, independente da distância ou posição relativa entre o documento que aponta e os objetos apontados, mas seu fucionamento depende do navegador que mostra o link estar conectado à internet, e dos objetos apontados estarem disponíveis.

Links internos

  1. Reabra, na janela de edição de código-fonte (editor ASCII), o arquivo exemplo3.htm que está no seu home. Precisamos agora inserir dados textuais suficientes no seu código-fonte para podermos testar o funcionamento dos âncoras e links internos. Copie a estrutura de diagramação de hipertexto mostrada abaixo, para algum ponto do corpo (código-fonte) do seu documento html, de sorte a podermos inserir e testar âncoras e links internos. Salve o arquivo.

    <ul><a name="ind">Indice</a>    <!-- minha primeira ancora-->
        <li>Introdu
    &ccedil;&atilde;o
        <li>Desenvolvimento
        <li>Conclus
    &atilde;o
    </ul>

    <a name="introducao"><h2>T&iacute;tulo Introdu&ccedil;&atilde;o</h2></a><br>
       Texto da introdu
    &ccedil;&atilde;o<br>   <!-- meu primeiro link interno-->
       <a href="#ind">Volta para &iacute;ndice</a>
       <br>
       <p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>

       <a name="desenvolvimento"><h2>Tiacute;tulo Desenvolvimento</h2></a><br>
       Texto do Desenvolvimento<br>
       <a href="#ind">Volta para
    &iacute;ndice</a><br>
      
    <p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>

       <a name="conclusao"><h2>T&iacute;tulo Conclus&atilde;o</h2></a><br>
       Texto da Conclus
    &atilde;o<br>
       <a href="#ind">Volta para &iacute;ndice</a><br>
      
    <p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>

  2. Vá a uma janela de navegador web (que não seja esta), abra o arquivo exemplo3.htm (que deve estar em seu home). Precisamos agora testar as âncoras e links internos introduzidos pelo trecho de código acima em sua página. Teste os links cuja face diz "volta para índice".  Para ficar completa a navegação interna desta página, falta formar links na face dos ítens do índice (marcados com a bolinha do parágrafo), apontando para as âncoras internas que marcam as correspondentes posições no documento. Esta é a próxima tarefa. A sintaxe adequada para esses links internos está exemplificada nos links que já funcionam, os "volta ao índice" Insira-os, salve o arquivo, e teste os novos links.

  3. Para completar, acrescente em sua página um link externo contendo uma âncora interna. Faça o link, por exemplo, apontar para uma sessão da página do curso de ICC turma D (como exemplo, veja o link na seção 6 desta prática).

Pedale e divirta-se!