1ª PARTE
CAPÍTULO 1
Neste cap
í
tulo iremos abordar conceitos sobre:
1.
Redes
2.
Internet
3.
Intranet
4.
Extranet
REDES E INTERNET
Para que voc
ê
possa entender o que
é
e como funciona a Internet
é
necess
á
rio primeiro compreender o que
é
uma rede de computadores.
Uma
rede de computadores
consiste, na forma mais simples de sua
defini
çã
o, na conex
ã
o de diversos computadores por meio de cabos e outros tipos
de hardware. Podendo trocar dados entre si.
A intera
çã
o entre computadores envolve a movimenta
çã
o de muitos dados,
mas
é
dif
í
cil de se mover muitas coisas, incluindo-se dados, atrav
é
s de uma longa
dist
â
ncia. Ent
ã
o a intera
çã
o de computadores normalmente come
ç
a com
computadores no mesmo escrit
ó
rio ou no mesmo pr
é
dio conectados a uma rede
local. O termo
rede de área local
ou
LAN
, descreve um grupo de computadores
geralmente conectados por mais de 300 metros de cabo, a qual interage e permite
o compartilhamento de recursos. As redes locais s
ã
o:
Ethernet, Token-ring e a
rede remota
(
WAN
). As redes Ethernet e Token-ring s
ã
o dois tipos diferentes de
redes que podem ser conectadas
á
Internet.
Nas redes Token-ring os dados s
ã
o transmitidos em "Tokens" de
computador para computador, em uma configura
çã
o em anel ou estrela. Em redes
Ethernet, os dados passam de um servidor para um computador na rede. Alguns
sistemas de rede n
ã
o usam qualquer cabo. A aparelhagem de redes remotas (ou
sem fio) estendem as redes al
é
m do alcance dos cabos de cobre ou dos cabos de
fibra
ó
tica.
As redes locais s
ã
o agrupadas em
redes regionais
. Que podem atrav
é
s
dos Backbones ter acesso
á
outras redes regionais. Um
Backbone é
uma
estrutura b
á
sica para transmiss
ã
o de dados na Internet extremamente veloz, s
ã
o
as espinhas dorsais do tr
á
fego.
A Internet é uma interconexão de diversas redes através de linhas de
alta capacidade chamadas Backbones, construídos para comportar o grande
tráfego de informações que circulam na Internet. É um local público e não
pertence nem é operada por nenhuma empresa.
Ag
ê
ncias governamentais ou companhias privadas s
ã
o as respons
á
veis
pela constru
çã
o destas estruturas. As companhias de alcance de longa dist
â
ncia
Vamos entender como funciona todo o processo desde ligar o computador
at
é
receber ou enviar uma mensagem para um computador do outro lado do
mundo ou em outro estado do nosso pa
í
s.
Al
é
m do computador diversos outros tipos de hardware ser
ã
o envolvidos ao
se navegar na Internet. Esse hardware
é
projetado para transmitir dados entre
redes e forma grande parte do "elemento de coes
ã
o" que une a Internet. As cinco
partes mais importantes s
ã
o: Hubs, pontes, portas de comunica
çã
o(gateways),
repetidores e roteadores.
Os
Hubs
s
ã
o importantes porque ligam grupos de computadores entre si e
permitem que os computadores se comuniquem uns com os outros. As
pontes
ligam as redes locais (LANs) umas
á
s outras. Permitem que os dados destinados
á
outra LAN sejam enviados a partis delas, enquanto mant
ê
m simultaneamente
dados locais dentro de sua pr
ó
pria rede. As portas de comunica
çã
o (gateways)
s
ã
o semelhantes
á
s pontes, mas tamb
é
m traduzem dados de um tipo de rede
para outro.
Os dados sempre atravessam grandes dist
â
ncias quando viajam atrav
é
s da
Internet, o que pode criar um problema, pois o sinal que os envia pode
enfraquecer com a dist
â
ncia. Para evitar que isto ocorra, os repetidores amplificam
os dados, em determinados intervalos, para que o sinal n
ã
o enfraque
ç
a.
Os dados para serem enviados de um local para outro s
ã
o divididos em
pacotes pelo TCP (Protocolo de Controle de Transmiss
ã
o). Os roteadores
garantem que estes pacotes cheguem ao seu destino. E ,posteriormente, estes
pacotes s
ã
o montados formando a informa
çã
o como foi enviada.
Agora que vimos o hardware envolvido, iremos entender todo o processo.
Os dados s
ã
o divididos em pacotes pelo TCP. Pois a Internet
é
uma rede
comutada, onde n
ã
o existe uma conex
ã
o permanente entre o emissor e o
receptor. Esses pacotes s
ã
o enviados de seu computador para a sua rede local,
provedor de servi
ç
os Internet ou para um servi
ç
o comercial on-line, via modem.
Caso o destino seja uma outra rede local dentro da rede regional a qual as duas
fazem parte, a transmiss
ã
o ter
á
um roteador captando estes dados do provedor,
servi
ç
o comercial ou rede local e transmitindo para o roteador da outra rede local.
No caso da transmiss
ã
o entre v
á
rias redes regionais, os pacotes ser
ã
o
comunica
çã
o mais importantes fazem: o TCP e o IP. TCP
é
o Protocolo de
Controle de Transmiss
ã
o e o IP
é
o Protocolo Internet.
INTRANET E EXTRANET
Uma intranet
é
uma internet interna. O acesso a ela normalmente se
restringe a funcion
á
rios da empresa. Como uma intranet pode abranger o globo,
muitas
organiza
çõ
es
consideram
mais
barato
compartilhar
informa
çõ
es
corporativas dessa maneira. Os protocolos e as regras s
ã
o os mesmos da
Internet, com a diferen
ç
a que se trata de uma rede fechada da empresa,
dispon
í
vel somente aos funcion
á
rios conectados a ela. As informa
çõ
es dispon
í
veis
na intranet s
ã
o informa
çõ
es corporativas, geralmente de natureza propriet
á
ria.
Uma empresa estabelece uma intranet instalando o protocolo TCP/IP, um
servidor Web (cujo conceito veremos no pr
ó
ximo cap
í
tulo) e navegadores Web,
browsers. Os documentos da empresa s
ã
o convertidos para formato HTML e
colocados no(s) servidor(es) Web da intranet. Assim, os funcion
á
rios da empresa
usam seus navegadores Web para visualizar esses documentos, basta digitar o
endere
ç
o local do documento que desejam ver, de forma semelhante
á
inser
çã
o
de um endere
ç
o Internet.
Fazer parte de uma intranet n
ã
o impede necessariamente o acesso
á
Internet.
É
poss
í
vel ter os dois ao mesmo tempo.
A
EXTRANET é
um grupo de intranets interconectadas. As empresas que
fazem neg
ó
cios entre si podem formar extranets para compartilhar determinados
tipos de informa
çã
o.
COMO NASCEU A INTERNET
Em 1969, a ARPA, do departamento de defesa dos EUA, construiu uma
rede experimental de computadores chamada ARPAnet. A ARPAnet uniu
pesquisadores, militares e universit
á
rios, permitindo que os recursos de seus
computadores fossem compartilhados. A rede tamb
é
m permitiu que se fizesse
pesquisas militares nas universidades e que os militares se comunicassem, tanto
entre si como com outros, via e-mail.
Com o tempo, a ARPAnet cresceu e se adaptou aos desenvolvimentos
tecnol
ó
gicos. Como resultado grandes companhias constru
í
ram redes baseadas
na ARPAnet e se conectaram a ARPAnet, em especial a NSF (Funda
çã
o Nacional
para a Ci
ê
ncia).
O tr
á
fego cresceu tanto que a rede foi dividida em militar e civil. Com a
descentraliza
çã
o ela se tornou uma vasta rede de companhias, universidades,
individuos, pesquisadores e governo, ou seja, qualquer pessoa que dispusesse de
um computador poderia se conectar. Antes era chamada de NSFnet e em 1987
passou a se chamar Internet.
Hoje diversos grupos orientam o crescimento da Internet, como o W3C,
World Wide Web Consurtium, que orienta os padr
õ
es de evolu
çã
o; o InterNIC,
fundado pela Funda
çã
o Nacional de Ci
ê
ncia, que controla o Sistema de Nomes de
Dom
í
nio; etc. Mas isto n
ã
o quer dizer que estas empresas controlam a Internet,
elas orientam seu crescimento e ajudam, como outras, a coordenar.
No in
í
cio, foi o governo federal, as ag
ê
ncias de pesquisas, os laborat
ó
rios e
as universidades que deram forma a Internet. Mais recentemente, s
ã
o os
interesses comerciais que t
ê
m determinado a forma de sua infra-estrutura.
Para solucionar problemas como nomes de dom
í
nio, velocidade, etc., e j
á
est
á
funcionando a "Internet 2". Uma rede altamente veloz que est
á
sendo
utilizada somente por alguns org
ã
os governamentais e Institui
çõ
es de n
í
vel
Superior Federal.
Normalmente, para n
ó
s pobres mortais, a velocidade de conex
ã
o chega a
56 Kbps. Na Internet 2 a velocidade de conex
ã
o pode chegar a 2,4 Gigabytes por
EXERCÍCIOS
1. Defina Internet e redes locais.
2. O que uma rede comutada?
3. Conceitue:
A. Backbone
B. Hub
C. Roteador
D. Repetidor
4. De forma simples e concisa mostre como funciona, de maneira geral, o envio
de informa
çõ
es pela Internet.
5. O que
é
uma Intranet?
6. Se estiver trabalhando em uma Intranet em uma empresa poder
á
ter acesso a
Internet?
7. O que uma Extranet?
1ª PARTE
CAPÍTULO 2
Este cap
í
tulo tratar
á
:
1. O que
é
necess
á
rio para se criar p
á
ginas para a Web.
2. A diferen
ç
a entre p
á
ginas Web, Home Page e apresenta
çã
o Web
3. Navegadores
4. O que
é
site, Host, Provedor e Servidor Web
5. Protocolos
A WORLD WIDE WEB
A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento e outros documentos através de pontes chamadas de links.
A quantidade de informação que está disponível no universo da Internet é mais do que você poderia assimilar durante uma vida inteira, e ela se encontra das mais variadas formas. Podendo se perder facilmente. Assim é muito importante o sistema de navegação, ou seja, a forma como as informações estão dispostas.
Poderia descrever a World Wide Web como um sistema de informação em hipertexto, gráfico, distribuído, independente de plataforma, dinâmico, interativo e global, utilizado na internet.
O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma não-linear, com base nas informações que deseja obter em seguida. A Web fornece recursos de imagens e animação fantásticos.
É independente de plataforma pois você pode acessar as informações disponíveis na Web igualmente bem a partir de qualquer computador, sistema operacional e monitor de vídeo.
Como o volume de informações é muito grande ela é distribuída por diversos sites (um Site da Web é um local que divulga algum tipo de informação. Quando vocêexibe uma página Web, o seu navegador se conecta a esse site da Web para obter essas informações). Estas informações contidas nestes sites são encontradas através de URLs (endereço na internet).
A Internet ainda é interativa, ou seja, ela interage com o usuário. Não é como a TV.
1. HOME PAGE, PÁGINA WEB, SITE E
APRESENTAÇÃO WEB?
Uma página Web é um elemento específico de uma apresentação da Web que está contido em uma estrutura. A primeira página de uma apresentaçãoéchamada dehome page.
Uma apresentação da Web é um conjunto de páginas Web estruturadas sobre um determinado conteúdo, este conteúdoéaquilo que você está colocando na Web. Informações, texto de ficção, imagens, ilustrações, programas, textos humorísticos, diagramas, jogos, etc. Tudo issoéconteúdo.
Esta apresentação, como outras, ficam armazenadas em um local chamadoSite.
O Site é hospedado por computadores conectados permanentemente a Internet e recebem o nome deHost.
Para entrar na net é preciso fazer uma conexão direta ou usar o computador Host. O provedor de serviços Internet (ISP) atua como o computador Host (aquele computador que fica conectado permanentemente na Internet para lhe prover o acesso a mesma). ISPé uma empresa que fornece o gateway necessário para acessar a Internet.
Os ISPs podem ser de vários tipos, oferecendo diversos níveis de serviço:
Acesso indireto
Você obtêm acesso através de um serviço on-line, como UOL, SBT On-Line e STI, entre outros, no Brasil.Énecessário ser membro do serviço. A vantagem é que estes serviços facilitam a navegação, oferecendo mecanismos de pesquisa personalizados e vínculos que levam a locais interessantes na Web. A desvantagem é que acessar um serviço on-line por meio da Internet consome mais tempo do que adotar um caminho mais direto.
Acesso discado
A conexão é feita através de um modem. O ISP age como seu gateway para a Internet, mas não fornece serviços além de correio eletrônico e acesso á Internet. A vantagem é o menor esforço para navegar e colher informações. A desvantagdem são os serviços de viagens, games e grupos de bate-papo entre os membros.
Como se cria uma página web?
Uma página Webé composta de textos e comandos especiais (tags) de HTML, um acrônimo de Hypertext Markup Language. Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto.
Para que o conteúdo de um documento HTML possa ser formatado e exibido na Internet demos usar um programa chamado browser, o navegador. Ele lê o conteúdo do arquivo, interpreta os comandos e exibe sua página. Como já foi citado acima, existem diversos tipos de browsers disponíveis no mercado.
O código pode ser escrito usando o mais simples editor de texto, como o bloco de notas do Windows. Porém a forma mais prática e produtiva é utilizar um editor HTML. Há vários no mercado como: HotDog Professional (www.sausage.com), o SiteAid (baixado do site www.siteaid.com), o FrontPage da Microsoft, etc.
É preciso estar conectado para visualizar a página que criei?
Não, o browser funciona independente de se estar conectado a Internet. A melhor forma de se trabalhar desenvolvendo uma página HTML é off-line, desconectado.
Primeiro você cria as páginas em seu computador e as testas por meio do browser. Depois, deve colocá-las em um servidor Web para que outras pessoas também possam visualizá-la.
2. OS NAVEGADORES
Para visualizar toda informação disponível na Internet é necessário um Browser, navegador. Há vários disponíveis no mercado. Os mais conhecidos são o Internet Explorer e Netscape Navigator.
Os navegadores podem acessar vários tipos de dados, não só do protocolo FTTP mas também FTP, Golpher, Usenet News, Telnet, etc.
sistema são as duas tarefas que compõem a base da funcionalidade de um navegador.
3. SERVIDOR WEB
Para exibir páginas na Web e navegar por elas, você precisará apenas de um navegador da Web. Para divulgar páginas na Web, você precisará, na maioria dos casos, de um servidor Web.
Servidor Web é o programa queé executado em um site da Web e que é responsável por atenderás solicitações de arquivos feitas pelo navegador da Web. Você precisaráde um servidor Web para divulgar documentos na Web.
4. PROTOCOLOS INTERNET
Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocolos. As pessoas que desenvolvem essas regras não foram apenas inteligentes; elas criaram nomes interessantes, como Golpher (esquilo) e World Wide Web (teia mundial). Os extensos nomes descritivos e geralmente difíceis de lembrar foram reduzidos a acrônicos como HTML.
Internet Protocol (IP)
Este é um dos protocolos mais básicos. O IP é o sistema que define o "local", ou endereço IP, das redes que compõem a Internet. E um certo sentido, o IP forma o "mapa" da Internet e cada rede pode ser contatada em um ponto localizado nesse mapa.
Transmission Control Protocol (TCP)
TCP é o protocolo que define a estrutura dos dados transmitidos que já foi explicado num capítulo anterior, nº01.
File Transfer Protocol (FTP)
Protocolo desenvolvido para a transmissão de mensagens longas entre duas pontas.
Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP) Juntos eles comandam a WWW, World Wide Web. O HTML define um método
computador e executar programas nele, como se estivesse sentado diante de sua própria máquina.
Gopher
Os servidores que usam protocolo gopher apresentam seu conteúdo na forma de submenus.
NNTP (Network News Transfer Protocol)
Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. Várias pessoas podem então ler notícias como o Outlook Express News.
EXERCÍCIOS
1. O queéum browser? E um editor HTML? 2. Defina: a) Site b) Home Page c) Página Web d) Apresentação Web e) Servidor Web f) Provedor g) Host
3. O queé o protocolo TCP/IP? E por que eleétão importante? 4. Que programas são necessários para se criar uma página HTML? 5. Qual a importância de um servidor Web?
6. Defina as formas de acesso e faça comentários das vantagens e desvantagens de cada caso.
2ª PARTE
CAPÍTULO 3
Este cap
í
tulo t
ê
m como objetivo:
1. Organiza
çã
o do conte
ú
do
2. Formas de navega
çã
o
3. Storyboard
ORGANIZAÇÃO E NAVEGAÇÃO
1. O QUE PRETENDE DIVULGAR?
Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. Eis aqui alguns tipos de conteúdo mais comuns na Web, no momento:
v Informações pessoais: informações sobre você, por exemplo.
v Hobbies ou interesses especiais: filmes, motocicletas, etc.
v Publicações: como jornais, revistas.
v Perfis de empresa: o que uma empresa faz ou vende, etc
v Documentação On-line: desde manuais, guias de treinamento, dicionários, etc.
v Catálogos de compras: comercialização de artigos.
v Lojas on-line.
v Pesquisas de opinião: a interatividade com o usuário através de formulários, caixas de sugestões, etc.
v Educação On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distância através da Web.
O único limite da Webé a sua própria vontade. Por isso, se a sua idéia não estiver nesta lista ou parecer meio maluca ou ainda não estiver amadurecida, pare e navegue um pouco pela Internet. Com certeza encontra excelentes idéias e poderáamadurecer as suas e ter muitas outras.
2. ESTABELEÇA SEUS OBJETIVOS!
Você deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentação? Eles lerão a página inteira ou apenas uma parte dela?
Antes de começar entrar com códigos ou imagens você deve pensar o que quero colocar em minha página? Como será estruturada? Ela está adequada ou não ao meu público alvo?
Os objetivos não precisam ser grandiosos, mas a determinação irá ajudá-lo a elaborar, organizar e codificar suas páginas com uma maior
idéias, a forma que imagina sua página, etc. Assim, ficará bem mais fácil de começar seu trabalho.
3. DIVIDA SEU CONTEÚDO EM TÓPICOS
Crie uma lista com os principais tópicos, a princípio não importa a ordem. Estaéuma forma de começar a se organizar.
Sua lista poderá Ter quantos tópicos desejar, mas se perca listando uma quantidade enorme de tópicos (seu leitor poderá se cansar e se perder em meio a tantas opções).
4. ORGANIZAÇÃO E NAVEGAÇÃO
Aqui descreverei algumas das estruturas e navegação e suas características e ainda considerações importantes como:
v Os tipos de informação que se adaptam melhor a cada estrutura.
v Como os leitores conseguem se deslocar pelo conteúdo de cada tipo de estrutura para encontrar as informações de que precisam .
v Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar o caminho de volta até uma posição conhecida.
Ao ler esta parte reflita como suas informações se encaixaria em cada uma. Você poderá combinar, até mesmo, duas estruturas e criar uma nova forma de navegação.
FORMAS DE ORGANIZAÇÃO
1. HIERARQUIAS
A maneira mais fácil e mais lógica 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.
HOME PAGE
Em uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram na estrutura. Nas hierarquias, a home page fornece uma visão geral do conteúdo que estásubordinado a ela e ainda define os principais vínculosás páginas dos níveis inferiores da hierarquia.
Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil de localizar informações. Mas procure não incluir muitos níveis para não aborrecer os leitores. Pois estes, após ter de selecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais para prosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.
Uma organização linearémuito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las. As estruturas lineares são ideais para apresentar, no ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador.
3. ESTRUTURA LINEAR COM ALTERNATIVAS
Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificações alternativas que partam de umúnico tronco. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo da estrutura, ou continuar se ramificando em níveis inferiores seguindo caminhos próprios atéchegar a um "fim".
Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia, caso precicem rever alguma etapa ou jáconheçam alguma parte do conteúdo.
4. COMBINAÇÃO DAS ESTRUTURAS LINEAR E
HIERÁQUICA
Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida, porém lineares, são apresentados no ambiente on-line. Um exemplo são os famosos FAQ ( Frequently Asked Questions).
A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.
Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos para o leitor avançar, retroceder, retornar ao início e subir um nível.
O STORYBOARD
A próxima etapa do planejamento da sua apresentação da Web consiste em determinar o conteúdo que será apresentado em cada uma das páginas e criar alguns vínculos simples que possibilitem a navegação por essas páginas.
O StoryBoard de uma apresentação é um conceito emprestado do cinema, em que cada cena e cda tomada de câmeraé esboçada na ordem em que ocorre no filme. O storyboard fornece uma estrutura e um plano globais para o filme, que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa no filme.
O uso de storyboard, uma técnica cinematográfica, consiste no processo de criação de um resumo com sketh (rascunho) da aparência final do seu trabalho antes de você efetivamente pôr em prática suas idéias. O uso de storyboard ajuda-o a visualizar a apresentação como um todo e a prever sua forma final.
Esta técnica fornece um esboço geral de como a apresentação Web irá ficar quando estiver pronta, indicando os tópicos que serão incluídos em cada página, os vínculos básicos e talvez até mesmo uma idéia conceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. No caso de grande documentação, o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Para estruturas muito pequenas talvez não seja necessário criar um storyboard.
DICAS PARA SEU STORYBOARD
1. Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a manutenção e vinculação pode se tornar maçante.
2. Defina bem a forma de navegação entre as páginas. Se houver formas alternativas, torne a navegação para os leitores a mais intuitiva possível. 3. Tome cuidado com o que seráincluindo na home page, lembre-se, ela será
a porta da sua apresentação.
]
DIAGRAMAÇÃO
A disposição de imagens, textos, vídeos, etc. Tudo que você deseja colocar em sua página precisa ser colocado de forma agradável ao leitor. Daí abordarmos, de forma geral, a diagramação. Esta palavra vêm do mundo dos impressos. Trata-se da disposição de elementos que compõem uma página.
Deve ser observado o tamanho das fontes, disposição das imagens, forma como o texto será apresentado, etc. Uma boa diagramação também garante o retorno do internauta.
EXERCÍCIOS
1. Por que é tão importante, antes de começar a construir uma apresentação Web, definir objetivos e tópicos? O que maisénecessário?
2. Descreva cada forma de organização de páginas citada acima. Faça uma observação sobre o que vocêcompreendeu de cada uma.
3. O queéstoryboard e qual a sua utilidade?
4. Em que casosé aconselhável usar o storyboard?
5. Vamos começar a planejar sua Home Page pessoal. Pense no que gostaria de colocar em suas páginas, se haverá links para outras partes da mesma página e os links para outras páginas, quais os tópicos abordados, etc. Faça um storyboard da sua apresentação web.
2ª PARTE
CAPÍTULO 4
Este cap
í
tulo t
ê
m como objetivo:
1.
Tratar das etapas do projeto de um Website
2.
Quais os profissionais envolvidos
3.
Administra
çã
o do site
4.
Dicas para n
ã
o cometer erros graves na hora de projetar e
construir um Website
PROJETO DE WEBSITE
1.HIPERTEXTO
É a utilização da HTML como linguagem para desenvolvimento da sua página. Dominá-laéimportante para um bom desenvolvimento do seu projeto.
2.WEB DESIGN E VISÃO DO PROJETO
A maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite, o queéum erro.
O conceito de Web Design envolve todos os aspectos da construção de um site, desde o desenho de sua estrutura de navegação e forma de disponibilização da informação atéo desenvolvimento do projeto gráfico.
A construção de um Website deve, antes de mais nada, ser entendida como um projeto, composto de fases e desenvolvido por pessoas de backgrounds diferentes.
3.CONTEÚDO E FORMA
O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar?
Estas perguntas devem sempre estar na cabeça das pessoas de uma equipe de construção de sites.
A primeira muito relaciona-se ao público alvo. Para qual tipo de público você está disponibilizando informação? Quais são as prioridades e interesses deste público? Que tipo de conexãoémais usada por ele?
As respostas para a segunda pergunta certamente envolvem três pontos: o 1º é o conteúdo.É o elemento central. O 2º pontoé o design do site
público alvo. Outro ponto é a atualização para que não perca uma das principais características da Internet: a dinamicidade.
4.EQUIPE PARA CONSTRUÇÃO DE UM WEBSITE
A construção de um Website exige uma equipe com backgrounds diferentes.
A equipe de profissionais adequada seria composta:
a) Analistas de sistemas (com experiência em gerência de Informação), responsável pela organização da informação;
b) Design Gráfico, responsável pelo projeto gráfico;
c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript, CGI, etc;
d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Gráfico (ilustradores, digitadores, etc.).
A equipe deverá ter um coordenador, responsável em fazer o trabalho fluir de forma eficiente, dentro de um cronograma aproveitando o máximo de cada profissional.
Depois do site construído surgirá uma outra pessoa: o WebMaster, que seráresponsável pela administração do site.
É muito haver o acúmulo de funções por membros da equipe. Mas é importante definir o papel de cada na construção do site.
FASES NA CONSTRUÇÃO DE UM WEBSITE
1ª Fase : Organização da Informação
A primeira etapaéa organização da informação que irácompor seu site. O Analista de sistemas deverácolher toda informação e analisa-la, preparando-a ppreparando-arpreparando-a preparando-a etpreparando-appreparando-a seguinte, onde se inicipreparando-aráo design do site.
Critérios de avaliação das informações:
Qualquer documento pode ser disponibilizado através da Web mas alguns se tornam maisúteis quando adequados as novas características dessa nova mídia. Aqui estão alguns dos critérios que deverão ser observados para o projeto do site:
1. Material que tire vantagem da estrutura não linear de navegação do hiperdocumento.
Ex.: manuais, guias, grandes bases de dados textuais, etc...;
2. Material que é mais valoroso se atualizado freqüentemente e mais facilmente, ex.: agenda de reuniões, agenda telefônica, calendários, etc ...; 3. Material que possa ser totalmente substituído por uma impressão, ex.:
gráficos e textos (imagens de alta qualidade não são recomendáveis); 4. Material que requer intercâmbio de informações, ex.: formulários de
pesquisa, fichas de inscrição, etc ...
2ª Fase : Conceituação do site e definição da estrutura
de navegação
Normalmente nesta etapa envolve uma ou mais reuniões de criação. Todos os membros da equipe devem participar das reuniões de criação, cujo objetivo éobter o maior número de idéias possíveis para a criação da estrutura de navegação e do projeto gráfico. O Coordenador da equipe, o Design Gráfico e o Analista de Sistemas, com suas respectivas visões de projeto, coordenam essas reuniões, para que as sugestões deáreas diferentes possam se integrar. Uma vez discutidas e analisadas todas as sugestões de áreas diferentes
3ª Fase: Montagem do Site
Uma vez definida a estrutura de navegação, os membros da equipe poderão então trabalhar cada um em sua área: o Design Gráfico e seus Assistentes desenvolverão o projeto gráfico, enquanto o Analista de Sistemas e programadores montarão a estrutura de navegação (seja em HTML, Java, JavaScript ou no que tiver sido escolhido como mais adequado para a construção do site).
4ª Fase: Testes
Antes de ser disponibilizado para o público em geral é importante testar a navegação de todo o site, checando os links de texto e imagens. É importante entrar no site a partir de várias plataformas e conexões diferentes, para testar a velocidade de carga e consertar falhas de diagramação, que pode mudar, de acordo com o tamanho de monitor e resolução usada.
DICAS E CONSIDERAÇÕES IMPORTANTES
1. Na criação do projeto gráfico, tente sempre optar por soluções que melhor se adaptem a plataforma mais usada. Por exemplo: monitor 14 polegadas com resolução de 640x480, faça com a melhor diagramação das páginas aconteça quando o site é visto nesse tipo de monitor e resolução. Caso o seu site deva ser diagramado para uma resolução ou tamanho de monitor diferentes do mais usado, informe no site.
2. Num projeto gráfico deve sempre se perguntar se sua apresentação ficou adequada ou não ao que seu cliente desejava e ao seu público alvo.
3. Para ter uma garantia que suas imagens serão sempre bem visualizadas, procure trabalhar com imagens paletizadas (formato .gif). O melhor resultado para isso será trabalhar suas imagens em RGB e depois indexá -las com o menor número de cores possível. Caso precise utilizar imagens True Color, salve-as em formato .jpeg, que resultaráem arquivos pequenos.
6. O conteúdo e forma como eleé apresentado serão os principais atrativos de suas páginas, a não ser que o ponto chave sejam as imagens. Por isso, não pense que a netéigual a outras mídias.
7. Direitos autorais: A proteção de direitos autorais não costuma ser muito evidente na Web. O desejo original de uma página não é protegido. Mas qualquer texto, gráfico, vídeo ou áudio originais deve ser protegido. Um link ou URL não é protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido pelos direitos autorais.
8. A netiqueta e Domínio público: A Web foi criada com base em ser capaz de atar links de hipertexto de qualquer outra localização da rede. Consequentemente, quando você disponibiliza um site, implica em você permitir a outros "linkar" sua página de Web, porém a netiqueta recomenda que se peça permissão aos Webmasters sempre que possível.
ADMINISTRAÇÃO DE UM SITE
Todo WebSite deve ter um Webmaster, ele é a autoridade máxima no site e coordena tanto seu desenvolvimento quanto sua manutenção além de responder a toda correspondência enviada ao site. Seu endereço eletrônico deve ser divulgado na primeira página e em todas as outras que exijam um processo interativo.
1. DIVULGAÇÃO
Com o potencial de audiência de milhões encontrados na Internet é necessário utilizarmos todos os recursos disponíveis nesta para conseguirmos atingir uma audiência chave. As principais formas de divulgação on-line são:
a) E-mail: o envio de propaganda não solicitada pela Interneté uma prática não recomendada.
b) Search engines: as informações de seu site devem ser organizadas da melhor forma possível para a captura pelos inúmeros recursos de busca existentes na rede.
c) Banners: trata-se de uma tarja com informações promocionais sobre seu site que deve aparecer estrategicamente localizada nas páginas de sites que vendem espaço publicitário. São na verdade imagens clicáveis para o site em promoção.
2. ESTATÍSTICAS
Mostram as páginas mais visitadas, horários mais visitados, dias mais visitados, etc. Assim é possível definir o perfil do usuário e desta forma atualizar o site de forma a atrair sempre o maior número de visitantes.
3. CHECAGEM DE LINKS
4. ORGANIZAÇÃO DE ARQUIVOS E DIRETÓRIOS
Os diretórios devem ser estruturados de acordo com a própria estruturação da informação. Se as informações estão estruturadas por módulos e submódulos estas gerarão diretórios e subdiretórios. Em um ambiente Unix o arquivo principal de cada módulo deve ser sempre chamado de "index.html", inclusive o arquivo correspondente a primeira página do site (home). Isto, porque, quando chamarmos o endereço da página não precisaremos escrever o nome do arquivo. O sistema assume o arquivo "index.html" como "default" para a página principal. Os arquivos e diretórios devem ter nomes que identifiquem seu conteúdo e as imagens devem ser colocadas em um diretório específico. A cada nova atualização uma cópia backup da versão anterior de cada arquivo atualizado deve ser feita.
EXERCÍCIO
1. O queéum WebDesign?2. Quais as principais preocupações no projeto de um WebSite?
3. Quais seriam os profissionais indicados para se compor uma equipe para projetar e construir um site?
4. Quais as fases na construção de um site? Dê as características e faça observações suas para cada uma.
5. Qual o melhor formato de arquivo para se trabalhar com imagens? 6. Queméresponsável pela administração e atualização de um site? 7. Quais as formas de divulgação de um site?
3ª PARTE
CAPÍTULO 05
Este cap
í
tulo abranger
á
:
1. Uma linguagem de marca
çã
o: HTML.
2. Tags ou comandos
HTML: UMA LINGUAGEM DE MARCAÇÃO
A HTML é uma linguagem de marcação. Criar um documento em uma linguagem de marcação significa que você começa com o texto da sua página e inclui tags especiais no início e no final de determinadas palavras ou parágrafos.
As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador.
Os arquivos recebem a extensão .html e possuem como ícone a
seguinte imagem:
O ícone a esquerda pertence ao Netscape e o a direita ao Internet Explorer 5.
A primeira página a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do provedor que hospeda a página.
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As tags são identificadas por estarem entre os sinais < > e < / >.
Entre os sinais < > são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão /, indicando que a tag está finalizando a marcação de um texto.
O formato genérico de uma tagé:
<nome da tag> texto</nome da tag> Mas algumas tags não possuem finalização.
programa, ele deve possuir alguns comandos básicos que sempre deverão estar presentes. Alguns browsers até dispensam seu uso, porém é melhor assumir como parte fundamental do programa tais comandos.
Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o corpo do programa. Todo programa deve iniciar com o comando, tag,<html>e ser encerrado com o comando</html>. Esse par de comandosé essencial. Aárea de cabeçalhoéopcional eédelimitada pelo par de comandos <head> e </head>. Estes comandos para cabeçalho são usados para especificar alguns poucos comandos da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem eles. Maséconveniente usá-los, pois o título da página é acrescentado através deles.E ainda temos as tags <Title>e</Title>, estes comandos delimitam o texto que iráaparecer na barra de título do browser.
A maioria dos comandos será especificado no corpo do programa queé delimitado pelas tags<body>e </body>.Éum comando obrigatório.
<HTML> </HTML> Esta tag marca o início do programa HTML <HEAD> </HEAD> Esta tag marca início e fim de cabeçalho
<TITLE> </TITLE> Esta tag delimita o texto que irá ser visualizado na barra de título do browser.
<BODY> </BODY> Esta tag delimita o corpo do programa, aonde a <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
1. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem.
TÍTULO
Éo texto que aparece na barra de título do browser. IMAGEM
São figuras, desenhos e fotos usados para ilustrar a página.
TEXTO
É a informação mais comum dentro da página. Pode ser formatado através de vários comandos.
LINK
É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet. Uma figura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local.
CABEÇALHO
São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho.
2. TÍTULO
O título de uma página web indica qual o assunto abordado e irá aparecer na barra de título do browser. Este título é utilizado por programas de lista (hotlist) do seu navegador e também por outros programas que catalogam páginas da Internet. Para atribuir um título a página vocêdeveráutilizar a tag:
<Title> </Title>.
Esta tag sempre será incluída no cabeçalho (entre as tags <Head> </Head> e descrevem a mesma).
Considerações sobre o título: 1. Vocêpoderáter apenas um título
2. texto deveráser simples e não poderáter outras tags
3. Escolha um texto curto e que descreva o conteúdo da página
LINK CABEÇALHO
TÍTULO IMAGEM
3. CABEÇALHOS
Os cabeçalhos são usados para dividir seções do texto, como capítulos de um livro. A HTML divide seis tamanhos de cabeçalhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolvem, uma linha antes e depois e além disso dão um efeito de negrito. O maior tamanho é o H1 e o menoréo H6.
<H1>Texto</H1> Experimente o seguinte código:
</html>
<head><title>Cabeçalhos</title></head> <body> <h1>C</h1> <h2>A</h2> <h3>B</h3> <h4>E</h4> <h5>ç</h5> <h6>A</h6> <h5>L</h5> <h4>H</h4> <h3>O</h3> <h2>S</h2> </body> </html>
Vejamos um exemplo de outro código em HTML:
<html>
<head><b>A FORMAÇÃO DE UM WEBMASTER</b></HEAD> <body>
<p>
A formação de um <i>Webmaster</i> envolve diversos tipos de conhecimentos.<br>
Afinal, ele seráo responsável pela administração de um site. </body>
<B> </B> Aplica o estilo negrito ao texto <I> </I> Aplica o estilo itálico ao texto. <P> </P> Inicia um novo parágrafo. <BR> Faz uma quebra de linha.
4. PARÁGRAFOS
Para forçar o início de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na Segunda linha após o final do parágrafo anterior, deve ser usado o comando<p>. Esse comando pode aparecer individualmente ou em par:<p> </p>.
Quando um comando <p> é inserido em um local do programa, o browser irá sempre avançar uma linha em branco, posiciona-se na linha seguinte ao comando<p>.
5. QUEBRA DE LINHA
O comando <br> faz uma espécie de quebra de linha. Este comando inseri uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido, caso esteja no meio de uma linha e não em seu final.
A função deste comando é avançar para a linha imediatamente após aquela em que ele ocorre.
EXERCÍCIOS
1. Qual a extensão de um arquivo de um programa em HTML? 2. A primeira página de um site geralmente recebe que nome? 3. Escreva a estrutura básica de um programa HTML.
4. Quais os principais elementos exibidos em uma home page? 5. O queélink?
6. Qual as função das tags abaixo: a) <HTML> </HTML> b) <HEAD> </HEAD> c) <TITLE> </TITLE> d) <H2> </H2> e) <BODY> </BODY> f) <B> </B> g) <I> </I> h) <P> i) <BR>
7. Utilize o que você já aprendeu nesta seção e crie seu primeira página HTML. Use a linguagem HTML e faça uma página falando das suas expectativas para este curso, como pretende usar o conhecimento que está adquirindo e quais outros cursos que pretende fazer. Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o nome de projetos.html.
8. Faça um página utilizando os comandos que você já conhece para falar sobre uma pessoa. Pode ser alguém que você admire, do seu círculo de amigos, ou uma pessoa pública (ator, atriz, etc). Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o nome de Pessoa admirável.html.
3ª PARTE
CAPÍTULO 06
Este cap
í
tulo abranger
á
:
1. Tags de formata
çã
o de texto l
ó
gicas e f
í
sicas
2. Texto pr
é
-formatado
TAGS DE FORMATAÇÃO
Assim como em um editor de texto, em HTML você poderá utilizar efeitos em seu texto. Como já percebeu os comandos, tags, trabalham em contêiner.
Alguns destes comandos já foram introduzidos no capítulo anterior. Os principais comandos de estilo:
TAG SINTAXE FUNÇÃO
STRONG <strong>texto</strong> Similar ao negrito
TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular
BIG <big>texto</big> Aumenta a fonte e aplica negrito SMALL <small>texto</small> Reduz e altera a fonte
SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo BLINK <blink>texto</blink> Faz com que o texto pisque
NEGRITO <b>texto</b> Aplica o estilo negrito ITÁLICO <I>texto</I> Aplica o estilo itálico
SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns browsers esta tag não funciona)
Estes são os mais utilizados, porém háoutros que merecem atenção. Para alterar a formatação de um texto em HTML existem dois tipos de estilos que devem ser observados: o estilo lógico e o estilo físico.
1. ESTILO LÓGICO
As tags deste tipo indicam como o texto destacado deve ser utilizado e não como será apresentado. Este estilo não indica como o texto será formatado e sim como será utilizado no documento. Não é possível garantir que um texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou itálico, por exemplo. Dependerádo browser.
Algumas tags de estilo lógico utilizadas em HTML padrão: <EM>
Indica que os caracteres deverão ser enfatizados de alguma forma. De forma diferente do restante do texto. Geralmente em itálico
<STRONG>
Esta tag enfatiza ainda mais que a anterior. Em negrito. <CODE>
Esta tag indica um código de exemplo a ser exposto. <SAMP>
Esta tag indica texto de exemplo. Quando você quer dar um exemplo de endereço para a Internet sem criar link.
2. ESTILOS FÍSICOS
Este estilo de tag realmente altera a formatação do texto, no estilo anterior você não possui garantia que o texto irá ser visualizado da forma que planejou. Neste estilo ele será visualizado da forma que atribuir as tags a ele.
Algumas tags de estilo físico para HTML padrão:
<B> </B> coloca o texto em negrito <I> </I> coloca o texto em itálico
<TT> </TT> fonte de máquina de escrever com espaçamento uniforme.
<u> </u> coloca o texto sublinhado <S> </S> coloca o texto tachado
<BIG> </BIG> o texto iráaparecer maior que o restante ao redor <SMALL> </SMALL> o texto iráaparecer menor que o restante ao redor
Optando por utilizar tags do estilo físico, caso o navegador não reconheça uma das tags ele a irá substituir por outra equivalente ou ignoraráa formatação.
3. TEXTO PRÉ-FORMATADO
O texto de uma arquivo em HTML é formatado através das tags. Mas você possui a opção da tag <PRE> </PRE>para estabelecer uma formatação através de um editor de texto e que esta formatação permaneça na sua página html.
O texto pré-formatado é excelente para apresentar código-fonte com seus espaçamentos adequados. Este recurso pode ser utilizado para criar tabelas mas nãoérecomendável.
Uma observação importanteé que, ao usar tags de estilo ou vínculo, não tags de elemento, neste espaço elas irão funcionar normalmente.
SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE>
4. CITAÇÕES E COMENTÁRIOS
A tag <BLOCKQUOTE> é utilizada na criação de citações longas que não devem ser aninhadas em parágrafos.. A tag <CITE> destaca citações curtas.
Um exemplo:
<BLOCKQUOTE>
"O mercado de webdesigné um dos segmentos de design com maior potencial de crescimento para os próximos anos. Estima-se um crescimento de no mínimo 50% ao ano até 2005. E, na corrida rumo a esse novo eldorado, as
Visualização no Internet Explore 5
<!- -comentário- - >
5. ENDEREÇOS
Esta tag é utilizada para identificar autorias de sua página. Geralmente são apresentadas na parte inferior de cada página. Mostra quem confeccionou aquela página, com quem o leitor deve entrar em contato caso queira ter alguma informação ou fazer alguma observação. Estes endereços são precedidos de um fio <hr>, que ainda veremos, e você poderá utilizar a tag <br> para separar linhas.
<ADDRESS> TEXTO</ADDRESS> Vejamos um exemplo:
<HR> <address>
A serviço de Ag8 Informática Ltda - Me<br> Última atualização: 10 de Janeiro de 2000<br> Todos os direitos autorais são reservados<br> </address>
Esta é uma excelente forma de garantir que as pessoas entrem em contato com você caso necessitem e também uma forma de estar melhorando a sua HP (Home Page) através de sugestões.
6. A TAG <BLINK>
O texto que se encontrar entre estas tags irá aparecer piscando. Dependendo da versão do Netscape, esta tag somente teráefeito sobre o texto se ele estiver sendo visualizado através do Netscape, esse efeito terá uma dessas características:
O problema do efeito piscando é que ele chama atenção excessivamente sobre aquela parte do texto tirando a atenção do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradável e irritante. Em HTML poderíamos colocá-lo como se fosse passar a colher com bastante força no fundo de uma panela de alumínio. Jáimaginou?
EXERCÍCIOS
1.
Os comandos de formatação podem ser combinados para aplicar mais de um efeito ao mesmo tempo?2.
Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito:Tutorial de HTML
3.
Crie uma página HTML sobre algo que goste de fazer, e que faça muito bem, e queira ensinar a outras pessoas. Um tutorial usando todas as tags vistas até então. Utilizando principalmente todos os comandos de formatação.4.
Por que a tag Blink não é bem aceita pela maioria dos projetistas de páginas Web?5.
Qual a utilidade da tag de pré-formatação e qual sua sintaxe?6.
Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade?ANOTAÇÕES
FONTES
Para fazer alterações no tamanho, tipo e cor da fonte de seu texto você utilizaráa tag <font> </font> queé do tipo contêiner. Sua sintaxeéa seguinte:
<font size=" " face=" " color=" "> </font>
1. SIZE
O tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor, a 7, o maior. O padrão é 3. Se for especificado um número antecedido com o sinal de adição ou subtração o valor da fonte será acrescido ou subtraído nesse valor. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2, o texto passará a ser exibido em 7. Se não houver sinal a fonte seráexibida naquele valor.
2. FACE
Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas várias fontes, de maneira que, se o sistema não possuir uma determinada fonte ele iráutilizar outra.
Face="name [,name2[,name3]]
Se não forem encontradas as fontes especificadas, então, o texto será apresentado na fonte padrão.
<font face="Agaramond, Arial" size=1>
3. COLOR
Algumas cores:
COR
CÓDIGO
COR
CÓDIGO
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fuchsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00
Vamos a um exemplo de código:
<html> <head>
</title>Experiência com Fontes</title> </head>
<body>
<h2>Primeiro exemplo com tipos de fontes</h2> <font face="Agaramond"><p>
Este texto seráexibido em Agaramond</font><br> <font face="Tahoma"><p>
Este texto seráexibido em Tahoma</font><br> <font face="Arcane"><p>
Este texto seráexibido em Aracane</font><br> <p>
<h2>Exemplos com tamanhos diferentes de fontes</h2> <font face="Courier" Size=1>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=2>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=3>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=4>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=5>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=6>
Este texto seráexibido em Courier</font><br><p> <font face="Courier" Size=7>
</html>
4. ALINHAMENTO
Pense no que é alinhar um texto no Word ou no StarWrite. Pois então você sabe o queé alinhar um texto. Éclaro que você não iráalinhar em HTML da mesma forma, teráque utilizar tags e parâmetros para estas tags.
Para alinhar um texto vocêutilizará o atributo ALIGN com valores : LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado).
PARÁGRAFOS
O comando <p> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. Caso você deseje que seu novo parágrafo seja iniciado com um alinhamento diferente você deveráespecificar na hora que incluir esta tag o atributo align.
Vejamos um exemplo:
<html> <head>
<title>Alinhamento</title> </head>
<body>
<h1>MACROMEDIA FLASH</H1> <P ALIGN=JUSTIFY>
A tecnologia Shockwave Flash, da Macromedia, já está presente na Web há alguns anos, e noúltimo no ganhou um forte impulso com a inclusão do plug-in necessário nos navegadores mais recentes (apartir do Internet Explorer 4 e Netscape Navigator 4.6). Cada vez mais utilizado, este programa já está sendo empregado em sites de grandes empresas. Seu poder se deve a sua grande capacidade multimídia e á sua versatilidade. Sua finalidade é a criação de imagens vetoriais com animação, som e interatividade.</p>
<p align=center>
Depois veremos mais sobre o Flash</p> </body>
Exemplo:
<h2 align=center>Esteéum exemplo de cabeçalho com alinhamento</h2> Vamos ao código-fonte para verificarmos a diferença:
<html> <head>
<title>Alinhamento de cabeçalho</title> </head>
<body>
<h2>Cabeçalho sem alinhamento especial</h2>
Esteéum exemplo do cabeçalho sem alinhamento especial. <h2 align=center>Cabeçalho com alinhamento centralizado</h2> Esteéum exemplo de cabeçalho alinhado ao centro.
<h2 align=right>Cabeçalho com alinhamento a direita</h2> Esteéum exemplo de cabeçalho alinhado a direita.
</body> </html>
5. ALINHAMENTO COM O COMANDO <DIV>
A utilização desta tag é uma forma prática e rápida de alinhar bloco de texto. A abreviatura DIV significa divisão. Ao usar esta tag num bloco de texto você estará atingindo todas as tags dentro daquele bloco. Suas vantagens sobre o Alignéque:
1. Precisará ser utilizada apenas uma vez, ao contrário do atributo Align, que tem de ser incluído em diversas tags.
2. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações, imagens, tabelas, etc.). O atributo Align encontra-se disponível apenas em um número limitado de tags.
Você deverá colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. O atributo align poderá ter os valoresleft, right e center.
OBSERVAÇÃO:
Além do atributo align=center temos a tag <center> </center> que funciona igualmente ao atributo.
Vamos treinar um pouco com este código-fonte:
<html> <head>
<title>Utilizando a tag DIV para alinhar</title> </head>
<body>
<h2>JavaScript na World Wide Web</h2> <p align=justify>
A World Wide Web iniciou-se como um simples repositório de informações, mas cresceu muito além disso. A medida que a Web desenvolveu-se, as ferramentas também desenvolveram-se. Ferramentas simples de marcação como HTML foram unidas por linguagens de programação de verdade. Incluindo <b>JavaScript</b>, que na verdade não é uma linguagem de programação mas uma <b>linguagem Script hospedeira</b> de páginas em HTML.<br>
<p>
<div align=center>
<h2>Entendendo a utilidade do JavaScript</h2>
Como a HTML é uma linguagem apenas de marcação de texto simples, ela não pode responder para o usuário, tomar decisões, nem autorizar tarefas repetitivas. Tarefas interativas como essas exigem uma linguagem mais complexa.
<h3>Eu precisarei usar JavaScript em todas as minhas páginas</h3> Apenas se quiser aprimorá-las e interagir com o usuário.
</div> </body> </html>
A norma ISO utiliza um código composto pelo caractere & seguido do símbolo # e, então, de uma combinação numérica com ponto-e-vírgula. Já a entidade HTML usa o caractere & seguido de uma palavra que identifica o símbolo com ponto-e-vírgula.
Caso você queira escrever uma página HTML em outro idioma terá que usar bastante esses caracteres especiais.
Imagine que você queira fazer uma página HTML ensinando a outras pessoas a linguagem HTML. Como faria para explicar uma tag sem que o browser interpretasse como um comando. Terá de utilizar estes símbolos especiais.
Vamos a um exemplo:
<html> <head>
<title>Tutorial em HTML</title> </head>
<body>
<h2>O comando<BR></h2>
A finalidade deste comando HTML é marcar uma seção do texto como parágrafo inserindo uma quebra de linha.<br>
<p>
Já o comando <P>épara indicar início de uma novo parágrafo. </body>
</html>
Observe que para que o browser pudesse mostrar <br> e <p> sem interpretar como comandos usei caracteres especiais < para indicar sinal de < e > para indicar o sinal de >.
Quando você utiliza a acentuação comum do teclado nas suas páginas podem até parecer que tudo irá correr tudo bem. Mas alguém que visualizar suas páginas em um computador que não tenha as mesmas configurações de 'vídeo e teclado, alguns caracteres podem não sair da forma desejada.
Por exemplo:
E se desejasse colocar a palavra entre aspas: "Café"
ALGUNS CARACTERES ESPECIAIS
CARACTER
ESPECIAL SÍMBOLO CARACTERESPECIAL SÍMBOLO
< < à à
> > â â
{ { ã ã
} } ü ü
: : & &
; ; ® ® = = " " á á " " @ @ ª ª $ $ º º % % ? ?
EXERCÍCIOS
1- Crie uma página HTML utilizando os recursos vistos acima. Use esta página para falar da utilidade da Internet na vida de pessoas que não trabalham com informática, sugestões para aqueles que querem abrir negócios novos envolvendo Internet, sem ser um racker.
