Livro Delphi Web Capitulo 5 PDF

HTML 29
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.
Ferramentas para produzir HTML.

No mercado existem vrias ferramentas para a criao de documentos HTML. As mais utilizadas so: DreamWeaver,
FrontPage, PageMill, HotDog e GoLive.
Alm das ferramentas citadas, podemos produzir um documento HTML atravs do Notepad, isso mesmo, NOTEPAD do
Windows. Acontece que o documento HTML um arquivo no padro texto, portanto podemos produzi-lo em qualquer editor
de programas (at mesmo na ferramenta Delphi). Para facilitar o aprendizado da linguagem HTML, vamos criar nossos
documentos no NotePad.
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.
Figura 5.1 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
Exibe uma imagem de fundo para a pgina HTML.
BGColor
Define a cor de fundo do documento
Link
Define a cor do Link
Alink
Define a cor dos Links ativos
Vlink
Define a cor dos Links j visitados
Text
Define a cor do texto

Tabela 5.1 Atributos da TAG <BODY>
Exerccio 1:
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>
HEADER
HEADER
HEADER
HEADER
HEADER
HEADER
H1
H2
H3
H4
H5
H6
</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.
Figura 5.3 Header (exerccio 2)
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
Left
Alinha o pargrafo esquerda
Right
Alinha o pargrafo direita
Center
Alinha o pargrafo no centro
Justify
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>
</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>
</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.
Figura 5.5 exerccio 4 (tag <BR>)
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>
</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>
Figura 5.6 Exemplo de Formatao

Existem outras TAGs de formatao, como demonstra a tabela 5.3.
TAG
FORMATAO
<BIG>
Para texto grande
<SMALL>
Para texto pequeno
em
qualquer
parte
do
TAG
FORMATAO
<U>
Para sublinhar o texto
<STRIKE>
Para riscar o texto
<SUB>
Para texto SUBescrito
<SUPB>
Para texto SOBrescrito

Tabela 5.3 TAGs de formatao
Exerccio 5:
<HTML>
<HEAD>
</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?
Figura 5.7 Exerccio 5 (vrios exemplos de formatao)
HTML 37
<FONT> Ainda em formatao definio de fontes
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
Color
Define a cor da Fonte
Face
Define o tipo da Fonte
Size
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>
</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>
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.8 exemplos de fontes

A figura 5.9 ilustra a sugesto do exerccio 6.

Veja a seguir o exemplo que utilizei para criar o exerccio 6.
<html>
<head>
</head>
<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.
Size
Define a altura (espessura) da linha
Align
Define o alinhamento da linha (centro,

esquerdo ou direito)
Color
Define a cor da linha

Tabela 5.5 Atributos da TAG <HR>
No exemplo que segue, utilizamos trs exemplos da tag <HR>.

Exemplo:
<HTML>
<HEAD>
</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>
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.
Listagem 5.1 do Exerccio 7

<HTML>
<HEAD><TITLE>Exerccio 7</TITLE></HEAD>
<BODY>
<FONT Face=Verdana Size=3>
<P ALIGN=CENTER><B>Pargrafo 1</B>
<HR WIDTH=80% SIZE=1 ALIGN=CENTER>
<P><I>Pargrafo 2</I></P>
<HR WIDTH=100% SIZE=30 ALIGN=RIGHT>
<P><U>Pargrafo 3</U></P>
<HR WIDTH=30% SIZE=2 COLOR="BLACK" ALIGN=CENTER>
<P><B>Pargrafo 4</B></P>
<HR WIDTH=150 SIZE=20 COLOR=GRAY ALIGN=LEFT>
</FONT>
</BODY>
</HTML>
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.
VALOR DO ATRIBUTO TYPE
DESCRIO
TYPE = A
Utiliza letras maisculas no esquema de

numerao.
TYPE = a
Utiliza letras minsculas no esquema de

numerao.
TYPE = I
Utiliza algarismos romanos no esquema de

numerao.
Tabela 5.6 Valores para o atributo <TYPE>
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>
<P>
<OL TYPE="a">
<LI>Primeiro Item
<LI>Segundo Item
<LI>Terceiro Item
</OL>
</P>
<P>
<OL TYPE="I">
<LI>Primeiro Item

<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>
<HEAD>
<TITLE>Exerccio 8</TITLE>
</HEAD>
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>
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
SRC
Indica o nome do arquivo a ser exibido
ALIGN (Horizontal)-Right/Left
Alinhamento da imagem na pgina.
Alinhamento Vertical da imagem

ALIGN(Vertical)
TextTop/Middle/AbsMiddle/BaseLine/Bo
ttom/AbsBottom
Width
Largura da imagem em pixels.
Height
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)
VSPACE
Define o nmero de pixels que so deixados

entre a imagem e o texto (Vertical)
BORDER
Define o tamanho
Tabela 5.7 Atributos da TAG <FONT>
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.

A figura 5.16 ilustra a resoluo do exerccio 9.
Figura 5.16 exerccio 9

<HTML>
<HEAD>
<TITLE>Trabalhando com Imagens</TITLE>
</HEAD>
<BODY>
<IMG SRC="imagens/logo.jpg" NOBORDER>
<IMG SRC="imagens/borland.gif" BORDER=5 ALIGN=TOP>
<IMG SRC="imagens/interbase.gif" WIDTH=300 HEIGHT=120>
</BODY>
</HTML>
<A> Hyperlinks
Os hyperlinks so indispensveis em documentos HTML. Utilizamos os hyperlinks para disponibilizar atalhos para outros
documentos HTML, entre outras funcionalidades.
Para criar um hyperlink, utilizamos a TAG <A> em conjunto com o seu atributo HREF.
Podemos referenciar nossos hyperlinks a diversos protocolos, tais como:
PROTOCOLO
DESCRIO
http
Servidor World Wide Web
ftp
Servidor de transferncia de arquivos.
mailto
Enviar e-mail
gopher
Servidor Gopher, normalmente um texto

ASCII.
HTML 47
PROTOCOLO
DESCRIO
news
Servidor de Notcias NNTP padro
nntp
Servidor de Notcias NNTP particular
telnet
Conexo de terminal remoto com um servidor

TELNET.
Tabela 5.8 Protocolos

Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de Links</TITLE>
</HEAD>
<BODY>
<CENTER>
<A HREF="http://www.facunte.com.br>
Facunte On-Line<BR>
<IMG SRC="imagens/logo.jpg"</A>
</P>
</CENTER>
</BODY>
</HTML>
Figura 5.17 Exemplo de hyperlink

Repare na figura 5.17 que a imagem e o texto so hyperlinks. Mas como isso aconteceu? simples, a figura e o texto esto
dentro das tags de hyperlink <A>; e qualquer objeto, seja ele imagem ou texto, que estiver entre as tags <A>, viram hyperlink.
Para o exerccio 10, crie um documento HTML com trs hyperlinks, apontando para os seguintes endereos:
www.facunte.com.br
www.brasport.com.br
www.borland.com.br

Voc poder utilizar imagem, texto, ou at os dois em conjunto.
A figura 5.18 ilustra a resoluo do exerccio.

<HTML>
<HEAD>
<TITLE>Exerccio 10</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Verdana" size=3><P>
<A HREF="http://www.brasport.br">
<B>Editora Brasport</B></A><HR>
<A HREF="http://www.facunte.com.br">
Facunte ON-LINE<BR>
<IMG SRC="imagens/logo.jpg"</A><HR>
<A HREF="http://www.borland.com.br">
<IMG SRC="imagens/borland.gif"</A>
</FONT></P>
</CENTER>
</BODY>
</HTML>
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
<TR>
Define o incio e o fim de uma linha na tabela
<TD>
Define o incio e o fim de uma clula
<TH>
Define o cabealho da tabela
Border
Define a largura da borda
Width
Largura da tabela, em percentual %, ou pixels
Height
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
FONT
Permite definir todas as caractersticas da

fonte dentro de uma clula
BGCOLOR
Define a cor de fundo da clula
BACKGROUND
Imagem de fundo da tabela

Tabela 5.10 Atributos da TAG
Exemplo:
<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>
Figura 5.21 Exemplo de tabela

No exerccio 11 faa um documento HTML baseado no modelo que segue.
BANCO DE DADOS
DB2
Oracle
SQL Server
Interbase
A figura 5.22 ilustra a resoluo do exerccio.
1998
32,1%
29,0%
16,3%
1,2%
2001
31,5%
30,9%
20,2%
3,5%

<html>
<head>
<title>Exerccio 11</title>
</head>
<table width="80%" border="1">
<tr>
<td bgcolor=gray align=center><B>BANCO DE DADOS
</B></td>
<td bgcolor=gray align=center><B>1998</B></td>
<td bgcolor=gray align=center><B>2001</B></td>
</tr>
<tr>
<td>DB2</td>
<td align=center>32,1%</td>
<td align=center>31,5</td>
</tr>
<tr>
<td>Oracle</td>
</tr>
<tr>
<td>SQL Server</td>
</tr>
<tr>
<td>Interbase</td>
</tr>
</table>
</body>
</html>
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
METHOD
Define a forma de troca de dados entre o cliente

(formulrio) e o programa.
Tabela 5.10 Atributo da TAG <FORM>
Objetos do Formulrio
Para inserir objetos no formulrio, utilizamos a TAG <INPUT>.
ATRIBUTO
DESCRIO
Name
Nome do objeto
Value
Texto do objeto
Size
Tamanho do objeto
MaxLength
Tamanho mximo permitido para entrada de

dados
SRC
Endereo da imagem utilizada
TabIndex
Posio do objeto na ordem de tabulao
Checked
Quando o objeto for do tipo CheckBox ou

Radio, utilizada para atribuir os valores
Verdadeiro ou Falso.
Tabela 5.11 Atributos da TAG <INPUT>

Para definir o tipo do objeto, utilizamos o atributo TYPE.
ATRIBUTO
DESCRIO
Text
Permite a entrada de dados, como o Edit ou

DBEdit
ATRIBUTO
DESCRIO
Password
Permite a entrada de dados, com caractere *,

como PassWordChar do Delphi
CheckBox
Caixa de seleo, como o CheckBox do Delphi
Radio
Como o RadioGroup do Delphi
Option
Lista de Seleo, como o ComboBox do Delphi
Submit
Boto para enviar os dados do formulrio
Reset
Boto para limpar os campos do formulrio
Button
Define um boto de ao prpria do usurio
Hidden
Incorpora um objeto invisvel ao formulrio
Image
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>
<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>
HTML 55
F
Figura 5.23 Exemplo de formulrio
Vejamos outro exemplo:
<html>
<head>
</head>
<form method="post" action="mailto:emerson@facunte.com.br" name="Form2">
<p>Digite seu nome
</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.

Vejamos outro exemplo:
<html>
<head>
</head>
<form method="post" action="mailto:emerson@facunte.com.br" name="Formulario1">
<p>Digite seu nome
</p>
<p>Sexo
Masculino
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>
Delphi 5 Comrcio Eletrnico</p>
<BR>
<p>
</p>
</form>
</body>
</html>
A figura 5.25 ilustra o exemplo.
HTML 57

Neste exemplo vamos utilizar a maioria das TAGS que aprendemos neste livro, para tornar o formulrio mais simptico.
<html>
<head>
<title>Cadastro</title>
</head>
<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>
<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>
Masculino

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">
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 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>
</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.
CSS (Cascading Style Sheet)

Para melhorar o visual dos documentos HTML, foi criado o CSS (Cascading Style Sheet ou Folhas de Estilo em
Cascata). Neste livro no iremos detalhar o uso do CSS, mas abordaremos alguns itens interessantes, como por
exemplo, melhorar o aspecto do formulrio. No final deste captulo disponibilizei uma tabela com todos os
atributos do CSS. Isso poder ajudar no aprimoramento do uso de CSS.
Bem, aqui iremos trabalhar com estilo incorporado, mas no CSS podemos trabalhar com vrios estilos, como:
externo, inline e incorporado. No exemplo que segue, alteramos as cores dos campos de um formulrio. A parte em negrito
define nosso estilo.
<html>
<head>
<STYLE TYPE="text/css">
input
{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color:#000066;
background:#99CCFF;
border-right:2px solid #000066;
border-left:2px solid #000066;
border-top:2px solid #000066;
border-bottom:2px solid #000066;
}

</STYLE>
</head>
<form method="post" action="mailto:emerson@facunte.com.br" name="Formulario1">
<p>Digite seu nome
</p>
<p>Sexo
Masculino
Feminino</p>
<p>Quais produtos deseja conhecer ?</p>
<p>
Delphi 5 Comrcio Eletrnico</p>
<BR>
<p>
</p>
</form>
</body>
</html>
Figura 5.27 Exemplo de CSS
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>
<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>
<form method="post" onSubmit=return ValidaForm(this)
action="mailto:emerson@facunte.com.br" name="form1">
Digite seu nome
</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.
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).
Na linha seguinte, verificamos se o usurio deixou o campo nome em branco.
Em caso afirmativo, o JavaScript dispara um alerta ao usurio.

Em seguida focaliza o campo nome e retorna o valor false ao formulrio.
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.
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>
return false
}
if (formulario.EMAIL.value==) {
alert(Voc precisa informar o EMAIL)
return false
}
return true
}
</SCRIPT>
</head>
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>
</form>
</body>
</html>
Com isso conclumos nosso objetivo com o JavaScript.
HTML 65
Anotaes de Dvidas
?
Preciso Revisar
Anotaes Gerais

Livro Delphi Web Capitulo 5 PDF

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

Livro Delphi Web Capitulo 5 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

HTML 29

Ferramentas para produzir HTML.

30 Delphi 7 Internet e Banco de Dados

Figura 5.1 Primeiro exemplo

<TITLE> Ttulo do Documento

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

32 Delphi 7 Internet e Banco de Dados

Figura 5.2 Exerccio 1

Figura 5.3 Header (exerccio 2)

Alinha o pargrafo esquerda

Alinha o pargrafo direita

Alinha o pargrafo no centro

Justifica o pargrafo (alguns browsers no

34 Delphi 7 Internet e Banco de Dados

Figura 5.4 exerccio 3 (tag <P>)

Figura 5.5 exerccio 4 (tag <BR>)

Figura 5.6 Exemplo de Formatao

Para texto grande

Para texto pequeno

36 Delphi 7 Internet e Banco de Dados

Para sublinhar o texto

Para riscar o texto

Para texto SUBescrito

Para texto SOBrescrito

Figura 5.7 Exerccio 5 (vrios exemplos de formatao)

Define a cor da Fonte

Define o tipo da Fonte

Define o tamanho da Fonte (de 1 a 7)

38 Delphi 7 Internet e Banco de Dados

Figura 5.8 exemplos de fontes

Figura 5.9 Exerccio 6

Define o tamanho da linha em percentual % ou

Define a altura (espessura) da linha

Define o alinhamento da linha (centro,

Define a cor da linha

No exemplo que segue, utilizamos trs exemplos da tag <HR>.

40 Delphi 7 Internet e Banco de Dados

Figura 5.10 Exemplo de linhas horizontais <HR>

Figura 5.11 Exerccio 7

Listagem 5.1 do Exerccio 7

VALOR DO ATRIBUTO TYPE

Utiliza letras maisculas no esquema de

Utiliza letras minsculas no esquema de

Utiliza algarismos romanos no esquema de

Para cada item da lista necessria a utilizao da TAG <LI>.

42 Delphi 7 Internet e Banco de Dados

Figura 5.12 Listas ordernadas

Figura 5.13 Exerccio 8

Listagem 5.2 do Exerccio 8

44 Delphi 7 Internet e Banco de Dados

Figura 5.14 Listas no ordenadas

Exibe um texto enquanto a imagem no

Indica o nome do arquivo a ser exibido

Alinhamento da imagem na pgina.

Alinhamento Vertical da imagem

Largura da imagem em pixels.

Altura da imagem em pixels

Define o nmero de pixels que so deixados