Curso de Webdesign

8/8/2019 Curso de Webdesign

1/31

Curso de WebdesignMaterial de Curso de Webdesign Gratuito

Programa, o que voc ir aprender:

y INTERNETy HISTRICOy A WORD WIDE WEBy CONECTANDO SE INTERNETy EQUIPAMENTOS NECESSRIOSy TIPOS DE CONEXESy INICIO DO CURSO DE HTML 4.0y HIERARQUIA DE ELEMENTOSy TAGS DE ALINHAMENTOy FORMATAO DE ESTILOSy TABELA DE CORESy LISTAS NUMERADAS E MARCADASy DEFININDO O CORPO DA PGINAy IMAGENSy TABELASy LINKS

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 com um custo mnimo para acessar a Internet pessoas do mundo inteiro procuramest sempre inteirado do assunto sobre Internet e dos recursos que ela oferece, aindamais 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, localizarinformaes sobre poltica, economia, notcias, educao, imagens, enfim qualquer temaque precisar, at mesmo assuntos quentes.

Pela Internet tambm eu posso fazer amigos, divulgar meu trabalhos, fazer confernciasatravs 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 voltadospara 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, somenteem saber:

O que preciso para se conectar Meios de Navegao


2/31

Correio Eletrnico Rede Dial Up

necessrio entender que estas informaes se propagam atravs de pgina no formatode hypertexto, ou seja HTML(HyperTextMarkupLanguage), tornando a WEB cada vezmais dinmica.

Por isso necessrio hoje, qualquerpessoa navegante da Internet Terum conhecimento mnimo sobreHTML, para que assim ela possafazer sua prpria Home Page comtantos megabytes como diz GilbertoGil e criar seu Web Site para quesuas informaes pessoais oucomerciais possam velejar pela

Internet e possa atingir seu pblico.

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 pronto paramontar uma pgina pessoal ou comercial composta de animaes, letreiros, banners,imagens, tabelas e formulrios postados pra caixa de e-mail e ainda abordar osconceitos sobre WWW (World Wide Web), com textos objetivos, passando por tutoriasamplamente exemplificados sobre construo de pginas em HTML e depoistrabalhando com o modo interativo atravs Front Page Express.

Lembrando que existem hoje muitos Editores de Pginas para WEB, limitar-se somenteao Front Page Express, programa este que acompanha o Windows 98, ancorar seu

barco na Net, procurar expandir seus conhecimentos em Web Designer realmente Terentendido o Front Page Express e Ter evoludo, pois chegar um tempo em que estesoftware no atender a tanta imaginao ou criao que pretenda fazer. Por hora, umaexcelente ferramenta para iniciar seus estudos sobre confeco de Home Pages , moobras e um bom estudo!!

PARTE I

INTERNET

INTRODUO

Mais que um modismo a Internet tornou-se um fenmeno. Conectandomais de um milho de computadores e cerca de 40 milhes de usurios, espalhados emnoventa pases, valores estes que mudam a cada dia, sem dvida no dar para ficar defora desta teia.Enfim, se formos descrever Internet, a melhor definirmos comoComunicao. Com ela encontramos servios e facilidades, notcias e atualidades, ou se


3/31

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 vendercom toda segurana.

HISTRICO

A Internet deve incio em 1969 sob o nome de ARPANET (USA).Composta de quatro computadores tinha coo finalidade, demonstrar as potencialidadesna construo de redes usando computadores dispersos (espalhados) em uma granderea. A idia foi boa, e em 1972, 50 universidades e instituies militares j possuamconexes.Hoje uma arquitetura de software e hardware que se comunicamentre si que so mantidas por organizaes comerciais e governamentais. Mas uma das

principais caractersticas da Internet, que no possui dono, para organizar toda essatroca de informaes, existem associaes e grupos que se dedicam para suportar,ratificar padres e resolver questes operacionais, visando promover os objetivos daInternet.

A WORLD 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 conceitocientfico para isto?Para resolver esta dvida e tambm para comearmos a entender estasrie de definio de conceitos, vamos partir do seguinte princpio:

A Word Wide Web (teia mundial) conhecida como WWW, umanova estrutura de navegao pelos diversos itens de dados em vrios computadoresdiferentes. O modelo WWW tratar todos os dados da Internet como hipertexto, isto ,vinculaes entre as diferentes partes do documento para permitir que as informaessejam exploradas interativamente e no apenas de uma forma linear.Por isso existem programas como Microsoft Internet Explorer, queaumentaram 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 aInternet, transferir arquivos( Processo a qual chamamos UpLoad), e realizar outrasoperaes bsica sem precisar de uma interface grfica.Para concluir s estamos de fato usando a Web, quando estamosnavegando 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 desteconjunto de pginas e todas em um nico cdigo fonte escrito em uma linguagemchamada 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


4/31

gratuito ainda, o acesso e ainda o pulso da linha telefnica, ou seja, voc dependendo dotipo da conexo que use no precisa pagar nada, s precisa Ter o equipamentonecessrio para Ter acesso a Internet.

EQUIPAMENTOSNECESSRIOS

Os equipamentos necessrios so:

HARDWAREPC 486/DX4 1008 MEGA DE RAMPLACA DE FAX MODEM DE 28.800 bpsSOFTWARESistema Operacional 95Internet Explorer ou NetscapeOutlook Express ou Internet Mail

Voc vai precisa ainda:

PROVEDOR DE ACESSO A INTERNET (empresa que colocavoc na Internet, logo aps voc discar atravs da Rede Dial-Up)

Linha Telefnica (Digital ou Analgica)Vale ressaltar que esta uma configurao mnima, quanto melhor o equipamento queusar com certeza voc ser mais feliz usando a Net.

TIPOS DE CONEXESExistem dois tipos de conexes paraacesso a Internet. DEDICADA So as conexes diretas, utilizadas

pelos fornecedores de servios quevendem conexes de todos os tipos

para pessoas e organizaes. Estestipos de fornecedores chamamos deProvedores. Estas linhas so de altavelocidade e tambm muito caras.DISCADA - o tipo de conexousada por usurios comuns. Nessecaso, voc disca para o provedoratravs da Rede DialUp, pedindoacesso a Internet. Bem , tendo

entendido tudo isso e voc feliz davida, daremos inicio ao nosso cursode HTML..

INICIO DO CURSO DE HTML 4.0

Toda vez que voc acessar um site (veja tpico Word Wide Web) pormeios de domnios quando adiciona a URL na barra de endereo, do seu Navegador


5/31

(Browser), voc ver pginas na WEB bem dinmicas, organizadas, animadas e com elatrazendo informaes, imagens, sons, vdeos e etc.

Ento, voc deve se perguntar. Como feito? Como elas sepropagam? Todas estas pginas possuem um cdigo fonte escrito numa linguagemchamada HTML(HyperTextMarkupLanguage).

Este tutorial tem por objetivo mostr-lo como criar e exibir pginasHTML, como as que voc ver atravs da WEB. Tais pginas so criadas a partir dearquivos texto ASCII, contendo caracteres de marcao da linguagemHTML. Uma vezcriados, estes arquivos so salvos com uma extenso .html. Ento, entendido novamentemais uma etapa, vamos iniciar o curso de verdade. A cada exemplo voc dever salvarseu arquivo com a extenso html. Certo ?

HIERARQUIA DE ELEMENTOS

Primeiramente, gostaria de lembrar-lhe como citei a linhas acima, queexistem 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?

(Internet Explorer ou Netscape). Para nossos exemplos usarei oInternet 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

COLOQUE AQUI O TTULO DA PGINADAQUI EM DIANTE Voc DESENVOLVE SUA PGINA

Fim da Listagem 1.1

Com certeza voc observou que sempre usei os tags, fazendo demarcao, ou seja, 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 USADOSNESTE EXERCCIO


6/31

EXERCCIO 1 Vamos praticar?

Bem entendido os conceitos bsicos e voc mais feliz, vamos criar nossa primeirapgina.

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 ouem 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 MeusDocumentos

2.2) Na opo Nome do arquivo coloque o nome do arquivo exemplo1.html

2.3) Finalmente clique no boto Salvar.


7/31

Listagem 1.2

Minha Home Page

Aqui neste espao desenvolvereiminha Home Page!Aguarde!!

O TTUO ADICIONADO NAPGINAATRAVS DO TAGTITLE

Fim da Listagem 1.2

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo1.html. Veja a figura 1.2

Exerccio 2 Vamos aprender mais um pouco?

Em alguns momentos em sua pgina faz necessrio comentar alguns trechos do cdigopara facilitar na leitura e manuteno da pgina, por isso adicionamos comentrios, ouseja, palavras ou frases que no so exibidos no Nevegador, apenas so visto comoestamos trabalhando no cdigo fonte.

Na listagem 1.3 faremos um novo exemplo e incrementaremos novos tags. Digite alistagem 1.3 abaixo e salve com o nome exemplo2.html na pasta Meus Documentos.


8/31

ATENO: Salve sempre os seus exemplos na pastaMeus Documentos, oprocesso para salvar igual ao do Exemplo1, troque apenas o nome do arquivo. Nadvida veja o exemplo 1. Tudo bem?

Listagem 1.3

Melhorando Minha Home PageEste 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 de endereodigite C:\Meus documentos\exemplo2.html. Veja a figura 1.3


9/31


Agora, que voc viu o resultado do exemplo2.html a cada vez mais feliz, por estentendendo 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. OAlinhamento padro que vem configurado nos navegadores, a esquerda. Para entenderisto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o conceito de tagque marcam o alinhamento dos ttulos e paragrfos nas pginas.

Listagem 1.4


10/31

Tags para AlinhamentosTtulo 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 maismargemTem com mais margemainda

Fim da Listagem 1.4

Para ver o resultado deste exemploabra o Internet Explorer, e na barrade endereo digite C:\Meusdocumentos\exemplo3.html. Veja afigura 1.4


11/31


TAG O QUE FAZ

Alinha o trecho (texto, imagem ou tabela ao centro>

align=center,right, left ouustify

Atribudos dentro do tag

que marca o incio de umpargrafo modificam o alinhamento do ttulo. Center=alinha ao centro Right = alinha a direitaLeft = alinha a esquerdaJustify = faz a justificao do pargrafo.

Adiciona uma margem de cerca de um centmetro

AtributosSize = define a altura da linha. Exemplo: Width = define a largura da linha horizontal.Exemplo: ou

Noshade = desenha a linha sem a sombra para dar oefeito de trsdimenses. Exemplo:

Exerccio 4 FORMATAO DE ESTILOS

Muito bem caro estudante, perceba que a cada exemplo sua pgina vai melhorandoainda mais sua aparncia. Neste exemplo trabalharemos com a formatao das letras

bem como cor, tamanho de fonte, estilo, e etc..Bem, preparado?


12/31

Vamos l novamente para mais um estudo!Para entender isto, digite a listagem 1.5, e salve como exemplo4.html,

Listagem 1.5

Formatando EstilosMudando o Estilo dos Caracteres

Texto em Negrito
Texto em Itlico
Texto sublinhado
TextoMonoespaado

Texto em Vermelho
Texto em Tamanho 5

Texto com a letraVerdana
Voc pode fazercombinaes
Editorarica
Voc poder os atributos para cada tipo deletra!
Editora rica
Estamos progredindono curso de HTML.Este tag permite que todos os espaosfeitos no cdigo fontesejam respeitados. Certo?

F

im da Listagem 1.5Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo4.html. Veja a figura 1.5


13/31


14/31

Voc percebeu que as cores a fonte obedecem o idioma ingls, no entanto, as cores dafonte podem ser adicionados atravs do nome ou de seus respectivos cdigos. Ento

para voc ficar mais feliz, relacionei aqui algumas cores para colorir e diversificar suahome page. Veja a figura 1.6

Exerccio 5 LISTASNUMERADAS E MARCADAS

E l vamos ns para um mais exerccio. Desta vez trabalharemos com listas numeradase marcadores. Assim como em uma carta ou qualquer outro documento 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

ListasIsto uma listaItem 1Item 2Item 3Item 1


15/31

Item 2Item 3

Fim da Listagem 1.6

Para ver o resultado deste exemploabra o Internet Explorer, e na barrade endereo digite C:\Meusdocumentos\exemplo5.html. Veja afigura 1.7


TAG O QUE FAZ

Marca o incio e o fim de uma lista ordenada. Recebem na

primeira linha


16/31

um nmero ou letra. Devem ser usados com tag

AtributosStart = especifica o nmero a partir do qual os itenscomeam a sercontados. Ex:

Type = modifica o tipo do numerador que pode ser: nmero,letras oualgarismo romano.Ex:

Marca o incio e o fim de uma lista no ordenada, ou seja, ositens da listarecebem smbolos na primeira linha. Devem ser usados comtagAtributosType = 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

Listas

Isto uma listagem iniciando no nmero 4Item 1Item 2Item 3Isto uma listagem com letrasEditoraricaLivros

Isto uma listagem em algarismo romanoEditoraricaLivrosEsta uma listagem em algarismo romano a partirdo nmero 3


17/31

EditoraricaLivros

Fim da Listagem 1.7

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo6.html. Veja a figura 1.8

Vamos terminar esta lio com mais um exemplo? Desta vez, faremos uma listagemcom subnveis.Para entender isto, digite a listagem 1.8, e salve como exemplo7.html

Listagem 1.8

ListasListagem e SubListagemItem 1


18/31

Item 1.1Item 1.2Item 1.3 Item 2

Item 2.1Item 2.1.1Item 2.1.2Item 2.1.3Item 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 de endereodigite C:\Meus documentos\exempl7.html. Veja a figura 1.9


19/31

DEFININDO O CORPO DA PGINA

Voc teve Ter observado em algumas sites, que as cores de fundo da pgina so bemdiversificados, ou em outros casos, uma imagem adicionado no fundo da pgina,como uma marca dgua. Ento, todas estas definies so feitas dentro dotag.

Vamos praticar? Para entender isto, digite a listagem 1.9, e salve como exemplo8.html,

Listagem 1.9

Pgina com Fundo ColoridoDefinfo cor de fundo para a pgina

Fim da Listagem 1.9

Para ver o resultado deste exemploabra o Internet Explorer, e na barrade endereo digite C:\Meusdocumentos\exemplo8.html. Oresultado, ser uma pgina como

fundo de cor bege e o texto na corazul. Certo?. Veja figura 1.10


20/31

Observao: Voc poder adicionar a cor que desejar, tanto para o fundo quanto para otexto. Os dois s no podem ser da mesma cor!(risos). Para escolher a cor, consulte naTabelade Cores (figura 1.6)

Como comentei linhas acima, voc tambm pode colocar um imagem no fundo dapgina. Mas, antes de fazer o exerccio, observe as seguintes recomendaes:

y As imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagensaconselho, consultar um livro de PhotoShop 5.0 ou outra verso.

y As imagens devem estar na mesma pasta, onde estar o documento HTML, ounuma subpasta.

Exemplo: Imagine que voc tem uma pasta chamada projeto e nessa pasta vocarmazena todos os documentos HTML referente a pgina que por horadesenvolve. Certo at a? Ento, basta que os arquivos de imagens, tambmfiquem na mesma pasta projeto, assim no ter problema na hora de visualizarno Browser.

y Outro exemplo que posso citar o seguinte. Imagine agora outra situao: Vocagora resolveu organizar ainda mais o desenvolvimento de sua pgina. Criouuma pasta projeto e dentro armazenou todos os arquivosHTML. Certo? Depoisresolveu criar uma subpasta dentro da pasta projeto chamada imagens. Muito

bem garoto! Excelente atitude e nela voc colocou todas as imagens. Ento, tudoest correto, mas no esquea de na hora de especificar a imagem que desejainserir no fundo dentro do tag, o caminho, ou seja, o nome da

subpasta. Entendeu? No se preocupe voc far exemplo para as duas situaes,eu prometo!

Muito bem, caro web designer, entendido tudo isso, vamos praticar.Para entender isto, digite a listagem 1.10, e salve como exemplo9.html,

Listagem 1.10


21/31

Inserindo Imagem no Fundo da PginaEditora rica

LivrosDicasVolte Sempre

Fim da Listagem 1.10Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo9.html. Veja figura 1.11

Observao: Caso a imagem estivesse em uma subpasta bastaria apontar o caminho para

ela no tag.Veja o exemplo:Exemplo:

Onde:

imagens= o nome da subpastaparede.gif = o nome do arquivo.


22/31


TAG O QUE FAZ

Marca o incio e o fim do corpo da pginaAtributosBgcolor = define a cor do fundo da pginaText = define a cor do texto padro da pginaBackground = permite inserir uma imagem comofundo da pginaBgproperties = fixa a imagem no fundo da pginaquando a pgina rolada, criando um efeito de marca dgua.

Exerccio 7 IMAGENS

Muito bem, voc est evoluindo a cada exerccio. Neste exemplo exercitaremos os tagsque 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 elaestiver na mesma pasta, ou ento, voc dever apontar o caminho onde est, conforme oexemplo de nmero 6. Lembra?Outro fato que, voc poder escolher as imagens que desejar, basta substituir o nomeda imagem que est no exemplo pela a que voc escolheu. Tudo certinho agora? Vamosem frente!

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

Listagem 1.11

ImagensAgora 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

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo10.html. Veja figura 1.12


23/31

isso a, no se preocupe se voc no conseguiu enxergar todas as imagens, o maisimportante para mim que voc tenha entendido a aula. (risos!!!) Vamos para umexemplo? 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

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


24/31



CONCEITO DOS TAGS USADOSNO EXERCCIO ANTERIOR

TAG O QUE FAZ

Insere uma imagemAtributossrc indica o nome da imagem a ser carregado.align=middle centraliza o base do texto com o centro daimagemalign=left faz a imagem flutuar a esquerda enquanto otexto circundaimagem direita.align=top alinha o texto no topo

align=right faz a imagem flutuar a direita enquanto otexto circundaimagem esquerda.alt=n indica o texto para ser exibido quando onavegador no exibe aimagem. Sendo que n o ttulo que identifique aimagem.Exemplo:


25/31

Exerccio 8 TABELAS

Nesta etapa conheceremos os tags responsveis pela construo de tabelas. Na parte IIdeste estudo atravs do Front Page Express, utilizaremos a tabela como recurso para adefinio dos layouts de nossas pginas. Por hora, vamos aos principais tags. TudoBem?

Como sempre, digite a listagem 1.13, e salve como exemplo12.html

Listagem 1.13MontandoTabelasClula1Clula2

Clula3Frase 1Frase 2Frase 3

Listagem 1.13

Para ver o resultado deste exemploabra o Internet Explorer, e na barrade endereo digite C:\Meusdocumentos\exemplo12.html. Vejafigura 1.14


26/31

Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais uma

listagem?


Listagem 1.14

MontandoTabelas

Item 1Item 2Item 3Item 4Item 5Item 6




27/31

Alinhamentos

Os elementos dentro da tabela tambm podem ser alinhados da mesma que umpargrafo. Veja mais um exemplo atravs da listagem 1.15

Listagem 1.15

Montando TabelasNo CentroPara DireitaPara a EsquerdaEm baixoNo TopoCentro na Vertical




28/31


29/31


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

E assim meu caro leitor, conclumos mais uma etapa de nosso curso. Espero que te guiaesteja sendo realmente um farol em seu aprendizado.

Exerccio 9 LINKS

Como falei no incio, estamos produzindo pginas de hipertextos, ou seja, textos quepodem fazer ligaes com outros textos, ligando pginas entre si e a WEB. Ento, estepontos ns chamamos de links ou hyperlinks, ncoras de hipertexto, todos com a mesmafuno, de atravs de um nico clique sobre a frase ou imagem conduzir a algum lugarno site ou na WEB.

O Tag responsvel o , onde dentro deste, atravs de um atributo coloco areferncia, ou seja, A URL(UniformResourceLocator).Para criar um link usamos a seguinte sintaxe:

SINTAXE: Frase que aparece na pginaOnde: tag que marca o incio e o fim do link

href= 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? Vamosnessa!


Listagem 1.16


30/31

Estudando LinksExemplo de Links InternosSeo de Exemplos

Exemplo1Exemplo2Exemplo de Links ExternosConhea a Editorarica
Apple ComputerVoc pode usar imagens para usar noslinksImagens


31/31

Documents

Curso de Webdesign