Está en la página 1de 100

1

HTML
2
Introduo
HTML = HyperText Markup Language
HTML a linguagem de marcao universal
para Web. HTML permite que voc formate
texto, adicione grficos, crie links, entradas
de formulrios, frames, tabelas, etc e salve
tudo em uma arquivo texto que qualquer
navegador pode ler e exibir.
A chave do HTML so as tags que indicam
qual contedo vir em seguida.
3
Conceitos
Hipertexto: um documento hipertexto
prov links visualmente claros a outros
documentos e selecionando um link em um
documento nos leva a outra documento
Internet: um sistema global de
computadores em rede que permite
comunicao entre usurios e transferncia
de arquivos entre quaisquer duas mquinas
da rede
4
Conceitos
Multimdia: combina vrias tecnologias de
apresentao num esforo de apelar aos
vrios sentidos quanto possvel (vale-se de
grficos, sons, animaes e vdeos para criar
um completa e rica experincia
computacional)
5
Servios bsicos da Internet
E-mail: correio eletrnico
FTP: transferncia de arquivos
WWW: comunicao por meio de hipertexto
6
Modelo Cliente / Servidor
Browser Servidor Web
request
response
Mozilla Firefox
Internet Explorer
Opera
Konqueror
Safari
Chrome
Apache
Internet Information Server (IIS)
Cliente Servidor
7
Modelo Cliente-Servidor
Cliente Web (web client) o programa
responsvel para exibio das pginas
solicitas pelo usurio
Servidor Web (web server) armazena e
permite o acesso aos dados

WEB
A Web formada por milhares de lugares
conhecidos como sites.
As informaes esto organizadas na forma de
pginas ligadas entre si.
As ligaes entre as pginas so chamadas de
Hiperlinks ou ligaes de hipertexto.
O que faz essa malha de informaes funcionar
um sistema de endereamento que permite a cada
pgina ter a sua prpria identificao.
Na Web, voc vai encontrar tambm outros tipos de
documentos alm dessas pginas interligadas.

9
Clientes Web
Browser (navegador ou paginador)
Exemplos:
Internet Explorer
Mozilla Firefox
Opera
Safari
Konqueror
Chrome

10
URL (Uniform Resource Locator)
Em portugus significa (Localizador
Uniforme de Recursos). Ele Permite que
cada documento na Web possua uma
endereo nico que indica o nome do
arquivo, diretrio, nome do servidor e o
protocolo usado para requisio do
documento

11
Exemplo
http://www.policamp.edu.br/files_biblioteca/
normalizacao_bibliografica.pdf
Onde:
http:// protocolo usado
www.policamp.edu.br nome do servidor
files_biblioteca diretrio dentro do servidor
normalizacao_bibliografica.pdf nome do
arquivo solicitado
12
Protocolos
file: um arquivo no PC local
ftp: um arquivo em um servidor FTP
http: um arquivo em WWW
gopher: um arquivo em um servidor Gopher
mailto: um email em um servidor de Emails
news: um Newsgroup da UseNet
telnet: uma conexo Telnet
wais: um arquivo em um servidor WAIS
13
Site (Web Site) ou Stio
Um site WWW um conjunto de pginas
(com uso de hipertexto) relacionados
organizadas hierarquicamente onde
podemos encontrar informaes do um
assunto, empresa, etc.
Web
A web consiste em bilhes de clientes (usando
browsers) e servidores (rodando aplicaes),
conectados atravs de redes com fio e wireless. (Use
a cabea! Servlets e JSP)
O que o servidor web faz?
Recebe uma solicitao e devolve algo para o
cliente (HTML, imagem, PDF, msica, etc)
O que o cliente web faz?
Um cliente web permite ao usurio fazer
solicitaes ao servidor, exibindo o resultado
do pedido.

17
Conceitos
Website: uma ou mais pginas Web ligadas de
uma forma significativa
Web server: o computador real que armazena o
website
Web pages: so os elementos individuais de um
website, como uma pgina para um livro.
Home page: em termos de publicao web, o
ponto de entrada ao resto de pginas em um
website ( a pgina inicial ou mais importante)
18
Protocolos
HTTP (Hypertext Transport Protocol) O
HTTP um protocolo de aplicao
responsvel pelo tratamento de pedidos e
respostas entre cliente e servidor na World
Wide Web.
FTP (File Transfer Protocol) um protocolo
de transferncia utilizado para enviar e
receber arquivos via internet. uma
ferramenta da WEB.
19
SGML e HTML
SGML (Standard Generalized Markup
Language) que uma linguagem usada para
fazer documentos que possam ser lidos em
diversas plataformas
HTML baseada na SGML
No possui uma estrutura rgida e exata
Define a estrutura da pgina estabelecendo suas
caractersticas
20
Linguagem HTML (Hypertext Markup Language)
Define a estrutura de uma pgina
estabelecendo seu ttulo, texto, listas,
subttulos, localizao de imagens, etc.
uma linguagem para criao e
manipulao de textos, imagens e no
necessita de grande conhecimentos tericos
e lgica de programao
21
Linguagem HTML
A linguagem HTML transportada pelo
protocolo HTTP (HyperText Transfer
Protocol) ou Protocolo de Transferncia de
Hypertexto
HyperText Markup Language;
Linguagem padro da internet;
No linguagem de programao;
Pode ser escrito em editores de texto simples, como
Bloco de Notas;
Por conveno, o nome da pgina principal de um
site deve ser "index.html", pois o arquivo que o
servidor ir procurar caso no seja solicitado um
arquivo especfico.
O que HTML?
HTML (HyperText Markup Language)
A interface de formulrios oferecida por HTML
permite que o leitor de uma pgina Web possa
enviar informaes ao servidor atravs de
componentes grficos como botes, caixas de
checagem, caixas de texto etc.
A pgina transferida de um computador
remoto para o usurio, onde o browser faz o
trabalho de interpretar os cdigos naquele
documento e mostra a pgina que o usurio v.

24
Linguagem HTML
Uma pgina HTML pode ser criada com uso
de qualquer editor de textos porm deve ter
a extenso .html ou .htm
A diferena que antigamente as extenses
s podiam ter 3 caracteres, por isso o
nome .htm
Com o passar do tempo adaptaram a
extenso e ela passou a chamar .html, ou
seja, tanto faz usar .htm ou .html
<html>
<head>
<title>Nome da pgina</title>
</head>
<body>
(Contedo da pgina, como texto, links,
imagens, vdeos e etc.)
</body>
</html>
Estrutura bsica de uma pgina
26
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>
27
Tags e Atributos
Tags (marcaes)
Tags so representadas entre os sinais < e > e finalizadas por </ >

Atributos
so caractersticas dos comandos representados pelas tags.
Os atributos podem apresentar parmetros

Exemplo:
<INPUT TYPE="text" VALUE=Campinas NAME=cidade
READONLY>
Exemplo de Atributos
<font size = 5 face = arial
color = blue> texto a ser
formatado </font>;

Neste caso a tag a
<font></font> e os atributos so
size, face e color.

28
29
Exemplos de tags
<h1> ... </h1>
<br>
<p>
<h1 align="center"> ... </h1>
nome do
atributo
30
Exemplos de editores HTML
Dreamweaver
FrontPage
NVU
Notepad ++

<body bgcolor="cor" text="cor" link="cor" alink="cor"
vlink="cor" background="endereo da imagem">

bgcolor: cor do fundo da pgina. Padro: branco
text: cor do texto. Padro: preto
link: cor dos links. Padro: azul
alink: cor do link quando acionado. Padro:azul
vlink: cor dos links j visitados. Padro: azul
background: endereo da imagem de background.
Padro: Sem background.
align: alinhamento do texto (Esquerda = left,
Centralizado = center, Direita = right). Padro: esquerda
Propriedades de <body>
32
Comentrios em HTML
<!-- comentrio -->
33
Tags
<br> faz a quebra de uma linha
<p> faz a quebra de duas linhas
<p> e </p> pargrafo

<tag /> tag nica, sem lista de atributos
<tag p1=val1 p2=val2 /> tag nica, com lista de
valores
<tag>texto</tag> par de tags, sem lista de valores e
contedo inserido entre elas
<tag p1=val1>texto</tag> par de tags, sem lista de
valores e contedo inserido entre elas
34
Cabealhos
Cabealhos so definidos com as tags <h1> a <h6>
<h1> defines o maior cabealho enquanto <h6>
define o menor cabealho.

<h1>Este um cabealho</h1>
<h2>Este um cabealho</h2>
<h3>Este um cabealho</h3>
<h4>Este um cabealho</h4>
<h5>Este um cabealho</h5>
<h6>Este um cabealho</h6>
35
Formatao de Textos
Dois tipos de formatao:
Lgica
Fsica
A idia dessa separao a independncia
entre especificao e apresentao
36
Formao Lgica e Fsica
A formatao lgica acompanha o
significado lgico do texto marcado. Sua
apresentao varia em funo do navegador
usado podendo oferecer resultados distintos
A formatao fsica especifica explicitamente
o estilo que se quer o texto, como letras em
itlico, negrito, sublinhado, etc.
37
Tag <font>
Atributos:
size tamanho da fonte
color define a cor da fonte do texto
face o nome da fonte que a tag vai
apresentar
38
Atributos
Atributo Exemplo Proposta
size="nmero" size="2" Define o tamanho da fonte
size="+nmero " size="+1" Aumenta o tamanho da fonte
size="-nmero size="-1" Diminui o tamanho da fonte
face="nome-da-face face="Times" Define o nome da fonte
color="valor-da-cor" color="#eeff00" Define a cor da fonte
color="nome-da-cor" color="red" Define a cor da fonte


<font size = 5 face = arial color = blue> texto a
ser formatado </font>

<font color = blue> texto a ser formatado </font>
39
Padres de Cores
Padro de cores RGB (Red, Green, Blue)
RGB a abreviatura do sistema de cores aditivas
formado pelas cores Red, Green e
Blue ouVermelho, Verde e Azul


Cor azul por Exemplo:
Nome da cor em ingls ->Blue
Cor em formato RGB -> 0 0 255
Cor em formato Hexadecimal -> #0000FF
Tabela de Cores
Nome RGB Hexadecimal
Black 000 #000000
White 255255255 #FFFFFF
Gray 190190190 #BEBEBE
Green 0 255 0 #00FF00
Yellow 255 255 0 #FFFF00
Purple1 155 48 255 #9B30FF
Red1 255 0 0 #FF0000
40
41
Algumas cores nomeadas
Black Marron Green Navy
Sliver Red Lime Blue
Gray Puple Olive Teal
White Fuchsia Yellow Aqua
42
Tags de estilos fsicos
<b> </b> (bold) negrito
<i> <ib> (italic) itlico
<tt> </tt> fonte de mquina de escrever
(monoespaada)
<u> </u> (underline) sublinhado
<s> </s> (strikethrough)

43
Pargrafo
Tag <p>
<p align="[left|right|center|justify]"> [texto]
</p>
left seleciona alinhamento a esquerda
right seleciona alinhamento a direita
center seleciona alinhamento ao centro
justify justifica o texto do pargrafo
Exemplo
<p>Primeiro pargrafo</p>
44
Linha Horizontal
As linhas horizontais podem ser usadas para separar
visualmente sees de uma pgina da web.
Em HTML a separao realizada por meio da tag <hr>
Exemplo:
<hr size="5" width="50%" align="center" noshade>

size: configura a espessura da linha em pixels
width: configura o comprimento da linha
align: define o posicionamento da linha
noshade: indica que a linha no ter um efeito
tridimensional

45
Listas
Listas de definio
Listas Ordenadas
Listas No ordenadas
46
Listas de definio
usada para definir termos, criar textos
explicativos, dicionrios, entre outras
funes. Uma lista de definio composta
de duas partes:
termo
definio

47
Lista de Definio Exemplo
<dl> comando de
inicio da lista
</dl>
<dt> DT o texto
que fica em
destaque(como se
fosse um ttulo)
<dd> DD o texto
que marca o
contedo.
DL Definition Lista
(lista de definio)
DT Definition Term
(termo a ser definido)
DD Definition Detail
(detalhes da definio)
48
Listas - Ordenadas
Uso das tags <ol>
Exemplo:
<ol>
<li>primeiro
<li>segundo
<li>terceiro
</ol>
Resultado

1. primeiro
2. segundo
3. terceiro
49
Listas No ordenadas
Uso das tags <ul>
Exemplo:
<ul>
<li>primeiro
<li>segundo
<li>terceiro
</ul>

Resultado

primeiro
segundo
terceiro
50
A tag <a> (Anchor) e o atributo href
HTML usa a tag <a> (anchor) ( que em portugus
significa ncora)para criar um link para outro
documento.

Um anchor (ncora) pode apontar para qualquer
recurso na Web: uma pgina HTML, uma imagem,
uma trilha sonora, um clipe, etc.

Sintaxe para criao de uma ncora:
<a href="url">Texto para ser
exibido</a>
51
A tag <a> (Anchor) e o atributo href
A tag <a> usada para criar uma ligao
(vnculo) ao link,
O atributo href usado para enderear o
documento ao qual o endereo est
apontando,
e as palavras entre o abre e fecha ncora ser
exibido como o hyperlink.

52
A tag <a> (Anchor) e o atributo href
Esta ncora define um link para pgina da
Policamp:

<a
href="http://www.policamp.edu.br/">Policamp</a
>

A linha acima parecer como a linha abaixo no
browser:
Policamp
53
Links
Os links tornam possvel a navegao entre
pginas.
<a
name="[nome]"
href="[url]"
title="[titulo]"
target="[_blank | _self | _top |
nome]"
>
[ncora]
</a>
54
Atributos
name: marca um indicador, isto , uma
regio de um documento como destino de
uma ligao
href: indica a URL de destino da ligao do
hipertexto
title
target: destino
55
ncoras links na mesma pgina
ncoras so inseridas pelo atributo name da tag
<a>.
Exemplo:
<a href="#link1">link1</a><br>
<a href="#link2">link2</a><br>
<a name="link1">djshj asjhja ahdjka asdh
<a name="link2">sjdkas asdhkj asjdh ash
56
Imagens
<img> inclui uma imagem em uma pgina
HTML;
As imagens podem no mesmo local da sua
pgina ou em outro endereo web, mas
precisam estar nos formatos gif, png ou jpg;

A tag para inserir uma imagem <img>, e o
local da imagem indicado pelo atributo src;

Ex.: <img src=imagens/foto.jpg>

Atributos
Height: altura da imagem
Width: largura da imagem
Alt: Texto alternativo da imagem
Border: Tamanho da borda da imagem
Align: Alinhamento do texto em relao a
imagem (top, middle, left, right)
Ex.: <img src=imagens/foto.jpg width=100
height=300 alt=Minha foto border=1
align=left>
Imagem
58
Atributos da tag <IMG>
SRC: URL da imagem que ser exibida
ALIGN: top | bottom | middle | left | right
WIDTH: estabelece a largura da imagem
HEIGHT: estabelece a altura da imagem
VSPACE: controla o espao acima e abaixo da
imagem
HSPACE: controla o espao a esquerda e a direita
da imagem
BORDER: define a borda ao redor da imagem
ALT: define uma descrio sucinta da imagem
LOWSRC
59
Exemplo
<img src="angry.gif" alt="Angry"/>
60
Tabelas
Uma tabela composta por linhas e colunas
que formam uma clula.
Essas clulas podem conter textos, imagens e
at mesmo outras tabelas


A tag <table> indica a criao de uma tabela

A tag <tr> indica a criao de uma linha na
tabela

A tag <td> indica a criao de uma clula na
linha
Tabela
<table>
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>

Tabela
Atributos
border: espessura da borda da tabela em pixels

width: largura da tabela em pixels ou %

align: alinhamento horizontal do contedo da
tabela, linha ou clula (left, center, right)

valign: alinhamento vertical do contedo da
tabela, linha ou clula (top, middle, bottom)
Tabela
64
Tabelas Tag <table>
<table
[border="n"]
[cellpadding="n"]
[cellspacing="n"
[width="n"]
[align="left"|"center"|"right"
>
...
</table>
No slide anterior:
border: largura da borda (se n=0 a borda
no ser desenhada) (o nmero identifica a
quantidade de pixels da borda)
cellpadding: espao dentro da clula
cellspacing: espaamento entre as clulas
width="n" --> define a largura mnima da
tabela. Width tambm pode ser definido em
"%" da rea ocupada pela tela do navegador.

65
66
Exemplo de Tabela
<table>
<tr>
<td> linha 1, 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>
67
Atributos da tag <table>
width: especifica a largura da tabela
height: especifica a altura da tabela
align: alinha a tabela (left|center|right)
valign: alinhamento vertical da clula
(top|bottom|middle)
bgcolor: cor de fundo
background: cor da fonte
cellpadding: define o espao entre a clula e sua
borda
cellspacing: define o espao entre as clulas
68
Atributos (2)
border especifica a largura da borda (use
o valor "0" para no exibir as bordas)
bordercolor atualiza a cor da corda
bordercolordark atualiza o componente
escuro do efeito 3D
bordercolorlight atualiza o componente
claro do efeito 3D

69
Atributos para mesclagem de clulas
colspan permite mesclar colunas de uma
determinada linha de uma tabela
rowspan permite mesclar as linha de uma
determinada coluna de uma tabela
Sintaxe
<td colspan="n"> ... contedo da clula </td>
<td rowspan="m"> ... contedo da clula </td>
onde n representa o nmero de colunas e m o nmero de
linhas a serem mescladas
70
reas das tabelas
<thead> .. </thead> define um table
head ou cabealho da tabela
<tfoot> .. </tfoot> define um table foot
ou rodap da tabela
<tbody> .. </tbody> define um table
body ou corpo da tabela
71
Ttulo da tabela
Tag caption
Deve ser usado dentro da tag <table>
72
Frames
uma diviso que cria um ambiente onde
mais de uma pgina pode ser vista ao
mesmo tempo
possvel definir regies fixas onde
podemos colocar informaes como o logo
da empresa, um menu de navegao (por
exemplo) e regies onde so feitas as
navegaes
73
Frames
Com frames possvel visualizar mais de um documento
HTML na mesma janela do browser.
Cada documento HTML chamado um frame e cada frame
independente dos outros

Desvantagens no uso de frames:
o desenvolvedor Web deve manter o gerenciamento de
mais de um documento HTML
difcil imprimir a pgina inteira
74
Frames
Tag Descrio
<frameset> Define um conjunto de frames
<frame> Define uma sub-janela (um
frame)
<noframe> Define uma sesso noframe para
browsers que no suportam
janelas
<iframe> Define um sub-janela inline
(frame)
75
A tag Frameset
A tag<frameset> define como dividir uma
janela em frames
Cada frameset define um conjunto de linhas
ou colunas
O valor das linhas/colunas indicam a
quantidade da rea da tela que cada linha
/coluna ira ocupar.
76
Frames - Tags
Tag <frameset> usada para organizar
mltiplas janelas
Atributos:
cols: define o nmero e tamanho das colunas
em um frameset
rows: define o nmero e tamanho das linhas
em um frameset
77
A tag <frame>
A tag <frame> define que documento HTML
ser alocado em cada frame
No exemplo abaixo temos um frameset com
duas colunas. A primeira coluna ocupara
25% da largura da janela do navegador e a
segunda coluna ocupara 75% da largura. O
documento HTML "frame_a.htm" colocado
na primeira coluna e o documento
"frame_b.htm" is colocado na segunda
coluna
78
Exemplo
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
79
Formulrios
Permite aos usurios entrar com dados e
assim criar uma interatividade nas pginas
HTML.
O uso de formulrio muito usado quando
tratamos de aplicaes web.
80
Formulrios
Um formulrio uma rea que contm elementos de
formulrios.
Elementos de formulrios so elementos que
permitem ao usurio entrar com informaes
(como text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc) em um
formulrio.
Um formulrio definido com o tag <form>.
81
Formulrios Tag <form>
<form
name ="[nome]"
method ="[get|post]"
action ="[url]"
enctype="[tipo]"
>
...
</form>
82
Atributos do Form
name: nome do formulrio
method: GET | POST
GET dados enviados na URL da pgina (limite de
aproximadamente 2000 bytes)
POST dados enviados como variveis de ambiente
action: determina a URL do destino da ao
enctype: determina o tipo de empacotamento que os
dados sero submetidos (normalmente string. Para envio
de dados binrios usa-se multipart/form-data
83
Mtodo GET
os dados inseridos em um formulrio fazem parte da
URL associada a consulta enviada ao servidor.
as informaes digitadas nesse modo so visualizados
na barra de endereo do navegador.

Quando usamos o mtodo GET os valores das
variveis do form so enviados como parte da URL
Exemplo:
http://server/executa_acao?var1=valor1&var2=valor2
&var3=valor3

84
Mtodo POST
os dados inseridos em um formulrio fazem parte do
corpo da mensagem encaminhada ao servidor que
suporta uma grande quantidade de dados.
as informaes digitadas nesse modo no so
visualizados na barra de endereo do navegador

Quando usamos o mtodo POST os dados so enviados
por uma varivel de ambiente, oculta aos olhos do
usurio
Exemplo: MIME type: application/x-www-form-
urlencoded

85
Entrada de dados atravs do formulrios
Entrada de dados
rea de textos
Lista

Tag <input>
A tag <input> define o tipo da tag para
entrada de dados

86
Tag <input> - Atributos
type informa qual o tipo do campo de entrada de dados
name informa qual o nome do campo
value informa um valor padro para o campo
size informa o tamanho do campo exibido na tela
maxlength informa o nmero mximo de caracteres que
pode ser digitado no campo
id identidade nica para tag

Os seguintes atributos so obrigatrios: name, type
Atributos opcionais: value, size, maxlength

87
Atributo type
text entrada de texto (linha nica)
checkbox caixa de mltiplas opes
radio caixa de opes simples
submit boto de envio
button boto de uso genrico
reset limpa todos os dados inseridos pelo
usurio
hidden campo oculto
image boto imagem
password entrada de senha
file entrada de arquivos
88
Tag input
<input
type="tipo"
name="nome"
id="id"
value="valor"
size="tamanho"
maxlength=[limite de caracteres]
checked readonly disabled tabindex=
>
89
Text Field (Caixa de entrada de uma linha)
<html>
<body>

<form action="" name="Form1" method="get">

<p>Nome:
<input type="text" name="nome" size="20" />
<br/>
<p>Sobrenome:
<input type="text" name="sobrenome" size="20" />

</form>

</body>
</html>
90
Password (Senha)
<html>
<body>

<form action="">
Usuario:
<input type="text" name="user" size="20" />
<br />
Senha:
<input type="password" name="password" size="20" />
</form>

<p>
<b>Nota:</b>O navegador exibe asteriscos ou bullets ao invs dos caracteres
digitados com campo password.
</p>

</body>
</html>
91
Checkboxes (Caixa de Seleo)
<html>
<body>

<form action="" name="Form" method="POST">
Eu tenho uma bicicleta:
<input type="checkbox" name=tem_bicicleta" value=bicicleta"
/>
<br/>
Eu tenho um carro:
<input type="checkbox" name=tem_carro" value=carro" />
<br/>
Eu tenho um avio:
<input type="checkbox" name=tem_aviao" value=avio" />
</form>

</body>
</html>

Explicando o Slide anterior
As caixas de seleo (CheckBox) permitem selecionar ou
desativar a opo relacionada a elas.
Em uma lista com caixas de seleo, vrias opes podem ser
selecionadas ao mesmo tempo
Sintaxe: <INPUT TYPE="checkbox" NAME="nome"
VALUE="valor de retorno">texto da caixa

onde:
Name
Type
Value
Texto da caixa

92
93
Radio Button (boto de rdio ou seletor)
<html>
<body>

<form action="" name="Form" method="POST">
Qual seu sexo ?
<br/>
<input type="radio" name="sexo" value="M">Masculino
<br/>
<input type="radio" name="sexo" value="F">Feminino
</form>

</body>
</html>

Sintaxe:
<INPUT TYPE="radio" NAME="nome do boto de
opo" VALUE="valor de retorno">Texto da Caixa

onde:

name (obrigatrio)
type (obrigatrio)
value (obrigatrio)
texto da caixa (opcional)
94
Explicando o Slide anterior
95
Button (Boto)
<html>
<body>
<form action="">
<input type="button" value="Hello world!"
/>
</form>
</body>
</html>
96
Submit (Boto de envio)
<body>

<form name="input" action="form_action.asp" method="get">
Digite seu primeiro nome:
<input type="text" name="FirstName" value="Mickey" size="20" />
<br />
Digite seu ltimo nome:
<input type="text" name="LastName" value="Mouse" size="20" />
<br />
<input type="submit" value="Enviar" />
</form>

<p>Utilize a tecla <CTRL> para seleo de mais de um item</p>
<p>
Se voc clicar no boto "Enviar" voc enviar sua entrada a uma nova
pgina chamada "form_action.asp".
</p>

</body>
</html>
97
rea de texto (Caixa de texto de rolagem)
<p>Entre com seus comentrios:
<textarea
name="comentarios"
rows="6"
cols="60"
>
Entre com seus comentrios
</textarea>
Atributos Obrigatrios:
Name nome do campo de entrada de texto

Atributos Opcionais:
Value Valor inserido no campo
Rows Nmero de linha
Cols Nmero de colunas
MaxLength Definio mxima de carcteres
permitidos
Align - Alinhamento

98
99
Tag select (Menu suspenso (Select e Option))
<select
name ="browser"
value="Firefox"
size ="2"
>
<option>Internet Explorer</option>
<option value=firefox>Firefox</option>
<option value=opera>Opera</option>
<option value=safari>Safari</option>
</select>
100
Lista
Atributos:
size Determina quantos itens sero vistos
multiple Permite mais de uma seleo
value Valor inserido no campo
selected Especifica que essa opo
selecionada por padro

También podría gustarte