Web Pages

CENTRO DE COMPUTAO - UNICAMP
Confeco de Web Pages bsico

Treinamento CCUEC / AFPU UNICAMP 2002
Magali Barcellos (magali@ccuec.unicamp.br)
Rita de Cssia Souza (rita@ccuec.unicamp.br)
O que quer dizer Redes e Internet ?

Para que voc possa entender o que e como funciona a Internet necessrio primeiro
compreender o que uma rede de computadores. Uma rede de computadores consiste, na forma
mais simples de sua definio, na conexo de diversos computadores por meio de cabos e outros
tipos de hardware. Podendo trocar dados entre si.
A interao entre computadores envolve a movimentao de muitos dados, mas difcil de se
mover muitas coisas, incluindo-se dados, atravs de uma longa distncia. Ento a interao de
computadores normalmente comea com computadores no mesmo escritrio ou no mesmo prdio
conectados a uma rede local.
Saiba mais sobre estrutura e funcionamento da Internet
(http://www.ccuec.unicamp.br/treinamentos/naveg40/oqueeh1.html)
Internet
uma interconexo de diversas redes atravs de linhas de alta capacidade chamadas Backbones,
construdos para comportar o grande trfego de informaes que circulam na Internet. um local
pblico e no pertence nem operada por nenhuma empresa.
Home Page, Pginas Web, Site, HTML, Hipertexto, Tags?

Vamos entender melhor 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 Marcao de Hipertexto. Esta e
uma linguagem dedicada construo de pginas Web.
Hipertexto:
o conceito que possibilita a "navegao" entre segmentos de texto independentemente de sua
seqncia linear ou de sua localizao, o leitor salta de uma informao a outra, no
necessariamente numa ordem seqencial.
Essa linguagem tem como finalidade bsica formatar o texto exibido e criar ligaes entre as
pginas da Web, criando assim documentos com o conceito de hipertexto.
Pginas Web
As pginas so documentos de hipertexto. Esto gravados em servidores da Internet podem ser
acessadas em qualquer parte do mundo. Uma pgina WEB tambm pode ser chamada de home
page. Ao iniciar o browser, ser carregada uma pgina definida na configurao do programa
como pgina inicial.

"Home Page" ou Pgina principal - A pgina de entrada ou pgina inicial.

Uma apresentao da Web um conjunto de pginas Web estruturadas sobre um determinado
contedo, este contedo aquilo que voc est colocando na Web. Informaes, textos , imagens,
ilustraes, programas, textos histricos, diagramas, jogos, etc. Tudo isso contedo. Esta
apresentao, como outras, ficam armazenadas em um local chamado Site.
preciso estar conectado para visualizar a pgina que criei?

Para que o contedo de um documento HTML possa ser formatado e exibido na Internet devemos
usar um programa chamado browser, o navegador. Ele l o contedo do arquivo, interpreta os
comandos e exibe sua pgina.
O browser funciona independente de se estar conectado a Internet. A melhor forma de se trabalhar
desenvolvendo uma pgina HTML off-line, desconectado. Primeiro voc cria as pginas em seu
computador e as testas por meio do browser. Depois, deve coloc-las em um servidor Web para
que outras pessoas tambm possam visualiz-la.
Os Navegadores (browser)
Para visualizar toda informao disponvel na Internet necessrio um Browser, navegador. H
vrios disponveis no mercado. Os mais conhecidos so o Internet Explorer e Netscape Navigator.
Servidor Web so 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.
So mquinas de alta capacidade, com grande poder de processamento e conexes velozes.
Podemos usar como exemplo a mquina Obelix, que atende a Unicamp.
Para criar uma pgina, voc precisa:
ter conhecimentos bsicos da linguagem html ;
de um editor de textos para gerar o cdigo fonte;
de um browser para visualizar as pginas.
Editores grficos
O uso dos editores permitem que o autor crie uma pgina sem conhecer os cdigos da
linguagem HTML, o cdigo pode ser escrito usando o mais simples editor de texto, como o bloco
de notas do Windows. Porm a forma mais prtica e produtiva utilizar um editor HTML.
H vrios no mercado como:FrontPage da Microsoft, Netscape Composer, Dreamweaver da
Macromedia, GoLive da Adobe, etc.

As Tags do HTML
As pginas HTML so documentos textos que podem ser editados em qualquer editor de texto
simples (Notepad, por exemplo). Os arquivos HTML padro possuem extenso .htm ou .html e
seus comandos so chamandos de Tags, que informa ao navegador como ser formatada a
pgina.
As Tags, so marcas padres utilizadas para fazer todas as indicaes necessrias ao browser.
Tags so os elementos do Html encarregados de realizar esta formatao da qual estou falando.
So 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 funo diferente. Ou seja, no World
voc possui o boto centralizar , no Html voc possui a Tag <center>, no World voc possui o
boto Italico , em Html voc possui a Tag <I>
Como em qualquer linguagem, os comandos tem uma sintaxe prpria e seguem algumas regras:
As Tags aparecem sempre entre os sinais de "menor que" (<) e "maior que" (>).
As Tags so geralmente usadas aos pares, sendo que a Tag de finalizao precedida de
uma barra (/).
Basicamente tudo o que voc for fazer com a html necessitar de cdigo, tag. Todo documento
Html possue um cdigo fonte, que na verdade a pgina em si, s que com todas as tags visveis.
E o melhor disso tudo que voc pode por exemplo, ver como esta pgina foi feita sem nenhuma
dificuldade. Clique com o boto direito do mouse sobre a pgina e escolha a opo "Visualizar
Cdigo Fonte".
Estrutura bsica em html

<HTML></HTML> Envolvem todas as sees de um documento (HEAD e BODY).
<HEAD></HEAD> Contm parmetros de configurao do documento.
<TITLE></TITLE>ttulo da Home Page
<BODY></BODY> Contm o contedo 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 pgina Html de exemplo, veja o cdigo:
<html>
<head>
<title> Minha primeira pgina</title>
</head>
<body>
<p>
Aqui voc insere textos, imagens, tabelas, etc. </p>
</body>
</html>
Aps ter digitado estas tags em seu editor salva o documento, porm coloque neste a extenso
".html", voc pode escolher ento a opo salvar como e ento colocar "pagina.html" como o
nome deste arquivo.
Agora vamos visualiz-lo em seu navegador. Pronto, criamos nossa primeira pgina 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 incio
do documento, marcado pela tag <html>, um cabealho 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 cabealho.
Nele estaro contidas informaes importantes sobre a pgina, como por exemplo o ttulo dela e
inclusive informaes que so chamadas de Meta Informaes, pois esto contidas dentro das
chamadas Meta Tags.
<html>
Esta a primeira tag de um documento Html, com ela que voc diz ao navegador que al comea
a pgina.
<head>
Com a tag <head> que voc diz ao navegador que a partir dela estaro algumas informaes
importantes sobre sua pgina como ttulo e meta informaes.
<title>
Dentro das tags<title> ... </title> voc colocar o ttulo da sua pgina, que aquele texto que
aparece no topo da janela do navegador, olhe para o topo desta janela para ver o ttulo.
Meta informaes <meta>

Meta tags so cdigos html, esses cdigos ajudam alguns sites de busca, como Altavista e vrios
outros, a encontrar o seu site mais rapidamente. Esses cdigos organizam as informaes que os
sistemas de busca precisam para mostrar a sua pgina em um resultado de busca feita por um
usurio. Esse cdigo contm informaes sobre o ttulo, palavras-chave e descrio do seu site.

As tags ficam entre os comandos <head> e </head>, que ficam bem no topo da pgina. Eles
podem ser colocados em todas as pginas do seu site, somente nas principais, ou ainda s na
pgina inicial.
Esta meta usada para informar quem o autor da pgina, voc pode por exemplo caso, queira,
informar seu nome e tambm seu email.
Exemplo: <meta name= "author" content="Magali Bracellos - magali@ccuec.unicamp.br">
Insere a descrio da pgina que aparecer em alguns sistemas de buscas. Pequena porque esta
deve conter por volta de 255 caracteres, ou seja, uma breve descrio.
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 contedo do seu site. Elas so separadas por uma vrgula (,).
Exemplo:
<meta name= "
keywords
" content="Palavras-chave sempre por vrgula">
Exerccio:
Vamos fazer agora nossa segunda pgina, com um cabealho 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 espaos em branco">
<title> Criando um cabealho mais completo</title>
</head>
<body>
<p>
Neste segundo exerccio criamos um cabealho mais completo.</p>
</body>
</html>
Aps ter digitado o cdigo acima em seu editor, siga o mesmo processo, salve-o com a extenso
".html" e ento abra-o em seu navegador para ver o resultado. Aparentemente no 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 informaes
necessrias.

Principais Tags



Trabalhando com tabela de cores

Os valores para as cores devem ser escritos no padro 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 pgina
text= "valor" - Cor do texto padro
link= "valor" - Cor dos links
alink= "valor" - Cor dos links acionados
vlink= "valor" - Cor dos links j visitados
10

Trabalhando com tabelas

As tabelas so elementos essenciais para o posicionamento preciso dos objetos na pgina. So
formadas de linhas, dentro da linhas so inseridas clulas com contedo. Veja abaixo os tags
bsicos:
11

12

13

Trabalhando com frames

Frames ou quadros permitem a diviso da tela de exposio do browser em diferentes reas
onde pode-se apresentar diferentes pginas. Isso possibilita, por exemplo, que se determine uma
rea da tela para ser a pgina principal e outras reas para menus ou links. Isso usado de maneira
coordenada pode ser de grande ajuda na navegabilidade pelas pginas de seu site.
O Netscape Composer no apresenta facilidades para a criao 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 pginas devero 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 pgina menu.html. A segunda ocupa o restante da tela ( indicado por "*" ),
recebeu o nome de area principal, e nela estamos apresentando inicialmente a pgina
apresentacao.html.
14

Segundo exemplo de frame

Num segundo exemplo vamos definir uma estrutura com trs 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 trs reas distintas : duas linhas, ou faixas
horizontais, a primeira com 60 pixels recebeu o nome de area-topo e apresenta a pgina
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 pgina menu.html e a
segunda ocupando o restante da tela, recebeu o nome de rea principal e apresenta a pgina
apresentacao.html.
15

Frames:
Ainda podemos definir atributos em nosso Frameset que controlam a visualizao e
navegao coordenada entre os frames.
Principais Tags :
<frameset><frameset> - Determina o incio e o fim de um frame. Deve ser usado
juntamente com os parmentros cols (frame na vertical) ou rows (frame na horizontal).
cols="valor,valor" - Determina o nmero de regies verticais da pgina. 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 nmero de regies horizontais da pgina. 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 divisria que aparece entre os

framesets. Sendo que x o valor da borda em pixels.
Eliminao das bordas dos frames:

< FRAMESET src = ... FRAMEBORDER="NO" >
Eliminao do espao entre os frames :

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

Atributos <frame>
src = "pgina.htm" - Determina a pgina ou arquivo que ser carregado na regio
correspondente.
name = "nome" - Determina um nome ao frameset correspondente. O nome de vital importncia
na utilizao dos frames.
noresize - Deixa a linha do frameset esttica. Os navegadores permitem que o visitante altere a
posio 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 no 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 contedo da pgina ultrapassar o tamanho do
frameset.
Eliminao da barra de rolagem

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

Trabalhando com Formulrios
<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="no">No
<p>Envie sugestes:
<br><textarea name="textfield" cols="50"></textarea>
<p><input type="submit" value="enviar"><input type="reset" value="limpar" name="Reset"></form>
</body>
</html>
18

Mapeamento de Imagens
Mapas Clicveis
Mapas Clicveis em uma pgina so figuras que permitem a associao de reas desta figura com
links para diferentes URLs. Estes mapas podem ser definidos de diferentes maneiras; neste
treinamento estaremos apresentando um mtodo bastante simples usando Client-Side imagemap.
Cdigo 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 criao do mapa e informando seu nome. A
diretiva REA informa o formato,SHAPE, da rea "sensvel" , suas coordenadas, COORD, e o
endereo da URL associada.
O formato da rea (SHAPE) pode ser

RECT - retngulo - coordenadas x1,y1 , x2,y2
CIRC - crculo - coordenadas x,y e raio r
POLY - polgono - coordenadas x1,y1 , x2,y2 , x3,y3 , ...
A Diretiva <IMG ... USEMAP= ...> associa a defio do Mapa Imagem.

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

Fases na construo de um site
1 Fase: Organizao da Informao

2 Fase: Conceituao do site e definio da estrutura de navegao
3 Fase: Montagem do Site
4 Fase: Testar localmente
5 Fase: Disponibilizar o site
Dica de como organizar e estruturar a navegao de um site

01- Que pretendemos divulgar em nosso site? Que tipo de contedo voc pode apresentar
na Web?
exemplo:
Informaes pessoais
Publicaes como jornais, revistas;
Perfis da empresa como:
histrico da empresa; segmento da empresa; clientes, parceiros, etc...
02- Estabelecer objetivos:

o
o
o
o
o
Voc deve perguntar-se o que os leitores vo estar procurando no site.

O que voc deseja realizar com a apresentao do site.
Antes de comear entrar com cdigos ou imagens voc deve pensar o que voc
quer colocar em sua pgina
Como ser estruturada? Ela est adequada ou no ao meu pblico alvo?
Ao desenvolver um site para uma empresa ou pessoas importante que voc
colha junto ao seu cliente seus objetivos, idias, a forma que imagina sua pgina,
etc. Assim, ficar bem mais fcil de comear seu trabalho.
03- Divida o seu contedo em tpicos:

Crie uma lista com os principais tpicos, a princpio no importa a ordem. Esta
uma forma de comear a se organizar.
Sua lista poder ter quantos tpicos desejar (...+ vai de leve)
dica >> (cuidado!! seu leitor poder se cansar e se perder em meio a tantas
opes)
20

04- Quais as quetes que devo levantar com relao a organizao e navegao de
um site?
o
o
Ser que os leitores conseguem navegar pelo contedo de cada tipo de estrutura
para encontrar as informaes 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 posio conhecida.
Ao ler estas questes suas informaes se encaixaria em cada uma?

Veja aqui alguns exemplos de navegao:
21

22

Prxima etapa do planejamento

Sua apresentao da Web consiste em determinar o contedo que ser apresentado em cada uma
das pginas e criar alguns vnculos (links) simples que possibilitem a navegao por essas
pginas.
1. Coloque cada tpico em uma pgina, mas se tiver um grande nmero de
tpicos, a manuteno e vinculao pode se tornar maante.
2. Defina bem a forma de navegao entre as pginas. Se houver formas
alternativas, torne a navegao para os leitores a mais intuitiva possvel.
3. Tome cuidado com o que ser incluindo na home page, lembre-se, ela ser a
porta da sua apresentao.
4. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.
Dica importante:
A disposio de imagens, textos, vdeos, etc. Tudo que voc deseja colocar em
sua pgina precisa ser colocado de forma agradvel ao leitor. Da abordarmos, de
forma geral, a diagramao. Esta palavra vm do mundo dos impressos. Trata-se
da disposio de elementos que compem uma pgina. Deve ser observado o
tamanho das fontes, disposio das imagens, forma como o texto ser
apresentado, etc. Uma boa diagramao tambm garante o retorno do internauta.
Composio de uma equipe de profissionais adequada na construo de um Website seria:
a) Analistas de sistemas (com experincia em gerncia de Informao),
responsvel pela organizao da informao;
b) Design Grfico, responsvel pelo projeto grfico;
c) Programadores, que, dependendo do tipo de site, podem ser programadores
HTML, Java, JavaScript, CGI, etc;
A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de

forma eficiente, dentro de um cronograma aproveitando o mximo de cada
profissional. Depois do site construdo surgir uma outra pessoa: o
WebMaster, que ser responsvel pela administrao do site. muito haver o
acmulo de funes por membros da equipe. Mas importante definir o papel
de cada na construo do site.
23

Como utilizar o Editor Netscape Composer

Este treinamento pretende descrever algumas ferramentas disponveis dos mdulos do pacote
Netscape Comunicator diz respeito construo de pginas para o WWW e dar dicas sobre a
construo dessas pginas, utilizando o Netscape Composer. Se voc no possue o Netscape
Communicator instalado em seu computador, h sites na Internet que permitem fazer o download
de verses atualizadas e ainda permitem a opo de idioma.
Veja aqui: Netscape Brasil Download
(http://ftp.unicamp.br/pub/netscape/communicator/english/4.78/windows/windows95_or_nt/c
omplete_install/).
Este editor, embora apresente algumas limitaes e restries, permite a criao e manuteno de
pginas sem que seja necessrio profundos conhecimentos da linguagem HTML.
Dentro dessa interface vamos abordar as funes bsicas como a Barra de Ferramentas de
Composio, Barra de Ferramentas de Formatao , Propriedades da Pgina , Links, Imagens e
Tabelas .
24

Como utilizar a Barra de Ferramentas de Composio
25

Construindo uma Pgina utilizando o Editor Netscape Composer

Criando um diretrio para edio
Para organizar a edio dos arquivos bem como para facilitar o envio dos arquivos para o Servidor
WEB, importante criar uma pasta (diretrio), podendo ser criado dentro da pasta Meus
Documentos. Como sugesto, crie uma pasta chamada site.
Criando um novo documento (nova pgina)

A partir do Netscape Navigator, clique em File, New, Blank Page. O editor de pginas Netscape
Composer abrir uma pgina em branco e a partir de agora, tudo que for colocado nesta pgiana
estar automaticamente sendo convertido para a liguagem HTML.
No caso do servidor WEB da UNICAMP, a primeira pgina de um determinado assunto, seja uma
pgina pessoal ou qualquer outro tem especfico, deve possuir como nome index.html ou
index.htm . As demais pginas acessadas a partir desta, podero possuir quaisquer outros nomes.
Como utilizar as Propriedades da pgina
Para modificar as propriedades da pgina, basta clicar

em Format e Page Colors and Properties. possvel
fazer as modificaes indicadas ao lado:
26

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 definies existentes clicando sobre os botes 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 pgina.
Para escolher a imagem clique sobre Choose File...
27

Clicando em General, pode-se atribuir um ttulo para a pgina, o/os nome/s do/s
autores e a sua descrio.
Objetos a serem usados na edio

Editores de texto como o MS-Word, Word Perfect, etc, possuem diversos recursos para a produo
de textos. No caso de um editor HTML, estes recursos so bem mais simples, pois visam criar
mecanismos simples e de fcil acesso.
Os principais recusos ou objetos a serem trabalhados pelo editor so:
Texto
A edio de texto feito diretamente sobre a rea logo abaixo do menu de opes do editor. Um
texto pode ter atributos como Fontes, Cores, Tamanhos, etc (semelhanto ao Word). Um texto
tambm pode ser um link, que acesse um trecho desta pgina (Target), ou at mesmo um outro
site. Para cri-lo, basta selecionar o texto e pressionar o boto 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 pargrafo e/ou cabealho. No exemplo, foi selecionado o pargrafo
normal.
28

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.
Clicando sobre a seta, abre-se a caixa com a

barra de rolagem que possibilita selecionar a cor
da fonte. A opo Other... permite personalizar
as cores. O texto alternativo mostra o cdigo
html da cor.
Clicando sobre a seta, abre-se a caixa com a barra de rolagem que possibilita selecionar
o tamanho da fonte. No exemplo, foi selecionado o tamanho 12.
29

1 - Seleciona o estilo de fonte negrito.

2 - Seleciona o estilo de fonte itlico.
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 indentao.
8 - Aumenta a indentao.
9 - Alinha o texto na margem esquerda da pgina.
Alinha o texto no centro da pgina.
Alinha o texto na margem direita da pgina.
Como utilizar a Barra de Ferramentas de Links
Para chamar uma pgina da rede:
Basta colocar a URL da pgina como mostra a figura.
Para chamar uma pgina do mesmo diretrio:
Basta colocar o nome do arquivo no lugar da URL.
Por exemplo:
teste.html ou teste.html#de
(alm 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 especfico dentro da pgina que est sendo editada, que acessado por um link dela
mesma ou de outras. Para criar um Target, basta clicar no boto Target ou no menu Insert, Target.
30

Os principais recusos ou objetos a serem trabalhados pelo editor so:
Imagens (figuras)
A insero de imagens pode ser feita usando o boto Image ou atravs do menu superior, clicando
em Insert, Image. Uma imagem, pode ter como atributos principais: uma posio especfica de
alinhamento, um link, texto alternativo, etc. A criao de links em imagens semelhante aos links
em textos, bastando clicar o boto 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 diretrio 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 prximo a imagem pode ser alinhado de diferentes formas com vemos na figura acima.
Clicando em Alt. Text / LowRes..., possvel escrever um texto alternativo que aparece quando o
mouse para sobre a imagem. Veja.
31

Horizontal Line
uma linha horizontal usada para dividir, visualmente, sesses de uma pgina. Para inserir, basta
clicar no boto H. Line ou no menu Insert, Horizontal Line.
Tabela (configuraes especficas)
A tabela um recurso bastante interessante para a programao HTML, pois alm da funo de
organizao de dados, pode servir tambm para a organizao de imagens e textos dentro de uma
pgina.
Serve tambm para criar um fundo diferente do padro, para destacar em texto. Uma tabela possui
diversos atributos gerais ou especficos de linhas e/ou clulas. No existe controle sobre colunas.
Para inserir uma tabela na sua pgina,

selecione o menu Insert/Table/Table, conforme
mostrado ao lado. Ou escolha o coneque faz
parte da Barra de Ferramentas de Composio.
32

Em seguida aparecer esta janela:
Para apagar a tabela, d um clique com o boto 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 opo a
ser selecionada.
33

Salvando um arquivo
Antes de enviar a pgina 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 pgina
O editor Netscape Composer no totalmente interativo quanto ao produto final de uma pgina.
Certos ajustes de posicionamento de figuras e mesmo de textos, somente sero bem visualizados
utilizando a opo especfica de visualizao, acessado pela boto Preview. Clique neste boto
para ver o resultado final.
Obs.: Se a pgina ainda no estiver salva aps a ltima alterao, ser solicitado a salva do
arquivo, antes da execuo do Preview.
Como transferir sua pgina (dados) via WSFTP para o servidor:

O que o WSFTP ?
Para que seja feita a transferncia dos arquivos de sua homepage para o seu espao com rapidez,
voc pode utilizar o sistema conhecido como FTP, "FILE TRANSFER PROTOCOL", ou seja,
Protocolo de Transferncia de Arquivos, que permite o envio de todos os arquivos desejados de
uma s vez.
Para que este processo seja concludo, voc necessitar de um programa de FTP.
O programa que ns indicamos para utilizao o WSFTP, por ser um programa dos mais fceis
de utilizao e pequeno, fazendo com que seu Download no seja to demorado alm de ser
grtis.
No endereo:
ftp://ftp.unicamp.br/pub/simtel.net/win95/inet/ws_ftp32.zip
34

Como usar:
No campo "Host Name/Address:

" voc coloca o endereo 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 conexo com o
servidor para que voc possa fazer a transferncia dos arquivos.
Depois de conectado, aparecer outra janela como a que se segue abaixo:
35

Quando aparecer esta tela necessrio apenas notar que a parte esquerda da janela o seu
"computador" e a direita o nosso "computador".
Agora s ir at o diretrio onde esto os arquivos que deseja transferir, selecione os que voc
quer enviar do lado esquerdo (para selecionar mltiplos arquivos mantenha a tecla Shift de seu
teclado pressionada enquanto faz sua seleo) e clicar na seta que direciona para a direita "=>",
para que os respectivos arquivos sejam transferidos.
Para transferir arquivos do seu diretrio 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 bsicos so 4:
Detalhes:
Os diretrios so representados pelo cone de uma pasta "
".
Para Abrir um diretrio basta dar dois cliques sobre a pasta desejada.
" " Esta seta permite que voc possa voltar um nvel acima no seu direrrio, por exemplo, se
voc est no diretrio "/principal/graficos/" ao dar 2 cliques na seta voc volta para o diretrio
"principal".
No se esquea de selecionar os arquivos para executar os comandos
Para arquivos .html selecione a opo ASC
Para arquivos .gif, jpg, png, pdf, swf, exe, selecione a opo Binary
36

Dicas:
Escolha o tema de sua pgina.
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 usurio visite sua pgina o contedo.
Faa o seu site com qualidade e simplicidade.
No construa seu site de qualquer maneira. Os usurios da Internet so exigentes e responsveis
pela navegao, podendo entrar e sair de um site quando desejam. Por isso, voc deve projetar
seu site com qualidade de contedo, imagens e principalmente com tempos de download
rpidos. A usabilidade na Web fundamental para o sucesso de seu site.
Crie uma pasta e diretrios para salvar seus arquivos.
Crie uma pasta principal nica nomeando-a com, por exemplo, o nome do site. Todos as outras
pastas devero ser criadas internamente a pasta principal. Os novos arquivos de extenso *.html
criados devero ser salvos nas sub-pastas. Lembre-se que voc deve nomear as pastas com
letra minscula, assim como os arquivos. Todos os outros arquivos utilizados , seja ele de imagem,
som, mdia, etc. ,tambm sero copiados para as sub-pastas.
Verifique se todos os links esto funcionando adequadamente.
Procure um provedor de pginas na Internet.
Existem vrios servios de hospedagem na Web. Se voc no deseja pagar por ele, procure
pginas que oferecem esse servio gratuitamente. A pgina www.hpg.com.br e
www.starmedia.com.br so exemplos de pginas que oferecem esse tipo de servio.
Mas voc no ter disponvel 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 pginas de busca, tais
como www.cade.com.br, www.seek.com.br, www.yahoo.com.br.
Atualize sempre o seu site.
Dicas para o Usurio

Para apoio aos usurios, recomendamos a utilizao do Sistema Rau-Tu, que tem por objetivo
possibilitar que um time de colaboradores possa responder perguntas colocadas por qualquer
pessoa em um site da Web, cobrindo diversas reas de conhecimento, entre eles: planilhas
eletrnicas, editorao eletrnica, sistemas microsoft, bancos de dados, desenvolvimento web,
ead, linguagens de programao, linux, etc.
Consulte em http://www.rau-tu.unicamp.br
37

Web Pages

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Pages

Enviado por

Direitos autorais:

Formatos disponíveis

CENTRO DE COMPUTAO - UNICAMP

Confeco de Web Pages bsico

O que quer dizer Redes e Internet ?

Home Page, Pginas Web, Site, HTML, Hipertexto, Tags?

Confeco de Web Pages bsico

"Home Page" ou Pgina principal - A pgina de entrada ou pgina inicial.

preciso estar conectado para visualizar a pgina que criei?

Confeco de Web Pages bsico

Estrutura bsica em html

Confeco de Web Pages bsico

Criando seu primeiro documento Html.

Meta informaes <meta>

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Trabalhando com tabela de cores

Paleta com 216 cores hexadecimais.

Confeco de Web Pages bsico

Trabalhando com tabelas

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Trabalhando com frames

<frameset cols="100 , * ">

Confeco de Web Pages bsico

Segundo exemplo de frame

<frameset rows = " 60 , * ">

Confeco de Web Pages bsico

cols="valor,valor" - Determina o nmero de regies verticais da pgina. Deve ser

rows="valor,valor" - Determina o nmero de regies horizontais da pgina. Deve ser

border = "valor" - Determina a espessura da linha divisria que aparece entre os

Eliminao das bordas dos frames:

Eliminao do espao entre os frames :

Confeco de Web Pages bsico

Eliminao da barra de rolagem

Confeco de Web Pages bsico

Trabalhando com Formulrios

Confeco de Web Pages bsico

O formato da rea (SHAPE) pode ser

A Diretiva <IMG ... USEMAP= ...> associa a defio do Mapa Imagem.

Confeco de Web Pages bsico

Fases na construo de um site

1 Fase: Organizao da Informao

Dica de como organizar e estruturar a navegao de um site

02- Estabelecer objetivos:

Voc deve perguntar-se o que os leitores vo estar procurando no site.

03- Divida o seu contedo em tpicos:

Confeco de Web Pages bsico

Ao ler estas questes suas informaes se encaixaria em cada uma?

Confeco de Web Pages bsico

Confeco de Web Pages bsico

Prxima etapa do planejamento

A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de

Confeco de Web Pages bsico

Como utilizar o Editor Netscape Composer

Confeco de Web Pages bsico

Como utilizar a Barra de Ferramentas de Composio

Confeco de Web Pages bsico

Construindo uma Pgina utilizando o Editor Netscape Composer

Criando um novo documento (nova pgina)

Como utilizar as Propriedades da pgina

Para modificar as propriedades da pgina, basta clicar