Conf Web

Licenciamento de Uso
Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp e

distribuído sob os seguintes termos:
1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser

reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou eletrônico,
desde que os termos desta licença sejam obedecidos, e que esta licença ou referência a
ela seja exibida na reprodução.
2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas

externas, sua origem e atribuições de direito autoral (o Centro de Computação da
Unicamp e seu(s) autor(es))
3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer

informação contida neste documento devem ser regidas por estas mesmas normas de
distribuição e direitos autorais. Ou seja, não é permitido produzir um trabalho derivado
desta obra e impor restrições à sua distribuição. O Centro de Computação da Unicamp
deve obrigatoriamente ser notificado (treinamentos@ccuec.unicamp.br) de tais trabalhos
com vista ao aperfeiçoamento e incorporação de melhorias aos originais.
Adicionalmente, devem ser observadas as seguintes restrições:

• A versão modificada deve ser identificada como tal
• O responsável pelas modificações deve ser identificado e as modificações datadas
• Reconhecimento da fonte original do documento
• A localização do documento original deve ser citada
• Versões modificadas não contam com o endosso dos autores originais a menos que
autorização para tal seja fornecida por escrito.
A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de qualquer
tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O Centro de
Computação da Unicamp não assume qualquer responsabilidade sobre o uso das informações
contidas neste material.
Índice
O que quer dizer Redes e Internet ? ................................................................................................ 1
Internet .......................................................................................................................................... 1
Home Page, Páginas Web, Site, HTML, Hipertexto, Tags?............................................................ 2
O que quer dizer HTML? .............................................................................................................. 2
Hipertexto...................................................................................................................................... 2
Páginas Web................................................................................................................................. 2
“Home Page” ou Página principal ................................................................................................ 2
É preciso estar conectado para visualizar a página que criei? ................................................... 3
Os Navegadores (browser) .......................................................................................................... 3
Servidor Web ................................................................................................................................ 3
Para criar uma página, você precisa:........................................................................................... 3
Editores Gráficos .......................................................................................................................... 3
As Tags do HTML ......................................................................................................................... 4
Estrutura básica em html.................................................................................................................. 4
Criando seu primeiro documento Html............................................................................................. 5
Meta informações <meta>................................................................................................................ 6
Exercício ........................................................................................................................................... 7
Principais Tags ................................................................................................................................. 8
Trabalhando com paleta de cores.................................................................................................. 11
Atributos <body>......................................................................................................................... 11
Trabalhando com tabelas ............................................................................................................... 12
Trabalhando com frames................................................................................................................ 15
Segundo exemplo de frame ....................................................................................................... 16
Frames........................................................................................................................................ 17
Principais Tags ........................................................................................................................... 17
Eliminação das bordas dos frames:........................................................................................... 17
Eliminação do espaço ente os frames:...................................................................................... 17
Atributos <frame> ....................................................................................................................... 18
Margem:...................................................................................................................................... 18
Barra de rolagem:....................................................................................................................... 18
Eliminação da barra de rolagem ................................................................................................ 18
Trabalhando com Formulários ....................................................................................................... 19
Mapeamento de Imagens ............................................................................................................... 20
Mapas Clicáveis.......................................................................................................................... 20
Código HTML.............................................................................................................................. 20
O formato da área (SHAPE) podem ser .................................................................................... 20
Fases na construção de um site .................................................................................................... 21
Dica de como organizar e estruturar a navegação de um site.................................................. 21
Veja aqui alguns exemplos de navegação: ............................................................................... 22
Próxima etapa do planejamento................................................................................................. 24
Composição de uma equipe na construção de um Website: .................................................... 24
Como utilizar o Editor Netscape Composer................................................................................... 25
Como utilizar a Barra de Ferramentas de Composição ............................................................ 26
Construindo uma Página utilizando o Editor Netscape Composer ........................................... 27
Criando um diretório para edição ........................................................................................... 27
Criando um novo documento (nova página) .......................................................................... 27
Como utilizar as Propriedades da página .................................................................................. 27
Objetos a serem usados na edição............................................................................................ 29
Os principais recursos ou objetivos a serem trabalhados pelo editor são: ............................... 29
Como utilizar a Barra de Ferramentas de Links ........................................................................ 31
Os principais recursos ou objetos a serem trabalhados pelo editor são:.................................. 32
Como utilizar a Barra de Ferramentas de Image Properties ..................................................... 32
Horizontal Line ............................................................................................................................ 33
Tabela (configurações específicas) ........................................................................................... 33
Salvando um arquivo .................................................................................................................. 35
Visualizando a página ................................................................................................................ 35
Como transferir sua página (dados) via WSFTP para o servidor:................................................. 36
Como usar: ................................................................................................................................. 36
Dicas:.............................................................................................................................................. 39
Escolha o tema de sua página ................................................................................................... 39
Faça o seu site com qualidade e simplicidade .......................................................................... 39
Crie uma pasta e diretórios para salvar seus arquivos.............................................................. 39
Procure um provedor de páginas na Internet ............................................................................ 39
Divulgue o seu site ..................................................................................................................... 39
Referência Bibliográfica.................................................................................................................. 40
Última atualização em 10/01/2003

Confecção de Web Pages - Básico
O que quer dizer Redes e Internet ?

Para que você possa entender o que é e como funciona a Internet é necessário primeiro
compreender o que é uma rede de computadores. Uma rede de computadores consiste,
na forma mais simples de sua definição, na conexão de diversos computadores por meio
de cabos e outros tipos de hardware. Podendo trocar dados entre si.
A interação entre computadores envolve a movimentação de muitos dados, mas é difícil

de se mover muitas coisas, incluindo-se dados, através de uma longa distância. Então a
interação de computadores normalmente começa com computadores no mesmo escritório
ou no mesmo prédio conectados a uma rede local.
Saiba mais sobre estrutura e funcionamento da Internet

(http://www.ccuec.unicamp.br/treinamentos/naveg40/oqueeh1.html)
Internet
É uma interconexão de diversas redes através de linhas de alta capacidade chamadas
Backbones, construídos para comportar o grande tráfego de informações que circulam na
Internet. É um local público e não pertence nem é operada por nenhuma empresa.
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 1

Home Page, Páginas Web, Site, HTML, Hipertexto, Tags?

Vamos entender melhores o que cada termo deste quer dizer, já que os pronunciamos
tantas vezes.
O que quer dizer HTML?

HTML (Hypertex Markup Language) que significa Linguagem de Marcação de Hipertexto.
Esta e uma linguagem dedicada à construção de páginas Web.
Hipertexto
É o conceito que possibilita a "navegação" entre segmentos de texto independentemente
de sua seqüência linear ou de sua localização, o leitor salta de uma informação a outra,
não necessariamente numa ordem seqüencial.
Essa linguagem tem como finalidade básica formatar o texto exibido e criar ligações entre
as páginas da Web, criando assim documentos com o conceito de hipertexto.
Páginas Web
As páginas são documentos de hipertexto. Estão gravados em servidores da Internet
podem ser acessadas em qualquer parte do mundo. Uma página WEB também pode ser
chamada de home page. Ao iniciar o browser, será carregada uma página definida na
configuração do programa como página inicial.
“Home Page” ou Página principal

A página de entrada ou página inicial.
Uma apresentação da Web é um conjunto de páginas Web estruturadas sobre um
determinado conteúdo, este conteúdo é aquilo que você está colocando na Web.
Informações, textos , imagens, ilustrações, programas, textos históricos, diagramas,
jogos, etc. Tudo isso é conteúdo. Esta apresentação, como outras, ficam armazenadas
em um local chamado Site.

É preciso estar conectado para visualizar a página que criei?

Para que o conteúdo de um documento HTML possa ser formatado e exibido na Internet
devemos usar um programa chamado browser, o navegador. Ele lê o conteúdo do
arquivo, interpreta os comandos e exibe sua página.
O browser funciona independente de se estar conectado a Internet. A melhor forma de se

trabalhar desenvolvendo uma página HTML é off-line, desconectado. Primeiro você cria
as páginas em seu computador e as testas por meio do browser. Depois, deve colocá-las
em um servidor Web para que outras pessoas também possam visualizá-la.
Os Navegadores (browser)
Para visualizar toda informação disponível na Internet é necessário um Browser,
navegador. Há vários disponíveis no mercado. Os mais conhecidos são o Internet
Explorer e Netscape Navigator.
Servidor Web
São computadores equipados com software que permite "servir" a uma rede de
computadores. Quanto mais potente o servidor maior e melhor poderá ser a rede por ele
atendida.
São máquinas de alta capacidade, com grande poder de processamento e conexões

velozes. Podemos usar como exemplo a máquina Obelix, que atende a Unicamp.
Para criar uma página, você precisa:

• ter conhecimentos básicos da linguagem html ;
• de um editor de textos para gerar o código fonte;
• de um browser para visualizar as páginas.
Editores Gráficos
O uso dos editores permitem que o autor crie uma página sem conhecer os códigos da
linguagem HTML, o código pode ser escrito usando o mais simples editor de texto, como
o bloco de notas do Windows. Porém a forma mais prática e produtiva é utilizar um editor
HTML.
Há vários no mercado como: FrontPage da Microsoft, Netscape Composer,
Dreamweaver da Macromedia, GoLive da Adobe, etc.

As Tags do HTML
As páginas HTML são documentos textos que podem ser editados em qualquer editor de
texto simples (Notepad, por exemplo). Os arquivos HTML padrão possuem extensão .htm
ou .html e seus comandos são chamandos de Tags, que informa ao navegador como será
formatada a página.
As Tags, são marcas padrões utilizadas para fazer todas as indicações necessárias ao
browser.
Tags são os elementos do Html encarregados de realizar esta formatação da qual estou
falando. São com estes comandos, ou melhor, com estas tags que você, por exemplo,
fará com que uma fonte fique na cor vermelha, ou mesmo que esta fonte seja Arial ou
Verdana.
Existem diversas tags, muitas mesmo, e cada uma possui uma função diferente. Ou seja,
no World você possui o botão centralizar , no Html você possui a Tag <center>, no
World você possui o botão Italico , em Html você possui a Tag <I>
Como em qualquer linguagem, os comandos têm uma sintaxe própria e seguem algumas
regras:
• As Tags aparecem sempre entre os sinais de "menor que" (<) e "maior que" (>).
• As Tags são geralmente usadas aos pares, sendo que a Tag de finalização é
precedida de uma barra (/).
Basicamente tudo o que você for fazer com a html necessitará de código, tag. Todo
documento Html possue um código fonte, que é na verdade a página em si, só que com
todas as tags visíveis.
E o melhor disso tudo é que você pode, por exemplo, ver como esta página foi feita sem
nenhuma dificuldade. Clique com o botão direito do mouse sobre a página e escolha a
opção "Visualizar Código Fonte".
Estrutura básica em html

<HTML></HTML> Envolvem todas as seções de um documento (HEAD e BODY).
<HEAD></HEAD> Contém parâmetros de configuração do documento.
<TITLE></TITLE> título da Home Page
<BODY></BODY> Contém o conteúdo da Home Page

Criando seu primeiro documento Html

Vamos criar o primeiro documento Html. Para isso abra seu Notepad ou seu editor de
textos preferido e vamos construir nossa primeira página Html de exemplo, veja o código:
<html>
<head>
<title> Minha primeira página</title>
</head>
<body>
<p>
Aqui você insere textos, imagens, tabelas, etc. </p>
</body>
</html>
Após ter digitado estas tags em seu editor salva o documento, porêm coloque neste a
extensão ".html", você pode escolher então a opção salvar como e então colocar
"pagina.html" como o nome deste arquivo.
Agora vamos visualizá-lo em seu navegador. Pronto, criamos nossa primeira página de
internet, é claro que este é um exemplo simples, mas é basicamente assim que funciona
o Html.
Todo documento Html possui uma estrutura bem parecida, ou seja, ele sempre vai possuir
o início do documento, marcado pela tag <html>, um cabeçalho marcado pela tag
<head>, o corpo marcado pela tag <body> e finalmente o final do documento marcado
pela tag </html>.
Vimos o exemplo anterior que, a primeira parte importante em um documento Html é o

cabeçalho. Nele estarão contidas informações importantes sobre a página, como por
exemplo o título dela e inclusive informações que são chamadas de Meta Informações,
pois estão contidas dentro das chamadas Meta Tags.
<html>
Esta é a primeira tag de um documento Html, é com ela que você diz ao navegador que
alí começa a página.
<head>
Com a tag <head> que você diz ao navegador que a partir dela estarão algumas
informações importantes sobre sua página como título e meta informações.
<title>
Dentro das tags<title> ... </title> você colocará o título da sua página, que é aquele texto
que aparece no topo da janela do navegador, olhe para o topo desta janela para ver o
título.

Meta informações <meta>

Meta tags são códigos html, esses códigos ajudam alguns sites de busca, como Altavista
e vários outros, a encontrar o seu site mais rapidamente. Esses códigos organizam as
informações que os sistemas de busca precisam para mostrar a sua página em um
resultado de busca feita por um usuário. Esse código contém informações sobre o título,
palavras-chave e descrição do seu site.
As tags ficam entre os comandos <head> e </head>, que ficam bem no topo da página.
Eles podem ser colocados em todas as páginas do seu site, somente nas principais, ou
ainda só na página inicial.
Esta meta é usada para informar quem é o autor da página, você pode por exemplo caso,
queira, informar seu nome e também seu email.
Exemplo: <meta name="author" content="Magali Bracellos -magali@ccuec.unicamp.br">
Insere a descrição da página que aparecerá em alguns sistemas de buscas. Pequena

porque esta deve conter por volta de 255 caracteres, ou seja, uma breve descrição.
Exemplo: <meta name= "description" content="descricao do seu site">
Esta tag meta é usada para indicar a alguns sites de busca palavras chave (keywords)
que podem ser usadas para identificar o conteúdo do seu site. Elas são separadas por
uma vírgula (,).
Exemplo:
<meta name= "
keywords
" content="Palavras-chave sempre por vírgula">

Exercício
Vamos fazer agora nossa segunda página, com um cabeçalho bem completo.
Abra de novo seu editor e vamos lá :
<html>
<head>
<meta name= "author" content="Magali Bracellos - magali@ccuec.unicamp.br">
<meta name = "description" content="descricao do seu site">
<meta name= "keywords
" content="Palavras-chave sempre separadas somente por espaços em
branco">
<title> Criando um cabeçalho mais completo</title>
</head>
<body>
<p>
Neste segundo exercício criamos um cabeçalho mais completo.</p>
</body>
</html>
Após ter digitado o código acima em seu editor, siga o mesmo processo, salve-o com a
extensão ".html" e então abra-o em seu navegador para ver o resultado. Aparentemente
não haverá nada de muito novo, mas para os sites de busca como o Google, Altavistae
outros... por exemplo, seu site já poderá ser cadastrado sem problemas, pois ele já
possui algumas das informações necessárias.

Principais Tags



Trabalhando com paleta de cores

Os valores para as cores devem ser escritos no padrão Hexadecimal. Para obter uma lista
de cores Hexadecimais, aqui está :
Paleta com 216 cores hexadecimais.
Atributos <body>
Exemplo:
<body bgcolor="#000000" text="#FFFFFF" background="fundo.gif" link="#EEEEEE"

alink="#EEEEEE" vlink="#EEEEEE">
bgcolor= "valor" - Cor do fundo da página
text= "valor" - Cor do texto padrão
link= "valor" - Cor dos links
alink= "valor" - Cor dos links acionados
vlink= "valor" - Cor dos links já visitados

Trabalhando com tabelas

As tabelas são elementos essenciais para o posicionamento preciso dos objetos na
página. São formadas de linhas, dentro da linhas são inseridas células com conteúdo.
Veja abaixo os tags básicos:



Trabalhando com frames

Frames ou quadros permitem a divisão da tela de exposição do browser em diferentes
áreas onde pode-se apresentar diferentes páginas. Isso possibilita, por exemplo, que se
determine uma área da tela para ser a página principal e outras áreas para menus ou
links. Isso usado de maneira coordenada pode ser de grande ajuda na navegabilidade
pelas páginas de seu site.
O Netscape Composer não apresenta facilidades para a criação de Frames por isso
neste treinamento a estrutura dos frames deverá ser definida usando outros editores (
Word, Notepad, WordPad, ... )
O primeiro passo para se criar uma estrutura usando frames é definir o Frameset ou
conjunto de frames, que indica como será estruturado cada quadro na tela em termos de
linhas (rows) e colunas (cols) , e quais páginas deverão ser apresentadas em cada um
desses quadros.
Num primeiro exemplo vamos dividir a tela em duas áreas : um menu lateral e uma área
principal ocupando a maior parte da tela.
<frameset cols="100 , * ">

<frame src= menu.html name = "area-menu">
<frame src= apresentacao.html name="area-principal">
</frameset>
No exemplo acima temos a tela dividida em duas áreas, definidas por duas colunas
verticais.
A primeira , com tamanho de 100 pixels , recebeu o nome de area-menu e nela estamos
apresentando a página menu.html. A segunda ocupa o restante da tela ( indicado por
"*" ), recebeu o nome de area principal, e nela estamos apresentando inicialmente a
página apresentacao.html.

Segundo exemplo de frame

Num segundo exemplo vamos definir uma estrutura com três áreas : topo, menu lateral, e
área principal. Para tanto basta acrescentarmos o exemplo anterior como um subconjunto
de frames nesta nova estrutura.
<frameset rows = " 60 , * ">

<frame src= topo.html name = "area-topo">
<frameset cols="100 , * ">
<frame src= menu.html name = "area-menu">
<frame src= apresentacao.html name="area-principal">
</frameset>
</frameset>
No exemplo acima temos a tela dividida em em três áreas distintas : duas linhas, ou
faixas horizontais, a primeira com 60 pixels recebeu o nome de area-topo e apresenta a
página topo.html; a segunda faixa se divide em outro conjunto de frames desta vez em
colunas verticais, a primeira com 100 pixels recebeu o nome de area-menu e apresenta a
página menu.html e a segunda ocupando o restante da tela, recebeu o nome de área
principal e apresenta a página apresentacao.html.

Frames
Ainda podemos definir atributos em nosso Frameset que controlam a visualização e
navegação coordenada entre os frames.
Principais Tags
<frameset><frameset> - Determina o início e o fim de um frame. Deve ser usado
juntamente com os parâmentros cols (frame na vertical) ou rows (frame na horizontal).
cols="valor,valor" - Determina o número de regiões verticais da página. Deve ser

indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada
frameset e pode ser definido em pixels, percentual ou asterisco.
rows="valor,valor" - Determina o número de regiões horizontais da página. Deve ser

indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada
frameset e pode ser definido em pixels, percentual ou asterisco.
border = "valor" - Determina a espessura da linha divisória que aparece entre os

framesets. Sendo que x é o valor da borda em pixels.
Eliminação das bordas dos frames:

< FRAMESET src = ... FRAMEBORDER="NO" >
Eliminação do espaço ente os frames:

< FRAMESET src = .... FRAMEBORDER="NO" BORDER="0" >
bordercolor = "cor" - Determina a cor da linha divisória que aparece entre os framesets.

Atributos <frame>
src = "página.htm" - Determina a página ou arquivo que será carregado na região
correspondente.
name = "nome" - Determina um nome ao frameset correspondente. O nome é de vital

importância
na utilização dos frames.
noresize - Deixa a linha do frameset estática. Os navegadores permitem que o visitante

altere a posição dos frames. Para tanto o atributo
< FRAMESET src = ... NORESIZE>
Margem:
marginheight = "valor" - determina as margens direita e esquerda do frame
marginwidth = "valor" - determina as margens superior e inferior do frame
Barra de rolagem:
scrolling = "valor" - Determina o aparecimento ou não da barra rolagem. Os valores
podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de
rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do
frameset.
Eliminação da barra de rolagem

< FRAMESET src = ... SCROLLING = "NO" >

Trabalhando com Formulários
<html>
<head>
<title>exemplo</title>
</head>
<body bgcolor="#FFFFFF">
<form name="" action="mailto:mail@provedor.com.br" method="post">
nome:
<br><input type="text" name="nome">
<p>email:
<br><input type="text" name="email">
<p>Gostou de meu site?
<br><input type="radio" name="gostou" value="sim" checked>Sim
<br><input type="radio" name="gostou" value="não">Não
<p>Envie sugestões:
<br><textarea name="textfield" cols="50"></textarea>
<p><input type="submit" value="enviar"><input type="reset" value="limpar"
name="Reset"></form>
</body>
</html>

Mapeamento de Imagens
Mapas Clicáveis
Mapas Clicáveis em uma página são figuras que permitem a associação de áreas desta
figura com links para diferentes URLs. Estes mapas podem ser definidos de diferentes
maneiras; neste treinamento estaremos apresentando um método bastante simples
usando Client-Side imagemap.
Código HTML
<MAP NAME=menu>
<AREA SHAPE=rect COORDS= "151,7,221,20" HREF=menu1.html>

<AREA SHAPE=rect COORDS= "526,57,593,67" HREF=http://www.unicamp.br>
</MAP><IMG Border=0 SRC="nome da imagem. gif ou jpg" USEMAP="#menu" >
No exemplo acima a diretiva MAP está definindo a criação do mapa e informando seu
nome. A diretiva ÁREA informa o formato,SHAPE, da área "sensível" , suas coordenadas,
COORD, e o endereço da URL associada.
O formato da área (SHAPE) podem ser

RECT - retângulo - coordenadas x1,y1 , x2,y2
CIRC - círculo - coordenadas x,y e raio r
POLY - polígono - coordenadas x1,y1 , x2,y2 , x3,y3 , ...
A Diretiva <IMG ... USEMAP = ...> associa a defição do Mapa à Imagem.

As Coordenadas podem ser obtidas utilizando softwares de tratamento de imagens, como
o Paint Shop Pro ( http://www.jasc.com )

Fases na construção de um site

1ª Fase: Organização da Informação
2ª Fase: Conceituação do site e definição da estrutura de navegação
3ª Fase: Montagem do Site
4ª Fase: Testar localmente
5ª Fase: Disponibilizar o site
Dica de como organizar e estruturar a navegação de um site

01- Que pretendemos divulgar em nosso site? Que tipo de conteúdo você pode
apresentar na Web?
Exemplo:
Informações pessoais
Publicações como jornais, revistas;
Perfis da empresa como:
histórico da empresa; segmento da empresa; clientes, parceiros, etc...
02- Estabelecer objetivos:
• Você deve perguntar-se o que os leitores vão estar procurando no site.

• O que você deseja realizar com a apresentação do site.
• Antes de começar entrar com códigos ou imagens você deve pensar o que você quer
colocar em sua página
• Como será estruturada? Ela está adequada ou não ao meu público alvo?
• Ao desenvolver um site para uma empresa ou pessoas é importante que você colha
junto ao seu cliente seus objetivos, idéias, a forma que imagina sua página, etc.
Assim, ficará bem mais fácil de começar seu trabalho.
03- Divida o seu conteúdo em tópicos:
Crie uma lista com os principais tópicos, a princípio não importa a ordem. Esta é uma
forma de começar a se organizar.
Sua lista poderá ter quantos tópicos desejar (...+ vai de leve)
dica >> (cuidado!! seu leitor poderá se cansar e se perder em meio a tantas opções)

04- Quais as quetões que devo levantar com relação a organização e navegação de
um site?
• Será que os leitores conseguem navegar pelo conteúdo de cada tipo de estrutura para
encontrar as informações de que precisam.
• Como ter certeza de que os leitores conseguem se localizar nos meus documentos
(contexto) e achar o caminho de volta até uma posição conhecida.
Ao ler estas questões suas informações se encaixariam em cada uma?
Veja aqui alguns exemplos de navegação:


Próxima etapa do planejamento

Sua apresentação da Web consiste em determinar o conteúdo que será apresentado em
cada uma das páginas e criar alguns vínculos (links) simples que possibilitem a
navegação por essas páginas.
1. Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a
manutenção e vinculação podem se tornar maçante.
2. Defina bem a forma de navegação entre as páginas. Se houver formas alternativas,

torne a navegação para os leitores a mais intuitiva possível.
3. Tome cuidado com o que será incluindo na home page, lembre-se, ela será a porta da
sua apresentação.
4. Tenha sempre em mente seus objetivos. Procure não se distanciar deles.
Dica importante:
A disposição de imagens, textos, vídeos, etc. Tudo que você deseja colocar em sua
página precisa ser colocado de forma agradável ao leitor. Daí abordarmos, de forma
geral, a diagramação. Esta palavra vem do mundo dos impressos. Trata-se da disposição
de elementos que compõem uma página. Deve ser observado o tamanho das fontes,
disposição das imagens, forma como o texto será apresentado, etc. Uma boa
diagramação também garante o retorno do internauta.
Composição de uma equipe na construção de um Website:

a) Analistas de sistemas (com experiência em gerência de Informação), responsável pela
organização da informação;
b) Design Gráfico, responsável pelo projeto gráfico;
c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML,

Java, JavaScript, CGI, etc;
A equipe deverá ter um coordenador, responsável em fazer o trabalho fluir de forma

eficiente, dentro de um cronograma aproveitando o máximo de cada profissional. Depois
do site construído surgirá uma outra pessoa: o WebMaster, que será responsável pela
administração do site. É muito haver o acúmulo de funções por membros da equipe. Mas
é importante definir o papel de cada na construção do site.

Como utilizar o Editor Netscape Composer

Este treinamento pretende descrever algumas ferramentas disponíveis dos módulos do
pacote Netscape Comunicator diz respeito à construção de páginas para o WWW e dar
dicas sobre a construção dessas páginas, utilizando o Netscape Composer. Se você não
possue o Netscape Communicator instalado em seu computador, há sites na Internet que
permitem fazer o download de versões atualizadas e ainda permitem a opção de idioma.
Veja aqui: Netscape Brasil Download

(http://ftp.unicamp.br/pub/netscape/communicator/english/4.78/windows/windows95
_or_nt/complete_install/).
Este editor, embora apresente algumas limitações e restrições, permite a criação e

manutenção de páginas sem que seja necessário profundos conhecimentos da linguagem
HTML.
Dentro dessa interface vamos abordar as funções básicas como a Barra de Ferramentas
de Composição, Barra de Ferramentas de Formatação , Propriedades da Página , Links,
Imagens e Tabelas .

Como utilizar a Barra de Ferramentas de Composição

Construindo uma Página utilizando o Editor Netscape

Composer
Criando um diretório para edição
Para organizar a edição dos arquivos bem como para facilitar o envio dos arquivos para o
Servidor WEB, é importante criar uma pasta (diretório), podendo ser criado dentro da
pasta Meus Documentos. Como sugestão, crie uma pasta chamada site.
Criando um novo documento (nova página)
A partir do Netscape Navigator, clique em File, New, Blank Page. O editor de páginas
Netscape Composer abrirá uma página em branco e a partir de agora, tudo que for
colocado nesta págiana estará automaticamente sendo convertido para a liguagem
HTML.
No caso do servidor WEB da UNICAMP, a primeira página de um determinado assunto,

seja uma página pessoal ou qualquer outro ítem específico, deve possuir como nome
index.html ou index.htm . As demais páginas acessadas a partir desta, poderão possuir
quaisquer outros nomes.
Como utilizar as Propriedades da página

Para modificar as propriedades da página, basta clicar em Format e Page Colors and
Properties. É possível fazer as modificações indicadas ao lado:

Normal Text: cor do texto normal. Link Text: cor do texto do link. Active Link Text: cor
do texto do link enquanto está sendo Followed Link Text: cor do texto do link já visitado.
PS: Pode-se alterar as definições existentes clicando sobre os botões que mostram
as cores usuais do Netscape.
Clicando em Colors and Background, pode-se selecionar uma imagem (.gif ou .jpg)
para ser usada como fundo da página.
Para escolher a imagem clique sobre Choose File...
Clicando em General, pode-se atribuir um título para a página, o/os nome/s do/s
autores e a sua descrição.

Objetos a serem usados na edição

Editores de texto como o MS-Word, Word Perfect, etc, possuem diversos recursos para a
produção de textos. No caso de um editor HTML, estes recursos são bem mais simples,
pois visam criar mecanismos simples e de fácil acesso.
Os principais recursos ou objetivos a serem trabalhados pelo

editor são:
Texto
A edição de texto é feito diretamente sobre a área logo abaixo do menu de opções do
editor. Um texto pode ter atributos como Fontes, Cores, Tamanhos, etc (semelhanto ao
Word). Um texto também pode ser um link, que acesse um trecho desta página (Target),
ou até mesmo um outro site. Para criá-lo, basta selecionar o texto e pressionar o botão
direito do mouse sobre o mesmo, e selecionar o item Create link using Selected e
informar o caminho e nome do arquivo a ser chamado.
Clicando sobre a seta, abre-se a caixa com a barra de rolagem que possibilita alterar o
tipo do parágrafo e/ou cabeçalho. No exemplo, foi selecionado o parágrafo normal.

Clicando sobre a seta, abre-se a caixa com a barra de rolagem que possibilita selecionar
a o tipo de fonte. No exemplo, foi selecionada a fonte Comic Sans MS.
a cor da fonte. A opção Other... permite personalizar as cores. O texto alternativo mostra
o código html da cor.
o tamanho da fonte. No exemplo, foi selecionado o tamanho 12.

1 - Seleciona o estilo de fonte negrito.

2 - Seleciona o estilo de fonte itálico.
3 - Seleciona o estilo de fonte sublinhado.
4 - Remove todos os estilos do texto selecionado.
5 - Apresenta o texto na forma de lista com marcadores.
6 - Apresenta o texto na forma de lista numerada.
7 - Diminui a indentação.
8 - Aumenta a indentação.
9 - Alinha o texto na margem esquerda da página.
Alinha o texto no centro da página.
Alinha o texto na margem direita da página.
Como utilizar a Barra de Ferramentas de Links
Para chamar uma página da rede:

• Basta colocar a URL da página como mostra a figura.
Para chamar uma página do mesmo diretório:

• Basta colocar o nome do arquivo no lugar da URL.
Por exemplo:
teste.html ou teste.html#de
(além de chamar o arquivo "teste.html" com o caracter "#" chama-se o destino "de").
Para abrir uma caixa de correio:

• Basta colocar o e-mail precedido de mailto: no lugar da URL.
Por exemplo:
mailto:bernard@hotmail.com
Target
É um local específico dentro da página que está sendo editada, que é acessado por um
link dela mesma ou de outras. Para criar um Target, basta clicar no botão Target ou no
menu Insert, Target.

Os principais recursos ou objetos a serem trabalhados pelo

editor são:
Imagens (figuras)
A inserção de imagens pode ser feita usando o botão Image ou através do menu superior,
clicando em Insert, Image. Uma imagem, pode ter como atributos principais: uma posição
específica de alinhamento, um link, texto alternativo, etc. A criação de links em imagens é
semelhante aos links em textos, bastando clicar o botão direito do mouse sobre a
imagem.
Como utilizar a Barra de Ferramentas de Image Properties

Em Image Properties, coloca-se o nome da figura a ser inserida do mesmo diretório ou a
URL de onde se encontra.
Por exemplo:
http://www.ccuec.unicamp.br/images/foto.gif ou somente foto.gif (arquivo local).

O texto próximo a imagem pode ser alinhado de diferentes formas com vemos na figura
acima.
Clicando em Alt. Text / LowRes., é possível escrever um texto alternativo que aparece
quando o mouse para sobre a imagem. Veja.

Horizontal Line
É uma linha horizontal usada para dividir, visualmente, sessões de uma página. Para
inserir, basta clicar no botão H. Line ou no menu Insert, Horizontal Line.
Tabela (configurações específicas)

A tabela é um recurso bastante interessante para a programação HTML, pois além da
função de organização de dados, pode servir também para a organização de imagens e
textos dentro de uma página.
Serve também para criar um fundo diferente do padrão, para destacar em texto. Uma
tabela possui diversos atributos gerais ou específicos de linhas e/ou células. Não existe
controle sobre colunas.
Para inserir uma tabela na sua página, selecione o menu Insert/Table/Table, conforme
mostrado ao lado. Ou escolha o íconeque faz parte da Barra de Ferramentas de
Composição.

Em seguida aparecerá esta janela:
Para apagar a tabela, dê um clique com o botão direito do mouse com o cursor
sobre a mesma e aparecerá o menu mostrado abaixo:
Para apagar e inserir linha ou coluna, usa-se este mesmo menu, mudando apenas a
opção a ser selecionada.

Salvando um arquivo
Antes de enviar a página para o Servidor WEB, esta terá de ser salva, clicando-se em
File, Save.
Se é a primeira vez que você está editando este arquivo, neste momento o sistema pedirá
para que seja informado um nome.
Visualizando a página
O editor Netscape Composer não é totalmente interativo quanto ao produto final de uma
página. Certos ajustes de posicionamento de figuras e mesmo de textos, somente serão
bem visualizados utilizando a opção específica de visualização, acessado pela botão
Preview. Clique neste botão para ver o resultado finalObs.: Se a página ainda não estiver
salva após a última alteração, será solicitado a salva do arquivo, antes da execução do
Preview.

Como transferir sua página (dados) via WSFTP para o

servidor:
O que é o WSFTP ?
Para que seja feita a transferência dos arquivos de sua homepage para o seu espaço com
rapidez, você pode utilizar o sistema conhecido como FTP, "FILE TRANSFER
PROTOCOL", ou seja, Protocolo de Transferência de Arquivos, que permite o envio de
todos os arquivos desejados de uma só vez.
Para que este processo seja concluído, você necessitará de um programa de FTP.
O programa que nós indicamos para utilização é o WSFTP, por ser um programa dos
mais fáceis de utilização e pequenos, fazendo com que seu Download não seja tão
demorado além de ser grátis.
No endereço:
ftp://ftp.unicamp.br/pub/simtel.net/win95/inet/ws_ftp32.zip
Como usar:
No campo "Host Name/Address:
" você coloca o endereço do servidor de FTP
Em "Host Type:" selecione "Automatic detect".
No campo "User ID:

" coloque seu ...... e em "Password:" coloque a sua senha.

Depois de preencher estes campos é só apertar "OK" e o programa vai iniciar a conexão
com o servidor para que você possa fazer a transferência dos arquivos.
Depois de conectado, aparecerá outra janela como a que se segue abaixo:
Quando aparecer esta tela é necessário apenas notar que a parte esquerda da janela é o
seu "computador" e a direita é o nosso "computador".
Agora é só ir até o diretório onde estão os arquivos que deseja transferir, selecione os que
você quer enviar do lado esquerdo (para selecionar múltiplos arquivos mantenha a tecla
Shift de seu teclado pressionada enquanto faz sua seleção) e clicar na seta que direciona
para a direita "=>", para que os respectivos arquivos sejam transferidos.
Para transferir arquivos do seu diretório para o seu micro basta você selecionar eles do
lado direito e apertar a seta que direciona para a esquerda "<="

Há uma barra de comandos à direita da tela onde aparecem os arquivos, por meio dela
podem ser executados os principais comandos para gerenciar os arquivos, os comandos
básicos são 4:
Detalhes:
Os diretórios são representados pelo ícone de uma pasta " ".

Para Abrir um diretório basta dar dois cliques sobre a pasta desejada.
" " Esta seta permite que você possa voltar um nível acima no seu direrório, por
exemplo, se você está no diretório "/principal/graficos/" ao dar 2 cliques na seta você
volta para o diretório "principal".
Não se esqueça de selecionar os arquivos para executar os comandos
Para arquivos .html selecione a opção ASC
Para arquivos .gif, jpg, png, pdf, swf, exe, selecione a opção Binary

Dicas:
Escolha o tema de sua página

Antes de iniciar um projeto na Internet, você deve pensar no foco principal de seu site.
Esquematize os principais assuntos a serem tratados e escreva-os em um papel. Lembre-
se que um dos principais motivos para que um usuário visite sua página é o conteúdo.
Faça o seu site com qualidade e simplicidade

Não construa seu site de qualquer maneira. Os usuários da Internet são exigentes e
responsáveis pela navegação, podendo entrar e sair de um site quando desejam. Por
isso, você deve projetar seu site com qualidade de conteúdo, imagens e principalmente
com tempos de download rápidos. A usabilidade na Web é fundamental para o sucesso
de seu site.
Crie uma pasta e diretórios para salvar seus arquivos

Crie uma pasta principal única nomeando-a com, por exemplo, o nome do site. Todos as
outras pastas deverão ser criadas internamente a pasta principal. Os novos arquivos de
extensão *.html criados deverão ser salvos nas sub-pastas. Lembre-se que você deve
nomear as pastas com letra minúscula, assim como os arquivos. Todos os outros
arquivos utilizados, seja ele de imagem, som, mídia, etc. ,também serão copiados para as
sub-pastas.
Verifique se todos os links estão funcionando adequadamente.
Procure um provedor de páginas na Internet

Existem vários serviços de hospedagem na Web. Se você não deseja pagar por ele,
procure páginas que oferecem esse serviço gratuitamente. A página www.hpg.com.br e
www.starmedia.com.br são exemplos de páginas que oferecem esse tipo de serviço.
Mas você não terá disponíveis todos os recursos de hospedagem e certamente seu site
ficará mais lento.
Divulgue o seu site

Para que o mundo da Web tenha conhecimento de seu site, divulgue-o em páginas de
busca, tais como www.cade.com.br, www.seek.com.br, www.yahoo.com.br.
Atualize sempre o seu site.

Referência Bibliográfica
• http://www.construindoseusite.com.br/default.asp
• http://members.lycos.co.uk/rabaco/
• http://www.estudegratis.com.br/index.phtml
• http://www.aisa.com.br/diciona.html
• http://www.crieseuwebsite.com/
• Colaboradora: Rita de Cássia de Souza
Onde obter ajuda

Para ajudá-lo a solucionar dúvidas de informática, utilize o sistema Rau-Tu de perguntas e
respostas, que foi desenvolvido pelo Centro de Computação da Unicamp em conjunto
com o Instituto Vale do Futuro. Tem por objetivo possibilitar que um time de colaboradores
possa responder a perguntas colocadas por qualquer pessoa no site, cobrindo diversas
áreas de conhecimento.
Acesse: www.rau-tu.unicamp.br

Conf Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Conf Web

Uploaded by

Copyright:

Available Formats

Licenciamento de Uso

Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp e

1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser

2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas

3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer

Adicionalmente, devem ser observadas as seguintes restrições:

Última atualização em 10/01/2003

O que quer dizer Redes e Internet ?

A interação entre computadores envolve a movimentação de muitos dados, mas é difícil

Saiba mais sobre estrutura e funcionamento da Internet

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 1

Home Page, Páginas Web, Site, HTML, Hipertexto, Tags?

O que quer dizer HTML?

“Home Page” ou Página principal

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 2

É preciso estar conectado para visualizar a página que criei?

O browser funciona independente de se estar conectado a Internet. A melhor forma de se

São máquinas de alta capacidade, com grande poder de processamento e conexões

Para criar uma página, você precisa:

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 3

Estrutura básica em html

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 4

Criando seu primeiro documento Html

Vimos o exemplo anterior que, a primeira parte importante em um documento Html é o

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 5

Meta informações <meta>

Insere a descrição da página que aparecerá em alguns sistemas de buscas. Pequena

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 6

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 7

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 8

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 9

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 10

Trabalhando com paleta de cores

Paleta com 216 cores hexadecimais.

<body bgcolor="#000000" text="#FFFFFF" background="fundo.gif" link="#EEEEEE"

bgcolor= "valor" - Cor do fundo da página

text= "valor" - Cor do texto padrão

link= "valor" - Cor dos links

alink= "valor" - Cor dos links acionados

vlink= "valor" - Cor dos links já visitados

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 11

Trabalhando com tabelas

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 12

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 13

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 14

Trabalhando com frames

<frameset cols="100 , * ">

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 15

Segundo exemplo de frame

<frameset rows = " 60 , * ">

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 16

cols="valor,valor" - Determina o número de regiões verticais da página. Deve ser

rows="valor,valor" - Determina o número de regiões horizontais da página. Deve ser

border = "valor" - Determina a espessura da linha divisória que aparece entre os

Eliminação das bordas dos frames:

Eliminação do espaço ente os frames:

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 17

name = "nome" - Determina um nome ao frameset correspondente. O nome é de vital

noresize - Deixa a linha do frameset estática. Os navegadores permitem que o visitante

< FRAMESET src = ... NORESIZE>

marginwidth = "valor" - determina as margens superior e inferior do frame

Eliminação da barra de rolagem

Divisão de Serviços Comunidade – Centro de Computação - Unicamp 18