To de Websites

Desenvolvimento de Websites
file:///C|/curso_webpages/index.html
Autores: Francisca M. Baptistella Gian Franco B. Barcellini
1 of 1
06/09/00 11:34
file:///C|/curso_webpages/introducao.html
Desenvolvimento de Websites Introduo

Objetivo do Treinamento Qualificar o aluno no desenvolvimento de websites. Sero apresentados aspectos que facilitaro o seu desempenho no desenvolvimento de projetos de webstes. As aulas sero compostas de teoria e prtica. Ao final da teoria ser aplicado o desenvolvimento de um website. Os aplicativos utilizados sero Netscape Navigator e Composer, Paint Shop Pro 4.0 , WordPad. Instrutores Francisca M. Baptistella - fran@ccuec.unicamp.br Analista de Sistemas de Informao Especialista em Arquitetura de Informao e Aplicaes Internet Gian Franco B. Barcellini Analista de Suporte Especialista em Aplicaes Internet Produo do Centro de Computao da Unicamp
1 of 1
06/09/00 11:40
file:///C|/curso_webpages/conteudo_programatico.html
Desenvolvimento de Websites Contedo Programtico

Introduo Contedo programtico Parte I O Website I Perfis de Websites Design Digital - Dicas Arquitetura da informao Conceitos do ambiente Parte II A linguagem HTML Browsers Construindo Pginas com o Composer Contedo de uma pgina Applets Java e Java Scripts Frames Formulrios Mapas Validando Sites Hospedando sua Home Page Novas Tecnologias Catlogos e Links
1 of 1
06/09/00 13:09
file:///C|/curso_webpages/o_website.html
Desenvolvimento de Websites O Website - Como construir

I - Pesquisa e abstrao: elaborar o roteiro para a pesquisa, reunir todo material, agrupar os contedos por natureza da informao e organiz-los por relevncia. Pesquisar os websites de assuntos afins. Elaborar uma relao de tudo o que website deve conter. Agrupar os contedos e defina as ligao que os assuntos tm entre si. Abstrair - imagine como voc prepararia uma palestra sobre o assunto do website; qual o contedo programtico ? qual ordem da apresentao ? Distribuir os assuntos no ncleo, nas bordas e pense em como atualizar as informaes geradas dinmicamente. Pense no caminho para se encontrar a informao, na ordem natural da leitura. I I - Layout do front-page e pginas Internas: a partir da identidade visual do produto ou servio, trabalhar a aplicao da marca na interface do Website traando o primeiro esboo do layout. I I I - Arquitetura da Informao: refinamento do contedo organizado na pesquisa. Analisar interligao das pginas e aos aspectos da interatividade com o visitante. Design da informao: Consiste em "desenhar a informao", uma folha de papel em branco, um lpis e vrias idias na cabea, como escrever tudo isso? Processo intuitivo: agrupamos as informaes em pequenos "grupos de assuntos", classificamos e interligamos. Os "grupos de assuntos" do origem aos grupos de pginas, compondo-se a arquitetura da informao. Aps a identificao de todos os "grupos de assuntos" que o website ir abranger, sero agrupados em "reas" ( institucionais, servios, destaques, etc). Monte a Arquitetura da Informao, utilizando-se de papel picado com os nomes dos "grupos de assuntos" e "reas", arranje-os em um espao que corresponda a tela do computador. Monte o quebra cabea intuitivamente. Os elementos que no so da rea de interseco dos "grupos de assuntos" eleitos mas se ligam com elementos entre as "reas" (ex. as buscas), necessitam ser colocados na arquitetura.
3
1 of 2 06/09/00 13:07
file:///C|/curso_webpages/o_website.html
2 of 2
06/09/00 13:07
file:///C|/curso_webpages/o_website_1.html
Desenvolvimento de Websites O website - Como construir
I V - Arquitetura de Design: preparar as imagens e layouts das pginas. O design deve seguir a arquitetura de informao proposta inicialmente. O front-page do website deve causar IMPACTO e persuadir o visitante. O website no pode ser desenvolvido como uma revista ou um folheto (folder) em formato eletrnico. A internet um veculo de informao muito gil e dinmico. O visitante espera uma soluo digital surpreendente, diferente, que abra caminho para interatividade. importante que o wesite responda aos interesses dos seus visitantes. V- Contedo: a informao agrupada em pequenos textos, que podem ser lidos em qualquer ordem, importante classific-los e interlig-los, para facilitar o acesso informao. Atualizar contedo - o lanamento do website um passo importante, mas lembrar sempre que o sucesso dele se d com a atualizao constante do seu contedo. Manter o foco nos assuntos contidos na arquitetura de informao. Cumprir o seu objetivo. Responder e-mail recebidos na conta webmaster de forma esclarecedora. VI- Desenvolvimento: criao dos processos de produo de contedo e aplicativos. VII - Hospedagem: Criao do ambiente de produo ou pequisa de infra-estrutura do provedor de acesso para armazenagem e atualizao.
1 of 1
06/09/00 13:07
file:///C|/curso_webpages/perfis_de_websites.html
Desenvolvimento de Websites Perfis de websites
Alguns perfis de websites para que possa reconhec-los em sua pesquisa pela Internet. No h um nico modelo para construo dos websites, eles podem variar de acordo com a natureza e propsito do projeto. H websites que so verdadeiras "colchas de retalhos", complicados e de navegao confusa, que o visitante se perde antes de conseguir a informao desejada. Institucionais - normalmente seu escopo compe-se do seu histrico, sua repercusso no mercado, seu potencial de gerar negcios e informaes, ou seja, seu contedo possui maior teor institucional do que produtos ou servios. Produtos - vendem seus produtos apresentando suas caractersticas e benefcios. So dirigidos aos consumidor. Seu maior propsito persuadir o consumidor. Servios - vendem servios de consultoria, treinamento, etc. Seu contedo normalmente rico em informao para esclarecer o domnio e conhecimento dos servios. Promocionais - chamados de "hot sites", so breves normalmente com uma pgina apenas. Comunicam um evento, uma promoo. Comunidades Virtuais - Normalmente surgem sobre um tema em pauta, criado e mantido pela prpria dinmica de seus visitantes.
1 of 1
06/09/00 13:08
file:///C|/curso_webpages/design_digital.html
Desenvolvimento de Websites Design Digital
Dicas importantes para fazer o design digital Tamanho da tela: os monitores de computadores so de tamanhos variados. Critrio na definio do formato do website (para 640x480 ou 800x600 ou 1024x768). cones: utilize cones no website se for agregar valor ao contedo ou tornar a interface mais agradvel e clara. Plug-ins: evite o uso de plug-ins ou use-o com critrio, seno pode ser um motivo a mais para o visitante ir embora, no esquea que ele quem paga a conta e, portanto, no estar disposto a esperar por um longo tempo de carregamento. Fontes: fontes inadequadas para leitura, letras capitulares no inicio do pargrafo, fundos rebuscados (ou escuros) e ttulos coloridos deixam o carregamento da pgina lento e prejudicam leitura. Peso da imagem: a soma das imagens em um front-page no deve ultrapassar 20K. Texto: cuidado com o tamanho do texto. Seja objetivo e sucinto sem comprometer a informao. Cores: explore as 216 cores seguras para o sistema web (do total de 256 cores da palheta utilizada por uma imagem GIF subtrai-se 40 cores que so diferentes entre computadores Mac e PC). Mximas da Bauhaus: "menos mais" e "a forma deve seguir a funo".
1 of 1
06/09/00 13:09
file:///C|/curso_webpages/arquitetura_da _informacao.html
Desenvolvimento de Websites Arquitetura da Informao
Cuide para que a internet no se torne lenta e confusa Planejar o website fundamental para no criar verdadeiros "becos sem sada", onde o acesso entre uma seo e outra a volta para a pgina principal, estruturas que foram o visitante a passar por vrias pginas at chegar ao ponto desejado. Estruturar as informaes organizando-as por relevncia e pontos em comum. Elas ficam em reas que so como sees de uma revista. Mudar de assunto dever ser to fcil quanto virar uma pgina. A pgina principal como o ndice de um livro ou a recepo de uma empresa: s uma orientao para seguir ao destino. Imagine voc estar em um determinado departamento da empresa e ter quer voltar na recepo para perguntar onde fica o banheiro mais prximo ou ter que passar pela recepo toda vez que vai mudar de departamento. Em todas as pginas do site deve-se ter uma noo clara de onde voc est e para onde pode ir (navegao visvel). Os websites na internet devem ser lineares como uma revista ou hierrquico como uma enciclopdia. No ! A comunicao digital deve ser como a conversa com um especialista assim que o assunto vai se aprofundando, vo surgindo novas opinies. Organizar a informao, desenhar a estrutura do sistema e definir os caminhos para navegar por ela. O mapa do website est pronto. No tente mostrar ao visitante tempo todo onde ele est. Isso to chato e intil quanto uma transmisso de futebol pela TV que mostre o placar durante todo o jogo. A Arquitetura do design fundamental quando seguida da Arquitetura da informao constituda de contedo claro e objetivo. Muitos designers ignoram essa parte do processo e se concentram apenas na elaborao de uma interface visualmente agradvel, deixando para um segundo plano a arquitetura de informao.
1 of 1
06/09/00 13:10
file:///C|/curso_webpages/conceitos_do_ambiente.html
Desenvolvimento de Websites Conceitos do Ambiente

Cyberspace Uma comunicao via telefone entre duas pessoas no as transportam de um lugar para outro, mas cria um espao intermedirio inexistente, criado por meios tecnolgicos e chamado de ciberespao, vlido para qualquer tipo de comunicao remota, como o telefone, chat, rdio etc. Ao desligar o aparelho, esse espao deixa de existir. A tarefa dos arquitetos de informao e webdesigners fazer com que esse espao seja aconchegante e interessante. Comunicao no-linear No existe comunicao no-linear. Muitas mensagens e possibilidades de conexo geram uma comunicao que permite vrios caminhos, mas nunca dois ao mesmo tempo, pois quando a gente v um texto fora de seqncia, imediatamente voc sente a incomodao e corrige-o em seqncia. A "comunicao no-linear" uma forma de expresso que permite vrias seqncias, todas lineares, ou uma comunicao multidimensional, organizada em camadas, como pginas de texto impressas em papel transparente. Esse tipo de comunicao pode ser atordoante. O excesso de desvios em um texto pode fazer com que a mensagem se perca pelo caminho. Por isso fundamental saber qual o sentido da comunicao antes de montar sua estrutura. Textualidade digital No d para "folhear" um website. Um texto digital no tem uma seqncia, nem pginas numeradas que impem uma rota de navegao. No website, cada um l o que interessa, na ordem que desejar. Podem existir vrias leituras. Em papel isso impossvel. Aqui o texto ter que ser bem elaborado para atingir o objetivo do leitor, pois no est organizado em captulos.
1 of 1
06/09/00 13:11
file:///C|/curso_webpages/conceitos_do_ambiente_2.html

Hipertexto, Hipermdia e Hiperespao Hipertexto e hipermdia - Hipertexto texto sublinhado. Hipertexto com recursos multimdia chamado de hipermdia. Um hipertexto contm um conjunto de textos interligados e recursivos, ele no comea em lugar algum nem tem final e apresenta vrias seqncias de leitura. Funciona com um bom papo que um assunto leva a outro ou como uma boa aula que cresce de acordo com o interesse do aluno.Um documento digital em hipertexto pode ter pginas de qualquer tamanho (aconselha-se pginas no maiores que um formato A4 evitando-se uma leitura cansativa e chata). Um sistema de hipertexto d ao leitor a informao que quiser, na quantidade que quiser. A maior parte dos roteiros so lineares, quadrados, caretas, sem horizontes. Hiperespao - Estar em dois lugares no espao ao mesmo tempo. Sair daqui e ir para o Japo acionando um boto. Passear por lugares que no existem. s usar a internet. Vamos explorar mais. Linguagem internet ( linguagem digital ) Visitada atravs de um monitor, internet no revista, no rdio, no TV. Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clips em vdeo. Experimente mostrar um artigo de revista e suas fotos pela TV. Ou usar o rdio para transmitir um filme. Ou transcrever a narrativa de um jogo de futebol em uma revista. Ou fazer o layout de uma mensagem de secretria eletrnica. Portanto, muito critrio em usar uma a internet como algo que ela no . A Internet um veculo de comunicao, com caractersticas prprias. Voc pode ver a rede a qualquer hora de onde desejar. Imprimir um texto, pegar uma imagem, mudar de assunto se desejar, enviar e-mail, pesquisar um tema, se encontrar nos chats, grupos de discusso, mailing list enfim d pr fazer de tudo na Internet. A rede tem uma linguagem prpria, mas poucos esto interessados nela. A maioria das pessoas que desenha interfaces adapta idias do design grfico, da TV ou da propaganda. Jargo "Somos uma empresa de webvertising, focada em new media e solues customizadas para atingir o seu target e aumentar o seu share, sem estourar seu budget. No se esquea de nos incluir no marketing mix". Ateno! Use o bom e velho portugus para explicar o que voc faz, a sim voc vai impressionar. A idia da "Home Page" vem de um dos primeiros sistemas de Hipertexto, o Hypercard, da Apple. Era uma espcie de fichrio digital em que o usurio
1 of 2
06/09/00 13:12
podia ver os registros em seqncia (o prximo e o anterior) ou voltar para a primeira ficha, chamada de Home. A idia era que, se voc estivesse perdido, poderia voltar para casa.
2 of 2
06/09/00 13:12

Audincia do Website Existem muitas formas de medir a audincia de um site e muitas formas de tapear essa medio. Muitos endereos digitais se vangloriam da quantidade de hits que eles conseguem por ms. Alguns se baseiam nesse nmero para fazer tabelas com custos de mdia. No acredite nisso. HITS - cada hit um objeto transferido para o computador do espectador. Uma pgina com texto e dez imagens fornecer onze hits. Cem mil hits no significam cem mil pessoas visitando. PAGE VIEWS - quantidade de documentos ("pginas") acessados. Cem mil page views no significam cem mil pessoas visitando. O fato de uma pgina ter sido enviada para o computador do usurio no significa que ela foi vista. Existem relatrios de acessos que indicam no s o nmero de visitantes, mas quais pginas foram mais visitadas, em que hora do dia, e de que servidor elas vieram. Propaganda na Internet Colocar a ficha tcnica de um Audi em pginas da Veja um desperdcio de dinheiro, pois o pblico limitado etc. A internet um veculo de informao onde as pessoas no ligam seus computadores e se conectam, gastando um dinheiro, para ver s umas imagens bonitinhas. importante fornecer contedo. Rede de pessoas A internet uma rede mundial de pessoas, conectadas dos mais diversos pontos do mundo, pelos mais remotos motivos. Hoje elas usam computadores, daqui a algum tempo vo estar usando outro veculo, no importa. Planejar a presena internet como uma ao de comunicao, no de informtica. Da mesma forma que as revistas e programas de TV, que usam vrios recursos de computao grfica mas no so consideradas produtos de informtica. Contedo Por mais interessante que possa ser um bom design, ele apenas a embalagem de um produto digital, o pblico pode at achar agradvel, mas no est interessado nela, e sim em seu contedo.
1 of 2
06/09/00 13:13
A interatividade e os recursos grficos de um endereo digital so apenas chamarizes. O que interessa, cativa e mantm um visitante conectado a possibilidade de participao. a porta de entrada para um relacionamento ntimo e pessoal entre uma empresa e seus consumidores. Empatia Analise os sites que voc conhece, que reao eles provocam no visitante? Muitos so lerdos, feios, lineares e montonos. E com pouco contedo relevante. No preciso nem dizer que o visitante que caia num desses provavelmente vai embora, mesmo que esteja interessado no assunto. Da mesma forma que ns fugimos dos chatos que se orgulham do carro, contam histrias dos filhos ou das viagens que fizeram a Cancn. Mas se o contedo e a forma do site forem bacanas, incentivarem a participao e a interferncia do visitante, eles geraro uma empatia, ou seja, uma identificao completa com o pblico, que visita, volta e conta para os amigos. Interface Ns falamos portugus, o computador fala HTML. Pra servir de intrprete, os layouts tm um nome bacana interfaces, funcionam como uma "face intermediria" entre o computador e voc. Por isso no adianta fazer s uma carinha bonitinha, cheia de cones e desenhinhos ou fotos legais. preciso estimular o visitante a reagir, participar, opinar, brincar com o site. As interfaces existem para que as pessoas esqueam que esto usando computadores. Por isso elas precisam ser naturais, divertidas e interativas.
10
2 of 2
06/09/00 13:13
Confeccao de Paginas
file:///C|/curso_webpages/linguagem_introducao.html
Desenvolvimento de Websites A Linguagem HTML
HTML (Hypertext Markup Language) - a linguagem na qual escrevemos as pginas do website para disponibiliz-las no WWW da Internet. Compe-se de diretivas que so interpretadas pelos browsers. Ao interpretar as diferentes diretivas temos a apresentao de uma pgina seguindo a formatao de texto, cores e imagens definida pelo autor. Pgina - um hipertexto no World Wide Web que associa diferentes tipos de mdia como textos, imagens, udio evdeo, conectados por hiperlinks. Pode ser nica ou estar ligada a outras pginas formando um sistema de informaes ou um Website. "Home Page" ou Pgina principal - A pgina de entrada ou pgina inicial. Tim Beners-Lee - um dos criadores do World Wide Web, a linguagem foi definida para ser usada por processadores de texto e os autores de pginas no deveriam conhecer as diretivas produzidas pelo processo de criao. Editores grficos - O uso dos editores permitem que o autor crie uma pgina sem conhecer os cdigos da linguagem HTML. Alm de Editores existem tambm programas Assistentes que transformam documentos gerados em MS Word, Power Point e Excel em pginas HTML..
11
1 of 1
06/09/00 11:41
Oficina HTML - Estrutura de uma pgina HTML
file:///C|/curso_webpages/linguagem_estrutura_pagina.html
Desenvolvimento de Websites A Linguagem HTML Estrutura da pgina

<HTML> e </HTML> - So tags que dizem que o documento do tipo html, ou seja uma pgina web. Estrutura do documento HTML cabealho <HEAD> e </HEAD> - aqui especifica-se o ttulo da pgina <TITLE> e </TITLE>, ser apresentado na barra superior do browser. Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o incio do documento. Propriedades aplicadas a tag body, se no forem aplicadas assumem um valor default bgcolor - cor de fundo para a pgina background - imagem nos formatos .jpg ou .gif usada de fundo da pgina text - define uma cor para o texto link - define uma cor para os links vlink - define cor para os link j visitados alink - define a cor para o link na hora que for ativado Exemplo 1 <BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Exemplo 2 <BODY BACKGROUND=nome_imagem BGCOLOR=#cdigo_cor TEXT=#cdigo_cor LINK=#cdigo_cor VLINK=#cdigo_cor ALINK=#cdigo_cor> Links: texturas de BACKGROUND / Um teste de CORES / Javascript que faz teste de cores.
12
1 of 1
06/09/00 11:42
file:///C|/curso_webpages/linguagem_formatacao_texto.html

Formatao do Texto O texto pode ser formatado com as tags de tamanho, itlico, negrito e fonte monoespaada, sobrescrito, subscrito e piscante. Para todas elas necessrio delimitar o incio e o fim do texto a ser formatado. Cor e fonte : <font color = nome_cor> Texto </font> <font face = tipo_letra > Texto </font> , <font size =+n>Texto </font> , onde n seria o incremento ao tamanho original Tipos de fonte definidas pela linguagem HTML :
Cabealhos :
<H1> Tamanho H1</H1> <H2> Tamanho H2</H2> <H3> Tamanho H3</H3> <H4> Tamanho H4</H4> <H5> Tamanho H5</H5> <H6> Tamanho H6</H6>
h1,
h2, h3,
h4, h5,
h6
Outros estilos :
<B> Texto em Negrito ( Bold ) </B> -- Texto em Negrito ( Bold ) <I> Texto em Itlico </I> -- Texto em Itlico <TT> Texto com fonte monoespaada </TT> -- Texto com fonte
monoespaada
<U> Texto sublinhado </u> -- Texto sublinhado <SUP> Texto sobrescrito </SUP> -- Texto sobrecrito <SUB> Texto subscrito </SUB> -- Texto subscrito <BLINK> Texto piscando </BLINK> -- Texto piscando
1 of 2
06/09/00 11:42
file:///C|/curso_webpages/linguagem_formatacao_texto.html
13
2 of 2
06/09/00 11:42
Oficina HTML - Acentuao e Caracteres Especiais
file:///C|/curso_webpages/linguagem_acentuacao.html

Acentuao e Caracteres Especiais A codificao permite a qualquer equipamento interpretar os cdigos e exibir na tela o caracter desejado. cdigos funcionam: Primeiro o caracter "&" Seguido da letra que dever ser acentuada, pode ser minscula ou maiscula Veja a tabela abaixo coloque o cdigo do acento desejado Acrescente o caracter " ; " ( ponto de vrgula ) Exemplos : dirio = diário natao = natação seqncia = seqüência Acentos Agudo &_acute; Grave &_grave; Circunflexo &_circ Til &_tilde; Trema &_uml; Cedilha &_cedil;
Caracteres Especiais & & < < > > (c) &copy
14
1 of 1
06/09/00 11:42
Oficina HTML - Disposio do Texto na Tela
file:///C|/curso_webpages/linguagem_disposicao_texto.html

Disposio do Texto na Pgina Diretivas para uma formatao bsica do um texto em uma pgina. <CENTER> : centraliza o texto em relao pgina <BR> : quebra de linha, iniciando o texto seguinte na linha logo abaixo <P> : fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar outro pargrafo <HR> : rgua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos width = _% comprimento. Ex. width=50% size = _ espessura do trao. Ex. size=6 <PRE> : respeita a formatao original do texto inserido na pgina
15
1 of 1
06/09/00 11:43
Oficina HTML - Definio de Listas
file:///C|/curso_webpages/linguagem_definicao_listas.html

Definio de Listas Listas so utilizadas para organizar seu texto em uma relao de itens e subitens, ordenados ou no. Tipos de listas : Listas Ordenadas, Listas No-Ordenadas e Listas de Definio. Listas Ordenadas <ol> - inicia uma lista type - define o tipo de numerao da lista A - Letras maisculas a - Letras minsculas I - Algarismos romanos 1 - Nmeros arbicos </ol> - finaliza a lista <li> - determina um item da lista Exemplo : <ol> <li>Primeiro <li>Segundo <li>Terceiro </ol> 1- Primeiro 2- Segundo 3- Terceiro
Cdigo html
No browser Listas No-Ordenadas <ul> - marca o incio da lista
type - define o tipo de marcador de cada item da lista
disk - pequeno disco slido square - quadrado preenchido circle - crculo cheio
</ul>- marca o final da lista <li> - determina um item da lista Exemplo :
1 of 2
06/09/00 11:44
Oficina HTML - Definio de Listas
file:///C|/curso_webpages/linguagem_definicao_listas.html
Cdigo html
<ul> <li>Primeira <ul> <li>Turma <li>Filha </ul> <li>Segunda <li>Terceira </ul>> Primeira Turma Filha Segunda Terceira
No browser
Listas de Definio <dl> marca o incio da lista <dt>indica termo a ser definido <dd>indica a definio do termo acima Exemplo: Unicamp <dl> <dt>CCUEC <dd>Centro de Computao <dt>HC <dd>Hospital das Clnicas </dl> Unicamp CCUEC Centro de Computao HC Hospital das Clnicas
Cdigo html
No browser
16
2 of 2
06/09/00 11:44
Oficina HTML - Imagens
file:///C|/curso_webpages/linguagem_imagens.html

Imagens Formatos : GIF JPG Desenvolvido pela CompuServe com Padro foi proposto pelo COMIT inteno de diminuir o tamanho do ISO, usado para imagens mais arquivo para trfego na rede. complexas como fotografias com recomendado para cones ou variao e mais de 256 cores. imagens com menos de 256 cores, Permite alta taxa de compresso, cores lisas, puras, preto e branco. gera um arquivo menor, s vezes Comparada com o formato jpg em 1/5 do tamanho original, s que tamanho maior, porm em isso implica perda de informao qualidade superior. Uma imagem e qualidade. .gif pode ser transparentizada. A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usados com alguns parmetros como: border para determinar a moldura da imagem Imagem com borda <IMG border=6 SRC=figura.gif>
width para determinar a largura da imagem height para determinar a altura da imagem Imagem com limitao de Altura e Comprimento <IMG width=50 height=90 SRC=figura.gif>
17
1 of 1
06/09/00 11:44
file:///C|/curso_webpages/linguagem_imagens_2.html

Imagens Alinhar um texto em relao a uma imagem. Parmentros de alinhamento : align=left para alinhar a imagem a esquerda do texto. Imagem com texto alinhado a esquerda <IMG align=left SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura. align=right para alinhar a imagem a direita do texto Imagem com texto alinhado a direita <IMG align=right SRC=figura.gif> Texto que acompanha a figura Texto que acompanha a figura.
align=top para alinhar o texto com o topo da imagem. Imagem com texto alinhado ao topo da imagem <IMG align=top SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura.
align=middle para alinhar o texto com o meio da imagem. Imagem com texto alinhado a meia altura da imagem <IMG align=middle SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura.
align=bottom para alinhar o texto com a parte inferior da imagem. Imagem com texto alinhado ao p da imagem <IMG align=bottom SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura. Onde encontrar cones ? Visite o IconBAAZAR (www.iconbazaar.com).
18
1 of 1
06/09/00 11:45

Imagens Alinhar um texto em relao a uma imagem. Parmentros de alinhamento : align=left para alinhar a imagem a esquerda do texto. Imagem com texto alinhado a esquerda <IMG align=left SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura. align=right para alinhar a imagem a direita do texto Imagem com texto alinhado a direita <IMG align=right SRC=figura.gif> Texto que acompanha a figura Texto que acompanha a figura.
align=top para alinhar o texto com o topo da imagem. Imagem com texto alinhado ao topo da imagem <IMG align=top SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura.
align=middle para alinhar o texto com o meio da imagem. Imagem com texto alinhado a meia altura da imagem <IMG align=middle SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura.
align=bottom para alinhar o texto com a parte inferior da imagem. Imagem com texto alinhado ao p da imagem <IMG align=bottom SRC=figura.gif> Texto que acompanha a figura. Texto que acompanha a figura. Onde encontrar cones ? Visite o IconBAAZAR (www.iconbazaar.com).
18
1 of 2 06/09/00 12:25
2 of 2
06/09/00 12:25
Oficina HTML - Tabelas
file:///C|/curso_webpages/linguagem_tabelas.html

Tabelas Organiza o contedo de uma pgina. As tag <TABLE> </TABLE> identifica a tabela, especificar a espessura da borda com o parmetro BORDER. <th>... </th> define o cabealho de cada coluna <tr> ... </tr> delimita a linha <td> ... </td> delimita cada elemento da tabela, cada clula.
Atributos que podem ser usados na tabelas : colspan : especfica quantas colunas da tabela a clula ocupar rowspan : especfica quantas linhas da tabela a clula ocupar width : define a largura exata da clula align : alinhamento horizontal ( right, center, left ) valign : alinhamento vertical ( top, middle, bottom )
Exemplo 1: <table border=4> <th>Coluna 1</th><th>Coluna 2</th> <tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> </table> Resultado na tela : Coluna 1 Coluna 2
linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Exemplo 2 : <table border=4>
1 of 2
06/09/00 11:47
Oficina HTML - Tabelas
file:///C|/curso_webpages/linguagem_tabelas.html
<th colspan=2>Colunas 1 e 2</th> <tr> <td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> <th rowspan=3>3 linhas</th> <td>uma linha</td> <tr><td>duas linhas</td></tr> <tr><td>tres linhas</td></tr> </table> Resultado na tela : Colunas 1 e 2 linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas trs linhas
19
2 of 2
06/09/00 11:47
Oficina HTML - Links com Outros Documentos
file:///C|/curso_webpages/linguagem_links.html

Links com Outros Documentos Fazer links para outros documentos ( pginas, imagens, sons, etc ), atravs da tag <A> </A>, chamadas de ncoras. Informar o HREF (endereo de onde est a pgina que ser acessada ) e o TEXTO/IMAGEM que indicar o link. Por exemplo : < A HREF=http://endereo/documento> texto/imagem </A> Referncia a outro documento pode ser feita por : Caminho Absoluto : corresponde ao endereo completo do documento, utilizado quando os documentos esto em servidores diferentes. Ex: < A HREF=http://mquina/diretrio/pagina.html > Caminho Relativo : quando o documento a ser acessado est no mesmo servidor que a pgina atual. Ex: < A HREF=outra-pgina.html > Ligao com trechos da mesma pgina : desvia para o local do trecho desejado na mesma pgina. Ex: < A HREF=#parte-1> Obs: Antes do trecho desejado dever existir um "target", uma marca indicando a localizao. <A NAME=parte-1> Links para outros Servios Internet Telnet Ftp <A HREF=telnet://ccuec.unicamp.br> telnet para mquina turing.unicamp.br </A> Telnet para mquina turing.unicamp.br <A HREF=ftp://ftp.unicamp.br> Ftp para mquina ftp.unicamp.br </A> Ftp para mquina ftp.unicamp.br <A HREF="mailto:cursos@ccuec.unicamp.br" > mails para a conta cursos Mail Mails para a conta cursos ( Veja outros parmetros possveis ) <A HREF=news:news.unicamp.br > Acesso Usenet </A> Acesso Usenet
News
1 of 2
06/09/00 11:48
Oficina HTML - Links com Outros Documentos
file:///C|/curso_webpages/linguagem_links.html
20
2 of 2
06/09/00 11:48
Confeccao de Paginas
file:///C|/curso_webpages/4.html
Browsers
O acesso ao WWW possvel atravs dos "browsers", ou navegadores, programas que tm por finalidade :
transferir informaes ( textos, imagens, som, vdeo ) entre o servidor e o cliente. codificar as diretivas e apresentar no monitor. iniciar a execuo de arquivos de som e vdeo, caso existam, e se a instalao dispor dos programas necessrios. Possuem muitos recursos e funes que devem estar devidamente configuradas para permitir uma perfeita navegao.
Browsers mais utilizados: Netscape Internet Explorer
21
1 of 1
06/09/00 11:48
Oficina HTML - Composer
Desenvolvimento de Websites Construindo pginas

Para a criao de nossas pginas estaremos neste treinamento utlizando o Editor Netscape Composer 4.04 . Este editor, embora apresente algumas limitaes e restries, permite a criao e manuteno de pginas sem que seja necessrio profundos conhecimentos da linguagem HTML.
Mostraremos apenas as funes dos botes e alguns menus, por serem estes os mais importantes. Ressaltando que todas as opes disponveis nos botes aparecem nos menus tambm. Arquivo, Editar, Publish, Visualizar no Browser Impresso, Busca de palavras, Corretor Ortogrfico e HTML Fontes ( tipo, tamanho, formatao , cor ) Disposio do Texto em Listas, Centralizao e Pargrafos Menu View
22
1 of 1
06/09/00 11:52
file:///C|/curso_webpages/composer2.html
Desenvolvimento de Websites Netscape Composer

Arquivo, Editar, Publish, Visualizar no Browser
Arquivo Iniciar : comea uma nova pgina em branco, pronta para ser editada Abrir : abre um arquivo .html j existente, podendo ser alterado Salvar : salva o arquivo no diretrio escolhido com o nome que for especificado e com extenso .html Editar Assim como em qualquer aplicativo para Windows, esses botes funcionam da mesma maneira. Sempre trabalhando com a rea de Transferncia. Cut ( cortar ) : cortar texto selecionado Copy ( copiar ) : copiar texto selecionado Paste ( colar ) : colar Publish Essa uma ferramenta que possibilita alteraes em pginas HTML diretamente no servidor WWW. Desde que a pessoa tenha permisso para tal ao. Isso faz parte da configurao do seu servidor. Clicando em publish, voc precisa apenas informar em qual diretrio a pgina dever ser salva e sua senha. Visualizar no Browser Aqui podemos visualizar no browser Netscape e ter uma idia de como ficaria na tela a pgina construda ou alterada.
22.1
1 of 1
06/09/00 11:53
Desenvolvimento de Webpages Netscape Composer

Impresso, Busca de Palavras, Corretor Ortogrfico e Tags HTML
Impresso Podemos imprimir a pgina se desejarmos, inclusive as opes so as mesmas de um outro software para Windows, precisamos indicar a impressora, podemos tirar mais de uma cpia ou escolher quais pginas devero ser impressas. Busca de Palavras H a possibilidade de localizarmos palavras dentro da pgina sem precisar olhar o arquivo inteiro linha por linha, temos a chamada busca rpida, onde voc informa a palavra a ser procurada e lhe ser mostrado o resultado, mesmo que forem encontradas mais de uma vez. Corretor Ortogrfico Para corrigir erros de ortografia basta acionar o Corretor Ortogrfico e ele indicar os erros e juntamente sugestes do que poderia ser colocado. Tags HTML Link : ligao para outra pgina ou para partes do mesmp arquivo. Target : atribui nomes pelo qual poderemos referenciar futuramente. Imagem : insere uma imagem no local onde estiver o cursor Rgua : constri uma rgua horizontal, onde podemos definir a espessura e comprimento Tabela : cria tabelas, na qual podemos mudar borda, linhas e colunas ...
22.2
1 of 1
06/09/00 11:55

Fontes ( tipo, tamanho, formatao, cor ) Para todo texto digitado podemos usar esses formatos, que servem para destacar algum trecho, ttulo, ou mesmo melhorar a organizao do contedo da pgina. Paragraph Styles As opes disponveis nesse item, so para tipos de cabealhos, pargrafos e inclui tambm lista. O mais importante desses estilos, Heading 1-6 pois destaca o texto como se fosse um ttulo, variando o tamanho, sendo 1 o maior e 6 o menor. Os demais fazem praticamente os mesmo efeitos j apresentados.
Font Podemos escolher uma fonte diferente, para isso basta t-las instaladas no microcomputador, porm para que todos que acessem sua pgina vejam preciso que tenham as fontes em seus micros tambem.
22.3
1 of 1
06/09/00 11:56

Fontes ( tipo, tamanho, formatao, cor )
Size Permite mudar o tamanho da fonte ( letras ) utilizada. Basta marcar o texto a ser mudado e escolher um nmero. Ou ento definir antes de iniciar a digitao.
Formatao Podemos deixar uma palavra, texto ou pargrafo em negrito, itlico, sublinhado ou normal, sem nenhum desses efeitos. Basta selecionar e clicar no boto desejado.
Color Ao mesmo tempo que podemos mudar o tamanho da fonte, tambm mudamos a cor. A paleta de cores varia de acordo com a configurao do seu computador
22.4
1 of 1
06/09/00 11:57

Listas, Centralizao e Pargrafos Podemos disponibilizar o contedo da pgina de vrias formas, atravs de listas, centralizao de textos ou pargrafos, conforme a sua necessidade. LISTAS Utilizamos as listas ordenada ou numerada para disponibilizar os dados de maneira organizada. Por exemplo : Carros Fiat Ford Chevrolet Volkswagen CENTRALIZAO Para centralizar o texto em relao pgina basta selecionar as linhas que sofrero o efeito e clicar no formato desejado. Outra maneira, se logo no incio for selecionado algum estilo, todo o restante seguir o formato escolhido at ser desativado.
RECUO / AVANO Pargrafos so pequenos espaos deixados partir da margem, podem ou no existir conforme os botes que estiverem selecionados. Temos o recuo e o avano. Funciona nas listas tambm, para colocar em sub-nveis.
22.5
1 of 1
06/09/00 11:59
Desenvolvimento de Websites Netscape Composer Menu VIEW
No menu visualizar ( VIEW ) temos uma opo importante para quem estiver interessado em visualizar o cdigo HTML, a Page Source, que mostrar o fonte da pgina que estiver carregada com todas as diretivas. Page Info apresenta informaes sobre a pgina tais como estrutura e imagens relacionadas , alm de informaes sobre o arquivo ( ltima modificao , etc ) .
22.6
1 of 1
06/09/00 11:59
Oficina HTML - Avanado - Applets Java
Desenvolvimento de Webpages Contedo de uma pgina

Algumas consideraes importantes a seguir na construo de um site eficiente :
Autoria - definir o autor da pgina pelo prprio Netscape Composer e tambm indicar os autores e responsveis pelo site. Finalidade - deixar claro qual a finalidade principal de seu j nas primeiras pginas de apresentao Interativatividade - utilizar os recursos da rede de modo a permitir uma maior integrao com os visitantes. Navegabilidade - definir links entre as diversas pginas do site unindo-as logicamente; a utilizao de frames pode um recurso bastante til; evite excesso de links desnecessrios; prefira abrir links externos como outra sesso. Recursos multimdia - utilizar recursos de multimdia possveis em uma pgina caso quando necessrios. Visualizao - indicar qual a melhor configurao para a visualizao de sua pgina, 640x460 ou 800x600. Verificar como fica a visualizao em diferentes browsers.
23
1 of 1
06/09/00 12:00
Desenvolvimento de Webpages Applets Java e Java Scripts

Applets Java Applets Java so aplicaes desenvolvidas na linguagem Java que podem ser incluidas em uma pgina HTML e executas quando apresentadas em seu Browser. Estes aplicativos podem ser desde simples animaes para dar um pouco de vida a uma pgina , ou at mesmo complexos aplicativos como acesso a Bancos de Dados. Quando uma pgina que contm um applet solicitada pelo Cliente a um Servidor, o cdigo executvel trazido ao Cliente e guardado em uma rea temporria sendo eliminado aps a apresentao da pgina . Este procedimento anlogo ao envio do cdigo HTML que fica guardado no cache quando a pgina trazida do Servidor. Para inserir um applet em uma pgina deve-se incluir no HTML alguns cdigos que iniciam a execuo do applet e tambm ter no diretrio da pgina o applet j compilado com a extenso .class. Esses programas podem ser desenvolvidos por voc ou ento existem alguns sites onde pessoas disponibilizam applets, mas dificilmente voc consegue capturar um arquivo .class em qualquer pgina que contenha uma applet java pois existem protees. Conhea alguns sites com applets interessantes para download:
The Java Boutique (http://www.j-g.com/) Demicron ( http://www.demicron.se) Inova Rapid Site ( http://www.inova.net/algomais/) Javapowered.com (http://www.javapowered.com/)
Javascripts Analogamente aos Applets na linguagem Java, podemos definir algumas funes ou scripts que podem ser escritas na linguagem Javascript e includas numa pgina HTML aps a diretiva <SCRIPT> . Veja um exemplo de aplicao de Javascripts bastante simples onde poderemos trocar uma imagem por outra ao passarmos o mouse sobre a figura. CCUEC ( http://www.ccuec.unicamp.br)
1 of 2
06/09/00 12:02
24
2 of 2
06/09/00 12:02
Oficina HTML - Avanado - Frames
Desenvolvimento de Websites Frames

Frames ou quadros permitem a diviso da tela de exposio do browser em diferentes reas onde pode-se apresentar diferentes pginas. Isso possibilita, por exemplo, que se determine uma rea da tela para ser a pgina principal e outras reas para menus ou links. Isso usado de maneira coordenada pode ser de grande ajuda na navegabilidade pelas pginas de seu site. O Netscape Composer no apresenta facilidades para a criao de Frames por isso neste treinamento a estrutura dos frames devera ser definida usando outros editores ( Word, Notepad, WordPad, ... ) O primeiro passo para se criar uma estrutura usando frames definir o Frameset ou conjunto de frames, que indica como ser estruturado cada quadro na tela em termos de linhas (rows) e colunas (cols) , e quais pginas devero ser apresentadas em cada um desses quadros. Num primeiro exemplo vamos dividir a tela em duas reas : um menu lateral e uma rea principal ocupando a maior parte da tela. <frameset cols="100 , * "> <frame src= menu.html name = "area-menu"> <frame src= apresentacao.html name="area-principal"> </frameset> No exemplo acima temos a tela dividida em duas reas, definidas por duas colunas verticais. A primeira , com tamanho de 100 pixels , recebeu o nome de area-menu e nela estamos apresentando a pgina menu.html. A segunda ocupa o restante da tela ( indicado por "*" ), recebeu o nome de area principal, e nela estamos apresentando inicialmente a pgina apresentacao.html.
25
1 of 1
06/09/00 12:02

Num segundo exemplo vamos definir uma estrutura com trs reas : topo, menu lateral, e rea principal. Para tanto basta acrescentarmos o exemplo anterior como um subconjunto de frames nesta nova estrutura. Observe : <frameset rows = " 60 , * "> <frame src= topo.html name = "area-topo"> <frameset cols="100 , * "> <frame src= menu.html name = "area-menu"> <frame src= apresentacao.html name="area-principal"> </frameset> </frameset> Assim temos nossa tela dividida em trs reas distintas : duas linhas, ou faixas horizontais, a primeira com 60 pixels recebeu o nome de area-topo e apresenta a pgina topo.html; a segunda faixa se divide em outro conjunto de frames desta vez em colunas verticais, a primeira com 100 pixels recebeu o nome de area-menu e apresenta a pgina menu.html e a segunda ocupando o restante da tela, recebeu o nome de rea principal e apresenta a pgina apresentacao.html. O tamanho das reas podem ser definidos em porcentagem da tela ao invs do valor fixo em pixels. Para tanto basta indicarmos "%" na definio do tamanho das linhas e colunas . Ainda podemos definir atributos em nosso Frameset que controlam a visualizao e navegao coordenada entre os frames.
25.1
1 of 1
06/09/00 12:03

Atributos de controle Margem : marginwidth : determina as margens direita e esquerda do frame marginheight : determina as margens superior e inferior do frame Barra de rolagem : Scrolling : pode-se determinar se o frame ter barra de rolagem se necessrio ou se nunca apresentar a barra mesmo se necessrio. Eliminao da barra de rolagem < FRAMESET src = ... SCROLLING = "NO" >
Alterao da estrutura : Os navegadores permitem que o visitante altere a posio dos frames. Para tanto o atributo noresize inibe esta possibilidade e torna os frames fixos conforme definido. < FRAMESET src = ... NORESIZE> Bordas : Podemos definir se nossa estrutura de quadros ser apresentada ressaltando-se as bordas entre ou frames ou no usando os atributos frameborder e border. Eliminao das bordas dos frames: < FRAMESET src = ... FRAMEBORDER="NO" > Eliminao do espao entre os frames : < FRAMESET src = .... FRAMEBORDER="NO" BORDER="0" >
Direcionamento : O atributo target (alvo) o que indica onde uma pgina dever ser apresenta assim que o visitante clica em um link . Por definio uma nova pgina ser apresentada na mesma rea onde est link. Para redirecionar a pgina para outra rea temos as possibilidades a seguir que devem ser constar na definio no link ( <a href=pagina.html target= ... > ) : target="nome da rea " : carrega a pgina na rea especificada.
1 of 2
06/09/00 12:03
target=_top : limpa a tela e abre a nova pgina ocupando toda a tela. target=_blank : abre uma nova janela para exibir a pgina. target=_self : carrega a pgina na mesma rea do link. Opo default. No Frame : Alguns browsers no suportam frames e a opo noframe permite que seja apresentada outra pgina como alternativa. <noframe> .... definio da pgina alternativa ... <body> ... contedo da pgina ... ... </noframe>
<img src=fig.jpg>
.... etc
25.2
2 of 2
06/09/00 12:03
Desenvolvimento de Websites Formulrios

Os formulrios em uma pgina Web permitem coletar informaes das pessoas que visitam uma pgina. Atravs de algumas diretivas especiais podemos definir as literais e o formato dos campos de resposta. Tambm definimos que ao ser tomada assim que o formulrio for preeenchido e enviado. Estaremos apresentando as diretivas e parmetros necessrios para a criao de um formulrio exemplo com os diversos tipos de campos para resposta onde a ao ser enviar uma mensagem contendo todas as informaes preenchidas para um e-mail especificado como responsvel pela recepo das informaes. O formulrio dever estar em um servidor autorizado a usar o programa que estiver no cgi-bin.
Diretivas
Definio do Formulrio Campos Tipo Texto Campos de Escolha Botes de Ao Botes de Seleo rea de Texto Alm da definio do formulrio e necessrio definir o programa que executar a transmisso do formulrio . Este programa deve estar gravado em um diretorio cgi-bin. Alguns endereos: FormMail, Matt's Scripts, worldwidemart.com/scripts/formmail.shtml Site contendo muitos scripts disponiveis para download e possveis de serem customizados.
26
1 of 1
06/09/00 12:04
Oficina HTML - Avanado - Formularios - Campos Input

Uma pgina pode ser conter campos em diversos formatos para entrada de dados digitados pelo visitante e enviados ao servidor que dar incio a execuo de um programa de tratamento destas informaes. A diretiva FORM define o incio do formulrio. O atributo METHOD define o mtodo de acesso a URL onde est o script, programa a ser executado no servidor , especificado pelo atributo ACTION. Exemplo : <FORM METHOD=POST ACTION= script > ... ... (definio dos campos de formulrio) ... </FORM> Campos do tipo "Hidden" (ocultos) Alm dos campo definidos no formulrio que esto visveis e sero preenchido pelo visitante podemos definir campos no visveis que estaro passando parmetros para o programa a ser executado. <INPUT TYPE="hidden" NAME="nome-do-campo" Value="valor" > nome do campo o mesmo nome da varivel usada pelo programa no servidor e "valor" e'o valor do campo que estamos passando ao programa.
26.1
1 of 1
06/09/00 12:04
Oficina HTML - Avanado - Formularios - Campos Input

Campos Tipo Texto <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> Senha: <INPUT TYPE=PASSWORD NAME="Senha"> </FORM>
Nome: Senha:
Alguns Atributos :
Value : Inicializa um campo texto com o valor definido Ex.: Nome: <INPUT TYPE=TEXT NAME="Nome" VALUE="Oswald de Andrade"> Nome:
Size : Delimita o tamanho do espao para entrada do valor nos campos

TEXT ou PASSWORD. Delimita apenas o espao mostrado e no tamanho do campo. Ex.: Nome: <INPUT TYPE=TEXT NAME="Nome" SIZE=30 > Nome: Maxlenght : Delimita o nmero de caracteres aceitos como entrada em um campo TEXT ou PASSWORD. Ex.:Sigla do Estado : <INPUT TYPE=TEXT NAME="Sigla do Estado" MAXLENGHT=2> Sigla do Estado :
26.2
1 of 1
06/09/00 12:05
Oficina HTML - Avanado - Formularios - Campos Multipla Escolha

Campos Tipo Mltipla Escolha Frutas : <FORM> <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Abacaxi">Abacaxi <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Morango">Morango <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Limo">Limo <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Pera">Pera <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Laranja">Laranja </FORM> Frutas : Abacaxi Morango Limo Pera Laranja
O atributo CHECKED serve para inicializar um item como j escolhido. Campos Tipo Escolha nica <FORM> Estado Civil : <INPUT TYPE=RADIO NAME="estciv" Estado Civil : VALUE="Solteiro">Solteiro <INPUT TYPE=RADIO NAME="estciv" Solteiro VALUE="Casado">Casado Casado <INPUT TYPE=RADIO NAME="estciv" VALUE="Viuvo">Viuvo Viuvo <INPUT TYPE=RADIO NAME="estciv" Divorciado VALUE="Divorciado">Divorciado Outros <INPUT TYPE=RADIO NAME="estciv" VALUE="Outros">Outros </FORM>
26.3
1 of 1
06/09/00 12:06
Oficina HTML - Avanado - Formularios - Campos de Acao

Botes de Ao SUBMIT - Envia os dados preenchidos no formulrio para o servidor, iniciando a execuo do programa especificado no atributo ACTION. RESET - Reinicializa o formulrio com os valores previamente definidos. O atributo VALUE define a mensagem sobre o boto. Enviar Cancelar <FORM> <INPUT TYPE=SUBMIT VALUE="Enviar"> <INPUT TYPE=RESET VALUE="Cancelar"> </FORM>
26.4
1 of 1
06/09/00 12:06
Oficina HTML - Avanado - Formularios - Botoes de Selecao
Desenvolvimento de Websites Formulrios - Botes de Seleo

A diretiva <SELECT> utilizada juntamente com a diretiva <OPTION> para definir uma lista de valores a serem selecionados. Exemplo: <SELECT NAME="plataforma"> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT>
PC
Pode-se definir um valor como default usando o atributo SELECTED. Exemplo: <OPTION SELECTED>valor O atributo SIZE utilizado para se apresentar mais de um valor na pgina: <SELECT NAME="plataforma" SIZE=3> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT> PC Workstation Alpha
26.5
1 of 1
06/09/00 12:07
Desenvolvimento de Websites Formulrios - Botes de Seleo

A diretiva <SELECT> utilizada juntamente com a diretiva <OPTION> para definir uma lista de valores a serem selecionados. Exemplo: <SELECT NAME="plataforma"> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT>
PC
Pode-se definir um valor como default usando o atributo SELECTED. Exemplo: <OPTION SELECTED>valor O atributo SIZE utilizado para se apresentar mais de um valor na pgina: <SELECT NAME="plataforma" SIZE=3> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT> PC Workstation Alpha
26.5
1 of 1
06/09/00 12:09

rea de Texto A Diretiva TEXTAREA define uma rea para entrada de textos. Os atributos COLS e ROWS definem o tamanho da janela.
Exemplo
<TEXTAREA COLS=60 ROWS=10 NAME="texto">rea para entrada de texto </TEXTAREA>
26.
1 of 1
06/09/00 12:09
Desenvolvimento de Websites Mapas Clicveis

Mapas Clicveis em uma pgina so figuras que permitem a associao de reas desta figura com links para diferentes URLs. Estes mapas podem ser definidos de diferentes maneiras; neste treinamento estaremos apresentando um mtodo bastante simples usando Client-Side Imagemap. Cdigo HTML <MAP NAME=menu> <AREA SHAPE=rect COORDS= "5,38, 86,54" HREF=111.htm> <AREA SHAPE=rect COORDS= "6,64, 85,94" HREF=112.htm> <AREA SHAPE=rect COORDS= "8,106, 45,120" HREF=113.htm> <AREA SHAPE=rect COORDS= "8,129, 60,143" HREF=114.htm> <AREA SHAPE=rect COORDS= "9,151, 49,165" HREF=115.htm> <AREA SHAPE=rect COORDS= "10,175, 71,206" HREF=116.htm> <AREA SHAPE=rect COORDS= "9,216, 57,245" HREF=117.htm> </MAP> <IMG Border=0 SRC="indicecc.gif" USEMAP="#menu" > No exemplo acima a diretiva MAP est definindo a criao do mapa e informando seu nome. A diretiva AREA informa o formato,SHAPE, da rea "sensvel" , suas coordenadas, COORD, e o endereo da URL associada. O formato da rea (SHAPE) pode ser RECT - retngulo - coordenadas x1,y1 , x2,y2 CIRC - crculo - corrdenadas x,y e raio r POLY - polgono - coordanadas x1,y1 , x2,y2 , x3,y3 , ... A Diretiva <IMG ... USEMAP= ...> associa a defio do Mapa Imagem. As Coordenadas podem ser obtidas utilizando softwares de tratamento de imagens, como o Paint Sho Pro, ou Adobe Photoshop.
27
1 of 1
06/09/00 12:12
file:///C|/curso_webpages/111.htm
Mapas Clicveis
Voc clicou em treinamentos .
27.1
1 of 1
06/09/00 12:28
Mapas Clicveis
Voc clicou em Atendimento e Consultoria .
27.2
1 of 1
06/09/00 12:29
Oficina HTML - Avanado - Mapas Sensitivos
Mapas Clicveis
Voc clicou em FAQs .
27.3
1 of 1
06/09/00 12:29
Mapas Clicveis
Voc clicou em Software .
27.4
1 of 1
06/09/00 12:30
Mapas Clicveis
Voc clicou em Search .
27.5
1 of 1
06/09/00 12:30
Mapas Clicveis
Voc clicou em ndice de pginas .
27.6
1 of 1
06/09/00 12:31
Mapas Clicveis
Voc clicou em Sobre a Gacli.
27.7
1 of 1
06/09/00 12:31
Desenvolvimento de Websites Validando seu Site

importante sempre checar se os links nas pginas de seu site esto todos levando a informao indicada pois so constantes as mudanas de endereo de sites na Internet. Existem alguns sites pela rede que oferecem gratuitamente servios de verificao de links e cdigo HTML utilizando programas que visitam o site checando os links. Aps a visita estes programas retornam um aviso sobre as ocorrncias registradas.
"Let our robots tune your Web site. Free! Our robots will search your site to find broken link spot bad HTML tags, and rate your server's response time." Ocorrncias na verificao de links e do cdigo HTML
Website Garage
1 of 1
06/09/00 12:13
Desenvolvimento de Websites Hospedando sua Home Page

Na Unicamp uma pgina pode ser disponibilizada desde que esteja de acordo com as normas estabelecidas pela Portaria GR N 71/97, DE 23/05/97 , que dispe sobre a insero de Home Page na UNInet (http://www.unicamp.br/pg/portarias/1997/POR07197.HTM). Estas pginas devem ser disponibilizadas preferencialmente nos servidores instalados nas Unidades Administrativas, Institutos, Faculdades, Centros e Ncleos. Informaes que podem ser disponibilizadas : Dados sobre a Instituio Informaes de interesse geral Divulgao de eventos, programas, projetos Servios de utilidade pblica Acesso a Sistemas (DAC, SAE, Bibliotecas, etc ) Provedores de Acesso em Campinas : Best Way (http://www.bestway.com.br/) Correio Net ( http://www.correionet.com.br ) Nutecnet ( http://www.cas.nutecnet.com.br/ ) Sigma BBS ( http://www.sigmabbs.com.br/ ) SuperNet ( http://www.supernet.com.br/ ) WebCit ( http://www.webcit.com.br/ ) Sites gratutos : Geocities ( http://www.geocities.com/ ) HighWay tecnologias ( http://www.hexanet.com.br/highway ) Locadora ( http://www.locadora.com ) Tripod ( http://www.tripod.com ) Angelfire ( http://www.angelfire.com ) TerrVista ( http://www.terravista.pt/ )
29
1 of 1
06/09/00 12:14
Desenvolvimento de Websites Novas Tecnologias

Algumas novas tecnologias aplicadas na Internet tem possibilitando o uso da rede de maneira mais completa e interativa, com o uso de elementos multimdia como som, imagem e vdeo, apresentados atravs de pginas web. Aos poucos assim a Web se torna cada vez mais atraente exigindo dos navegantes uma atualizao constante de browsers e plug-ins. Html Dinmico: Criao de camadas (floaters) interativos na pgina. Shockwave Flash: Criao de pginas multimdias com tamanho reduzido, pelo uso de grficos vetoriais, podendo, se necessrio voc tambm icluir imagens fotogrficas digitalizadas. Real Video e Vdo: Vdeo e udio sob demanda. VRML: Virtual Reality Modeling Language - Transforma as pgina bidimensionais em mundos em 3D.
30
1 of 1
06/09/00 12:15
Desenvolvimento de Websites Catlogos e Links

Divulgao e Cadastramento em Catlogos
importante que sua pgina esteja cadastrada nos principais mecanismos de busca na re Viste os principais catlogos de informaes disponveis. Altavista ( http://www.altavista.digital.com/ ) Yahoo ( http://www.yahoo.com/ ) Surf ( http://www.surf.com.br ) Cad ? ( http://www.cade.com.br ) InfoBrasil Navegador ( http://www.infobrasil.com/navegador/ ) Argos ( http://www.argos.com.br/ ) Links e Referncias Confeco de pginas ... Design e Estilo de pginas Web, Tom Venetianer ( http://mvassist.pair.com/BRDesign.html) Web Wonk - Tips for Writers and Designers ( http://www.dsiegel.com/tips/ ) Yahoo-( http://www.yahoo.com/Computers/World_Wide_Web/Page_Design_and_Layo HTML Tutorial de HTML, de Maria Alice Soares de Castro , Usp-So Carlos (http://www.icmsc.sc.usp.br/manuals/HTML) "HTML Rpido e Fcil", por Srgio Charlab( http://www.jb.com.br/ch2502.html ) Lista de Discusso Webdesign ( http://www.promit.com.br/wdbrasil )
1 of 1
06/09/00 12:15

To de Websites

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

To de Websites

Diunggah oleh

Hak Cipta:

Format Tersedia

Desenvolvimento de Websites

Autores: Francisca M. Baptistella Gian Franco B. Barcellini

Desenvolvimento de Websites Introduo

Desenvolvimento de Websites Contedo Programtico

Desenvolvimento de Websites O Website - Como construir

Desenvolvimento de Websites O website - Como construir

Desenvolvimento de Websites Perfis de websites

Desenvolvimento de Websites Design Digital

Desenvolvimento de Websites Arquitetura da Informao

Desenvolvimento de Websites Conceitos do Ambiente

Desenvolvimento de Websites Conceitos do Ambiente

Desenvolvimento de Websites Conceitos do Ambiente

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Estrutura de uma pgina HTML

Desenvolvimento de Websites A Linguagem HTML Estrutura da pgina

Oficina HTML - Estrutura de uma pgina HTML

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Estrutura de uma pgina HTML

Oficina HTML - Acentuao e Caracteres Especiais

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Disposio do Texto na Tela

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Definio de Listas

Desenvolvimento de Websites A Linguagem HTML

No browser Listas No-Ordenadas <ul> - marca o incio da lista

type - define o tipo de marcador de cada item da lista

</ul>- marca o final da lista <li> - determina um item da lista Exemplo :

Oficina HTML - Definio de Listas

Oficina HTML - Imagens

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Imagens

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Imagens

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Imagens

Oficina HTML - Tabelas

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Tabelas

Oficina HTML - Links com Outros Documentos

Desenvolvimento de Websites A Linguagem HTML

Oficina HTML - Links com Outros Documentos

Browsers mais utilizados: Netscape Internet Explorer

Oficina HTML - Composer

Desenvolvimento de Websites Construindo pginas

Oficina HTML - Composer

Desenvolvimento de Websites Netscape Composer

Oficina HTML - Composer

Desenvolvimento de Webpages Netscape Composer

Oficina HTML - Composer

Desenvolvimento de Websites Netscape Composer

Oficina HTML - Composer

Desenvolvimento de Websites Netscape Composer

Oficina HTML - Composer

Desenvolvimento de Websites Netscape Composer

Oficina HTML - Composer

Desenvolvimento de Websites Netscape Composer Menu VIEW

Oficina HTML - Avanado - Applets Java

Desenvolvimento de Webpages Contedo de uma pgina

Oficina HTML - Avanado - Applets Java

Desenvolvimento de Webpages Applets Java e Java Scripts

Oficina HTML - Avanado - Applets Java

Oficina HTML - Avanado - Frames

Desenvolvimento de Websites Frames