Upload
paulofpessoa
View
33
Download
1
Embed Size (px)
DESCRIPTION
Web Designer Para Iniciante
Citation preview
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 1 www.unidesign.hpg.com.brINTRODUO 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 dentrodaRedeMundialdeComputadores,aNetparaosamigosntimos.Hojecom umcustomnimoparaacessaraInternetpessoasdomundointeiroprocuramest 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... VocsabequeaInternetomeiofcildesecomunicarcomaspessoas,localizar informaessobrepoltica,economia,notcias,educao,imagens,enfimqualquer tema que precisar, at mesmo assuntos quentes. Pela Internet tambm eu posso fazer amigos,divulgarmeutrabalhos,fazerconfernciasatravsdeprogramasdebate papo como Mirc, ICQ e outros. Mais ainda,posso comprar, vender e divulgar o meu negciopelaInternet,atravsdeaplicativosvoltadosparaWEB,desenvolvidosem qualquer plataforma para atender a ns amantes da NET. Comtodaessatecnologianecessriohoje,noselimitaraoUsodaInternet, somente em saber: O que preciso para se conectar Meios de Navegao Correio EletrnicoRede Dial Up
necessrioentenderqueestasinformaessepropagamatravsdepginano formato de hypertexto, ou seja HTML(HyperText Markup Language),tornando a WEB cada vez mais dinmica.Porissonecessriohoje,qualquerpessoanavegantedaInternetTerum 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 Internete possa atingir seu pblico.
Web Designer Passo a Passo para Iniciantes, um guia voltado para
usurios leigos
noassuntosobreconfecodeHomePagesequeaofinalpretendedeix-lopronto
paramontarumapginapessoaloucomercialcompostadeanimaes,letreiros,
banners,imagens,tabelaseformulriospostadospracaixadee-maileainda
abordar os conceitos sobre WWW (World Wide Web), com textos
objetivos, passando
portutoriasamplamenteexemplificadossobreconstruodepginasemHTMLe
depois trabalhando como modo interativo atravs Front Page Express.
LembrandoqueexistemhojemuitosEditoresdePginasparaWEB,limitar-se
somenteaoFrontPageExpress,programaestequeacompanhaoWindows98,
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.
Porhora,umaexcelenteferramentaparainiciarseusestudossobreconfecode
Home Pages , mo obras e um bom estudo!! Neilon Mrcio
[email protected] autor WEB DESIGNER PASSO A PASSO PARA INICIANTES
Daniel Almeida 2 PARTE I INTERNET INTRODUO
MaisqueummodismoaInternettornou-seumfenmeno.
Conectandomaisdeummilhodecomputadoresecercade40milhesde usurios,
espalhados em noventa pases, valores estes que mudam a cada dia,
sem dvida no dar para ficar de fora desta teia.
Enfim,seformosdescreverInternet,amelhordefinirmos
comoComunicao.Comelaencontramosserviosefacilidades,notciase
atualidades,ousepreferircomoocasodemuitospessoas,umexcelente local
para encontrar amigos, jogos, bate papo e muito mais, como lojas
virtuais, onde voc pode comprar ou vender com toda segurana.
HISTRICO AInternetdeveincioem1969sobonomedeARPANET (USA). Composta
de quatro computadores tinha coo finalidade, demonstrar as
potencialidadesnaconstruoderedesusandocomputadoresdispersos
(espalhados)emumagranderea.Aidiafoiboa,eem1972,50 universidades e
instituies militares j possuam conexes.
Hojeumaarquiteturadesoftwareehardwarequese
comunicamentresiquesomantidaspororganizaescomerciaise
governamentais. Mas uma das principais caractersticas da Internet,
que no possuidono,paraorganizartodaessatrocadeinformaes,existem
associaesegruposquesededicamparasuportar,ratificarpadrese resolver
questes operacionais, visando promover os objetivos da Internet. A
WORD WIDE WEB AspessoascostumafalaremInterneteWeb,seramesma coisa?
Ser apenas uma gria da moada do bate papo? Ou existe realmente um
conceito cientfico para isto?
Pararesolverestadvidaetambmparacomearmosa
entenderestasriededefiniodeconceitos,vamospartirdoseguinte
princpio: AWordWideWeb(teiamundial)conhecidacomoWWW,
umanovaestruturadenavegaopelosdiversositensdedadosemvrios
computadores diferentes. O modelo WWW tratar todos os dados da
Internet
comohipertexto,isto,vinculaesentreasdiferentespartesdodocumento WEB
DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 3
parapermitirqueasinformaessejamexploradasinterativamenteeno apenas
de uma forma linear.
PorissoexistemprogramascomoMicrosoftInternetExplorer,
queaumentarammuitoapopularidadedaInternetegraasassuas
potencialidades,hojepodemosvernaspginasdaInternet,documentos
formatados(cores,efeitoseetc...),escutarmsica,assistiravdeos,emuito
mais. EnfimaWeb,ainterfacegrficadaInternet,poispodemos acessar a
Internet, transferir arquivos( Processo a qual chamamos UpLoad), e
realizar outras operaes bsica sem precisar de uma interface grfica.
ParaconcluirsestamosdefatousandoaWeb,quando
estamosnavegandofazendousodasHomePagesparaacessarumsite,ou
seja,umendereonicoquecontmaHomePage(pginainicial)eoutras
pginasquefazempartedesteconjuntodepginasetodasemumnico cdigo fonte
escrito em uma linguagem chamada HTML. CONECTANDO SE INTERNET
EmtemposremotossomentealgunsprivilegiadospodiamTer
acessoInternet.Agora,qualquerumpodeobteresseacessoporumpreo mnimo,
ou melhor, voc poder Ter acesso gratuito, pagando somente o pulso
dalinhatelefnica,oumaisgratuitoainda,oacessoeaindaopulsodalinha
telefnica, ou seja, voc dependendo do tipo da conexo que use no
precisa pagarnada,sprecisaTeroequipamentonecessrioparaTeracessoa
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
DEACESSOA INTERNET (empresa que coloca voc na Internet, logo aps
voc discar atravs da Rede Dial-Up) Linha Telefnica (Digital ou
Analgica) WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida
4 Valeressaltarqueestaumaconfiguraomnima,quandomelhoro equipamento
que usar com certeza voc ser mais feliz usando a Net. TIPOS DE
CONEXES Existem dois tipos de conexes para acesso a Internet.
DEDICADASoasconexesdiretas,utilizadaspelos
fornecedoresdeserviosquevendemconexesdetodosostipospara
pessoaseorganizaes.Estestiposdefornecedoreschamamosde Provedores.
Estas linhas so de alta velocidade e tambm muito caras. DISCADA- o
tipode conexo usada por usurios comuns.
Nessecaso,vocdiscaparaoprovedoratravsdaRedeDialUp,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
Todavezquevocacessarumsite(vejatpicoWordWide Web) por meios de
domnios quando adiciona a URL na barra de endereo, do
seuNavegador(Browser),vocverpginasnaWEBbemdinmicas, organizadas,
animadas e com ela trazendo informaes, imagens, sons, vdeos e etc.
Ento,vocdeveseperguntar.Comofeito?Comoelasse
propagam?Todasestaspginaspossuemumcdigofonteescritonuma linguagem
chamada HTML (Hyper Text Markup Language).
Estetutorialtemporobjetivomostr-locomocriareexibir
pginasHTML,comoasquevocveratravsdaWEB.Taispginasso criadasapartir
de arquivostextoASCII,contendocaracteresdemarcaoda
linguagemHTML.Umavezcriados,estesarquivossosalvoscomuma extenso
.html.Ento,entendidonovamentemaisumaetapa,vamosiniciaro
cursodeverdade.Acadaexemplovocdeversalvarseuarquivocoma extenso
html. Certo ? HIERARQUIA DE ELEMENTOS
Primeiramente,gostariadelembrar-lhecomociteialinhas acima, que
existem vrios editores de Home Pages, como por exemplo: o Front
PageExpress,NetscapeComposer,HomeSite,etc.Squenaausncia destes
aplicativos e voc desconhecendo a Linguagem de HyperTextos, HTML,
nopoderiacriarsuaspginas.Daaimportnciadeseconheceresta linguagem.
Entendeu? WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida
5 Muito bem, para estudarmos HTML, usaremos o j conhecido
BlocodeNotaseumBrowser(InternetExplorerouNetscape).Paranossos
exemplos usarei o Internet Explorer. Tudo Bem? Vamos nessa!
AestruturabsicasdeumapginaHTMLmostradana
listagem1.1.Observequeaconstruodepginasexigirousode marcadores
chamados de TAGS.Veja agora o usodeles na listagem 1.1 Listagem 1.1
COLOQUE AQUI O TTULO DA PGINA DAQUI EM DIANTE Voc DESENVOLVE SUA
PGINA Fim da Listagem 1.1 Com certeza voc observou que sempre usei
os tags, fazendo demarcao, ou
seja,elessempreestaroANTESDEALGUMACOISAEAPSALGUMA COISA. Quer mais
um exemplo para entender melhor? Tudo bem. Exemplo: EDITORA ERICA
CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO QUE FAZ Marca o incio
e o fim do documento HTML. Com ele voc inicia e finalizaa 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 1Vamos praticar?
Bementendidoosconceitosbsicosevocmaisfeliz,vamoscriarnossa primeira
pgina.1) Abra o Bloco de Notas Iniciar/Programas/Acessrios/Bloco de
Notas IMPORTANTE WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 6 2)Digiteocdigodalistagem1.2.Apsdigit-losalvenapastaMeus
Documentos ou em outra se preferir com o nomeexemplo1.html. Como?
Resposta: 1) Abra o Menu Arquivo e escolha Salvar
2)Najanelaqueaparecercomomostrarfigura1.1,faaasseguintes tarefas:
2.1)NaopoSalvaremselecioneapastaondedesejasalvar,nocaso Meus
Documentos 2.2)NaopoNomedoarquivocoloqueonomedoarquivo
exemplo1.html2.3) Finalmente cliqueno boto Salvar. Figura 1.1
Listagem 1.2 Minha Home Page Aqui neste espao desenvolverei minha
Home Page! Aguarde!! WEB DESIGNER PASSO A PASSO PARA INICIANTES
Daniel Almeida 7 Fim da Listagem 1.2
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2
Figura 1.2 Exerccio 2 Vamos aprender mais um pouco? Em alguns
momentosem sua pgina faz necessrio comentar alguns trechos
docdigoparafacilitarnaleituraemanutenodapgina,porisso adicionamos
comentrios, ou seja, palavras ou frases que no so exibidos no
Nevegador, apenas so visto como estamos trabalhando no cdigo fonte.
Nalistagem1.3faremosumnovoexemploeincrementaremosnovostags.
Digitealistagem1.3abaixoesalvecomonomeexemplo2.htmlnapasta Meus
Documentos. ATENO: Salve sempre os seus exemplos na pasta Meus
Documentos, o
processoparasalvarigualaodoExemplo1,troqueapenasonomedo arquivo. Na
dvida veja o exemplo 1. Tudo bem? Listagem 1.3 Melhorando Minha
Home Page O TTUO ADICIONADO NA PGINA ATRAVS DO TAG TITLE WEB
DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 8 Este o
ttulo Principal Este o ttulo Secundrio Estou adorando criar pginas
Esteo1PrimeiroParagrfo
Esta2 Linhado 1 Paragrfo Comesterecursoinicioumparagrfo
ECom este recurso quebro uma linha Fim da Listagem 1.3
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo2.html. Veja a figura 1.3
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 9 Figura
1.3 CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO QUE FAZ Insere
comentrios nas pginas Marcas Metas. Servem para voc especificar o
autor, palavras-chaves, descrio da pgina, etc.. Dentro do tag, tem
os comandos name e o content. No comando name voc especifica que
informao voc quer dar, e no content voc descreve a informao 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 linhahorizontal Marca um pargrafo e
acrescenta uma linha em branco.
Insere uma quebra de linha
Agora,quevocviuoresultadodoexemplo2.htmlacadavezmaisfeliz,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
dodocumento,eaprimeiraprovidnciaatomarcuidardoalinhamentodo
texto.OAlinhamentopadroquevemconfiguradonosnavegadores,a
esquerda.Paraentenderisto,digitealistagem1.4,esalvecomo IMPORTANTE
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 10
exemplo3.html,eacompanheoconceitodetagquemarcamoalinhamento dos
ttulos e paragrfos nas pginas. Listagem 1.4 Tags para Alinhamentos
Ttulo Centralizado Ttulo Direita Ttulo Esquerda Pargrafo ao Centro
Pargrafo a direita Paragrfo a esquerda Esteumtexto justificado.
Nalinguagem HTML temos vrios tipos de
alinhamentosquevocpoderaplicaremsuapgina.
Nestapartedolivro,veremoscomoalinharlinhas, pargrafos e
cabealhos.
Textocommais margem Temcommaismargem ainda Fim da Listagem 1.4 WEB
DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 11
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo3.html. Veja a figura 1.4
Figura 1.4 CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO QUE FAZ
Alinha o trecho (texto, imagem ou tabela ao centro>
align=center, right,leftou justify Atribudos dentro do tag que
marca o incio de um pargrafo 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: Width = define a largura da linha horizontal.
Exemplo: ou Noshade = desenha a linha sem a sombra para dar o
efeito de trs dimenses.Exemplo: Exerccio 4 FORMATAO DE ESTILOS
Muitobemcaroestudante,percebaqueacadaexemplosuapginavai
melhorandoaindamaissuaaparncia.Nesteexemplotrabalharemoscoma
formatao das letras bem como cor, tamanho de fonte,estilo, e etc..
Bem, preparado? Vamos l novamente para mais um estudo! IMPORTANTE
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 12 Para
entender isto, digite a listagem 1.5, e salve como exemplo4.html,
Listagem 1.5 Formatando Estilos Mudando o Estilo dos Caracteres
Texto em Negrito
Texto em Itlico
Texto sublinhado
Texto Monoespaado
Texto em Vermelho
Texto em Tamanho 5
Textocomaletra Verdana
Vocpodefazer combinaes
Editora rica
Voc poder os atributos para cada tipo de letra!
Editora rica
Estamos progredindo no curso de HTML. Este tag permite que todos os
espaos feitos no cdigo fonte sejam respeitados. Certo? Fim da
Listagem 1.5 WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 13
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5
Figura 1.5 CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO QUE FAZ
Coloca o texto em negrito Coloca o texto em itlico Coloca o
texto sublinhado Colocaotextoemfontemonoespaada.(fonteCourier,como
mquina de escrever) Modifica a formatao do texto. Atributos: Size =
define o tamanho da letra. Ex: Texto Face = define o estilo da
letra. Ex: Texto Color = define a cor da letra. Ex:Texto Marca um
trecho formatado com fonte monoespaada. A formatao com espaos e
entrada de pargrafos respeitada. Modifica a formatao padro do
texto. Ex: TABELA DE CORES
Vocpercebeuqueascoresafonteobedecemoidiomaingls,no entanto, as
cores da fonte podem ser adicionados atravs do nome ou de seus
respectivoscdigos.Entoparavocficarmaisfeliz,relacioneiaquialgumas
cores para colorir e diversificar sua home page. Veja a figura 1.6
IMPORTANTE WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 14 Figura 1.6 Exerccio 5 LISTAS NUMERADAS E MARCADAS
Elvamosnsparaummaisexerccio.Destaveztrabalharemoscomlistas
numeradasemarcadores.Assimcomoemumacartaouqualqueroutro documento
comum, precisamos listar tpicos atravs desmbolos ou nmeros. Para
entender isto, digite a listagem 1.6, e salve como exemplo5.html,
Listagem 1.6 Listas Isto uma lista Item 1 Item 2 Item
3 WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida
15 Item 1 Item 2 Item 3 Fim da Listagem 1.6
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo5.html. Veja a figura 1.7
Figura 1.7 CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO 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 Atributos Start = especifica o nmeroa partir do qual os itens
comeam a ser contados. Ex: Type = modifica o tipo do
numeradorque pode ser: nmero, letras ou algarismo romano.
Ex: IMPORTANTE WEB DESIGNER PASSO A PASSO PARA
INICIANTES Daniel Almeida 16
Marcaoincioeofimdeumalistanoordenada,ouseja, ositens da lista
recebem smbolos na primeira linha. Devem ser usados com tag
Atributos Type = modifica o tipo do marcador (smbolo), que pode
ser:Circle = um crculo vazio.Ex: Disc =um crculo
cheio. Ex: Square = um quadrado cheioEx:
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 Listas Isto uma listagem iniciando no
nmero 4 Item 1 Item 2 Item 3 Isto uma listagem com
letras Editorarica Livros Isto uma listagem em
algarismo romano Editorarica Livros Esta uma listagem
em algarismo romano a partir do nmero 3 Editorarica
Livros WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 17
Fim da Listagem 1.7
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo6.html. Veja a figura 1.8
Figura 1.8 Vamosterminarestaliocommaisumexemplo?Destavez,faremosuma
listagem com subnveis. Para entender isto, digite a listagem 1.8, e
salve como exemplo7.html Listagem 1.8 Listas Listagem e
SubListagem Item 1 Item 1.1 Item 1.2
Item 1.3 WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida
18 Item 2 Item 2.1 Item 2.1.1 Item
2.1.2 Item 2.1.3 Item 2.2 Item 2.3 Item 3 Fim da Listagem 1.8 Ufa!
Terminamos mais uma etapa! Esse cdigo foi grande, mas valeu!
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exempl7.html. Veja a figura 1.9
Figura 1.9 Exerccio6DEFININDO O CORPO DA PGINA Voc teve Ter
observado em algumas sites, que as cores de fundo da pgina
sobemdiversificados,ouemoutroscasos,umaimagemadicionadono
fundodapgina,comoumamarcadgua.Ento,todasestasdefiniesso feitas
dentro do tag .Vamos praticar? Para entender isto, digite a
listagem 1.9, e salve como exemplo8.html, Listagem 1.9 Pgina com
Fundo Colorido WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 19 Definfo cor de fundo para a pgina Fim da Listagem 1.9
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo 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:Vocpoderadicionaracorquedesejar,tantoparaofundo
quantoparaotexto.Osdoissnopodemserdamesmacor!(risos).Para escolher
a cor, consulte na Tabelade Cores (figura 1.6) Como comentei linhas
acima, voc tambm pode colocar um imagem no fundo
dapgina.Mas,antesdefazeroexerccio,observeasseguintes recomendaes:
AsimagenssuportadassodotipoGIFeJPG.Nadvidasobreimagens 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 vocarmazenatodososdocumentosHTMLreferenteapginaquepor
horadesenvolve.Certoata?Ento,bastaqueosarquivosdeimagens, 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: WEB DESIGNER PASSO A PASSO PARA
INICIANTES Daniel Almeida 20
Vocagoraresolveuorganizaraindamaisodesenvolvimentodesua pgina.
CriouumapastaprojetoedentroarmazenoutodososarquivosHTML.
Certo?Depoisresolveucriarumasubpastadentrodapastaprojetochamada
imagens. Muito bem garoto! Excelente atitude e nela voc colocou
todas as imagens.Ento,tudoestcorreto,masnoesqueadenahorade
especificar a imagem que deseja inserir no fundo dentro do tag , o
caminho,ouseja,onomedasubpasta.Entendeu?Nosepreocupevoc 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 Inserindo
Imagem no Fundo da Pgina Editora rica Livros Dicas
Volte Sempre Fim da Listagem 1.10
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo9.html. Veja figura 1.11
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 21 Figura
1.11
Observao:Casoaimagemestivesseemumasubpastabastariaapontarocaminho
para ela no tag. Veja o exemplo: Exemplo: Onde: imagens= o nome da
subpasta parede.gif = o nome do arquivo. CONCEITO DOS TAGS USADOS
NESTE EXERCCIO TAGO 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-lheque
uma imagem
spoderserexibidanobrowser,seelaestivernamesmapasta,ouento, voc
dever apontar o caminho onde est, conforme o exemplo de nmero 6.
Lembra? Outrofatoque,vocpoderescolherasimagensquedesejar,basta
substituir o nome da imagem que est no exemplo pela a que voc
escolheu. Tudo certinho agora? Vamos em frente! IMPORTANTE WEB
DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 22 Para
entender isto, digite a listagem 1.11, e salve como exemplo10.html,
Listagem 1.11 Imagens Agora estamos trabalhando com imagens Esta
sua primeira imagem. Sorria? Veja se consegue enxergar, as
seguintes imagens?
O rosto de um velho
Uma moa
Um cachorro
Um outro velho
Um pssaro
E algo mais
Fim da Listagem 1.11
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo10.html. Veja figura 1.12
Figura 1.12 WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 23 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!!!)
Vamosparaumexemplo?Destavez,trabalharemoscomoalinhamentoda imagem e
do texto. Para entender isto, digite a listagem 1.12, e salve como
exemplo11.html Listagem 1.12 Imagens Notenesteexemploqueaimagem est
entre o texto
Imagemest esquerda e o texto no topo
Imagemest esquerda e o texto no centro
Nesteexemploa imagem ficou alinhada esquerda, permitindo que o
texto ficasse todo direita ao redor da imagem. Utilize este recurso
toda vezquedesejarqueotextofiqueaoladoda imagem
Fim da Listagem 1.12
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo11.html. Veja figura 1.13
Figura 1.13 WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 24 CONCEITO DOS TAGS USADOS NESTE EXERCCIO TAGO QUE FAZ
Insere uma imagem Atributos srcindica o nome da imagem a ser
carregado. align=middlecentraliza o base do texto com o centro da
imagem align=leftfazaimagemflutuaraesquerdaenquantootexto circunda
imagem direita. align=topalinha o texto no topoalign=right faz a
imagem flutuar a direita enquanto o texto circunda imagem esquerda.
alt=nindicaotextoparaserexibidoquandoonavegadorno exibe a imagem.
Sendo que n o ttulo que identifique a imagem. Exemplo: Exerccio 8
TABELAS
Nestaetapaconheceremosostagsresponsveispelaconstruodetabelas. 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 Montando
Tabelas Clula1 Clula2 Clula3 Frase 1 Frase 2 Frase 3 Listagem 1.13
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo12.html. Veja figura 1.14
IMPORTANTE WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel
Almeida 25 Figura 1.13
Vocpodetambmcontrolarasdimensesdesuatabela.Vamosparamais uma
listagem? Como sempre, digite a listagem 1.14, e salve como
exemplo13.html Listagem 1.14 Montando Tabelas Item 1 Item 2 Item 3
Item 4 Item 5 Item 6 Fim da Listagem 1.14
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo13.html. Veja figura 1.15
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 26 Figura
1.15 Alinhamentos
Oselementosdentrodatabelatambmpodemseralinhadosdamesmaque um
pargrafo. Veja mais um exemplo atravs da listagem 1.15 Listagem
1.15 Montando Tabelas No Centro Para Direita Para a Esquerda Em
baixo No Topo Centro na Vertical Fim da Listagem 1.15
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo14.html. Veja figura 1.16
WEB DESIGNER PASSO A PASSO PARA INICIANTES Daniel Almeida 27 Figura
1.16 Cor de Fundo Voc pode ainda adicionar cores no fundo da tabela
ou apenas de uma clula
quedeseja.Lembradoatributobgcolor,entocomestemesmoquevoc pode
adicionar um cor padro para tabela ou para a clula. Veja o exemplo:
O resultado seria assim: Toda Tabela teria um preenchimento azul
Veja mais este exemplo: Bege Vermelho O resultado seria assim: As
clulas teriam cores diferentes WEB DESIGNER PASSO A PASSO PARA
INICIANTES Daniel Almeida 28 CONCEITO DOS TAGS USADOS NESTE
EXERCCIO TAGO 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 border=nColoca uma borda na
tabela, onde n o valor em pixels da borda align=leftAlinha o
contedo da clula a esquerda na horizontal align=rightAlinha o
contedo da clula a direita na horizontal align=centerAlinha o
contedo da clula ao centro na horizontal valign=topAlinha o contedo
da clula no topo (vertical) valign=bottomAlinha o contedo da clula
na base da clula (vertical) valign=middleAlinha o contedo da clula
no centro na vertica Observao:Oatributo de alinhamento ALIGN, faz o
alinhamento na horizontal. Oatributo de alinhamento VALIGN, faz o
alinhamento na vertical.
Eassimmeucaroleitor,conclumosmaisumaetapadenossocurso.Espero que te
guia esteja sendo realmente um farol em seu aprendizado. Exerccio 9
LINKS Comofaleinoincio,estamosproduzindopginasdehipertextos,ouseja,
textos que podem fazer ligaes com outros textos, ligando pginas
entre si e a
WEB.Ento,estepontosnschamamosdelinksouhyperlinks,ncorasde
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 , 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:Frase que aparece na
pgina Onde: 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 IMPORTANTE WEB DESIGNER
PASSO A PASSO PARA INICIANTES Daniel Almeida 29 Listagem 1.16
Estudando Links Exemplo de Links Internos Seo de Exemplos Exemplo1
Exemplo2 Exemplo de Links Externos Conhea a Editora rica
Apple Computer Vocpodeusarimagensparausarnos links Imagens Fim da
Listagem 1.16
ParaveroresultadodesteexemploabraoInternetExplorer,enabarrade
endereo digite C:\Meus documentos\exemplo15.html. Veja figura 1.17
Figura 1.17 www.unidesign.hpg,com.br Soaquelesvoparaalguma
outrapginadentrodomesmo site So aqueles vo para outro
site!