Prof. Esp.

Rodolfo Nakamura

66715686.doc

Pgina 1 de 19

Apostila HTML bsico

Professor Rodolfo Nakamura

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 2 de 19

1. ndice
1. ndice.......................................................................................................2 2. Introduo................................................................................................3 2.1. Servios Internet..........................................................................3 2.2. Como est organizada esta apostila............................................3 3. HTML.......................................................................................................4 3.1. Comandos Bsicos......................................................................4 3.1.1. Sobre Hyperlinks......................................................4 3.1.2. Sobre Margens.........................................................5 3.1.3. Sobre Imagens.........................................................5 3.1.4. Sobre textos.............................................................5 3.1.5. Sobre Marcadores....................................................7 3.1.6. Sobre Organizadores................................................7 3.1.7. Sobre quebras de Linhas..........................................7 3.2. Sobre formatao da pgina........................................................8 3.3. Frames........................................................................................8 3.3.1. Outras opes a serem utilizadas em Frameset:......9 3.3.2. Algumas vantagens do recurso Frame.....................9 3.3.3. Algumas desvantagens do recurso Frame................9 3.4. Tabelas......................................................................................10 3.5. Formulrios................................................................................12 4. Glossrio................................................................................................14 5. Anexo 1 Tabela de Cores Hexadecimal .............................................15 6. Anexo 2 - Cdigos Javascript mais usuais.............................................18 6.1. Comandos Javascript................................................................18 6.1.1. Para fechar a janela do navegador.........................18 6.1.2. Para abrir uma nova janela do browser, carregando o documento novo.htm:....................................................18 6.1.3. Para Imprimir a pgina............................................18 6.1.4. Para criar um hyperlink que volte pgina anterior 18 6.1.5. Para Incluir seu site na seo Favoritos do navegador:........................................................................18 Bibliografia................................................................................................19

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 3 de 19

2. Introduo
Desde que surgiu, a Internet absorveu a ateno de praticamente todas as reas. Primeiro, no final dos anos 60, no sculo XX (1969), surgindo como um projeto militar do governo norte-americano, lanado conhecido na poca como ARPANET, depois, em seu desenvolvimento no meio acadmico e, finalmente, na sua abertura comercial, em 1995, nos Estados Unidos da Amrica e em 1996, no Brasil. A estrutura da Internet particularmente interessante. Formada por uma grande rede de computadores, procura interligar diversos computadores ao redor do mundo os chamados Servidores. Em uma definio mais tcnica, servidor 1) um computador, em uma rede local, onde so processados os software administrativos que controlam o acesso rede e seus recursos (como unidades de disco e impressoras). O computador que funciona como servidor coloca seus recursos disposio dos computadores que funcionam como estaes de trabalhos da rede. 2) Na internet ou em outras redes, um computador ou programa que responde a comandos provenientes de um computador-cliente. Por exemplo, um servidor de arquivos pode conter um arquivo de dados ou de programas; quando um cliente solicita um arquivo, o servidor transfere uma cpia do arquivo para o cliente1 Uma rede local, por outro lado, um conjunto de computadores interligados fsicamente (cabos e demais conexes) e logicamente (sistema operacional que gerencie essas conexes). A Internet, nesta viso, nada mais do que uma grande rede de computadores, interligadas ao redor do mundo, por estruturas fsicas (cabos, sinais de rdio ou satlites) e sistemas operacionais. correio eletrnico), um servio de troca eletrnica de mensagens. Neste contexto, segundo NAKAMURA (2001), Ray Tomlinson modifica, em 1972, o sistema de e-mail da ARPANET. dele, por exemplo, a idia de incluir o @ no endereo de e-mail, estruturando-o como usuario@site.com, um acrnimo de usurio at (em) site. Outro servio de grande destaque surgiu pelas mos de Tim Berners-Lee, em 1992, inventando a World Wide Web, literalmente rede de alcance mundial, um sistema de hiper-texto que permite a interlgao dinmica de diversos documentos atravs da rede. A imagem virtual de fios interligando documentos ao redor do mundo seria similar ao de uma teia de aranha. Da a analogia do nome. No ano seguinte, o ento estudante Marc Andreessen, apresenta o Mosaic, o primeiro navegador Web em modo grfico, capaz de mostrar imagens. Ele seria convidado por Jim Clark, um alto executivo da rea de tecnologia, a fundar, no ano seguinte, a Netscape Corporation. Embora existissem outras formas de se acessar informaes na rede, como o Gopher, Archie e Telnet, o sistema Web logo ganhou espao por ser rpido, fcil e intuitivo. Justamente por ser um ambiente grfico, possibilitava maiores possibilidades de utilizao pela interatividade que o hiper-texto permite. A base da World Wide Web a linguagem HTML, HyperText Markup Language, ou Linguagem de Marcao de Hipertexto. justamente essa linguagem que vamos abordar nesta apostila.

2.2. Como est organizada esta apostila

Vamos apresentar os comandos bsicos de forma objetiva e direta, muitas vezes citando o exemplo diretamente na demonstrao do cdigo HTML. As informaes sobre o cdigo apareceram em fonte Courier, de forma a diferenar de outras explicaes da apostila.

2.1. Servios Internet

A Internet, , pois, uma estrutura computacional. Sobre ele, foram desenvolvidas diversas aplicaes. Uma das mais famosas o e-mail (electronic mail, ou
1

CHAMON e CASTRO (1998)

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 4 de 19

3. HTML
HyperText MarkUp Language uma linguagem estruturada de descrio de pgina.- Todos os comandos so colocados entre chaves <comando> e devem ter o respectivo fechamento </comando>

3.1. Comandos Bsicos

<HTML> indica arquivos em html <TITLE> Titulo da Pgina, o que aparece na barra do navegador</TITLE> <BODY> indica comeco do contedo

< A HREF=" http://"> <IMG SRC="logo.gif"> </A> </BODY> </HTML> 3.1.1. Sobre Hyperlinks

Hyperlinks so ligaes dinmicas entre os documentos. Quando o usurio clica sobre um hyperlink, ele levado para uma outra parte ou para um outro documento dentro da rede. Opes principais disponveis: Target o o o o _blank _top nome #ancora abre nova janela/browser na mesma janela, sobrepondo todas as definies do frame indica destino na estrutura de frame2 indica ncora dentro da pgina.

Utilizao: <a href=http://www.dominio.com.br target=_blank> ncora uma referncia dentro da pgina. Quando criamos um link para uma ncora, como se crissemos um link interno ao prprio documento. Assim, na pigna HTML, quando clicamos no link o navegador nos leva at a ncora. Para se definir a ncora, vamos at o local onde queremos coloc-la e indicamos <a name=nome_da_ancora></a> O comando semelhante criao de um hiperlink. Pode-se colocar uma imagem ou mesmo um texto entre os comandos <a></a>, mas no imprescindvel. Hyperlink para e-mail Para se criar um hyperlink que acesse um endereo de e-mail, utilizamos: <a href=mailto:usuario@dominio.com.br> Observe a necessidade de indicar mailto: antes do endereo de e-mail destino da mensagem.
2

Mais informaes no item frames

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 5 de 19

3.1.2.

Sobre Margens

Como padro, todos os documentos criados em HTML tm margens na lateral esquerda e no topo da pgina. Caso voc queira definir outro valor, ou, como nos exemplos abaixo, anular essas margens, voc deve incluir as seguintes opes no comando <BODY>

Netscape: o marginwidth="0" margens horizontais (largura) o marginheight="0" margens verticais (altura) Internet Explorer o topmargin="0" margem superior o leftmargin="0" margem esquerda

Observe que, para o navegador Netscape, os comandos so diferentes para os utilizados no Internet Explorer. Por isso, muito comum acrescentar-se os dois comandos, como no exemplo: <BODY marginwidth=0 marginheight=0 topmargin=0 leftmargin=0> Outras opes que tambm podem ser includas no comando BODY:

BGSOUND="audio.mid" BGCOLOR="#ffffff" BACKGROUND="imagem.gif"

arquivo de som de fundo. HTML aceita somente para .AIFF, .MID, .WAV cor de fundo da pgina. Deve ser definida em cdigo de cor hexadecimal3 imagem de fundo da pgina

3.1.3.

Sobre Imagens

A pgina em HTML aceita somente arquivos de imagem em formato .JPG e .GIF. De maneira geral, utilizamos o formato .JPG para fotos (grayscale ou tons de cinza ou ainda sistema de cores RGB, 200 dpi). Para grafismos e logotipos, utilizamos com mais freqncia o formato .GIF (at 256 cores). Ao incluir imagens, podemos criar algumas opes:

Width="200" Height="250" Border="0" Alt="texto"

largura da imagem altura da imagem borda em volta da imagem legenda texto que normalmente os navegadores mostram quando paramos o mouse sobre a imagem.

Um exemplo de formatao: <img src=imagem.gif width=150 height=200 border=0>

3.1.4.

Sobre textos

Uma importante considerao sobre fontes que ns, como designers, temos que considerar a possibilidade de outros usurios no possurem as mesmas fontes que ns temos em nosso computador. Isso pode acontecer porque acessam de outros tipos e computadores ou sistemas operacionais (PC, MacIntosh, Workstation, MainFrame e ainda Windows, MacOS, Linux, Unix etc.)
3

Tabela de cores Hexadecimais em Anexo I

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 6 de 19

Por isso, muito comum nos atermos aos principais tipos de letras disponveis no mercado, pois so os mais facilmente encontrveis. Para definir o fonte dos textos, utilizamos o comando <FONT>: <FONT="Verdana, Arial, Helvetica" SIZE="2" COLOR="#000000"> Observe que pode-se definir um conjunto de fontes, evitando problemas caso o usurio no possua a sua fonte de preferncia. Assim, no exemplo acima, a primeira opo Verdana. Se o computador que est acessando a pgina no o tiver instalado, o navegador tenta mostrar com o fonte Arial. Caso no seja possvel ainda, tenta-se com o Helvtica. Se nenhuma das opes for possvel, a ento o sistema se encarrega de mostrar no tipo de letra padro que ele possui no sistema. Observe as opes:

SIZE=2

COLOR=#000000

tamanho em HTML: equivalncia aproximada: 1 - corpo 8 2 - corpo 10 3 - corpo 14 4 - corpo 18 5 - corpo 24 6 - corpo 36 Definido conforme cdigo Hexadecimal.

Outras opes relacionadas fontes, est relacionado ao estilo da letra. As variaes em negrito (bold), inclinado ou oblquo (italic) e ainda o sublinhado. Os seguintes comandos devem ser utilizados independentemente do comando FONT.

<b>bold</b> <i>italic</i> <b><I>bold italic</b></I> <u>underline</u>

Caso voc faa realmente questo que um texto aparea no tipo de letra (fonte) que voc escolheu, voc dever utilizar um arquivo de imagem com o texto e fonte desejado. Geralmente, utiliza-se arquivos em formato .GIF para isso.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 7 de 19

3.1.5. <UL>

Sobre Marcadores indicam bullet ou " bolinha" Resultado:

Marcadores esto presentes nas listas numeradas ou separadas por bolinhas (bullets).

<LI>Item 1</LI> <LI>Item 2</LI> </UL>

Item 1 Item 2

A outra opo de lista o comando <OL> (Ordered List, ou lista numerada):

<OL> <LI>Item 1</LI> <LI>Item 2</LI> </OL> 3.1.6. Sobre Organizadores

indicam bullet ou " bolinha" Resultado:

1. Item 1 2. Item 2

Para se organizar a informao na pgina, muito comum separ-la com fios horizontais (Horizontal Rule). Outra opo simplemente acrescentar imagens como separadores entre os textos.

<HR> WIDTH=80% HEIGHT=1

Horizontal rule em pixels ou % em pixels

Opes:

3.1.7.

Sobre quebras de Linhas

Quando trabalhamos textos em HTML, no adianta voc digitar um Enter ao final das linhas. As quebras vo acontecer somente mediante cdigos em HTML. Para separar pargrafos de texto, necessrio utilizar o comando <P>: <p align="left">contedo</p> Opes:

Align=left

Outras opes: left, center, right, justify

Quebra de linhas Toda vez que voc inicia um novo pargrafo, o HTML acrescenta automaticamente um espao depois dele. Para quebrar uma linha, sem mudar de pargrafo, utiliza-se o comando <BR>. Para ele, no necessrio o comando de fechamento.

<BR>

Quebra de linha sem quebrar pargrafo.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 8 de 19

3.2. Sobre formatao da pgina

Caracterstica principal: adequa-se sempre ao tamanho do navegador. No h limite vertical. O horizontal definido pelo browser. Como, ento, fazer com que a pgina esteja formatada como NS queremos? Existem basicamente 2 recursos: Frames e Tabelas.

3.3. Frames

Frames ou quadros um recurso que permite a visualizao simultnea de vrios arquivos HTML. Um deles o controlador, ou seja, o que indica onde e como as informaes vo ser mostradas, ou, em outras palavras, define as reas/regies onde estaro situadas as demais pginas. tambm conhecido como frameset.htm.

No cdigo abaixo, ns temos um exemplo de pgina frameset. Lembrando que um frameset nada mais do que um arquivo HTML que gerencia a visualizao de outros documentos, vamos supor que esta seja a Homepage de seu site. Ao acess-lo, o usurio vai visualizar, simultaneamente, 2 outras pginas HTML: menu.htm e conteudo.htm: Exemplo 1 Exemplo 2

<HTML> <BODY> <FRAMESET COLS=120,*> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="conteudo.htm" NAME="principal"> </FRAMESET> </BODY> </HTML>

<HTML> <BODY> <FRAMESET ROWS=10%,90%> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="conteudo.htm" NAME="principal"> </FRAMESET> </BODY> </HTML>

Nos cdigos acima, estamos criando um sistema de navegao, utilizando Frames, em que uma pgina contm os links como se fosse um menu de opes (menu.htm), e o contedo estivesse, inicialmente, em outra pgina chamada conteudo.htm. No exemplo 1, os frames estaro dispostos em forma de coluna diviso vertical. (comando <FRAMESET COLS=120,*>. Veja que a diferena para o exemplo 2 o uso do termo COLS ao invs de ROWS, que indica a diviso do frames na horizontal. Observe que necessrio indicar o nome do Frame (nos exemplos, NAME=principal). Esse nome ser utilizado como referncia na hora de se criar um link (veja mais adiante). Opes para controle de largura do frame:

120 Voc pode colocar um valor numrico, representando a medida em pixels. No exemplo 1, a primeira coluna tem 120 pixels. 10% Pode-se tambm especificar a medida do frame em valores percentuais em relao ao navegador. No exemplo 2, uma linha que ocupe 10% da altura do frame. * O asterisco um caracter coringa. Ele indica ao navegador para utilizar todos os espaos restantes. Caso haja uma definio do tipo FRAMESET COLS=*,120,*,

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 9 de 19

estaremos dizendo para o navegador: a coluna do meio tem 120 pixels. Divida igualmente os espaos restantes para formar a coluna 1 e a coluna 3. Em nosso exemplo, estamos trabalhando o documento menu.htm como a pgina que vai conter a navegao de nosso site. Veja um exemplo de cdigo para ele:

<HTML> <BODY> <A HREF="pag2.htm">Link 1</A><br> <A HREF="pag3.htm" target="_blank">Link 2</A><br> <A HREF="pag4.htm" target="principal">Link 3</A> </BODY> </HTML>
Veja qual o comportamento de cada hyperlink especificado no documento menu.htm, quando o usurio clicar em:

Link 1, o documento pag2.htm ser aberto no mesmo frame onde est o hyperlink, ou seja, vai substituir a pgina menu.htm no frame. Link 2, o documento pag3.htm ser aberto em uma nova janela do navegador. Link 3, o documento pag4.htm ser aberto no frame de nome principal.

IMPORTANTE: lembra-se de que, agora h pouco, eu havia comentado da necessidade de se colocar um nome para cada quadro no frameset? Pois : na hora de criar um hyperlink, definimos o alvo (target) onde o documento ser direcionado. Observe que nos trs exemplos acima, as diferentes formas de se escrever o hyperlink geraram 3 situaes diferentes!

3.3.1.

Outras opes a serem utilizadas em Frameset:

BORDER=1 Acrescenta uma borda, definida em pixels, ao redor do frame. Utilize-o junto ao comando FRAMESET= Acrescenta uma margem em cada frame. Definida em pixels. Voc pode escolher se quer que apaream barras de rolagem (YES) ou no apaream (NO) em cada frame.

MARGIN=20 SCROLL=NO

Voc pode, por exemplo, no permitir a visualizao de barra de rolagem na pgina que exibe o menu. No entanto, se a pgina for maior do que a visualizao permite, o usurio ter dificuldades para ver o contedo da pgina!

3.3.2.

Algumas vantagens do recurso Frame

Voc pode fazer uma estrutura de navegao em que alguns documentos encontramse fora de seu Site, mantendo a impresso, ao usurio, de continuar navegando no seu endereo, j que parte do contedo que ele estar vendo uma pgina que voc fez. uma forma fcil de se criar menus.

3.3.3.

Algumas desvantagens do recurso Frame

Quando o usurio for imprimir a pgina, na verdade sero impressos todos os documentos relacionados no frameset.
www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 10 de 19

Tecnicamente, um recurso mais pobre, devendo ser reservado para casos especficos.

3.4. Tabelas
O uso de tabelas muito importante tanto para organizar as informaes de modo mais fcil, a exemplo do que ocorre em uma planilha, quanto para formatar uma pgina. O conceito inicial de HTML permitir um ajuste automtico da distribuio de espaos ocupados por textos e imagens conforme o tamanho do navegador. No entanto, por questes de design, tem sido mais interessante deixar o documento com aparncia visual mais previsvel possvel. Para isso, os designers tm utilizado o conceito de tabela para literalmente desenhar a pgina, definindo espaamentos fixos para suas pginas. Cdigo bsico:

<TABLE> <TR> <TD>Coluna 1</TD> <TD>Coluna 2</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> </TR> <TD COLSPAN=2>Juntar coluna</TD> </TR> </TABLE>
Observe:

Resultado: Coluna 1 Linha 2 Coluna 1 Juntar coluna Coluna 2 Linha 2 Coluna 2

Comandos <TABLE> e </TABLE> indicam comeo e fim da tabela. <TR> </TR> indicam comeo e fim de uma linha <TD> </TD> indicam comeo e fim de uma coluna.

Como a tabela formada de linhas, voc digita as informaes referentes s colunas entre os comandos <TR>.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 11 de 19

Outras opes para ser utilizado no comando TABLE:

BORDER=0

Estabelece uma borda em torno da tabela e entre as clulas. Normalmente, quando utilizado para ajudar na diagramao de pginas, coloca-se o valor em 0. O valor sempre em pixels. Espaamento, em pixels, entre colunas e linhas da tabela. Uma espcie de margem dentro de cada clula. Espaamento, em pixels, entre as clulas da tabela. Cria um espao entre as linhas que formam as divisas entre cada clula. Largura da tabela. Normalmente estabelecido em pixels, pode tambm ser colocada em % da tela do navegador (largura varivel, acompanhado o browser). Idem item anterior, mas aplicado altura da tabela. Define a cor de fundo da tabela. Inclui uma imagem de fundo na tabela. Altera a cor da borda mais clara Altera a cor da borda mais escura Altera a cor de todas as bordas

PADDING=10

SPACING=10

WIDTH=100

HEIGHT=100 BGCOLOR=#000000 BACKGROUND=imagem.gif BORDERCOLORLIGHT=#000000 BORDERCOLORDARK=#000000 BORDERCOLOR=#000000

Observe que as bordas da tabela, na verdade, so compostas de 2 segmentos: a borda mais clara e a mais escura, o que pode ser utilizado para dar uma sensao de iluminao na tabela, ou ainda criar efeitos visuais mais interessantes. Outras opes para ser utilizado no comando TR:

ROWSPAN=1

Faz a mescla (soldar ou juntar) entre N linhas. O valor define a quantidade de linhas que sero mescladas Faz a mescla (soldar ou juntar) entre colunas. O valor define a quantidade de colunas que sero mescladas. Controla a largura das colunas. Pode ser definido em pixels ou porcentagem. Controla a altura das colunas. Pode ser definido em pixels ou porcentagem. Controla o alinhamento vertical da clula. Valores: top, center e bottom. Controla o alinhamento horizontal da clula. Valores: left, center e right.

Outras opes para ser utilizado no comando TD:

COLSPAN=1

WIDTH=150 HEIGHT=200 VALIGN=center HALIGN=center

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 12 de 19

3.5. Formulrios
Em HTML possvel apenas desenhar os formulrios. Em geral, para que eles tenham alguma funcionalidade, gerando interatividade com o usurio, necessrio o auxlio de um programa auxiliar: 1. Para incluir as informaes em um banco de dados: necessrio que um programador especializado faa as configuraes de Banco de Dados no servidor Internet, alm de produzir um programa que leia as informaes do formulrio e as grave no Banco. 2. Para enviar os dados do formulrio para um endereo de e-mail necessrio a ajuda de um programa. Normalmente, ele escrito na linguagem PERL (programa CGI), ou ainda em PHP. Geralmente os provedores fornecem uma opo desses programas e voc dever instruir-se com o suporte tcnico deles sobre como configurar corretamente o formulrio. Comandos Bsicos: <FORM ACTION="programa_.cgi" METHOD="post" NAME="Nome_do_formulario"> <p>Digite seus dados:</p> Nome: <INPUT TYPE="text" NAME="Campo1" maxlenght="40"><br> Senha: <INPUT TYPE="password" NAME="Campo2" maxlenght="8"><br> Ocupao<INPUT TYPE="checkbox" NAME="Campo3" VALUE="1">Estudante<br> Sexo:<INPUT TYPE="radio" NAME="Campo4" VALUE="Masc">Masculino <INPUT TYPE="radio" NAME="Campo4" VALUE="Fem">Feminino<br> Escondido:<INPUT TYPE="hidden" NAME="Campo1" ><br> <INPUT TYPE="submit" NAME="submit"><br> <INPUT TYPE="reset" NAME="reset"> </FORM>

Todo formulrio deve comear e terminar com o respectivo comando <FORM></FORM>. Voc pode incluir textos e objetos do tipo INPUT entre esses dois comandos, criando o formulrio. Os comandos <FONT>, <P>, <HR> e <BR> tambm funcionam para facilitar a formatao.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 13 de 19

Todos os campos em que voc vai digitar alguma informao ns chamamos de INPUT. So eles:

TEXT PASSWORD CHECKBOX RADIO

Aceita dados do tipo Caracter, que pode ser tanto letras, nmeros ou outros sinais grficos. Mesma idia do campo TEXT, s que mostra * no lugar dos caracteres que esto sendo digitados. Aceita campos do tipo SIM/NO. No entanto, no tem carter restritivo (exclusividade). Aceita campos do tipo SIM/NO. No entanto, tem carter restritivo (exclusividade). Ou seja, mostra-se vrias opes mas apenas uma possvel de ser selecionada. Cria um boto que envia os dados ao programa, quando pressionado. Cria um boto que apaga todos as informaes preenchidas nos campos, quando pressionado.

SUBMIT RESET

Nome dos Campos imprescindvel voc colocar um nome para cada campo. So essas referncias que o programa vai utilizar para processar corretamente as informaes. Consideraes importante sobre alguns campos Sexo: <INPUT TYPE=RADIO NAME=sexo VALUE=Masc> <INPUT TYPE=RADIO NAME=sexo VALUE=Fem> <INPUT TYPE=RADIO NAME=sexo VALUE=Outro> Este comando utilizado quando voc vai apresentar vrias opes e apenas uma pode ser selecionada. No exemplo ao lado : Sexo. Normal e formalmente, as pessoas devem optar por apenas uma entre as vrias respostas disponveis. Observe que todos os campos que se referem esta varivel (Sexo) devem ter o mesmo nome de campo. Os valores (VALUE) referem-se resposta escolhida pelo usurio. Gostaria de comer: <INPUT TYPE=CHECKBOX NAME=cardapio VALUE=Lasanha> <INPUT TYPE=CHECKBOX NAME=cardapio VALUE=Pizza> <INPUT TYPE=CHECKBOX NAME=cardapio VALUE=Sorvete> Este comando utilizado quando voc vai apresentar vrias opes e vrias podem ser selecionadas. Veja no exemplo acima. Observe que todos os campos que se referem esta varivel (cardapio) devem ter o mesmo nome de campo. Os valores (VALUE) referem-se resposta escolhida pelo usurio. <INPUT TYPE=SUBMIT NAME=SUBMIT VALUE=Envie j!> Este comando indica a ao de que os dados do formulrio devem ser processados pelo programa. Observe que o que voc preencher em VALUE o estar escrito no boto.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 14 de 19

4. Glossrio
Bitmap Mapa de bits, sistema utilizado para representar uma imagem em bits (pontos). como se quadriculssemos uma imagem. Browser o programa cliente que permite visualizar o contedo de pginas Web. Domnio Na internet, endereo de conexo de rede em forma alfanumrica. Ao se indicar um domnio, servidor internet converte o domnio em endereo IP. Endereo IP Ver IP. Gopher Servio internet usado para localizar informaes de texto, apresentando os resultados em formato hierrquico, no qual o usurio escolhe menus e submenus at localizar a informao desejada. Parece programas feitos em sistema operacional DOS, enquanto a Web seria um Windows. Homepage Geralmente pgina de abertura de um tema ou do prprio Website. Pgina informativa, contendo informaes em forma de texto, imagens e at mesmo sons. As imagens podem ser tanto fotos e ilustraes quanto filmes e desenhos animados. Hospedagem de pginas Web, o servio de manter as pginas Web em computadores (servidores) conectados Internet em tempo real. HTTP HyperText Transfer Protocol, ou Protocolo de Transferncia por Hipertexto, um padro de comunicao que permite troca de informaes entre computadores com a utilizao de tecnologia de hipertexto. IP Internet Protocol. (1) Protocolo de transferncia de dados Internet. (2) Endereo IP o sistema de endereamento de servidores Internet. Ou seja, serve para localizar uma informao. Um endereo IP composto de 4 grupos de at 3 nmeros cada: por exemplo: 200.146.255..255. Como seria muito complicado decorarmos todos os endereos IP que nos interessam, foi criado o sistema alfanumrico de Domnios. Ver: Domnios. Navegador - Ver Browser Site 1) Stio a traduo mais prxima do portugus, e serve para designar um lugar. Pode ser o local eletrnico onde voc construiu sua casa virtual. Exemplo: Conhea minha empresa em www.meusite.com.br. 2) Conjunto de HomePage. Web Ver WWW Webpage Ver homepage Website Ver Site. WWW Acrnimo de World Wide Web, a poro grfica da Internet, um servio capaz de reunir vrios documentos espalhados em vrios servidores Internet, utilizando a tecnologia de hipertexto. Permite contedo interativo e recursos multimdia. Atualmente, tem sido confundida com a prpria internet.

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 15 de 19

5. Anexo 1 Tabela de Cores Hexadecimal

Nome aliceblue antiquewhite aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred
Cdigo f0f8ff faebd7 7fffd4 f0ffff f5f5dc ffe4c4 000000 ffebcd 0000ff 8a2be2 a52a2a deb887 5f9ea0 7fff00 d2691e ff7f50 6495ed fff8dc 00ffff 00008b 008b8b b8860b a9a9a9 006400 bdb76b 8b008b 556b2f ff8c00 9932cc 8b0000

Nome lightseagreen lightskyblue lightslateblue lightslategray lightsteelblue lightyellow limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olivedrab orange orangered orchid

Cdigo 20b2aa 87cefa 778899 888888 b0c4de ffffe0 00ff00 faf0e6 ff00ff 800000 66cdaa 0000cd ba55d3 9370db 3cb371 7b68ee 00fa9a 48d1cc c71585 191970 f5fffa ffe4e1 ffe4b5 ffdead 000080 fdf5e6 6b8e23 ffa500 ff4500 da70d6

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 16 de 19

Nome darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightgoldenrodyellow

Cdigo e9967a 8fbc8f 483d8b 2f4f4f 00ced1 9400d3 ff1493 00bfff 696969 1e90ff b22222 fffaf0 228b22 dcdcdc f8f8ff ffd700 daa520 7f7f7f 008000 adff2f f0fff0 ff69b4 cd5c5c fffff0 f0e68c e6e6fa fff0f5 7cfc00 fffacd add8e6 f08080 fafad2

Nome palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen steelblue tan thistle tomato turquoise violet wheat

Cdigo eee8aa 98fb98 afeeee db7093 ffefd5 ffdab9 cd853f ffc0cb dda0dd b0e0e6 800080 ff0000 bc8f8f 4169e1 8b4513 fa8072 f4a460 2e8b57 fff5ee a0522d 87ceeb 6a5acd 708090 fffafa 00ff7f 4682b4 d2b48c d8bfd8 ff6347 40e0d0 ee82ee f5deb3

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 17 de 19

Nome lightgray lightgreen lightpink lightsalmon

Cdigo d3d3d3 90ee90 ffb6c1 ffa07a

Nome white whitesmoke yellow yellowgreen

Cdigo ffffff f5f5f5 ffff00 9acd32

www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 18 de 19

6. Anexo 2 - Cdigos Javascript mais usuais

JavaScript uma linguagem de criao de Scripts4 desenvolvida pela Netscape Communications e pela Sun Microsystems, que ligeiramente relacionada Java, uma linguagem de programao. Embora no seja propriamente uma linguagem orientada a objetos, possibilita incluir funes e aplicaes on-line bsicas em pginas Web. Inicialmente, era conhecida como LiveScript, quando lanada pela Netscape, mas logo optou-se por alterar o nome em funo da maior divulgao da linguagem Java.

6.1. Comandos Javascript

Normamente so includos como Hyperlinks, produzem mais interatividade da pgina com o usurio. (comando <a hef=javascript:window.open()>texto ou imagem</a>

6.1.1.

Para fechar a janela do navegador

<A Href= "javascript:window.close()>Fechar esta janela</a>

6.1.2.

Para abrir uma nova janela do browser, carregando o documento novo.htm:

<A Href= "javascript:window.open(http://www.dominio.com.br/novo.htm, Nome_da_Janela, menubar=yes, status=yes, scrollbars=yes> Clique Aqui</a>

Menubar Status Scrollbars

YES/NO: mostra/oculta barra de menus do navegador YES/NO: mostra/oculta barra de status do navegador YES/NO: mostra/oculta barra de rolagem do navegador

6.1.3.

Para Imprimir a pgina

<A Href= "javascript:window.print()>Imprimir esta pgina</a>

6.1.4.

Para criar um hyperlink que volte pgina anterior

<A Href= "javascript:history.go(-1)>Voltar Pgina Anterior</a>

6.1.5.

Para Incluir seu site na seo Favoritos do navegador:

<A Href= "javascript:window.external.AddFavorite('ENDEREO DO SEU SITE','NOME DO SEU SITE')">Inclua esta pgina entre seus Favoritos!</a>

Script um tipo de programa formado por um conjunto de instrues para uma aplicao ou programa utilitrio. Em geral, as instrues usam as regras e sintaxe da aplicao ou do utilitrio. Sua utilidade e funcionadade muito semelhante funo Macro existente em muitos programas comerciais, como o MSWord e o Corel Draw.
www.dozen.com.br/nakamura - Todos os direitos reservados.

Prof. Esp. Rodolfo Nakamura

66715686.doc

Pgina 19 de 19

Bibliografia
CASTRO, Giberto; CHAMON, Valria, Microsoft Press - Dicionrio de Informtica. Rio de Janeiro: Campus, 1998. RAMALHO, Jos A A. HTML Avanado. So Paulo: Makron Books, 1997. NAKAMURA, Rodolfo. E-Commerce na Internet Fcil de Entender . So Paulo: rica, 2001. SIEGEL. David. Criando Sites Arrasadores III. So Paulo: Quark, 1999. BLACK. Roger. Websites que Funcionam. So Paulo: Quark, 1997. MANZANO, Jos Augusto. Estudo Dirigido de Javascript. So Paulo: rica, 2003 ALVES, William. Estudo Dirigido de DreamWeaver 4. So Paulo: rica, 2003

www.dozen.com.br/nakamura - Todos os direitos reservados.