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 cmwn@bol.com.br 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!