Desenvolvimento de Websites

Desenvolvimento de Websites
Autores:
Francisca M. Baptistella
Gian Franco B. Barcellini

1 of 1 06/09/00 11:34
Desenvolvimento de Websites file:///C|/curso_webpages/index.html

Introduo

Objetivo do Treinamento
Qualificar o aluno no desenvolvimento de websites. Sero apresentados
aspectos que facilitaro o seu desempenho no desenvolvimento de projetos de
webstes. As aulas sero compostas de teoria e prtica. Ao final da teoria ser
aplicado o desenvolvimento de um website. Os aplicativos utilizados sero
Netscape Navigator e Composer, Paint Shop Pro 4.0 , WordPad.
Instrutores
Francisca M. Baptistella - fran@ccuec.unicamp.br
Analista de Sistemas de Informao
Especialista em Arquitetura de Informao e Aplicaes Internet
Gian Franco B. Barcellini
Analista de Suporte
Especialista em Aplicaes Internet
Produo do Centro de Computao da Unicamp

1
1 of 1 06/09/00 11:40
Desenvolvimento de Websites file:///C|/curso_webpages/introducao.html

Contedo Programtico

Introduo
Contedo programtico
Parte I
O Website I
Perfis de Websites
Design Digital - Dicas
Arquitetura da informao
Conceitos do ambiente
Parte II
A linguagem HTML
Browsers
Construindo Pginas com o Composer
Contedo de uma pgina
Applets Java e Java Scripts
Frames
Formulrios
Mapas
Validando Sites
Hospedando sua Home Page
Novas Tecnologias
Catlogos e Links

2
1 of 1 06/09/00 13:09
Desenvolvimento de Websites file:///C|/curso_webpages/conteudo_programatico.html

O Website - Como construir

I - Pesquisa e abstrao: elaborar o roteiro para a pesquisa, reunir todo
material, agrupar os contedos por natureza da informao e organiz-los por
relevncia.
Pesquisar os websites de assuntos afins.
Elaborar uma relao de tudo o que website deve conter.
Agrupar os contedos e defina as ligao que os assuntos tm entre si.
Abstrair - imagine como voc prepararia uma palestra sobre o assunto do
website; qual o contedo programtico ? qual ordem da apresentao ?
Distribuir os assuntos no ncleo, nas bordas e pense em como atualizar
as informaes geradas dinmicamente. Pense no caminho para se
encontrar a informao, na ordem natural da leitura.
I I - Layout do front-page e pginas Internas: a partir da identidade visual
do produto ou servio, trabalhar a aplicao da marca na interface do Website
traando o primeiro esboo do layout.
I I I - Arquitetura da Informao: refinamento do contedo organizado na
pesquisa. Analisar interligao das pginas e aos aspectos da interatividade
com o visitante.
Design da informao: Consiste em "desenhar a informao", uma
folha de papel em branco, um lpis e vrias idias na cabea, como
escrever tudo isso?
Processo intuitivo: agrupamos as informaes em pequenos "grupos de
assuntos", classificamos e interligamos.
Os "grupos de assuntos" do origem aos grupos de pginas,
compondo-se a arquitetura da informao.
Aps a identificao de todos os "grupos de assuntos" que o website ir
abranger, sero agrupados em "reas" ( institucionais, servios,
destaques, etc).
Monte a Arquitetura da Informao, utilizando-se de papel picado com
os nomes dos "grupos de assuntos" e "reas", arranje-os em um espao
que corresponda a tela do computador. Monte o quebra cabea
intuitivamente.
Os elementos que no so da rea de interseco dos "grupos de
assuntos" eleitos mas se ligam com elementos entre as "reas" (ex. as
buscas), necessitam ser colocados na arquitetura.

3
1 of 2 06/09/00 13:07
Desenvolvimento de Websites file:///C|/curso_webpages/o_website.html
3
2 of 2 06/09/00 13:07
Desenvolvimento de Websites file:///C|/curso_webpages/o_website.html

O website - Como construir

I V - Arquitetura de Design: preparar as imagens e layouts das pginas. O
design deve seguir a arquitetura de informao proposta inicialmente.
O front-page do website deve causar IMPACTO e persuadir o visitante.
O website no pode ser desenvolvido como uma revista ou um folheto
(folder) em formato eletrnico.
A internet um veculo de informao muito gil e dinmico.
O visitante espera uma soluo digital surpreendente, diferente, que abra
caminho para interatividade.
importante que o wesite responda aos interesses dos seus visitantes.
V- Contedo: a informao agrupada em pequenos textos, que podem ser
lidos em qualquer ordem, importante classific-los e interlig-los, para facilitar
o acesso informao.
Atualizar contedo - o lanamento do website um passo importante,
mas lembrar sempre que o sucesso dele se d com a atualizao
constante do seu contedo.
Manter o foco nos assuntos contidos na arquitetura de informao.
Cumprir o seu objetivo.
Responder e-mail recebidos na conta webmaster de forma
esclarecedora.
VI- Desenvolvimento: criao dos processos de produo de contedo e
aplicativos.
VII - Hospedagem: Criao do ambiente de produo ou pequisa de
infra-estrutura do provedor de acesso para armazenagem e atualizao.

4
1 of 1 06/09/00 13:07
Desenvolvimento de Websites file:///C|/curso_webpages/o_website_1.html

Perfis de websites

Alguns perfis de websites para que possa reconhec-los em sua pesquisa pela
Internet.
No h um nico modelo para construo dos websites, eles podem variar de
acordo com a natureza e propsito do projeto. H websites que so verdadeiras
"colchas de retalhos", complicados e de navegao confusa, que o visitante se
perde antes de conseguir a informao desejada.
Institucionais - normalmente seu escopo compe-se do seu histrico,
sua repercusso no mercado, seu potencial de gerar negcios e
informaes, ou seja, seu contedo possui maior teor institucional do que
produtos ou servios.
Produtos - vendem seus produtos apresentando suas caractersticas e
benefcios. So dirigidos aos consumidor. Seu maior propsito
persuadir o consumidor.
Servios - vendem servios de consultoria, treinamento, etc. Seu
contedo normalmente rico em informao para esclarecer o domnio e
conhecimento dos servios.
Promocionais - chamados de "hot sites", so breves normalmente com
uma pgina apenas. Comunicam um evento, uma promoo.
Comunidades Virtuais - Normalmente surgem sobre um tema em pauta,
criado e mantido pela prpria dinmica de seus visitantes.

5
1 of 1 06/09/00 13:08
Desenvolvimento de Websites file:///C|/curso_webpages/perfis_de_websites.html

Design Digital

Dicas importantes para fazer o design digital
Tamanho da tela: os monitores de computadores so de tamanhos
variados. Critrio na definio do formato do website (para 640x480 ou
800x600 ou 1024x768).
cones: utilize cones no website se for agregar valor ao contedo ou
tornar a interface mais agradvel e clara.
Plug-ins: evite o uso de plug-ins ou use-o com critrio, seno pode ser
um motivo a mais para o visitante ir embora, no esquea que ele quem
paga a conta e, portanto, no estar disposto a esperar por um longo
tempo de carregamento.
Fontes: fontes inadequadas para leitura, letras capitulares no inicio do
pargrafo, fundos rebuscados (ou escuros) e ttulos coloridos deixam o
carregamento da pgina lento e prejudicam leitura.
Peso da imagem: a soma das imagens em um front-page no deve
ultrapassar 20K.
Texto: cuidado com o tamanho do texto. Seja objetivo e sucinto sem
comprometer a informao.
Cores: explore as 216 cores seguras para o sistema web (do total de 256
cores da palheta utilizada por uma imagem GIF subtrai-se 40 cores que
so diferentes entre computadores Mac e PC).
Mximas da Bauhaus: "menos mais" e "a forma deve seguir a funo".

6
1 of 1 06/09/00 13:09
Desenvolvimento de Websites file:///C|/curso_webpages/design_digital.html

Arquitetura da Informao

Cuide para que a internet no se torne lenta e confusa
Planejar o website fundamental para no criar verdadeiros "becos sem
sada", onde o acesso entre uma seo e outra a volta para a pgina
principal, estruturas que foram o visitante a passar por vrias pginas
at chegar ao ponto desejado.
Estruturar as informaes organizando-as por relevncia e pontos em
comum. Elas ficam em reas que so como sees de uma revista.
Mudar de assunto dever ser to fcil quanto virar uma pgina.
A pgina principal como o ndice de um livro ou a recepo de uma
empresa: s uma orientao para seguir ao destino. Imagine voc estar
em um determinado departamento da empresa e ter quer voltar na
recepo para perguntar onde fica o banheiro mais prximo ou ter que
passar pela recepo toda vez que vai mudar de departamento. Em todas
as pginas do site deve-se ter uma noo clara de onde voc est e para
onde pode ir (navegao visvel).
Os websites na internet devem ser lineares como uma revista ou
hierrquico como uma enciclopdia. No ! A comunicao digital deve
ser como a conversa com um especialista assim que o assunto vai se
aprofundando, vo surgindo novas opinies.
Organizar a informao, desenhar a estrutura do sistema e definir os
caminhos para navegar por ela. O mapa do website est pronto.
No tente mostrar ao visitante tempo todo onde ele est. Isso to chato
e intil quanto uma transmisso de futebol pela TV que mostre o placar
durante todo o jogo.
A Arquitetura do design fundamental quando seguida da Arquitetura
da informao constituda de contedo claro e objetivo. Muitos
designers ignoram essa parte do processo e se concentram apenas na
elaborao de uma interface visualmente agradvel, deixando para um
segundo plano a arquitetura de informao.

7
1 of 1 06/09/00 13:10
Desenvolvimento de Websites file:///C|/curso_webpages/arquitetura_da _informacao.html

Conceitos do Ambiente

Cyberspace
Uma comunicao via telefone entre duas pessoas no as transportam de um
lugar para outro, mas cria um espao intermedirio inexistente, criado por
meios tecnolgicos e chamado de ciberespao, vlido para qualquer tipo de
comunicao remota, como o telefone, chat, rdio etc. Ao desligar o aparelho,
esse espao deixa de existir. A tarefa dos arquitetos de informao e
webdesigners fazer com que esse espao seja aconchegante e
interessante.
Comunicao no-linear
No existe comunicao no-linear. Muitas mensagens e possibilidades
de conexo geram uma comunicao que permite vrios caminhos, mas
nunca dois ao mesmo tempo, pois quando a gente v um texto fora de
seqncia, imediatamente voc sente a incomodao e corrige-o em
seqncia.
A "comunicao no-linear" uma forma de expresso que permite
vrias seqncias, todas lineares, ou uma comunicao
multidimensional, organizada em camadas, como pginas de texto
impressas em papel transparente.
Esse tipo de comunicao pode ser atordoante. O excesso de desvios
em um texto pode fazer com que a mensagem se perca pelo caminho.
Por isso fundamental saber qual o sentido da comunicao antes de
montar sua estrutura.
Textualidade digital
No d para "folhear" um website. Um texto digital no tem uma seqncia,
nem pginas numeradas que impem uma rota de navegao. No website,
cada um l o que interessa, na ordem que desejar. Podem existir vrias leituras.
Em papel isso impossvel. Aqui o texto ter que ser bem elaborado para
atingir o objetivo do leitor, pois no est organizado em captulos.

8
1 of 1 06/09/00 13:11
Desenvolvimento de Websites file:///C|/curso_webpages/conceitos_do_ambiente.html


Hipertexto, Hipermdia e Hiperespao
Hipertexto e hipermdia - Hipertexto texto sublinhado. Hipertexto com
recursos multimdia chamado de hipermdia. Um hipertexto contm um
conjunto de textos interligados e recursivos, ele no comea em lugar algum
nem tem final e apresenta vrias seqncias de leitura. Funciona com um bom
papo que um assunto leva a outro ou como uma boa aula que cresce de acordo
com o interesse do aluno.Um documento digital em hipertexto pode ter pginas
de qualquer tamanho (aconselha-se pginas no maiores que um formato A4
evitando-se uma leitura cansativa e chata). Um sistema de hipertexto d ao
leitor a informao que quiser, na quantidade que quiser. A maior parte dos
roteiros so lineares, quadrados, caretas, sem horizontes.
Hiperespao - Estar em dois lugares no espao ao mesmo tempo. Sair
daqui e ir para o Japo acionando um boto. Passear por lugares que no
existem. s usar a internet. Vamos explorar mais.
Linguagem internet ( linguagem digital )
Visitada atravs de um monitor, internet no revista, no rdio, no TV.
Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clips em vdeo.
Experimente mostrar um artigo de revista e suas fotos pela TV. Ou usar o rdio
para transmitir um filme. Ou transcrever a narrativa de um jogo de futebol em
uma revista. Ou fazer o layout de uma mensagem de secretria eletrnica.
Portanto, muito critrio em usar uma a internet como algo que ela no .
A Internet um veculo de comunicao, com caractersticas prprias. Voc
pode ver a rede a qualquer hora de onde desejar. Imprimir um texto, pegar
uma imagem, mudar de assunto se desejar, enviar e-mail, pesquisar um tema,
se encontrar nos chats, grupos de discusso, mailing list enfim d pr fazer de
tudo na Internet.
A rede tem uma linguagem prpria, mas poucos esto interessados nela. A
maioria das pessoas que desenha interfaces adapta idias do design grfico,
da TV ou da propaganda.
Jargo
"Somos uma empresa de webvertising, focada em new media e solues
customizadas para atingir o seu target e aumentar o seu share, sem estourar
seu budget. No se esquea de nos incluir no marketing mix". Ateno! Use o
bom e velho portugus para explicar o que voc faz, a sim voc vai
impressionar.
A idia da "Home Page" vem de um dos primeiros sistemas de Hipertexto, o
Hypercard, da Apple. Era uma espcie de fichrio digital em que o usurio
1 of 2 06/09/00 13:12
Desenvolvimento de Websites file:///C|/curso_webpages/conceitos_do_ambiente_2.html
podia ver os registros em seqncia (o prximo e o anterior) ou voltar para a
primeira ficha, chamada de Home. A idia era que, se voc estivesse perdido,
poderia voltar para casa.

9
2 of 2 06/09/00 13:12


Audincia do Website
Existem muitas formas de medir a audincia de um site e muitas formas de
tapear essa medio. Muitos endereos digitais se vangloriam da quantidade de
hits que eles conseguem por ms. Alguns se baseiam nesse nmero para fazer
tabelas com custos de mdia. No acredite nisso.
HITS - cada hit um objeto transferido para o computador do espectador. Uma
pgina com texto e dez imagens fornecer onze hits. Cem mil hits no
significam cem mil pessoas visitando.
PAGE VIEWS - quantidade de documentos ("pginas") acessados. Cem mil
page views no significam cem mil pessoas visitando.
O fato de uma pgina ter sido enviada para o computador do usurio no
significa que ela foi vista. Existem relatrios de acessos que indicam no s o
nmero de visitantes, mas quais pginas foram mais visitadas, em que hora do
dia, e de que servidor elas vieram.
Propaganda na Internet
Colocar a ficha tcnica de um Audi em pginas da Veja um desperdcio de
dinheiro, pois o pblico limitado etc. A internet um veculo de informao
onde as pessoas no ligam seus computadores e se conectam, gastando um
dinheiro, para ver s umas imagens bonitinhas. importante fornecer contedo.
Rede de pessoas
A internet uma rede mundial de pessoas, conectadas dos mais diversos
pontos do mundo, pelos mais remotos motivos. Hoje elas usam computadores,
daqui a algum tempo vo estar usando outro veculo, no importa.
Planejar a presena internet como uma ao de comunicao, no de
informtica. Da mesma forma que as revistas e programas de TV, que usam
vrios recursos de computao grfica mas no so consideradas produtos de
informtica.
Contedo
Por mais interessante que possa ser um bom design, ele apenas a
embalagem de um produto digital, o pblico pode at achar agradvel, mas no
est interessado nela, e sim em seu contedo.
1 of 2 06/09/00 13:13
A interatividade e os recursos grficos de um endereo digital so apenas
chamarizes. O que interessa, cativa e mantm um visitante conectado a
possibilidade de participao. a porta de entrada para um relacionamento
ntimo e pessoal entre uma empresa e seus consumidores.
Empatia
Analise os sites que voc conhece, que reao eles provocam no visitante?
Muitos so lerdos, feios, lineares e montonos. E com pouco contedo
relevante. No preciso nem dizer que o visitante que caia num desses
provavelmente vai embora, mesmo que esteja interessado no assunto. Da
mesma forma que ns fugimos dos chatos que se orgulham do carro, contam
histrias dos filhos ou das viagens que fizeram a Cancn.
Mas se o contedo e a forma do site forem bacanas, incentivarem a
participao e a interferncia do visitante, eles geraro uma empatia, ou seja,
uma identificao completa com o pblico, que visita, volta e conta para os
amigos.
Interface
Ns falamos portugus, o computador fala HTML. Pra servir de intrprete, os
layouts tm um nome bacana interfaces, funcionam como uma "face
intermediria" entre o computador e voc.
Por isso no adianta fazer s uma carinha bonitinha, cheia de cones e
desenhinhos ou fotos legais. preciso estimular o visitante a reagir, participar,
opinar, brincar com o site. As interfaces existem para que as pessoas
esqueam que esto usando computadores. Por isso elas precisam ser
naturais, divertidas e interativas.

10
2 of 2 06/09/00 13:13

A Linguagem HTML

HTML (Hypertext Markup Language) - a linguagem na qual escrevemos as
pginas do website para disponibiliz-las no WWW da Internet. Compe-se de
diretivas que so interpretadas pelos browsers. Ao interpretar as diferentes
diretivas temos a apresentao de uma pgina seguindo a formatao de texto,
cores e imagens definida pelo autor.
Pgina - um hipertexto no World Wide Web que associa diferentes tipos de
mdia como textos, imagens, udio evdeo, conectados por hiperlinks. Pode ser
nica ou estar ligada a outras pginas formando um sistema de informaes ou
um Website.
"Home Page" ou Pgina principal - A pgina de entrada ou pgina inicial.
Tim Beners-Lee - um dos criadores do World Wide Web, a linguagem foi
definida para ser usada por processadores de texto e os autores de pginas
no deveriam conhecer as diretivas produzidas pelo processo de criao.
Editores grficos - O uso dos editores permitem que o autor crie uma pgina
sem conhecer os cdigos da linguagem HTML. Alm de Editores existem
tambm programas Assistentes que transformam documentos gerados em MS
Word, Power Point e Excel em pginas HTML..

11
1 of 1 06/09/00 11:41
Confeccao de Paginas file:///C|/curso_webpages/linguagem_introducao.html

A Linguagem HTML

Estrutura da pgina
<HTML> e </HTML> - So tags que dizem que o documento do tipo html, ou
seja uma pgina web.
Estrutura do documento HTML
cabealho <HEAD> e </HEAD> - aqui especifica-se o ttulo da pgina
<TITLE> e </TITLE>, ser apresentado na barra superior do browser.
Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto,
links, e o incio do documento.
Propriedades aplicadas a tag body, se no forem aplicadas assumem um
valor default

bgcolor - cor de fundo para a pgina
background - imagem nos formatos .jpg ou .gif usada de fundo da
pgina
text - define uma cor para o texto
link - define uma cor para os links
vlink - define cor para os link j visitados
alink - define a cor para o link na hora que for ativado

Exemplo 1
<BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor
TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor>

Exemplo 2
<BODY BACKGROUND=nome_imagem BGCOLOR=#cdigo_cor
TEXT=#cdigo_cor LINK=#cdigo_cor VLINK=#cdigo_cor
ALINK=#cdigo_cor>

Links: texturas de BACKGROUND / Um teste de CORES / Javascript
que faz teste de cores.

12
1 of 1 06/09/00 11:42
Oficina HTML - Estrutura de uma pgina HTML file:///C|/curso_webpages/linguagem_estrutura_pagina.html

A Linguagem HTML

Formatao do Texto
O texto pode ser formatado com as tags de tamanho, itlico, negrito e fonte
monoespaada, sobrescrito, subscrito e piscante. Para todas elas necessrio
delimitar o incio e o fim do texto a ser formatado.
Cor e fonte :
<font color = nome_cor> Texto </font>
<font face = tipo_letra > Texto </font> ,
<font size =+n>Texto </font> , onde n seria o incremento ao tamanho original
Tipos de fonte definidas pela linguagem HTML :
Cabealhos :
<H1> Tamanho H1</H1>
h1, h2, h3, h4, h5, h6

Outros estilos :
<B> Texto em Negrito ( Bold ) </B> -- Texto em Negrito ( Bold )
<I> Texto em Itlico </I> -- Texto em Itlico
<TT> Texto com fonte monoespaada </TT> -- Texto com fonte
monoespaada
<U> Texto sublinhado </u> -- Texto sublinhado
<SUP> Texto sobrescrito </SUP> --
Texto sobrecrito

<SUB> Texto subscrito </SUB> --
Texto subscrito

<BLINK> Texto piscando </BLINK> --

Texto piscando
1 of 2 06/09/00 11:42
Oficina HTML - Estrutura de uma pgina HTML file:///C|/curso_webpages/linguagem_formatacao_texto.html
13
2 of 2 06/09/00 11:42
Oficina HTML - Estrutura de uma pgina HTML file:///C|/curso_webpages/linguagem_formatacao_texto.html

A Linguagem HTML

Acentuao e Caracteres Especiais
A codificao permite a qualquer equipamento interpretar os cdigos e exibir na tela
o caracter desejado. cdigos funcionam:
Primeiro o caracter "&"
Seguido da letra que dever ser acentuada, pode ser minscula ou maiscula
Veja a tabela abaixo coloque o cdigo do acento desejado
Acrescente o caracter " ; " ( ponto de vrgula ) Exemplos :
dirio = diário
natao = natação
seqncia = seqüência
Acentos
Agudo Grave Circunflexo Til Trema Cedilha
&_acute; &_grave; &_circ &_tilde; &_uml; &_cedil;
Caracteres Especiais
& < > (c)
& < > &copy

14
1 of 1 06/09/00 11:42
Oficina HTML - Acentuao e Caracteres Especiais file:///C|/curso_webpages/linguagem_acentuacao.html

A Linguagem HTML

Disposio do Texto na Pgina
Diretivas para uma formatao bsica do um texto em uma pgina.
<CENTER> : centraliza o texto em relao pgina
<BR> : quebra de linha, iniciando o texto seguinte na linha logo abaixo
<P> : fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar
outro pargrafo
<HR> : rgua horizontal; inclui uma linha horizontal no texto, separando o
texto em blocos
width = _% comprimento. Ex. width=50%
size = _ espessura do trao. Ex. size=6
<PRE> : respeita a formatao original do texto inserido na pgina

15
1 of 1 06/09/00 11:43
Oficina HTML - Disposio do Texto na Tela file:///C|/curso_webpages/linguagem_disposicao_texto.html

A Linguagem HTML
Definio de Listas
Listas so utilizadas para organizar seu texto em uma relao de itens e subitens,
ordenados ou no. Tipos de listas : Listas Ordenadas, Listas No-Ordenadas e Listas
de Definio.
Listas Ordenadas
<ol> - inicia uma lista
type - define o tipo de numerao da lista A - Letras maisculas
a - Letras minsculas
I - Algarismos romanos
1 - Nmeros arbicos
</ol> - finaliza a lista
<li> - determina um item da lista
Exemplo :
Cdigo html
<ol>
<li>Primeiro
<li>Segundo
<li>Terceiro
</ol>
No browser
1- Primeiro
2- Segundo
3- Terceiro
Listas No-Ordenadas
<ul> - marca o incio da lista
type - define o tipo de marcador de cada item da
lista
disk - pequeno disco slido
square - quadrado preenchido
circle - crculo cheio
</ul>- marca o final da lista
<li> - determina um item da lista
Exemplo :
1 of 2 06/09/00 11:44
Oficina HTML - Definio de Listas file:///C|/curso_webpages/linguagem_definicao_listas.html

Cdigo html
<ul>
<li>Primeira
<ul>
<li>Turma
<li>Filha
</ul>
<li>Segunda
<li>Terceira
</ul>>
No browser
Primeira
Turma
Filha
Segunda
Terceira
Listas de Definio
<dl> marca o incio da lista
<dt>indica termo a ser definido
<dd>indica a definio do termo acima
Exemplo:
Cdigo html
Unicamp
<dl>
<dt>CCUEC
<dd>Centro de Computao
<dt>HC
<dd>Hospital das Clnicas
</dl>
No browser
Unicamp
CCUEC
Centro de Computao
HC
Hospital das Clnicas

16
2 of 2 06/09/00 11:44
Oficina HTML - Definio de Listas file:///C|/curso_webpages/linguagem_definicao_listas.html

A Linguagem HTML

Imagens
Formatos :
GIF JPG
Desenvolvido pela CompuServe com
inteno de diminuir o tamanho do
arquivo para trfego na rede.
recomendado para cones ou
imagens com menos de 256 cores,
cores lisas, puras, preto e branco.
Comparada com o formato jpg em
tamanho maior, porm em
qualidade superior. Uma imagem
.gif pode ser transparentizada.
Padro foi proposto pelo COMIT
ISO, usado para imagens mais
complexas como fotografias com
variao e mais de 256 cores.
Permite alta taxa de compresso,
gera um arquivo menor, s vezes
1/5 do tamanho original, s que
isso implica perda de informao
e qualidade.
A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usados
com alguns parmetros como:
border para determinar a moldura da imagem
Imagem com borda
<IMG border=6 SRC=figura.gif>

width para determinar a largura da imagem
height para determinar a altura da imagem
Imagem com limitao de Altura e Comprimento
<IMG width=50 height=90 SRC=figura.gif>

17
1 of 1 06/09/00 11:44
Oficina HTML - Imagens file:///C|/curso_webpages/linguagem_imagens.html

A Linguagem HTML

Imagens
Alinhar um texto em relao a uma imagem. Parmentros de alinhamento :
align=left para alinhar a imagem a esquerda do texto.
Imagem com texto alinhado a esquerda
<IMG align=left SRC=figura.gif> Texto que acompanha a figura.
Texto que acompanha a figura.
align=right para alinhar a imagem a direita do texto
Imagem com texto alinhado a direita
<IMG align=right SRC=figura.gif> Texto que acompanha a figura

align=top para alinhar o texto com o topo da imagem.
Imagem com texto alinhado ao topo da imagem
<IMG align=top SRC=figura.gif> Texto que acompanha a figura.
align=middle para alinhar o texto com o meio da imagem.
Imagem com texto alinhado a meia altura da imagem
<IMG align=middle SRC=figura.gif> Texto que acompanha a figura.
align=bottom para alinhar o texto com a parte inferior da imagem.
Imagem com texto alinhado ao p da imagem
<IMG align=bottom SRC=figura.gif> Texto que acompanha a figura.
Onde encontrar cones ? Visite o IconBAAZAR (www.iconbazaar.com).

18
1 of 1 06/09/00 11:45
Oficina HTML - Imagens file:///C|/curso_webpages/linguagem_imagens_2.html

A Linguagem HTML

Imagens
Alinhar um texto em relao a uma imagem. Parmentros de alinhamento :
align=left para alinhar a imagem a esquerda do texto.
Imagem com texto alinhado a esquerda
<IMG align=left SRC=figura.gif> Texto que acompanha a figura.
align=right para alinhar a imagem a direita do texto
Imagem com texto alinhado a direita
<IMG align=right SRC=figura.gif> Texto que acompanha a figura
align=top para alinhar o texto com o topo da imagem.
Imagem com texto alinhado ao topo da imagem
<IMG align=top SRC=figura.gif> Texto que acompanha a figura.
align=middle para alinhar o texto com o meio da imagem.
Imagem com texto alinhado a meia altura da imagem
<IMG align=middle SRC=figura.gif> Texto que acompanha a figura.
align=bottom para alinhar o texto com a parte inferior da imagem.
Imagem com texto alinhado ao p da imagem
<IMG align=bottom SRC=figura.gif> Texto que acompanha a figura.
Onde encontrar cones ? Visite o IconBAAZAR (www.iconbazaar.com).

18
1 of 2 06/09/00 12:25
2 of 2 06/09/00 12:25

A Linguagem HTML

Tabelas
Organiza o contedo de uma pgina. As tag <TABLE> </TABLE> identifica a
tabela, especificar a espessura da borda com o parmetro BORDER.
<th>... </th>
define o cabealho de cada coluna
<tr> ... </tr>
delimita a linha
<td> ... </td>
delimita cada elemento da tabela, cada clula.

Atributos que podem ser usados na tabelas :
colspan : especfica quantas colunas da tabela a clula ocupar
rowspan : especfica quantas linhas da tabela a clula ocupar
width : define a largura exata da clula
align : alinhamento horizontal ( right, center, left )
valign : alinhamento vertical ( top, middle, bottom )

Exemplo 1:
<table border=4> <th>Coluna 1</th><th>Coluna 2</th>
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
</table>
Resultado na tela :

Coluna 1 Coluna 2
linha 1, coluna 1 linha 1, coluna 2
Exemplo 2 :
<table border=4>
1 of 2 06/09/00 11:47
Oficina HTML - Tabelas file:///C|/curso_webpages/linguagem_tabelas.html
<th colspan=2>Colunas 1 e 2</th>
<tr>
<td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
<th rowspan=3>3 linhas</th>
<td>uma linha</td>
<tr><td>duas linhas</td></tr>
<tr><td>tres linhas</td></tr>
</table>
Resultado na tela :
Colunas 1 e 2
3 linhas
uma linha
duas linhas
trs linhas

19
2 of 2 06/09/00 11:47
Oficina HTML - Tabelas file:///C|/curso_webpages/linguagem_tabelas.html

A Linguagem HTML

Links com Outros Documentos
Fazer links para outros documentos ( pginas, imagens, sons, etc ), atravs da tag
<A> </A>, chamadas de ncoras. Informar o HREF (endereo de onde est a
pgina que ser acessada ) e o TEXTO/IMAGEM que indicar o link.
Por exemplo : < A HREF=http://endereo/documento> texto/imagem </A>
Referncia a outro documento pode ser feita por :
Caminho Absoluto : corresponde ao endereo completo do documento,
utilizado quando os documentos esto em servidores diferentes.
Ex: < A HREF=http://mquina/diretrio/pagina.html >
Caminho Relativo : quando o documento a ser acessado est no mesmo
servidor que a pgina atual.
Ex: < A HREF=outra-pgina.html >
Ligao com trechos da mesma pgina : desvia para o local do trecho
desejado na mesma pgina.
Ex: < A HREF=#parte-1>
Obs: Antes do trecho desejado dever existir um "target", uma marca indicando a
localizao.
<A NAME=parte-1>
Links para outros Servios Internet
Telnet
<A HREF=telnet://ccuec.unicamp.br> telnet para mquina turing.unicamp.br </A>
Telnet para mquina turing.unicamp.br
Ftp
<A HREF=ftp://ftp.unicamp.br> Ftp para mquina ftp.unicamp.br </A>
Ftp para mquina ftp.unicamp.br
Mail
<A HREF="mailto:cursos@ccuec.unicamp.br" > mails para a conta cursos
Mails para a conta cursos
( Veja outros parmetros possveis )
News
<A HREF=news:news.unicamp.br > Acesso Usenet </A>
Acesso Usenet
1 of 2 06/09/00 11:48
Oficina HTML - Links com Outros Documentos file:///C|/curso_webpages/linguagem_links.html

20
2 of 2 06/09/00 11:48
Oficina HTML - Links com Outros Documentos file:///C|/curso_webpages/linguagem_links.html

Browsers

O acesso ao WWW possvel atravs dos "browsers", ou navegadores,
programas que tm por finalidade :

transferir informaes ( textos, imagens, som, vdeo ) entre o servidor e o
cliente.
codificar as diretivas e apresentar no monitor.
iniciar a execuo de arquivos de som e vdeo, caso existam, e se a
instalao dispor dos programas necessrios.
Possuem muitos recursos e funes que devem estar devidamente
configuradas para permitir uma perfeita navegao.

Browsers mais utilizados:
Netscape
Internet Explorer

21
1 of 1 06/09/00 11:48
Confeccao de Paginas file:///C|/curso_webpages/4.html

Construindo pginas

Para a criao de nossas pginas estaremos neste treinamento utlizando o Editor
Netscape Composer 4.04 .
Este editor, embora apresente algumas limitaes e restries, permite a criao e
manuteno de pginas sem que seja necessrio profundos conhecimentos da
linguagem HTML.
Mostraremos apenas as funes dos botes e alguns menus, por serem estes os mais
importantes. Ressaltando que todas as opes disponveis nos botes aparecem nos
menus tambm.
Arquivo, Editar, Publish, Visualizar no Browser
Impresso, Busca de palavras, Corretor Ortogrfico e HTML
Fontes ( tipo, tamanho, formatao , cor )
Disposio do Texto em Listas, Centralizao e Pargrafos
Menu View

22
1 of 1 06/09/00 11:52
Oficina HTML - Composer file:///C|/curso_webpages/5.html

Netscape Composer

Arquivo, Editar, Publish, Visualizar no Browser
Arquivo
Iniciar : comea uma nova pgina em branco, pronta para ser editada
Abrir : abre um arquivo .html j existente, podendo ser alterado
Salvar : salva o arquivo no diretrio escolhido com o nome que for
especificado e com extenso .html
Editar
Assim como em qualquer aplicativo para Windows, esses botes
funcionam da mesma maneira. Sempre trabalhando com a rea de
Transferncia.
Cut ( cortar ) : cortar texto selecionado
Copy ( copiar ) : copiar texto selecionado
Paste ( colar ) : colar
Publish
Essa uma ferramenta que possibilita alteraes em pginas HTML
diretamente no servidor WWW. Desde que a pessoa tenha permisso para tal
ao. Isso faz parte da configurao do seu servidor. Clicando em publish, voc
precisa apenas informar em qual diretrio a pgina dever ser salva e sua
senha.
Visualizar no Browser
Aqui podemos visualizar no browser Netscape e ter uma idia de como ficaria
na tela a pgina construda ou alterada.

22.1
1 of 1 06/09/00 11:53
Oficina HTML - Composer file:///C|/curso_webpages/composer2.html

Desenvolvimento de Webpages
Netscape Composer

Impresso, Busca de Palavras, Corretor Ortogrfico e Tags HTML
Impresso
Podemos imprimir a pgina se desejarmos, inclusive as opes so as
mesmas de um outro software para Windows, precisamos indicar a
impressora, podemos tirar mais de uma cpia ou escolher quais pginas
devero ser impressas.
Busca de Palavras
H a possibilidade de localizarmos palavras dentro da pgina sem
precisar olhar o arquivo inteiro linha por linha, temos a chamada busca
rpida, onde voc informa a palavra a ser procurada e lhe ser mostrado o
resultado, mesmo que forem encontradas mais de uma vez.
Corretor Ortogrfico
Para corrigir erros de ortografia basta acionar o Corretor Ortogrfico e
ele indicar os erros e juntamente sugestes do que poderia ser colocado.
Tags HTML
Link : ligao para outra pgina ou para partes do mesmp arquivo.
Target : atribui nomes pelo qual poderemos referenciar futuramente.
Imagem : insere uma imagem no local onde estiver o cursor
Rgua : constri uma rgua horizontal, onde podemos definir a
espessura e comprimento
Tabela : cria tabelas, na qual podemos mudar borda, linhas e colunas
...

22.2
1 of 1 06/09/00 11:55

Netscape Composer

Fontes ( tipo, tamanho, formatao, cor )
Para todo texto digitado podemos usar esses formatos, que servem para destacar algum
trecho, ttulo, ou mesmo melhorar a organizao do contedo da pgina.
Paragraph Styles
As opes disponveis nesse item, so para
tipos de cabealhos, pargrafos e inclui
tambm lista.
O mais importante desses estilos, Heading
1-6 pois destaca o texto como se fosse um
ttulo, variando o tamanho, sendo 1 o maior
e 6 o menor. Os demais fazem praticamente
os mesmo efeitos j apresentados.
Font
Podemos escolher uma fonte diferente,
para isso basta t-las instaladas no
microcomputador, porm para que todos
que acessem sua pgina vejam preciso
que tenham as fontes em seus micros
tambem.

22.3
1 of 1 06/09/00 11:56

Netscape Composer

Fontes ( tipo, tamanho, formatao, cor )
Size
Permite mudar o tamanho da fonte ( letras )
utilizada. Basta marcar o texto a ser mudado
e escolher um nmero. Ou ento definir
antes de iniciar a digitao.
Formatao
Podemos deixar uma palavra, texto ou
pargrafo em negrito, itlico, sublinhado ou
normal, sem nenhum desses efeitos. Basta
selecionar e clicar no boto desejado.
Color
Ao mesmo tempo que podemos mudar o
tamanho da fonte, tambm mudamos a cor.
A paleta de cores varia de acordo com a
configurao do seu computador

22.4
1 of 1 06/09/00 11:57

Netscape Composer

Listas, Centralizao e Pargrafos
Podemos disponibilizar o contedo da pgina de vrias formas, atravs de listas,
centralizao de textos ou pargrafos, conforme a sua necessidade.
LISTAS
Utilizamos as listas ordenada ou numerada
para disponibilizar os dados de maneira
organizada. Por exemplo :
Carros
Fiat
Ford
Chevrolet
Volkswagen
CENTRALIZAO
Para centralizar o texto em relao pgina
basta selecionar as linhas que sofrero o
efeito e clicar no formato desejado. Outra
maneira, se logo no incio for selecionado
algum estilo, todo o restante seguir o
formato escolhido at ser desativado.
RECUO / AVANO

Pargrafos so pequenos espaos deixados
partir da margem, podem ou no existir
conforme os botes que estiverem
selecionados. Temos o recuo e o avano.
Funciona nas listas tambm, para colocar
em sub-nveis.

22.5
1 of 1 06/09/00 11:59

Netscape Composer

Menu VIEW
No menu visualizar ( VIEW ) temos uma opo importante para quem estiver
interessado em visualizar o cdigo HTML, a Page Source, que mostrar o fonte
da pgina que estiver carregada com todas as diretivas.
Page Info apresenta informaes sobre a pgina tais como estrutura e imagens
relacionadas , alm de informaes sobre o arquivo ( ltima modificao , etc ) .

22.6
1 of 1 06/09/00 11:59

Contedo de uma pgina

Algumas consideraes importantes a seguir na construo de um site eficiente
:
Autoria - definir o autor da pgina pelo prprio Netscape Composer e
tambm indicar os autores e responsveis pelo site.
Finalidade - deixar claro qual a finalidade principal de seu j nas
primeiras pginas de apresentao
Interativatividade - utilizar os recursos da rede de modo a permitir uma
maior integrao com os visitantes.
Navegabilidade - definir links entre as diversas pginas do site
unindo-as logicamente; a utilizao de frames pode um recurso bastante
til; evite excesso de links desnecessrios; prefira abrir links externos
como outra sesso.
Recursos multimdia - utilizar recursos de multimdia possveis em uma
pgina caso quando necessrios.
Visualizao - indicar qual a melhor configurao para a visualizao de
sua pgina, 640x460 ou 800x600. Verificar como fica a visualizao em
diferentes browsers.

23
1 of 1 06/09/00 12:00
Oficina HTML - Avanado - Applets Java file:///C|/curso_webpages/6.html

Applets Java e Java Scripts

Applets Java
Applets Java so aplicaes desenvolvidas na linguagem Java que podem ser
incluidas em uma pgina HTML e executas quando apresentadas em seu Browser.
Estes aplicativos podem ser desde simples animaes para dar um pouco de vida a
uma pgina , ou at mesmo complexos aplicativos como acesso a Bancos de
Dados.
Quando uma pgina que contm um applet solicitada pelo Cliente a um Servidor,
o cdigo executvel trazido ao Cliente e guardado em uma rea temporria
sendo eliminado aps a apresentao da pgina .
Este procedimento anlogo ao envio do cdigo HTML que fica guardado no
cache quando a pgina trazida do Servidor.
Para inserir um applet em uma pgina deve-se incluir no HTML alguns cdigos que
iniciam a execuo do applet e tambm ter no diretrio da pgina o applet j
compilado com a extenso .class. Esses programas podem ser desenvolvidos por
voc ou ento existem alguns sites onde pessoas disponibilizam applets, mas
dificilmente voc consegue capturar um arquivo .class em qualquer pgina que
contenha uma applet java pois existem protees.
Conhea alguns sites com applets interessantes para download:

The Java Boutique (http://www.j-g.com/)
Demicron ( http://www.demicron.se)
Inova Rapid Site ( http://www.inova.net/algomais/)
Javapowered.com (http://www.javapowered.com/)
Javascripts
Analogamente aos Applets na linguagem Java, podemos definir algumas funes
ou scripts que podem ser escritas na linguagem Javascript e includas numa
pgina HTML aps a diretiva <SCRIPT> .
Veja um exemplo de aplicao de Javascripts bastante simples onde
poderemos trocar uma imagem por outra ao passarmos o mouse sobre a figura.

CCUEC ( http://www.ccuec.unicamp.br)

1 of 2 06/09/00 12:02
24
2 of 2 06/09/00 12:02

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 devera 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.

25
1 of 1 06/09/00 12:02
Oficina HTML - Avanado - Frames file:///C|/curso_webpages/8.html

Frames

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. Observe :
<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>
Assim temos nossa tela dividida 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.
O tamanho das reas podem ser definidos em porcentagem da tela ao invs do
valor fixo em pixels. Para tanto basta indicarmos "%" na definio do tamanho
das linhas e colunas .
Ainda podemos definir atributos em nosso Frameset que controlam a
visualizao e navegao coordenada entre os frames.

25.1
1 of 1 06/09/00 12:03

Frames

Atributos de controle
Margem :
marginwidth : determina as margens direita e esquerda do frame
marginheight : determina as margens superior e inferior do frame

Barra de rolagem :
Scrolling : pode-se determinar se o frame ter barra de rolagem se
necessrio ou se nunca apresentar a barra mesmo se necessrio.
Eliminao da barra de rolagem
< FRAMESET src = ... SCROLLING = "NO" >

Alterao da estrutura :
Os navegadores permitem que o visitante altere a posio dos frames. Para
tanto o atributo noresize inibe esta possibilidade e torna os frames fixos
conforme definido.
< FRAMESET src = ... NORESIZE>
Bordas :
Podemos definir se nossa estrutura de quadros ser apresentada
ressaltando-se as bordas entre ou frames ou no usando os atributos
frameborder e border.
Eliminao das bordas dos frames:
< FRAMESET src = ... FRAMEBORDER="NO" >
Eliminao do espao entre os frames :
< FRAMESET src = .... FRAMEBORDER="NO" BORDER="0"
>

Direcionamento :
O atributo target (alvo) o que indica onde uma pgina dever ser
apresenta assim que o visitante clica em um link . Por definio uma nova
pgina ser apresentada na mesma rea onde est link. Para redirecionar a
pgina para outra rea temos as possibilidades a seguir que devem ser constar
na definio no link ( <a href=pagina.html target= ... > ) :
target="nome da rea " : carrega a pgina na rea especificada.
1 of 2 06/09/00 12:03
target=_top : limpa a tela e abre a nova pgina ocupando toda a tela.
target=_blank : abre uma nova janela para exibir a pgina.
target=_self : carrega a pgina na mesma rea do link. Opo
default.
No Frame :
Alguns browsers no suportam frames e a opo noframe permite que seja
apresentada outra pgina como alternativa.
<noframe>
.... definio da pgina alternativa ...
<body> ... contedo da pgina ... <img src=fig.jpg> .... etc
...
</noframe>

25.2
2 of 2 06/09/00 12:03

Formulrios

Os formulrios em uma pgina Web permitem coletar informaes das pessoas que visitam
uma pgina. Atravs de algumas diretivas especiais podemos definir as literais e o formato
dos campos
de resposta. Tambm definimos que ao ser tomada assim que o formulrio for
preeenchido e enviado.
Estaremos apresentando as diretivas e parmetros necessrios para a criao de um
formulrio exemplo com os diversos tipos de campos para resposta onde a ao ser enviar
uma mensagem contendo todas as informaes preenchidas para um e-mail especificado
como responsvel pela recepo das informaes.
O formulrio dever estar em um servidor autorizado a usar o programa que estiver no
cgi-bin.
Diretivas
Definio do Formulrio
Campos Tipo Texto
Campos de Escolha
Botes de Ao
Botes de Seleo
rea de Texto
Alm da definio do formulrio e necessrio definir o programa que executar a
transmisso do formulrio . Este programa deve estar gravado em um diretorio cgi-bin.
Alguns endereos:
FormMail, Matt's Scripts, worldwidemart.com/scripts/formmail.shtml
Site contendo muitos scripts disponiveis para download e possveis de serem
customizados.

26
1 of 1 06/09/00 12:04

Formulrios

Uma pgina pode ser conter campos em diversos formatos para entrada de dados
digitados pelo visitante e enviados ao servidor que dar incio a execuo de um programa
de tratamento destas informaes.
A diretiva FORM define o incio do formulrio. O atributo METHOD define o mtodo de
acesso a
URL onde est o script, programa a ser executado no servidor , especificado pelo atributo
ACTION.
Exemplo :
<FORM METHOD=POST ACTION= script >
...
... (definio dos campos de formulrio)
...
</FORM>
Campos do tipo "Hidden" (ocultos)
Alm dos campo definidos no formulrio que esto visveis e sero preenchido pelo visitante
podemos definir campos no visveis que estaro passando parmetros para o programa a
ser executado.
<INPUT TYPE="hidden" NAME="nome-do-campo" Value="valor" >
nome do campo o mesmo nome da varivel usada pelo programa no servidor e
"valor" e'o valor do campo que estamos passando ao programa.

26.1
1 of 1 06/09/00 12:04
Oficina HTML - Avanado - Formularios - Campos Input file:///C|/curso_webpages/101.html

Formulrios

Campos Tipo Texto
<FORM>
Nome: <INPUT TYPE=TEXT NAME="Nome">
Senha: <INPUT TYPE=PASSWORD
NAME="Senha">
</FORM>
Nome:
Senha:
Alguns Atributos :
Value : Inicializa um campo texto com o valor definido
Ex.: Nome: <INPUT TYPE=TEXT NAME="Nome" VALUE="Oswald de
Andrade">
Nome:
Size : Delimita o tamanho do espao para entrada do valor nos campos
TEXT ou
PASSWORD. Delimita apenas o espao mostrado e no tamanho do
campo.
Ex.: Nome: <INPUT TYPE=TEXT NAME="Nome" SIZE=30 >
Nome:
Maxlenght : Delimita o nmero de caracteres aceitos como entrada em um
campo
TEXT ou PASSWORD.
Ex.:Sigla do Estado : <INPUT TYPE=TEXT NAME="Sigla do Estado"
MAXLENGHT=2>
Sigla do Estado :
26.2
1 of 1 06/09/00 12:05
Oficina HTML - Avanado - Formularios - Campos Input file:///C|/curso_webpages/102.html

Formulrios

Campos Tipo Mltipla Escolha
Frutas :
<FORM>
<INPUT TYPE=CHECKBOX NAME="fruta"
VALUE="Abacaxi">Abacaxi
VALUE="Morango">Morango
VALUE="Limo">Limo
VALUE="Pera">Pera
VALUE="Laranja">Laranja
</FORM>
Frutas :
Abacaxi
Morango
Limo
Pera
Laranja
O atributo CHECKED serve para inicializar um item como j escolhido.
Campos Tipo Escolha nica
<FORM>
Estado Civil :
<INPUT TYPE=RADIO NAME="estciv"
VALUE="Solteiro">Solteiro
VALUE="Casado">Casado
<INPUT TYPE=RADIO NAME="estciv" VALUE="Viuvo">Viuvo
VALUE="Divorciado">Divorciado
<INPUT TYPE=RADIO NAME="estciv" VALUE="Outros">Outros
</FORM>
Estado Civil :
Solteiro
Casado
Viuvo
Divorciado
Outros
26.3
1 of 1 06/09/00 12:06
Oficina HTML - Avanado - Formularios - Campos Multipla Escolha file:///C|/curso_webpages/103.html

Formulrios

Botes de Ao
SUBMIT - Envia os dados preenchidos no formulrio para o servidor, iniciando a execuo
do programa especificado no atributo ACTION.
RESET - Reinicializa o formulrio com os valores previamente definidos.
O atributo VALUE define a mensagem sobre o boto.
<FORM>
<INPUT TYPE=SUBMIT VALUE="Enviar">
<INPUT TYPE=RESET VALUE="Cancelar">
</FORM>
26.4
Enviar Cancelar
1 of 1 06/09/00 12:06
Oficina HTML - Avanado - Formularios - Campos de Acao file:///C|/curso_webpages/104.html

Formulrios - Botes de Seleo

A diretiva <SELECT> utilizada juntamente com a diretiva <OPTION> para definir uma lista
de valores a serem selecionados.
Exemplo:
<SELECT NAME="plataforma">
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
<OPTION>Mainframe IBM
</SELECT>
Pode-se definir um valor como default usando o atributo SELECTED.
Exemplo: <OPTION SELECTED>valor
O atributo SIZE utilizado para se apresentar mais de um valor na pgina:
<SELECT NAME="plataforma" SIZE=3>
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
</SELECT>
26.5
PC
PC
Workstation
Alpha
1 of 1 06/09/00 12:07
Oficina HTML - Avanado - Formularios - Botoes de Selecao file:///C|/curso_webpages/105.html

Formulrios - Botes de Seleo

A diretiva <SELECT> utilizada juntamente com a diretiva <OPTION> para definir uma lista
de valores a serem selecionados.
Exemplo:
<SELECT NAME="plataforma">
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
</SELECT>
Pode-se definir um valor como default usando o atributo SELECTED.
Exemplo: <OPTION SELECTED>valor
O atributo SIZE utilizado para se apresentar mais de um valor na pgina:
<SELECT NAME="plataforma" SIZE=3>
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
</SELECT>
26.5
PC
PC
Workstation
Alpha
1 of 1 06/09/00 12:09

Formulrios

rea de Texto
A Diretiva TEXTAREA define uma rea para entrada de textos. Os atributos COLS e ROWS
definem o tamanho da janela.
Exemplo
<TEXTAREA COLS=60 ROWS=10 NAME="texto">rea para entrada de texto
</TEXTAREA>

26.
1 of 1 06/09/00 12:09

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= "5,38, 86,54" HREF=111.htm>
<AREA SHAPE=rect COORDS= "6,64, 85,94" HREF=112.htm>
<AREA SHAPE=rect COORDS= "8,106, 45,120"
HREF=113.htm>
HREF=114.htm>
HREF=115.htm>
HREF=116.htm>
HREF=117.htm>
</MAP>
<IMG Border=0 SRC="indicecc.gif" USEMAP="#menu" >
No exemplo acima a diretiva MAP est definindo a criao do mapa e informando seu
nome. A diretiva AREA 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 - corrdenadas x,y e raio r
POLY - polgono - coordanadas 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 Sho Pro, ou Adobe Photoshop.

27
1 of 1 06/09/00 12:12
Desenvolvimento de Websites file:///C|/curso_webpages/11.html

Mapas Clicveis

Voc clicou em treinamentos .

27.1
1 of 1 06/09/00 12:28
Desenvolvimento de Websites file:///C|/curso_webpages/111.htm

Mapas Clicveis

Voc clicou em Atendimento e Consultoria .

27.2
1 of 1 06/09/00 12:29

Mapas Clicveis

Voc clicou em FAQs .

27.3
1 of 1 06/09/00 12:29
Oficina HTML - Avanado - Mapas Sensitivos file:///C|/curso_webpages/113.htm

Mapas Clicveis

Voc clicou em Software .

27.4
1 of 1 06/09/00 12:30

Mapas Clicveis

Voc clicou em Search .

27.5
1 of 1 06/09/00 12:30

Mapas Clicveis

Voc clicou em ndice de pginas .

27.6
1 of 1 06/09/00 12:31

Mapas Clicveis

Voc clicou em Sobre a Gacli.

27.7
1 of 1 06/09/00 12:31

Validando seu Site

importante sempre checar se os links nas pginas de seu site esto todos levando a
informao indicada pois so constantes as mudanas de endereo de sites na Internet.
Existem alguns sites pela rede que oferecem gratuitamente servios de verificao de links
e cdigo HTML utilizando programas que visitam o site checando os links.
Aps a visita estes programas retornam um aviso sobre as ocorrncias registradas.
"Let our robots tune your Web site. Free! Our robots will search your site to find broken link
spot bad HTML tags, and rate your server's response time."
Ocorrncias na verificao de links e do cdigo HTML
Website Garage

1 of 1 06/09/00 12:13

Hospedando sua Home Page

Na Unicamp uma pgina pode ser disponibilizada desde que esteja de acordo com
as normas estabelecidas pela Portaria GR N 71/97, DE 23/05/97 , que dispe sobre
a insero de Home Page na UNInet
(http://www.unicamp.br/pg/portarias/1997/POR07197.HTM).
Estas pginas devem ser disponibilizadas preferencialmente nos servidores
instalados nas Unidades Administrativas, Institutos, Faculdades, Centros e Ncleos.
Informaes que podem ser disponibilizadas :
Dados sobre a Instituio
Informaes de interesse geral
Divulgao de eventos, programas, projetos
Servios de utilidade pblica
Acesso a Sistemas (DAC, SAE, Bibliotecas, etc )
Provedores de Acesso em Campinas :
Best Way (http://www.bestway.com.br/)
Correio Net ( http://www.correionet.com.br )
Nutecnet ( http://www.cas.nutecnet.com.br/ )
Sigma BBS ( http://www.sigmabbs.com.br/ )
SuperNet ( http://www.supernet.com.br/ )
WebCit ( http://www.webcit.com.br/ )
Sites gratutos :
Geocities ( http://www.geocities.com/ )
HighWay tecnologias ( http://www.hexanet.com.br/highway )
Locadora ( http://www.locadora.com )
Tripod ( http://www.tripod.com )
Angelfire ( http://www.angelfire.com )
TerrVista ( http://www.terravista.pt/ )

29
1 of 1 06/09/00 12:14

Novas Tecnologias

Algumas novas tecnologias aplicadas na Internet tem possibilitando o uso da
rede de maneira mais completa e interativa, com o uso de elementos multimdia
como som, imagem e vdeo, apresentados atravs de pginas web. Aos poucos
assim a Web se torna cada vez mais atraente exigindo dos navegantes uma
atualizao constante de browsers e plug-ins.
Html Dinmico: Criao de camadas (floaters) interativos na pgina.
Shockwave Flash: Criao de pginas multimdias com tamanho reduzido,
pelo uso de grficos vetoriais,
podendo, se necessrio voc tambm icluir imagens fotogrficas digitalizadas.

Real Video e Vdo: Vdeo e udio sob demanda.
VRML: Virtual Reality Modeling Language - Transforma as pgina
bidimensionais em mundos em 3D.

30
1 of 1 06/09/00 12:15

Catlogos e Links

Divulgao e Cadastramento em Catlogos
importante que sua pgina esteja cadastrada nos principais mecanismos de busca na re
Viste os principais catlogos de informaes disponveis.
Altavista ( http://www.altavista.digital.com/ )
Yahoo ( http://www.yahoo.com/ )
Surf ( http://www.surf.com.br )
Cad ? ( http://www.cade.com.br )
InfoBrasil Navegador ( http://www.infobrasil.com/navegador/ )
Argos ( http://www.argos.com.br/ )
Links e Referncias
Confeco de pginas ...
Design e Estilo de pginas Web, Tom Venetianer
( http://mvassist.pair.com/BRDesign.html)
Web Wonk - Tips for Writers and Designers
( http://www.dsiegel.com/tips/ )
Yahoo-(
http://www.yahoo.com/Computers/World_Wide_Web/Page_Design_and_Layo
HTML
Tutorial de HTML, de Maria Alice Soares de Castro , Usp-So Carlos
(http://www.icmsc.sc.usp.br/manuals/HTML)
"HTML Rpido e Fcil", por Srgio Charlab( http://www.jb.com.br/ch2502.html )
Lista de Discusso
Webdesign ( http://www.promit.com.br/wdbrasil )

1 of 1 06/09/00 12:15

Desenvolvimento de Websites

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

Desenvolvimento de Websites

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento de Websites

Você também pode gostar