Escolar Documentos
Profissional Documentos
Cultura Documentos
Livro Delphi Web Capitulo 5
Livro Delphi Web Capitulo 5
Captulo 5
HTML
A linguagem HTML (HyperText Markup Language) padro para publicao de documentos na Internet. Todos os browsers (navegadores como, Netscape, Internet Explorer, Mosaic, NeoPlanet, entre outros) possuem interpretao de comandos HTML. Existem diversas verses para o padro HTML, neste livro trabalharemos com a verso 4.
Estrutura Bsica
Um documento HTML possui basicamente dois conjuntos de informaes: Contedo Informao a ser visualizada; Tags Comandos a serem interpretados pelo browser. Exemplo: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> Corpo do texto </BODY> </HTML>
29
30 Delphi 7 Internet e Banco de Dados A figura 5.1 demonstra o resultado do nosso primeiro exemplo.
TAGS Bsicos
<HTML> Estrutura HTML Para definir o incio e o fim de um documento HTML, utilizamos esta expresso: <HTML> para definir o incio, e </HTML> para definir o fim do documento. Repare na TAG que define o fim do documento </HTML>, ela possui uma barra (/) antes do comando HTML, e isso define o fechamento do documento. <HEAD> Cabealho do Documento Para definir o cabealho do documento, utilizamos a TAG <HEAD>. <HEAD> para definir o incio do cabealho, e </HEAD> para definir o fim do cabealho.
<TITLE> Ttulo do Documento Para definir o ttulo do documento (aparece na barra de ttulo do browser) , utilizamos a TAG <TITLE>. <TITLE> para definir o incio do cabealho, e </TITLE> para definir o fim do cabealho.
Exemplo:
<TITLE> Facunte On-Line </TITLE>
HTML 31 <BODY> Corpo A TAG <BODY> define o corpo do documento, ou seja, a localizao do contedo do documento. Esta TAG possui alguns atributos, como mostra a Tabela 5.1. ATRIBUTO DESCRIO
BackGround
BGColor Link Alink Vlink Text Exerccio 1:
Exibe uma imagem de fundo para a pgina HTML. Define a cor de fundo do documento Define a cor do Link Define a cor dos Links ativos Define a cor dos Links j visitados Define a cor do texto Tabela 5.1 Atributos da TAG <BODY>
Crie um novo arquivo com o nome exercicio1.html e siga o exemplo: <html> <head> <title>Mtodo Facunte</title> </head> <body bgcolor="#FFFFFF" background="imagens/logo.jpeg"> </body> </html> Repare que estamos utilizando uma figura como fundo do nosso documento HTML (logo.gif), localizado no subdiretrio IMAGENS. Faa o exerccio com outros tipos de imagens, do tipo GIF ou JPEG. A figura 5.2 ilustra o resultado do nosso exerccio. <H> ENFATIZANDO TEXTO Para enfatizar um determinado texto, utilizamos a TAG <H>, a qual chamamos de Header. Esta TAG possui seis tipos de Headers numerados de 1 a 6 <H1>, <H2>...<H6>
Figura 5.2 Exerccio 1 Exerccio 2: <HTML> <HEAD> <TITLE>Ttulo </HEAD> <BODY> <H1> Testando <H2> Testando <H3> Testando <H4> Testando <H5> Testando <H6> Testando </BODY> </HTML>
do Documento</TITLE>
H1 H2 H3 H4 H5 H6
Faa o exerccio anterior, e fique vontade para alterar a posio, bem como o texto. Grave o arquivo como exercicio2.html. Sugiro que utilizem os recursos at aqui apresentados. A figura 5.3 ilustra nosso exemplo.
HTML 33 <P> Pargrafos As TAGS <P> e </P> servem para iniciar e finalizar um pargrafo. A TAG <P> possui o atributo <ALIGN> para alinhar o texto, conforme a tabela 5.2.
VALOR
DEFINIO
Alinha o pargrafo esquerda Alinha o pargrafo direita Alinha o pargrafo no centro Justifica o pargrafo (alguns browsers no aceitam este valor) Tabela 5.2 Vvalores do atributo ALIGN
Com base no exemplo que segue, faa o exerccio 3 utilizando os recursos at aqui apresentados, criando quatro pargrafos diferentes com textos de livre expresso. Grave o arquivo como exercicio3.html A figura 5.4 ilustra nosso exemplo. Exerccio 3: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> <P>Pargrafo sem a utilizao do atributo ALIGN</P> <P ALIGN=CENTER>Pargrafo com atributo ALIGN=CENTER</P> <P ALIGN=RIGHT>Pargrafo com atributo ALIGN=RIGHT</P> <P ALIGN=LEFT>Pargrafo com atributo ALIGN=LEFT</P> <P ALIGN=JUSTIFY>Pargrafo com atributo ALIGN=JUSTIFY. Para isso estamos utilizando um pargrafo mais longo para ver o efeito de sua utilizao.</P> </BODY> </HTML> <BR> QUEBRA DE LINHA Para definir uma quebra de linha necessrio a utilizao da TAG <BR>. Pois ao contrrio do que parece, o browser no trata os espaos em branco criados atravs da tecla <ENTER>. Veja o exemplo a seguir onde utilizamos dois blocos, sendo o primeiro sem a TAG de quebra de linha, e o segundo utilizando a TAG <BR>.
Figura 5.4 exerccio 3 (tag <P>) Exerccio 4: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> <P>Pargrafo sem a utilizao da TAG (BR) Segunda linha. Terceira Linha.</P> <P>Pargrafo com a utilizao da TAG (BR) Segunda linha.<BR> Terceira Linha.</P> </BODY> </HTML>
<BR>
Com base no exemplo, faa o exerccio 4 criando dois pargrafos diferentes, sendo o primeiro sem a utilizao da tag <BR> e o segundo com a tag. No se esqueam de utilizar os recursos j apresentados. A figura 5.5 ilustra o nosso exemplo.
HTML 35
Formatando o Texto
Algumas TAGs definem a formatao do texto, como tlico e negrito. Utilizamos a TAG <I> para definir a formatao do texto em itlico e a TAG <B> para definir a formatao em negrito. Exemplos: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> <P><I>Texto em Itlico</I></P> <BR> <P><B>Texto em negrito</B></P><BR> <P><I><B>Texto em itlico e negrito</I></B></P><BR> <P>Podemos utilizar as <I>TAGs</I> de <B>formatacao</B> texto</P> </BODY> </HTML> A figura 5.6 ilustra o nosso exemplo.
em
qualquer
parte
do
Figura 5.6 Exemplo de Formatao Existem outras TAGs de formatao, como demonstra a tabela 5.3.
TAG
FORMATAO
<BIG> <SMALL>
TAG
FORMATAO
Para sublinhar o texto Para riscar o texto Para texto SUBescrito Para texto SOBrescrito
Tabela 5.3 TAGs de formatao
<HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> <P><BIG>Texto formatado na TAG ### BIG ### TEXTO GRANDE</BIG></P> <P><SMALL>Texto formatado na TAG ### SMALL ### TEXTO PEQUENO </SMALL></P> <P><U>Texto formatado na TAG ### U ### TEXTO SUBLINHADO</U></P> <P><STRIKE>Texto formatado na TAG ### STRIKE ### TEXTO RISCADO</STRIKE></P> <P>Texto formatado na TAG ### SUB ### Exemplo : H<SUB>2</SUB>O TEXTO SUBESCRITO</P> <P>Texto formatado na TAG ### SUP ### Exemplo : M<SUP>3</SUP> TEXTO SOBRESCRITO</P> </BODY> </HTML> Agora com as tags de formatao devidamente apresentadas, faa o exerccio 5 utilizando-as da melhor maneira possvel. Com um texto de livre pensamento, que poder torn-lo um poeta, quem sabe? A figura 5.7 ilustra o nosso exemplo.
Um recurso bastante utilizado por web-designers a alterao dos tipos de fontes, conforme a ocasio. Atravs da tag <FONT> alteramos as caractersticas de fontes de um determinado pargrafo ou at mesmo de todo o corpo do documento. Os seguintes atributos complementam a TAG <FONT>.
ATRIBUTO DESCRIO
Define a cor da Fonte Define o tipo da Fonte Define o tamanho da Fonte (de 1 a 7) O tamanho tambm poder ser definido por pixel size. Tabela 5.4 Atributos da TAG <FONT>
Exemplos: <html> <head> <title>Mtodo Facunte</title> </head> <body bgcolor="#FFFFFF"> <p> </p> <p><font size="2">Fonte Default</font></p> <p> <font face="Arial">Fonte Arial</font></p> <p><font face="Verdana">Fonte VERDANA</font></p> <p><font face="Trebuchet">Fonte TREBUCHET</font></p> </body> </html> A figura 5.8 ilustra o nosso exemplo. Como exerccio, proponho a criao de um documento HTML com a utilizao dos tipos de fontes conhecidas, bem como a formatao de pargrafos com diversos alinhamentos, e por fim variadas formataes de textos.
Figura 5.9 Exerccio 6 Veja a seguir o exemplo que utilizei para criar o exerccio 6. <html> <head> <title>Mtodo Facunte</title> </head> <body bgcolor="#FFFFFF"> <p align=CENTER><font face="Verdana" size="3"><B>Exerccio 6</B></font></p> <p align=RIGHT> <font face="Arial"><I>Fonte Arial com formatao itlica</I></font></p> <p align=LEFT> <font face="Verdana"><B><I>Fonte VERDANA com negrito e itlico</I></B></font></p>
HTML 39 <p align=CENTER><font face="Trebuchet" size="7">Fonte TREBUCHET com tamanho 7</font></p> </body> </html> <HR> Linhas Horizontais Para criar linhas horizontais utilizamos a TAG <HR>. Normalmente utilizamos esta TAG para separar blocos de texto, formulrios e imagens. Atributos da TAG <HR>
ATRIBUTO
DESCRIO
Width
Define o tamanho da linha em percentual % ou em pixel. Define a altura (espessura) da linha Define o alinhamento da linha (centro, esquerdo ou direito) Define a cor da linha Tabela 5.5 Atributos da TAG <HR>
Size Align
Color
No exemplo que segue, utilizamos trs exemplos da tag <HR>. Exemplo: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> <P>Este bloco fala sobre o descobrimento do BRASIL</P><BR> Em 22 de Abril de 1500 o Brasil...<BR> <HR WIDTH=50% SIZE=2 ALIGN=CENTER> <BR> <P>Este bloco fala sobre as cores da Bandeira Nacional</P><BR> As cores que compem a Bandeira Nacional so... <HR WIDTH=310 SIZE=5 ALIGN=LEFT><BR> <P>O que este bloco faz aqui? </P><BR> Deve estar demonstrando alguma coisa <HR WIDTH=70% SIZE=10 COLOR="BLACK" ALIGN=CENTER> </BODY> </HTML> A figura 5.10 ilustra o nosso exemplo. No exerccio 7 crie um documento HTML com quatro pargrafos (lembrem-se de utilizar todos os recursos apresentados), separados por linhas horizontais de variadas formas.
Figura 5.10 Exemplo de linhas horizontais <HR> Veja a figura 5.11 e o cdigo que segue como resoluo do exerccio.
HTML 41 <OL> Listas Ordenadas Para criar listas ordenadas, utilizamos a TAG <OL>. O mais importante atributo da TAG <OL> o Type. Atravs deste atributo podemos definir o esquema de numerao.
DESCRIO
TYPE = A
Utiliza letras maisculas no esquema de numerao. Utiliza letras minsculas no esquema de numerao. Utiliza algarismos romanos no esquema de numerao. Tabela 5.6 Valores para o atributo <TYPE>
TYPE = a
TYPE = I
Para cada item da lista necessria a utilizao da TAG <LI>. Veja o exemplo que segue. <HTML> <HEAD> <TITLE>Exemplo de Listas Ordenadas</TITLE> </HEAD> <BODY> <P> <OL> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item </OL> </P> <HR Width=50% SIZE=2 ALIGN=CENTER> <P> <OL TYPE="A"> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item </OL> </P> <HR Width=50% SIZE=2 ALIGN=CENTER> <P> <OL TYPE="a"> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item </OL> </P> <HR Width=50% SIZE=2 ALIGN=CENTER> <P> <OL TYPE="I"> <LI>Primeiro Item
42 Delphi 7 Internet e Banco de Dados <LI>Segundo Item <LI>Terceiro Item </OL> </P> </BODY> </HTML> A figura 5.12 ilustra o nosso exemplo:
Figura 5.12 Listas ordernadas No exerccio 8 crie um documento com 3 (trs) listas com diferentes numeraes, e em cada lista coloque um conjunto com 5 itens, utilizando os recursos apresentados at aqui. A figura 5.13 ilustra a resoluo deste exerccio.
HTML 43 <BODY><FONT Face=Verdana Size=2> <P> <OL> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item <LI>Quarto Item <LI>Quinto Item </OL> </P> <P> <OL TYPE="A"> <LI>Item 1 <LI>Item 2 <LI>Item 3 <LI>Item 4 <LI>Item 5 </OL> </P> <P> <OL TYPE="a"> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item <LI>Quarto Item <LI>Quinto Item </OL> </P> </FONT> </BODY> </HTML> <UL> Listas No Ordenadas As listas no ordenadas so parecidas com as listas ordenadas, com a diferena de no numerarem os itens. Para criar uma lista ordenada, utilizamos a TAG <UL>. Para indicar os itens da lista utilizamos a TAG <LI> (a mesma utilizada nas listas ordenadas), onde a mesma receber um marcador ao invs de uma numerao. Exemplo: <HTML> <HEAD><TITLE>Listas no ordenadas</TITLE></HEAD> <BODY> <P> <UL> <LI>Primeiro Item <LI>Segundo Item <LI>Terceiro Item </UL> </P> </BODY> </HTML> A figura 5.14 ilustra o nosso exemplo.
Figura 5.14 Listas no ordenadas Como a tag <UL> bem parecida com a <OL>, no faremos exerccio sobre a mesma.
Imagens
Para inserir imagens nos documentos HTML, utilizamos a TAG <IMG>. Os padres de imagens mais utilizados so GIF e JPG, pela qualidade de imagem e tamanho reduzido. Os seguintes atributos complementam a TAG <IMG>. ATRIBUTO DESCRIO
Alt
Exibe um texto enquanto a imagem no exibida Indica o nome do arquivo a ser exibido Alinhamento da imagem na pgina.
Alinhamento Vertical da imagem ALIGN(Vertical) TextTop/Middle/AbsMiddle/BaseLine/Bo ttom/AbsBottom Width Height Largura da imagem em pixels. Altura da imagem em pixels
HTML 45
ATRIBUTO
DESCRIO
HSPACE
Define o nmero de pixels que so deixados entre a imagem e o texto (Horizontal) Define o nmero de pixels que so deixados entre a imagem e o texto (Vertical) Define o tamanho Tabela 5.7 Atributos da TAG <FONT>
VSPACE
BORDER Exemplo:
<HTML> <HEAD> <TITLE>Trabalhando com Imagens</TITLE> </HEAD> <BODY> <IMG SRC="imagens/logo.jpg" WIDTH=140 HEIGHT=200 BORDER=5> <IMG SRC="imagens/logo.jpg" WIDTH=160 HEIGHT=240 NOBORDER> <IMG SRC="imagens/logo.jpg" NOBORDER> <IMG SRC="imagens/logo.jpg" NOBORDER Align=top> <IMG SRC="imagens/logo.jpg" NOBORDER Align=middle> </BODY> </HTML>
Figura 5.15 Trabalhando com Imagens A figura 5.15 ilustra o nosso exemplo. Repare que embora a figura seja a mesma, atravs da tag <IMG> alteramos suas caractersticas, como tamanho, borda e posicionamento vertical. No exerccio 9 crie um documento HTML com 3 (trs) imagens com variadas caractersticas.
PROTOCOLO
DESCRIO
Servidor World Wide Web Servidor de transferncia de arquivos. Enviar e-mail Servidor Gopher, normalmente um texto ASCII.
HTML 47
PROTOCOLO
DESCRIO
Servidor de Notcias NNTP padro Servidor de Notcias NNTP particular Conexo de terminal remoto com um servidor TELNET.
48 Delphi 7 Internet e Banco de Dados Voc poder utilizar imagem, texto, ou at os dois em conjunto. A figura 5.18 ilustra a resoluo do exerccio.
Tabelas
Aprender a trabalhar com tabelas no documento HTML fundamental para o desenvolvimento de excelentes documentos. Para criar uma tabela utilizamos a TAG <TABLE> em conjunto com seus atributos e subtags.
HTML 49
ATRIBUTO/SUB TAG
DESCRIO
Define o incio e o fim de uma linha na tabela Define o incio e o fim de uma clula Define o cabealho da tabela Define a largura da borda Largura da tabela, em percentual %, ou pixels Largura da tabela em percentual % ou pixels Tabela 5.9 Atributos da TAG <TABLE>
Para incrementar as tabelas, as subtags <TD> e <TR> possuem atributos interessantes, veja a tabela que segue.
ATRIBUTO/SUBTAG
DESCRIO Permite definir todas as caractersticas da fonte dentro de uma clula Define a cor de fundo da clula Imagem de fundo da tabela Tabela 5.10 Atributos da TAG
<html> <head> <title>Exemplo Tabela</title> </head><TABLE BORDER=2> <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> </BODY> </HTML> A figura 5.19 ilustra o primeiro exemplo de tabelas.
Figura 5.19 Exemplo de tabela Vejamos um exemplo parecido, mas sem bordas. Para tanto, basta substituir o valor do BORDER para 0.
Figura 5.20 exemplo sem borda Vejamos um exemplo mais completo. <html> <head> <title>Exemplo Tabela</title> </head> <table width="80%" border="1"> <tr> <td bgcolor=gray><B>Veiculo</B></td> <td bgcolor=gray><B>Marca</B></td> </tr> <tr> <td>Palio</td> <td>Fiat</td> </tr> <tr> <td>Gol</td> <td>Volkswagem</td> </tr> <tr> <td>Corsa</td>
HTML 51 <td>GM</td> </tr> <tr> <td>Ka</td> <td>Ford</td> </tr> </table> </body> </html> A figura 5.21 ilustra o nosso exemplo.
Figura 5.21 Exemplo de tabela No exerccio 11 faa um documento HTML baseado no modelo que segue.
HTML 53
Formulrios
Os formulrios so bastante comuns em aplicaes web. Na realidade so indispensveis. Os formulrios HTML funcionam como os formulrios de programas cliente/servidor, com a finalidade de fazer a interface entre o usurio e o banco de dados. A TAG <FORM> define o incio e o fim do formulrio. Os dois principais atributos da TAG <FORM> so:
ATRIBUTO
DESCRIO
ACTION
Define a localizao do programa ou email aos quais sero enviados os dados do formulrio Define a forma de troca de dados entre o cliente (formulrio) e o programa. Tabela 5.10 Atributo da TAG <FORM>
METHOD
ATRIBUTO
DESCRIO
Nome do objeto Texto do objeto Tamanho do objeto Tamanho mximo permitido para entrada de dados Endereo da imagem utilizada Posio do objeto na ordem de tabulao Quando o objeto for do tipo CheckBox ou Radio, utilizada para atribuir os valores Verdadeiro ou Falso.
ATRIBUTO
Text
DESCRIO
Permite a entrada de dados, como o Edit ou DBEdit
ATRIBUTO
Password
DESCRIO
Permite a entrada de dados, com caractere *, como PassWordChar do Delphi Caixa de seleo, como o CheckBox do Delphi
CheckBox
Como o RadioGroup do Delphi Lista de Seleo, como o ComboBox do Delphi Boto para enviar os dados do formulrio Boto para limpar os campos do formulrio Define um boto de ao prpria do usurio Incorpora um objeto invisvel ao formulrio O mesmo que Submit, mas com uma imagem ao invs do boto Tabela 5.12 Atributos do <TYPE>
Exemplo de Formulrio: <html> <head> <title>Exemplo de Formulrio</title> </head> <body bgcolor="#FFFFFF"> <form method="post" action="mailto:emerson@facunte.com.br" name="form1"> Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"> <input type="submit" name="Submit"> </form> A figura 5.23 ilustra o nosso exemplo.
HTML 55
F Figura 5.23 Exemplo de formulrio Vejamos outro exemplo: <html> <head> <title>Exemplo de Formulrio</title> </head> <body bgcolor="#FFFFFF"> <form method="post" action="mailto:emerson@facunte.com.br" name="Form2"> <p>Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"> </p> <p>Sexo <input type="radio" name="masculino" value="radiobutton"> Masculino <input type="radio" name="feminino" value="radiobutton"> Feminino</p> <p> <input type="submit" name="Submit" value="Enviar"> <input type="reset" name="Reset" value="Limpar Campos"> </p> </form> </body> </html> A figura 5.24 ilustra o segundo exemplo.
Figura 5.24 Exemplo de formulrio Vejamos outro exemplo: <html> <head> <title>Exemplo de Formulrio</title> </head> <body bgcolor="#FFFFFF"> <form method="post" action="mailto:emerson@facunte.com.br" name="Formulario1"> <p>Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"> </p> <p>Sexo <input type="radio" name="masculino" value="radiobutton"> Masculino <input type="radio" name="feminino" value="radiobutton"> Feminino</p> <p>Quais produtos deseja conhecer ?</p> <p> <input type="checkbox" name="Produto1" value="checkbox"> Delphi 5 - Desenvolvendo Aplicaes Cliente/Servidor<br> <input type="checkbox" name="produto2" value="checkbox"> Delphi 5 - Solues Empresariais<br> <input type="checkbox" name="produto3" value="checkbox"> Delphi 5 Comrcio Eletrnico</p> <BR> <p> <input type="submit" name="Submit" value="Enviar"> <input type="reset" name="Reset" value="Limpar Campos"> </p> </form> </body> </html> A figura 5.25 ilustra o exemplo.
HTML 57
Figura 5.25 Exemplo de formulrio Neste exemplo vamos utilizar a maioria das TAGS que aprendemos neste livro, para tornar o formulrio mais simptico. <html> <head> <title>Cadastro</title> </head> <body bgcolor="#FFFFFF"> <form method="post" action="mailto:emerson@facunte.com.br" name="Formulario"> <table width="80%" border="1" align="center" bgcolor="#3333FF"> <tr> <td><font face="Arial" size="2" color="#FFFFFF"> <b>Formulrio de Cadastro</b></font></td> </tr> </table> <table width="80%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" align="center"> <tr> <td><font face="Verdana" size="2">Nome </font></td> <td> <font face="Verdana" size="2"><br> <input type="text" name="NOME" size="50" maxlength="50"> <br> </font></td> </tr> <tr> <td> <p><font face="Verdana" size="2">Email</font> <br> </p> </td> <td><font face="Verdana" size="2"> <input type="text" name="email" size="50" maxlength="50"> </font></td> </tr> <tr> <td><font face="Verdana" size="2"> Sexo</font></td> <td> <font face="Verdana" size="2"><br> <input type="radio" name="masculino" value="radiobutton"> Masculino <input type="radio" name="feminino" value="radiobutton">
58 Delphi 7 Internet e Banco de Dados Feminino<br> </font></td> </tr> <tr> <td><font face="Verdana" size="2"></font></td> <td> <p><font face="Verdana" size="2"><br> Quais produtos deseja conhecer ?</font></p> <p> <font face="Verdana size="2"> <input type="checkbox" name="Produto1" value="checkbox"> Delphi 5 - Desenvolvendo Aplicaes Cliente/Servidor<br> <input type="checkbox" name="produto2" value="checkbox"> Delphi 5 - Solues Empresariais<br> <input type="checkbox" name="produto3" value="checkbox"> Delphi 5 - Comrcio Eletrnico</font></p> </td> </tr> <tr> <td> </td> <td> <p><br> Qual verso do Delphi voc utiliza no momento <select name="versaodelphi"> <option>Delphi 1</option> <option>Delphi 2</option> <option>Delphi 3</option> <option>Delphi 4</option> <option>Delphi 5 Standard</option> <option>Delphi 5 Professional</option> <option selected>Delphi 5 Enterprise</option> </select> </p> <p> </p> </td> </tr> <tr> <td> </td> <td> <p><br> <input type="submit" name="Submit" value="Enviar"> <input type="reset" name="Reset" value="Limpar Campos"> </p> </td> </tr> </table> </form> </body> </html> A figura 5.26 ilustra este exemplo.
HTML 59
Figura 5.26 Exemplo de Formulrio Amigos, vimos a complexidade em desenvolver um formulrio em HTML, mas no se assustem, pois as ferramentas citadas anteriormente (Dreamweaver, GoLive, etc.) tornam esta tarefa bastante agradvel. Para facilitar a compreenso e o andamento do curso, faremos o exerccio de formulrio em conjunto com as aplicaes servidoras.
60 Delphi 7 Internet e Banco de Dados </STYLE> </head> <body bgcolor="#FFFFFF"> <form method="post" action="mailto:emerson@facunte.com.br" name="Formulario1"> <p>Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"> </p> <p>Sexo <input type="radio" name="masculino" value="radiobutton"> Masculino <input type="radio" name="feminino" value="radiobutton"> Feminino</p> <p>Quais produtos deseja conhecer ?</p> <p> <input type="checkbox" name="Produto1" value="checkbox"> Delphi 5 - Desenvolvendo Aplicaes Cliente/Servidor<br> <input type="checkbox" name="produto2" value="checkbox"> Delphi 5 - Solues Empresariais<br> <input type="checkbox" name="produto3" value="checkbox"> Delphi 5 Comrcio Eletrnico</p> <BR> <p> <input type="submit" name="Submit" value="Enviar"> <input type="reset" name="Reset" value="Limpar Campos"> </p> </form> </body> </html> A figura 5.27 ilustra o nosso exemplo.
HTML 61
Atributos de CSS Atributo de CSS Background background-attachment background-image background-color background-position background-repeat Border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width clear clip Color Cursor Display Filter Float Font @font-face font-family font-size font-style Font-variant font-weight height @import O que ele formata Cor de fundo, imagem, transparncia. Rolagem do fundo / Marca d'gua. Imagem de fundo. Cor de fundo ou transparncia. Posicionamento da imagem de fundo. Configurao lado-a-lado da imagem de fundo. Largura, estilo e cor das bordas (superior, inferior, direita e esquerda) Largura, estilo e cor da borda inferior. Cor da borda inferior. Estilo da borda inferior. Largura da borda inferior. Cor das bordas. Largura, estilo e cor da borda esquerda. Cor da borda esquerda. Estilo da borda esquerda. Largura da borda esquerda. Largura, estilo e cor da borda direita. Cor da borda direita. Estilo da borda direita. Largura da borda direita. Estilo de todas as bordas. Largura, estilo e cor da borda superior. Cor da borda superior. Estilo da borda superior. Largura da borda superior. Largura de todas as bordas. Elementos flutuantes esquerda ou direita de um elemento. Parte visvel de um elemento. Cor de primeiro plano. Tipo de ponteiro do mouse. Se o elemento exibido e o espao reservado para ele. Tipo de filtro aplicado ao elemento. Se o elemento flutua. Estilo, variante, peso, tamanho e altura da linha do tipo de fonte. Incorporao da fonte ao arquivo HTML. Tipo de fonte. Tamanho da fonte. Fonte itlico. Fonte bold. Peso da fonte de claro a negrito. Altura exibida ao elemento. Folha de estilo a importar.
Left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-left margin-right margin-bottom margin-top overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before position text-align text-decoration text-indent text-transform top vertical-align visibility width z-index
Posio do elemento em relao margem esquerda da pgina. Distncia entre as letras. Distncia entre linhas de base. Tipo, imagem e posio do estilo da lista. Marcador de item de lista. Posio do marcador de item da lista. Marcador de item de lista alternativo. Tamanho de todas as margens. Tamanho da margem esquerda. Tamanho da margem direita. Tamanho da margem inferior. Tamanho da margem superior. Exibio de imagens que so maiores do que suas molduras. Espao em torno de um elemento em todos os lados. Espao a partir da margem inferior de um elemento. Espao esquerda do elemento. Espao direita do elemento. Espao a partir da margem superior do elemento. Inserir quebra de pgina depois de um elemento. Inserir quebra de pgina antes de um elemento. Como o elemento posicionado na pgina. Alinhamento do texto. Sublinhado, sobrelinhado ou riscado. Recuo da primeira linha do pargrafo. Transformao para todas maisculas, minsculas ou inicial maiscula. Posio do elemento em relao parte superior da pgina. Alinhamento vertical do elemento. Se elemento visvel ou invisvel. Largura do elemento. Posio do elemento na pilha.
HTML 63
JavaScript
Assim como no tpico de CSS, abordaremos apenas alguns itens sobre JavaScript. Aqui abordaremos somente a validao de formulrios utilizando o JavaScript. No exemplo que segue, verificamos se o usurio deixou o campo nome
em branco. Em caso afirmativo, disparado um alerta ao usurio. <html> <head> <title>Exemplo de Formulrio</title> <SCRIPT LANGUAGE=JAVASCRIPT TYPE TEXT/JAVASCRIPT> function ValidaForm(formulario) { if (formulario.NOME.value==) { alert(Voc precisa informar o NOME) formulario.NOME.focus() return false } return true } </SCRIPT> </head> <body bgcolor="#FFFFFF"> <form method="post" onSubmit=return ValidaForm(this) action="mailto:emerson@facunte.com.br" name="form1"> Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"> <input type="submit" name="Submit"> </form> </body> </html> Caso o usurio deixe em branco o campo nome, o Javascript dispara a mensagem ilustrada na figura 5.28.
Figura 5.28 Mensagem do JavaScript. Vamos analisar o cdigo. <SCRIPT LANGUAGE=JAVASCRIPT TYPE TEXT/JAVASCRIPT> Neste ponto indicamos ao documento HTML o incio do script JavaScript. Entre as tags <SCRIPT> e </SCRIPT> temos a liberdade de inserir cdigos de linguagens de script, como o JavaScript. Em seguida criamos a funo ValidaForm, com o parmetro (formulario). function ValidaForm(formulario) { Na linha seguinte, verificamos se o usurio deixou o campo nome em branco. if (formulario.NOME.value==) { Em caso afirmativo, o JavaScript dispara um alerta ao usurio. alert(Voc precisa informar o NOME)
64 Delphi 7 Internet e Banco de Dados Em seguida focaliza o campo nome e retorna o valor false ao formulrio. formulario.NOME.focus() return false Caso contrrio retorna o valor true, liberando assim o formulrio. return true Para finalizar o script devemos fechar a tag </SCRIPT>. </SCRIPT> Para que o nosso exemplo funcione, colocamos a funo de validao dentro do formulrio, utilizando o evento OnSubmit. <form method="post" onSubmit=return ValidaForm(this) No exerccio 12, crie um documento HTML com dois campos: Nome e Email, e verifique se o usurio deixou em branco um dos campos. Em caso afirmativo dispare a mensagem Favor informar o nome do campo. A seguir, temos a resoluo do exerccio. <html> <head> <title>Exemplo de Formulrio</title> <SCRIPT LANGUAGE=JAVASCRIPT TYPE TEXT/JAVASCRIPT> function ValidaForm(formulario) { if (formulario.NOME.value==) { alert(Voc precisa informar o NOME) formulario.NOME.focus() return false } if (formulario.EMAIL.value==) { alert(Voc precisa informar o EMAIL) formulario.NOME.focus() return false } return true } </SCRIPT> </head> <body bgcolor="#FFFFFF"> <form method="post" onSubmit=return ValidaForm(this) action="mailto:emerson@facunte.com.br" name="form1"> Digite seu nome <input type="text" name="NOME" size="50" maxlength="50"><BR><BR> Digite seu Email <input type="text" name="EMAIL" size="50" maxlength="50"><HR> <input type="submit" name="Submit"> </form> </body> </html> Com isso conclumos nosso objetivo com o JavaScript.
HTML 65
Anotaes de Dvidas
?
Preciso Revisar
Anotaes Gerais