Apostila HTML - Fabio Miyasaki PDF

HTML
HiperText Markup Language

Professor Fbio Miyasaki
Contato: professorfabio@neth.inf.br

Reviso 2006
Programao HTML Construo de Pginas para WEB 2

Professor Fbio Miyasaki - contato@professorfabio.com.br site: www.professorfabio.com.br
APRESENTAO
Neste material apresentamos a Linguagem de Programao HTML - HiperText Markup Language,
utilizada para a criao de documentos do tipo Hipertexto
1
. Aqui sero apresentados os recursos bsicos
da linguagem, que permitiro construir pginas com textos, imagens, tabelas, formulrios, frames
2
e
outros requintes de uma boa publicao WEB. A preocupao principal foi fugir dos criadores automticos
de Home Pages que muitas vezes restringem a criatividade do usurio.

Hoje a Internet uma ferramenta mundial, conquistando adeptos em todos os lugares do mundo e
infiltrando-se nos mais diversos segmentos, como entretenimento, educao, cultura e principalmente
negcios. Isso faz com que as pessoas cada vez mais queiram aparecer na Grande Rede e no s
acess-la como meros espectadores. As empresas vem com bons olhos a oportunidade de negcios
que a Internet est se tornando e por isso esto investindo em publicaes WEB que possam apresentar
seus produtos e servios no mundo ciberntico alm de vend-los direto pela rede.

Os conhecimentos dos processos de criao de uma publicao WEB, so hoje de grande
importncia para as pessoas que querem marcar presena na Rede das Redes, ainda maior para
quem v no desenvolvimento dessas publicaes uma importante e rentvel rea de atuao profissional.
Munido dos conhecimentos apresentados neste treinamento e uma boa dose de criatividade, voc com
certeza estar apto a entrar neste emergente mercado de trabalho.

O material utilizado neste treinamento foi em parte obtido junto Rede Nacional de Pesquisas
(RNP), que um programa prioritrio do Ministrio da Cincia e Tecnologia, apoiado pela Secretaria de
Poltica de Informtica e Automao e executado pelo CNPQ - Conselho Nacional de Desenvolvimento
Cientfico e Tecnolgico, com a misso bsica e pioneira de disseminar o uso da Internet no Brasil,
especialmente para fins educacionais e sociais. A RNP , portanto, a entidade melhor credenciada para
falar de Internet no Brasil.

A todos que usarem este material desejo acima de tudo um bom divertimento e um excelente
proveito do contedo aqui disponibilizado.

Professor Fbio Miyasaki
contato@professorfabio.com.br

1
Hipertexto: Informao que se relaciona com outros dados, atravs do encadeamento de links destacados. Foi criado para que os
programas respondam imediatamente sobre um tema relacionado sobre o qual voc deseja ter informao.
2
Frames: Refere-se aos diversos quadros que uma janela de navegador pode ser divida. Ao usar frames em um site Web, conseguimos
fazer com que cada quadro exiba contedos de diferentes origens simultaneamente.

INTERNET: UMA BREVE INTRODUO
Rede descentralizada de computadores de mbito mundial e acesso pblico baseada em protocolo
3

TCP/IP. Criada nos Estados Unidos e engloba milhares de redes menores. Tem um nmero de usurios
estimado entre 40 e 60 milhes, dos quais 20 milhes estariam nos EUA.
A Internet surgiu na dcada de 60, sob o nome ARPANET
4
como uma rede que interligava centros
importantes de comando e de pesquisa blica. Respondia a uma necessidade militar de recompor os
sistemas de defesa no caso de alguns centros de processamento de dados serem destrudos por um
eventual ataque nuclear. A idia bsica era no ter um centro que servisse de alvo principal ao inimigo.
Seus usurios foram se multiplicando na comunidade cientfica, para a qual a atualizao pontual
dos progressos cientficos vital. Com o tempo, o carter militar foi superado pelo cientfico e nos ltimos
anos cresce o aspecto comercial. Por mais de 20 anos a Internet foi subsidiada pela Fundao Nacional
de Cincia dos Estados Unidos, que encerrou o subsdio em meados de 1994.
Atualmente diversas redes comerciais tomam conta do sistema.
Para um usurio particular poder usar a Internet preciso inscrever-se a um Provedor de Acesso,
alm de dispor de um computador com um modem e linha telefnica.

N
BBS - Bulletin Board System (algo como Quadro de Avisos Eletrnicos ) trata-se de um sistema de
comunicao que utiliza linha telefnica e em que um computador central acessado via Modem, por
vrios computadores, permitindo a troca de mensagens e arquivos. considerada uma prvia da
Internet comercial, embora hoje esteja praticamente relegado ao esquecimento.

:

MODEM: MODULADOR - DEMODULADOR
um aparelho que transforma os sinais
digitais do computador em sinais analgicos da
linha telefnica e vice-versa. Somente atravs
dele que possvel estabelecer a
comunicao telefnica de seu computador com
outro.
Ele pode ser encontrado em forma de uma
placa que fica instalada dentro da CPU ou em
forma de um aparelho externo instalado prximo
ao seu computador.
A ligao do modem com a linha telefnica
realizada atravs de um cabo contendo em
ambas as pontas um conector telefnico padro
RJ11 ou conector americano.

PROVEDORES DE ACESSO
Nome dado s empresas que oferecem servio de acesso a Internet para usurios residenciais ou
empresas. Alguns provedores oferecem apenas acesso internet enquanto outros oferecem tambm um
vasto contedo para seus assinantes, como o caso do UOL. Em ingls o termo para provedor vem da
sigla ISP (Internet Service Provider).

BACKBONES
So conexes de alta velocidade que funcionam como a espinha dorsal de uma rede de
comunicao, transportando os dados de todas as redes menores a ela conectadas. Localmente o
backbone uma linha ou conjunto de linhas a qual as redes se conectam formando uma WAN (Wide rea
Network ou Rede de Longo Alcance). Na internet ou em outras WANs o backbone um conjunto de
linhas nas quais as redes locais ou regionais se comunicam para interligaes de longa distncia.
Veja na pgina seguinte a histria da evoluo do Backbone Brasil gerenciado pela RNP.

3
Protocolo: Conjunto de regras e procedimentos tcnicos que permitem troca de dados entre computadores em uma rede.
4
ARPANET: (Advanced Research Project Agency Network) Rede de computao criada em 1969 pelo Departamento de Defesa dos
Estados Unidos, com o propsito de realizar pesquisas militares. Em 1982 adotou o protocolo TCP/IP e, ao se conectar com outras redes
experimentais, mudou seu nome para Internet. Em 1990 deixou de existir, dando lugar ao que hoje conhecemos como Internet.

EVOLUO DO BACKBONE RNP
Fonte RNP Rede Nacional de Pesquisa

Em 1988, j se formavam no Brasil alguns embries independentes de redes, interligando grandes
universidades e centros de pesquisa do Rio de Janeiro, So Paulo e Porto Alegre aos Estados Unidos. Para discutir
a integrao destes esforos e coordenar uma iniciativa nacional em redes no mbito acadmico, o Ministrio da
Cincia e Tecnologia formou um grupo composto por representantes do CNPq, da Financiadora de Estudos e
Projetos (Finep) e das fundaes de amparo pesquisa do estado de So Paulo, Rio de Janeiro e Rio Grande do Sul
(Fapesp, Faperj e Fapergs, respectivamente). Como resultado, surge o projeto Rede Nacional de Pesquisa (RNP),
formalmente lanado em setembro de 1989.

Fase I: O perodo de 1991 a 1993 foi dedicado montagem da chamada Espinha Dorsal (backbone) Fase I da RNP.
Em 1993, a RNP atendia a onze estados do pas, com conexes dedicadas a velocidades de 9,6 a 64 Kbps.

Fase II: A partir de 1994, com o grande aumento de instituies conectadas rede, ampliou-se a demanda sobre o
backbone do Projeto. Paralelamente, percebeu-se que aplicaes interativas no eram viveis a velocidades
inferiores a 64Kbps. Assim, o perodo de 1994 a 96 foi dedicado montagem da Espinha Dorsal Fase II da RNP,
com uma infra-estrutura bem mais veloz que a anterior. A RNP firmou-se como referncia em aplicao de tecnologia
Internet no Brasil, oferecendo apoio ao surgimento e desenvolvimento de variadas iniciativas de redes estaduais. Em
maio de 1995, teve incio a abertura da Internet comercial no pas. A RNP deixou de ser um backbone restrito ao
meio acadmico para estender seus servios de acesso a todos os setores da sociedade. A capacidade de conexo
internacional chegava a 4 Mbps.

Fase III: Entre os anos de 1996 e 1998, a RNP obteve considerveis melhorias em sua infra-estrutura, ampliando a
capilaridade e velocidade de suas linhas. Com a evoluo da Internet pblica no Brasil e a multiplicao de
provedores comerciais, a RNP pde voltar-se novamente para a rea acadmica. A partir do lanamento do edital
"Projetos de Redes Metropolitanas de Alta Velocidade" (Remavs), em outubro de 1997, a RNP deu incio terceira
fase do projeto, denominada RNP2. Optou-se pelas Remavs porque havia, na poca, uma carncia de infra-estrutura
de fibras pticas de alcance nacional. O objetivo era incentivar o desenvolvimento de uma nova gerao de redes
Internet, interligando todo o pas numa rede de alto desempenho e conectando-se a outras iniciativas de redes
avanadas no mundo. No final da dcada de 1990, os links do backbone com o exterior alcanavam 8 Mbps.

RNP2 ATM: Ao longo dos ltimos anos da dcada de 1990, as operadoras de telecomunicao foram ampliando
suas infra-estruturas de fibras pticas. Desta forma, em maio de 2000, o ministro da Cincia e Tecnologia, Ronaldo
Mota Sardenberg, pde inaugurar o novo backbone RNP2, o qual alcanava os 26 estados da federao e o Distrito
Federal. Eram usadas as
tecnologias de transmisso
Asynchronous Transfer Mode
(ATM) e Frame Relay (FR).
Em fevereiro de 2001, a
capacidade de trfego
internacional do RNP2 foi ampliada
para 155 Mbps com a inaugurao
de um novo link com os Estados
Unidos.
Em agosto de 2001, foi
ativado um canal de 45 Mbps entre
o RNP2 e a rede do projeto
Internet2, dos Estados Unidos. O
enlace foi cedido pelo projeto
Americas Path Network (Ampath),
que integra outras redes
avanadas nos trs continentes
americanos. Uma nova conexo,
desta vez com a
portuguesa Rede Cincia,
Tecnologia e Sociedade (RCTS),
daFundao para a Computao
Cientfica Nacional (FCCN), foi
estabelecida em fevereiro de 2002.
O enlace, de 2 Mbps, possibilitou a
realizao de projetos conjuntos
entre pesquisadores brasileiros e
portugueses ao longo de mais de
um ano. Foi desativado em 2003.
Em 2004 a RNP integrou-se
Rede Clara (Cooperao Latino-Americana de Redes Avanadas), a qual se encontra conectada s redes
avanadas da Europa e dos Estados Unidos. Nesta ocasio, foi desativado o link direto da RNP com a Internet2.

A ASSINATURA DE INTERNET
Atualmente o pagamento de taxas de assinatura de internet restringe-se s pessoas que desejam
alm do acesso, ter um vasto contedo disponvel e protegido por senha. Outros que necessitam de
provedor o usurio de Banda Larga com o ADSL Speed da telefnica.
Usurio de Modem hoje contam com vrios provedores de acesso gratuito internet onde basta
cadastrar-se e usufruir do acesso. Dentre os mais famosos esto o IG e o IBest.
Quando voc se inscreve em um provedor pagou ou no, voc rebatizado com um nome,
chamado de ID, escolhe uma senha pessoal e adquire um endereo eletrnico. Essa ID em geral far
parte do seu endereo eletrnico hoje popularmente conhecido com Email. Um endereo eletrnico
sempre escrito em letras minsculas e separado pelo sinal "@" (At que significa EM) do domnio
5
do seu
provedor.
No endereo, contato@professorfabio.com.br, o nome do usurio vem em primeiro lugar, em
seguida temos o smbolo de arroba e a identificao do domnio ao qual esse endereo pertence. O uso
do sinal arroba, permite que a compreenso do endereo ocorra da seguinte forma:

ID do Usurio @ Leia em Domnio ao qual ele pertence
contato @ professorfabio.com.br
fabio.miyasaki @ itelefonica.com.br
miyasakisale @ hotmail.com

NAVEGAR PRECISO
O termo Navegar, entre os Internautas, significa pesquisar assuntos especficos, deslocando-se
atravs dos inmeros endereos disponveis na rede. Uma das vantagens da Internet poder usufruir, a
longa distncia, dos recursos e contedos de computadores localizados em outro continente.
Para poder navegar pela World Wide Web, voc precisa de um programa especial chamado de
Browser ou Navegador.

Browser ou Navegador um programa que permite o acesso e a visualizao de informaes
especficas que trafegam pela www. O cone ao lado pertence ao Microsoft Internet Explorer, hoje novas
opes esto disponveis no mercado dentre as mais conhecidas est o Mozzila FireFox e o Netscape
Navigator.
NAVEGADORES
Os navegadores podem acessar vrios tipos de dados, no s do protocolo http usado para sites,
mas tambm FTP (transferncia de dados), Gopher (sistema de busca de textos), Usenet News (acesso
a notcias) e Telnet (ligao remota entre computadores).
O que um navegador faz com maior freqncia lidar com a formatao e a apresentao de
documentos da Web. Cada pgina um arquivo, criado basicamente com a linguagem de formatao
HTML que leva esse nome uma vez que sua funo dar formato s pginas que sero exibidas.
Elementos como cores, tipos de letra, posicionamento de imagens, textos e links so alguns do
elementos definidos ao escrevermos uma pgina com HTML.
A funo do navegador localizar o arquivo html, a partir de um domnio que solicitamos, e que
est hospedado em um Servidor Web
6
, interpretar os contedos para ento exibi-los na sua tela.
PROTOCOLOS INTERNET
Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados
protocolos. Os protocolos mais famosos e necessrios atualmente so:

TCP/IP (Transmission Control Protocol / Internet Protocol - Protocolo de Controle de Transmisso/
Protocolo para Internet): Na verdade, temos trs situaes distintas:

IP Especifica o formato dos pacotes de dados ou datagramas
7
a serem transmitidos na rede e o
sistema de endereamento usado para identificar os computadores conectados. Cada endereo IP
composto por um cdigo de 32 bits.

5
Domnio: Endereo que identifica um site na web.
6
Servidor Web: Programa que fornece o material exibido pelo Navegador web.
7
Datagramas : Bloco de informao preparado para trafegar numa rede de computadores, com um cabealho que identifica a sua origem e
o seu destino;

TCP Protocolo que possibilita a conexo de dois Hosts
8
e garante que o pacote de dados seja
transmitido sejam recebidos na ordem correta, certificando seu recebimento.

TCP/IP Protocolo usado na transmisso entre computadores de redes diferentes. Ele garante o
endereamento de todas as maquinas na internet e o correto encaminhamento de dados entre
essas mquinas.

FTP (File Transfer Protocol) Protocolo de transferncia de dados entre computadores em uma rede
TCP/IP. empregado na internet para Downloads, Uploads e principalmente para fazer atualizaes de
sites no servidor hospedeiro.

HTTP (HyperText Transfer Protocol) ou Protocolo para Transferncia de Hipertexto. Sua funo definir o
modo como o navegador e o servidor se comunicam. Quando digitamos um endereo, como por exemplo
www.professorfabio.com.br e teclamos enter, o navegador envia um http ao servidor solicitando a exibio
do contedo daquele endereo.

Telnet: Aplicativo de TCP/IP, que permite acessar um computador equipado com o servio Telnet atravs
de uma conexo remota. Para acessar outro computador, necessrio se identificar com um nome de
usurio e uma senha. A interface de texto simples.

NNTP: (Network News Transfer Protocol) Protocolo usado entre computadores para transmitir mensagens
de Usenet que uma rede mundial de newsgroups (ou grupos de notcias). Contm diversos artigos
publicados, que podem ser consultados pelos usurios sem necessidade de eles estarem inscritos nos
newsgroups aos quais pertencem tais artigos.

WWW (WORLD WIDE WEB)
A World Wide Web considerada como a parte visual da internet (pginas grficas) assim sendo
um conjunto de documentos espalhados pela Internet. Estes documentos tm uma caracterstica em
comum que o fato de serem em geral escritos em HTML.
O termo www ou Teia de Alcance Mundial vem do fato que se mapearmos as rotas de trfego de
dados e sua distribuio teremos uma espcie de teia de aranha que cobre o planeta. Veja as duas
ilustraes abaixo:

8
Host: ou servidor, um computador da rede que desempenha funes centralizadas, colocando arquivos e programas a disposio de
estaes de trabalho.

HOME PAGE OU SITE?
Em ingls o termo site designa um local ou lugar. Na internet designa um conjunto de pginas que
representa uma pessoa, instituio ou empresa na rede. No Brasil podemos encontrar textos muito
conservadores que no concordam em usar o ingls, misturados ao portugus que adotam o termo Stio
como j comum em Portugal. Home page considerada apenas a pgina principal de um site.
Assim, temos que todo Site tem uma home page e composto por um conjunto de pginas web.

ORGANIZANDO UM SITE
O QUE PRETENDE DIVULGAR ?
Que tipo de contedo voc pode apresentar na Web?
Praticamente o que quiser. Eis aqui alguns tipos de contedos comuns na Web:

Informaes pessoais;
Hobbies ou interesses especiais: filmes, msica, livros, veculos;
Publicaes: verses digitais de jornais e revistas;
Perfis de empresa: contedo institucional que mostra o que uma empresa faz;
Documentao On-line: desde manuais, guias de treinamento, dicionrios;
Catlogos de compras: comercializao e divulgao de artigos especiais;
Lojas on-line: Comercio Eletrnico ou E-commerce.
Pesquisas de opinio: a interatividade com o usurio atravs de formulrios;
Educao On-line: numerosas universidades, escolas e empresas particulares oferecem o
ensino distncia atravs da Web.

ESTABELEA SEUS OBJ ETIVOS!
Voc deve se perguntar o que seus leitores procuram? O que deseja realizar com seu site? Eles
vo ler a pgina inteira ou apenas uma parte dela?
Antes de comear entrar com cdigos ou imagens voc deve pensar o que quer colocar em sua
pgina. Defina o modo como ela ser estruturada e verifique sempre se ela adequada ao seu pblico
alvo.
Caso v desenvolver uma apresentao Web para uma empresa ou pessoas importante que voc
consiga junto de seu cliente seus objetivos, idias, a forma que imagina sua pgina, etc. Assim, ficar
bem mais fcil de comear seu trabalho.
DIVIDA SEU CONTEDO EM TPICOS
Crie uma lista com os principais tpicos, em princpio sem se importar com a ordem que elas tero
no final. Esta uma forma de comear a se organizar. Sua lista poder ter quantos tpicos desejar, mas
no se perca listando uma quantidade enorme de tpicos, pois voc e seu leitor podem se perder em
meio a tantas opes.
ORGANIZAO E NAVEGAO
Aqui veremos algumas das estruturas e navegao e suas caractersticas e ainda consideraes
importantes como:
Os tipos de informao que se adaptam melhor a cada estrutura;
Como os leitores conseguem se deslocar pelo contedo de cada tipo de estrutura para encontrar
as informaes que precisam;
Como ter certeza de que os leitores conseguem se localizar nos seus documentos;
Como ter certeza de que seus leitores tero sucesso ao tentar achar o caminho de volta at uma
posio conhecida;

Ao ler esta parte reflita como suas informaes se encaixariam em cada uma. Voc poder combinar, at
mesmo, duas estruturas e criar uma nova forma de navegao.
NAVEGAO POR HIERARQUIAS
A maneira mais fcil e mais lgica de estruturar os seus documentos. As hierarquias e os menus
adaptam-se especialmente bem aos documentos on-line e de hipertexto. Exemplo: sistemas de ajuda.

Em uma organizao hierrquica, fcil para os leitores descobrirem a posio em que se
encontram na estrutura. Nas hierarquias, a home page fornece uma viso geral do contedo que est
subordinado a ela e ainda define os principais vnculos s pginas dos nveis inferiores da hierarquia.
Este tipo de estrutura oferece um risco mnimo de ficar perdido, alm de ser uma forma mais fcil
de localizar informaes. Mas procure no incluir muitos nveis para no aborrecer os leitores. Pois estes,
aps ter de selecionar opes em muitos menus, acaba esquecendo o que estava procurando. Fica
aborrecido demais para prosseguir. Procure manter apenas dois ou trs nveis por hierarquia.
NAVEGAO LINEAR
Muito semelhante forma como so organizados documentos impressos. Nesta estrutura a home
page o ttulo, ou introduo, e todas as outras pginas acompanham-na em seqncia com vnculos
que levam de uma pgina a outra, normalmente com opes de avanar e retroceder.
Uma organizao linear muito rgida e limita tanto a liberdade dos seus leitores de consultar as
informaes quanto a sua prpria liberdade de apresent-las. As estruturas lineares so ideais para
apresentar, no ambiente on-line
9
, um material que j tenha esse tipo de estrutura no ambiente off-line.
Como por exemplo: instrues passo-a-passo ou treinamento baseado em computador.

ESTRUTURA LINEAR COM ALTERNATIVAS
Voc pode tornar a estrutura linear menos rgida permitindo que o leitor se desvie do caminho
principal. Pode ter, por exemplo, uma estrutura linear com ramificaes alternativas que partam de um
nico tronco. As ramificaes podem se reunir ao tronco principal em algum ponto mais adiante, em um
nvel mais baixo da estrutura, ou continuar se ramificando em nveis inferiores seguindo caminhos
prprios at chegar a um "fim".
Alm de ramificar a estrutura linear, voc pode tambm oferecer vnculos que permitam aos leitores
avanar ou retroceder na cadeia, caso queiram rever alguma etapa ou j conheam alguma parte do
contedo.

COMBINAO DAS ESTRUTURAS LINEAR E HIERQUICA
Uma forma comum de organizar um documento na Web consiste em obter uma combinao das
estruturas linear e hierrquica. Essa estrutura combinada ocorre com maior freqncia quando
documentos de estrutura rgida, porm lineares, so apresentados no ambiente on-line.
Um exemplo so os famosos FAQ
10
. A combinao de documentos lineares e hierrquicos funciona
bem desde que haja pistas em relao ao contexto. Como essa uma estrutura linear e hierrquica, em
cada pgina do roteiro voc deve oferecer vnculos para o leitor avanar, retroceder, retornar ao incio e
subir um nvel.
O STORYBOARD
A prxima etapa do planejamento do seu site consiste em determinar como o contedo ser
apresentado em cada uma das pginas e criar alguns vnculos que possibilitem a navegao por essas
pginas.
O StoryBoard de uma apresentao um conceito emprestado do cinema, em que cada cena e
cada tomada de cmera esboada por um desenhista, na ordem em que ocorre no filme. O storyboard
fornece uma estrutura e um plano global para o filme, que permitem que o diretor e sua equipe tenham
uma idia clara de onde cada tomada se encaixa no filme.
O uso de Storyboards consiste em um processo de criao resumida, sob a forma de sketh,
(rascunho) que permita vislumbrar qual ser a aparncia final do seu trabalho antes de voc pr em
prtica suas idias e suas tcnicas em prtica.
Esta tcnica fornece um esboo geral de ser seu site pronto, indicando os tpicos que sero
includos em cada pgina, os vnculos bsicos e talvez at mesmo uma idia conceitual do tipo de
imagens grficas que voc usar e onde elas sero apresentadas.
No caso de grande documentao (muito contedo), o storyboard dever ser dividido em reas e
cada equipe cuidar da parte que lhe cabe

9
On-line: Em linha. Num sentido amplo, refere-se tanto disposio de um perifrico pronto para operar (uma impressora ligada e
preparada para imprimir) como um sistema interativo de entrada e sada de dados ou ao estado de comunicao direta e ativa entre dois
computadores, em geral atravs de modems, em tempo real.
10
FAQ: (Frequently Asked Questions) Perguntas feitas com maior freqncia para tirar dvidas sobre um programa, sobre um dispositivo e
seu funcionamento. fcil encontr-las na Internet, seja em grupos de discusso ou Sites. Com as listas de FAQs, os administradores dos
sites e dos grupos de discusso no perdem tempo respondendo a cada pergunta individualmente.

DICAS PARA SEU STORYBOARD
1) Coloque cada tpico em uma pgina;
a) Se houver um grande nmero de tpicos a manuteno e vinculao pode se tornar maante;
2) Defina bem a forma de navegao entre as pginas;
a) Sempre procure tornar a navegao para os leitores a mais intuitiva possvel;
3) Tome cuidado com o que ser incluindo na home page;
a) Lembre-se, cada trabalho torna-se um item no seu portflio
11
profissional;

STORYBOARDS NO CINEMA
Veja baixo como funciona o Storyboard no cinema e como ele ajuda o diretor a produzir seu filme:

A seqncia ao lado, retirada do filme Deep
Blue Sea (Do Fundo do Mar), mostra como deve
ser a cena em que um dos cientistas atacado no
laboratrio, por um dos tubares modificados
geneticamente.
Neste caso, observe que cada folha de papel
exibe at 3 quadros, mostrando principalmente o
ngulo que as cmeras devem estar posicionadas.
Com as ilustraes em mos, o diretor sabe
exatamente o que vai filmar.

Warner Bros. Pictures

11
Portflio: Pasta contendo os melhores trabalho de designers, arquitetos, fotgrafos e artistas em geral. Coleo de trabalhos realizados
profissionalmente ou no.

Organograma de um Site
I N CI O
PGINA
PRI NCI PAL
PGI NA
1
PGINA
2
PGINA
3
HOT LINKS
PGI NA
1.A
PGI NA
I .B
PGINA
2.A
PGINA
3.A UNI VERSO
I NTERNET
WWW
WORD WIDE
WEB
Links
Externos
LI NK
LI NK
LINK
LINK
LI NK LINK
LINK DE
RETORNO
LI NK DE
RETORNO

A estrutura acima demonstra como um site que escolhe quatro assuntos distintos. Assim sendo
necessrio a elaborao do contedo de cada uma. Em geral a Pgina Principal, apenas uma
apresentao e deve ser desenvolvida a fim de fazer com que os visitantes desejem conhecer o contedo
do seu trabalho.
As pginas 1, 2 e 3 so respectivamente, a apresentao do contedo principal de cada caminho
que a pgina tomou. Assim devem conter a descrio detalhada do assunto tratado, bem como os
contedos que podero ser encontrados. As pginas que derivarem a partir dela devero surgir dentro do
contexto previsto e por conta disso, manter o interesse do usurio em visualizar o resto da pgina.

PGI NA
PRINCIPAL
I nformtica Msica Esportes
Cursos
Disponveis
I nformaes
Diversas
Artista
Preferido
Copa do
Mundo
LI NK
LI NK
LI NK
LI NK
LINK
LINK DE
RETORNO
LI NK DE
RETORNO
Basquete
NBA

O modelo acima demonstra a mesma estrutura, com tpicos definidos. Note que o item informtica
possui um subnvel a mais que Msica e Esportes. Em geral a quantidade de nveis depende do assunto
que est sendo tratado.
Antes de prosseguir esboce alguns Storyboards e os respectivos organogramas em que eles sero
pautados.

PROJETANDO UM WEBSITE
DIAGRAMAO
A disposio de imagens, textos, vdeos, enfim, tudo que voc deseja publicar em sua pgina
precisa ser colocado de forma agradvel ao leitor. Abordarmos, de forma geral, a diagramao, palavra
est que vm do mundo dos impressos onde ela trata da disposio de elementos que compem uma
pgina. Deve ser observado o tamanho das fontes, posio das imagens, forma como o texto ser
apresentado, entre outras caractersticas.

HIPERTEXTO
a utilizao da HTML como linguagem para desenvolvimento da sua pgina. Domin-la
importante para um bom desenvolvimento do seu projeto. Alm disso, usar hipertexto pressupe a
existncia de links. Criar links exige pesquisa e direcionamento adequado, uma vez que para um link
funcionar, temos que saber por que, para que e para onde ele ser apontado.

WEB DESIGN E VISO DO PROJ ETO
Muitas pessoas associam o Design unicamente ao projeto grfico do Site, o que um erro. O
conceito de Web Design envolve todos os aspectos da construo de um site, desde o desenho de sua
estrutura de navegao bem como a forma de disponibilizao da informao e o desenvolvimento do
projeto grfico.
A construo de um site deve ser antes de tudo, entendida como um projeto, composto de fases e
desenvolvido por uma equipe de pessoas com habilidades diferentes.

CONTEDO E FORMA
O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar?
Perguntas como estas, fazem parte do dia-a-dia para a equipe de construo de sites.

O que faz uma pessoa entrar em um site?
A primeira pergunta relaciona-se ao pblico alvo. Para qual tipo de pblico voc est
disponibilizando informao? Quais so as prioridades e interesses deste pblico? Que tipo
de conexo internet mais usada por ele?

O que faz uma pessoa querer retornar?
As respostas para a segunda pergunta envolvem dois pontos: o primeiro o contedo. o
elemento central. O segundo ponto o design do site (estrutura de navegao e projeto
grfico).

Um terceiro ponto a ser questionado quanto constncia de atualizao. Sites que so publicados e
atualizados uma vez a cada seis meses esto fadados ao fracasso.

EQUIPE DE DESENVOLVIMENTO
A construo de um Website exige uma equipe multidisciplinar composta por:
Analistas de sistemas: Trazem a experincia no gerenciamento de Informao, responsvel pela
organizao dos dados e dos bancos de dados que o site pode usar;
Design Grfico: responsvel pelo projeto grfico;
Programadores: Dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript,
CGI, ASP, etc;

A equipe ainda dever ter um coordenador, responsvel em fazer o trabalho fluir de forma eficiente,
dentro de um cronograma, aproveitando o mximo de cada profissional. Depois do site construdo surge o
WebMaster
12
, que ser responsvel pela administrao do site no dia-a-dia enquanto a equipe parte para
um novo trabalho.

12
Webmaster: Administrador de um site da World Wide Web, encarregado do design geral, da manuteno e da atualizao dos contedos
oferecidos aos navegantes da Internet. Tambm quem recebe os comentrios e sugestes dos visitantes do site.

FASES NA CONSTRUO DE UM WEBSITE
1 FASE: ORGANIZAO DA INFORMAO
A primeira etapa a organizao da informao que ir compor seu site. O Analista de sistemas
dever colher toda informao e analis-la, preparando-a para a etapa seguinte, onde ter incio o design
do site.
Critrios de avaliao das informaes: Qualquer documento pode ser disponibilizado atravs da Web,
mas alguns se tornam mais teis quando adequados a caractersticas dessa nova mdia. Aqui esto
alguns dos critrios que devero ser observados para o projeto do site:
Material que tire vantagem da estrutura no linear de navegao de um documento com
hipertexto. (manuais, guias, ebooks, etc...)
Dados que s tem valor se forem atualizados freqentemente e com certa facilidade
como agenda de reunies, agenda telefnica, calendrios, etc ...;
Todo material que possa ser totalmente substitudo por uma impresso como grficos e
textos e necessitem de imagens de alta qualidade no so recomendveis;
2 FASE: COMO SER O SITE
Normalmente nesta etapa envolve uma ou mais reunies de criao. Todos os membros da equipe
devem participar das reunies de criao, cujo objetivo obter o maior nmero de idias possveis para a
criao da estrutura de navegao e do projeto grfico.
O Coordenador da equipe, o Design Grfico e o Analista de Sistemas, com suas respectivas vises
de projeto, coordenam essas reunies, para que as sugestes de reas diferentes possam se integrar.
Uma vez discutidas e analisadas todas as sugestes, pode-se ento, criar a estrutura de
navegao. Nesta etapa, desenhar organogramas de navegao, mostrando como as pginas esto
conectadas entre si, ajudar a ter uma viso geral do site. No futuro, isso facilitar tambm o processo de
modificar, acrescentar ou retirar pginas.
3 FASE: MONTAGEM DO SITE
Uma vez definida a estrutura de navegao, os membros da equipe podero ento trabalhar cada
um em sua rea: o Design Grfico e seus Assistentes desenvolvero o projeto grfico, enquanto o
Analista de Sistemas e programadores montaro a estrutura de navegao.
4 FASE: TESTES
Antes de ser disponibilizado para o pblico em geral importante testar a navegao de todo o site,
checando os links de texto e imagens. importante entrar no site a partir de vrias plataformas e
conexes diferentes para testar a velocidade de carga e eliminar possveis falhas de diagramao que
alterem excessivamente a aparncia final, dependendo do equipamento em uso.
DICAS E CONSIDERAES IMPORTANTES
1. Na criao do projeto grfico, tente sempre optar por solues que melhor se adaptem a plataforma
mais usada. Por exemplo: monitor 14 polegadas com resoluo de 640x480, faa com a melhor
diagramao das pginas acontea quando o site visto nesse tipo de monitor e resoluo. Caso o seu
site deva ser diagramado para uma resoluo ou tamanho de monitor diferentes do mais usado, informe
no site.

2. Num projeto grfico deve sempre se perguntar se sua apresentao ficou adequada ou no ao que seu
cliente desejava e ao seu pblico alvo.

3. Para ter uma garantia que suas imagens sero sempre bem visualizadas, trabalhe com imagens
paletizadas (formato gif). O melhor resultado para isso ser trabalhar suas imagens em RGB e depois
index-las com o menor nmero de cores possvel. Caso precise utilizar imagens True Color, salve em
formato .jpeg, que resultar em arquivos pequenos.

4. Sempre indique em que browser sua pgina ser mais bem visualizada.

5. A pgina principal de um site muito importante. Ela deve ser projetada de forma que diga a que o site
se destina, seja de forma textual, visual ou estrutural.


6. Direitos autorais: A proteo de direitos autorais no costuma ser muito evidente na Web, mas qualquer
texto, grfico, vdeo ou udio originais protegido por leis de copyright.

ADMINISTRAO DE UM SITE
Todo site deve ter um Webmaster, ele a autoridade mxima no site e coordena tanto seu
desenvolvimento quanto sua manuteno alm de responder a toda correspondncia enviada ao site. Seu
endereo eletrnico deve ser divulgado na primeira pgina e em todas as outras que exijam um processo
interativo.

1. DIVULGAO Com o potencial de audincia de milhes encontrados na Internet necessrio
utilizarmos todos os recursos disponveis nesta para conseguirmos atingir uma audincia chave. As
principais formas de divulgao on-line so:
E-mail o envio de propaganda
13
no solicitada pela Internet uma prtica no recomendada.
Search engines as informaes de seu site devem ser organizadas da melhor forma possvel para
a captura pelos inmeros recursos de busca existentes na rede.
Banners trata-se de uma tarja com informaes promocionais sobre seu site que deve aparecer
estrategicamente localizada nas pginas de sites que vendem espao publicitrio.

2. ESTATSTICAS Mostram as pginas mais visitadas, horrios mais visitados, dias mais visitados, etc.
Assim possvel definir o perfil do usurio e desta forma atualizar o site de forma a atrair sempre o maior
nmero de visitantes.

3. CHECAGEM DE LINKS importante estabelecer uma rotina peridica tanto para checagem dos links
internos de sua pgina quanto para os externos. Essa rotina pode ser manual ou automatizada
dependendo do tamanho de seu site. Existem softwares especficos para essa tarefa.

4. ORGANIZAO DE ARQUIVOS E DIRETRIOS Os diretrios devem ser estruturados de acordo com
a prpria estruturao da informao. Se as informaes esto estruturadas por mdulos e submdulos
estas geraro diretrios e subdiretrios.

OS 10 PECADOS DO WEBDESIGNER:
Existem certos pecados que ainda so cometidos por muitos sites de pequeno e at mesmo de grande
porte. Na grande maioria so pequenos deslizes que quando esquecidos podem representar grandes
perdas. Acompanhe nesse artigo uma seleo de apenas 10 dos muitos pecados dos webdesigners.
1) No troque a cor azul dos textos linkados. Pesquisas mostram que os links so menos eficientes
quando se troca a cor padro. O seu visitante simplesmente clicar menos sobre ele. O mesmo ocorre
para links sem o sublinhado.
2) No use pgina de entrada ou boas-vindas. comum encontrar sites que colocam uma primeira
pgina contendo apenas a logomarca da empresa, uma mensagem de boas vindas e um link com o texto
"ENTRAR". Evite isso. Quer saber por que? Veja nas estatsticas do seu site a quantidade de pessoas
que simplesmente no clica no link "ENTRAR" e acaba abandonando o site. Voc vai se assustar.
3) No utilize textos muito longos com fontes do tamanho 1. Muitos dos visitantes do seu site no vo
ler o texto por dois motivos: o primeiro porque no vo nem perceber que ele esta l. O segundo que
se torna bastante incmodo ler textos com fontes muito pequenas.
4) No valorize mais o design do que o contedo. A maioria das pessoas quando visita um site est
em busca de algum tipo de informao. O design de um site deve funcionar como uma ferramenta para
facilitar o acesso e a compreenso da informao. Tudo bem que a primeira impresso a que fica mas a
frustrao de no encontrar com facilidade o que se procura destri qualquer boa impresso.
5) No use menu utilizando JAVA Applet. Java normalmente um recurso que demora para carregar,
consome recursos at o ponto de travar algumas mquinas menos potentes. muito comum encontrar
sites que utilizam recursos JAVA, Flash, DHTML na parte mais importante que o MENU de opes.
6) No esquea que a maioria das pessoas acessa Internet via Modem. Muitas produtoras de site
trabalham com links de alta velocidade e os profissionais acabam esquecendo que a maioria das pessoas
ainda acessam a Internet atravs de modens que no conseguem transferir mais de 3,3kb por segundo.
7) No complique a navegao. Voc tem poucos segundos para convencer o seu visitante a continuar
visitando o site. Deixe as opes de navegao na cara do visitante. Se o site possui muitas pginas
coloque uma busca interna de pginas por palavra-chave. As pessoas alm de acessarem via modem

13
Spam: Correio eletrnico "lixo", que consiste fundamentalmente em publicidade enviada contra sua vontade do usurio

tambm pagam PULSOS telefnicos durante o acesso e no tem muito tempo a perder no labirinto de
html's do seu site.
8) No comprometa a qualidade do seu site pela tentao de vender anncios. Encher o site de
banners animados atrapalha a visualizao da informao e cansa a vista do Internauta. O resultado
que o visitante vai embora rapidamente, no volta mais para o seu site e as dezenas de banners que voc
colocou no site no sero clicadas e conseqentemente seus anunciantes ficaro insatisfeitos
9) No use banners do tipo "ANUNCIE AQUI!". Banners desse tipo causam a impresso de que o site
est louco por dinheiro e que ningum visita aquele site. Um site bem visitado no precisa usar desses
artifcios para almejar anunciantes. Os anunciantes vo at voc, certos da qualidade do seu site.
10) No faa do seu site um festival de cores. Encontre a harmonia entre a sua marca e as cores
utilizadas no site. Cuidado com a escolha das cores dos textos para que no torne a leitura desagradvel.

OS FORMATOS DE IMAGEM MAIS USADOS
So dois os formatos de arquivos de imagem mais aceitos e utilizados nas pginas Web: GIF
(Graphics Interchange Format ou formato de intercmbio de grficos) e JPEG (Joint Photographic Expert
Group ou grupo conjunto de especialistas em fotografia). Uma diferena entre eles que os arquivos
JPEG podem ser de 24 bits (at 16,7 milhes de cores) e os GIF devem ser de 8 bits ou menos (no
mximo 256 cores).

Formato GIF: O formato GIF foi desenvolvido para compactar grficos e mais usado em figuras com
transparncias e pequenos grficos, que exijam qualidade (logotipos, ilustraes, etc). Esse formato
suporta at 256 cores. Existem duas classes de GIF: GIF87a e GIF89a. O GIF87a aceita transparncia e
entrelaamento, enquanto GIF89a aceita transparncia, entrelaamento e animao. Mas so mais
conhecidos pelos seus recursos: GIF comum, GIF transparente e GIF animado.

GIFs transparentes: Como todas as imagens feitas em computador so salvas em forma retangular, os
GIFs transparentes so usados para dar a iluso de formas diferentes de retngulos (formas irregulares).

GIFs entrelaados: Os GIFs entrelaados so aquelas imagens que aparecem inteiras
mas numa resoluo baixa, e aos poucos vo ganhado definio at sua forma original.
Esse efeito chamado de reenderizao progressiva e inserido na imagem na hora da
gravao, uma opo encontrada em vrios programas grficos na criao de arquivos
do tipo GIF89a. Esse efeito no afeta o tamanho e a velocidade geral do arquivo.
Dica: recomendvel no utilizar GIFs entrelaados em grficos que sejam importantes
na visualizao do seu site, como por exemplo, cones de navegao ou um image map
(mapa de imagem).

GIFs animados: Os GIFs animados so do tipo GIF89a, que permite que vrias imagens sejam
armazenadas em um nico arquivo. Ao visualizar o arquivo, as imagens so exibidas uma de cada vez,
produzindo uma animao. Para criar um GIF animado necessrio um programa especfico, sendo que
o prprio Photoshop capaz de cri-los.

Formato JPG ou JPEG: O formato JPG ou JPEG foi desenvolvido para compactar fotografias e mais
usado em fotos ou grficos grandes, porm esse formato apresenta pequenas perdas na qualidade da
imagem. Esse formato suporta um pouco mais de 16 milhes de cores.

Atualmente o formato PNG,

NAVEGADOR DE INTERNET
Na imagem ao lado
temos a imagem de um
navegador para Internet.
Neste caso temos o
Microsoft Internet Explorer,
verso 6 que acompanha o
Sistema Operacional
Windows XP Service Pack
2. Podem ocorrer algumas
variaes visuais com
relao ao navegador que
voc usar no Windows 98
ou anterior ou se voc optar
pelos novos navegadores
disponveis tais como o
Firefox, por exemplo.
Acompanhe abaixo a
descrio dos principais
botes disponveis na barra
de ferramentas do
IExplorer.

VOLTAR Navegar na WEB como se folhear um livro que vamos recebendo aos poucos via modem. Cada nova tela
que aparece uma pgina deste livro. O boto Voltar traz de volta, o contedo da pgina em que estvamos
anteriormente.

AVANAR o oposto do Voltar, mas devemos alert-lo que no possvel avanar rapidamente para pginas que
ainda no tenhamos recebido. por isso que muitas vezes o boto AVANAR fica desativado.

PARAR Interrompe a carga de uma pgina para o seu Navegador. Voc pode interromper a vinda de uma pgina por
uma srie de motivos: demora, contedo fora do contexto desejado, etc...

ATUALIZAR Tambm conhecido como boto RELOAD, este boto fora a recarga de toda a pgina reiniciando
todos os processos de transferncia de dados. Ao clicar em ATUALIZAR a o browser reinicia a carga da pgina onde
voc se encontra. Este ser um dos botes mais usados durante nosso curso de HTML.

PGINA INICIAL Carrega a pgina inicial programada em seu navegador. A pgina inicial sempre aquela que
aparece automaticamente quando seu navegador executado. Pode ser a pgina do seu provedor de Acesso ou
algum site de busca da WEB.

PESQUISAR Abre um menu contendo o acesso aos mais famosos sites de pesquisa da WEB. S funciona se o seu
computador estiver conectado na Internet.

FAVORITOS Gerencia um pasta contendo os seus sites preferenciais. Isso poupa tempo na hora da navegao,
permitindo acesso rpido sem a necessidade de digitar endereos manualmente.

HISTRICO Mantm um registro por data de todas as pginas/endereos que foram visitados. Clique no boto para
ver como funciona.

TELA CHEIA Modifica a aparncia do seu navegador de modo a ganhar espao til de tela. At se acostumar pode
ser complicado pois os botes perdem a descrio. Clique no boto TELA CHEIA e veja na prtica como este boto
afetar sua tela.

CORREIO Permite acessar as ferramentas de Correio Eletrnico, que acompanham o IExplorer, ou seja ativa o
Outlook Express, sem que voc tenha que sair do navegador.

A BARRA DE ENDEREOS

Este o local da tela reservado para voc digitar o endereo que deseja visitar. Por exemplo
http://www.salesiano-ata.br, que o endereo na Web do Colgio Salesiano. Veja a seguir como
funcionam os endereos WEB ou URLs.

URL UNIFORM RESOURCE LOCATOR
)
Todos os recursos disponveis na WWW tm um endereo nico. Este endereo chamado
de URL. Atravs de URLs torna-se possvel acessar os sites, arquivos disponveis para FTP e
uma srie de outros servios disponveis na rede mundial.

Protocolo Nome do Domnio Diretrio / Pgina Recurso / Pgina
http:// www.salesiano-ata.br /colgio /indice.html

Ou simplesmente: http://www.salesiano-ata.br/colegio/indice.html

O endereo exibido aponta para um local especfico dentro da Internet. Pode ser dividido em at 4
partes bsicas, o que no significa que nem todas as URLs tem que ser to completas. Muitas vezes
bastam duas ou trs partes para indicar aonde se quer chegar. Vamos analisar cada parte desta URL.

1 - Protocolo O acesso a sites sempre usa o protocolo http:// (hyper text transfer protocol / protocolo para
transferncia de hipertexto). http://www.salesiano-ata.br

2 - Nome do Domnio Componente do endereo de um computador conectado a uma rede e, por
extenso, Internet, que serve para sua identificao e localizao geogrfica. Os domnios representam
a organizao que os mantm.

3 - Diretrio Especifica em que diretrio ou pasta o recurso est situado no computador hospedeiro que
voc esta acessando. http://www.salesiano-ata.br/colegio

4 - Nome do Recurso o nome do recurso requerido. As pginas de WWW tm a terminao .html ou
.htm. Em geral o nome do recurso dispensvel. O arquivo index.html sempre localizado
automaticamente para abrir uma pgina web.

ERROS NA NAVEGAO
Quando voc estiver navegando voc eventualmente ver estas mensagens no seu navegador:

401 Unauthorized Erro que ocorre quando algum procura entrar numa pgina da
Web ou num servidor FTP que exige do usurio um registro ou login, com o seu
nome de usurio e a sua senha de acesso.

404 Not Found Erro que se apresenta quando, durante uma navegao pela
Internet, o usurio tenta abrir uma pgina ou arquivo que no se encontra disponvel
no servidor.

HTML HYPERTEXT MARKUP LANGUAGE
CARACTERSTICAS GERAIS DO HTML
Uma pgina HTML um documento composto de textos e cdigos especiais denominados Tags
que possibilitam a exibio de um documento na web. Mais do que informaes textuais, estes
documentos podem conter imagens, sons animaes e at vdeos.
Uma pgina WEB pode se ligar a outra por meio de links endereveis para locais dentro do seu
micro ou em qualquer parte do mundo.
O que chamamos de HTML basicamente uma linguagem simples que tem como princpio
fundamental formatar textos criando uma aparncia agradvel, e promover ligaes ou links com outras
pginas. Embora simples, no foge s regras clssicas que as linguagens de programao de
computador exigem, ou seja:

HTML requer digitao de cdigo fonte baseado em regras de sintaxe e formatos pr-definidos.

O cdigo fonte uma vez pronto interpretado pelo navegador que se encarregar de executar os
comandos colocados dentro de seu programa para acessar os recursos da WEB.
Para escrever um arquivo HTML, o mais simples dos editores disponvel pode ser usado. Ns
utilizaremos o Bloco de Notas (Notepad) por estar disponvel em todas as verses do Windows.

;
Para localizar o programa Bloco de Notas, caso ele no esteja no Iniciar, proceda da seguinte
forma:
Iniciar Executar Notepad <enter>

Uma vez que seu HTML for digitado, ele dever ser visualizado ou conferido em um browser ou
navegador. Atualmente o padro ficou sendo o Microsoft Internet Explorer que encontrado no desktop
de todos os computadores que possuem o Windows instalado.

AMBIENTE DE TRABALHO PARA PROGRAMAR EM HTML
Antes de comearmos a programar em HTML vamos arrumar nossa mesa de trabalho. Esta
preparao vai padronizar seu modo de trabalhar e evitar que voc se perca durante a execuo dos
exemplos propostos.
Para programar em HTML no necessrio que haja uma conexo com a Internet disponvel o
tempo todo, mas como j vimos a presena de um Navegador essencial. Crie uma pasta no desktop
14

do computador que voc for trabalhar. Nesta pasta devero ficar todos os arquivos que sero envolvidos
ou que constituiro seu site. Acompanhe abaixo como proceder para criar sua pasta no desktop:

;
Criando Pastas Posicione o apontador do mouse em algum local vazio do desktop. Clique com o
boto direito e na lista de opes escolha a opo Novo e em seguida na opo Pasta. Uma nova
pasta aparecer na sua tela. Digite um nome que identifique o contedo que ela ira armazenar.

<
Sempre que terminarmos uma aula prtica ou fizer um exerccio nos computadores da escola
lembre-se de atualizar seu disquete. Como temos uma pasta no desktop, basta selecion-la,
clicando sobre ela e ativar o menu de contexto (boto direito do mouse). Localize a opo Enviar
para... Escolha Disquete 3 (A)
Espere que a cpia seja finalizada e delete a pasta do desktop.

CRIANDO E SALVANDO UM HTML
Para se programar em HTML, voc dever inicialmente seguir a lista de procedimentos abaixo.
Quando voc pegar o jeito da coisa, poder criar sua prpria forma de trabalhar.
Abra sua pasta de trabalho.
Abra o programa Bloco de Notas.
Escreva as linhas que faro parte de seu cdigo fonte HTML.
Na primeira vez que estiver salvando o arquivo, use a opo Arquivo + Salvar Como, localizando

14
Desktop: a tela principal do Windows, ou seja o que fica na tela do computador quando no h nenhum programa em uso. A palavra
desktop significa carteira, escrivaninha ou mesa de trabalho.

a pasta criada para este fim;
Altere a opo Salvar Como Tipo disponvel em sua tela para opo Todos os Arquivos.
De um nome e no se esquea de colocar a extenso .HTML (ponto HTML)
Na primeira vez que for testar sua Home Page, alterne
15
at sua pasta de trabalho.
Um novo cone do Iexplorer contendo o nome de sua pgina deve ter aparecido.
D um duplo clique nele e o navegador ser aberto para que voc veja sua pgina.
Para alterar algo na pgina, alterne (Alt Tab) para Bloco de Notas e faa as modificaes.
o Uma alternativa usar no navegador a opo Exibir Cdigo Fonte.
o Um novo Bloco de Notas ser aberto. Para evitar confuses feche o anterior;
A partir da segunda gravao use agora a opo Arquivo - Salvar (atualiza o arquivo anterior).
Alterne (Alt Tab) novamente at seu navegador e clique no boto Atualizar.

evidente que quanto mais pginas simultneas voc estiver criando, mais Blocos de Notas
estaro abertos, mas no abra jamais um navegador para cada pgina, pois em se tratando de um
programa razoavelmente pesado ele pode deixar sua mquina lenta para trabalhar e futuramente vai
atrapalhar a gerao e manipulao de imagens.

Aps gravar seu arquivo, abra ou alterne at sua pasta e veja com ele ficou. Observe os cones
acima. Caso seu arquivos esteja com o cone do IExplorer (pode estar sendo substitudo pelo cone de
outro navegador que voc tenha instalado), voc gravou um HTML de maneira correta. Clicando sobre
seu arquivo para abri-lo, ser carregado o navegador padro.
Se o cone parece um bloco de notas, voc pode ter esquecido um dos passos acima. Verifique.
Clicando no caderninho para abri-lo voc ver que apenas o bloco de nota ser carregado.

15
Alternar: trocar entre dois ou mais programas em uso simultneo no Windows. Use o mouse na barra de tarefas ou a combinao de
teclas ALT TAB.
Certifique se de a opo Salvar em est exibindo
o nome da sua pasta. O nome da pasta deve
identificar o contedo.
Use a opo Salvar Como apenas na primeira
vez que for gravar cada arquivo. Da segunda
gravao em diante, use apenas Salvar.
Nome do arquivo sempre com letras minsculas e
extenso forada deve ser alterada para .html
Sempre mude o tipo de arquivo para
Todos os arquivos, caso contrrio ser
gravado como texto comum. Use tambm
para programas em Pascal.


ESTRUTURA DE UM DOCUMENTO HTML
Um arquivo HTML construdo a partir de um cdigo fonte, composto de texto puro em formato
ASCII
16
. Analogicamente podemos pensar em uma receita culinria que quando interpretada pelo
cozinheiro torna-se uma iguaria a ser degustada.
Como escritores do cdigo fonte, ou criadores da receita cabe a ns determinar exatamente o que
desejamos que um site seja. Um programa HTML dividido em trs partes bsicas : a estrutura
principal,o cabealho e o corpo do programa.

ESTRUTURA PRINCIPAL
CABEALHO
CORPO DO
DOCUMENTO
<HTML>
<HEAD>
</ HEAD>
<BODY>
Seu programa vai aqui
</ BODY>
</ HTML>

Todo programa HTML deve comear com o comando <HTML> e ser encerrado com o comando
</HTML>. A rea de cabealho opcional e delimitada pelo par de comandos <HEAD> </HEAD>.
A maioria dos comandos ser colocada na rea corpo do documento formado pelos comandos
<BODY> </BODY>.

O HTML BSICO
Chamamos de HTML bsico aquele que contm todas as linhas obrigatrias e essenciais para o
bom funcionamento de sua pgina web. Todas as tags apresentadas aqui aparecem uma nica vez em
cada arquivo HTML, No futuro, este contedo ser estendido, mas em princpio, considere seriamente
decorar as linhas abaixo:

<HTML>
<HEAD>
<TITLE> Aqui voc vai colocar o ttulo da sua pgina </TITLE>
</HEAD>
<BODY>
Aqui voc construir a sua pgina web.
Teremos aqui uma seqncia infinita de
tags que daro o formato que voc deseja
para sua pgina.
</BODY>
</HTML>

TAGS HTML
Os Tags consistem do sinal <, (menor que), seguida pelo nome da instruo ou comando e fechada
por > (maior que). De um modo geral, as Tags aparecem em pares, por exemplo, <H1> Cabealho
</H1>. O smbolo que termina uma determinada marcao igual quele que a inicia, precedido por uma
barra. H excees essa regra de pares de tags. A tag que indica um final de pargrafo <P> no
necessita de uma correspondente </P>. A marcao que indica quebra de linha <BR> tambm no
precisa de uma correspondente </BR>

Incio do Tag

Contedo sobre o qual o comando dever agir... Fim do Tag
<H1> Digite sua frase aqui </H1>

16
ASCII: (American Standard Code for Information Interchange) Conjunto de normas para a representao de caracteres por meio de
nmeros binrios. Este sistema amplamente utilizado em informtica, telecomunicaes, programao, etc.

ANTES DE COMEAR...
Fique atento a todas as caixas com instrues e exemplos. Elas aparecero da seguinte forma:

Identificao do exemplo
Instrues Gerais de como execut-lo, alguma dica ou comentrio.
Mostra o que voc dever digitar no bloco de notas,
sempre atento aos trechos que por ventura aparecerem
originrios de exemplos anteriores. (tentarei evitar)
A fonte usada para est caixa ser Courier New.
Se aparecerem contedos em negrito aqui, para
realar o que a imagem ao lado realmente est exibindo
Mostra a imagem do que ser mostrado no
navegador em sua tela. A comparao de
resultados permitir que voc mesmo
verifique se acertou ou errou ao testar os
exemplos.

INICIANDO O ESTUDO DAS TAGS HTML
Crie uma pasta chamada Exemplos SeuNome. Todos os exemplos devem ser armazenados
dentro dela. Mantenha-a sempre atualizada e sincronizada com a cpia do seu computador pessoal.

Exemplo: Iniciando um novo HTML e primeiras Tags de formatao.
Instrues: Inicie um bloco de notas vazio e grave na sua pasta com o nome de exemplo1.html
<HTML>
<HEAD>
<TITLE> Minha Primeira Pgina HTML </TITLE>
</HEAD>
<BODY>
<H1>CABEALHOS </H1>
<H1> Exemplo: Cabealho I </H1>
<H2> Exemplo: Cabealho II </H2>
<H3> Exemplo: Cabealho III </H3>
</BODY>
</HTML>

<HTML>: Identifica o incio de um documento HTML. Deve ser fechado com </HTML> que ser sempre a
ltima linha do seu arquivo.

<HEAD>: Identifica a rea reservada para entre outras coisas o ttulo da pgina. Deve ser fechado com o
comando </HEAD>. A tag <Title> deve sempre estar entre as duas tags <Head> e sua funo colocar o
ttulo de identificao do site. Veja a imagem abaixo o que faz <Title>:

<BODY>: Determina onde comea o corpo do documento. Deve ser fechado ao final da HTML com
</Body> sempre antes de </HTML>.

h
As tags HTML que tem <INICIO> e </FIM> devem ser respeitadas. Uma tag no fechada faz
com que toda a pgina seja afetada pela tag deixada aberta. Se deixar um <H1> aberto, todo
o documento ser mostrado em <H1> na tela do seu navegador.

TTULO DA PGINA
Todo documento em HTML deve possuir um ttulo. O ttulo aparece na barra de identificao na
janela do navegador em uso e no no corpo da pgina em si. interessante que o ttulo descreva ou
identifique claramente o contedo do documento que o usurio est abrindo. Sites de empresas tendem a
colocar o prprio nome da empresa, seguindo de um slogan ou frase promocional.

SINTAXE
<TITLE> O ttulo desejado </TITLE>


CABEALHOS
So usados para ttulos e subttulos do contedo textos de uma pgina. A linguagem HTML possui
seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1 o de maior destaque. Cabealhos so
exibidos em letras maiores e em negrito. Ao definir o tamanho de um cabealho, voc no est definindo
o tamanho da letra mas sim que o texto coberto pela tag dever aparecer com maior destaque que o resto
do documento.
Sempre que voc usar uma tag de cabealho, tudo que vier aps o encerramento deste ser
colocado automaticamente em uma nova linha da tela.

SINTAXE
<Hn> Cabealho Desejado </Hn>

Exemplo: Provando que <Hn> </Hn> provoca quebra automtica aps o uso.
Instrues: Continue no mesmo arquivo exemplo1.html
<H1> CABEALHOS </H1>
<H1> Na mesma Linha -> </H1> Continuando

Note que acima escrevemos a palavra Continuando na mesma linha de </H1>. Mas na tela o
resultado outro, devido a quebra automtica de linha.

PARGRAFOS
A marcao <P> utilizada para definir o fim e incio de um novo aproximadamente uma linha em
branco entre cada um deles. O HTML no reconhece quebra de linha, colocado com a tecla ENTER do
bloco de notas. Dentro do HTML existe mediante o uso da tecla <P>.

SINTAXE
Pargrafo de Texto <P> Incio de um novo pargrafo

Exemplo: Provando que <Hn> </Hn> provoca quebra automtica aps o uso.
<H1> Pargrafos <H1>
Digite este pargrafo exatamente
como v aqui, apertando Enter para
quebrar as linhas manualmente. <P> Veja o que
esta marcao P fez com a nossa linha <P>
Estranho no ? <p>
A cada tag desta um novo pargrafo
ser adicionado <p>
Olha s
isso aqui
como aparece no
seu Navegador.
</BODY>
</HTML>

Observando o exemplo acima, podemos afirmar que a maneira que voc digita o texto dentro do
bloco de nota irrelevante, uma vez que esta formatao manual ser sempre ignorada pelo navegador
em uso.

QUEBRA DE LINHAS
A marcao <BR> provoca uma quebra de linha sem acrescentar a linha extra entre elas como faz
a tag <P>. Muitas vezes algumas confuses so geradas pelo uso do comando <P> e do <BR>. Veja a
diferena do uso de <P> e <BR> nos exemplos a seguir:

SINTAXE
Texto / Frase <br>


Exemplo: Como funciona a tag <BR> para quebra de linhas. Comparar com exemplo <P>
<H1> QUEBRA DE LINHAS </H1>
Miyasaki
M
i
y
a
s
a
k
i
<br>M<br>i<br>y<br>a<br>s<br>a<br>k<br>i<br>

A partir deste exemplo coloque uma linha composta de quatro <BR> entre um exemplo e outro.
Confira na listagem final da pgina

LISTAS NO NUMERADAS
Criar listas de itens no numeradas. Este um novo tipo de tag HTML. A tag <UL> funciona em
blocos e necessitam da tag auxiliar <LI> para realizar seu trabalho. Ao abrir o bloco com a tag apropriada
voc dever usar uma seqncia de linhas apoiadas pela segunda tag <LI>, que complementa a primeira.
1) Comece o bloco que ser afetado com a marcao de incio de lista: <UL>
2) Insira a marcao <LI> antes de cada item da lista. No precisa usar </LI>.
3) Encerre com a marcao de fim de lista: </UL>.

SINTAXE
<UL> Incio de Bloco
<LI> 1 Item do bloco
<LI> 2 Item do bloco
<LI> N Item do bloco
</UL> Fim do Bloco

Exemplo: Usando comando de blocos. Construindo lista no numerada.
<H1> LISTA NO NUMERADA </H1>
<H2> Relao do que aprendemos: </H2>
<UL>
<LI> Como comear um Home Page
<LI> Colocar ttulo
<LI> Colocar cabealhos
<LI> Formatar pargrafos em textos
<LI> Quebra de Linhas
<LI> Lista no numerada
</UL>

LISTAS NUMERADAS
Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto porque utiliza
marcao <OL> ao invs de <UL>. Vamos ao exemplo:

Exemplo: Usando comando de blocos. Construindo lista numerada.
<H1> LISTA NUMERADA </H1>
<H2> O que ainda falta aprender: </H2>
<OL>
<LI> Estilos de Texto
<LI> Texto Pr Formatado
<LI> Criar Links
<LI> Colocar Imagens de Fundo
<LI> Tabelas
<LI> Frames
</OL>


LISTA DE DEFINIES
Uma lista de definies consiste em alternar um termo e uma definio. Veja no visual do exemplo,
como isso funciona. Muito comuns em livros que fazem citaes constantes de trechos de outros autores
ou para chamar a ateno do leitor para algo realmente importante.

Exemplo: Comando de Bloco Lista de Definies
<H1> LISTA DE DEFINIES </H1>
<H2> Wireless </H2>
<DL> <DD>
<P>Em portugus significa "sem fio". um sistema
de comunicao que utiliza ondas de
radiofreqncia, ultra-som ou raios
infravermelhos (IV) para trocar dados entre
dispositivos.
</DL> </DD>
<DL> <DD> <P>Est se tornando cada vez mais
popular o uso desse sistema para a transferncia
de dados entre o computador e as cmeras
digitais, os PDAs, as calculadoras, as agendas
eletrnicas, etc.
<DL><DD> <P>Na Internet, o termo utilizado para
indicar que a transmisso de informao se efetua
prescindindo dos cabos. o caso dos celulares
com sistema WAP, por exemplo, ou das conexes
domiciliares ou comerciais Internet atravs de
antenas de rdio bidirecional. <P>
</DL></DD></DL></DD>

As entradas <DL> e <DD> podem conter vrios pargrafos, separados por <P>, listas, ou outras
definies. A marcao <DD> pode ser utilizada fora de uma lista de definies como se fosse uma
tabulao (insere um espao no incio da frase).

Exemplo: Usando apenas a tag <DD> para fazer tabulaes de texto.
<H1> DEFINIES PARA TABULAR </H1>
<DD> Professor Fbio Miyasaki
<DD><DD> Professor Fbio Miyasaki
<DD><DD><DD> Professor Fbio Miyasaki
<DD><DD><DD><DD> Professor Fbio Miyasaki

LISTAS INTERCALADAS
As listas podem ser encadeadas ou intercaladas, produzindo resultados interessantes.

Exemplo: Comando de Bloco Criando listas intercaladas
<H1> LISTAS INTERCALADAS </H1>
<UL>
<LI> <H3> Cursos Tcnicos do Salesiano</H3>
<UL>
<LI> Informtica
<OL>
<LI> 1 Info
<LI> 2 Info
<LI> 3 Info
</OL>
<LI> Mecatrnica
<OL>
<LI> 1 Meca
<LI> 2 Meca
<LI> 3 Meca
</OL>
<LI> Enfermagem
</UL>
</UL>


TEXTO PR-FORMATADO
A marcao <PRE> delimita uma rea de texto onde o contedo ser apresentado exatamente da
forma como foi digitado. uma forma de preservar o formato de um texto que deve ser exibido
exatamente da maneira que voc digitou no bloco de notas. Costuma poupar tempo de formatao com
tags. Mas no deve ser usado com abuso.

Exemplo: Comando de Bloco Texto Pr Formatado
Instrues: Continue no mesmo arquivo Exemplo1.html
<H1> TEXTOS PR-FORMATADOS </H1>
<H3>
<PRE>
*******************************
* "e. "$$$. *
* ^$$bc "$$b *
* ^"*$$c$$F * C
* ^"3$ * O
* ..... .z$$$$"$. * E A
* .d$$$$$$$$$$$$$$$$$$% * L S A
* J$$$$$$$$$$$$$$$$$" * H C R
* 4$$$$$$$$$$$$$$$$$$ * O I T
* $$$$$$$$$$$$$$$$$$ * I
* *$$$$$$$$$$$$$$$$" * E
* . $$$$$$$$$$$$$$$F * M
* '$$$$$$$$$$$$$" *$. *
* """"""""""""" """" *
*******************************
</PRE>
</H3>

FORMATANDO TEXTOS
A linguagem HTML permite que se apliquem estilos especficos a palavras ou sentenas.
A seguir vamos mostrar dois exemplos para sua compreenso das tags.
O exemplo ser importante referncia para trabalhos futuros.

Exemplo: Formatao de Texto Caracteres Especiais
<H1> FORMATANDO TEXTOS </H1>
Comum <B> Negrito </B> <br>
Comum <I> Itlico </I> <br>
Comum <U> Sublinhado </U> <br>
Comum <Strong> Strong </Strong><br>
Comum <TT> Typewriter </TT> <br>
Comum <BIG> Big </BIG> <br>
Comum <SMALL> Small </SMALL> <br>
Comum <SUP> Sobrescrito </SUP> <br>
Comum <SUB> Subscrito </SUB> <br>

<H2> USANDO FORMATAO EM TEXTOS </H2>
Testando comando de formatao de <B>
palavras </B> colocadas em frases. <p>
At onde os testes mostram funcionam <U>
muito bem </U><P>
No dever haver <B><I> problemas </I></B>.
<P>
A formula da gua : <B> H<SUB>2</SUB>O <P>
</B>
A casa tem 300 M<SUP>2</SUP> <P>


O USO DE CORES
Os navegadores disponibilizam vrias cores para serem usados como fundo ou texto. Cada cor
composta por uma combinao dentro do padro RGB (Red-Green-Blue) que composto por um
conjunto de trs valores entre zero e 255 sendo que cada valore correspondem respectivamente a
intensidade do Vermelho (R). Verde (G) e finalmente Azul (B).
Ao invs de criarmos combinao de cores no formato 134,000,333, o conjunto de nmeros
convertido para a base hexadecimal que usa os valores de 0 a 9 mais as letras de A at F.
Existe a sua disposio no site Professor Fbio (www.professorfabio.com.br) duas tabelas com as
combinaes de cores para consulta. Para as aulas, usaremos ma tabela de cores abaixo que alm do
valor hexadecimal pode ter a cor representada pelo seu nome em ingls.

NOME EM
INGLS
CDIGO
HEXADECIMAL
NOME EM PORTUGUS
Aqua
#70DB93
Verde Claro
Blue
#0000FF
Azul
Black
#000000
Preto
Cyan
#00FFFF
Verde Azulado
Fuchsia
-o-
Rosa-Choque
Gray
#C0C0C0
Cinza
Green
#00FF00
Verde
Lime
#32CD32
Verde-Limo
Maroon
#8E236B
Bordo / Violeta
Navy
#23238E
Azul Marinho
Olive
-o-
Verde Oliva
Red
#FF0000
Vermelho
Silver
#E6E8FA
Prata
Teal
-o-
Verde-Azulado Escuro
White
#FFFFFF
Branco
Yellow
#FFFF00
Amarelo

%
A partir deste ponto, em todos os locais onde aparecer uma instruo do tipo tag = #RGB
substitua a sigla RGB pela cor desejada. Ao usar o cdigo hexadecimal de cor, o sinal #
(sustenido) deve ser mantido. Exemplos:
Atribuindo cor usando o nome da cor: <BODY BGCOLOR=YELLOW>
Atribuindo cor usando o cdigo da cor: <BODY BGCOLOR=#FFFF00>
ESTENDENDENDO A TAG <BODY>
A tag <Body>, como muitas outras que vamos encontrar, possui subcomandos que para
funcionarem devem ser adicionados dentro dos sinais <>. Estes subcomandos estendem a capacidade de
atuao da tag, atribuindo novas habilidades que antes no eram usadas.
Vale lembrar que todo contedo do chamado HTML bsico, s pode aparecer uma vez em cada
arquivo, o mesmo vale para a tag <Body>.
Os subcomandos que vamos estudar agora so:

<Body Bgcolor=#RGB>
Permite modificar a cor de fundo do arquivo HTML onde a tag <Body> for alterada. Cuidado para
no usar cor de fundo que canse muito a vista. (cores brilhantes).

<Body Text=#RGB>
Permite modificar a cor da letra de todo o texto escrito dentro do arquivo HTML onde a tag
<Body> for alterada. Cuidado para no usar cor de letra que cause muito contraste com a cor de
fundo escolhida.

Acima vimos dois subcomandos da tag <Body>. Para combinar os dois subcomandos em uma
nica tag <Body> basta escrev-los sequencialmente antes de fechar o sinal maior que >. Assim:

<Body BgColor=#RGB Text=#RGB>

Lembre-se de substituir o cdigo #RGB pelo nome ou valor da cor desejada.


Exemplo: Mudando cor de fundo e da letra atravs de subcomandos de <Body>
Instrues: Altere a tag <Body> do arquivo exemplo1.html que estamos usando.
<HTML>
<HEAD>
<TITLE> Minha Primeira Pgina HTML
</TITLE>
</HEAD>
<BODY BGCOLOR=#0000FF TEXT=WHITE>
<H1>CABEALHOS </H1>

TRABALHOS
Pesquisa
Acesse o site www.registro.br e descubra as respostas abaixo. Elabore um documento usando o
programa Microsoft Word usando papel A4 e fonte Arial ou Times News Roman com tamanho 12. Esta
pesquisa pode ser feita em duplas e ser considerada como primeiro trabalho do trimestre. No entregue
um trabalho em formato perguntas e resposta. Elabore um texto explicativo que ao ser lido as resposta s
perguntas possam ser encontradas.
1) O que um domnio?
2) Como se registra um domnio?
3) Quanto custa registrar um domnio?
3) Os tipos de domnios mais comuns nos sites do Brasil so .com e .com.br. Existem outros?
Quais so e para que servem?

Trabalho Prtico 1
Releia os contedos das pginas 7 a 10 e cumpra as tarefas abaixo:
Imagine um site do qual voc gostaria de ser o autor. Cumprindo as teorias explicadas nas pginas
solicitadas voc dever:
a) Elaborar uma lista de tpicos para o seu site;
b) esquematizar um organograma de como as informaes do seu site sero acessadas;
c) Usando lpis de cor, canetinha, rgua, compasso e outros recursos no eletrnicos, desenhe e
organize de acordo com o que foi estabelecido nos itens a e b o Storyboard do seu site.
I. O nmero de pginas vai depender da quantidade de links e de pginas que devero ser
abertas;
II. No escreva contedos, apenas os ttulos principais e demonstre com ser a diagramao
da sua pgina;
III. Uma vez com Storyboard pronto, dever ser possvel ter uma viso geral do seu site
funcionando;
IV. Lembre se de posicionar imagens, cores que sero usadas, estilo de diagramao, etc...

Trabalho Prtico 2
Entregar em disquete uma cpia do arquivo exemplo1.html, fazendo as seguintes alteraes:
Faa seu nome e srie aparecerem no ttulo do navegador;
Onde estiver o nome ou sobrenome do professor, coloque o seu; Se seu nome no tiver letras
suficientes para o exemplo, coloque o nome completo;
Substitua locais onde h textos longos por outro texto qualquer a sua escolha desde que a
aparncia final fique a mesma. (pargrafos de tamanho similar ou maiores)
No altere os exemplos para as tags <P>, <PRE> e os exemplos Formatando textos e Usando
formatao em textos.


Trabalho Prtico 3
Entregar em disquete juntamente com sua verso do exemplo1.html o seguinte arquivo html, que
deve ser gravado com o nome de currculo1.html. Este arquivo deve ser criado usando tanto quando
recursos forem possveis e devem conter os tpicos abaixo, personalizados para as suas preferncias e
biografia. Acompanhe nos screenshots
17
abaixo:

Primeira parte do seu exerccio. Escrever seu nome grande usando uma letra qualquer e a tag <PRE>.
Escrever seus dados pessoais de modo que a aparncia na sua tela fique similar a mostra acima.

Fale sobre sua formao escolar, cursos que fez e o que j usa bem de informtica.
Repare bem o formato das listas acima. As suas devem seguir o mesmo modelo.

17
Screenshot: Imagem de uma tela registrada para ser mostrada ou arquivada como prova de algum evento acontecido.


Aqui escolhi trs temas para conhec-los melhor. Livros, Filmes e Msicas. Aps cada uma das lista siga as
instrues da tela e aplique os efeitos de formao de texto quando sugerido.

Termine seu trabalho procurando e colando no seu HTML uma ASCII arte a sua escolha.
E por fim use o final do HTML para dar sugestes, e comentar os seus primeiros dias no Colgio Salesiano.

USANDO IMAGENS
ORGANIZANDO IMAGENS
Para qualquer coisa funcionar bem, quer seja uma casa, uma empresa ou um site, organizao
fundamental. Antes de voltarmos a digitar htmls, vamos estabelecer critrios para facilitar o acesso de
imagens atravs da sua pgina web.
O ideal, no seu computador, a organizao um sistema de pastas que funcionar como um
Banco de Imagens, onde voc possa armazenar imagens que julgar interessante ou que possa ser de
alguma utilidade em algum trabalho. Mas criar uma pasta e ir colocando tudo o que encontrar de imagens
l dentro no resolve o problema. Alm da pasta principal, O melhor criar sub-pastas categorizadas de
modo que as imagens fiquem agrupadas por similaridade, tipo ou funo.
Da mesma forma, sites necessitam de uma organizao similar. Sempre que for criar um site, crie
dentro da pasta principal dele, onde ficam os arquivos.html, uma pasta de nome imagens com letra
minscula. A funo desta pasta facilitar o acesso s imagens sem que elas fiquem misturadas aos
arquivos html do site. Quando fazemos isso, estamos criando um Path ou caminho para que o html
encontre as imagens que voc deseja usar:
1
Banco de Imagens
1
Site

1
JPGs

1
imagens

1
Fotos Escola

1
fotos

1
GIF Animados

1
outras

1
Tcnicas

1
Botes

PASTAS IMAGENS: MELHOR CONFIGURAO
Aps organizao das pastas, interessante configur-las de modo que facilite nossa escolha de
imagens, permitindo principalmente ver as imagens e antecipadamente saber qual o nome completo e a
extenso
18
que ela possui. No Windows as extenses de arquivos comuns no so mostradas pelo, ou
seja, uma imagem de nome Sale.jpg torna-se apenas Sale. Saberemos que uma imagem se estivermos
vendo miniaturas, conhecermos o cone anexado a ela ou vendo o tipo do arquivo em detalhes.
Ao escrever a tag html especfica no podemos adivinhar a extenso do arquivo. Temos que
escrever a tag corretamente, caso contrrio, a imagem no aparecer.

EXIBINDO IMAGENS EM MINIATURA
Vamos aprender a fazer por menu de contexto (boto direito do mouse):
Abra a pasta de imagens que deseja ver em miniaturas;
Clique com o boto direito e abra o menu de contexto;
Localize a opo Exibir e no menu escolha Miniaturas;

EXIBINDO EXTENSO DE ARQUIVOS
Na mesma pasta em que exibiu as miniaturas, faa o seguinte:
Procure no menu principal da pasta a opo Ferramentas Opes de Pasta;
Localize a guia Modo de Exibio;
Em Configuraes Avanadas, localize a opo Ocultar extenses do tipos de arquivos
conhecidos;
Se a caixa de seleo estiver , desmarque-a e veja o que ocorre em sua pasta;

18
Neste caso extenso parte do nome do arquivo, localizado a direita do ponto, que em geral identifica o tipo de cada arquivo. Extenses
que ainda vamos ver muito nesse cursos so .jpg, .gif, .html ou .htm, etc

SALVANDO IMAGENS
Hoje para a grande parte das pessoas usurias de internet, j rotina salvar imagens a partir dos
sites visitados. Antes de pegar imagens, crie a pasta imagens dentro da pasta Exemplos. Vai ser a que
vai guardar as imagens que vamos usar.
Acesse o site www.professorfabio.com.br e procure a seo Banco de Imagens. Nessa seo
voc encontra algumas imagens que poder usar como os logotipos Miyasaki entre outras. Alm de
algumas imagens categorizadas como Background para sites, Gifs Animados e Jpgs diversos.
Veja a relao abaixo e salve imagens solicitadas na pasta que criamos. Faa assim:

Clique com o boto direito do mouse sobre a
imagem que deseja;
Localize a opo Salvar imagem como...
o Se a opo no aparecer o que pode
estar acontecendo :
A imagem no carregou
completamente;
A imagem est como plano de
fundo. Use Salvar plano de
fundo como...
O site possui algum sistema de
bloqueio que impede a captura
da imagem;
Localize a pasta imagens criada dentro da pasta Exemplos;
Observe se o nome da imagem condiz com o que ela representa;
o Se necessrio troque o nome da imagem. Evite nomes longos ou codificados;
Clique em Salvar;

A partir do site professorfabio, coloque os seguintes arquivos dentro de Exemplos\imagens
1. Logotipo do Salesiano e Logotipo Miyasaki
2. Salve os Backgrounds: Assoalho, Mrmore e Isopor;
3. Salve os Gifs Animados: Lmpada, Radar e Livro;
4. Salve o JPG: Lupa;
5. Confira os arquivos na imagem abaixo:

IMAGEM DE FUNDO NO HTML
Para colocar uma imagem de fundo ou Background em uma pgina WEB necessrio que a
imagem seja adequada para essa funo. Das imagens acima, as nicas que foram feitas para isso so
Mrmore, Assoalho e Isopor, pois quando elas forem multiplicadas e colocas uma ao lado da outra, ficam
semelhantes a uma imagem nica, sem emendas.
As outras imagens so inadequadas para Background, pois so compostas por vrias cores fortes,
que tendem a dificultar a leitura de textos. GIFs animados so totalmente descartados para essa funo.
Hoje, o que colocamos como Background, so layouts, desenvolvidos especialmente para cada
site. Faremos isso no segundo ano do curso.
No recomendamos o uso de Wallpapers
19
como fundo de site, para evitar lentido na carga do
mesmo. Futuramente aprenderemos a fatiar imagens grandes para facilitar sua publicao.
Para colocar fundo no site, vamos adicionar mais uma opo tag <Body>.

19
Wallpapers ou papel de parede. Imagens grandes, em geral grandes usadas para enfeitar o Desktop.

Da ltima vez que usamos nosso exemplo1.html, ele foi deixado com cor de fundo azul e letra
branca. Quando usamos backgrounds, a cor de fundo deixa de ter efeito, mas no necessrio retirar a
opo BgColor da tag <BODY> do seu HTML. at interessante, pois at a imagem aparecer no fundo
da tela assume a cor que estiver configurada.

SINTAXE
<BODY BACKGROUND=caminho\imagem.ext>

Onde:
caminho: local onde esto as imagens. Esse tipo de caminho indica a pasta imagens e o
que d menos problemas para publicar na web. O caminho sempre deve indicar onde a
imagem ser encontrada, partindo do local onde est o arquivo html que a usa.
imagem.ext: o nome completo da imagem que vai ser usada como fundo. necessrio
saber o nome e a extenso do arquivo para funcionar adequadamente.

Exemplo: Usando imagem de fundo inadequada. Mude a opo <BODY TEXT> para cor preta.
Instrues: Faa essas alteraes na tag Body do exemplo1.html.
<BODY BACKGROUND=imagens\miyasaki200.jpg
BGCOLOR=#0000FF TEXT=#000000>

<H1>CABEALHOS </H1>

Note que no exemplo a cima a legibilidade do texto ficou comprometida. Dificilmente haver uma
cor que deixe o resultado do trabalho bom o bastante para ser considerado profissional. Compare com o
prximo exemplo:

Exemplo: Usando imagem de fundo adequada.
Instrues: Faa essas alteraes na tag Body do exemplo1.html.
<BODY BACKGROUND=imagens\isopor.jpg
BGCOLOR=#0000FF TEXT=#000000>

<H1>CABEALHOS </H1>
<H1> Exemplo : Cabealho I </H1>
<H2> Exemplo : Cabealho II </H2>
<H3> Exemplo : Cabealho III </H3>

Neste segundo exemplo, temos um efeito diferente. Coloque outras cores para o texto para
experimentar a qualidade da legibilidade.

COLOCANDO IMAGENS
Se o ditado for verdade, e uma imagem valer mais do que mil palavras, ento precisamos aprender
como a colocar este tipo de arquivo para animar um pouco a aparncia de nossas pginas. Colocar
imagens fcil, desde que a imagem seja adequada ao trabalho e esteja armazenada em um path de
acesso facilitado. (pasta imagens dentro da pasta do site).
Antes de encher sua pgina com imagens, lembre-se que ao transmitir a imagem pela Internet a
velocidade em que o site carrega pode cair dependendo do tipo de acesso. Quanto mais imagens forem
mostradas ao mesmo tempo, mais lento o carregamento da pgina.
Outro detalhe importante que quando usamos Background (imagem ou cor), as imagens JPGs
com fundo branco, mantm o fundo. As nicas imagens que so parcialmente transparentes so alguns
tipos especiais de Gifs Animados. Se for conveniente, podemos estudar isso como um assunto fora desta
apostila.

SINTAXE
<IMG SRC=caminho\imagem.extenso WIDTH=tamanho BORDER=valor


Onde:
Width: tamanho o tamanho que a imagem deve ter quando aparecer na sua pgina. O
parmetro WIDTH pode ser usado como um nmero que representa quantidade de pixels
20

ou em porcentagem de ocupao da tela. Neste ltimo caso adicione um sinal de % (por
cento) ao lado do valor desejado. Para conhecer o tamanho de uma imagem faa:
Abra a pasta imagens e localize a imagem miyasaki200.jpg que tem 200 pixels;
Clique sobre ela com o boto direito e no menu de contexto encontre a opo
Propriedades;
Clique na guia Resumo e se necessrio no boto Avanado;

Border: Valores acima de zero, mostram uma borda ao redor da imagem. um recurso
pouco usado. O valor da borda informado em pixels e deve ser sempre um nmero inteiro.

Veja os exemplos para melhor compreenso:

Exemplo: Inserindo imagens com Width em pixels. Sem Borda.
Instrues: Adicione esse exemplo no final de exemplo1.html. Antes de fazer eu retirei a imagem de
fundo para facilitar a impresso. Fundo = branco e texto = preto. (Configurao padro)
<H1> INSERINDO IMAGENS </H1>
<H2> TAMANHO EM PIXELS SEM BORDA </H2>
<IMG SRC=imagens\miyasaki200.jpg>
<IMG SRC=imagens\miyasaki200.jpg WIDTH=50>

1 Imagem: tamanho normal, sem ajustes ( o uso mais recomendado);
2 Imagem: tamanho ajustado em 50 pixels. H distores.
3 Imagem: tamanho ajustado em 100 pixels. H distores.
4 Imagem: tamanho ajustado em 150 pixels. H muitas distores.

Exemplo: Inserindo imagens com Width em porcentagem. Sem Borda.
Instrues: Adicione esse exemplo no final de exemplo1.html.
<H2> TAMANHO EM PORCENTAGEM SEM BORDA </H2>
<IMG SRC=imagens\miyasaki200.jpg WIDTH=10%>

1 Imagem: tamanho ajustado para ocupar 10% da largura da tela. H distores.
2 Imagem: tamanho ajustado para ocupar 20% da largura da tela;
3 Imagem: tamanho ajustado para ocupar 30% da largura da tela; H distores.

Experimente acrescentar uma nova linha nos exemplos acima, configurando o ajuste para 100% e
veja o que ocorre na sua tela.

Exemplo: Inserindo imagens em tamanho padro com variao na espessura da borda.
<H2> TAMANHO PADRO COM BORDA </H2>
<IMG SRC=imagens\miyasaki200.jpg BORDER=5>

Note como valor de Border afeta cada imagem. Para as imagens que no apresentaram borda nos
exemplos anteriores, foi omitido o parmetro Border. para forar remoo de bordas, use Border = 0

20
Pixel: Forma reduzida de PICture ELment ou Elemento de Imagem. Um pixel corresponde ao menor elemento de composio de
imagem na tela do monitor. A quantidade de pixels define o tamanho de uma imagem.

OPES DE ALINHAMENTO PARA IMAGENS E TEXTO
Muitos se perguntam como se faz para alinhar uma imagem em relao ao texto. Na verdade, sem
uso de recursos CSS
21
, a nica maneira de posicionar uma imagem com textos em volta (como em
jornais e revistas) usando tabelas.
Por hora vamos conhecer mais uma opo que pode ser usado no momento pelas tags <P> e
<IMG SRC>.

ALINHAMENTO DE PARGRAFOS
Este tipo de alinhamento afeta textos, imagens e qualquer elemento que possa ser inserido aps a
Tag <P> (praticamente tudo).

SINTAXE
<P ALIGN=opo_de_alinhamento>

Onde: opo_de_alinhamento pode ser Center (Centro), Left (Esquerda), Right (Direita) e Justify
(Justifica apenas textos). Acompanhe alguns exemplos.

Wireless: Em portugus significa "sem fio". um sistema de
comunicao que utiliza ondas de radiofreqncia, ultra-som ou
raios infravermelhos (IV) para trocar dados entre dispositivos.

Exemplo: Usando alinhamento de pargrafos para textos e imagens.
Instrues: Adicione esse exemplo no final de exemplo1.html. Ao digitar troque Substitua o Texto pelo
contedo da caixa acima. Textos longos ajudam a enxergar o resultado obtido.
<P ALIGN=CENTER> <H1> USANDO ALIGN PARA TAG P </H1>
<P ALIGN=CENTER> Substitua o Texto
<P ALIGN=RIGHT> Substitua o Texto
<P ALIGN=LEFT> Substitua o Texto
<P ALIGN=JUSTIFY> Substitua o Texto
<P ALIGN=CENTER> <IMG SRC=imagens\miyasaki200.jpg Width=100>
<P ALIGN=RIGHT> <IMG SRC=imagens\miyasaki200.jpg Width=100>
<P ALIGN=LEFT> <IMG SRC=imagens\miyasaki200.jpg Width=100>

Note que a linha de <H1> no foi afetado por <P ALIGN> de modo que para centralizar ttulos e
tambm outros elementos, vamos usar a tag <CENTER> </CENTER>. No h tags deste tipo para os
outros alinhamentos. Experimente alterar a linha de <H1> deste ltimo exemplo para:

<CENTER> <H1> USANDO ALIGN PARA TAG P </H1> </CENTER>

Se esquecer de fechar com </Center> toda a pgina ser centralizada. Cuidado!

21
CSS Cascading Sty le Sheet ou folha de estilos em cascata, agrega novas habilidades ao velho HTML. Hoje um dos recursos mais
usados na WEB e matria garantida para o 2 Ano do curso.

ALINHAMENTO DE TEXTO EM RELAO IMAGEM
Afeta o posicionamento de um texto curto em relao imagem, ou o posicionamento de uma
imagem em relao a outra imagem. Textos longos, que no cabem na tela ao lado da imagem so
colocados abaixo dela. A esttica no fica boa. Use para colocar legendas em imagens.

SINTAXE
<IMG SRC=caminho\imagem.ext ALIGN=opo_de_alinhamento>

Onde: opo_de_alinhamento pode ser Top (Topo), Middle (Meio) e Bottom (Embaixo).

Exemplo: Posicionando textos curtos em relao imagem.
<H1> USANDO ALIGN PARA TAG IMG SRC </H1>
<IMG SRC=imagens\miyasaki200.jpg WIDTH=100 ALIGN=TOP> Texto no Topo <p>
<IMG SRC=imagens\miyasaki200.jpg WIDTH=100 ALIGN=MIDDLE> Texto no Meio <p>
<IMG SRC=imagens\miyasaki200.jpg WIDTH=100 ALIGN=BOTTOM> Texto Embaixo <p>

A tag <P> no final de cada linha serve
para mostrar as imagens e iniciar um novo
pargrafo. Isso colocar cada imagem em uma
linha separada.
At chegarmos aos recursos que
permitiro posicionar as imagens com textos
longos em volta, este recurso ser til em
algumas situaes.
Se no conseguir enxergar bem o que
Align causou, remova das tags a opo
WIDTH=100, que reduz as imagens de 200 para
100 pixels e veja com a imagem em tamanho normal.

CRIANDO HIPERLINKS
Hiperlinks ou simplesmente Links so elementos que justificam o recurso de hipertexto, onde
determinados objetos (texto ou imagens) servem de ligao entre locais do mesmo documento ou no..
Ao clicar em um link estabelecido, algo sempre deve acontecer no seu navegador.
Um link pode ser interno, externo ou link para terceiros. Vamos conhecer a funo de cada um
conforme avanamos em nosso curso.

LINKS INTERNOS
A ligao criada por um link interno, jamais faz referncia a um local fora da prpria pgina onde ele
se encontra. Com um link interno voc permite ao usurio clicar e ir para ponto de maior interesse dentro
da pgina onde se encontra evitando buscas atravs de barras de rolagem. Nosso exemplo1.html um
bom exemplo de um contedo longo, onde os links internos tero utilidade.
Se um link faz a ligao entre locais, justo que precisaremos de um recurso que marque o local de
chegada do link, chamado aqui de ncora. O ponto onde a ncora colocada ser o trecho de documento
que vai ser mostrado na tela quando o link for acionado.
Para links internos precisamos de duas tags especficas:

ESTABELECENDO A NCORA
Para estabelecer uma ncora, usaremos uma tag que deve ser colocada no incio do trecho que
deseja mostrar na tela, quando o link for acionado.

SINTAXE
<A NAME=nome_da_ncora> contedo_opcional </A>

Onde: nome_da_ncora deve ser substitudo por um nome exclusivo. No pode haver duas ncoras com
nomes iguais dentro do mesmo arquivo html. J a ncora e o link devem usar nomes exatamente iguais.

contedo_opcional: Muitas pessoas preferem que a ncora seja colocada envolvendo algum item da
rea a ser linkada, um ttulo, uma imagem, etc... mas essa necessidade mostro-se ultrapassada.


A tag <A NAME> no provoca alteraes visuais no arquivo html , portanto no h screenshots
relativos a este exemplo.
Antes de fazer o exemplo, crie uma cpia do seu arquivo exemplo1.html, com o nome de
exemplo1b.html, mantendo-o na mesma pasta. Vamos fazer algumas alteraes em exemplo1b.html e
manter seu exemplo1.html intacto. Selecione o arquivo desejado, copie, cole na mesma pasta e ento
altere o nome que Windows deu para o nome sugerido.

Exemplo: Criando ncora para Link Interno no incio do documento. Este link permitir que o incio do
documento seja acessado rapidamente, aps criao do Hiperlink.
Instrues: Adicione no local semelhante ao mostrado abaixo. Usando tag <BODY> mais simples.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME=topo> </A>
<H1>CABEALHOS </H1>

Exemplo: Criando ncora para Link Interno no fim do documento. Este link permitir que o final do
documento seja acessado rapidamente, aps criao do Hiperlink correspondente.
Instrues: Adicione em local semelhante ao mostrado abaixo.
<A NAME=fim> </a>
</BODY>
</HTML>

LINKANDO AS NCORAS
Com as ncoras estabelecidas, poderemos fazer os links funcionarem. Como voc pode notar, o
que fizemos foi estabelecer uma ncora no incio do HTML chamada topo. Depois criamos outra ncora
no fim do documento chamada fim. Vamos criar dois links, um para cada ncora, de modo que estando
no comeo do exemplo, possamos clicar em um link e ir para o final e estando no final possamos usar
outro link e ir para o comeo.

SINTAXE
<A HREF=#nome_da_ncora> Texto/imagem </A>

Onde:
#nome_da_ncora: deve ser substitudo pelo nome da ncora que desejamos usar. O sinal
sustenido #, serve para indicar que o link do tipo interno.
Texto/imagem: coloque a tag <IMG SRC>, <LI>, <Hn> ou palavra ou frase que sirva de link.
A palavra ou texto usado deve mostrar claramente a funo que ser executada.

Exemplo: Criando link no incio do html, que ser ligado com a ncora fim.
Instrues: Adicione em local semelhante o mostrado abaixo. Usando tag <BODY> simplificada
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME =topo> </a>
<A HREF=#fim> Vai para o Final </a>
<H1>CABEALHOS </H1>

Exemplo: Criando link no final do html, que ser ligado com a ncora topo.
Instrues: Adicione em local semelhante o mostrado abaixo.
<IMG SRC=imagens\miyasaki200.jpg WIDTH=100
ALIGN=BOTTOM> Texto Embaixo <p>

<BR><BR><BR><BR>

<A NAME=fim> </A>
<A HREF=#topo> Volta ao Topo </A>
</BODY>
</HTML>

Grave, atualize no navegador e veja se os links funcionam.

EXERCCIO
Altere o exemplo1b.html com muita ateno de modo a estabelecer um total de 12 ncoras que
permitam escolher em um menu no incio documento qual exemplo de tag html estudada o usurio deseja
consultar. Se h 12 ncoras, vai haver no mnimo 12 links. Aps cada tag visitada, coloque um link Voltar
ao Menu. Use a ncora <A NAME=topo> j criada para nesta parte do exerccio. Seu documento html
deve ter obrigatoriamente:
Imagem de fundo personalizada;
Logotipo do Salesiano no incio do exemplo (Centralizado);
o Se necessrio para a lista de itens caberem na tela, reduza o tamanho do logotipo;
Seu nome no ttulo do Navegador;
Observe o Screenshot abaixo e use-o como referncia.

Est aparncia do navegador quando abrir o exemplo1b.html aps realizao do exerccio. Como exemplo, o
screenshot a seguir exibe o que deve aparecer na tela quando a opo Textos Pr-formatados clicada.

Use Listas no ordenada.
Esta opo deve lev-lo de volta ao topo
do documento. Mostra o menu, permitindo
a escolha de uma nova opo;
Opo clicada para montar o
screenshot abaixo.
Este link o mesmo que foi criado
nos exemplos de links internos. J
deve existir no seu arquivo.

TRABALHO PRTICO
Crie uma cpia do exerccio Currculo na mesma pasta e faa as seguintes alteraes:
Seu nome escrito com letras M em formato pr-formatado deve aparecer centralizado;
Monte um menu com os itens que o Currculo mostra sobre voc;
Ao clicar na opo, mostre o item solicitado na tela;
Abaixo de cada informao mostrada, coloque uma opo Retornar, no lado direito da tela;
Coloque uma imagem de fundo para ilustrar seu trabalho;
o Coloque a imagem na pasta adequada;
Crie uma nova opo do menu chamada Minha Foto;
Adicione uma foto sua, centralizada aps o item Comentrios, crticas e sugestes;
Acompanhe o Screenshot abaixo:

Cuidado com o gerenciamento das pastas. Sugiro que este exerccio seja colocado na pasta exemplos. Para
entregar para correo, a pasta deve ser alterada e mostrar seu nome. Exemplo Fbio Miyasaki 1 Info.

Est a tela que deve aparecer quando abrir curriculo2.html.
Como fazer para que a primeira opo Dados Pessoais no aparea na tela?
Olhe o que deve acontecer quando a opo ASCII Arte for escolhida:

Voc notou que na tela acima, o Link Retornar da opo anterior aparece no alto da tela. Isso
acontece devido posio da ncora na tela.


INICIANDO EXEMPLO2.HTML
Crie um novo arquivo html chamado exemplo2.html dentro da pasta Exemplos.
Aps criar o arquivo exemplo2.html, vamos revisar o contedo de nossa pasta Exemplos que deve
estar mais ou menos assim:

A pasta imagem deve estar com o contedo similar a esse. V ao site professorfabio e adicione
sua pasta imagens as duas imagens em destaque abaixo.

LINHAS DE SEPARAO
A tag <HR> cria linhas de separaes horizontais dentro de um documento HTML. Essas linhas so
apenas de efeito visual e podem ser usadas para dividir sees de contedos dentro da pgina. Em <HR>
existem algumas opes:

SINTAXE
<HR Size=Espessura WIDTH=Comprimento ALIGN=Opo NOSHADE>

Onde:
Size: Especifica a espessura da linha de separao em pixels;
Width: Especifica a largura ou comprimento da linha de separao em porcentagem da rea
ocupada ou em pixels. Usando 50% faz a linha com metade da largura da tela. Quando usar
Width=100% o padro.
Align: Posiciona a linha de separao: LEFT (Esquerda) RIGHT (Direita) e CENTER
(Centro).
NoShade: Esse parmetro indica que a linha no deve ter sombra e ser slida.

Exemplo: Usando <HR> para criar linhas de separao.
Instrues: Faa no novo HTML gravado com o nome exemplo2.html, na pasta de exemplos.
<HTML>
<HEAD>
<TITLE> | Exemplo 2 | 2006 | </TITLE>
</HEAD>
<BODY>
<H1> SEPARADORES </H1>
<H2> HR com opo Size e NoShade</H2>
<HR Size=1 NoShade>
<HR Size=3>
<HR Size=5 NoShade>
<HR Size=10>
<HR Size=15 NoShade>
<HR Size=25>
</BODY>
</HTML>

No exemplo acima, intercalamos um com NoShade e um sem. Veja os efeitos na sua tela para
compreender melhor.

Exemplo: Usando <HR> controlando a largura com Width e mostrando Align e Width com Pixels.

Instrues: Continue no exemplo2.html.
<H2> HR com opo Width (%) </H2>
<HR Size=5 Width=100%>
<HR Size=5 Width= 75%>

<H2> HR com opo Align </H2>
<HR Size=5 Width=200 Align=Left>
<HR Size=5 Width=200 Align=Center>
<HR Size=5 Width=200 Align=Right>

CORES PARA LINKS
%
A menos que as cores tradicionais dos links interfiram no visual do seu site, aconselhamos no
alterar as cores das opes LINK e VLINK. A maioria dos Sites evita mudar esse valor que j
considerado um padro da internet.

Este mais um conjunto de adicionais da tag <BODY>, sua funo ser a de permitir que voc
altere a cor do links texto, que so por padro azul, e depois de clicados ficam roxos.
Quando criamos links nas aulas anteriores vocs repararam que alguns deles ficam
permanentemente roxos (j clicados). Isso ocorre por que o link referncia a um ponto do arquivo
(internos), ou a outros arquivos (externo) ou ainda de terceiros (web). Quando o navegador encontra as
pginas referentes aos links na pasta de histricos ou de temporrios da internet, significa que essas
pginas j foram visitadas. O navegador ento os marca como tal. Para zerar esse histrico e voltar todos
os links para azul acompanhe a seguir:

COMPORTAMENTO DE LINKS E LIMPEZA DE HISTRICOS
Para estudar esse assunto, vamos aproveitar as pginas que criamos e que j tem links criados. A
sugesto usar o exemplo1b.html. Abra o pelo navegador e clique em todos os links disponveis.

Para gerar a imagem acima, eu cliquei em apenas
metade dos links para preservar as cores do links
ainda no visitados.

A imagem acima foi capturada aps o
procedimento abaixo, e de atualizar o navegador.

Para fazer com que a imagem da direita fique igual a da esquerda, faa o seguinte:
No navegador acesse a opo Ferramentas Opes da Internet.... (No IExplorer);
Na guia Geral (aparece aberta) localize a opo Limpar Histrico e clique nela;
Confirme a excluso do histrico de internet e em seguida feche a janela clicando em OK;
D um atualizar na sua pgina [F5];

VISITADOS
NO VISITADOS

NOVAS CORES PARA OS LINKS
Aproveite o exemplo1b.html est aberto no navegador e acesse o cdigo-fonte
22
.
Vamos acrescentar algumas coisas na nossa tag <Body> e ver como as cores afetam os links.

SINTAXE
<BODY LINK=#RGB VLINK=#RGB ALINK=#RGB>

Nota: A sintaxe acima mostra apenas aquilo que estamos estudando agora. As demais extenses de
<BODY> continuam com suas funes normais: Background, BgColor, Text embora no as mostremos
aqui nem nos exemplos.

Onde:
LINK: Especifica a cor dos links no visitados (padro azul)
VLINK: Especifica a cor dos links visitados (padro magenta)
ALINK: Especifica a cor do link ativo no momento. (Visto apenas em mltiplas janelas ou
frames)

Exemplo: Aplicando cores para links.
Instrues: Faa em Body do exemplo1b.html
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND=imagens\marmore.gif LINK=#FF7F00 VLINK=#871F78 ALINK=#238E23>

LINKS EXTERNOS LOCAIS
Existem dois tipos de Links considerados externos.
So externos no sentido de que o contedo a ser exibido na tela, no vai estar disponvel no
mesmo arquivo html em que o link estiver configurado.
O primeiro tipo so os Links Externos Locais, ou seja, vamos estabelecer ligaes entre as vrias
pginas html que temos em uma pasta em nosso computador. Assim sendo, poderemos fazer com que
uma pgina htm construda chame outra que est na mesma pasta.

SINTAXE
<A HHREF=nome_arquivo.html> texto/imagem </a>

Onde:
nome_arquivo.html Especifica o nome do arquivo.html que deve preferencialmente estar na
mesma pasta onde estiver o arquivo que ter o link. Se voc linkar um arquivo.html que
esteja em outra pasta, o mesmo ser aberto, mas podem deixar de funcionar quando o site
for publicado na web.
texto/imagem coloque a tag (<IMG SRC>, <LI>, <Hn>) ou palavra que deseja que sirva de
link para o usurio. A palavra ou texto usado deve mostrar claramente que funo ser
executada.

DICA: Se ao invs de um arquivo do tipo html o link for para imagem ela ser aberta sozinha. Se o
arquivo for de um tipo desconhecido pelo navegador, automaticamente ser criado um acesso para
download.

22
o contedo original do html que est sendo exibido na tela. Use Exibir Cdigo Fonte no IExplorer.

EXEMPLOS PARA LINKS LOCAIS
Nos exemplos a seguir, faremos uma conexo entre os arquivos html existentes em nossa pasta de
Exemplos. Como j sabemos, as pginas disponveis so:

Para que voc se oriente durante a execuo do exerccio, vamos obedecer a seguinte ordem:

exemplo1.html exemplo1B.html exemplo2.html Currculo1.html Currculo2.html

A ilustrao acima, mostra que estaremos usando o sistema de links com estrutura linear (pgina
8). Cada pgina vai sendo linkada uma aps a outra em uma ordem pr-estabelecida como se fossem
pginas de livros. Uma alternativa a hierrquica neste caso seria obedecer a seguinte ordem:

exemplo1.html exemplo1B.html exemplo2.html Currculo1.html Currculo2.html

Este esquema acima, considera que a partir do exemplo1, voc possa ver o exemplo1b, que a
evoluo do primeiro ou saltar direto para o exemplo2. Voc poder tambm ir direto do exemplo1 e
acessar o currculo1 e s ento o currculo2. Cada caso deve ser analisado particularmente.

Exemplo: Link entre exemplo1.html e exemplo1b.html
Instrues: Localize o local que achar mais adequado para colocar o link. Eu sugiro que seja colocado
no fim. Nada impede de ser colocado em vrios locais. Abra o arquivo exemplo1.html.
<H1> LINKS EXTERNOS LOCAIS </H1>
<H3>
Ver o arquivo <a href=exemplo1b.html>
Exemplo1b.html </a>
</H3>

Exemplo: Link de exemplo1b.html retornando exemplo1.html feito com imagem. Link de
exemplo1b.html para exemplo2.html
Instrues: Faa no exemplo1b.html.
<H1> LINKS EXTERNOS LOCAIS </H1>
<H3>
Ver o arquivo <a href=exemplo2.html>
Exemplo2.html </a>
</H3>

<A HREF=exemplo1.html>
<IMG SRC=imagens\esquerda.gif alt="Volta
para exemplo1">
</a>

Uma novidade no exemplo acima, a adio da opo ALT na tag <IMG SRC>. Ela permite colocar
essa tarja amarela com uma dica ou informao para o usurio. Normalmente ela funciona com qualquer
<IMG SCR> mas muito mais interessante quando o local onde ela aparecer puder ser clicado, como no
exemplo acima. Para ALT o contedo deve estar entre aspas.
Note que h uma borda com a cor do link em volta da figura. Resolveremos isso nos links externos.

SINTAXE
<IMG SRC=caminho\imagem.ext ALT=comentrio/frase>

Seguindo os dois exemplos acima, e o esquema do incio da pgina (Linear) faa os outros links.
Voc pode escolher se quer continuar fazendo com palavras ou com novas figuras que vai
encontrar na internet.

LINKS EXTERNOS NA WEB
Agora que j sabemos montar links internos e externos locais, fica muito fcil montar links externos
com endereos web. A nica condio que o endereo esteja correto, desde o protocolo http. Caso
contrrio seu link pode no funcionar. Volte a fazer os exemplos seguintes no arquivo exemplo2.html,
retomando a seqncia que j estvamos habituados.
Vamos adicionar uma expanso a <H REF> que funciona com links externos locais tambm.
Trata-se da opo Target, que pode fazer a pgina que esta sendo aberta criar uma nova janela de
navegador, ao invs de sobrepor sua pgina. Vamos ver como funciona.

SINTAXE
<A HHREF=endereo_web Target=destino> texto/imagem </a>

Onde:
endereo_web: um endereo de internet vlido para onde o Link estar fazendo a ligao.
Convm experimentar os endereos no navegado quando houver dvidas quanto a grafia
deste.
Target=destino: Serve para forar que o resultado de um link seja apresentado em um local
especfico. Neste caso vamos usar apenas a opo Blank. Quando chegarmos a matria
Frames veremos novas opes.

Exemplo: Link para o site professorfabio, com imagem e texto.
Instrues: Faa no exemplo2.html.
<H1> LINKS EXTERNO NA WEB </H1>
<h3>
Visite o site <A HREF=http://www.professorfabio.com.br TARGET=Blank>Professor Fbio</a>
</h3>
<A HREF=http://www.professorfabio.com.br TARGET=Blank>
<IMG SRC=imagens\miyasaki200.jpg ALT="Site do Professor">
</a>

Observer os dois Screenshots abaixo:

A imagem da esquerda apresenta uma borda da cor do link. Isso apenas acontece como uma forma
de realar o fato de que a imagem um ponto que pode ser clicado. Se preferir que suas imagens fiquem
como link, mas sem a borda, como na imagem da direita, use a opo de <IMG SCR> Border=0.
A linha ficaria assim:

<A HREF=http://www.professorfabio.com.br TARGET=Blank>
<IMG SRC=imagens\miyasaki200.jpg ALT="Site do Professor" Border=0>
</a>

EXERCCIO
Crie uma pasta de nome Hino SeuNome para colocar esse exerccio. Dentro desta pasta crie uma
pasta chamada imagens. Junto com a pasta vai ser colocado o arquivo hino.html.
Monte uma pgina usando todo seu conhecimento em HTML obtido at aqui. Use como base a
stira ao Hino Nacional apresentada a seguir.
Ao longo da stira palavras especficas do hino foram substitudas por nomes de produtos ou
empresas famosas. Ao todo so aproximadamente 28 marcas citadas.
Seu exerccio descobrir o endereo do sites de pelo menos 14 (metade) das empresas a sua
escolha e transformar o nome delas no meio do hino em links. Na parte inferior da pgina coloque os
logotipos das 14 empresas que voc vai obter pesquisando na web.
Cumpra as regras, da pgina e veja o screenshot para ter uma noo do resultado final.


REGRAS BSICAS
Coloque um backkground para sua pgina. Seja criativo;
Os links devem ser na cor azul (padro) mas aps serem clicados devem ficar verdes;
Escreva o hino usado <BIG> ou pelo menos <H3>;
Ajuste os logotipos para que fiquem em tamanho parecido;
Faa com que os 7 primeiros logotipos mostrados atuem como links;
Abaixo do ttulo do trabalho coloque sua identificao conforme o modelo abaixo;
Separao entre uma linha e outra do texto com <BR> e no com <P>;
Todos os links devem abrir em uma nova janela de navegador;

LINKS PARA EMAIL
Muitos sites deixam uma forma de contato por email. Isso era interessante at que muitos dos
usurios de internet de hoje, passassem a utilizar basicamente os webmail. Os emails so lidos e
respondidos por meio de um site que contm uma aplicao para realizar essa tarefa. Links para email s
tem utilidade se e somente se o usurio possuir um cliente de email configurado em sua mquina
(Outlook, Outlook Express, Eudora), pois esse programa passa a ser responsvel por gerenciar a entrada
e sada de email de sua mquina. Hoje muitos sites optam pelo uso de formulrio.

SINTAXE
<A HHREF=mailto:endereo@email> texto/imagem </a>

Onde:
mailto: a extenso que permite que uma ferramenta para envio de email seja acionada pelo
seu site. A palavra mailto um parmetro e deve ser includa na tag <A HREF> para email.

Exemplo: Link para envio de email
Instrues: Adicione ao exemplo2.html
<H1>LINK PARA EMAIL</H1>
<H3>Escreva para <A
HREF=mailto:contato@professorfabio.com.br>
contato@professorfabio.com.br</a> </H3>

<A HREF=mailto:contato@professorfabio.com.br>
<IMG SRC=imagens\livro.gif Align=Middle
Border=0 Alt=Contato>Escreva-Me
</A>


TRABALHO
Observe o modelo abaixo e construa uma pgina que permitida navegar por todos os arquivos
HTML que criamos at hoje. Cada arquivo acessado por esse menu, deve permitir, tambm por link que
possamos retornar e escolher uma nova opo.
Esse arquivo principal deve ter o nome index.html e para facilitar deve ser colocado junto com os
exemplos. Copie para dentro da pasta Exemplo a pasta que contm o exerccio do Hino Nacional
Patrocinado e substitua o nome da pasta por um nome de uma nica palavra. Seu arquivo index.html
dever conseguir executar e mostrar o arquivo hino.html. quando o respectivo link for criado.
Veja o screenshot e as regras abaixo:

Seja criativo. Essa a sua primeira home page;
o Ela deve convidar as pessoas quererem ver o que est por trs dos links;
Daquilo que foi estudado, todas as tags podem ser usadas, mas obrigatrio:
o Usar Background adequado (usar cor de fundo est fora de questo);
o Colocar algumas imagens para ilustrar, servir de link, ou algo mais;
No screenshot acima, as lupas e o envelope do canto so links;
Nenhum texto foi usado como link nesta pgina;
o Ter seus dados claramente expostos na pgina;
o Ter um link para seu email verdadeiro;
o Quando uma nova pgina for escolhida, ela deve permitir retornar para o index;
Veja como ficam as pginas que so acessadas pelo index.

*** Aps concluso deste exerccio j da para fazer alguns sites!


TRABALHANDO COM FONTES (LETRAS)
C entre ns que uma ferramenta de trabalho como o HTML, que de certa forma revolucionou o
modo como as pessoas acessam informaes no trabalharia com um nico tipo de fonte e com a cor
especificada em <BODY TEXT>.
O que vamos aprender agora vai ampliar as possibilidades criativas para criao de suas pginas
html. A partir deste ponto poderemos escolher tipos de letras, tamanho e cores em blocos isolados, e no
para toda a pgina.

MANIPULANDO FONTES
SINTAXE
<FONT COLOR=#RGB Size=VALOR Face=nome_da_fonte> Texto </FONT>

Onde:
Color: permite atribuir uma cor para o bloco de texto que estiver entre <FONT> e </FONT>;
Size: permite escolher um tamanho entre 1 e 7 para o bloco de texto que estiver entre
<FONT> e </FONT>;
Face: permite escolher o nome da fonte que deseja usar no bloco de textos que estiver entre
<FONT> e </FONT>;
Texto: o bloco de texto que vai ser afetado pela tag <FONT>.

ALERTA IMPORTANTE: Se voc colocar a tag <FONT> imediatamente aps <BODY> e </FONT>
imediatamente antes de </BODY>, todo o texto que estiver dentro do HTML ser afetado de alguma
forma. Para provar, abra seu curriculo1.html e imediatamente aps <BODY> coloque a linha abaixo.
Grave e veja o resultado. Depois , remova a linha adicionada para o exerccio voltar ao normal.
Na verdade se voc souber trabalhar, pode at dispensar </FONT>. Basta lembrar que um <FONT>
sempre cancela seu anterior, ou seja a tag <FONT> que for encontrada por ltimo (para baixo) dentro do
seu HTML a que vai estar mandando na casa.

<FONT COLOR=RED SIZE=7 FACE=ARIAL>

ALTERANDO APENAS CORES
Exemplo: Mudando cores de trechos especficos.
<H1> CORES DE TEXTO </H1>
<H1>
<Font Color=#238E23> Brasil</Font> <BR>
<Font Color=#FFFFOO> Brasil</Font> <BR>
<Font Color=#4D4DFF> Brasil</Font> <BR>
<Font Color=#E47833>C</Font><Font Color=#32CD32>olorindo
</Font>
</H1>

ALTERANDO APENAS TAMANHO
Exemplo: Mudando o tamanho de trechos especficos.
<H1> TAMANHO DA FONTE </H1>
<font size=7> Tamanho 7 </font><br>
<font size=7> H <font size=6> T
<font size=5> M <font size=4> L


ALTERANDO TIPO DE LETRA
Leve em conta algumas questes para usar essa tag:
Nem todo usurio tem as mesmas fontes instaladas no computador;
o Se voc usar aquela fonte bacana que s voc e mais meia dzia de pessoas tem
para construir uma pgina site, somente vocs 7 podero ver o site como ele . O
resto da humanidade vai v-lo com letra comum mesmo. (Times New Roman).
Para usar essa parte da tag voc tem que saber o nome das fontes corretas.
o Recorra ao Word para isso.
Nos sites que voc encontrar por ai com fontes incrementadas e tudo mais, no se iluda. A
maior parte dos casos voc est vendo imagens e no texto.
As fontes recomendadas por estarem presentes em 99% dos computadores, (so instaladas
juntas com o Windows) so: Arial, Times New Roman, Verdana, Helvtica, etc...
o O site professorfabio e centenas de outros tem na fonte Verdana, um porto seguro
para trabalhar.

Considerados os riscos, vamos aprender como se faz:
Exemplo: Mudando o tipo de letra. Mantenha o tamanho 6 em todas para melhor visualizao.
Instrues: Para este exemplo, escolha fontes que existem no seu computador. Use o Word.
<H1> TIPO DA FONTE </H1>
<font size=6 face=Acidic>Acidic <br>
<font size=6 face=Undercover>Undercover <br>
<font size=6 face=MemphisDisplay>MemphisDisplay <br>
<font size=6 face=Smallville>Smallville <br>
<font size=6 face=EnglischeSchTDemBol>EnglischeSchTDemBol <br>
<font size=6 face=KellyAnnGothic>KellyAnnGothic <br>
</font>

EXERCCIO
Apenas para ver se voc aprendeu essa tag,
encerre o exemplo2.html, tentando reproduzir os
efeitos ao lado.
Com isso encerramos nosso exemplo2.html.

Nota importante: quando a fonte que for usada for
composta por mais de uma palavra, como Times
News Roman a extenso Face somente aceitar o
nome da fonte se o mesmo estiver entre aspas:

<Font Face=Times News Roman>


INICIANDO EXEMPLO3.HTML
Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos.
Aps os exerccios e trabalhos anteriores, nossa pasta de Exemplos deve estar assim:

Nota do Professor: A pasta img acima foi criada para que eu pudesse gerar os Screenshots do exerccio
index.html. Nesta pasta, algumas imagens pessoais foram includas no nosso trabalho (vocs
escolheram a de vocs). Criei essa pasta apenas para no danificar a pasta imagens original que para
efeito de aula, deve estar igual a que vocs criaram.

INSERINDO TABELAS
Hoje temos um leque de opes muito grande para o uso de tabelas. Em um momento mais
avanado vai perceber que um recurso muito til. O site professorfabio construdo em cima de uma
tabela. claro que faremos algo parecido ou at melhor nos anos que se seguem. No momento o
interesse que todos encerrem essa parte do curso criando tabelas de todos os tipos, com as mais
variadas configuraes.
Tabelas foram introduzidas a partir da verso 3 da linguagem HTML. Desde ento passou por
evolues naturais at chegar ao estgio que se encontra hoje. Em princpio criaremos tabelas com cara
de tabela para depois entender que recursos escondidos elas trazem.

<TABLE></TABLE>
Uma tabela criada pela tag <TABLE> e encerrada com </TABLE>.
Entre essas duas tags podem ser usadas todas as tags que conhecemos mais as tags especficas
de tabelas, que so responsveis pela criao de linhas, clulas, bordas, alinhamento da tabela etc.
Usando <Table> em seu formato mais bsico, so criadas tabelas que exibem o contedo, mas no
as linhas que fazem de uma tabela, tabela. Como em outros programas, tabelas em html possuem o
formato abaixo:

Coluna 1 Coluna 2 Coluna 3 Coluna 4
Linha 1 Cabealho 1 Cabealho 2 Cabealho 3 Cabealho 4
Linha 2 Clula Clula Clula Clula

Acima temos uma tabela 4 x 4, que possui quatro linhas e quatro colunas.
No cruzamento de cada linha com uma coluna temos uma clula. A primeira linha da tabela, em
geral serve para exibir o nome dos dados a serem armazenados em cada linha. Veja um exemplo da
mesma tabela acima preenchida e com bordas:

Coluna 1 Coluna 2 Coluna 3 Coluna 4
Linha 1 Aluno Portugus Matemtica Histria
Linha 2 Fbio Bom Regular timo
Linha 3 Joo timo Bom Regular
Linha 4 Pedro Pssimo Bom Regular

Na tabela acima temos a qualificao de alunos por disciplina, onde cada matria colocada em
uma coluna e cada linha corresponde a um aluno. Um fato interessante em tabelas html que para tornar
o trabalho mais fcil, convm montarmos a tabela linha a linha e no coluna a coluna. Como o Word
permite, por exemplo.

TAGS ESPECIAIS PARA TABELAS
As tags a seguir s tm funo se estiverem cercadas pela dupla <TABLE> </TABLE>. Caso
sejam usadas fora de uma tabela, no apresentaro resultados satisfatrios. Para tabelas j no
possvel explicar cada tag e mostrar exemplos. Como j deve ter percebido, uma tabela ser composta
por um conjunto de tags que sozinhos so invisveis para ns.

<TABLE> outras tags </TABLE>
Informa que uma tabela ser criada. Necessita de outras tags para funcionar adequadamente. Toda
tabela deve ser encerrada por </TABLE>

<CAPTION> Legenda da Tabela </CAPTION>
Deve ser colocada imediatamente aps <TABLE> e antes do primeiro <TR>. Ele inclui uma legenda
para a tabela. A posio da legenda determinada por ALIGN e as opes so Top ou Bottom. Align
deve ser adicionado dentro de <CAPTION>.

<TR> outras tags </TR> - TABLE ROW (LINHA)
Esta tag usada para criar cada linha nova da tabela. Assim sendo, uma tabela com dez linhas,
apresentar em sua construo tambm um total de dez tags <TR> </TR>. A tag <TR> deve sempre
aparecer entre as tags <TABLE> </TABLE>.

<TH> contedo de cabealho por coluna </TH> - TABLE HEADER
Esta tag usada para criar clulas na primeira linha da tabela. Seu uso opcional. Uma tabela com
dez colunas, cada uma com um cabealho, deve ter dez <TH></TH>. O contedo do cabealho mostrado
por <TH> sempre aparece centralizado na clula e em negrito. A tag <TH> sempre aparece entre as tags
<TR> </TR>.

<TD> contedo da clula </TD> - TABLE DATA
Assim como <TH> esta tag cria o contedo de uma clula que no seja cabealho. Seu uso
essencial para colocar os dados dentro da tabela. So usadas entre as tags <TR> </TR>. Se a tabela
possui dez colunas de dados ela tambm ter dez <TD> </TD>

Observe o quadro abaixo, mostrando o que cada tag faz na montagem da tabela.

Coluna1 Coluna 2 Coluna 3 Coluna 4
Linha 1 <TR> Aluno <TH> Portugus<TH> Matemtica<TH> Histria<TH>
Linha 2 <TR> Fbio <TD> Bom <TD> Regular <TD> timo <TD>
Linha 3 <TR> Joo <TD> timo <TD> Bom <TD> Regular <TD>
Linha 4 <TR> Pedro <TD> Pssimo <TD> Bom <TD> Regular <TD>
EXTENSES ADICIONAIS
BORDER=VALOR
Essa extenso deve ser usada na tag <TABLE> e sua funo permitir que um valor inteiro
determine a espessura em pixels da borda que vai formar as linhas da tabela. Por padro as tabelas no
tm bordas visveis.

WIDTH=VALOR
Essa extenso pode ser usada em <TABLE>, <TH> ou <TD> e sua funo permitir que um valor
inteiro determine a largura em pixels ou porcentagem da tela, que a tabela ou coluna afetada vai ter. Veja
as explanaes a seguir:

<TABLE WIDTH=100%>: Significa que a tabela ocupar toda a largura permitida pelo
navegador. A tabela levar em conta a resoluo da tela e o tamanho da janela do navegador
para ser montada. Se reduzir o tamanho do navegador a tabela tambm ser reduzida.

<TABLE WIDTH=100>: Significa que a tabela ocupar uma largura mxima de 100 pixels,
independente da resoluo da tela e do tamanho da janela do navegador.

<TH ou TD WIDTH=100%>: Significa que a coluna ocupar toda a largura permitida pelo
navegador pela resoluo da tela. Leva em conta que se h mais colunas alm dela todas
devem caber na mesma tela.

ALIGN=CENTER, LEFT e RIGHT
J estudamos esta extenso fora do assunto tabelas, quando usamos para alinhar pargrafos. Em
tabelas, sua funo quando usada junto <TH> e <TD> e <TR> alinhar o contedo na posio
desejada dentro da clula ou linha respectivamente. Em tabelas o ALIGN padro esquerda.

VALIGN=TOP, MIDDLE, BOTTOM
Faz o alinhamento de um contedo dentro clula, considerando o espao vertical disponvel dentro
da clula. Em tabelas o padro de VALIGN ao centro.

NOWRAP
Colocando esse valor junto <TD> ou <TH> forar um texto longo ficar em uma mesma linha, sem
se quebrar dentro da clula. (pouco usado)

COLSPAN = QUANTIDADE_DE_COLUNAS
Ao ser usado em qualquer clula da tabela com <TH> ou <TD> cria uma mescla entre duas ou mais
clulas. Ao usar COLSPAN=2, por exemplo, a clula onde ele foi colocado vai englobar a clula seguinte
na mesma linha, fundindo-se a ela e tornando-se uma s.

ROWSPAN = QUANTIDADE_DE_LINHAS
Ao ser usado em qualquer clula da tabela com <TH> ou <TD> cria uma mescla entre duas ou mais
clulas em linhas diferentes. Ao usar ROWSPAN=2, por exemplo, a clula onde ele foi colocado vai
englobar a clula imediatamente abaixo (linha seguinte), fundindo-se a ela e tornando-se uma s.

CELLSPACCING=VALOR
Deve ser usado junto tag <TABLE> e define o espaamento entre as clulas da tabela. O valor de
ser inteiro e o espaamento dado em pixels.

CELLPADDING=VALOR
Junto tag <TABLE> define o espao em pixels entre as colunas e linha da tabela.

EXEMPLOS DE TABELAS
Os exemplos a seguir devem ser criados dentro do exemplo3.html na pasta Exemplos.
Vou procurar criar alguns exemplos de tabelas que englobem os recursos acima e alguns que
faremos adaptando as tags j estudadas anteriormente. Isso vai por fim provar a versatilidade do HTML.

Exemplo: Modelo bsico de tabela.
Instrues: Inicie o arquivo exemplo3.html. Grave na pasta de Exemplos.
<HTML>
<HEAD>
<TITLE> Minha Terceira Pgina HTML </TITLE>
</HEAD>
<BODY>
<H1> TABELAS </H1>
<H2> Modelo I Simplificado</H2>
<Table>
<Caption Align=Bottom> <Font Size=2> Tabela 1 </Font> </Caption>
<Tr> <Th> Coluna 1 </Th> <Th> Coluna 2 </Th> <Th> Coluna 3 </Th> <Th> Coluna 4 </Th> </Tr>
<Tr> <Td> Linha 1 </Td> <Td> 1234567890 </Td> <Td> 1234 </Td> <Td> 1234 </Td> </Tr>
<Tr> <Td> Linha 2 </Td> <Td> 1234 </Td> <Td> 12345678 </Td> <Td> FFFFFFF </Td> </Tr>
</Table>

Observe a aparente baguna e ignore a presena das tags dentro de <Table>. Voc conseguir ver
a tabela. Note que h um <TR> para cada linha. A primeira linha usa <TH> para montar cada coluna sob
a forma de cabealho. A seguir temos vrios <TD> por linha <TR>.

Exemplo: Modelo bsico de tabela com borda.
Instrues: Copie desde <H1> e cole abaixo da tabela anterior. Mude apenas o que mostramos abaixo:
<H2> Modelo II Com Borda</H2>
<Table Border=1>
<Caption Align=Bottom> <Font Size=2> Tabela 2: Com Borda </Font> </Caption>
Coloque trs ou quarto <BR> entre um exemplo e outro. Screenshots na pgina seguinte:


Altere os valores de Border para ver os resultados.

Para efeito de visualizao, todos os exemplos a seguir usam bordas.Voc poder usar como base
para todos os exemplos a seguir o Modelo II, atravs de copiar e colar, fazendo as alteraes propostas.
Remova apenas a linha <Caption> </Caption>, afinal j sabemos o que ela faz.

Exemplo: Modelo bsico de tabela demonstrando Colspan.
Instrues: Acrescente ao exemplo3.html. Aps copiar e colar altere apenas a linha com <TH>.
<H2> Modelo III Com Colspan</H2>
<Table Border=2>
<Tr> <Th Colspan=2> Coluna 1</Th> <Th>Coluna 2</Th> <Th>Coluna 3</Th> <Th>Coluna 4</Th> </Tr>

Para ter um resultado melhor, (imagem da direita), remova da linha a tag <Th>Coluna 4</Th>.

Exemplo: Modelo bsico de tabela demonstrando Rolspan.
Instrues: Acrescente ao exemplo3.html. Aps copiar e colar altere apenas a linha com <TH>.
<H2> Modelo IV Com Rowspan</H2>
<Table Border=2>
<Tr> <Th Rowspan=2> Coluna 1</Th> <Th> Coluna 2</Th> <Th> Coluna 3</Th> <Th> Coluna 4 </Th> </Tr>

Para ter um resultado melhor, (imagem da direita), remova da primeira linha com <TD> a tag <Td>
1234</Td>.

Para os prximos exemplos, copie novamente a tabela Modelo II (a partir de <H2> at </Table>) e
cole-a trs vezes uma aps a outra. Remova todas as linhas com <H2>, menos a primeira, e remova
todas as linhas <Caption> </Caption>. Entre uma tabela e outra coloque dois <BR>. Faa as alteraes:

Exemplo: Mostrando variaes do tamanho da tabela com porcentagem.
Instrues: Altere as tag table uma para cada tabela colada acima. Na primeira altere <H2> tambm.
<H2> Modelo V Alteraes no tamanho </H2>
<Table Border=2 Width=100%>


**Ateno cada Table mostrado acima deve ser alterado em cada uma das tabelas.


Alterar a largura da tabela com pixels, pode gerar uma experincia mais agradvel, uma vez que
pixels so fixos e evitam distorcer o que voc deseja mostrar.
Copie novamente o Modelo II, cole-o duas vezes, e desta vez apague apenas as linhas <Caption>
</Caption>. Faa as alteraes abaixo:

Exemplo: Mostrando variaes do tamanho da tabela com porcentagem.
Instrues: Altere as tag <Table> e <H2> para cada tabela conforme mostra abaixo:
<H2> Modelo VI Cellspacing</H2>
<Table Border=2 Cellspacing=15>

<BR><BR>

<H2> Modelo VII Cellpadding </H2>
<Table Border=2 Cellpadding=15>

COR PARA TODA A TABELA
Para colorir uma tabela use a extenso BGCOLOR dentro da tag <TABLE> assim como usamos
dentro de <BODY>. Veja:

Exemplo: Cores dentro da tabela toda. Use uma cpia do Modelo II novamente.
<H2> Modelo VIII Cor na tabela </H2>
<Table Border=1 BgColor=#EAEAAE>
<Tr> <Th> Coluna 1 </Th> <Th> Coluna 2 </Th> <Th> Coluna 3 </Th> <Th> Coluna 4 </Th> </Tr>
<Tr> <Td> Linha 2 </Td> <Td> 1234 </Td> <Td> 12345678 </Td> <Td> FFFFFFF </Td> </Tr>
</Table>

Substitua a opo por BgColor por Background=caminho\imagem.ext e veja se ele consegue
colocar um fundo para toda a tabela. (background=imagens\isopor.jpg)
Width=100%
Width=70%
Width=40%

CORES DENTRO DAS CLULAS
possvel colorir uma tabela individualmente, fazendo com que cada clula fique com uma cor
diferente. Lembre que se entre <TD></TD> particular, todas as tags estudadas podem ser usadas. Veja o
exemplo abaixo:

Exemplo: Cores nas clulas e vrias tags estudadas sendo mostradas. Cuidado ao digitar.
<H2> Modelo IX - Cor Nas Clulas e Outras Tags </H2>
<TR BgColor=#D9D9F3>
<Th> <H1>Fonte 1</H1> </Th>
</TR> </H1>
<TR>
<TD BgColor=#ADEAEA> <Font size=6 face=Acidic> Teste </Font> </TD>
<TD BgColor=#C0D9D9> <Font size=6 face=Undercover> Teste </Font> </TD>
<TD BgColor=#007FFF> <Font size=6 face=EnglischeSchTDemBol>Teste </Font> </TD>
<TD BgColor=#D9D919> <Font size=6 face=KellyAnnGothic>Teste </Font> </TD>
</TR>
<TR>
<TD> <IMG SRC=imagens\miyasaki200.jpg> </TD>
<TD ALIGN=CENTER> Teste </TD>
<TD ALIGN=LEFT> Teste </TD>
<TD ALIGN=RIGHT> Teste </TD>
</TR>
<TR>
<TD> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste</TD>
<TD NOWRAP> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste
Teste</TD>
</TR>
</Table>

Com os exemplos bsicos que temos de tabelas, podemos fazer muita coisa.
No esquea de acrescentar o link para o exemplo3.html no index.html que criamos.
Vamos agora fazer alguns exerccios para fixar e exercitar a construo de tabelas.

OBSERVAO: Quando chegar o momento adequado, colocarei verses criptogradas do exerccios da
pgina seguinte. Estas verses servem para que voc veja como sua pgina deve ficar. A criptografia
impedir que voc reaproveite qualquer parte do cdigo fonte original.


EXERCCIOS
1) Monte uma tabela com largura de 80% da tela, que deve representar um tabuleiro para jogos Xadrez
ou Dama. As regras so:
Ele deve ter 8 linhas x 8 colunas e estar centralizada. As clulas devem ficar quadradas;
O fundo da pgina deve ter uma cor a sua escolha;
Coloque ttulo e Identifique-se no trabalho com uma letra diferente;
Observe no screenshot. Um dos segredos est no pontinho que aparece nas clulas brancas, mas
que tambm existe nas clulas pretas. Que segredo esse?

2) DESAFIO: A Tabela Peridica dos Elementos de Qumica, foi construda artesanalmente atravs do
HTML (Bloco de Notas). Ser que voc consegue fazer uma?


TEXTOS QUE SE MOVEM
Existe uma tag do html, que produz um efeito de rolagem de texto pela tela, muito parecido com um
dos descansos de tela do Windows. Veja como fazer:

SINTAXE
<MARQUEE> FRASE/IMAGEM </MARQUEE>
As extenses disponveis so:
ALIGN=opo Funciona do mesmo modo que para posicionar o texto em relao imagem. As
opes so: Top, Middle e Bottom.
BEHAVIOR=opo Controle o tipo de deslocamento que a frase ou imagem vai se deslocar
pela tela. O padro sempre Scroll. As opes so:
Scroll: Deslocamento ocorre de um lado ao outro da tela;
Alternate: Deslocamento ocorre da direita para esquerda.
Slide: Deslocamento ocorre at o extremo oposto e para ao chegar;
BGCOLOR=#RGB Especfica a cor de fundo que o local onde a frase ou imagem vai passar
ter;
DIRECTION=opo O padro desta opo Left (esquerda). Determina a direo que o
texto vai tomar para iniciar o deslocamento. O nico valor aqui Right.
HEIGHT=valor Especifica a altura do painel por onde o <MARQUEE> vai passar. Pode ser
em pixel ou porcentagem;
HSPACE=valor Criar uma margem na esquerda e direita do <MARQUEE> que pode ser
usada para no deix-lo tocar no texto ou imagens que estiverem na tela;
LOOP=valor O valor determina a quantidade de vezes que o <MARQUEE> ser reprisado.
Se ao invs de um nmero colocar a palavra Infinite ele nunca vai parar.
WIDTH: Espao da tela que a frase ocupar. O valor pode ser em pixel ou porcentagem;
SCROLLAMOUNT=valor Indica a quantidade de pixels usada fazer a movimentao;
SCROLLDELAY=valor Informe um valor em milessegundos, que ser o tempo entre um
deslocamento e outro;

NOTA DO PROFESSOR: No se assuste com a quantidade de opes que essa tag nos trouxe. Na verdade se
conseguir um bom livro de HTML vai ver que todas as tags j estudadas tem muito mais opes do que as
mostradas aqui. Na verdade trata-se de uma deciso didtica inclu-las ou no neste material.

Exemplo: Alguns Marquees para voc testar.
Instrues: Inclua estes exemplos no final do exemplo3.html
<H1> MARQUEE </H1>
<Marquee> Esse o mais simples de todos </Marquee>
<Font Face=Acidic Size=7 Color=#0000FF>
<Marquee Bgcolor=#70DBDB> Velocidade Normal </Marquee>
<Font Face=Acidic Size=7 Color=#70DBDB>
<Marquee Bgcolor=#0000FF Direction=Right> Normal Inversa </Marquee>
<Font Face=Acidic Size=7 Color=#0000FF>
<Marquee Bgcolor=#70DBDB ScrollAmount=20 ScrollDelay=1> Acelerado </Marquee> </Font>
<BR><BR>
<Font Face=Undercover Size=6 Color=#000000>
<Marquee Bgcolor=#FF7F00 Behavior="Alternate" Width=100%> Veja esse </Marquee> </Font>
<BR><BR>
<Font Face=KellyAnnGothic Size=7 Color=#ffffff>
<P Align=Center>
<Marquee Bgcolor=#000000 Behavior="Slide" Width=50% Loop=3> 3 vezes </Marquee>
</Font>


CARACTERES ESPECIAIS
Atravs de um conjunto reservado de palavras, podemos obter alguns caracteres especiais direto
em formato texto dentro do html. Veja alguns:

Exemplo: Obtendo caracteres especiais.
<Font Size=5 Face="COURIER NEW" Color=#000000>
<H1> CARACTERES ESPECIAIS </H1>
Sinal de Copyright.....: &copy <br>
Sinal Marca Registrada.: &reg <br>
Mais ou Menos..........: &plusmn <br>
1/4 Um Quarto..........: &frac14 <br>
1/2 Meio...............: &frac12 <br>
3/4 Trs Quartos.......: &frac34 <br>
Sinal de Multiplicao.: &times <br>
Sinal de Diviso.......: &divide <br>
Travesso..............: &#150 <br>
</Font>

Nota: O exemplo acima comea com uma tag <Font> por que no exemplo anterior os valores
para os parmetros Size, Face e Color, foram alterados. Para que o novo exemplo aparea
com fontes comuns, optamos por atribuir novos valores com as caractersticas mais comuns.

ORGANIZANDO ARQUIVOS PARA PRXIMO ASSUNTO
Com o uso dos caracteres especiais damos por encerrado o exemplo3.html. Para o prximo tpico,
Frames, vamos reorganizar a estrutrura de pasta de modo a tornar vivel o desenvolvimento do exemplo
na ntegra.
Como vamos trabalhar fora da pasta Exemplo, em uma pasta chamada Frames, tome muito
cuidado com a nomenclatura de arquivos. Em um segunda parte, desta fase final de nosso curso, vamos
buscar muito arquivos da pasta de exemplos, para que possam atuar como contedo em nossos frames.
Ao copiar e colar cuidados com avisos de arquivos j existentes para no sobregravar um arquivo novo
e atualizado por um velho e incompleto.
Para comearmos, crie a pasta Frames e copie para dentro dela a mesma pasta imagens que
temos dentro da pasta Exemplos. Essas imagens vo servir por hora.
Portanto sua pasta Frames, vai ficar com apenas com a pasta imagens que deve apresentar o
seguinte contedo:

Na pgina seguinte iniciar o estudo de uma forma de construo de pginas web, na verdade sites,
que hoje considerado fora de moda, mais ainda muito interessante em alguns casos e finalidades
especficas. Acompanhem:


FRAMES
Nosso arquivo html index.html tem como funo integrar todas as pginas que j criamos em um
nico lugar, de modo que eu possa escolher em um menu quais as opes que desejamos ver, sem ter
que acessar as pastas e clicar em cada arquivo individualmente. Na verdade quando criamos o menu,
fazemos testes de navegabilidade como se estivssemos realmente na internet, ou seja navegamos pelos
nossos exerccios em busca de falhas e analisando desempenho.
At o presente momento, quando clicamos em uma opo no menu, a pgina linkada abre-se no
mesmo local do menu, sobrepondo as telas. O mximo que conseguimos fazer at agora foi abrir um link
externo de terceiro em uma nova janela, com TARGET=BLANK sendo usado na tag <A HREF>.
Ao utilizar frames, somos capazes de fazer vrios arquivos htmls diferentes, compartilharem o
mesmo espao no monitor do computador. A maneira como cada frame ocupar a tela de nossa
responsabilidade e requer planejamento baseado no contedo que ser mostrado.

ENTENDENDO OS FRAMES
Chamamos de Frame cada pedao que um monitor pode ser divido para acomodar a estrutura de
um site. Podemos elaborar uma tela (frameset) que ao ser dividida em partes (frames) poder acomodar
N pginas htmls simultaneamente.
Normalmente, independente da diviso, apenas um oi dois sero modificados por cliques do
usurio. Os demais ficam fixos na tela. Veja o modelo que desenvolveremos mais adiante no screenshot:

Se analisar atentamente e dominar o assunto tabelas, pode at achar que a estrutura acima poderia
ser obtida com <TABLE> na dimenso de 2 linhas x 2 colunas. A resposta sim, o contedo acima
visualmente falando, poderia ser obtido com uma tabela.
O problema seria operacional. O menu (menu.html) exibido no screenshot possui links para as
outras pginas que desenvolvemos ao longo do curso. Com tabelas, simplesmente impossvel fazer
com que uma escolha do usurio, feita por um clique em um dos links, mostre o contedo relacionado
apenas no mainframe no centro da tela. A que frames e tabelas se separam definitivamente.

FRAMESET OU FRAME DOCUMENT
O Frame Document um arquivo em formato html que contm tags especficas para definir a
estrutura e o formato dos frames de seu site. Normalmente este arquivo passa ser o arquivo principal do
site ou o segundo na hierarquia para quando houver uma pgina de abertura.
1
)

T
o
d
a

a

t
e
l
a

c
h
a
m
a
d
a

d
e

F
r
a
m
e

D
o
c
u
m
e
t

o
u

F
r
a
m
e
s
e
t

Esse frame a direita preenchido com o arquivo
menu.html previamente escrito. Em geral fixo
O frame no alto foi preenchido
pelo arquivo topo.html.
Em geral fixo!
A janela maior reservada
para navegao.
chamada de Mainframe e
preenchida por htms
variados, dependendo do link
ativado. o nico frame
nessa situao que vai ter o
contedo varivel.

O resultado de um FRAMESET, pode ser visto em um navegador, mesmo sem que o contedo
esteja definido. O que mostrado no navegador similar a um molde, onde as outras pginas htmls
comuns, sero foradas a se encaixar. Veja o grfico abaixo:

A esquerda o arquivo
frameset apenas com o
molde definido.

A direita, com os htmls
encaixados sobre o molde

topo.html
(arquivo html comum)

menu.html

navega.html

A principal diferena de um frame document em relao a um html comum, que ele no tem tags
<BODY> </BODY>. Elas so substitudas pelas tags <FRAMESET> </FRAMESET>.

PLANEJ ANDO O FRAMESET
Alm do modelo exibido acima, que na ordem de criao prtica ser o ltimo, vamos trabalhar com
os seguintes modelos:

frameset1.html frameset2.html frameset3.html

Ao escolher o formato de um frameset, devemos estar atentos ao contedos que sero
apresentados. Se o contedo da pgina basicamente horizontal com frases longas, difcil encaix-las
em faixa estreitas de tela (frameset2 e frameset3). Da mesma forma se um contedo vertical, (menu)
no convm coloc-lo em modelos como o frameset1. O screenshot da pgina 56, mostra claramente que
cada frame teve seu contedo planejado antes de ser montado.

CRIANDO FRAMES
Vamos criar agora os trs framesets acima, na ordem em que esto ilustrados e gravando com os
mesmos nomes. O processo o mesmo do html comum.

MODELO PADRO: No h tag <BODY> </BODY>
<HTML>
<HEAD>
<TITLE> Modelo Padro </TITLE>
</HEAD>
<FRAMESET TIPO_DO_FRAME = tamanhoframe1, tamanhoframe2, tamanhoframeN OPES>
<FRAME SRC="URL" OPES>
</FRAMESET>
</HTML>


Onde:
Tipo_do_Frame: determina se os frames a serem criado vo dividir a janela horizontalmente
ou verticalmente. Os tipos de frames so disponveis so:
Rows=: Determina que as divises das janelas ocorram na horizontal ou em linhas.
Cols=: Determina que as divises das janelas ocorram na vertical ou em colunas.
Tanto Rows quanto Cols necessitam que uma seqncia de valores seja colocada aps o
sinal de igual. A quantidade de valores separados por vrgulas, determina a quantidade de
frames que ser criada. Cada valor individual vai representar tambm o tamanho de cada
frame. Para Cols o tamanho da distncia horizontal e Rows da distncia vertical.
Estes valores podem ser colocados em pixels ou porcentagem ou ainda com um * asterisco.
Numrico: determina quantos pixels cada frame ou janela deve ocupar.
Percentual: determina a ocupao em percentual de espao da tela. A soma dos
valores deve ser sempre igual a 100 %.
Valor Relativo: Ao usar um * (asterisco) ao invs de um nmero, vocs faz com que os
frames dividam o espao disponvel igualmente entre si.

USANDO A TAG FRAMESET
Apenas para aprendermos a dividir as janelas de navegador em frames, nos exemplos abaixo,
usaremos as tags <FRAMES> neutralizadas com # (sustenido). Ao executar os novos htmls criados o
navegador aparecer vazio, mas com as divises estabelecidas.

frameset1.html frameset2.html frameset3.html

MODELO frameset1.html
<Html>
<Head>
<Title> | frameset1.html | Modelo | </Title>
</Head>
<Frameset ROWS=*,*,*>
<Frame Src=#>
<Frame Src=#>
<Frame Src=#>
</Frameset>
</html>
Anlise: ao usar ROWS=*,*,* foi pedido que a
tela fosse dividida em trs linha com medidas
iguais entre elas.
Aps gravar, abra frameset1.html no
navegador e confirme esta informao.

<Html>
<Head>
</Head>
<Frameset COLS=70%,*,*>
<Frame Src=#>
<Frame Src=#>
<Frame Src=#>
</Frameset>
</html>
Anlise: ao usar COLS=70%,*,* foi pedido que
a tela fosse dividida em trs colunas, sendo a
que primeira (esquerda) deveria ficar com
setenta por cento do espao. Os outros trinta
por cento deveriam se dividas entre os dois
asteriscos. Confirme abrindo frameset2.html
no navegador.

<Html>
<Head>
</Head>
<Frameset COLS=20%,*,20%>
<Frame Src=#>
<Frame Src=#>
<Frame Src=#>
</Frameset>
</html>
Anlise: ao usar COLS=20%,*,20% foi pedido
que a tela fosse dividida em trs colunas,
sendo a que primeira deveria ficar com vinte
por cento do espao. A coluna do meio deveria
ficar com o restante aps a terceira ocupar
seus vinte por cento. Confirme abrindo
frameset2.html no navegador.

A tag <FRAMESET> aceita ainda duas extenses especiais que podem ou no ser usadas. So
elas:

Frameborder= valor 0 ou 1 Determina se a linhas divisrias colocadas entre os frames devem ou no
existir. O padro interno 1, ou seja, com linhas.

Framespacing=Valor Determina a distncia entre um frame e outro. Quando Frameborder est em 1 o
valor colocado aqui afeta a largura das linhas divisrias. Quando Frameborder estiver em 0, uma faixa
branca separa uma janela da outra. Esta faixa s ser visvel quando cada frame estiver com seu
contedo inserido, o que no nosso caso.

Para efeito de teste, abra o frameset3.html e altere conforme abaixo grave e observe o resultado:
MODELO frameset3.html usando Frameborder e Framespacing
<Html>
<Head>
</Head>
<Frameset cols=20%,*,20% Frameborder=1 FrameSpacing=10>
<Frame Src=# Noresize Scrolling=No>
</Frameset>
</html>
EXERCCIO
Este exerccio apenas para fazer voc pensar um pouco na diviso de frames.
Realize as seguintes divises de frames e guarde em arquivos com os nomes pedidos abaixo.
No se preocupe com os valores que sero usados para COLS= e ROWS=. Quando for aplicar em
algum site de verdade, fazendo ajustes voc acaba encontrando as medidas corretas.

frameset0.html desafio1.html desafio2.html

TAGS FRAME, PARA QUE SERVEM?
Nestes primeiros exemplos o objetivo era ensinar como dividir os frames. Usamos as tags
<FRAME> pois sem elas a diviso no se concretiza. Agora vamos prosseguir complementando a
informao que temos, estudando a tag <FRAME>. Como vimos anteriormente, esta tag s funciona se
estiver colocada dentro de um <FRAMESET> </FRAMESET>.
A funo dela criar os frames a partir das medidas fornecidas por <FRAMESET> e determinar o
que cada frame vai mostrar. No a toa que a sintaxe dela lembra tanto a tag <A HREF>. Na verdade o
que fazemos e linkar cada frame a um arquivo html que desejamos ou at mesmo a um site.

SINTAXE
<FRAME SRC=endereo NAME=nomeframe SCROLLING=opo NORESIZE>

Onde:
endereo: um endereo na internet ou um nome de arquivo.html que esteja acessvel com ou
sem o uso de paths.

Name: Ao criar cada janela interessante atribuir um nome a ela. Esse nome ser til para
determinar onde cada site ou pgina deve abrir usando a extenso TARGET da tag <A HREF>
usada antes apenas para abrir o contedo em nova janela. Nome deve comear com letras.

Scrolling= opo um atributo opcional que determina se um frame vai ter ou no barras de
rolagem. As opes disponveis so:
Yes Mostra sempre a barra de rolagem.
No No mostra a barra de rolagem, mesmo quando ela necessria.
Auto Identifica se a barra de rolagem ou no necessria ativando-a automaticamente.

Noresize No permite que as divisrias entre os frames seja movida manualmente pelo usurio,
impedindo o redimensionamento de janelas. Esse comando deve sempre ser usado.
CONTEDO BSICO DOS FRAMES
Em geral o contedo bsico dos frames so pginas html montadas e planejadas para ficarem na
tela at o usurio navegar. Em geral apenas um dos frames tem seus contedos modificados. Os demais
ficam fixos (menu e topo). Sigas as orientaes e monte cada um dos arquivos html abaixo. Salve-os com
os nomes solicitados a fim de que os exemplos funcionem. Grave tudo na pasta Frames e confirme se a
pasta imagens esta corretamente armazenada.

Nota No exemplo abaixo, algumas as tags <FONT> usam a fonte ACIDIC. Caso
ela no esteja disponvel no seu computador coloque outra a sua escolha.
Lembre-se que fontes com mais de uma palavra no nome devem ir entre aspas.

Contedo dos Frames topo.html (na pasta FRAMES)
<Html>
<Head>
<Title> Este o Frame relativo ao TOPO </Title>
</Head>
<Body Background=imagens\marmore.gif>
<Center>
<Font Face=Verdana Color=#FF0000 Size=2> <B> [01] topo.html </B> <br></Font>
<Font Face=Acidic Color=#42426F Size=7> CRIANDO FRAMES </FONT>
</Center>
</Body>
</Html>

Contedo dos Frames menu.html (na pasta FRAMES)
<Html>
<Head>
<Title> Menu Principal - Exemplo FRAMES </Title>
</Head>
<Body Background=imagens\isopor.jpg>
<Center>
<Font Face=Verdana Color=#FF0000 Size=2> <B> [02] menu.html </B> <br> </Font>
<Font Face=Acidic Color=#42426F Size=7> MENU </Font>
</Center>
<B>
<Font SIZE=3 FACE=Arial>
<A Href=# Target=Navega> Exemplo 1 </A> <Br><Br>
<A Href=# Target=Navega> Exemplo 1B </A> <Br><Br>
<A Href=# Target=Navega> Currculo </A> <Br><Br>
<A Href=# Target=Navega> Hino </A> <Br><Br>
<A Href=# Target=Navega> Tabuleiro </A> <Br><Br>
<A Href=# Target=Navega> Tabela Peridica </A> <Br><Br>
</B>
<Center>
<A Href="Mailto:contatoprofesorfabio.com.br">
<Img Src=imagens\radar.gif Border=0> <br>
<Font Face=Verdana Size=2> Contato </Font>
</A>
</Center>
</Font>
</Body>
</HTML>

Contedo dos Frames navegar.html (na pasta FRAMES)
<Html>
<Head>
<Title> Frame 1 - 1a Janela </Title>
</Head>
<Body>
<Center>
<Font Face=Verdana Color=#FF0000 Size=2> <B> [03] navega.html <br> </B> </Font>
<Font Face=Acidic Color=#007FFF Size=7> FRAME PRINCIPAL (MAINFRAME)</Font>
<BR>
<Font Face=Acidic Color=#9932CD Size=6> Local para Conteudos </FONT>
<BR><BR><BR><BR><BR>
<img src=imagens\miyasaki200.jpg>
</Center>
</Body>
</Html>

Antes de reeditar nossos arquivos frameset1, frameset2 e frameset3, vamos verificar se nossas
pastas esto com contedos idnticos:

Faa as alteraes em cada um dos arquivos e teste adequadamente cada um deles.

<Html>
<Head>
</Head>
<Frameset rows=*,*,*>
<Frame Src=topo.html Name=topo Scrolling=Auto Noresize>
<Frame Src=navegar.html Name=navega Scrolling=Auto Noresize>
<Frame Src=menu.html Name=menu Scrolling=Auto Noresize>
</Frameset>
</html>

<Html>
<Head>
</Head>
<Frameset cols=70%,*,*>
</Frameset>
</html>

<Html>
<Head>
</Head>
<Frameset cols=20%,*,20% Frameborder=1 FrameSpacing=10>
</Frameset>
</html>

EXERCCIOS
MODELO DE FRAME EFICIENTE
Copie da sua pasta Exemplos ou de onde for necessrio, todos os arquivos que aparecem como
opes do menu.html usado para compor os frames.
Faa nossos htmls antigos aparecerem na rea reservada para navegao de nosso frame. Essas
alteraes no precisam ser feitas nos arquivos frameset1, frameset2 e frameset3, faa apenas no
frameset0.html que o frame mais adequado para construo de sites.
O screenshot abaixo mostra comom fica a tela quando a opo Tabela Peridica for acessada:

CONCLUINDO O DESAFIO1.HTML
Se voc fez o exerccio acima, conseguiu fazer nossos exemplos serem includo ao sistema de
frames elaborado. Acesse o arquivo desafio1.html e faca o executar no navegador como a imagem
abaixo. Os sites que vo aparecer em cada janela ficam a seu critrio.
Ateno: A execuo deste exerccio sem banda larga pode provocar lentido na montagem da
pgina. No entre em pnico ou teste apenas na rede do colgio.


INLINE FRAME
Insere um documento ou site dentro de uma janela configurvel dentro de um html. A desvantagem
principal desse recurso, embora d um visual bacana para as pginas e ter que criar vrios clones de uma
pgina e alterar o endereo especificado da tag <IFRAME> de cada uma. A tag <IFRAME> no
dinmica, mas sim esttica, ou seja, cada tag desta deve ter um endereo prprio.
Outro problema apresentado pelo <IFRAME> que os espaos deixados ao lado dele continuam
sendo disponveis, ou seja, um <P> ou <BR> aps a tag </IFRAME> no faz o contedo seguinte ir para
a primeira linha abaixo da janela. Eles continuam sendo apresentados ao lado da mesma.
A alternativa mais simples para resolver isso, usar sempre <IFRAME> com Align=Center. Desta
forma o navegador no sabe como dividir o texto entre o espao esquerda e direita e o coloca abaixo
da janela.

SINTAXE
<IFRAME SRC=endereo Width=valor Height=valor Scrolling=opo
Frameborder=opo Align=opo> </IFRAME>

Onde:
endereo: um endereo na internet ou um nome de arquivo.html que esteja acessvel com ou
sem o uso de paths.
Width especifique em pixels a largura da janela de navegao que voc deseja criar. O valor deve
ser um nmero inteiro.
Height especifique em pixels a altura da janela de navegao que voc deseja criar. O valor deve
ser um nmero inteiro.
Scrolling determina se vai ou no haver barra de rolagens na janela. As opes podem ser:
Yes tem barras de rolagem;
No no coloca barra de rolagens, mesmo se necessrio;
Auto: o navegador decide quando vai criar ou no as barras de rolagem. Recomendado.
Frameborder Aceita os valores zerou ou um para colocar ou no borda em volta da janela criada.
Zero sem borda e 1 com bordas.
Align determina qual o alinhamento do <IFRAME> em relao a janela principal. As opes so:
Left Alinha do lado esquerdo da janela principal (padro)
Right Alinha a direita da janela principal;
Center Posiciona no centro da janela principal;

Exemplo: Alinhado a direita, com espao de sobra. Mostra o texto todo ao lado da janela.
Este <IFRAME> est sem borda e com barras de rolagens.
<H1> IFRAMES </H1>
<H2> CASO I: Direita ou esquerda. Texto sempre ao lado </H2>
<IFRAME SRC=curriculo1.html Width=350 Height=350 Scrolling=Yes Frameborder=0
Align=Right> </IFRAME>
<H2>Olha o problema ai </h2>
<P> Observe que mesmo com o P este texto vai sair ao lado do Iframe do curriculo1.
<P> O mesmo ocorre com a imagem seguir, mesmo usando BR.
<BR> <IMG SRC=imagens\miyasaki200.jpg>
<P> Isso pode ser uma alternativa interessante para colocar imagens e textos
explicativos uma ao lado da outra.
<BR><BR><BR><BR><BR><BR>
<P Align=Center>Finalmente chegamos em um espao sem IFRAME.

Eis nossa janela
<IFRAME>. Sem borda
de contorno, mas com
barras de rolagens. Voc
consegue ver o
currculo1 inteiro ai.
Veja ai, os textos
continuam a ocupar
o espao ao lado do
Iframe.
Este espao e criado com vrias tags <BR> e
testes para saber a hora de parar.

Exemplo: Alinhado a esquerda, com espao de sobra. Mostra o texto todo ao lado da janela.
Este <IFRAME> est com borda e sem barras de rolagens.
<H2> CASO II: Esquerda. Texto sempre ao lado </H2>
<IFRAME SRC=tabper.html Width=350 Height=350 Scrolling=No Frameborder=1 Align=Left>
</IFRAME>
<H2>O problema continua </h2>
<P> O Iframe saiu da direita e foi para a esquerda. Mas o texto continua ao lado dele.
<P> As imagens tambm continuam ao lado do IFrame.
<BR><IMG SRC=imagens\lupa.jpg>
<P> Vamos colocar BR para ultrapassar a rea do Iframe.
<BR><BR><BR><BR><BR><BR><BR><BR>
<P Align=Center>Foram usados oito BRs para chegar at aqui.

Exemplo: Alinhado ao centro, com espao de sobra dos dois lados. Aqui o texto, qualquer que seja
aparece imediatamente abaixo do Iframe.
<H2> CASO III: Centralizado: Texto embaixo </H2>
<IFRAME SRC=tabuleiro.html Width=350 Height=350 Scrolling=Yes Frameborder=1
Align=Center> </IFRAME>
<H2>O problema foi resolvido </h2>

Se voc quiser substituir o SRC por um nome de imagem (pasta\imagem.ext), voc ter um efeito
interessante na tela e poder escrever textos longos ao lado da imagem, sem usar tabelas. Digite e prove.

Exemplo: Substituindo em SRC o arquivo html ou site por um endereo de imagem no padro
pasta\imagem.extenso.
<H1> IFRAME COM APENAS IMAGEM </H1>
<IFRAME SRC=imagens\miyasaki200.jpg FrameBorder=0 Width=230 Align=Left> </IFRAME>
<Font Face=Verdana>
<H2>LOGOTIPO MIYASAKI </H2>
<P> Criado a menos de um ano atrs para identificar os trabalhos realizados pelo
professor Fbio Miyasaki, tanto na rea educacional,
como Webdesigner e consultorias, trata-se de um M estilizado e o crculo vermelho,
marcando a descendncia oriental do sobrenome.
Este espao e criado com vrias tags <BR> e
testes para saber a hora de parar.
Eis nossa janela
<IFRAME>. Desta vez
com borda de contorno,
mas sem barras de
rolagens.
Nossa tabela peridica
foi muito prejudicada
com esse formato.
Eis nossa terceira janela
<IFRAME>.
Desta vez com borda de
contorno, com barras de
rolagens e centralizada.
Os textos agora ficam
abaixo da tabela.
O tabueiro ficou
distorcido pois ele foi
originalmente criado
para ficar com 50% do
espao. Como a janela
pequena...j sabe n...

INDCE
APRESENTAO....................................................................................................................................... 2
INTERNET: UMA BREVE INTRODUO .................................................................................................... 3
PROVEDORES DE ACESSO....................................................................................................................... 3
BACKBONES ............................................................................................................................................. 3
EVOLUO DO BACKBONE RNP............................................................................................................ 4
A ASSINATURA DE INTERNET .................................................................................................................. 5
NAVEGAR PRECISO............................................................................................................................... 5
NAVEGADORES ..................................................................................................................................... 5
PROTOCOLOS INTERNET...................................................................................................................... 5
WWW (WORLD WIDE WEB) ....................................................................................................................... 6
HOME PAGE OU SITE? .............................................................................................................................. 7
ORGANIZANDO UM SITE........................................................................................................................... 7
O QUE PRETENDE DIVULGAR ? ............................................................................................................. 7
ESTABELEA SEUS OBJETIVOS! ........................................................................................................... 7
DIVIDA SEU CONTEDO EM TPICOS ................................................................................................... 7
ORGANIZAO E NAVEGAO.............................................................................................................. 7
NAVEGAO POR HIERARQUIAS .......................................................................................................... 7
NAVEGAO LINEAR............................................................................................................................. 8
ESTRUTURA LINEAR COM ALTERNATIVAS............................................................................................ 8
COMBINAO DAS ESTRUTURAS LINEAR E HIERQUICA .................................................................... 8
O STORYBOARD .................................................................................................................................... 8
DICAS PARA SEU STORYBOARD ....................................................................................................... 9
STORYBOARDS NO CINEMA .............................................................................................................. 9
ORGANOGRAMA DE UM SITE................................................................................................................. 10
PROJETANDO UM WEBSITE................................................................................................................... 11
DIAGRAMAO .................................................................................................................................... 11
HIPERTEXTO........................................................................................................................................ 11
WEB DESIGN E VISO DO PROJETO .................................................................................................... 11
CONTEDO E FORMA .......................................................................................................................... 11
EQUIPE DE DESENVOLVIMENTO ......................................................................................................... 11
FASES NA CONSTRUO DE UM WEBSITE........................................................................................... 12
1 FASE: ORGANIZAO DA INFORMAO.......................................................................................... 12
2 FASE: COMO SER O SITE ............................................................................................................... 12
3 FASE: MONTAGEM DO SITE.............................................................................................................. 12
4 FASE: TESTES .................................................................................................................................. 12
DICAS E CONSIDERAES IMPORTANTES ......................................................................................... 12
ADMINISTRAO DE UM SITE ................................................................................................................ 13
OS 10 PECADOS DO WEBDESIGNER: .................................................................................................. 13
OS FORMATOS DE IMAGEM MAIS USADOS ........................................................................................... 14
NAVEGADOR DE INTERNET.................................................................................................................... 15
A BARRA DE ENDEREOS ................................................................................................................... 16
URL UNIFORM RESOURCE LOCATOR ............................................................................................... 16
ERROS NA NAVEGAO ...................................................................................................................... 16
HTML HYPERTEXT MARKUP LANGUAGE............................................................................................ 17
CARACTERSTICAS GERAIS DO HTML................................................................................................. 17
AMBIENTE DE TRABALHO PARA PROGRAMAR EM HTML.................................................................... 17
CRIANDO E SALVANDO UM HTML ........................................................................................................ 17

ESTRUTURA DE UM DOCUMENTO HTML ............................................................................................... 19
O HTML BSICO ................................................................................................................................... 19
TAGS HTML .......................................................................................................................................... 19
ANTES DE COMEAR... ........................................................................................................................ 20
INICIANDO O ESTUDO DAS TAGS HTML............................................................................................... 20
TTULO DA PGINA............................................................................................................................... 20
CABEALHOS ...................................................................................................................................... 21
PARGRAFOS...................................................................................................................................... 21
QUEBRA DE LINHAS............................................................................................................................. 21
LISTAS NO NUMERADAS.................................................................................................................... 22
LISTAS NUMERADAS............................................................................................................................ 22
LISTA DE DEFINIES ......................................................................................................................... 23
LISTAS INTERCALADAS ....................................................................................................................... 23
TEXTO PR-FORMATADO.................................................................................................................... 24
FORMATANDO TEXTOS ....................................................................................................................... 24
O USO DE CORES................................................................................................................................. 25
ESTENDENDENDO A TAG <BODY> ...................................................................................................... 25
TRABALHOS............................................................................................................................................ 26
PESQUISA ............................................................................................................................................... 26
TRABALHO PRTICO 1............................................................................................................................... 26
TRABALHO PRTICO 2............................................................................................................................... 26
TRABALHO PRTICO 3............................................................................................................................... 27
USANDO IMAGENS.................................................................................................................................. 29
ORGANIZANDO IMAGENS .................................................................................................................... 29
PASTAS IMAGENS: MELHOR CONFIGURAO.................................................................................... 29
EXIBINDO IMAGENS EM MINIATURA ................................................................................................ 29
EXIBINDO EXTENSO DE ARQUIVOS............................................................................................... 29
SALVANDO IMAGENS ........................................................................................................................... 30
IMAGEM DE FUNDO NO HTML .............................................................................................................. 30
COLOCANDO IMAGENS........................................................................................................................ 31
OPES DE ALINHAMENTO PARA IMAGENS E TEXTO........................................................................ 33
ALINHAMENTO DE PARGRAFOS.................................................................................................... 33
ALINHAMENTO DE TEXTO EM RELAO IMAGEM........................................................................ 34
CRIANDO HIPERLINKS ............................................................................................................................ 34
LINKS INTERNOS.................................................................................................................................. 34
ESTABELECENDO A NCORA .......................................................................................................... 34
LINKANDO AS NCORAS.................................................................................................................. 35
EXERCCIO .............................................................................................................................................. 36
TRABALHO PRTICO............................................................................................................................ 37
INICIANDO EXEMPLO2.HTML.................................................................................................................. 38
LINHAS DE SEPARAO...................................................................................................................... 38
CORES PARA LINKS ............................................................................................................................. 39
COMPORTAMENTO DE LINKS E LIMPEZA DE HISTRICOS............................................................. 39
NOVAS CORES PARA OS LINKS ........................................................................................................... 40
LINKS EXTERNOS LOCAIS ................................................................................................................... 40
EXEMPLOS PARA LINKS LOCAIS...................................................................................................... 41
LINKS EXTERNOS NA WEB................................................................................................................... 42
EXERCCIO .............................................................................................................................................. 42
LINKS PARA EMAIL................................................................................................................................. 43
TRABALHO.............................................................................................................................................. 44
TRABALHANDO COM FONTES (LETRAS) ............................................................................................... 45
MANIPULANDO FONTES ...................................................................................................................... 45
ALTERANDO APENAS CORES.......................................................................................................... 45
ALTERANDO APENAS TAMANHO..................................................................................................... 45
ALTERANDO TIPO DE LETRA ........................................................................................................... 46

EXERCCIO........................................................................................................................................... 46
INICIANDO EXEMPLO3.HTML.................................................................................................................. 47
INSERINDO TABELAS ............................................................................................................................. 47
<TABLE> </TABLE>............................................................................................................................... 47
TAGS ESPECIAIS PARA TABELAS ........................................................................................................ 48
<TABLE> outras tags </TABLE> ......................................................................................................... 48
<CAPTION> Legenda da Tabela </CAPTION>..................................................................................... 48
<TR> outras tags </TR> - TABLE ROW (LINHA) .................................................................................. 48
<TH> contedo de cabealho por coluna </TH> - TABLE HEADER....................................................... 48
<TD> contedo da clula </TD> - TABLE DATA................................................................................... 48
EXTENSES ADICIONAIS..................................................................................................................... 48
BORDER=VALOR.............................................................................................................................. 48
WIDTH=VALOR ................................................................................................................................. 48
ALIGN=CENTER, LEFT e RIGHT........................................................................................................ 49
VALIGN=TOP, MIDDLE, BOTTOM...................................................................................................... 49
NOWRAP........................................................................................................................................... 49
COLSPAN = QUANTIDADE_DE_COLUNAS........................................................................................ 49
CELLSPACCING=VALOR................................................................................................................... 49
CELLPADDING=VALOR..................................................................................................................... 49
EXEMPLOS DE TABELAS...................................................................................................................... 49
COR PARA TODA A TABELA ................................................................................................................. 51
CORES DENTRO DAS CLULAS........................................................................................................... 52
EXERCCIOS ............................................................................................................................................ 53
TEXTOS QUE SE MOVEM........................................................................................................................ 54
CARACTERES ESPECIAIS....................................................................................................................... 55
ORGANIZANDO ARQUIVOS PARA PRXIMO ASSUNTO ........................................................................ 55
FRAMES................................................................................................................................................... 56
ENTENDENDO OS FRAMES.................................................................................................................. 56
FRAMESET OU FRAME DOCUMENT..................................................................................................... 56
PLANEJANDO O FRAMESET................................................................................................................. 57
CRIANDO FRAMES ........................................................................................................................... 57
USANDO A TAG FRAMESET ............................................................................................................. 58
EXERCCIO........................................................................................................................................... 59
TAGS FRAME, PARA QUE SERVEM? ...................................................................................................... 59
CONTEDO BSICO DOS FRAMES ...................................................................................................... 60
EXERCCIOS......................................................................................................................................... 62
MODELO DE FRAME EFICIENTE....................................................................................................... 62
CONCLUINDO O DESAFIO1.HTML .................................................................................................... 62
INLINE FRAME......................................................................................................................................... 63

Apostila HTML - Fabio Miyasaki PDF

Enviado por

Dados do documento

Título original

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

Apostila HTML - Fabio Miyasaki PDF

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

HiperText Markup Language

Você também pode gostar