Actividades

I
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

Com o conjunto de actividades que se segue

pretende-se abordar os principais comandos
da linguagem HTML com a finalidade da
criação de uma Home Page pessoal de um
dos elementos do grupo.

1. Inicie a operação do NETSCAPE COMPOSER.

2. Com a sequência de comandos VIEW-PAGE SOURCE visualize os

códigos HTML que foram automaticamente gerados para fornecer suporte
ao novo documento. Minimize ou feche a janela de visualização para
regressar ao NETSCAPE COMPOSER.

3. Na primeira linha escreva o seguinte texto: "PÁGINA PESSOAL".

Seleccione-o e formate-o como cabeçalho de primeira ordem (HEADING
1) escolhendo para tal a opção da caixa de estilos da barra de
formatação.

4. Centre o título da sua HOME PAGE, seleccionando-o e escolhendo o

botão adequado na barra de botões de alinhamento

5. Insira barras horizontais antes e depois do título da sua HOME PAGE,

colocando o cursor no início e no fim do texto e pressionando o botão
adequado da barra de ferramentas de composição.

1
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

6. Retire às duas barras o efeito tridimensional, colocando o cursor do rato

sobre cada uma delas e fazendo duplo-clique. Na caixa de diálogo que
surge, desactive a opção 3D SHADING

7. Altere a dimensão de uma das barras horizontais até ela possuir

comprimento igual ao do texto. Para tal arraste uma das suas
extremidades. Em seguida, faça duplo-clique sobre a barra e copie o
valor das suas dimensões para a caixa de propriedades da outra, por
forma a obter duas barras semelhantes a enquadrarem o texto de título

8. A seguir ao título, crie uma tabela com 1 linha e 2 colunas. Para tal
pressione o botão adequado da barra de ferramentas de composição e
preencha os primeiros campos da caixa de diálogo que surge:

9. Visualize o aspecto da sua folha HTML. Para tal, pressione o botão da

barra de ferramentas de composição indicado na figura seguinte. A
aplicação vai-lhe indicar que é necessário gravar o documento HTML.

10. Pressione o botão SAVE, grave o documento com o nome INDEX.HTM no

directório principal da sua disquete de trabalho e pressione o botão de
OK. Na caixa de diálogo seguinte, escreva um título sugestivo para a sua
Home Page pessoal. Não se esqueça que este título será a primeira
informação do seu documento que será visualizada, sendo também, por
defeito, o texto descritivo quando este for refenciado por um bookmark.
Escreva, por exemplo "PÁGINA PESSOAL DE……"

2
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

11. Abandone o Netscape Navigator fazendo FILE-EDIT PAGE e regresse ao

Netscape Page Composer e torne não visíveis os limites da tabela,
colocando o cursor sobre a mesma, pressionando o botão do lado direito
do rato e escolhendo a opção TABLE PROPERTIES do menu que surge.

Na opção TABLE da caixa de diálogo que surge, coloque o valor 0 na

janela do campo BORDER LINE WIDTH.

12. Na célula do lado esquerdo crie o subtítulo "IDENTIFICAÇÃO"

procedendo de forma análoga à actividade 3 mas escolhendo o estilo
HEADING 2

13. Abaixo deste sub-título escreva o seu nome, morada, número de telefone
e endereço de E-mail (se não tem, invente um!). Coloque o cursor na
linha com o seu nome e pressione o botão de inserção de marcadores.

14. Seleccione de seguida as restantes linhas e indente-as à direita

pressionando uma vez o botão indicado na figura que se segue:

15. Utilizando o mesmo procedimento da actividade 13, insira marcadores nas

linhas que indentou.

3
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

16. Altere os marcadores a seu gosto, bastando para tal colocar o cursor
sobre a linha desejada, pressionar o botão do lado direito do rato e
escolher a opção PARAGRAPH/LIST PROPERTIES do menu que surge.

Escolha de seguida a opção desejada no

campo BULLET STYLE da caixa LIST da
janela de diálogo que surge.

17. Seleccione o texto do seu endereço de E-mail e pressione o botão de links

da barra de ferramentas de composição.

No campo LINK TO A PAGE LOCATION OR LOCAL FILE: escreva

MAILTO: seguido do seu endereço de correio electrónico. Pressione o
botão de OK e, utilizando o procedimento indicado no ponto 9, visualize a
sua página no Netscape Navigator. Qual a funcionalidade do link que
acabou de criar?

18. Na célula do lado direito vai inserir a sua fotografia digitalizada. Para tal
deve utilizar uma foto tipo passe ou o seu BI e o scanner que existe na
sala. O programa de digitalização a usar é HP DESKSCAN e deve
guardar um pequeno ficheiro com a imagem na sua disquete de trabalho
no formato GIF ou JPG.

19. Depois de ter digitalizado a imagem, coloque o cursor na célula do lado

direito, usando a tecla de tabulação se tiver o cursor dentro da tabela e
pressionando de seguida o botão de INSERT IMAGE da barra de
ferramentas de composição.

Na caixa de dialogo que surge escolha CHOOSE FILE e procure a foto

digitalizada na drive A:

4
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

Antes de fazer OK carregue no botão ALT. TEXT/LOWRES… e na janela

Aternate Text (texto alternativo) escreva "foto pessoal". Esta informação é
importante para os utilizadores de browsers sem capacidades gráficas.

20. Recorrendo de novo ao procedimento já anteriormente indicado, visualize

o aspecto actual da sua Home Page pessoal. Coloque o apontador do
rato sobre a fotografia. Que acontece?

21. Minimize o Netscape Navigator e inicie uma sessão de trabalho com o

programa de desenho PAINT SHOP PRO para capturar ícones e imagens
para utilizar na sua Home Page pessoal. Para tal, faça FILE-BROWSE e
indique na caixa de diálogo que o sub-directório de cache do Netscape.

Será, de imediato iniciada a criação de uma folha com um grande

conjunto de reduções (thumbnails) das imagens existentes nesse
directório. Escolha dois ou três icones e um ou dois fundos, dê-lhes
nomes sugestivos e copie-as para a sua disquete de trabalho.

Para tal deve seleccionar a imagem desejada dando um clique do rato

sobre ela e fazer IMAGEFILE-RENAME…, escrevendo de seguida o novo
nome (mas mantendo a mesma extensão) na caixa que surge. Deverá
depois fazer IMAGEFILE-COPY… e indicar como destino o directório
principal da sua disquete de trabalho, para copiar o ficheiro.

5
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

22. Regresse de novo à janela de operação do NETSCAPE COMPOSER e

com a sequência de comandos FORMAT - Page Colors and Properties ,

adicione à sua página um fundo

escolhido fazendo as respectivas
escolhas no menu COLORS AND
BACKGROUND - janela
BACKGROUD IMAGE ( USE
IMAGE / CHOOSE FILE / OK).

23. Salve o documento e imprima-o nos seus dois diferentes formatos: código
HTML e aspecto de visualização no browser. Para imprimir o código
HTML gerado é necessário adicionar um editor de html. Neste caso use o
"Notepad" do Windows.

24. Na página principal e por debaixo da tabela que criou coloque o seguinte
texto com o formato apresentado:

Profissão
Conhecimentos Específicos
Interesses
Profissionais
Hobbies

6
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

25. Crie as páginas html seguintes (por agora vazias) corrrespondentes às

ligações que propomos:

Profissão
(profiss.htm – conterá uma breve discrição da
profissão, local onde exerce)
Conhecimentos Específicos
(conhesp.htm – conterá conhecimentos de
idiomas, ou áreas especificas)
Interesses
Profissionais (profiss1.htm)
Hobbies
(hobbies.htm - procure na Web locais
de interesse e faça da sua página as
ligações para esses sitios)

26. Em cada uma das páginas que criou na actividade anterior coloque a
imagem de aviso “EM CONSTRUÇÃO” que se encontra na sua disquete
de trabalho.

27. No rodapé da primeira página coloque as seguintes informações:

 Um agradecimento ao serviço que lhe diponibilizou o espaço no
servidor
 O seu nome
 A data da última modificação (no formato 12 Abril 1997)

7
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

Guia de Operação Rápida do WS_FTP

Um dos melhores programas para FTP em PC é o WS_FTP que tem

duas versões: a 16 bits para Windows 3.1 e Windows for Workgroups e a 32
bits para o Windows 95 e Windows NT. Ambas as versões do software
funcionam da mesma maneira:


Depois de estabelecida a ligação à Internet e de iniciada uma
sessão com o WS_FTP, a primeira coisa a fazer é pressionar o
botão de CONNECT do canto inferior esquerdo o que origina o
aparecimento da caixa de diálogo SESSION PROFILE que serve
para indicar à aplicação o endereço do „site‟ de FTP que se
pretende contactar.


Preencha o nome do servidor no campo HOST NAME e o caminho
dos directórios no campo REMOTE HOST.

1
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.


Para terminar, escreva „anonymous‟ no campo USER ID BOX (que
deve conter a identificação do utilizador para o server de FTP) e o
seu endereço de correio electrónico no campo PASSWORD (uma
regra elementar de cortesia).


Pressione o botão de OK


O software estabelece ligação com o „site‟ de FTP e mostra a lista
dos ficheiros contidos na directoria escolhida. Escolha na janela da
esquerda a directoria do disco rígido local para onde os ficheiros
vão ser carregados.


Seleccione o ficheiro desejado na janela da esquerda clicando
sobre o seu nome na lista.


Para o carregar para o seu computador, clique na seta do topo que
aponta para a esquerda. (ADIVINHOU! se seleccionar um ficheiro
do seu computador na janela da esquerda e pressionar na seta que
aponta para a direita, envia esse ficheiro para o computador
remoto!)

2
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

Guia de Operação Rápida do

ByteCatcher

Recentemente têm surgido várias aplicações que utilizam o interface

do Explorer do Windows no processo de transferência de ficheiros entre
computadores. Um destes programas de FTP é o ByteCatcher, aplicação de
shareware que apresenta a interessante característica de permitir completar
transferências incompletas de ficheiros. O seu funcionamento geral é o
seguinte:


Depois de estabelecida a ligação e de iniciada uma sesão com o
BYTECATCHER, a primeira coisa a fazer é pressionar o botão de
QUICK que se encontra na janela do lado direito, o que origina o
aparecimento da caixa de diálogo SESSION PROFILE que serve
para indicar à aplicação o endereço do „site‟ de FTP que se
pretende contactar.

NOTA: Se pretender um maior controlo sobre o tipo de ligação,

pode pressionar o botão NORMAL, que o conduzirá à seguinte
caixa de diálogo a partir da qual pode até aceder a uma base de
dados de endereços:

1
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.


Preencha o nome do servidor no campo CONNECT TO ADDRESS
e escreva o seu login (a identificação do utilizador para o server de
FTP) no campo USER NAME e a sua senha no campo
PASSWORD. Se pretender fazer um FTP anónimo, deverá apenas
seleccionar a caixa ANONYMOUS LOGIN.


Depois de pressionar o botão de OK é estabelecida a ligação,
trocada a informação que é listada na janela superior (log windows)
e surge a estrutura de directórios do computador remoto na janela
do lado direito


Utilizando a metodologia de navegação do Exolorer do Windows
95, „navegue‟ na estrutrura de directórios do computador remoto
até localizar o(s) ficheiro(s) pretendido(s).


Marque-o(s) clicando sobre a(s) caixa(s) à esquerda do(s) ícone(s)
por forma a seleccioná-la(s).

2
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.

NOTA: Em alternativa, poderá seleccionar o nome de um ficheiro

clicando sobre ele e pressionar o botão direito do rato por forma a
fazer surgir um menú. Escolha depois a opção DOWNLOAD
SELECTED FILES


De imediato é iniciado o processo de transferência de ficheiros. É
mostrada uma janela que mostra informação de controlo.

NOTA: Se este processo for interrompido por alguma razão, basta

reiniciá-lo que automaticamente a aplicação detecta a existência de
parte do ficheiro e questiona o utilizador no sentido da sua
reutilização.

3
 Desenvolvimento de
Projectos Educativos
em H.T.M.L.


O procedimento de transferência de ficheiros do computador local
para o computador remoto – que possibilita a publicação na
Internet – é simétrico do que foi descrito.