Vous êtes sur la page 1sur 45

Intranet

Recentemente as organizaes privadas comearam dar mais ateno ao fato de que


poderiam utilizar a infraestrutura de redes j existente, juntamente com toda a tecnologia de
comunicao oferecida pela Internet e os recursos grficos, intuitivos e multiplataforma,
oferecidos pela World Wide Web !esta unio nascem as Intranets
"omo toda rede, uma Intranet # composta por uma estrutura cliente x servidor, ou seja,
servidores que armazenam os dados, e aplicaes cliente que acessam e manipulam estes
dados, numa infraestrutura de rede que mant#m tudo interligado
Isto faz parecer que uma Intranet no seja nada diferente de uma aplicao t$pica de rede
!o ponto de vista t#cnico no existem muitas novidades em uma Intranet, al#m dos dados
trafegarem sob o protocolo %"&'I&
( principal diferena entre uma Intranet e uma rede tradicional no # realmente t#cnica
)st na natureza a apresentao da informao * formato grfico dos elementos juntamente
com a possibilidade de acesso a partir de uma entrada comum + onavegador + # o que a
distinguem das demais redes
)sta nova maneira, de localizar e utilizar a informao, # muito mais amigvel que mapear
um drive de um servidor particular, atravessar uma complicada estrutura de diret,rios,
navegar atrav#s de uma lista de nomes de arquivos (s pessoas preferem clicar em $cones em
vez de buscar a informao atrav#s de diret,rios
(l#m disto, a independ-ncia de plataformas oferecida pelo .%%& e pelo .%/0 permite 1
estrutura de uma Intranet suportar vrios clientes, mel2or do que uma aplicao t$pica de
rede
"omo definio pode+se dizer que uma Intranet corresponde 1 rede interna de uma empresa
que utiliza a mesma infraestrutura e tecnologias usadas na Internet, assim como, protocolo
%"&'I&, servidores 3eb, navegadores, e+mail, not$cias, etc, para disponibilizar informao de
forma grfica e atualizada aos usurios internos da empresa
/as qual a vantagem de se investir em uma Intranet em vez de manter a estrutura de rede
tradicional4 (s vantagens so muitas, sobretudo podemos citar5
economia com custos de instalao e manuteno de demanda de uma rede
tradicional6
economia com 2oras de treinamento para usar o sistema, pois a interface # a mesma
usada na Internet6
facilidade para encontrar as informaes na rede, atrav#s do uso de pginas 3eb e
sites de busca na Intranet6
amplitude de tecnologias e recursos gratuitos ou de baixo custo dispon$veis na
Internet, e que podem ser usados nos 3eb sites da Intranet6
possibilidade de uso de videoconfer-ncia com custos mais baixos e usos de recursos
multim$dia, como udio, v$deo e animao em 3eb sites de treinamento6
facilidade para encontrar profissionais para dar manuteno nos 3eb sites e na rede

!o ponto de vista tecnol,gico uma Intranet # composta por5
infraestrutura de rede6
servidores6
documentos6
navegadores6
aplicaes
Infraestrutura de Rede

&ode+se dizer que a espin2a dorsal de uma Intranet baseia+se na utilizao de uma rede 7 a
rede que vai fornecer a conexo necessria para que a informao seja acessada a partir de
qualquer local da organizao
!a mesma forma que a Internet, uma Intranet utiliza o protocolo de rede %"&'I& para realizar
a comunicao 7 o %"&'I& que vai fornecer um endereo I& para cada mquina da rede,
permitindo que as mquinas possam se localizar e comunicar entre si
(l#m do protocolo %"&'I&, uma Intranet utiliza o protocolo .%%&8Hypertext Transfer
Protocol9 ou &rotocolo de %ransfer-ncia de .ipertexto, que vai permitir a transmisso de
texto, imagens e 2iperlin:s associados 1s pginas, nos formatos aceitos pelos navegadores,
que ser a ferramenta utilizada para a visualizao das informaes
Servidores

"om a rede j montada a pr,xima questo sobre infraestrutura de uma Intranet # onde
armazenar a informao
;ormalmente, a informao # armazenada em mquinas destinadas somente para este fim,
que possam ser acessadas durante todo o tempo e a qualquer 2ora, c2amadas de servidores
;o caso da Intranet este servidor precisa ser um servidor Web, ou seja, possuir os protocolos
necessrios para que as pginas de informao no formato .%/0 possam ser acessadas pelos
usurios Isto no significa que um servidor Web no possa oferecer acesso 1 informao
armazenada em outros tipos de servidores <m servidor Web pode estar integrado a um
servidor de e+mail ou a um servidor de bancos de dados, por exemplo
Documentos

!ocumentos so as c2aves de uma Intranet, ou seja, a =personificao= da informao *
formato padro para os documentos em uma Intranet # o .%/0, um formato que mistura
texto e tags que controlam a formatao e 2iperlin:s de pginas para outros documentos
<m documento .%/0 funciona bem por vrias razes5 # pequeno, fcil de ser transmitido via
rede, no se liga a uma plataforma espec$fica, pode rodar em qualquer sistema operacional
)mbora os documentos .%/0 sejam componentes+c2aves para qualquer soluo Intranet,
outros tipos de documentos podem ser utilizados, principalmente no caso de organizaes que
utilizam a plataforma /icrosoft e desejam aproveitar a documentao existente nos formatos
utilizados no pacote /icrosoft *ffice
Navegadores

*s navegadores so programas utilizados pelos usurios de uma Intranet para visualizar os
documentos exibidos pelo servidor, realizando as seguintes funes5
localizao e comunicao com os servidores6
leitura do formato .%/0 e exibio grfica dos documentos armazenados6
leitura dos 2iperlin:s dos documentos e salto at# os endereos determinados6
oferecimento de ferramentas padro que auxiliam a navegao, como botes que
levam para frente e para trs, locais favoritos e 2ist,rico6
tratamento de elementos multim$dia como som, v$deo e imagens >!
Aplicaes

(plicaes so programas espec$ficos escritos por desenvolvedores para solucionarem
problemas espec$ficos dentro das organizaes
)xistem muitas ferramentas dispon$veis para um desenvolvedor de Intranet ?erramentas que
incluem controles, scripts e componentes que atuam diretamente no servidor
"ontroles so partes das aplicaes que podem ser executados de dentro do navegador,
estendendo sua funcionalidade e permitindo a construo de solues que esto muito al#m
da simples exibio dos documentos )scritos em ferramentas como "@@, Aava, Bisual Casic,
!elp2i, etc, so incorporados diretamente nos documentos .%/0
Extranet

. algum tempo algumas empresas utilizam redes privadas 8Virtual Private Network ou B&;9
para a comunicao entre seus computadores (s B&;s so instaladas normalmente em
empresas que precisam estabelecer uma comunicao constante, rpida e segura de
informaes entre matriz e filial, fabricante e distribuidor ou fornecedor *s principais
clientes deste tipo de rede so instituies financeiras, multinacionais, centros de
processamento de dados, etc )sta troca de informaes atrav#s de B&;s # c2amada
de EDI 8Eletronic Data Interchange - %roca eletrDnica de dados9
Euando existe uma grande distFncia entre as redes, o custo de instalao de uma conexo
direta se torna muito elevado, pois lin2as privativas entre cidades distantes t-m o custo
muito elevado &or isso, os sistemas de )!I so restritos, impossibilitando o uso por empresas
de menor porte )sta situao passou a mudar com o uso da Internet para fins comerciais e o
surgimento das Intranets ( estrutura de Internet passou a ser usada para acesso 1 Intranet de
empresas Gurge assim o conceito de Extranet
<ma )xtranet # um tipo espec$fico de ligao entre redes Intranet que usa a Internet como
meio de conexo, permitindo que filiais de uma empresa, ou fornecedores e distribuidores
acessem sites e banco de dados das Intranets )sse sistema # c2amado de WEBEDI
"omo a informao no trafega por uma rede particular e sim pela Internet # necessrio
criptografar e autenticar os dados, atrav#s da instalao de firewalls, nas =pontas= das redes
8entre as redes e a Internet9 para proteger a conexo de acessos externos provenientes do
restante da Internet
Isto quer dizer que, se uma determinada empresa possui filiais pode fazer uma conexo entre
elas e a matriz, utilizando a Internet como meio de conectividade, por#m preservando a
integridade e o sigilo dos dados que trafegam entre as redes Geria como criar um =tHnel= para
comunicao entre essas redes, e ningu#m mais, que no as pr,prias redes envolvidas,
tivessem acesso a esses dados Gendo assim, esse tipo de conexo acaba funcionando como
uma rede privada 8B&;9 usando a infraestrutura da Internet
!evido 1 facilidade deste tipo de implementao, muitas empresas criam enormes redes que
interligam suas sedes regionais )sta ligao permite que os usurios da rede da empresa
comuniquem+se entre si ou com parceiros, fazendo parte da )xtranet <ma B&; pode
funcionar como uma imensa rede privada de comunicaes, com trfego de alcance global
A Internet e as Empresas

. algum tempo muitos questionavam se valia a pena colocar um site da empresa na Internet
(tualmente no se questiona mais a importFncia da Internet e nem de criar um 3eb site para
representar a empresa online &odemos dizer que o m$nimo que se espera de uma empresa
que queira se manter atualizada e competitiva # ter presena na Web, ou seja, ser uma
empresa "*/
(lgumas desvantagens de uma empresa no estar presente na Internet, podem ser listadas5
desatualizao e atraso6
falta de competitividade6
no in$cio5 perda de uma fatia do mercado consumidor6
com o tempo5 esquecimento

.oje o grande desafio das empresas # criar 3eb sites lucrativos com a venda de produtos e
servios
(lgumas vantagens de uma empresa "*/5
quebra de barreiras regionais, atuao mundial6
competitividade6
os pioneiros sempre sero lembrados 8(mazon96
mel2or atendimento ao cliente6
novas oportunidades de neg,cios
7 importante ressaltar que estar presente na 3eb 8ser uma "*/9 no representa apenas criar
um 3eb site com um visual bonito e colocar todas as informaes sobre a empresa <m 3eb
site tem que ser competitivo, tem que ter realmente algo que os internautas procuram
*utro aspecto que no se pode esquecer # que juntamente com o advento do 3eb site da
empresa, uma s#rie de mudanas dever ser implementada, como consequ-ncia da
implantao de uma nova cultura e filosofia digital, trazida pela Internet

&ara realmente tirar proveito da tecnologia de Internet e acompan2ar a demanda que poder
vir em funo dos acessos ao 3eb site, uma empresa deve rever seus processos internos e
passar a usar a tecnologia tamb#m internamente, assim como, e+mail, envolvimento de todas
as pessoas da empresa na atualizao e manuteno das informaes do 3eb site, velocidade
na negociao com fornecedores e entrega dos produtos, criao de uma Intranet,
treinamento dos funcionrios na operao da Internet e novas tecnologias, etc
&odemos listar algumas consequ-ncias5
camin2o sem volta6
reavaliao estrutural e operacional6
investimento em treinamento para evitar o =analfa;)%ismo=6
contratao de profissionais
A Importncia da Internet no undo dos Neg!cios

;o mundo atual, a Internet vem assumindo um papel primordial na criao de vantagens na
rea dos neg,cios )ssas vantagens so partil2adas tanto por consumidores como pela pr,pria
empresa ;o caso dos primeiros, pode+se apontar de forma resumida a disponibilidade de
informao, o divertimento, a facilidade de experimentao, a satisfao imediata e a
interatividade ou a resposta simultFnea &ara as empresas, as vantagens da Internet so a
reduo de custos, maior interatividade, comunicao integrada, mel2oria do servio ao
cliente e teste de novos produtos e servios no mercado &or outro lado, pode+se tamb#m
apontar como vantagens a adeso a mercados internacionais e a outros segmentos bem como
1 disponibilidade de uma oferta ao cliente
(inda relativo 1s empresas, # importante salientar que a Internet possibilitar um aumento
das vendas, na medida em que constitui mais uma alternativa em termos de canal de
distribuio ( sua utilizao pode ocorrer ao n$vel de todas as funes de mar:eting, como5
"endas# aumenta a visibilidade das marcas e dos produtos e servios, auxiliando a
deciso de compra e permitindo a realizao destas on+line )ste novo canal de vendas
permite a qualquer empresa aderir ao mercado global &equenas empresas ou empresas
geograficamente isoladas podem assim realizar vendas iguais ou superiores 1s das grandes
empresas6
$omunica%o# atrav#s do site da empresa, pois se coloca ao con2ecimento de si
pr,pria, bem como de seus produtos e servios, com um custo reduzido quando comparado
com meios como a imprensa ou a televiso ( empresa pode ainda anunciar em sites, atrav#s
de banners, botes, pop+ups6
Servio ao cliente# complementa ou substitui o call center ( Internet # talvez o
Hnico meio que permite ao cliente escol2er os sites de visita, consulta, compra, no tempo que
desejar6
Relaes p&'licas# atrav#s da publicao de releases sobre a empresa e suas
atividades6
ar(eting Researc)# atrav#s da utilizao da Internet para pesquisas de informao
de apoio 1 tomada de deciso
( Internet permite igualmente manter um neg,cio ativo IJ 2oras por dia, >KL dias por ano
)ste aspecto permite ultrapassar os problemas respeitantes aos fusos 2orrios, permitindo
que as pessoas de todo o mundo acessem aos sites dentro do seu 2orrio de atividade
$arreiras de Internet
(s carreiras ligadas 1 Internet continuam em alta, segundo consultores e especialista do setor
de recursos 2umanos ( demanda por vagas neste mercado ainda # grande, apesar das
dificuldades de algumas empresas !e analistas de suportes aos criadores de conteHdo e de
programadores a diretores comerciais, a Internet absorve uma grande quantidade de
profissionais (s empresas esto 1 procura de centenas de profissionais, nas mais diversas
especialidades Coas oportunidades para atividades de Internet ainda esto 1 espera de
profissionais qualificados (s empresas possuem diversas vagas e opes )studantes e
profissionais de informtica devem buscar a mel2or oportunidade
)xistem mais de LM especializaes profissionais relacionadas 1 Internet ;o in$cio da d#cada
de NM, os profissionais da rede mundial de computadores se resumiam a um designer, um
programador, um redator e operadores de rede (tualmente, novas funes foram criadas
como, por exemplo, analista de trfego em site, gerente de e+commerce, analista de
tecnologia da informao, gerente de loja virtual, etc
We' Designer

)sta foi a primeira profisso de Internet a ser largamente difundida * Web !esigner # o
profissional que cuida da parte visual do 3eb site Gua funo # definir a estrutura de um 3eb
site, criar e desen2ar a interface )m alguns casos tamb#m # responsvel pela montagem e
publicao do 3eb site
$on)ecimentos necess*rios# conceitos de design e artes grficas, manipular imagens usando
programas de edio de imagens, fazer ilustraes usando soft3ares vetoriais e con2ecer
ferramentas para criao de pginas 3eb 7 aconsel2vel con2ecer .%/0 e "GG, ter noes de
usabilidade, acessibilidade e ergonomia
We' Developer

7 o j con2ecido desenvolvedor, mas com con2ecimentos de programao para tecnologias de
Internet * 3eb developer complementa o trabal2o do 3eb designer Gua funo primordial #
projetar a parte t#cnica e programvel do 3eb site, incluindo programao de acesso a banco
de dados
$on)ecimentos necess*rios# linguagem de programao visual 8BC, !elp2i, "@@9, dom$nio de
.%/0, programao AavaGcript e linguagens para acesso 1 base de dados 8(G&, &.&,
"old?usion, Aava Gerver &ages9
We' aster

&rofissional responsvel pela manuteno e gerenciamento do 3eb site Gua funo inclui
criao e atualizao de pginas para o 3eb site, programao, publicao do 3eb site e
garantia de funcionamento do servidor 3eb
$on)ecimentos necess*rios# dom$nio de .%/0, programao AavaGcript e linguagens para
acesso 1 base de dados 8(G&, &.&, "old?usion, Aava Gerver &ages9 7 aconsel2vel tamb#m ter
noes de rede, gerenciamento de um servidor 3eb, segurana de 3eb sites, funcionamento
de Intranets e )xtranets
We' Administrator

&rofissional encarregado de instalar e manter o 3eb site em funcionamento no servidor 3eb
%amb#m deve ser capaz de montar uma Intranet, atrav#s da configurao de servidores 3eb,
proxOs, fire3alls, bro3sers, etc
$on)ecimentos necess*rios# funcionamento de redes, protocolo %"&'I&, servidores Web,
proxO, fire3all, servidores de banco de dados e administrao de ambientes operacionais
We' Writer + Redator We'

)ste profissional # responsvel pelo conteHdo de um 3eb site Gua funo inclui a digitao,
adaptao, reviso e produo dos textos que sero colocados online <m 3eb 3riter deve ter
um excelente dom$nio da l$ngua e de reviso de textos, e de prefer-ncia ter formao em
jornalismo
DBA ,Administrador de Banco de Dados-

( profisso de administrador de banco de dados no # nova, assim como o uso dos bancos de
dados /as, com o aumento do nHmero de 3eb sites que acessam bancos de dados, o !C( se
tornou um profissional muito importante em um projeto de 3eb site Gua funo inclui
modelagem de banco de dados, implementao e gerenciamento dos servidores de banco de
dados
$on)ecimentos necess*rios# modelagem de banco de dados, implementao e administrao
de servidores de banco de dados GE0 Gerver, *racle ou /OGE0 e dom$nio do sistema
operacional 8;% ou <;IP9 7 aconsel2vel tamb#m con2ecer linguagens de acesso a banco de
dados como BC, (G&, etc
SE. ,.timi/ador de ecanismos de Busca-

*s mecanismos de busca so responsveis por grande parte das visitaes e entrada de novos
internautas em um 3eb site ( criao de um conteHdo otimizado para esses mecanismos,
busca de palavras+c2aves e codificao semanticamente correta # funo de um especialista
em mecanismos de busca, principalmente com con2ecimento sobre o Qoogle
ercado de 0ra'al)o

* mercado de trabal2o para esses profissionais # bem amplo ( seguir, uma relao das
poss$veis empresas e reas de atuao5
&rodutoras de Web Gites6
(g-ncias de &ublicidade6
)scrit,rios de !esign6
&rovedores de (cesso6
)mpresas da Web 8Ra2oo, (mazon, ;et %rade96
)mpresas que controlam seus pr,prios sites6
)mpresas que tem uma Intranet6
"onsultoria pr,pria
. 1ue 2 Site3

( definio do que # um site depende do ponto de vista do segmento que se ol2a &ara um
empresrio um site pode ser um canal de comunicao e novas oportunidades de neg,cios
&ara um usurio comum da Web pode ser um conjunto de pginas contendo muitas
informaes sobre o mundo, diverso, etc %ecnicamente, um site # um conjunto de arquivos
) cada arquivo guarda certa quantidade de informaes como textos, imagens, sons, v$deos e
animaes
4eraes de Sites

Gites de ST gerao
Gites de IT gerao
Gites de >T gerao
Gites de JT gerao
Sites de 56 gera%o

!evido 1 limitao imposta por modems lentos e monitores monocromticos os 3eb sites de
primeira gerao eram muito simples (s primeiras pginas que circularam pela Web foram
criadas por cientistas e pesquisadores que desejavam compartil2ar suas ideias, documentos,
teses, etc, com outros pesquisadores de outras universidades
)ssas pginas eram caracterizadas por longos textos com sequ-ncia do topo para a base e da
esquerda para a direita e usavam recursos bsicos de formatao de texto, como negrito,
itlico, marcadores de textos, quebras de pargrafo, lin2as 2orizontais como separadores, e
pequenas imagens *s 3eb sites de primeira gerao eram criados por t#cnicos e muitos
utilizavam texto preto em fundo cinza
Sites de 76 gera%o

*s sites de segunda gerao trouxeram algumas novidades visuais que foram possibilitadas
pelos recursos incorporados nas novas verses dos navegadores
)stas mel2orias visuais incluem $cones substituindo palavras, imagens =ladril2adas=
substituindo o fundo cinza, botes com c2anfros e banners substituindo os t$tulos *utra
caracter$stica dos sites de segunda gerao # a utilizao de menus verticais com opes
dispostas de cima para baixo e com listas para apresentar uma 2ierarquia de informaes
( tecnologia teve grande influ-ncia nos sites de segunda gerao Isto trouxe como resultado
sites com uma mel2oria visual atrav#s do uso de $cones e menus e sites enfeitados, c2eios de
efeitos pirot#cnicos como consequ-ncia do deslumbramento das novas tecnologias
;este momento a 3eb estava sendo usada para fins comerciais, mas as pginas ainda eram
constru$das por t#cnicos * termo)omepage passa a ser largamente utilizado
Sites de 86 gera%o

*s sites de terceira gerao representam uma mudana radical na apar-ncia dos 3eb sites
(pesar da cont$nua evoluo dos navegadores e tecnologias que sempre influenciam o design,
a principal caracter$stica dos 3eb sites de terceira gerao no # a tecnologia, e sim o
design
)sta mudana foi consequ-ncia, sobretudo, da vinda de designers que j trabal2avam com
artes grficas para o mundo das pginas 3eb "omearam a aparecer pginas mais criativas,
com mel2or combinao de cor, mais 2armonia na composio dos elementos, enfim, com
planejamento visual
( maioria dos 3eb sites que con2ecemos atualmente # classificada como 3eb site de terceira
gerao
Sites de 96 gera%o

Independentemente da classificao por gerao, algumas novas tecnologias em particular
trouxeram inovaes que realmente esto influenciando o design dos 3eb sites )ssas
tecnologias esto permitindo a criao de 3eb sites com interfaces totalmente novas, mais
dinFmicas, mais intuitivas e mais interativas
<ma dessas tecnologias # o ?las2 (trav#s dos recursos multim$dia dispon$veis nesta
tecnologia pode+se criar 3eb sites com interfaces animadas, com efeitos sonoros, imagens >!,
fotos, v$deo, etc )stes recursos ampliam as possibilidades de criao do 3eb designer *
design gan2a novas dimenses, facilitando a interao do internauta com a interface e a
informao
We' Standard : 0a'elas

( principal forma de diagramao de Web Gites at# IMML era utilizando o recurso de %abelas
8%ag %able9 )ssa maneira de desenvolver serviu muito bem at# essa #poca, por#m, com
preocupaes maiores com buscadores, acessibilidade e internet emo!iles, a tabela aos
poucos vem sendo substitu$da pelo Web Gtandard 8%ableless9
( tag !iv, juntamente com uma utilizao mais inteligente do "GG, permite um controle maior
do layout, menos c,digo e um tempo menor de carregamento da pgina (l#m disso, o c,digo
# montado de maneira otimizada e mel2or interpretado por buscadores e sistema de leitura
para deficientes visuais
* 333csszengardencom demonstra o potencial desse tipo de Web Gite, permitindo o mesmo
c,digo .%/0 sem ser transformado em inHmeros layouts com uma mudana no estilo "GG
;ot Sites

7 comum a utilizao do termo .ot Gite, em lanamento de5 produtos, filmes, eventos e
publicidade online ;ormalmente esse tipo de Web Gite # de carter temporrio, sem
manuteno posterior e faz parte de uma campan2a de mar:eting mais agressiva
* (dobe ?las2 # o soft3are mais utilizado para a criao de .ot Gites, normalmente
englobando som, imagens e at# mesmo v$deo
We' Sites Est*ticos e Dinmicos

(t# o advento das tecnologias de acesso a banco de dados via 3eb, o conteHdo dos 3eb sites
somente podia ser alterado manualmente, ou seja, cada vez que algu#m pedia alguma
alterao o 3eb designer ou 3eb master tin2a que abrir a pgina, fazer a alterao e salvar a
pgina novamente no servidor (s pginas deste tipo de 3eb site so c2amadas est*ticas
<ma ,tima soluo para empresas so os sites estticos que buscam divulgar seus produtos e
servios na Internet, atrav#s do seu site institucional, onde a mesma no necessita fazer
atualizaes frequentes em seu site, sem contar com o custo baixo para desenvolvimento e
manuteno do site, as atualizaes necessrias so realizadas no pr,prio documento .%/0
*s 3eb sites que utilizam tecnologias de acesso a banco de dados permitem que as pginas
sejam atualizadas de forma automtica ou dinamicamente *u seja, basta fazer a alterao
no banco de dados que automaticamente a nova informao aparecer na pgina do 3eb site
(s pginas deste tipo de 3eb site so c2amadas de pginas dinmicas
*s sites dinFmicos geralmente contam com uma rea administrativa onde voc- mesmo poder
administrar as pginas dinFmicas do seu site inserindo, alterando ou excluindo informaes
em um banco de dados, para que seu site esteja sempre atualizado, estas atualizaes podem
ser efetuadas de qualquer computador que estiver conectado com a Internet
$ategoria de sites

&ara facilitar o aprendizado sobre a importFncia das caracter$sticas e recursos, alguns 3eb
sites foram classificados em categorias &odem+se usar muitas classificaes diferentes, mas a
classificao a seguir est baseada em macroreas de atuao, sendo elas5
institucional6
not$cia'informao6
entretenimento6
com#rcio eletrDnico6
portal6
servios
Institucional

)ste foi o primeiro tipo de site comercial que apareceu na 3eb * site institucional tem o
objetivo de apresentar a empresa, sendo quase uma verso interativa do folder institucional
da empresa
$aracter<sticas t<picas#
informao atualizada sobre a rea de atuao da empresa6
informao sobre os produtos ou servios da empresa6
localUizao e telefones6
pgina e e+mail de contato6
pginas com informaes adicionais para atrair o cliente, assim como eventos,
assuntos relacionados 1 rea de atuao da empresa, teste drive, do3nloads
* site da Cauducco # um bom exemplo de site institucional, que traz no apenas informao
sobre a empresa e sua lin2a de produtos, mas tamb#m sobre lanamentos, receitas, um jogo
que mostra como o panettone # produzido, pgina para a imprensa, al#m de pap#is de
parede, protetor de tela, etc

Exemplos#
2ttp5''333bauduccocombr
2ttp5''333bosc2combr'
2ttp5''333etticombr
Not<cia+Informa%o

;esta categoria incluem+se os sites de ag-ncias de not$cias, revistas on+line, sites de
documentao t#cnica, etc
$aracter<sticas t<picas#
informao atualizada6
carregamento rpido das pginas6
design agradvel, por#m leve6
pouca imagem na 2omepage6
navegao clara e objetiva6
textos no muito longos6
lin:s para edies anteriores6
estrutura e organizao das pginas6
tecnologias de acesso dinFmico
Exemplos#
2ttp5''333vejacombr
2ttp5''333estadaocombr
2ttp5''333gScombr
2ttp5''quatrorodasabriluolcombr'
Entretenimento

*s sites de entretenimento t-m necessidades e caracter$sticas totalmente contrrias aos sites
de not$cia'informao, pois o objetivo principal # entreter o internauta, e entretenimento
envolve belas imagens, animaes, v$deo e udio
$aracter<sticas t<picas#
visual colorido6
uso de imagens6
animao e v$deos6
mHsicas e efeitos sonoros6
navegao clara e limpa6
design mais livre6
uso de tecnologia como ?las2, .%/0 dinFmico, Aava Gcript6
alta interatividade

Exemplos#
2ttp5''333cartoonnet3or:combr'ppg'index2tml
2ttp5''3332opi2aricombr
2ttp5''333atrativaibestcombr'
$om2rcio eletr=nico

;esta categoria esto os sites de lojas virtuais, sites de magazines, etc ;o 2 muito segredo
em relao 1s caracter$sticas primordiais de um site de com#rcio eletrDnico
Euando entramos num site de com#rcio eletrDnico, com o objetivo de comprar algo, o que
esperamos encontrar4 &rimeiramente que a loja ten2a o produto procurado, em segundo lugar
que o prazo de entrega seja curto, terceiro que o site seja seguro, e por Hltimo que o produto
seja entregue ( velocidade no carregamento das pginas e na busca por produtos #
considerada como primordial
$aracter<sticas t<picas#
possuir produto ou servios atualizados6
informaes detal2adas sobre produto ou servio6
fotos e preo de cada produto6
segurana6
uso de tecnologias de acesso a banco de dados6
opes de formas de pagamento6
promoes

Exemplos#
2ttp5''333americanascombr
2ttp5''333submarinocombr
2ttp5''333e+storecombr
2ttp5''333fnaccombr'
>ortal

;esta categoria esto os grandes sites com lin:s para diversas pginas sobre um determinado
assunto
Qeralmente esto ligados a outros sites como games, cinema, not$cias, bate+papo, revistas,
compras, esportes, educao e muitos outros assuntos
$aracter<sticas t<picas#
possuir informaes atualizadas6
uso de tecnologias de acesso a banco de dados6
patrocinadores6
os textos devem ser redigidos por profissionais6
possuir um grande conteHdo de informaes6

Exemplos#
2ttp5''333terracombr
2ttp5''333uolcombr
2ttp5''333igcombr
Servios

(tualmente 2 um nHmero grande de sites que prestam servios online !esde correio,
previso do tempo, inserir cr#ditos no celular, declarar seu imposto de renda ou at# mesmo
consultar seu saldo no banco
$aracter<sticas t<picas#
possuir informaes atualizadas6
uso de tecnologias de acesso a banco de dados6
design claro e suave6
possuir estat$sticas sobre determinados assuntos6
possuir busca6
segurana6
canal fcil de comunicao

Exemplos#
2ttp5''333inmetgovbr'
2ttp5''333itaucombr
2ttp5''333detranspgovbr'
Estrutura de um We' Site

;este item ser analisada a estrutura de um 3eb site Independentemente da gerao em que
o 3eb site se enquadra, t-m os 3eb sites que so mais simples em sua estrutura e tecnologias
envolvidas e outros que so mais complexos, pois utilizam tecnologias de acesso ao servidor,
bancos de dados e recursos multim$dia
Estrutura B*sica

"lassificam+se como estrutura bsica os 3eb sites que utilizam em suas pginas apenas .%/0
8pginas estticas9, contendo textos estticos, imagens, gifs animados e alguns efeitos de
interatividade usando javascript
Estrutura complexa

"lassificam+se como estrutura complexa os 3eb sites que utilizam 2iperlin:s para pginas
dinFmicas com acesso a componentes no servidor, a banco de dados, 1s animaes em
G2oc:3ave ?las2, v$deo streaming e udio
0ecnologias ?sadas em uma >*gina We'

"om certeza voc- j ouviu falar de muitas tecnologias diferentes que so utilizadas nas
pginas 3eb ( tecnologia bsica usada nas pginas 3eb # o .%/0 8Hypertext "arkup
#anguage - linguagem de marcao de 2ipertexto9
.%/0 no # uma linguagem de programao, e sim uma linguagem de marcao estrutural
)la foi criada com o objetivo inicial de formatar textos e imagens e possibilitar a ligao
82iperlin:9 entre pginas 3eb (tualmente existem vrias tecnologias que so utilizadas em
3eb sites )xistem tecnologias para funes diferentes, algumas simplesmente interagem com
o .%/0 e o navegador, outras fazem conexo com banco de dados ou acessam pequenos
programas que rodam no servidor 3eb 8componentes9, e tem ainda aquelas que permitem
executar recursos multim$dia nos 3eb sites ( cada dia # criada uma nova tecnologia, veja no
diagrama como essas vrias tecnologias esto relacionadas em uma pgina 3ebMMI
$omit@ W8$

)xiste um cons,rcio de empresas c2amado World Wide Web "onsortium ou W>" que
regulamenta e define os padres que sero usados nas novas tecnologias * comit- W>"
enfrenta um problema de tempo entre a avaliao de uma nova tecnologia e sua aprovao
para uso pelo mercado ( velocidade na criao de novas tecnologias e a demanda do
mercado levam as empresas de tecnologia, principalmente /icrosoft e /ozilla, a lanarem
novas verses de navegadores e programas que suportam novas tecnologias ainda no
aprovadas pelo W>"
RaioA: de uma >*gina We'

7 importante ressaltar que nen2uma das tecnologias atualmente em uso ainda substitui ou
descarta totalmente a linguagem .%/0 ;a verdade a maioria delas depende do .%/0, pois
so c2amadas e executadas a partir do c,digo .%/0
&ara poder ver o c,digo de uma pgina .%/05
;o Internet Explorer, menu Exi'ir, opo $!digo fonte ou posicione o cursor do
mouse, em qualquer lugar da pgina 8menos em cima de imagens9 e clique o boto direito do
mouse, e escol2a Exi'ir c!digo fonte
Novas tecnologias de acesso

(tualmente os usurios esto acessando a Internet atrav#s das c2amadas conexes de alta
velocidade 8banda larga ou broad band9 que at# ento eram restritas apenas aos provedores
de acesso 8IG&s9 ou empresas que tin2am condies de manter os altos custos de uma lin2a
privada 80&9 com uma operadora telefDnica
Brias so as tecnologias utilizadas para possibilitar o acesso de alta velocidade, que incluem
"able /odem, IG!;, (!G0 e comunicao sem fio por antenas
(lguns dos servios de conexes de alta velocidade atualmente so o GpeedO da %elefDnica
que utiliza a tecnologia (!G0, o Birtua da ;et e a QB% que utilizam "able /odem %amb#m
existe 2oje a Internet via Gat#lite e via Rdio
Euando se fala em conexes de alta velocidade, no se referem apenas ao fato de poder ver
os 3eb sites atuais serem carregados mais rapidamente, ou porque se pode fazer do3nloads
de arquivo com muitos megabOtes em poucos minutos, mas, sobretudo porque essas
tecnologias esto mudando a forma de se fazer site, influenciando diretamente no trabal2o
do 3eb designer
Sites relacionados#
2ttp5''333netcombocombr'
2ttp5''333gvtcombr'
2ttp5''333anatelgovbr
$ontrole

;a m$dia impressa, o designer est 2abituado a utilizar programas de diagramao
8Euar:Ppress, In!esign9 para montar um projeto (ntes de ser impresso este projeto #
convertido em uma linguagem de descrio de pgina, como o &ostscript * formato do
impresso # fixo, permitindo controle total sobre a pea
A na m$dia on+line, o Web !esigner utiliza o .%/0, que # uma linguagem de marcao
estrutural, que no tem poder de apresentar um projeto que seja visualizado da mesma
forma em qualquer tipo de monitor ( linguagem .%/0 foi desenvolvida para descrever a
estrutura da informao, no a sua apar-ncia ($ # que entra o trabal2o do Web !esigner,
balancear a estrutura da informao com sua apar-ncia
"ada internauta usa uma configurao diferente em seu microcomputador, como modo de
v$deo, fonte, resoluo de imagens, navegador, etc Isso faz com que um site possa ser visto
diferente da forma que voc- o projetou "on2ecendo cada uma dessas caracter$sticas fica
mais fcil c2egar a um denominador comum
Navegadores
* programa de navegao ou bro3ser # o soft3are que interpreta o c,digo .%/0 ( linguagem
.%/0 foi criada com dois objetivos5 ser universalmente aceita e constituir uma linguagem
multiplataforma padro para apresentao de texto, imagens e outros elementos na Internet
&ercebendo a velocidade com que as mudanas ocorrem na rede, empresas empreendedoras
resolveram acelerar o processo, criando c,digos .%/0 pr,prios sem o aval do cons,rcio W>"
( primeira empresa a agir desta forma foi a ;etscape, logo seguida pela /icrosoft ;ovos
c,digos .%/0 foram criados e so suportados apenas pelos bro3sers proprietrios )stes
c,digos no oficiais so c2amados de extenses .%/0
*s bro3sers mais utilizados 2oje na Web so o, Internet )xplorer da /icrosoft e o /ozilla
?irefox &ode ser citado tamb#m o Gafri e *pera, em nHmeros de utilizao bem menores ao
Qoogle "2rome
Resolu%o de "<deo

Resolu%o de v<deo # a forma como as imagens so formadas, ou seja, o nHmero de pontos
que compem a imagem na tela 8pixel9 (tualmente o modo de v$deo mais utilizado pelo
usurio brasileiro # o de UMMxKMM pixels )m outros pa$ses esse nHmero varia bastante Beja
mais informaes na <nidade I
(s resolues dispon$veis nas placas de v$deo so de UMMxKMM, SMIJxVKU e SIUMxNKM, podendo
variar conforme o modelo e marca
)xistem diversas formas de lidar com essa situao (lguns 3eb sites so planejados com seu
laOout fixo, onde cada elemento tem seu taman2o predeterminado + independente da
resoluo do monitor
)m outros casos o laOout # montado de maneira responsiva, onde a pgina se adapta
automaticamente ao dispositivo que o usurio utiliza seja monitor, celular, tablet, televiso,
etc Gendo assim se o internauta estiver visualizando um site responsivo em seu celular, os
elementos se reorganizam para apresentar o que # principal primeiro
Resolu%o de Imagem

"omo o meio de apresentao do projeto # a tela do computador e no uma pgina impressa,
arquivos de alta resoluo no fazem parte das m$dias interativas Qrficos de alta resoluo
foram criados para serem impressos em impressoras de alta densidade de pixels Qeralmente
uma imagem em alta resoluo possui algo em torno de >MM ppi 8pontos por polegada9
( resoluo de tela mais comum # gerada por VI ppi 8pixels por polegada9
( unidade de medida para imagens na Internet # feita em pixels, ao inv#s de cent$metros ou
polegadas utilizados em m$dia impressa
>rofundidade de $or

( profundidade de cor # a quantidade de informao que o v$deo usa para descrever a cor
Euando um computador tem configurado a placa de v$deo para mostrar apenas ILK cores, o
navegador mostra as pginas 3eb atrav#s de uma paleta de cores especial de ISK cores
c2amada paleta Be' ou paleta segura, e no usando as cores do sistema operacional
&lacas de v$deo com apenas S /C exibiam apenas ILK cores (tualmente, as placas t-m mais
de KJ /C, exibindo assim mais de SK mil2es de cores
odelos de cor R4B e $CD

odelo R4B + <ma larga porcentagem do espectro vis$vel pode ser representada misturando+
se tr-s componentes bsicos de luz colorida em vrias propores )stes componentes so
con2ecidos como cores primrias5 vermel2o 8red9, verde 8green9 e azul 8blue9 Geu monitor
cria cores emitindo luz atrav#s dos f,sforos vermel2o, verde e azul
odelo $CD + )ste modelo # usado no processo de impresso quatro cores ;este processo,
a cor # reproduzida combinando+se as quatro tintas5 ciano 8cOano9, magenta 8magenta9,
amarelo 8Oello39 e preto 8blac:9
)m .%/0, valores de cor RQC so dados em .exadecimal .exadecimal # um sistema com
base em SK nHmeros, o que significa que, ao inv#s de nHmeros sendo executados de M a N e
depois repetidos, existe uma s#rie inicial de valores de SK nHmeros5
M,S,I,>,J,L,K,V,U,N,(,C,",!,),?
Balores RQC so expressos em 2exadecimal com um conjunto de tr-s grupos de nHmeros, onde
cada um dos tr-s valores correspondente a ILK n$veis de vermel2o, verde e azul,
respectivamente &or exemplo5 branco em valores RQC # representado por ILL,ILL,ILL *
equivalente em 2exadecimal # W?????? A o preto # representado por M,M,M + em
2exadecimal # WMMMMMM
Impress%o

*utro ponto a se levar em considerao em um projeto de 3eb site # quanto 1 impresso de
pginas Ge voc- pretende que o seu pHblico imprima informao, projete suas pginas
levando isto em conta ?undos escuros que exigem texto em branco acabam gerando
impresso de texto branco sobre o papel, resultando em nada vis$vel
<ma soluo muito adotada atualmente # a criao de uma verso da pgina destinada 1
impresso para as pginas do site que t-m esta necessidade )xistem maneiras de criar estilos
"GG para impresso, gerando uma pgina para a impressora e outra para a tela
?so de fontes

( utilizao de fontes tamb#m representa um problema ainda no resolvido adequadamente
pelos navegadores Euando se utiliza uma fonte em uma pgina .%/0, esta apenas ser
visualizada se estiver instalada na mquina do internauta (s fontes normalmente usadas so
as fontes sem serifa5 (rial, .elvetica e Berdana
* taman2o permitido pela linguagem .%/0 tamb#m representa uma limitao para o
desenvolvimento de 3eb sites * taman2o mximo do corpo de um texto em .%/0 # >K
pontos
)ssa limitao # superada pela linguagem "GG, utilizada para a formatao de textos e laOout
em pginas we! standard$ que no limita o taman2o dos caracteres%
%amb#m se utiliza texto em forma de imagem no caso de t$tulos, botes e opes de menu
5E erros 1ue podem ser evitados

5 A SeFa democr*tico
;o impon2a restries aos visitantes do seu site Geja democrtico, faa+o acess$vel a todos,
e no somente aqueles que t-m um determinado bro3ser, resoluo ou plug+in (final, voc-
no gostaria de estar numa estrada e avistar a seguinte placa5 =)strada exclusiva para carros
com motor IM ou maior=
;a Web # a mesma coisa &ortanto, no insira no seu site mensagens do tipo =Resoluo
recomendada5 SMIJ x VKU= ou ainda $cones ou indicaes de um determinado bro3ser Euanto
aos plug+ins, use+os com moderao * ?las2 # uma exceo6 pois ele # bastante popular e j
# suportado pelos bro3sers mais recentes "ontudo, no custa nada manter uma verso
simplificada do seu site para aqueles que no t-m o plug+in ;o impon2a barreiras aos seus
potenciais visitantes6 eles pulam para outro site com a velocidade do pensamento

7 A N%o exagere na tecnologia
( evoluo tecnol,gica na Internet # muito rpida5 ( toda 2ora surgem novas linguagens,
novos plug+ins e novas verses de bro3sers "ontudo, nem todos acompan2am essas rpidas
mudanas ) justamente por isso # bom no exagerar nos recursos empregados no seu site
&ortanto, evite empregar as Hltimas novidades tecnol,gicas em suas pginas )spere at# que
elas se tornem mais difundidas e con2ecidas entre os internautas (lguns sites usam !.%/0
8.%/0 dinFmico9 sem testar as pginas * resultado so erros graves de visualizao nas
pginas + mesmo em bro3sers atualizados como Internet )xplorer &ortanto, cuidado5 no
faa do seu site uma vitrine tecnol,gica ;o use udio, v$deo, BR/0 e outros adereos
tecnol,gicos se isso no for necessrio /ais importante que a apresentao # o conteHdo
propriamente + as informaes e os servios que o site oferece

8 A $adastreAse primeiroG acesse depois
/uitos sites exigem que os usurios preenc2am um cadastro antes, para depois poder acessar
seu conteHdo )ssa ttica # considerada um erro grave pelos especialistas em Web !esign *s
usurios visitam um site atrs de informaes ou servios /uitos concordam em se cadastrar
no site se isso l2es trouxer algum benef$cio + acesso completo ao site, servios adicionais e
outros servios /as se o visitante no pode conferir antes o que o site oferece, ele
dificilmente preenc2er o cadastro
( regra, portanto, # a seguinte5 nunca mostre o cadastro antes e o site depois (ntes de
forar o usurio a se registrar, mostre o que o seu site oferece !eixe bem claro quais so os
benef$cios que o visitante ter ao se cadastrar ;o cadastro, exija o m$nimo de informaes
poss$veis /uitas pessoas abandonam imediatamente a pgina ao ver um longo formulrio a
ser preenc2ido !essa forma, deixe alguns campos como opcionais ) quebre o formulrio em
diversas pginas se ele for muito extenso

9 A $uidado com as cores
;o use muitas cores diferentes no seu site )vite usar a mesma cor para textos e lin:s Isso
confunde o usurio e dificulta a navegao !eixe bem claro o que # texto e o que # lin:
*utro problema so as imagens de fundo 8bac:grounds9 /uitos sites usam imagens
rebuscadas como fundo de suas pginas 8pequenas fotos, por exemplo9 * primeiro problema
# que essas imagens so pesadas, fazendo com que o site demore a carregar (l#m disso, #
fundamental que o texto seja leg$vel sobre o fundo escol2ido &ara tanto, deve 2aver
contraste entre a cor do texto e o fundo &ara um fundo azul, por exemplo, nunca use texto
em preto ou vermel2o6 use cores claras, como branco e amarelo

H A Internautas c)egueiI
Geu site no deve ser um arco+$ris, al#m disso, ele tamb#m no deve parecer uma rvore de
natal, c2eio de pendurical2os e enfeites que piscam ;o abuse das imagens 8QI?s9 animadas,
um recurso que j ficou ultrapassado na 3eb *bjetos se movendo na tela desviam a ateno
do internauta, dificultando sua concentrao no conteHdo do site G, use animaes para
c2amar ateno daquilo que # realmente importante no site <m site de s2are3are e
free3are, por exemplo, pode usar pequenas imagens animadas para indicar os arquivos de
do3nload, afinal, copiar programas # o que interessa aos visitantes do site (l#m disso,
animaes em botes e menus, acionados pelo mouse, tamb#m podem ser usadas sem
problemas (o contrrio de perturbar o usurio com outras animaes desnecessrias, elas
ajudam na navegao e do mais interatividade ao site

J A Em constru%o sempre
;unca coloque em seu site a expresso =Gite em construo=, ou pior ainda, quando se coloca
um gif animado de um operrio trabal2ando * motivo # simples5 sendo a internet um ve$culo
de informao dinFmico e interativo, espera+se de certa forma que todo site esteja sempre
em constante atualizao )m outras palavras, todo site que se preze, est sempre em
construo &ortanto, se o seu site j est no ar, mas ainda no est SMMX pronto, tudo bem,
s, no precisa ficar avisando (final, a expresso =em construo= afugenta o visitante5 pgina
em construo # igual 1 falta de informao ) como se no bastasse, verificou+se que um
internauta que se depara com a expresso dificilmente retorna ao site (final, existem
mil2ares de outros sites prontos para visitar

K A 0exto 2 texto
;as pginas .%/0, texto # texto, imagens so imagens &ortanto, no abuse das imagens
contendo textos &refira usar o =texto puro= quando voc- puder escol2er * problema das
imagens voc- j con2ece5 elas aumentam bastante o tempo de carregamento do site 7 claro
que voc- pode us+las em t$tulos, logos e menus, mas no exagere (l#m disso, os textos das
pginas 3eb so usados pelos mecanismos de busca para indexar um site Isto #, as pessoas
encontram o seu site por causa das palavras que ele cont#m (s imagens prejudicam essa
indexao

L A Evite frames
* uso dos frames # bastante pol-mico entre os 3eb designers /uitos dizem que os frames
facilitam a navegao *utros afirmam que os frames s, trazem problemas e que so
desnecessrios /as o fato # que esta Hltima opinio vem predominando /uitos 3eb
designers t-m abolido os frames dos seus sites )mbora atraentes 1 primeira vista + sobretudo
para o 3eb designer iniciante, o uso de frames traz uma s#rie de problemas )m primeiro
lugar, os frames criam dificuldades para a administrao do site 8sobretudo sites com grandes
nHmeros de pginas9 )les quebram o princ$pio fundamental da 3eb5 para cada janela do
bro3ser, uma Hnica pgina e um Hnico endereo 8<R09 "ontrolar diversas pginas em
diferentes partes da tela dificulta a manuteno de sites complexos

M A Nanelas irritantes
;o abra janelas desnecessariamente no bro3ser do usurio )sse recurso s, deve ser
empregado se voc- est lincando uma pgina fora do seu site )m qualquer outro caso, nunca
abra janelas que sumam com os menus 8(rquivo, )ditar, botes de navegao 8Boltar, (vanar
e &arar9 e endereo 8<R09 do bro3ser9 *s internautas esto acostumados com a janela
tradicional do bro3ser Gumindo com os menus, o visitante no sabe mais como imprimir a
pgina, sumindo com o endereo, ele deixa de saber em que site est, sumindo com os botes
de navegao, ele fica sem saber para onde ir, como retroceder, como avanar e, muitas
vezes, opta pela sa$da mais fcil5 fec2ar a janela

5E A N%o compli1ueG simplifi1ue
&or fim uma Hltima dica5 busque simplicidade, no complexidade &ode parecer uma dica
,bvia, mas quem avisa # o guru do 3eb design, Aacob ;ielsen5 =&refira um site de fcil
navegao a um site que # um s2o3 de tecnologia= (l#m disso, no faa do seu site um
labirinto <m site no qual # dif$cil navegar, tamb#m # dif$cil de manter ) a id#ia # sempre
levar o usurio aquilo que l2e interessa, sem passos intermedirios ;unca coloque uma
pgina de entrada com uma imagem grande dizendo5 ="lique aqui para entrar= Go obstculos
que dificultam a entrada do site, fazem o usurio esperar, e no acrescentam nen2uma
informao
&refira um design limpo, =clean=, no rec2eie suas pginas com barras e botes coloridos,
fotos, figuras animadas e mHsica de fundo &or fim, uma dica dos mel2ores designers5 deixe
espaos em branco no seu site Boc- no precisa preenc2er sempre toda a tela *s espaos
em branco servem para deixar as pginas menos carregadas
$onceitos B*sicos

<ma pgina .%/0 # um ar1uivoAtexto simples 8(G"II9 contendo o texto da pgina e os
comandos .%/0 que definem a formatao da mesma
*s comandos so indicados entre marcadores c2amados =tags= que v-m entre os s$mbolos
de O e P
( maioria dos comandos vem aos pares, sendo que a cada abertura corresponde um
fec2amento e cada fec2amento # uma repetio do comando de abertura precedido por '
Exemplo5 Y2eadZ Y'2eadZ
)xistem excees quanto a necessidade de um par de comandos, como no caso do
espaamento simples entre lin2as YbrZ, que no precisa ser fec2ado
*s comandos podem ser digitados tanto em letras maiHsculas quanto em letras minHsculas ou
numa mistura dos dois casos
(lguns comandos possuem parFmetros 8como a cor, por exemplo9 )sses parFmetros so
separados por um espao e colocados entre aspas
Exemplo5 YbodO bgcolor[=red=Z Y'bodOZ
)spaos extras em branco, tabulaes, quebras de lin2a e marcas de final de lin2a so
ignorados dentro do c,digo de uma pgina, ou seja5 no # deixando um espao maior entre
dois comandos que se obt#m o efeito de uma lin2a em branco na tela
<m arquivo de uma pgina .%/0 deve ser gravado com a extenso )tm ou )tml
Gendo a pgina .%/0 um arquivo texto, pode ser criada ou editada em qualquer editor de
textos simples como, por exemplo, o Cloco de ;otas do Windo3s
)xistem no mercado, inHmeros editores de pginas .%/0 j no formato WRGWRQ 8=&hat you
see is what you get=, algo semel2ante a =* que voc- est vendo ao criar a pgina # o que ter
ao visualiz+la no navegador=9 ;este caso a pgina # montada num ambiente amigvel onde
no # preciso entrar diretamente com os comandos
Isto no implica, no entanto, na no necessidade de se con2ecer .%/0 Euem con2ece a
linguagem .%/0 consegue compreender o c,digo gerado pelos editores de pginas Web e com
isto5
desenvolve pginas limpas em termos de codificao que so carregadas
rapidamente6
pode escol2er a alternativa mais adequada para problemas comuns de laOout de
pgina6
tem uma intimidade maior com os comandos, sua sintaxe e semFntica6
tem em mente como estruturar o site como um todo, diante das possibilidades
oferecidas pela linguagem
Estrutura de uma p*gina

<ma pgina # delimitada pelos comandos Y2tmlZ Y'2tmlZ !esta forma, estes so
respectivamente o primeiro e Hltimo dos comandos do c,digo
%oda pgina # composta por um cabeal2o e um corpo sendo que na codificao, o cabeal2o
vem antes do corpo
$omandos do ca'eal)o# Y2eadZ Y'2eadZ
$omandos do corpo# YbodOZ Y'bodOZ
&ara testar cada c,digo apresentado no exemplo5
;o Cloco de ;otas
!igite o c,digo
0ipo de Documento

(tualmente existem vrios tipos de .%/0 e P.%/0 8.%/0 JMS Gtrict, .%/0 JMS %ransitional,
P.%/0 SM Gtrict, etc9 &ara que o navegador interprete de maneira correta o seu c,digo e
exiba a sua pgina conforme o seu planejamento, # necessrio declarar o seu !octOpe
8!efinio do %ipo de !ocumento9
)ssa declarao # fundamental para que o navegador processe o seu c,digo de maneira rpida
e correta e # inserida logo no in$cio do documento 8antes mesmo da marcao .%/09
Beja o exemplo da marcao para P.%/0 SM %ransitional5
Gem a declarao acima, vrios c,digos so processados de maneira errada pelo navegador,
que interpreta o seu .%/0 de maneira =gen#rica=
$a'eal)o ,;ead-

!elimitado pelos comandos Y2eadZ e Y'2eadZ, o cabeal2o da pgina cont#m informaes
sobre a pgina que n%o ser%o visuali/adas no navegadorG por2m por web robots e
'uscadores
>rincipais marcadores do ca'eal)o da p*gina

OtitleP 0<tulo da p*gina O+titleP
Identifica o texto a ser exibido na barra de t$tulos da pgina
Euando o usurio entra em uma ferramenta de busca 8como Ra2oo, "ad-, etc9 procurando
por um assunto espec$fico, o conteHdo do marcador YtitleZ de uma pgina # a primeira coisa
a ser vascul2ada !a$ a importFncia em escol2er t$tulos coesos para as pginas e que consigam
traduzir o conteHdo da pgina em poucas palavras
(l#m disso, quando o usurio escol2e uma pgina para colocar em sua lista de ?avoritos do
bro3ser, # o t$tulo da pgina que aparecer na lista "aso a pgina no ten2a o marcador
YtitleZ setado ou se ele no contiver nada, o bro3ser assumir o nome do arquivo
Exemplo#
Ometa nameQRdescriptionR contentQRconte&do da paginaR +P
Resume o conteHdo da pgina )ste marcador tamb#m # utilizado pelas ?erramentas de Cusca
no cadastramento do site
Exemplo#
Ometa nameQR(eSBordsR contentQRpalavrasAc)ave da paginaR +P
(presenta as palavras+c2ave da pgina )ste marcador tamb#m # utilizado pelas ?erramentas
de Cusca no cadastramento do site 7 importante atentar para as palavras que se escol2e
como c2ave Ge o site, por exemplo, for de uma empresa de treinamento em informtica da
regio de "ampinas, mas a palavra "ampinas no for colocada como c2ave, um internauta
procurando por esse tipo de empresa no a encontrar no mecanismo de busca
Exemplo#
$orpo ,BodS-

!elimitado pelos marcadores YbodOZ e Y'bodOZ, o corpo # a parte da pgina que cont#m
informaes que sero visualizadas na tela
>rincipais atri'utos do marcador 'odS

O'odS 'ac(groundQR?rlTdaTimagemRP
)specifica a imagem 8QI? ou A&)Q9 utilizada para preenc2er o fundo da tela 7 importante
observar se o endereo da imagem esteja correto
O'odS 'gcolorQRcorR P
)specifica a cor de fundo da pgina * valor que entrar pode ser uma constante ou um
nHmero 2exadecimal correspondente aos valores RQC da cor
Exemplo#

<body bgcolor="red">
<body bgcolor="#996633">

O'odS textQRcorR lin(QRcorR vlin(QRcorR alin(QRcorR topmarginQRER leftmarginQRERP
)specifica respectivamente as cores para5
texto geral da pgina ou foreground 8text96
lin:s no visitados 8lin:96
lin:s j visitados 8vlin:96
lin: no momento em que # ativado 8alin:96
topmargin + margem superior6
leftmargin + margem esquerda
Exemplo#

<body bgcolor="#000000" link="#FFFF00" vlink="#FF00FF"
alink="#00FF00">

>ar*grafos e 1ue'ra de lin)a


OpP0extoO+pP
!elimita um pargrafo, que # uma unidade de composio de texto muito importante para a
leitura e entendimento
Exemplo#

<html>
<head>
</head>
<body>
Testando sem colocar ar!gra"o#
$er se sem o marcador sai na linha debai%o#
<>&gora com o marcador de ar!gra"o#</>
'inha seg(inte#
</body>
</html>

* marcador de pargrafo possui um atributo opcional align para configurar o alin2amento do
pargrafo
* atributo align pode conter os valores left 8esquerda9, center 8centro9, right 8direita9
ou 'ustify 8justificado9
Exemplo#

< align="center">Te%to do ar!gra"o</>
O'rP
Euebra de lin2a /arcador utilizado para separar uma lin2a da outra sem criar um espao em
branco entre as duas e preservando o mesmo pargrafo
7 importante observar que o marcador YbrZ deve vir no final da lin2a que se quer separar
0embre+se que ao utilizar P.%/0, o marcador # fec2ado dessa maneira5 Ybr 'Z
Exemplo#

<html>
<head>
</head>
<body>
Testando sem colocar ar!gra"o#
<>&gora com o marcador de ar!gra"o#</>
&gora com )(ebra de linha#<br>
'inha seg(inte#
</body>
</html>

OdivPO+divP
( tag div # utilizada para a marcao de blocos, de textos, figuras, listas, etc 7 a tag mais
importante ao utilizar o m#todo de desenvolvimento con2ecido como %ableless 8essa forma de
desenvolvimento ser explorada numa pr,xima unidade9
)m .%/0 =tradicional= essa marcao configura o alin2amento de um texto \til quando se
quer alin2ar um conjunto de pargrafos * parFmetro align pode conter um dos
valores5 left8esquerda9, center 8centro9, right 8direita9 ou 'ustify 8justificado9
Exemplo#

<html>
<head>
</head>
<body>
<div align="center">
<>*rimeiro ar!gra"o</>
<>+eg(ndo ar!gra"o</>
<>Terceiro ar!gra"o</>
</div>
</body>
</html>

Uormata%o de texto


Ofont faceQRnomeTdaTfonteR si/eQRtaman)oTdaTfonteR colorQRcorTdaTfonteRPO+fontP
"onfigura a tipografia, taman2o e cor do texto, sendo que no 2 necessidade da utilizao
de todos os atributos juntos
UA$E5 configura a fonte usada
Exemplo#

<"ont "ace="&rial">Formata,-o de te%to</"ont>

%amb#m podem ser nomeadas at# tr-s fontes para o atributo face Ge a primeira fonte
nomeada no estiver dispon$vel, a segunda # utilizada e assim sucessivamente Ge nen2uma
das tr-s fontes especificadas estiver dispon$vel, o bro3ser usa sua pr,pria fonte default para
a fam$lia daquela fonte
Exemplo#

<"ont "ace="&rial.$erdana.Times /e0 1oman">de"inindo "ontes
</"ont>

SIVE5 configura o taman2o da fonte
Geus taman2os so 8em .%/0 e o equivalente em pontos95
$.W.R5 configura a cor da fonte
Exemplo#

<"ont "ace="$erdana" si2e="3" color="#345676">Formata,-o de te%to
</"ont>
0<tulos

Identifica t$tulos, usados para dividir sees do texto )xistem K n$veis de t$tulos, numerados
de .S a .K, que so exibidos em fonte maior que a do texto normal *s marcadores de t$tulo
podem ser alin2ados pelo atributo align
O)5PA1ui vai o t<tuloO+)5P
O)7PA1ui vai o t<tuloO+)7P
O)8PA1ui vai o t<tuloO+)8P
O)9PA1ui vai o t<tuloO+)9P
O)HPA1ui vai o t<tuloO+)HP
O)JPA1ui vai o t<tuloO+)JP
Exemplo#

<h5>T8t(lo de n8vel 5</h5>

Estilos

*s estilos comuns utilizados nas pginas Web so5 negrito, itlico e sublin2ado
Exemplos#

<><b>negrito</b></>
<><i>it!lico</i></>
<><(>s(blinhado</(></>

* negrito tamb#m pode ser utilizado com a marcao YstrongZY'strongZ
* itlico tamb#m pode ser utilizado com a marcao YemZY'emZ
Wistas

(s listas so muito utilizadas para a criao de enus de navegao )xistem dois tipos de
listas em .%/0, as ordenadas e as desordenadas )m soft3ares como o /icrosoft Word, essas
listas so c2amadas de ;umeradores e /arcadores 8respectivamente9
Exemplos#

<>9ssa : (ma lista com marcadores</>
<(l>
<li>*rimeiro item</li>
<li>+eg(ndo item</li>
<li>Terceiro item</li>
</(l>
<>9ssa : (ma lista com n(meradores</>
<ol>
<li>*rimeiro item</li>
<li>+eg(ndo item</li>
<li>Terceiro item</li>
</ol>

0exto semanticamente correto

)xiste uma preocupao muito grande na produo de textos com a semFntica correta em
.%/0 )sse tipo de texto # mais intercambivel entre servios de 3eb 8como o RGG9
<m texto formatado de maneira correta # mais recon2ec$vel por navegadores, mais simples
de ser editado e com a possibilidade de ser exibido de maneira diferente por diversos 3eb
sites, que podem aplicar os seus pr,prios estilos de texto 8formatando assim a apar-ncia
conforme o planejamento de design do pr,prio 3eb site9
(lgumas dicas para a criao de um texto correto5
substitua todas as tags ?ont por estilos "GG6
sempre respeite a 2ierarquia de t$tulos )xemplo5 G, utilize um .> dentro de um .I,
e no depois de um .S6
no crie mais do que um t$tulo principal 82S9 na sua pgina6
o negrito # utilizado para criar destaques * itlico para citaes e palavras de l$ngua
estrangeira6
pargrafos so unidades de composio e no =textos separados por espao=6
o texto semanticamente correto no tem =apar-ncia=, apenas conteHdo6
as definies de cor, alin2amento, fundo e tipografia so declaradas em "GG6
escrever algo semFntico # utilizar uma tag no contexto certo para a qual ela foi
criada
Beja um exemplo de texto com a formao correta5

<div>
<h5>;T<'</h5>
<><b>;T<'</b> =acr>nimo ara a <i>;yerTe%t <ark(
'ang(age</i>.
)(e signi"ica 'ing(agem de <arca,-o de ;ierte%to?
: (ma ling(agem de marca,-o (tili2ada ara rod(2ir !ginas na
@eb</>
<hA>;istBria</hA>
<>Tim CernersD'ee</b> crio( o ;T<' original =e o(tros
rotocolos
associados como o ;TT*? em (ma esta,-o
<i>/eETc(be</i> (sando o ambiente de desenvolvimento
/eET+T9*#</>
<>&s rimeiras versFes do ;T<' "oram de"inidas com regras
sint!ticas "le%8veis.
o )(e aG(do( a)(eles sem "amiliaridade com a (blica,-o na @eb#
&t(almente a sinta%e do ;T<' : m(ito mais r8gida. ermitindo (m
cBdigo mais reciso#
&trav:s do temo. a (tili2a,-o de "erramentas ara a(toria de
;T<' a(mento(. assim como
a tendHncia em tornar a sinta%e cada ve2 mais r8gida#
&esar disso. ois )(estFes histBrias. os navegadores ainda hoGe
conseg(em interretar
!ginas 0eb )(e est-o longe de ser (m cBdigo ;T<' v!lido#</>
<hA>9ti)(etas</hA>
Todo doc(mento ;T<' aresenta .<b>eti)(etas</b>. elementos entre
arHnteses ang(lares
=sinais de maior e menor? =< e >?I
esses elementos s-o os comandos de "ormata,-o da ling(agem# &
maioria das eti)(etas
tem s(a corresondente de "echamentoJ<br>
<i><eti)(eta>###</eti)(eta></i></>
<>Ksso : necess!rio or)(e as eti)(etas servem ara de"inir a
"ormata,-o de (ma
or,-o do doc(mento.
e assim marcamos onde come,a e termina o te%to com a "ormata,-o
eseci"icada or ela#</>
</div>

A tag OimgP e seus principais atri'utos

Imagem
(lin2amento
Corda
0argura e (ltura
%exto descritivo
Oimg srcQRimagemRP
( imagem a ser inserida na pgina # um arquivo que pode estar no formato jpg ou gif 8gifs
estticos, gifs animados e gifs transparentes9
(tualmente o formato &;Q tamb#m est sendo bastante utilizado ;esse formato # poss$vel
utilizar transpar-ncias de canal alpha 8vrios n$veis de transpar-ncia9
( palavra SR$ # a abreviao de Source que, em ingl-s, significa =origem= !a$ a necessidade
de se colocar o camin2o correto do arquivo, que pode ser um camin2o absoluto ou relativo
7 interessante deixar as imagens em um diret,rio separado para facilitar a manuteno dos
arquivos
Exemplo#

<html>
<head>
<title>Kmagem</title>
</head>
<body>
<img src="img/logo#gi"">
</body>
</html>

Oimg srcQRimagemR alignQRalin)amentoRP
)specifica o tipo de alin2amento entre a imagem e texto da pgina
(s opes de alin2amento so5 left, rig2t, top, textop, middle, absmiddle, baseline, bottom,
absbottom e center
Exemplo#

<html>
<head>
<title>Kmagem</title>
</head>
<body>
<><img src="img/casa#Gg" align="le"t">&linha a
imagem ela
margem es)(erda e aG(sta o te%to. )(e seg(e a imagem. do lado
direito da "ig(ra</>
</body>
</html>

A tag OimgP e seus
principais atri'utos ,contX-

Oimg srcQRimagemR 'orderQRvalorRP
!etermina a espessura de borda da imagem
Exemplo#

<img src="img/casa#Gg" border="50">
;o caso de uma imagem sem bordas este atributo no precisa ser fornecido
<ma imagem, onde # criado um lin:, automaticamente passa a ter bordas ;este caso #
preciso colocar no marcador img da imagem o atributo 'orderQRER para que as bordas
desapaream
Oimg srcQRimagemR Bidt)QRlargura R )eig)tQRaltura RP
)specifica a largura 83idt29 e a altura 82eig2t9 da imagem
Euando um valor maior do que o da imagem # declarado, acontecem deformaes na
apar-ncia da imagem 8pixelizao9
Euando um valor menor do que o da imagem # declarado, existe um desperd$cio de =banda=,
pois a imagem continua com o mesmo taman2o em :b, apesar de ser exibida menor na tela
( mel2or maneira de utilizar o atributo de taman2o # declarar o que a imagem possui + dessa
forma a imagem no sofre deformaes e no # perdida a banda do usurio sem motivo
Exemplo#

<img src="img/casa#Gg" 0idth="536" height="5L3">
Oimg srcQYYimagemR altQRtextoTdescritivoRP
)xibe uma descrio da imagem quando o cursor move+se sobre ela
)ssa marcao # muito importante e atualmente quase uma obrigao na construo de
pginas acess<veis "riadas pensando num pHblico que utiliza soft3ares de leitura de tela
essa marcao =narra= o que a imagem quer dizer, permitindo um entendimento 8no visual9
do significado da imagem
%amb#m # uma marcao importante na otimizao para mecanismos de busca (o contrrio
do internauta padro, o mecanismo de busca no enxerga, apenas l- o c,digo .%/0,
encontrando assim mais palavras+c2aves na descrio da imagem
Exemplo#

<img src="img/"esta#Gg" alt="Festa de +-o Mo-o em *ernamb(co#">
$onceitos B*sicos

(s tabelas so utilizadas como um recurso essencial para o laOout geral da pgina,
principalmente para posicionar imagens e texto )las so compostas de lin2as e colunas e o
conteHdo de cada c#lula pode ser texto, imagem ou at# mesmo outra tabela
;o .%/0 semanticamente correto, a tabela deve ser utilizada apenas para guardar dados
tabulares, como os resultados de um campeonato, um calendrio ou uma lista de preos
<ma tabela # delimitada pelos marcadores YtableZ Y'tableZ, sendo que dentro destes
marcadores so colocadas as lin2as e as colunas da tabela
Ota'leP
OtrP indica o in$cio de uma nova lin2a na tabela
OtdP indica uma coluna na tabela
O+tdP indica o final daquela coluna na tabela
O+trP indica o final da lin2a na tabela
O+ta'leP indica o final da pr,pria tabela
)xiste um marcador para a criao de cabeal2os na tabela )sse marcador # o Yt2Z e #
utilizado ao inv#s do YtdZ
Exemplo de uma ta'ela com duas lin)as e tr@s colunas#

<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="5">
<tr>
<td> *rimeira col(na</td>
<td> +eg(nda col(na</td>
<td> Terceira col(na</td>
</tr>
<tr>
<td> *rimeira col(na</td>
<td> +eg(nda col(na</td>
<td> Terceira col(na</td>
</tr>
</table>
</body>
</html>

>rincipais atri'utos
de uma ta'ela ,>arte 5-

Ota'le 'orderQRespessuraTdaT'ordaRP
)specifica a presena ou aus-ncia de borda na tabela bem como a espessura ;o caso de uma
tabela sem bordas no # necessrio colocar o atributo !order
Ota'le Bidt)QRlarguraTdaTta'elaR )eig)tQRalturaTdaTta'elaRP

Indica o taman2o da tabela )ste taman2o pode ser relativo ao taman2o da pgina em que a
tabela ser exibida, ou absoluto
<ma tabela de taman2o relativo # c2amada =tabela elstica= e se estica de acordo com o
taman2o da pgina em que # exibida ;este caso a largura e altura da tabela so fornecidas
tendo a porcentagem como unidade de medida SMMX indica uma tabela que ocupar a tela
toda
Exemplo#

<table 0idth="60N" height="500N">
<ma tabela de taman2o absoluto permanece fixa independentemente da resoluo da pgina
em que est sendo exibida 7 Htil quando existem imagens que no podem separar+se,
alin2adas dentro de uma tabela ;este caso a largura e altura da tabela so fornecidas tendo
o pixel como unidade de medida
Exemplo#

<table 0idth="60" height="500">
>arte 7

Ota'le alignQRposicionamentoRP
)specifica o posicionamento do texto a circundar a tabela * alin2amento pode ser left
8esquerda9 ou rig2t 8direita9 ;os casos em que no se deseja que o texto circunde a tabela
no # preciso colocar o atributo align
)xemplo de texto flutuando 1 esquerda da tabela 8align[=left=9
>arte 8

Ota'le cellpaddingQRvalor em pixelRP
)specifica o deslocamento do texto em relao 1s bordas de cada c#lula da tabela
Exemplo#

<table border="5" celladding="A0">
>arte 9

Ota'le cellspacingQRvalor em pixelRP
)specifica o espaamento entre cada c#lula da tabela
Exemplo#

<table border="5" cellsacing="50">
Ota'le 'gcolorQRcorRP
)specifica uma cor de fundo para a tabela ( cor pode ser declarada pelo seu nome ou,
preferencialmente, pelo seu c,digo 2exadecimal
Exemplo#

<table bgcolor="#cc""00">
Ota'le 'ac(groundQRimagemRP
)specifica uma imagem de fundo para a tabela ( imagem de fundo ser repetida, como um
ladril2o
Exemplo#

<table backgro(nd="img/"(ndo#gi"">
>rincipais atri'utos de uma c2lula

"om exceo dos atributos border, cellspacing e cellpadding, que so atributos exclusivos da
tabela, cada c#lula possui os demais atributos, a saber5
cor de fundo e imagem de fundo6
largura e altura
Al2m distoG cada c2lula pode ter seu conte&do alin)ado )ori/ontalmente e verticalmente

Otr alignQRvalorR P ou Otd alignQRvalorR P

Alin)amento ;ori/ontal# Balores podem ser 0)?% 8esquerda9, RIQ.% 8direita9 ou ");%)R
8centro9

Otr valignQRvalorRP ou Otd valignQRvalorRP
Alin)amento "ertical# Balores podem ser %*& 8topo da c#lula9, /I!!0) 8regio mediana da
c#lula9, C(G)0I;) 8alin2a a lin2a de base do texto da c#lula com o texto da lin2a9, C*%%*/
8alin2a o conteHdo da c#lula com a regio inferior da c#lula9
Exemplo#

<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="5" 0idth="600" height="A00">
<tr>
<td valign="to"> *rimeira col(na</td>
<td valign="middle"> +eg(nda col(na</td>
<td valign="bottom"> Terceira col(na</td>
</tr>
<tr>
<td align="le"t"> *rimeira col(na</td>
<td align="center"> +eg(nda col(na</td>
<td align="right"> Terceira col(na</td>
</tr>
</table>
</body>
</html>
0a'ela de laSout

( tabela # a principal forma de criar o laOout 8apar-ncia9 de um 3eb site ;ela so colocadas
as imagens, banners, textos e todo o conteHdo da sua pgina
.oje em dia existem vrios 3eb sites 8a maioria ainda9 com o laOout feito com tabelas e a
estrutura bsica # algo como o exemplo5
Link A tag Oa )refP

(o navegar pela Internet o usurio se depara com palavras geralmente escritas em azul e
sublin2adas, sobre as quais o cursor assume o formato de uma mozin2a (o clicar nestes
locais podem+se acessar informaes diferentes, tais como5
um email6
uma outra pgina no mesmo site6
arquivos de vrios tipos6
outro site
)sta poderosa capacidade de conexo de id#ias atrav#s de lin:s + talvez a maior qualidade da
internet + # proporcionada pela linguagem .%/0 atrav#s do marcador Fncora de 2ipertexto,
representado por YaZ Y'aZ
!entro desta tag # preciso colocar a refer-ncia ao arquivo destino, que se d atrav#s do
atributo href
Oa )refQRrefer@nciaTaoTar1uivoTdestinoRP textoTouTimagemTorigemO+aP
*bserve que o texto ou a imagem, que serviro de origem para o lin: aparecendo em
destaque na pgina, devero vir entre o par de marcadores YaZ e Y'aZ
Exemplos#

<html>
<head>
</head>
<body>
<><a hre"="mailtoJnomeOrovedor#com#br">'ink ara (m
email</a></>
<><a hre"="inde%#html">'ink ara (ma !gina</a></>
<><a hre"="doc(mento#doc">'ink ara (ma ar)(ivo do
@ord</a></>
<><a hre"="httJ//000#eole#com#br">'ink ara (m
site</a></>
</body>
</html>
$onceitos B*sicos

?rames dividem a janela do bro3ser em vrias reas, cada uma podendo exibir uma pgina
diferente
( utilizao de frames na linguagem .%/0 # feita atrav#s do par de marcadores
YframesetZY'framesetZ
( pgina onde o frameset # codificado n%o leva o marcador O'odSP e tem a finalidade de
definir o laOout a ser apresentado pelos frames
Exemplo#

<html>
<head>
</head>
<"rameset cols="A00.P">
<"rame src="salmao#htm">
<"rame src="orange#htm">
</"rameset>
</html>
?rames so criados da esquerda para direita, em se tratando de colunas, e de cima para baixo
em se tratando de lin2as Euando os dois atributos so especificados, reparties so criadas
da esquerda para a direita na primeira lin2a, da esquerda para a direita na segunda lin2a,
etc
>rincipais atri'utos do marcador OframesetP

Oframeset roBsQR*reaRP
)specifica a disposio dos frames 2orizontais *s valores so separados por v$rgulas e podem
ser dados em pixels, percentagem ou comprimentos relativos, # poss$vel em um mesmo
frameset utilizar valores fixos e relativos para as lin2as e colunas * s$mbolo asterisco 8]9
pode ser utilizado para indicar a relatividade no taman2o * valor padro # SMMX,
representando uma lin2a

Oframeset colsQR*reaRP
)specifica a disposio dos frames verticais *s valores so separados por v$rgulas e podem
ser dados em pixels, percentagem ou comprimentos relativos * valor padro # SMMX,
representando uma coluna
Oframeset framespacingQRvalorRP

)specifica o espaamento entre frames * valor # dado em pixels e depende do bro3ser
utilizado * valor zero 8M9 possibilita que no 2aja espao entre os frames
Exemplos#
* exemplo a seguir divide a tela em duas partes verticais, ocupando cada uma LMX do espao

<html>
<head>
<title>Frames</title>
</head>
<"rameset cols="60N.60N" "ramesacing="0">
<"rame src="bl(e#htm">
<"rame src="orange#htm">
</"rameset>
</html>
>rincipais atri'utos do marcador
OframesetP,contX-

* exemplo a seguir divide a tela em duas partes 2orizontais, ocupando cada uma LMX do
espao

<html>
<head>
<title>Frames</title>
</head>
<"rameset ro0s="500.P" "ramesacing="0">
<"rame src="bl(e#htm">
<"rame src="orange#htm">
</"rameset>
</html>
>rincipais atri'utos do
marcador OframeP

* marcador YframeZ deve ser utilizado dentro das delimitaes do marcador YframesetZ
* nHmero de marcadores YframeZ vai depender do nHmero de lin2as e colunas especificado
pelo YframesetZ
Oframe srcQRp*ginaTdestinoRP
)specifica a pgina a ser exibida pelo frame
Exemplo#

<"rame src="green#htm">
Oframe nameQRnomeTdoTframeRP
)specifica o nome do frame )ste atributo tem grande importFncia pelo fato de toda a
navegao entre frames ser baseada no nome de cada frame
Exemplo#

<"rame src="orange#htm" name="rincial">
>rincipais atri'utos do marcador OframeP ,contX-

Oframe noresi/eP
Euando utilizado, este atributo booleano no permite que na janela do navegador a rea do
frame seja redimensionada
Exemplo#

<"rame src="bl(e#htm" noresi2e>
;a linguagem P.%/0 no existem mais marcadores booleanos ( declarao nessa linguagem #
noresize[=noresize"
Oframe scrollingQRvalorRP
!etermina a presena ou aus-ncia de barras de rolagem junto 1quela rea do frameset *s
valores podem ser5
auto5 oferece barras de rolagem caso sejam necessrias Balor padro6
Oes5 sempre oferece barras de rolagem para este frame6
no5 no oferece barras de rolagem para este frame, mesmo que sejam necessrias
Exemplo#

<"rame src="salmao#htm" scrolling="a(to">
Oframe frame'orderQRvalorRP
!esen2a um separador entre o frame e cada frame adjunto *s valores podem ser5
M ou =no=5 no desen2a um separador entre o frame e cada frame adjunto6
S ou =Oes=5 desen2a um separador entre o frame e cada frame adjunto Balor padro
Exemplo#

<"rame src="orange#htm" "rameborder="0">
)xemplo de uma pgina com todos os atributos5

<html>
<head>
<title>Frames</title>
</head>
<"rameset cols="5A0.P" "ramesacing="0">
<"rame src="branca#htm" name="men(" noresi2e
scrolling="no" "rameborder="0">
<"rame src="bl(e#htm" name="rincial" noresi2e
scrolling="a(to" "rameborder="0">
</"rameset>
</html>
$ontrolando a *rea de destino

* direcionamento de lin:s para determinadas reas de um frameset # feito atrav#s do
atributo target, presente no marcador Fncora YaZY'aZ

Oa )refQRnomeTdaTpaginaR targetQRnomeTdoTframeRP .rigemTdoTlin(O+AP
Exemplo# Na p*gina frameset#

<html>
<head>
<title>Frames</title>
</head>
<"rameset cols="30N.60N">
<"rame +13="branca#htm" name="menu">
<"rame +13="bl(e#htm" name="principal">
</"rameset>
</html>
;a pgina branca2tm5

<html>
<head>
</head>
<body>
<><a hre"="orange#htm" target="principal">
Qrange</a><br>
<a hre"="green#htm" target="principal"> Rreen</a><br>
<a hre"="bl(e#htm" target="principal">Cl(e</a><br>
<a hre"="salmao#htm"
target="principal">+almao</a></>
</body>
</html>
$ontrolando a *rea de destino ,contX-

Ge na pgina da esquerda o lin: no tivesse com o atributo %(RQ)% direcionado para a regio
ao lado 8c2amada de principal no ?R(/)G)%9, ao clicar sobre o lin: a pgina seria aberta em
cima dela mesma
* atributo 0AR4E0 tamb#m possui os valores =^top= , =^blan:=, =^self= e =^parent=
^top + remove todos os frames e carrega o documento em uma janela inteira6
^blan: + exibe o novo documento em uma nova janela6
^self + carrega o documento no mesmo frame e janela do lin: que o carregou
8default9
^parent + carrega o novo documento no frame de n$vel superior ao documento e, se
no existir, # o mesmo que =^self=
Exemplo#
;a pgina branca2tm altere o destino para5

<html>
<head>
</head>
<body>
<><a hre"="orange#htm" target="rincial">
Qrange</a><br>
<a hre"="green#htm" target="rincial"> Rreen</a><br>
<a hre"="bl(e#htm" target="_top">Cl(e</a><br>
<a hre"="salmao#htm" target="_blank">+almao</a></>
</body>
</html>
Iframe
$onceitos B*sicos

( tag YiframeZ especifica um frame ou caixa onde # poss$vel carregar uma pgina 2tml Isso
facilita a incluso de textos e imagens muito grandes na pgina, pois # poss$vel 2abilitar a
barra de rolagem para acessar o conteHdo dos mesmos
>rincipais atri'utos da tag OiframeP


src + determina a pgina que vai ser inicialmente apresentada6
name + nome do iframe6
3idt2 + largura do iframe6
2eig2t + altura do iframe6
margin3idt2 + margem esquerda do iframe6
margin2eig2t + margem superior do iframe6
align + alin2amento do iframe8top, middle, left, rig2t e bottom96
scrolling + determina se 2aver barra de rolagem ou no 8auto,Oes, no96
frameborder + determina borda em volta do iframe 8M ou S9
Exemplo#

<html>
<head>
<title>KF1&<9</title>
</head>
<body>
<table border="5" 0idth="600">
<tr>
<td>+alm-o S Rreen S Qrange</td>
</tr>
<tr>
<td height="A00">
<i"rame src="bl(e#htm"
name="cai%a" 0idth="500N"
margin0idth="0" height="500N" marginheight="0" align="middle"
scrolling="a(to" "rameborder="0">
</i"rame>
</td>
</tr>
</table>
</body>
</html>
$ontrolando a *rea de destino

* direcionamento de lin:s # feito atrav#s do atributo %(RQ)%, presente no marcador Fncora
Ya 2refZY'aZ

<html>
<head>
<title>KF1&<9</title>
</head>
<body>
<table border="5" 0idth="600">
<tr>
<td>
<a hre"="salmao#htm" target="
caixa">+alm-o </a> S <a hre"="green#htm" target="caixa">Rreen
</a> S <a
hre"="orange#htm" target="caixa">Qrange</a>
</td>
</tr>
<tr>
<td height="A00">
<i"rame src="bl(e#htm" name="cai%a"
0idth="500N" margin0idth="0" height="500N" marginheight="0"
0 align="middle" scrolling="a(to"
"rameborder="0">
</i"rame>
</td>
</tr>
</table>
</body>
</html>
Exerccios Propostos
S !escreva o que # Internet e Web

I * que # um &rotocolo4 !- exemplos

> Eual a funo de um Web !esigner4

J * que # um site4

L )xplique o que # site esttico e site dinFmico

K "ite I tecnologias de acesso a Canco de !ados na Web

V * que # uma intranet4

U Eual # a diferena entre Web !esigner e Web !eveloper4

N )m sua opinio as funes de Web !esigner e Web !eveloper so complementares ou
conflitantes4 &or qu-4

SM Euais so as caracter$sticas bsicas de um site de ST gerao, IT gerao e >T gerao4