Curso de Web Design

Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
www.trabalheemcasaoverdadeiro.com.br
Acesse - www.megacursos.com.br
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!!
1 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
Neilon Mrcio
cmwn@bol.com.br
autor
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:
2 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
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.
Por isso existem programas como Microsoft Internet Explorer, que
aumentaram muito a popularidade da Internet e graas as suas potencialidades, hoje
podemos ver nas pginas da Internet, documentos formatados (cores, efeitos e etc...),
escutar msica, assistir a vdeos, e muito mais.
Enfim a Web, a interface grfica da Internet, pois podemos acessar a
Internet, transferir arquivos( Processo a qual chamamos UpLoad), e realizar outras
operaes bsica sem precisar de uma interface grfica.
Para concluir s estamos de fato usando a Web, quando estamos
navegando fazendo uso das Home Pages para acessar um site, ou seja, um endereo
nico que contm a Home Page (pgina inicial) e outras pginas que fazem parte deste
conjunto de pginas e todas em um nico cdigo fonte escrito em uma linguagem
chamada HTML.
CONECTANDO SE INTERNET
Em tempos remotos somente alguns privilegiados podiam Ter acesso

Internet. Agora, qualquer um pode obter esse acesso por um preo mnimo, ou melhor,
voc poder Ter acesso gratuito, pagando somente o pulso da linha telefnica, ou mais
gratuito ainda, o acesso e ainda o pulso da linha telefnica, ou seja, voc dependendo do
tipo da conexo que use no precisa pagar nada, s precisa Ter o equipamento
necessrio para Ter acesso a Internet.
EQUIPAMENTOS NECESSRIOS
Os equipamentos necessrios so:
HARDWARE
PC 486/DX4 100
8 MEGA DE RAM
PLACA DE FAX MODEM DE 28.800 bps
SOFTWARE
Sistema Operacional 95
Internet Explorer ou Netscape
Outlook Express ou Internet Mail
Voc vai precisa ainda:
PROVEDOR DE ACESSO A INTERNET (empresa que coloca
voc na Internet, logo aps voc discar atravs da Rede Dial-Up)
3 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
Linha Telefnica (Digital ou Analgica)

Vale ressaltar que esta uma configurao mnima, quando melhor o equipamento que
usar com certeza voc ser mais feliz usando a Net.
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..
INICIO DO CURSO DE HTML 4.0

Toda vez que voc acessar um site (veja tpico Word Wide Web) por
meios de domnios quando adiciona a URL na barra de endereo, do seu Navegador
(Browser), voc ver pginas na WEB bem dinmicas, organizadas, animadas e com ela
trazendo informaes, imagens, sons, vdeos e etc.
Ento, voc deve se perguntar. Como feito? Como elas se
propagam? Todas estas pginas possuem um cdigo fonte escrito numa linguagem
chamada HTML (Hyper Text Markup Language).
Este tutorial tem por objetivo mostr-lo como criar e exibir pginas
HTML, como as que voc ver atravs da WEB. Tais pginas so criadas a partir de
arquivos texto ASCII, contendo caracteres de marcao da linguagem HTML. Uma vez
criados, estes arquivos so salvos com uma extenso .html.
Ento, entendido novamente mais uma etapa, vamos iniciar o curso de
verdade. A cada exemplo voc dever salvar seu arquivo com a extenso html. Certo ?
HIERARQUIA DE ELEMENTOS
Primeiramente, gostaria de lembrar-lhe como citei a linhas acima, que
existem vrios editores de Home Pages, como por exemplo: o Front Page Express,
Netscape Composer, Home Site, etc. S que na ausncia destes aplicativos e voc
desconhecendo a Linguagem de HyperTextos, HTML, no poderia criar suas pginas.
Da a importncia de se conhecer esta linguagem. Entendeu?
4 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
Muito bem, para estudarmos HTML, usaremos o j conhecido Bloco

de Notas e um Browser (Internet Explorer ou Netscape). Para nossos exemplos usarei o
Internet Explorer. Tudo Bem? Vamos nessa!
A estrutura bsicas de uma pgina HTML mostrada na listagem 1.1.
Observe que a construo de pginas exigir o uso de marcadores chamados de TAGS.
Veja agora o uso deles na listagem 1.1
Listagem 1.1
<html>
<head>
<title>COLOQUE AQUI O TTULO DA PGINA</title>
</head>
<body>
DAQUI EM DIANTE Voc DESENVOLVE SUA PGINA
</body>
</html>
Fim da Listagem 1.1
Com certeza voc observou que sempre usei os tags, fazendo demarcao,
ou seja, eles
IMPORTANTE
sempre estaro ANTES DE ALGUMA COISA E APS ALGUMA COISA. Quer
mais um exemplo para entender melhor? Tudo bem.
Exemplo: <title>EDITORA ERICA</title>
CONCEITO DOS TAGS USADOS NESTE EXERCCIO

TAG
<html>
<head>
<title>
<body>
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
EXERCCIO 1 Vamos praticar?

Bem entendido os conceitos bsicos e voc mais feliz, vamos criar nossa primeira
pgina.
5 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
1) Abra o Bloco de Notas Iniciar/Programas/Acessrios/Bloco de Notas

2) Digite o cdigo da listagem 1.2. Aps digit-lo salve na pasta Meus Documentos ou
em outra se preferir com o nome exemplo1.html. Como?
Resposta:
1) Abra o Menu Arquivo e escolha Salvar

2) Na janela que aparecer como mostrar figura 1.1, faa as seguintes tarefas:
2.1) Na opo Salvar em selecione a pasta onde deseja salvar, no caso Meus
Documentos
2.2) Na opo Nome do arquivo coloque o nome do arquivo exemplo1.html
2.3) Finalmente clique no boto Salvar.
Figura 1.1
Listagem 1.2
<html>
<head>
<title>Minha Home Page</title>
</head>
<body>
Aqui neste espao desenvolverei minha Home Page!
Aguarde!!
</body>
6 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
O TTUO ADICIONADO NA PGINA ATRAVS DO TAG TITLE
</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
Figura 1.2
Exerccio 2 Vamos aprender mais um pouco?

Em alguns momentos em sua pgina faz necessrio comentar alguns trechos do cdigo
para facilitar na leitura e manuteno da pgina, por isso adicionamos comentrios, ou
seja, palavras ou frases que no so exibidos no Nevegador, apenas so visto como
estamos trabalhando no cdigo fonte.
Na listagem 1.3 faremos um novo exemplo e incrementaremos novos tags. Digite a
listagem 1.3 abaixo e salve com o nome exemplo2.html na pasta Meus Documentos.
. ATENO: Salve sempre os seus exemplos na pasta Meus Documentos, o processo
para salvar igual ao do Exemplo1, troque apenas o nome do arquivo. Na dvida
veja o exemplo 1. Tudo bem?
Listagem 1.3
<!Incio do Documento HTML>
<html>
7 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
<head>
<title>Melhorando Minha Home Page</title>
<meta name="author" content="NMBS Informtica">
<meta name="keywords" content="html, homepages">
</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
1 Primeiro Paragrfo <br> Esta 2

Paragrfo
recurso inicio um paragrfo<br> E Com
quebro uma linha
<hr>
<! Fim do Corpo da Pgina>
</body>
</html>
<! Fim do Documento HTML>
Fim da Listagem 1.3
8 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
IMPORTANTE
Figura 1.3
TAG
<!>
<meta>
O QUE FAZ
Insere comentrios nas pginas
Marcas Metas. Servem para voc especificar o autor, palavras-chaves,
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>
Marca um ttulo. Sendo que n representa um valor que pode ser de 1 a 6, o

tamanho muda de forma decrescente, ou seja, o nmero 1 o maior
tamanho do ttulo.
Insere uma linha horizontal
Marca um pargrafo e acrescenta uma linha em branco.
Insere uma quebra de linha
<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.
Exerccio 3 TAGS DE ALINHAMENTO

Assim, como num documento comum, h necessidade de melhorar a aparncia do
documento, e a primeira providncia a tomar cuidar do alinhamento do texto. O
Alinhamento padro que vem configurado nos navegadores, a esquerda. Para
9 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o

conceito de tag que marcam o alinhamento dos ttulos e paragrfos nas pginas.
Listagem 1.4
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Ttulo Centralizado</h4>
<h4 align=right>Ttulo Direita</h4>
<h4 align=left> Ttulo Esquerda<h4>
<hr>
<p
<p
<p
<p
justificado.
alinhamentos
Nesta parte
pargrafos e
<br>
<br>
align=center> Pargrafo ao Centro

align=right>Pargrafo a direita
align=left>Paragrfo a esquerda
align=justify>Este
um
texto
Na linguagem HTML temos vrios tipos de
que voc poder aplicar em sua pgina.
do livro,veremos como alinhar linhas,
cabealhos.
<hr width=50% align=center>

<blockquote>Texto
com
mais
margem</blockquote>
<blockquote><blockquote>Tem com mais margem
ainda</blockquote></blockquote>
</body>
</html>
Fim da Listagem 1.4
10 de 30
Este arquivo
parte
integrante
CD MEGA
Este
arquivo
compe do
a coletnea
STCCURSOS
Figura 1.4
TAG
<center>
align=center,
right, left
justify
<blockquote>
<hr>
O QUE FAZ
Alinha o trecho (texto, imagem ou tabela ao centro>
Atribudos dentro do tag <p> que marca o incio de um pargrafo
ou modificam o alinhamento do ttulo.
Center= alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificao do pargrafo.
Adiciona uma margem de cerca de um centmetro
Atributos
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal.
IMPORTANTE
Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o efeito de trs
dimenses. Exemplo: <hr noshade>
Exerccio 4 FORMATAO DE ESTILOS
11 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
Muito bem caro estudante, perceba que a cada exemplo sua pgina vai melhorando
ainda mais sua aparncia. Neste exemplo trabalharemos com a formatao das letras
bem como cor, tamanho de fonte, estilo, e etc..
Bem, preparado? Vamos l novamente para mais um estudo!
Para entender isto, digite a listagem 1.5, e salve como exemplo4.html,
Listagem 1.5
<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itlico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaado</tt><br>
<br><font color=red>Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font
Verdana</font>
face=verdana>Texto
<br><font
face=arial
combinaes</font>
com
black>Voc
pode
letra
fazer
<br><center>
<font color=blue face=verdana size=5><b>Editora
rica</b></font></center>
<br>Voc poder os atributos para cada tipo de
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>
12 de 30
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
arquivo
compedo
a coletnea
STC
</body>
</html>
Fim da Listagem 1.5
Figura 1.5
TAG
<b>
<i>
<u>
<tt>
<font>
<pre>
<basefont>
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.
IMPORTANTE
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>
Marca um trecho formatado com fonte monoespaada. A formatao com
espaos e entrada de pargrafos respeitada.
Modifica a formatao padro do texto.
Ex: <basefont size=5>
TABELA DE CORES
Voc percebeu que as cores a fonte obedecem o idioma ingls, no entanto,
as cores da fonte podem ser adicionados atravs do nome ou de seus respectivos
13 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
cdigos. Ento para voc ficar mais feliz, relacionei aqui algumas cores para colorir e
diversificar sua home page. Veja a figura 1.6
Figura 1.6
Exerccio 5 LISTAS NUMERADAS E MARCADAS

E l vamos ns para um mais exerccio. Desta vez trabalharemos com listas numeradas
e marcadores. Assim como em uma carta ou qualquer outro documento comum,
precisamos listar tpicos atravs de smbolos ou nmeros.
Listagem 1.6
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>
<! Incio dos Numeradores>
<ol>
14 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
IMPORTANTE
<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
Figura 1.7

TAG
<ol>
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>
15 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
<ul>
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!
Listagem 1.7
<html>
</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>
<h3>Esta uma listagem em algarismo romano a partir
do nmero 3</h3>
<ol type=I start=3>
<li>Editora
<li>rica
<li>Livros
16 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
</ol>
</body>
</html>
Fim da Listagem 1.7
Figura 1.8
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
<html>
</head>
<body>
<h3>Listagem e SubListagem</h3>
17 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
<ol><! Incio do Numerador>

<li>Item 1
<ul><! Incio do Marcador dentro do Numerador>
<li type=disc>Item 1.1
</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
</ul><!Fim do Marcador dentro do Marcador>
<li type=circle>Item 2.2
</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!
digite C:\Meus documentos\exempl7.html. Veja a figura 1.9
Figura 1.9
Exerccio
DEFININDO O CORPO DA PGINA
18 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
Voc teve Ter observado em algumas sites, que as cores de fundo da pgina so bem
diversificados, ou em outros casos, uma imagem adicionado no fundo da pgina, como
uma marca dgua. Ento, todas estas definies so feitas dentro do tag <BODY>.
Vamos praticar?
Listagem 1.9
<html>
<head><title>Pgina com Fundo Colorido</title>
</head>
<body bgcolor=beige text=blue>
<h3>Definfo cor de fundo para a pgina</h3>
</body>
</html>
Fim da Listagem 1.9
digite C:\Meus documentos\exemplo8.html. O resultado, ser uma pgina como fundo
de cor bege e o texto na cor azul. Certo?. Veja figura 1.10
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)
Como comentei linhas acima, voc tambm pode colocar um imagem no fundo da
pgina. Mas, antes de fazer o exerccio, observe as seguintes recomendaes:
19 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
. 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.
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
digite C:\Meus documentos\exemplo9.html. Veja figura 1.11
20 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
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.
IMPORTANTE

TAG
<body>
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!
21 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA

Listagem 1.11
<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<h3> Esta sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue enxergar,
as seguintes imagens?<br>
O rosto de um velho<br>
Uma moa<br>
Um cachorro<br>
Um outro velho<br>
Um pssaro<br>
E algo mais<br>
</body>
</html>
Figura 1.12
22 de 30
Este arquivo
parte
integrante
CD MEGA
CURSOS
Este
arquivo
compe do
a coletnea
STC
isso a, no se preocupe se voc no conseguiu enxergar todas as imagens, o mais

importante para mim que voc tenha entendido a aula. (risos!!!)
Vamos para um exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do
texto.
Para entender isto, digite a listagem 1.12, e salve como exemplo11.html
Listagem 1.12
<html>
<head><title>Imagens</title>
</head>
<body>
Note
neste
exemplo
que
a
imagem
src=fig2.jpg> est entre o texto<br>
<img
src=fig2.jpg
align=top>Imagem
esquerda e o texto no topo<br>
<img src=fig2.jpg align=middle>Imagem
esquerda e o texto no centro<br>
<img
est
est
<img src=fig2.jpg align=left>Neste exemplo a

imagem ficou alinhada esquerda,
permitindo que o texto ficasse todo direita ao
redor da imagem. Utilize este recurso
toda
vez que desejar que o texto fique ao lado da
imagem <br>
</body>
</html>
23 de 30
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
arquivo
compedo
a coletnea
STC
IMPORTANTE
Figura 1.13

TAG
<img>
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>
24 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
</html>
Listagem 1.13
Figura 1.13
Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais uma
listagem?
Listagem 1.14
<html>
</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>
25 de 30
Este
arquivo
compe do
a coletnea
STCCURSOS
Este arquivo
parte
integrante
CD MEGA
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>
<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>
26 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
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
Veja mais este exemplo:

<table>
<tr>
<td bgcolor=beige>Bege</td>
<td bgcolor=red> Vermelho<td>
O resultado seria assim: As clulas teriam cores diferentes
27 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
IMPORTANTE

TAG
<table>
<tr>
<td>
border=n
align=left
align=right
align=center
valign=top
valign=bottom
valign=middle
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
Observao: O atributo de alinhamento ALIGN, faz o alinhamento na horizontal.

O atributo de alinhamento VALIGN, faz o alinhamento na vertical.
E assim meu caro leitor, conclumos mais uma etapa de nosso curso. Espero que te guia
esteja sendo realmente um farol em seu aprendizado.
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:
28 de 30
Este
arquivo
compe do
a coletnea
STC
Este arquivo
parte
integrante
CD MEGA
CURSOS
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!
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>
So aqueles vo para alguma outra

pgina dentro do mesmo site

So aqueles vo para outro site!
29 de 30
arquivo
compedo
a coletnea
STC
Este arquivoEste
parte
integrante
CD MEGA
CURSOS
Figura 1.17
30 de 30

Curso de Web Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de Web Design

Uploaded by

Copyright:

Available Formats

Este

Mais que um modismo a Internet tornou-se um fenmeno. Conectando

A WORD WIDE WEB

A Word Wide Web (teia mundial) conhecida como WWW, uma

Em tempos remotos somente alguns privilegiados podiam Ter acesso

Linha Telefnica (Digital ou Analgica)

INICIO DO CURSO DE HTML 4.0

Muito bem, para estudarmos HTML, usaremos o j conhecido Bloco

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

EXERCCIO 1 Vamos praticar?

1) Abra o Bloco de Notas Iniciar/Programas/Acessrios/Bloco de Notas

1) Abra o Menu Arquivo e escolha Salvar

Exerccio 2 Vamos aprender mais um pouco?

1 Primeiro Paragrfo <br> Esta 2

Marca um ttulo. Sendo que n representa um valor que pode ser de 1 a 6, o

Exerccio 3 TAGS DE ALINHAMENTO

entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o

align=center> Pargrafo ao Centro

<hr width=50% align=center>

Exerccio 4 FORMATAO DE ESTILOS

Exerccio 5 LISTAS NUMERADAS E MARCADAS

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

<ol><! Incio do Numerador>

. As imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagens aconselho,

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

Para entender isto, digite a listagem 1.11, e salve como exemplo10.html,

isso a, no se preocupe se voc no conseguiu enxergar todas as imagens, o mais

<img src=fig2.jpg align=left>Neste exemplo a

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

Veja mais este exemplo:

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

Observao: O atributo de alinhamento ALIGN, faz o alinhamento na horizontal.

SINTAXE: <A HREF=URL>Frase que aparece na pgina</a>

So aqueles vo para alguma outra

Fim da Listagem 1.16

You might also like