Escolar Documentos
Profissional Documentos
Cultura Documentos
INTRODUO
Bem vindo a este manual de guia Passo a Passo para Web Designer.
Com o avano cada vez mais da Internet necessrio mais do que nunca voc est
dentro da Rede Mundial de Computadores, a Net para os amigos ntimos. Hoje com
um custo mnimo para acessar a Internet pessoas do mundo inteiro procuram est
sempre inteirado do assunto sobre Internet e dos recursos que ela oferece, ainda mais
agora com meios de aceso gratuito atravs do IG, Super11 e outros...
Voc sabe que a Internet o meio fcil de se comunicar com as pessoas, localizar
informaes sobre poltica, economia, notcias, educao, imagens, enfim qualquer
tema que precisar, at mesmo assuntos quentes. Pela Internet tambm eu posso fazer
amigos, divulgar meu trabalhos, fazer conferncias atravs de programas de bate
papo como Mirc, ICQ e outros. Mais ainda, posso comprar, vender e divulgar o meu
negcio pela Internet, atravs de aplicativos voltados para WEB, desenvolvidos em
qualquer plataforma para atender a ns amantes da NET.
Com toda essa tecnologia necessrio hoje, no se limitar ao Uso da Internet,
somente em saber:
O que preciso para se conectar
Meios de Navegao
Correio Eletrnico
Rede Dial Up
necessrio entender que estas informaes se propagam atravs de pgina no
formato de hypertexto, ou seja HTML(HyperText Markup Language), tornando a WEB
cada vez mais dinmica.
Por isso necessrio hoje, qualquer pessoa navegante da Internet Ter um
conhecimento mnimo sobre HTML, para que assim ela possa fazer sua prpria Home
Page com tantos megabytes como diz Gilberto Gil e criar seu Web Site para que suas
informaes pessoais ou comerciais possam velejar pela Internet e possa atingir seu
pblico.
Web Designer Passo a Passo para Iniciantes, um guia voltado para usurios leigos
no assunto sobre confeco de Home Pages e que ao final pretende deix-lo pronto
para montar uma pgina pessoal ou comercial composta de animaes, letreiros,
banners, imagens, tabelas e formulrios postados pra caixa de e-mail e ainda
abordar os conceitos sobre WWW (World Wide Web), com textos objetivos, passando
por tutorias amplamente exemplificados sobre construo de pginas em HTML e
depois trabalhando com o modo interativo atravs Front Page Express.
Lembrando que existem hoje muitos Editores de Pginas para WEB, limitar-se
somente ao Front Page Express, programa este que acompanha o Windows 98,
ancorar seu barco na Net, procurar expandir seus conhecimentos em Web Designer
realmente Ter entendido o Front Page Express e Ter evoludo, pois chegar um tempo
em que este software no atender a tanta imaginao ou criao que pretenda fazer.
Por hora, uma excelente ferramenta para iniciar seus estudos sobre confeco de
Home Pages , mo obras e um bom estudo!!
Neilon Mrcio
cmwn@bol.com.br
autor
1
PARTE I
INTERNET
INTRODUO
Mais que um modismo a Internet tornou-se um fenmeno.
Conectando mais de um milho de computadores e cerca de 40 milhes de
usurios, espalhados em noventa pases, valores estes que mudam a cada dia,
sem dvida no dar para ficar de fora desta teia.
Enfim, se formos descrever Internet, a melhor definirmos
como Comunicao. Com ela encontramos servios e facilidades, notcias e
atualidades, ou se preferir como o caso de muitos pessoas, um excelente
local para encontrar amigos, jogos, bate papo e muito mais, como lojas virtuais,
onde voc pode comprar ou vender com toda segurana.
HISTRICO
A Internet deve incio em 1969 sob o nome de ARPANET
(USA). Composta de quatro computadores tinha coo finalidade, demonstrar as
potencialidades na construo de redes usando computadores dispersos
(espalhados) em uma grande rea. A idia foi boa, e em 1972, 50
universidades e instituies militares j possuam conexes.
Hoje uma arquitetura de software e hardware que se
comunicam entre si que so mantidas por organizaes comerciais e
governamentais. Mas uma das principais caractersticas da Internet, que no
possui dono, para organizar toda essa troca de informaes, existem
associaes e grupos que se dedicam para suportar, ratificar padres e
resolver questes operacionais, visando promover os objetivos da Internet.
A WORD WIDE WEB
As pessoas costuma falar em Internet e Web, ser a mesma
coisa? Ser apenas uma gria da moada do bate papo? Ou existe realmente
um conceito cientfico para isto?
Para resolver esta dvida e tambm para comearmos a
entender esta srie de definio de conceitos, vamos partir do seguinte
princpio:
A Word Wide Web (teia mundial) conhecida como WWW,
uma nova estrutura de navegao pelos diversos itens de dados em vrios
computadores diferentes. O modelo WWW tratar todos os dados da Internet
como hipertexto, isto , vinculaes entre as diferentes partes do documento
para permitir que as informaes sejam exploradas interativamente e no
apenas de uma forma linear.
2
TIPOS DE CONEXES
Existem dois tipos de conexes para acesso a Internet.
DEDICADA So as conexes diretas, utilizadas pelos
fornecedores de servios que vendem conexes de todos os tipos para
pessoas e organizaes. Estes tipos
de fornecedores chamamos de
Provedores. Estas linhas so de alta velocidade e tambm muito caras.
DISCADA - o tipo de conexo usada por usurios comuns.
Nesse caso, voc disca para o provedor atravs da Rede DialUp, pedindo
acesso a Internet.
Bem , tendo entendido tudo isso e voc feliz da vida, daremos
inicio ao nosso curso de HTML..
IMPORTANT
E
O QUE FAZ
Marca o incio e o fim do documento HTML. Com ele voc inicia e
finaliza a construo da pgina Web.
Marca o incio e do fim do cabealho, ou seja, a rea onde sero
descritos cabealhos e o ttulo da pgina
Marca o incio e o fim do ttulo do cabealho. O ttulo da pgina
aparecer na barra superior do browser.
Marca o incio e o fim do do corpo da pgina
Figura 1.1
Listagem 1.2
<html>
<head>
<title>Minha Home Page</title>
</head>
<body>
Aqui neste espao desenvolverei minha Home Page!
Aguarde!!
</body>
</html>
Fim da Listagem 1.2
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2
6
Figura 1.2
</head>
<! Incio do Corpo da Pgina>
<body>
<h1>Este o ttulo Principal</h1>
<h2>Este o ttulo Secundrio</h2>
<h3> Estou adorando criar pginas</h3>
<hr>
<p>Este o
Linha do 1
<p>Com este
este recurso
<hr>
<! Fim do Corpo da Pgina>
</body>
</html>
<! Fim do Documento HTML>
Fim da Listagem 1.3
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo2.html. Veja a figura 1.3
Figura 1.3
8
IMPORTANT
E
TAG
<!>
<meta>
O QUE FAZ
Insere comentrios nas pginas
Marcas Metas. Servem para voc especificar o autor, palavraschaves, descrio da pgina, etc..
Dentro do tag<meta>, tem os comandos name e o content. No
comando name voc especifica que informao voc quer dar, e
no content voc descreve a informao
<hn>
<hr>
<p>
<br>
Agora, que voc viu o resultado do exemplo2.html a cada vez mais feliz, por
est entendendo esta linguagem, vamos passar para o Exerccio 3.
um
texto
Na linguagem HTML temos vrios tipos de
9
Figura 1.4
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
IMPORTANT
E
TAG
O QUE FAZ
<center>
Alinha o trecho (texto, imagem ou tabela ao centro>
align=center,
Atribudos dentro do tag <p> que marca o incio de um pargrafo
right, left ou modificam o alinhamento do ttulo.
justify
Center= alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificao do pargrafo.
10
<blockquote>
<hr>
face=verdana>Texto
com
letra
<br>
<font color=blue size=6>E</font><font color=red
size=4>ditora rica</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaos
feitos no cdigo fonte
sejam respeitados. Certo?
</pre>
</body>
</html>
Fim da Listagem 1.5
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5
Figura 1.5
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG
<b>
<i>
<u>
<tt>
<font>
IMPORTANT
E
O QUE FAZ
Coloca o texto em negrito
Coloca o texto em itlico
Coloca o texto sublinhado
Coloca o texto em fonte monoespaada. (fonte Courier,como
mquina de escrever)
Modifica a formatao do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>
12
<pre>
Figura 1.6
13
Listagem 1.6
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>
<! Incio dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Incio dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
<! Fim dos Marcadores>
</body>
</html>
Fim da Listagem 1.6
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo5.html. Veja a figura 1.7
Figura 1.7
14
<ul>
IMPORTANT
E
O QUE FAZ
Marca o incio e o fim de uma lista ordenada. Recebem na primeira
linha um nmero ou letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o nmero a partir do qual os itens comeam a ser
contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: nmero, letras
ou algarismo romano.
Ex: <ol type=A> <ol type=I>
Marca o incio e o fim de uma lista no ordenada, ou seja, os itens
da lista recebem smbolos na primeira linha. Devem ser usados com
tag <LI>
Atributos
Type = modifica o tipo do marcador (smbolo), que pode ser:
Circle = um crculo vazio.
Ex: <ul type=circle>
Disc = um crculo cheio.
Ex: <ul type=disc>
Square = um quadrado cheio
Ex: <ul type=square>
Ficou confuso? Quer mais um exemplo para entender legal? Vamos nessa!
Para entender isto, digite a listagem 1.7, e salve como exemplo6.html,
Listagem 1.7
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma listagem iniciando no nmero 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto uma listagem com letras</h3>
<ol type=A>
<li>Editora
<li>rica
<li>Livros
</ol>
<h3>Isto uma listagem em algarismo romano</h3>
<ol type=I>
<li>Editora
<li>rica
<li>Livros
</ol>
15
Vamos terminar esta lio com mais um exemplo? Desta vez, faremos uma
listagem com subnveis.
Para entender isto, digite a listagem 1.8, e salve como exemplo7.html
Listagem 1.8
16
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e SubListagem</h3>
<ol><! Incio do Numerador>
<li>Item 1
<ul><! Incio do Marcador dentro do Numerador>
<li type=disc>Item 1.1
<li type=disc>Item 1.2
<li type=disc>Item 1.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 2
<ul><! Incio do Marcador dentro do Numerador>
<li type=square>Item 2.1
<ul><!Incio do Marcador dentro do Marcador>
<li type=circle>Item 2.1.1
<li type=circle>Item 2.1.2
<li type=circle>Item 2.1.3
</ul><!Fim do Marcador dentro do Marcador>
<li type=circle>Item 2.2
<li type=disc>Item 2.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 3
</ol><! Fim do Numerador>
</body>
</html>
Fim da Listagem 1.8
Ufa! Terminamos mais uma etapa! Esse cdigo foi grande, mas valeu!
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exempl7.html. Veja a figura 1.9
Figura 1.9
17
Figura 1.10
Observao: Voc poder adicionar a cor que desejar, tanto para o fundo
quanto para o texto. Os dois s no podem ser da mesma cor!(risos). Para
escolher a cor, consulte na Tabelade Cores (figura 1.6)
18
Como comentei linhas acima, voc tambm pode colocar um imagem no fundo
da pgina. Mas, antes de fazer o exerccio,
observe as seguintes
recomendaes:
As imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagens
aconselho, consultar um livro de PhotoShop 5.0 ou outra verso.
As imagens devem estar na mesma pasta, onde estar o documento HTML,
ou numa subpasta.
Exemplo: Imagine que voc tem uma pasta chamada projeto e nessa pasta
voc armazena todos os documentos HTML referente a pgina que por hora
desenvolve. Certo at a? Ento, basta que os arquivos de imagens,
tambm fiquem na mesma pasta projeto, assim no ter problema na hora
de visualizar no Browser.
Outro exemplo que posso citar o seguinte. Imagine agora outra situao:
Voc agora resolveu organizar ainda mais o desenvolvimento de sua
pgina.
Criou uma pasta projeto e dentro armazenou todos os arquivos HTML.
Certo?
Depois resolveu criar uma subpasta dentro da pasta projeto chamada
imagens. Muito bem garoto! Excelente atitude e nela voc colocou todas as
imagens. Ento, tudo est correto, mas no esquea de na hora de
especificar a imagem que deseja inserir no fundo dentro do tag <BODY>, o
caminho, ou seja, o nome da subpasta. Entendeu? No se preocupe voc
far exemplo para as duas situaes, eu prometo!
Muito bem, caro web designer, entendido tudo isso, vamos praticar.
Para entender isto, digite a listagem 1.10, e salve como exemplo9.html,
Listagem 1.10
<html>
<head><title>Inserindo Imagem no Fundo da Pgina</title>
</head>
<body background=parede.gif bgproperties=fixed>
<h1 align=center>Editora rica</h1>
<font size=4 face=verdana>
<ul>
<li>Livros
<li>Dicas
<li>Volte Sempre
</ul>
</font>
</body>
</html>
Fim da Listagem 1.10
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo9.html. Veja figura 1.11
19
Figura 1.11
Observao: Caso a imagem estivesse em uma subpasta bastaria apontar o caminho
para ela no tag. Veja o exemplo:
Exemplo: <body background=/imagens/parede.gif bgproperties=fixed>
Onde:
imagens= o nome da subpasta
parede.gif = o nome do arquivo.
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG
<body>
IMPORTANT
E
O QUE FAZ
Marca o incio e o fim do corpo da pgina
Atributos
Bgcolor = define a cor do fundo da pgina
Text = define a cor do texto padro da pgina
Background = permite inserir uma imagem como fundo da pgina
Bgproperties = fixa a imagem no fundo da pgina quando a pgina
rolada, criando um efeito de marca dgua.
Exerccio 7 IMAGENS
Muito bem, voc est evoluindo a cada exerccio. Neste exemplo exercitaremos
os tags que permitem a insero de imagens em sua home page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagem
s poder ser exibida no browser, se ela estiver na mesma pasta, ou ento,
voc dever apontar o caminho onde est, conforme o exemplo de nmero 6.
Lembra?
Outro fato que, voc poder escolher as imagens que desejar, basta
substituir o nome da imagem que est no exemplo pela a que voc escolheu.
Tudo certinho agora? Vamos em frente!
20
Figura 1.12
21
est
est
Figura 1.13
22
IMPORTANT
E
O QUE FAZ
Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto circunda
imagem esquerda.
alt=n indica o texto para ser exibido quando o navegador no
exibe a imagem. Sendo que n o ttulo que identifique a imagem.
Exemplo: <img src=fig.jp alt=Esta uma imagem legal>
Exerccio 8 TABELAS
Nesta etapa conheceremos os tags responsveis pela construo de tabelas.
Na parte II deste estudo atravs do Front Page Express, utilizaremos a tabela
como recurso para a definio dos layouts de nossas pginas. Por hora, vamos
aos principais tags. Tudo Bem?
Como sempre, digite a listagem 1.13, e salve como exemplo12.html
Listagem 1.13
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=2> <! Aqui comea a Tabela>
<tr><! Aqui Comea uma linha>
<td>Clula1</td>
<td>Clula2</td>
<td>Clula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Comea outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>
Listagem 1.13
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo12.html. Veja figura 1.14
23
Figura 1.13
Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais
uma listagem?
Como sempre, digite a listagem 1.14, e salve como exemplo13.html
Listagem 1.14
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=50
cellpadding=5 cellspacing=5>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
</body>
</html>
Fim da Listagem 1.14
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo13.html. Veja figura 1.15
24
Figura 1.15
Alinhamentos
Os elementos dentro da tabela tambm podem ser alinhados da mesma que
um pargrafo. Veja mais um exemplo atravs da listagem 1.15
Listagem 1.15
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table
border=1
width=400
height=120
cellpadding=5 cellspacing=5>
<tr>
<td align=center>No Centro</td>
<td align=right>Para Direita</td>
<td align=left>Para a Esquerda</td>
</tr>
<tr>
<td valign=bottom>Em baixo</td>
<td valign=top>No Topo</td>
<td valign=middle>Centro na Vertical</td>
</tr>
</table>
</body>
</html>
Fim da Listagem 1.15
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo14.html. Veja figura 1.16
25
Figura 1.16
Cor de Fundo
Voc pode ainda adicionar cores no fundo da tabela ou apenas de uma clula
que deseja. Lembra do atributo bgcolor, ento com este mesmo que voc
pode adicionar um cor padro para tabela ou para a clula.
Veja o exemplo:
<table bgcolor=blue>
O resultado seria assim: Toda Tabela teria um preenchimento azul
26
<tr>
<td>
border=n
align=left
align=right
align=center
valign=top
valign=bottom
valign=middle
IMPORTANT
E
O QUE FAZ
Marca o incio e o fim de uma tabela
Atributos
Width define a largura da tabela ou da clula
Height define a altura da tabela ou da clula
Cellpadding define a margem dentro das clulas
Cellspacing define o espao entre as clulas
Bgcolor define a cor de fundo da tabela ou da clula
Marca o incio e o fim de uma linha
Marca o incio e o fim de uma clula
Coloca uma borda na tabela, onde n o valor em pixels da borda
Alinha o contedo da clula a esquerda na horizontal
Alinha o contedo da clula a direita na horizontal
Alinha o contedo da clula ao centro na horizontal
Alinha o contedo da clula no topo (vertical)
Alinha o contedo da clula na base da clula (vertical)
Alinha o contedo da clula no centro na vertica
Exerccio 9 LINKS
Como falei no incio, estamos produzindo pginas de hipertextos, ou seja,
textos que podem fazer ligaes com outros textos, ligando pginas entre si e a
WEB. Ento, este pontos ns chamamos de links ou hyperlinks, ncoras de
hipertexto, todos com a mesma funo, de atravs de um nico clique sobre a
frase ou imagem conduzir a algum lugar no site ou na WEB.
O Tag responsvel o <A>, onde dentro deste, atravs de um atributo coloco a
referncia, ou seja, A URL (Uniform Resource Locator).
Para criar um link usamos a seguinte sintaxe:
SINTAXE: <A HREF=URL>Frase que aparece na pgina</a>
Onde:
<a> tag que marca o incio e o fim do link
href= atributo que especifica o nome da referncia
URL o nome do local para onde desejar linkar (ir)
Nada de complicao, que tal um exerccio para entendermos legal tudo isso?
Vamos nessa!
Como sempre, digite a listagem 1.16, e salve como exemplo15.html
27
Listagem 1.16
<html>
<head><title>Estudando Links</title>
</head>
<body>
<h2>Exemplo de Links Internos</h2>
<h3>Seo de Exemplos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
<hr>
<h2>Exemplo de Links Externos</h2>
<a href=http://www.erica.com.br>Conhea a Editora
rica</a><br>
<a href=http://www.apple.com>Apple Computer</a>
<h3>Voc
pode
usar
imagens
para
usar
nos
links</h3>
<a
href=exemplo10.html><img
src=bola.gif>
</a>Imagens
</body>
</html>
Fim da Listagem 1.16
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de
endereo digite C:\Meus documentos\exemplo15.html. Veja figura 1.17
Figura 1.17
28