8/3/2019 Web Designer - Passo a Passo Para Iniciantes
1/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 1http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
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 estdentro da Rede Mundial de Computadores, a Net para os amigos ntimos. Hoje comum 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 maisagora 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, localizarinformaes sobre poltica, economia, notcias, educao, imagens, enfim qualquertema que precisar, at mesmo assuntos quentes. Pela Internet tambm eu posso fazeramigos, divulgar meu trabalhos, fazer conferncias atravs de programas de batepapo como Mirc, ICQ e outros. Mais ainda, posso comprar, vender e divulgar o meunegcio pela Internet, atravs de aplicativos voltados para WEB, desenvolvidos emqualquer 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 noformato de hypertexto, ou seja HTML(HyperText Markup Language), tornando a WEBcada vez mais dinmica.Por isso necessrio hoje, qualquer pessoa navegante da Internet Ter umconhecimento mnimo sobre HTML, para que assim ela possa fazer sua prpria HomePage com tantos megabytes como diz Gilberto Gil e criar seu Web Site para que suasinformaes pessoais ou comerciais possam velejar pela Internet e possa atingir seupblico.
Web Designer Passo a Passo para Iniciantes, um guia voltado para usurios leigosno assunto sobre confeco de Home Pages e que ao final pretende deix-lo prontopara montar uma pgina pessoal ou comercial composta de animaes, letreiros,banners, imagens, tabelas e formulrios postados pra caixa de e-mail e aindaabordar os conceitos sobre WWW (World Wide Web), com textos objetivos, passandopor tutorias amplamente exemplificados sobre construo de pginas em HTML edepois trabalhando com o modo interativo atravs Front Page Express.
Lembrando que existem hoje muitos Editores de Pginas para WEB, limitar-sesomente 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 tempoem que este software no atender a tanta imaginao ou criao que pretenda fazer.Por hora, uma excelente ferramenta para iniciar seus estudos sobre confeco deHome Pages , mo obras e um bom estudo!!
Neilon [email protected]
autor
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
2/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 2http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
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 deusurios, 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 definirmoscomo Comunicao. Com ela encontramos servios e facilidades, notcias eatualidades, ou se preferir como o caso de muitos pessoas, um excelentelocal 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 aspotencialidades na construo de redes usando computadores dispersos(espalhados) em uma grande rea. A idia foi boa, e em 1972, 50universidades e instituies militares j possuam conexes.
Hoje uma arquitetura de software e hardware que se
comunicam entre si que so mantidas por organizaes comerciais egovernamentais. Mas uma das principais caractersticas da Internet, que nopossui dono, para organizar toda essa troca de informaes, existemassociaes e grupos que se dedicam para suportar, ratificar padres eresolver questes operacionais, visando promover os objetivos da Internet.
A WORD WIDE WEB
As pessoas costuma falar em Internet e Web, ser a mesmacoisa? Ser apenas uma gria da moada do bate papo? Ou existe realmenteum conceito cientfico para isto?
Para resolver esta dvida e tambm para comearmos aentender esta srie de definio de conceitos, vamos partir do seguinteprincpio:
A Word Wide Web (teia mundial) conhecida como WWW,uma nova estrutura de navegao pelos diversos itens de dados em vrioscomputadores diferentes. O modelo WWW tratar todos os dados da Internet
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
3/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 3http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
como hipertexto, isto , vinculaes entre as diferentes partes do documentopara permitir que as informaes sejam exploradas interativamente e noapenas de uma forma linear.
Por isso existem programas como Microsoft Internet Explorer,que aumentaram muito a popularidade da Internet e graas as suaspotencialidades, hoje podemos ver nas pginas da Internet, documentosformatados (cores, efeitos e etc...), escutar msica, assistir a vdeos, e muitomais.
Enfim a Web, a interface grfica da Internet, pois podemosacessar a Internet, transferir arquivos( Processo a qual chamamos UpLoad), erealizar outras operaes bsica sem precisar de uma interface grfica.
Para concluir s estamos de fato usando a Web, quandoestamos navegando fazendo uso das Home Pages para acessar um site, ouseja, um endereo nico que contm a Home Page (pgina inicial) e outraspginas que fazem parte deste conjunto de pginas e todas em um nicocdigo fonte escrito em uma linguagem chamada HTML.
CONECTANDO SE INTERNET
Em tempos remotos somente alguns privilegiados podiam Teracesso Internet. Agora, qualquer um pode obter esse acesso por um preomnimo, ou melhor, voc poder Ter acesso gratuito, pagando somente o pulsoda linha telefnica, ou mais gratuito ainda, o acesso e ainda o pulso da linhatelefnica, ou seja, voc dependendo do tipo da conexo que use no precisapagar nada, s precisa Ter o equipamento necessrio para Ter acesso aInternet.
EQUIPAMENTOS NECESSRIOSOs equipamentos necessrios so:
HARDWAREPC 486/DX4 1008 MEGA DE RAMPLACA DE FAX MODEM DE 28.800 bps
SOFTWARE
Sistema Operacional 95
Internet Explorer ou NetscapeOutlook 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)
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
4/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 4http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Linha Telefnica (Digital ou Analgica)
Vale ressaltar que esta uma configurao mnima, quando melhor oequipamento 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 parapessoas e organizaes. Estes tipos de fornecedores chamamos deProvedores. 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, pedindoacesso 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 WideWeb) por meios de domnios quando adiciona a URL na barra de endereo, doseu Navegador (Browser), voc ver pginas na WEB bem dinmicas,organizadas, animadas e com ela trazendo informaes, imagens, sons, vdeose etc.
Ento, voc deve se perguntar. Como feito? Como elas sepropagam? Todas estas pginas possuem um cdigo fonte escrito numalinguagem chamada HTML (Hyper Text Markup Language).
Este tutorial tem por objetivo mostr-lo como criar e exibirpginas HTML, como as que voc ver atravs da WEB. Tais pginas socriadas a partir de arquivos texto ASCII, contendo caracteres de marcao dalinguagem HTML. Uma vez criados, estes arquivos so salvos com umaextenso .html.
Ento, entendido novamente mais uma etapa, vamos iniciar ocurso de verdade. A cada exemplo voc dever salvar seu arquivo com aextenso html. Certo ?
HIERARQUIA DE ELEMENTOS
Primeiramente, gostaria de lembrar-lhe como citei a linhasacima, que existem vrios editores de Home Pages, como por exemplo: o FrontPage Express, Netscape Composer, Home Site, etc. S que na ausncia
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
5/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 5http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
destes aplicativos e voc desconhecendo a Linguagem de HyperTextos, HTML,no poderia criar suas pginas. Da a importncia de se conhecer estalinguagem. Entendeu?
Muito bem, para estudarmos HTML, usaremos o j conhecidoBloco de Notas e um Browser (Internet Explorer ou Netscape). Para nossosexemplos usarei o Internet Explorer. Tudo Bem? Vamos nessa!
A estrutura bsicas de uma pgina HTML mostrada nalistagem 1.1. Observe que a construo de pginas exigir o uso demarcadores chamados de TAGS. Veja agora o uso deles 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, ouseja, eles sempre estaro ANTES DE ALGUMA COISA E APS ALGUMA
COISA. Quer mais um exemplo para entender melhor? Tudo bem.Exemplo: EDITORA ERICA
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG 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 pginaaparecer na barra superior do browser. Marca o incio e o fim do do corpo da pgina
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
6/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 6http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
EXERCCIO 1 Vamos praticar?
Bem entendido os conceitos bsicos e voc mais feliz, vamos criar nossaprimeira pgina.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 MeusDocumentosou em outra se preferir com o nome exemplo1.html. Como?Resposta:
1) Abra o Menu Arquivo e escolha Salvar2) Na janela que aparecer como mostrar figura 1.1, faa as seguintestarefas:
2.1) Na opo Salvar em selecione a pasta onde deseja salvar, no casoMeus Documentos
2.2) Na opo Nome do arquivo coloque o nome do arquivoexemplo1.html2.3) Finalmente clique no boto Salvar.
Figura 1.1
Listagem 1.2
Minha Home Page
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
7/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 7http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Aqui neste espao desenvolverei minha Home Page!Aguarde!!
Fim da Listagem 1.2
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo 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 trechosdo cdigo para facilitar na leitura e manuteno da pgina, por issoadicionamos comentrios, ou seja, palavras ou frases que no so exibidos noNevegador, 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, oprocesso para salvar igual ao do Exemplo1, troque apenas o nome doarquivo. Na dvida veja o exemplo 1. Tudo bem?
O TTUO ADICIONADO NA PGINA ATRAVS DO TAG TITLE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
8/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 8http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Listagem 1.3
Melhorando Minha Home Page
Este o ttulo PrincipalEste o ttulo Secundrio Estou adorando criar pginas
Este o 1 Primeiro Paragrfo
Esta 2Linha do 1 Paragrfo
Com este recurso inicio um paragrfo
E Comeste recurso quebro uma linha
Fim da Listagem 1.3Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo2.html. Veja a figura 1.3
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
9/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 9http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.3
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG O 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. Nocomando 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 de1 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
Agora, que voc viu o resultado do exemplo2.html a cada vez mais feliz, porest entendendo esta linguagem, vamos passar para o Exerccio 3.
Exerccio 3 TAGS DE ALINHAMENTO
Assim, como num documento comum, h necessidade de melhorar a aparnciado documento, e a primeira providncia a tomar cuidar do alinhamento dotexto. O Alinhamento padro que vem configurado nos navegadores, aesquerda. Para entender isto, digite a listagem 1.4, e salve como
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
10/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 10http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
exemplo3.html, e acompanhe o conceito de tag que marcam o alinhamentodos ttulos e paragrfos nas pginas.
Listagem 1.4
Tags para Alinhamentos
Ttulo CentralizadoTtulo Direita Ttulo Esquerda
Pargrafo ao Centro
Pargrafo a direita
Paragrfo a esquerda
Este um texto
justificado. Na linguagem HTML temos vrios tipos dealinhamentos que voc poder aplicar em sua pgina.Nesta parte do livro,veremos como alinhar linhas,pargrafos e cabealhos.
Texto com maismargem
Tem com mais margemainda
Fim da Listagem 1.4
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
11/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 11http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo3.html. Veja a figura 1.4
Figura 1.4
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG O QUE FAZ Alinha o trecho (texto, imagem ou tabela ao centro>align=center,right, left oujustify
Atribudos dentro do tag
que marca o incio de um pargrafomodificam o alinhamento do ttulo.Center= alinha ao centroRight = alinha a direitaLeft = alinha a esquerdaJustify = 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 trsdimenses. Exemplo:
Exerccio 4 FORMATAO DE ESTILOS
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
12/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 12http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Muito bem caro estudante, perceba que a cada exemplo sua pgina vaimelhorando ainda mais sua aparncia. Neste exemplo trabalharemos com aformatao 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
Formatando Estilos
Mudando o Estilo dos Caracteres
Texto em Negrito
Texto em Itlico
Texto sublinhado
Texto Monoespaado
Texto em Vermelho
Texto em Tamanho 5
Texto com a letraVerdana
Voc pode fazercombinaes
Editora
rica
Voc poder os atributos para cada tipo de
letra!
Editora rica
Estamos progredindono curso de HTML.
Este tag permite que todos os espaosfeitos no cdigo fonte
sejam respeitados. Certo?
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
13/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 13http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Fim da Listagem 1.5Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5
Figura 1.5
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG 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: TextoFace = define o estilo da letra. Ex: TextoColor = define a cor da letra. Ex:Texto
Marca um trecho formatado com fonte monoespaada. A formataocom espaos e entrada de pargrafos respeitada.
Modifica a formatao padro do texto.
Ex:
TABELA DE CORES
Voc percebeu que as cores a fonte obedecem o idioma ingls, noentanto, as cores da fonte podem ser adicionados atravs do nome ou de seus
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
14/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 14http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
respectivos cdigos. Ento para voc ficar mais feliz, relacionei aqui algumascores 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 outrodocumento comum, precisamos listar tpicos atravs de smbolos ou nmeros.
Para entender isto, digite a listagem 1.6, e salve como exemplo5.html,
Listagem 1.6
Listas
Isto uma lista
Item 1
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
15/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 15http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Item 2Item 3
Item 1Item 2Item 3
Fim da Listagem 1.6Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo5.html. Veja a figura 1.7
Figura 1.7
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG 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 AtributosStart = especifica o nmero a partir do qual os itens comeam a sercontados. Ex: Type = modifica o tipo do numerador que pode ser: nmero, letrasou algarismo romano.Ex:
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
16/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 16http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Marca o incio e o fim de uma lista no ordenada, ou seja, os itensda lista recebem smbolos na primeira linha. Devem ser usados comtag AtributosType = modifica o tipo do marcador (smbolo), que pode ser:Circle = um crculo vazio. Ex: Disc = um crculo cheio. Ex: Square = um quadrado cheio Ex:
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
ListasIsto uma listagem iniciando no nmero 4
Item 1Item 2Item 3
Isto uma listagem com letras
EditoraricaLivros
Isto uma listagem em algarismo romanoEditoraricaLivros
Esta uma listagem em algarismo romano a partirdo nmero 3
Editora
ricaLivros
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
17/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 17http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Fim da Listagem 1.7Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo6.html. Veja a figura 1.8
Figura 1.8
Vamos terminar esta lio com mais um exemplo? Desta vez, faremos umalistagem com subnveis.
Para entender isto, digite a listagem 1.8, e salve como exemplo7.html
Listagem 1.8Listas
Listagem e SubListagemItem 1
Item 1.1Item 1.2Item 1.3
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
18/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 18http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Item 2
Item 2.1
Item 2.1.1
Item 2.1.2Item 2.1.3
Item 2.2Item 2.3
Item 3
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 deendereo digite C:\Meus documentos\exempl7.html. Veja a figura 1.9
Figura 1.9
Exerccio 6 DEFININDO O CORPO DA PGINA
Voc teve Ter observado em algumas sites, que as cores de fundo da pginaso bem diversificados, ou em outros casos, uma imagem adicionado nofundo da pgina, como uma marca dgua. Ento, todas estas definies sofeitas dentro do tag . Vamos praticar?Para entender isto, digite a listagem 1.9, e salve como exemplo8.html,
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
19/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 19http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Listagem 1.9
Pgina com Fundo Colorido
Definfo cor de fundo para a pgina
Fim da Listagem 1.9Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo8.html. O resultado, ser umapgina 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 fundoquanto para o texto. Os dois s no podem ser da mesma cor!(risos). Paraescolher a cor, consulte na Tabelade Cores (figura 1.6)
Como comentei linhas acima, voc tambm pode colocar um imagem no fundoda pgina. Mas, antes de fazer o exerccio, observe as seguintesrecomendaes: 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.
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
20/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 20http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Exemplo: Imagine que voc tem uma pasta chamada projeto e nessa pastavoc armazena todos os documentos HTML referente a pgina que porhora desenvolve. Certo at a? Ento, basta que os arquivos de imagens,tambm fiquem na mesma pasta projeto, assim no ter problema na horade visualizar no Browser.
Outro exemplo que posso citar o seguinte. Imagine agora outra situao:Voc agora resolveu organizar ainda mais o desenvolvimento de suapgina.Criou uma pasta projeto e dentro armazenou todos os arquivos HTML.Certo?Depois resolveu criar uma subpasta dentro da pasta projeto chamadaimagens. Muito bem garoto! Excelente atitude e nela voc colocou todas asimagens. Ento, tudo est correto, mas no esquea de na hora deespecificar a imagem que deseja inserir no fundo dentro do tag , ocaminho, ou seja, o nome da subpasta. Entendeu? No se preocupe vocfar 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
LivrosDicasVolte Sempre
Fim da Listagem 1.10Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo9.html. Veja figura 1.11
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
21/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 21http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.11
Observao: Caso a imagem estivesse em uma subpasta bastaria apontar o caminhopara ela no tag. Veja o exemplo:Exemplo:
Onde:imagens= o nome da subpastaparede.gif = o nome do arquivo.
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG O QUE FAZ Marca o incio e o fim do corpo da pgina
Atributos
Bgcolor = define a cor do fundo da pginaText = define a cor do texto padro da pginaBackground = permite inserir uma imagem como fundo da pginaBgproperties = 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 exercitaremosos tags que permitem a insero de imagens em sua home page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagems 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, bastasubstituir o nome da imagem que est no exemplo pela a que voc escolheu.
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
22/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 22http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Tudo certinho agora? Vamos em frente!
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.11Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo10.html. Veja figura 1.12
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
23/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 23http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.12
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 daimagem e do texto.
Para entender isto, digite a listagem 1.12, e salve como exemplo11.htmlListagem 1.12
Imagens
Note neste exemplo que a imagem est entre o texto
Imagem est esquerda e o texto no topo
Imagem est esquerda e o texto no centro
Neste exemplo aimagem ficou alinhada esquerda,permitindo que o
texto ficasse todo direita aoredor da imagem. Utilize este recurso
todavez que desejar que o texto fique ao lado daimagem
Fim da Listagem 1.12Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo11.html. Veja figura 1.13
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
24/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 24http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.13
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG O QUE FAZ Insere uma imagem
Atributossrc indica o nome da imagem a ser carregado.align=middle centraliza o base do texto com o centro da imagemalign=left faz a imagem flutuar a esquerda enquanto o textocircunda imagem direita.align=top alinha o texto no topoalign=right faz a imagem flutuar a direita enquanto o texto circundaimagem esquerda.alt=n indica o texto para ser exibido quando o navegador noexibe a imagem. Sendo que n o ttulo que identifique a imagem.
Exemplo:
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 tabelacomo recurso para a definio dos layouts de nossas pginas. Por hora, vamosaos principais tags. Tudo Bem?
Como sempre, digite a listagem 1.13, e salve como exemplo12.htmlListagem 1.13
Montando Tabelas
Clula1Clula2Clula3
Frase 1Frase 2Frase 3
IMPORTANTE
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
25/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 25http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Listagem 1.13Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo12.html. Veja figura 1.14
Figura 1.13
Voc pode tambm controlar as dimenses de sua tabela. Vamos para maisuma listagem?Como sempre, digite a listagem 1.14, e salve como exemplo13.html
Listagem 1.14
Montando Tabelas
Item 1Item 2Item 3
Item 4Item 5Item 6
Fim da Listagem 1.14Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo13.html. Veja figura 1.15
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
26/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 26http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.15
AlinhamentosOs elementos dentro da tabela tambm podem ser alinhados da mesma queum pargrafo. Veja mais um exemplo atravs da listagem 1.15
Listagem 1.15
Montando Tabelas
No CentroPara DireitaPara a Esquerda
Em baixoNo TopoCentro na Vertical
Fim da Listagem 1.15Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo14.html. Veja figura 1.16
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
27/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 27http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
Figura 1.16
Cor de FundoVoc pode ainda adicionar cores no fundo da tabela ou apenas de uma clulaque deseja. Lembra do atributo bgcolor, ento com este mesmo que vocpode 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 VermelhoO resultado seria assim: As clulas teriam cores diferentes
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
28/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 28http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG O QUE FAZ Marca o incio e o fim de uma tabela
AtributosWidth define a largura da tabela ou da clulaHeight define a altura da tabela ou da clulaCellpadding define a margem dentro das clulas
Cellspacing define o espao entre as clulasBgcolor 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 clulaborder=n Coloca uma borda na tabela, onde n o valor em pixels da bordaalign=left Alinha o contedo da clula a esquerda na horizontalalign=right Alinha o contedo da clula a direita na horizontalalign=center Alinha o contedo da clula ao centrona horizontalvalign=top Alinha o contedo da clula no topo (vertical)valign=bottom Alinha o contedo da clula na base da clula (vertical)valign=middle 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. Esperoque 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 aWEB. Ento, este pontos ns chamamos de links ou hyperlinks, ncoras dehipertexto, todos com a mesma funo, de atravs de um nico clique sobre afrase ou imagem conduzir a algum lugar no site ou na WEB.O Tag responsvel o , onde dentro deste, atravs de um atributo coloco areferncia, ou seja, A URL (Uniform Resource Locator).Para criar um link usamos a seguinte sintaxe:
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
29/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 29http://www.estudogratis.com Onde voc atualiza seu conhecimento!
Cursos, E-books e Apostilas grtis. Acesse e comprove.
SINTAXE: Frase que aparece na pginaOnde: tag que marca o incio e o fim do linkhref= atributo que especifica o nome da refernciaURL 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
Listagem 1.16
Estudando Links
Exemplo de Links InternosSeo de ExemplosExemplo1Exemplo2Exemplo
de Links ExternosConhea a Editorarica
Apple ComputerVoc pode usar imagens para usar noslinksImagens
Fim da Listagem 1.16Para ver o resultado deste exemplo abra o Internet Explorer, e na barra deendereo digite C:\Meus documentos\exemplo15.html. Veja figura 1.17
Figura 1.17
8/3/2019 Web Designer - Passo a Passo Para Iniciantes
30/30
WEB DESIGNER Passo a passo para iniciantes Neilon Mrcio
Pgina: 30http://www.estudogratis.com Onde voc atualiza seu conhecimento!