Aptl HTML

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico
SUMRIO I. II. III. IV. V. VI. VII. VIII. IX. X. XI. XII. XIII. XIV. XV. XVI. XVII. XVIII. XIX. XX. XXI. XXII. XXIII. XXIV. XXV. XXVI. XXVII. XXVIII. XXIX. XXX. XXXI. XXXII. XXXIII. XXXIV. XXXV. XXXVI. XXXVII. XXXVIII. XXXIX. XL. XLI. XLII. XLIII. XLIV. HTML (INTRODUO) CRIANDO UMA PASTA WEB CRIANDO SUA PRIMEIRA PGINA EXEMPLO COMPLETO VISUALIZANDO SUA PGINA ABRINDO O CDIGO FONTE FORMATAR O TEXTO CABEALHOS EXEMPLOS DE CORES PARGRAFOS LISTAS ORDENADAS IMAGENS HYPERLINK E-MAIL DOWNLOAD LINK TABELAS FORMULRIOS ACTION METHOD CAMPO INPUT CAMPO HIDDEN CAMPO PASSWORD BOTES RDIO BOTES RESET BOTES SUBMIT NAME VALUE SELECT OPTION FORMULRIOS PARA ENVIO DE MENSAGENS FORMULRIO JAVASCRIPT PARA ENVIO DE MENSAGENS FRAMES JAVASCRIPT ASP EXEMPLO ASP EVITANDO ERROS ENVIANDO SUAS PGINAS PARA O SERVIDOR TORNANDO SUA PGINA CONHECIDA COMO ATRAIR VISITANTES AT SUA PGINA META CONSIDERAES FINAIS ENDEREOS TERMO DE USO
HTML INTRODUO A Linguagem HTML (Hypertext Markup Language Linguagem de marcao de hipertexto) usada para criar as pginas divulgadas na World Wide Web, o servio, mas popular na Internet. Com a linguagem HTML so criados os hyperlinks que permitem navegar pela Web. Para isso utiliza marcaes, chamadas tags, no ponto da pgina em que feito um hyperlink com outra pgina. Para criar uma pgina HTML, usaremos o Bloco de notas, um editor de texto simples que acompanha o Windows e um navegador (Browser) Netscape Communicator e Microsoft Internet Explorer. Isto tudo que voc precisa. Existem algumas diferenas na exibio das pginas entre os navegadores. Neste caso bom testar suas pginas em ambos navegadores. Criando uma pasta Web Antes de comear a criar suas pginas crie uma pasta para armazenar todas pginas, figuras e arquivos que usar. Abra o Windows Explorer (Iniciar/ Programas/ Windows Explorer).
Com o Windows Explorer aberto clique em Arquivo/ Novo/ Pasta.
D um nome sugestivo a esta pasta e coloque nesta pasta todas imagens gif e jpg que gostaria que sua pgina tivesse.
Criando sua primeira pgina HTML 1 Abra o Bloco de notas. Clique em Editar e marque o item Mudana Automtica de linha.
2 Digite a seguinte tag: <HTML> Toda pgina HTML deve iniciar com essa tag. 3 Digite: <HEAD> O cabealho de sua pgina deve ser delimitado pelas tags <HEAD> e </HEAD> 4 Digite: <TITLE> Onde deve ficar o ttulo da pgina Feche com a tag</TITLE> Exemplo: <TITLE>Minha primeira pgina HTML</TITLE> 5 Feche agora o cabealho de sua pgina digitando </HEAD> 6 Digite: <BODY>
Para abrir o corpo da pgina. Voc pode deixar uma cor para o corpo da pgina. Digitando Ex.: <BODY BGCOLOR=CCFFFF> Voc pode inserir um ttulo em sua pgina Exemplo: <H1>Essa minha primeira pgina HTML</H1> O tamanho vai de <H1> tamanho maior at <H6> tamanho menor. 7 Para inserir texto digite: <P> texto aqui... Exemplo: <P>Pginas HTML podem ser criadas em qualquer editor de texto </P> 8 Vamos fechar o corpo da pgina digitando: </BODY> 9 Fechando a pgina digitando a tag </HTML> Exemplo completo <HTML> <HEAD> <TITLE>Minha primeira pgina HTML</TITLE> </HEAD> <BODY> <H1>Essa minha primeira pgina HTML</H1> <P>Pginas HTML podem ser criadas em qualquer editor de texto.</P> </BODY> </HTML> 10 Salve sua pgina HTML clicando em Arquivo/Salvar. D um nome para a pgina que acabou de criar escolha pasta (Salvar em:) Salve com extenso .htm ou .html.
Exemplo: nome.htm ou nome.html Para evitar que seu editor de texto coloque .txt como extenso do documento digite aspas envolvendo o nome do arquivo "nome.html". Visualizando sua pgina Abra seu navegador padro Internet Explorer (IE) ou Netscape Communicator. Clique em Arquivo/ Abrir/ Procurar
Em Examinar escolha a pasta que criou para armazenar suas pgina clique na pgina que criou e clique em Abrir.
No Netscape clique em File/ Open Page/ Choose File.
Em Examinar escolha a pasta e a pgina e clique em Abrir.
A pgina sendo visualizada pelo navegador Microsoft Internet Explorer
Exemplo da explicao entre Exemplos/Texto.htm Abrindo o cdigo fonte
os
passos
ao
10
na
pasta
Exemplos.
Voc pode abrir o cdigo fonte de uma pgina e visualizar as tags de sua pgina. Para isso a pgina precisa estar carregada em seu navegador (browser). No Internet Explorer clique em Exibir/Cdigo fonte. O cdigo fonte ser aberto no Bloco de notas.
Se o arquivo html for muito grande, ser solicitado que voc utilize o WordPad para abrir o arquivo. Formatar o Texto Uma pgina HTML reconhecida pelas seguintes tags <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Texto, imagem, formulrios devem ficar entre as tags <BODY> e </BODY> Cabealhos A tag <H1> permite especificar at seis nveis de cabealhos. Ex. <H1>texto aqui</H1> <H2>texto aqui</H2> <H3>texto aqui</H3> <H4>texto aqui</H4> <H5>texto aqui</H5> <H6>texto aqui</H6> <P> Inseri texto comum, com espao de uma linha para o texto a seguir. Ex: <P ALIGN=CENTER>texto aqui</P> Texto alinhado ao centro. Formatos para alinhar o texto: RIGHT, CENTER e LEFT.
<FONT>Permite inserir o nome da fonte, tamanho e cor. Ex.: <FONT FACE=ARIAL COLOR=BLUE SIZE=2> FACE nome da fonte. Outros nomes COURIER NEW, VERDANA, IMPACT, etc. COLOR cor da fonte Exemplos de cores BLACK BLUE BEIGE GOLD GRAY GREEN NAVY ORANGE PINK RED TEAL YELLOW WRITE SILVER CYAN Preto Azul Bege Ouro Cinza Verde Azul marinho Laranja Rosa Vermelho Verde azulado Amarelo Branco Prata Azul claro
SIZE tamanho, que vai de tamanho menor 1 at tamanho maior 7. <B> Texto em negrito Ex.: <B>texto aqui</B> <I> Texto em Itlico Ex.: <I>texto aqui</I> <U> Texto sublinhado Ex.: <U>texto aqui</U> <SUP> Texto sobrescrito Ex.: <SUP>texto aqui</SUP> <SUB> Texto subscrito Ex.: <SUB>texto aqui</SUB> <TT>Texto mono-espao Ex.: <TT>texto aqui</TT> Pargrafos
Utilizando determinadas tags voc pode recuar texto, marcar itens, numerar itens, justificar, centralizar pargrafos, etc. <BLOCKQUOTE> Deixa o pargrafo um pouco recuado Ex.: <BLOCKQUOTE>texto aqui</BLOCKQUOTE> <PRE>Deixa o texto igual ao que voc escreveu. Ex.:<PRE> te x to a qu i</PRE> Listas <OL>Lista ordenada Ex.: <OL> <LI>JavaScript <LI>VBScript <LI>ActiveX </<OL> Resultado 1. JavaScript 2. VBScript 3. ActiveX <UL>Lista no ordenada Ex.: <UL> <LI>ICQ <LI>AutoCad <LI>SQL </UL> Resultado ICQ AutoCad SQL UL pode assumir os seguintes formatos: <UL TYPE=CIRCLE> <UL TYPE=SQUARE> <UL TYPE=DISC> <BR> pula uma linha <HR> desenha uma linha  linha de comentrio.
10
<CENTER> Centraliza determinado texto Ex.:<CENTER>Apostilas para download</CENTER> Pode ser usa para alinhar texto, imagens, tabelas, etc. Imagens GIF a melhor opo de formato de imagens para seu utilizado em pginas Web. O formato GIF compacto e permite criar pequenas animaes animado GIF. No ilustre suas pginas Web com imagens no formato (Bitmap). O formato Bitmap cria imagens com excelente qualidade mais devido ao tamanho muito demoradas para carregar em uma pgina Web. Voc pode criar suas imagens GIF utilizando programas como o MS-Paint (Windows 98) ou MS-Photo Editor (Office 9x/2000) que permite transparncia.
Para inserir uma imagem no corpo da pgina digite <IMG SRC=imagem.gif> IMG tag para imagem. SRC o caminho (pasta) ou mesmo se a imagem estiver na mesma pasta somente o nome da imagem e sua extenso que pode ser GIF ou JPG. Ao trabalhar com imagem e texto juntos voc deve definir como a imagem ser apresentada em relao ao texto.
11
Exemplo:
<FONT FACE="ARIAL" SIZE=2> Muitos querem saber quem o dono da Internet ou quem administra os milhares de computadores e linhas que a fazem funcionar.<IMG SRC="Imagens/micro.gif" ALT="Imagem de um Computador" ALIGN="right"> Vamos voltar um pouco no tempo. Nos anos 60, quando a Guerra Fria pairava no ar, grandes computadores espalhados pelos Estados Unidos armazenavam informaes militares estratgicas... </FONT> ALT um texto ser exibido quando se passa o mouse sobre a imagem. Tambm pode ser usado para indicar do que se trata a imagem quando a pgina est carregando. ALIGN= alinhamento. Alimento da imagem direita do texto Outros alinhamentos possveis CENTER, LEFT. Voc pode especificar altura e largura da imagem caso ocorra uma necessidade de diminuir o tamanho da imagem. Ex.: <IMG SRC="Imagens/micro.gif" ALT="Imagem de um Computador" ALIGN="right"
WIDTH=100 HEIGHT=100>
12
Note que SRC o local (pasta Imagens/) onde se encontra a imagem micro.gif. Voc pode apontar para uma figura de uma pgina Web. Ex.: <IMG SRC= http://www.ivc.locaweb.com.br/images/apostilas.gif> Isso reduz a quantidade de imagens em sua pasta no servidor. No abuse da quantidade de imagens em uma nica pgina, o visitante acaba desistindo de carregar uma pgina que est demorando aparecer. Coloque no mximo 30 KB de imagem por pgina. Com a maioria dos modem de 33.600 KBps sua pgina aparece em segundos. Exemplo de como inserir imagens <HTML> <HEAD> <TITLE>Trabalhando com Imagens</TITLE> </HEAD> <BODY> <H1>A Internet</H1> <FONT FACE="ARIAL" SIZE=2> Muitos querem saber quem o dono da Internet ou quem administra os milhares de computadores e linhas que a fazem funcionar.<IMG SRC="Imagens/micro.gif" ALT="Imagem de um Computador" ALIGN="right"> Vamos voltar um pouco no tempo. Nos anos 60, quando a Guerra Fria pairava no ar, grandes computadores. Espalhados pelos Estados Unidos armazenavam informaes militares estratgicas... </FONT> </BODY> </HTML> Hyperlink Para inserir um hyperlink que aponte para outra pgina digitamos <A HREF=outropagina.html>Outro Pgina</A> A de ncora HREF local referente Outro Pgina texto visvel s vezes sublinhado. Passando o mouse sobre o texto o ponteiro de mouse se torna uma mozinha apontando para clicar. </A> fecha o hyperlink O exemplo de hyperlink para uma pgina da mesma pasta. Ex.: <A HREF=apostilas.html>Apostilas</A> Um exemplo de hyperlink para uma pgina Web. Ex.: <A HREF= http://www.ivc.locaweb.com.br/apostilas.htm>Apostilas</A>
13
Voc pode abrir uma nova janela do navegador usando um hyperlink Ex.: <A HREF=apostilas.html TARGET=_NEW>Apostilas</A> TARGET=_NEW abre o endereo em uma nova janela TARGET=_TOP abre o endereo na mesma janela _NEW abre o endereo em uma nova janela do navegador. Voc pode incluir uma imagem como hyperlink. Ex.:<A HREF=apostilas.html><IMG SRC=apostilas.gif BORDER=0></A> A HREF ncora e local IMG SRC imagem e local BORDER=0 borda com valor zero (sem borda). E- mail Para algum envie um e-mail para sua conta de e-mail basta digitar a seguinte tag <A HREF=MAILTO:seuemail@provedor.com.br>Dvidas, Crticas e sugestes envie um e-mail</A> A HREF ncora e local MAILTO e- mail para sua conta de e- mail. provedor.com.br local onde voc mantm seus e- mails Dvidas, Crticas e sugestes... texto que ser exibido como hyperlink. Voc pode incluir um assunto Subject para o e-mail. Ex.: <A HREF=MAILTO:seuemail@provedor.com.br?SUBJECT=JavaScript>JavaScript</A> Download fcil fazer com que um visitante baixe um arquivo em sua pgina. GIF, ASP, JPG, HTML, SWF, TXT so formatos de arquivos que so exibidos no prprio navegador. EXE, ZIP, ARJ, entre outros so arquivos que podem ser baixados para o computador do visitante. Provavelmente voc clicou em html.zip para baixar esta apostilas Basta escrever <A HREF=html.zip>HTML</A> A HREF ncora e local html.zip arquivo e extenso HTML texto que ser exibido como hyperlink para baixar arquivo. Link Vamos supor que voc esteja criando uma pgina com um ndice e quer que os visitantes achem rapidamente o assunto relacionado a um tpico que procura em apenas um clique. Ento crie Links que achem determinado texto na pgina
14
Ex.: <A HREF="#link">Apostila JavaScript</A> <BR> <A HREF="#link2">Apostila VBSCript</A> <BR> Para testar insira neste espao algumas tags <BR> (quebra de linha) e <HR> um trao que cobre uma linha <A NAME="link">Apostila JavaScript</A> <BR> <A NAME="link2">Apostila VBScript</A> Ao clicar em <A HREF=#link>Apostilas JavaScript</a> O visitante ser levado at o texto sobre JavaScript que voc insere aps a linha <A NAME=link>Apostila JavaScript</A> Tabelas Com uma tabela voc pode fazer algo simples como uma tabela de preo de produtos, dividir o texto lado- a- lado com as figuras, criar uma pgina utilizando tabelas para compor o visual do site. O limite sua imaginao.
Para inicial uma tabela digite o seguinte
15
<TABLE BORDER CELLSPACING=2 CELLPADDING=2 COLS=3 WIDTH="100%" BGCOLOR="#FFFF99" > TABLE de tabela em ingls BORDER de borda se voc colocar BORDER=0 sua tabela no ter bordas. CELLSPACING espao entre as clulas CELLPADDING espao entre o texto e as bordas da clula mesmo que BORDER=0 COLLS quantidade de colunas neste caso 3 para Apostila, Descrio e Preo WIDTH largura BGCOLOR cor de fundo <TR> TR (Table Row) so as linhas <TD>Apostila</TD> TD (Table Data) so as colunas <TD>Descrio</TD> <TD>Preo</TD> </TR> <TR> <TD>JavaScript 1.2</TD> <TD>Linguagem para Web</TD> <TD>R$ 30,00 reais</td> </TR> <TR> <TD>VBScript</TD> <TD>Linguagem para Web</TD> <TD>R$ 30,00 reais</TD> </TR> <TR> <TD>Word 2000</TD> <TD>Processdor Word ver. 2000</TD> <TD>R$ 45,00 reais</TD> </TR> <TR> <TD>Linux</TD> <TD>Aprenda sobre Linux</TD> <TD>R$ 25,00 reais</TD> </TR> </TABLE> Exemplo completo <TABLE BORDER CELLSPACING=2 BGCOLOR="#FFFF99" > <TR> <TD>Apostila</TD> <TD>Descrio</TD> <TD>Preo</TD> </TR> CELLPADDING=2 COLS=3 WIDTH="100%"
16
<TR> <TD>JavaScript 1.2</TD> <TD>Linguagem para Web</TD> <TD>R$ 30,00 reais</td> </TR> <TR> <TD>VBSCript</TD> <TD>Linguagem para Web</TD> <TD>R$ 30,00 reais</TD> </TR> <TR> <TD>Word 2000</TD> <TD>Processdor Word ver. 2000</TD> <TD>R$ 45,00 reais</TD> </TR> <TR> <TD>Linux</TD> <TD>Aprenda sobre Linux</TD> <TD>R$ 25,00 reais</TD> </TR> </TABLE> Resultado da tabela
17
Voc pode especificar ainda cor de clulas e cor de todo funda da tabela Ex.: <TABLE BORDER CELLSPACING=2 CELLPADDING=2 COLS=3 WIDTH="100%" BGCOLOR="#336699" > <TR BGCOLOR=#CCFFFF> <TD BGCOLOR=NAVY> Uma tabela no serve somente para inserir texto, voc pode inserir hyperlink, figuras, botes que veremos a seguir em Formulrio. Formulrio Qualquer um que mantm uma Home Page na Internet gostaria de saber se o que o visitante achou da pgina. Isso pode ser feito por e-mail, mas um formulrio pode ir alm. Um formulrio pode servir de pesquisa com botes de rdio, caixas de texto com valor pr-formatado. ACTION O atributo Action especifica o local de envio do contedo do formulrio Exemplo: <FORM METHOD=get ACTION="minhapagina.htm"> METHOD O atributo Method especifica as variaes do protocolo utilizado para o envio do contedo do formulrio. Get (padro) ou Post. Exemplo: <FORM METHOD=get ACTION="minhapagina.htm"> CAMPO INPUT O campo Input utilizado para entrada de dados em formulrio de preenchimento da HTML. Type determina o tipo do campo. Exemplo: <INPUT TYPE=TEXT> CAMPO HIDDEN O campo Hidden (oculto) no apresentado ao usurio, mas seu contedo ser enviado junto com o formulrio. Exemplo: <INPUT TYPE=HIDDEN VALUE=seuemail@provedor.com.br> CAMPO PASSWORD O campo Password (senha) substitui os caracteres digitados por asteriscos. Exemplo: <INPUT TYPE=PASSWORD VALUE=Senha> BOTES RDIO
18
Os botes de rdio podem assumir um nico valor dentre um conjunto de alternativas. Todos botes de um grupo devem ter nomes iguais. Exemplo: <INPUT TYPE="RADIO" VALUE="V1" CHECKED NAME="R1"> JAVASCRIPT <INPUT TYPE="RADIO" NAME="R1" VALUE="V2"> VBSCRIPT BOTES RESET Quando se clica em um boto Reset todos os campos do formulrio retornam a seus valores iniciais. Exemplo: <INPUT TYPE="RESET" VALUE="Apagar"> BOTES SUBMIT Quando se clica em um boto Submit todos os dados preenchidos pelo usurio sero enviados. Exemplo: <INPUT TYPE="SUBMIT" VALUE="Enviar"> NAME O atributo Name fornece um string de caracteres utilizados para nomear o campo quando ocorrer o envio dos dados contidos no formulrio. Exemplo: <INPUT TUPE=TEXT NAME="assunto"> VALUE Value um string de caracteres ou nmero utilizado para iniciar campos Text ou Hidden. Exemplo: <INPUT TYPE="HIDDEN" NAME="SUBJECT" VALUE="Suporte"> SELECT O elemento Select utilizado em menus de opo e mltipla. Representado na forma de menu pop-up ou drop-down. Exemplo: Amostras <SELECT NAME="destino"> <OPTION VALUE="access.zip">Access 97 <OPTION VALUE="flash.zip">Flash 4 <OPTION VALUE="frontp.zip">FrontPage2000 <OPTION VALUE="outlook2000.zip">Outlook 2000 <OPTION VALUE="vb.zip">Visual Basic 6 </SELECT> OPTION O elemento Option pode ocorrer apenas no mbito de elementos Select, representando uma opo possvel. Exemplo: <SELECT NAME="destino">
19
<OPTION VALUE="asp.asp">ASP <OPTION VALUE="jscript.js">Javascript <OPTION VALUE="html.htm">Html </SELECT> FORMULRIOS PARA ENVIO DE MENSAGENS Se voc quer coletar dados dos visitantes em sua pgina usando formulrios. Os dados preenchidos sero enviados diretamente para sua conta de e-mail. O problema da maioria dos formulrios est na hora de submeter os dados. Nem usando JavaScript as coisas saem como esperado, prepare- se para receber dados com este formato Oi+como+vai+tudo+bem?+Meu+nome+. Se voc no quer que isso acontea deixa este trabalho para os formulrios profissionais (FormMail e aspformMail) que voc recebe junto com esta apostila. Se preferir voc pode usar os GuestBooks( livro de visitantes). Digite GuestBooks no espao reservado para palavra a ser pesquisada em um sistema de busca. FORMULRIO JAVASCRIPT PARA ENVIO DE MENSAGENS Voc pode testar um sistema de envio de formulrios para sua conta de correio usando JavaScript . Abra a pasta Exemplos/ JavaScript. Crie e modifique a primeira pgina onde o visitante preenche os dados. Pasta Exemplos/JavaScript/email.txt Crie e modifique a Segunda pgina onde informado ao visitante que sua pgina foi enviada com sucesso. Pasta Exemplos/JavaScript/email02.txt Frames Uns adoram outros detestam. Abrir uma pgina que tenha um ndice de um lado e seu contedo do outro maravilhoso. Porm se os quadros no forem bem planejados toda a estrutura da pgina pode ser comprometida. Uma pgina com frames na verdade abre duas ou mais pginas em uma s janela do navegador. Para criar uma pgina eficiente usando os frames faa dessa forma 1 criar duas ou trs pginas que o frame usar 2 geralmente no quadro maior onde as pginas abrem 3 para ter uma pgina usando 02 frames voc precisa de trs pginas. Veja o exemplo abaixo de Frame 1 Frame
20
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF="Efeitos.html" TARGET="gratis">Efeitos</A><BR> <A HREF="Tabela.html" TARGET="gratis">Tabela</A><BR> <A HREF="Texto.html" TARGET="gratis">Texto</A><BR> <A HREF="Imagens.html" TARGET="gratis">Imagens</A> </BODY> </HTML> 2 Frame <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <BR> <P ALIGN="CENTER">Aguardando</P> </BODY> </HTML> A pgina Frame j pronta <HTML> <HEAD> <TITLE>Trabalhando com Frames</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="Frame1.html" NAME="apostilas"> <FRAME SRC="Frame2.html" NAME="gratis"> </FRAMESET> </HTML> Entenda como foi criado o frame acima <HTML> <HEAD> <TITLE>Trabalhando com Frames</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> Divide a pgina em duas colunas (COLS). Poderia ser em duas linhas (ROWS) Uma das colunas ocupar 20% e a outro 80%.
21
<FRAME SRC="Frame1.html" NAME="apostilas"> primeira pgina com 20%, abre a pgina Frame1.html, atributo (Name) apostilas. <FRAME SRC="Frame2.html" NAME="gratis"> O segundo quadro com 80% abre a pgina Frame2.html, atributo(Name) gratis </FRAMESET> Fechando os quadros </HTML> Os Hyperlinks da primeira pgina abrem no segundo quadro de NAME=gratis <A HREF="Efeitos.html" TARGET="gratis">Efeitos</A><BR> <A HREF="Tabela.html" TARGET="gratis">Tabela</A><BR> <A HREF="Texto.html" TARGET="gratis">Texto</A><BR> <A HREF="Imagens.html" TARGET="gratis">Imagens</A> Dentro de uma tag <FRAME> voc pode utilizar algumas formataes. <FRAME SRC=Fram1.html NAME=apostilas NORESIZE> NORESIZE no permite modificar o quadro SCROLLING barra de rolagem. YES (sim), NO (no), AUTO (automtico) Ex.:SCROLLING=NO MARGINWIDTH cria uma margem horizontal Ex.: MARGINWIDTH=50 MARGINHEIGTH cria uma margem vertical Ex.: MARGINHEIGTH=50 JavaScript Desenvolvido pela Netscape Communications Corporation JavaScript foi a primeira linguagem de script para pginas Web. Popular, sofisticada, que pode ser escrita da mesma forma que as tags HTML, usando o Bloco de notas ou qualquer outro editor de texto.
22
No confunda Java com JavaScript. Apesar de nomes parecidos e algumas semelhanas Java uma linguagem para criar verdadeiros programas compilados (Ex. WordPerfect) enquanto JavaScript no contm compilador e inserido diretamente em um documento HTML. Todo documento HTML deve conter as Tags <HTML> <HEAD> <TITLE>Minha pgina</TITLE> </HEAD> <BODY> Voc pode inserir os scripts entre as tags <HEAD></HEAD> e <BODY></BODY> Digite aps a Tag <BODY> <SCRIPT LANGUAGEM=JavaScript> Todo script comea com a instruo <SCRIPT> O Browser reconhece este script como sendo JavaScript atravs da tag LANGUAGEM=JavaScript Digite: document.write(document.lastModified); Veja a linha abaixo document.write Esta linha escreve no documento
23
document.lasModified ltima data em que o documento foi modificado Feche o script com a tag </SCRIPT> Exemplo complete <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <H3>Mostra a ltima data que o modificado</H3> <SCRIPT LANGUAGE="JavaScript"> document.write(document.lastModified); </SCRIPT> </BODY> </HTML>
documento
foi
No script acima o Browser mostra a ltima data, horrio em que o documento HTML foi modificado. Na internet voc encontra alguns scripts teis e outros nem tanto. Recebo vrios e-mails me pedindo um script que contenha um prompt e senha de acesso as pginas. Se voc quer fechar determinada rea de seu site a alguns visitantes e no sabe como fazer isso crie uma pgina de nome Senha.html. Esta pgina abrir um prompt para digitar uma senha e pressionar Ok ou Cancel.
24
Se a senha estiver correta o usurio ser levado at a pgina para clientes.
Caso contrrio o visitante ser enviado at uma pgina default (rea para visitantes).
25
Para criar a pgina Senha.html digite o seguinte script aps a Tag <BODY> <SCRIPT LANGUAGEM=JavaScript> apostilas = window.prompt(Digite sua senha de acesso e clique em OK); switch (apostilas) { case gratuito : window.location=Aceito.html; break; default : window.location=Negado.html; } </SCRIPT> Exemplo completado da pgina Senha.html <HTML> <HEAD><TITLE>Senha</TITLE></HEAD> <BODY> <SCRIPT LANGUAGEM=JavaScript> apostilas = window.prompt(Digite sua senha de acesso e clique em OK); switch (apostilas) { case gratuito : window.location=Aceito.html; break; default : window.location=Negado.html; } </SCRIPT> </BODY> </HTML> O script acima contm uma varivel apostilas Funes window.prompt e window.location Instrues switch e case Neste caso a senha palavra gratuito. Se palavra digitada no, prompt gratuito o visitante ser levado para pgina Aceito.html
26
Caso contrrio o visitante ser guiado at um pgina default Negado.html Todo visitante cadastrado ter a mesma senha? Resposta: Sim e no Voc pode criar vrios case e tambm vrios window.location Pode mudar a senha de vez em quando. Seu script da pgina Senha.html no ser visto, isso em parte. Mesmo que o usurio queira ver seu script olhando o script em Exibir/ Cdigo fonte (Internet Explorer) voc pode se defender modificando a pgina Senha.html Modifique a seguinte linha. <SCRIPT LANGUAGEM=JavaScript SRC=senha.js> </SCRIPT> Selecione todo o script apostilas = window.prompt(Digite sua senha de acesso e clique em OK); switch (apostilas) { case gratuito : window.location=Aceito.html; break; default : window.location=Negado.html; } Recorte e cole em um novo documento. Salve esse documento com o nome de senha e extenso .js
Veja como deve ficar o cdigo da pgina Senha.html <HTML> <HEAD><TITLE>Senha</TITLE></HEAD> <BODY> <SCRIPT LANGUAGEM=JavaScript SRC=senha.js> </SCRIPT> </BODY> </HTML> O visitante precisa estar usando um Browser recente, verses atuais.
27

Aptl HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aptl HTML

Enviado por

Direitos autorais:

Formatos disponíveis

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

Com o Windows Explorer aberto clique em Arquivo/ Novo/ Pasta.

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

No Netscape clique em File/ Open Page/ Choose File.

Em Examinar escolha a pasta e a pgina e clique em Abrir.

A pgina sendo visualizada pelo navegador Microsoft Internet Explorer

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

Exemplo da explicao entre Exemplos/Texto.htm Abrindo o cdigo fonte

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

Para inicial uma tabela digite o seguinte

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

Se a senha estiver correta o usurio ser levado at a pgina para clientes.

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

LINGUAGEM PRTICA DE PROGRAMAO Dependncia Apostila HTML - Bsico

Você também pode gostar