View
225
Download
0
Category
Preview:
Citation preview
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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.
8/8/2019 Curso de Webdesign
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/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
9/31
CONCEITO DOS TAGS USADOSNESTE EXERCCIO
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
11/31
CONCEITO DOS TAGS USADOSNESTE EXERCCIO
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?
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
13/31
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
CONCEITO DOS TAGS USADOSNESTE EXERCCIO
TAG O QUE FAZ
Marca o incio e o fim de uma lista ordenada. Recebem na
primeira linha
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
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.
8/8/2019 Curso de Webdesign
22/31
CONCEITO DOS TAGS USADOSNESTE EXERCCIO
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
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
24/31
Fim da Listagem 1.12
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo11.html. Veja figura 1.13
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:
8/8/2019 Curso de Webdesign
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
8/8/2019 Curso de Webdesign
26/31
Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais uma
listagem?
Como sempre, digite a listagem 1.14, e salve como exemplo13.html
Listagem 1.14
MontandoTabelas
Item 1Item 2Item 3Item 4Item 5Item 6
Fim da Listagem 1.14
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo13.html. Veja figura 1.15
8/8/2019 Curso de Webdesign
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
Fim da Listagem 1.15
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereodigite C:\Meus documentos\exemplo14.html. Veja figura 1.16
8/8/2019 Curso de Webdesign
28/31
8/8/2019 Curso de Webdesign
29/31
CONCEITO DOS TAGS USADOSNESTE EXERCCIO
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!
Como sempre, digite a listagem 1.16, e salve como exemplo15.html
Listagem 1.16
8/8/2019 Curso de Webdesign
30/31
Estudando LinksExemplo de Links InternosSeo de Exemplos
Exemplo1Exemplo2Exemplo de Links ExternosConhea a
Editorarica
Apple ComputerVoc pode usar imagens para usar noslinksImagens
8/8/2019 Curso de Webdesign
31/31
Recommended