Vous êtes sur la page 1sur 97

HTML

HyperText Markup Language


Virtualizao
A virtualizao consiste na emulao de
ambientes isolados, capazes de rodar
diferentes sistemas operacionais dentro
de uma mesma mquina, aproveitando ao
mximo a capacidade do hardware.
Aplicaes
Facilitar o desenvolvimento de softwares e
sistemas operacionais;
Executar aplicaes diversas na mesma
mquina;
Simular cenas fictcias ;
Suportar software legados;
Prover servios seguros e confiveis;
Atuar como honeypots contra hackers na
Internet.




Virtualizao
Virtual Box
O VirtualBox um software de
virtualizao desenvolvido pela Sun
Microsystems, que visa criar ambientes
para instalao de sistemas distintos. Ele
permite a instalao e utilizao de um
sistema Operacional dentro de outro
dando suporte real a softwares de outros
sistemas bem como seu hardware.
Instalao do Virtual Box
Crie uma pasta em C:\Temp\VM
Copie os arquivos indicados para a pasta
recm criada C:\Temp.
Execute o arquivos VirtualBox-4.0.0-69151-
Win.exe.
Carregar uma VDI
Carregar uma VDI
Carregar uma VDI
Carregar uma VDI
Carregar uma VDI
Carregar uma VDI
Testes e Ajustes.
Instalao na Plataforma Linux
Links
http://www.guiadohardware.net/tutoriais/vir
tualbox/ (Instalao MANDRIVA).

http://www.vivaolinux.com.br/dica/Instalan
do-o-Virtualbox-no-Ubuntu (Instalao
UBUNTU).
Dicas


http://virtualboximages.com/
HTML
Hipertexto uma forma no linear de
publicao de informaes onde palavras que
aparecem no decorrer do texto podem levar a
outras sees de um documento, outros
documentos ou at outros sistemas de
informao, fugindo da estrutura linear original
de um texto simples. O hipertexto baseia-se
em ligaes entre dois pontos chamados de
ncoras. As ligaes entre as ncoras so
chamadas de vnculos (links)
HTML
Web design a concepo e projeto da
interface interativa do servio Web, formado
por "pginas".

HTML
HyperText Markup Language
HTML usada para marcar um arquivo de
texto simples (texto simples texto sem
formatao alguma, visualizvel em
qualquer editor de textos). Se um arquivo
de texto simples receber uma extenso de
nome de arquivo .html ou .htm, um
navegador como o Internet Explorer ir
tentar interpret-lo como HTML.
uma linguagem de marcao.
HTML
HTML
Mosaic, Foi padronizada com a evoluo dos
browsers.

HTML 2.0
concluda em 1995, foi a primeira verso
recomendada pelo IETF - Internet
Engineering Task Force e se tornou um
padro da Internet.
HTML
HTML 3.0
Acabou no sendo aprovado e anos depois,
aprovou-se uma recomendao chamada
HTML 3.2 em 1997, que introduzia recursos
de apresentao grfica no HTML.

HTML 4.0
Foram excludos vrios elementos do
HTML3.2 por estarem obsoletos Inicio do
CSS.Inicio de 1999 padronizada.
HTML
HTML
Ao ler um documento HTML, um browser
tenta interpretar todas as seqncias de
caracteres que ficam entre os smbolos
"<" e ">". O browser entende que qualquer
coisa que estiver entre esses caracteres
um descritor HTML (tag).
Estrutura de um HTML
Estrutura de um HTML
Primeiro arquivo HTML

<html>
<head>
<title>COLOQUE AQUI O TTULO DA PGINA</title>
</head>
<body>
<h1>Arquivo de texto</h1>
<p>Este o <i>primeiro</i> pargrafo.</p>
</body>
</html>
cdigo-fonte
HTML.
A maioria dos elementos HTML possui um
descritor inicial e um descritor final,
cercando o texto que marcado por eles. A
sintaxe bsica
<Elemento> Texto marcado por
Elemento </Elemento>
No Case
sensitive
Chefe !
Excees

Existem elementos que no precisam ter descritores de
fechamento. O pargrafo, por exemplo, marcado por
<P> e </p> pode omitir o descritor final. Isto permitido
porque no pode haver um pargrafo dentro de outro,
portanto, se o browser encontra um <p> pouco depois
de outro <p> ele automaticamente coloca um </p>
antes.

<p>Primeiro pargrafo. <p>Incio de outro pargrafo.</p>
Excees

A tag <br> (quebra de linha) marca a posio
onde a linha deve ser quebrada (no contm ou
marca texto algum).
<p>Esta uma frase<br>que ocupa duas linhas.

Outra tag que no necessita ser fechada <HR>.</HR>
que insere uma linha horizontal.
Comentrios
<!- - Isto um comentrio - ->
Tags de Cabealho
<HTML>
<HEAD>
<TITLE>Titulo da pagina</TITLE>
</HEAD>
<BODY>
<H1> este o primeiro nvel de cabealho</H1>
<H2> este o segundo nvel de cabealho</H2>
<H3> este o terceiro nvel de cabealho</H3>
<H4> este o quarto nvel de cabealho</H4>
<H5> este o quinto nvel de cabealho</H5>
<H6> este o sexto nvel de cabealho</H6>
</BODY>
</HTML>
Tags de Formatao de Texto

Atributos

Alguns elementos HTML podem ter um ou mais
atributos, opcionais ou no, que modificam
alguma propriedade do texto marcado ou
acrescentam alguma informao necessria.
Geralmente os atributos so pares do tipo:

propriedade=" valor"

Atributos
Quando presentes, os atributos aparecem
apenas no descritor inicial separados por
espaos, logo aps o nome do elemento:

Ex. <h1 align=" center" >Ttulo centralizado</h1>

Ex. Atributos na linha <HR SIZE=5 WIDTH=100% >
Definindo Fontes
Um dos recursos de tratamento do texto mais
interessante da linguagem HTML a possibilidade
de alterar o tamanho, cor e tipo da fonte do texto
utilizado. A tag responsvel por isso <FONT>.
Exemplo:

<FONT SIZE= n FACE= nome" COLOR= Cor >.</FONT>

N: o n varia de 1 a 7 e o valor 3 corresponde ao valor padro;
Nome: o nome da fonte a ser utilizada;
Cor: a cor da fonte, definida em hexadecimal, ou atravs de um
nome predefinido de cores.
Fontes
<HTML>
<HEAD>
<TITLE>Curso de HTML - Fontes</TITLE>
</HEAD>
<BODY>
<FONT SIZE=" 7" FACE=" Times New Roman" COLOR=" #FF0000" >
Fonte Times New Roman com tamanho 7 e cor Vermelha.</FONT><BR>
<FONT SIZE=" 6" FACE=" Arial" COLOR=" #BC8F8F" >
Fonte Arial com tamanho 6 e cor Pink.</FONT><BR>
<FONT SIZE=" 5" FACE=" Tahoma" COLOR=" Blue" >
Fonte Tahoma com tamanho 5 e cor Azul.</FONT><BR>
<FONT SIZE=" 4" FACE=" Verdana" COLOR=" Gold" >
Fonte Verdana com tamanho 4 e cor Gold</FONT><BR>
<FONT SIZE=" 3" FACE=" Helvetica" COLOR=" DarkGreen" >
Fonte Helvetica com tamanho 3 e cor Verde Escuro</FONT><BR>
<FONT SIZE=" 2" FACE=" Courier New" COLOR=" Gray" >
Fonte Courier New com tamanho 2 e cor Cinza</FONT><BR>
<FONT SIZE=" 1" FACE=" Impact" COLOR=" #000000" >
Fonte Impact com tamanho 1 e cor Preta</FONT><BR>
</BODY>
</HTML>

Tabela de Cores
Mais cores em:
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Alinhamento De Textos
<P ALIGN=RIGHT> --TEXTO--</p>

<P ALIGN=CENTER> --TEXTO--</p>

<P ALIGN=LEFT> --TEXTO--</p>

<P ALIGN=JUSTIFY> --TEXTO--</p>

<center> Centraliza o texto ou a imagem</center>


Alinhamento de Texto com Imagem
<p>

<IMG SRC= "C:\Users\Adriano\Pictures\Atomo.jpg"
ALIGN=" left" height=120 width=200 BORDER = 2" >

----Bloco de texto----

</p>
Efeitos em HTML
<marquee behavior=efeito>Texto que deve se
movimentar</marquee>

<marquee behavior=" alternate" WIDTH=30%><img
src="C:\Users\Adriano\Pictures\bola.png"></marquee>
A tag <Body>
<html>
<head>
<title>COLOQUE AQUI O TTULO DA PGINA</title>
</head>

<body BACKGROUND ="C:\98anos.jpg" BGCOLOR ="#D2691E" TEXT ="BLUE">

<h1>Arquivo de texto</h1>
<p>Este o <i>primeiro</i> Fundo.</p>

</body>
</html>

ATRIBUTOS TAG body
BGCOLOR a cor do fundo, onde o padro cinza ou
branco.
BACKGROUND define o endereo da imagem que ser
usada como fundo da pgina, preenchendo o fundo da
tela. Deve ser um arquivo jpg ou gif, de preferncia com
menos de 10KB para agilizar o tempo de carga.
TEXT a cor do texto, sendo o padro preto.
LINK a cor do texto do link, sendo que o padro azul.
VLINK a cor do link que j foi visitado, sendo o padro
vermelho- purpura.
ALINK a cor do link que est ativo no momento
ATRIBUTOS GERAIS
SIZE Define o tamanho.
WIDTH Define a largura.
NOSHADE Uma linha mais slida pode ser
criada.
HEIGHT Define a altura.
ALIGN Alinhamento, pode ser CENTER
centralizado, Esquerda LEFT, a direita
RIGHT ou justificado J USTIFY
BORDER Cria uma borda ao redor do
objeto.
Atributos de Imagens
IMAGENS E LINKS
Atributos geralmente so opcionais. Em
alguns casos so obrigatrios, como os
atributos HREF e SRC em vnculos de
hipertexto e imagens, respectivamente.
Ambos informam uma URL onde se
encontra um recurso na Web.
IMAGENS E LINKS
<a href=" http://www.fasipe.com.br/"
title=" Vai logo! Clica!" > Clique aqui
</a>


<img src= c:\logo.gif" height=120
width=400 BORDER = 2" >

IMAGENS E LINKS
<img ALIGN="left"
src="C:\Users\Adriano\Pictures\fasipe.png"
width="70" height="70" alt="" border="4">



<A
HREF="http://www.fasipe.com.br"><IMG
SRC="C:\98anos.jpg"></A>
ATRIBUTOS DE ALINHAMENTO
<IMG ALIGN="top" SRC="imagem.gif">
Menino Lindo !

<IMG ALIGN="middle" SRC="imagem.jpg">

Menino Lindo !

<IMG ALIGN="bottom" SRC="imagem.gif">


Menino Lindo !

A tag DIV
A tag <DIV> envolve uma rea do texto ou
Diviso que pode receber parmetros
especficos de alinhamento. Este
comando bastante usado para alinhar
um grupo de pargrafos pela direita sem
que seja necessrio fazer o alinhamento
para cada um deles.
Exemplo da tag DIV
<DIV ALIGN=center>
<P>Primeiro pargrafo</P>
<P>Segundo pargrafo</P>
<P>Terceiro pargrafo</P>
</DIV>
Referncia
<ADDRESS>
Pgina atualizada em: 13/01/03.<BR>
Criada por Antonio J oo<BR>
Email: <A HREF="mailto:goncalves@hotmail.com.br">
antonio@hotmail.com.br</A>
</ADDRESS>
Listas
Lista ordenada.
<OL>
<LI>Primeiro item de uma lista ordenada.
<LI>Segundo item de uma lista ordenada.
<LI>Terceiro item de uma lista ordenada.
</OL>
Listas
Lista no ordenada.
<UL>
<LI>Primeiro de uma lista no ordenada.
<LI>Segundo de uma lista no ordenada.
<LI>Terceiro de uma lista no ordenada.
</UL>
Listas
Lista encadeada.
<OL>
<LI> Primeiro item de uma lista endentada.
<LI> Segundo item de uma lista endentada.
<UL>
<LI> Terceiro item de uma lista endentada.
<LI> Quarto item de uma lista endentada.
</UL>
<LI>Quinto item de uma lista endentada.
</OL>
Listas
Lista de definio
<DL>
<DT>HTML:</DT>
<DD>HyperText Markup Language</DD>
<DD>Linguagem de Marcadores de Hipertexto</DD>
<DT>URL:</DT>
<DD>Uniform Resource Locator</DD>
<DD>Endereo Uniforme de Recurso</DD>
<DT>HTTP:</DT>
<DD>HyperText Transfer Protocol</DD>
<DD>Protocolo de Transferncia de Hipertexto</DD>
<DT>FTP:</DT>
<DD>File Transfer Protocol</DD>
<DD>Protocolo de Transferncia de Arquivos</DD>
</DL>
Tabelas
A lgica e seqncia de criao de uma tabela a seguinte:
1. Use a tag <TABLE> para especificar que uma tabela
est sendo criada;
2. Use a tag <TR>.</TR> para criar uma linha da tabela;
3. Use a tag <TD>.</TD> para criar cada clula de uma
linha;
4. A tag <TH> define clulas de cabealho em uma tabela.
5. Use a tag </TABLE> para encerrar a tabela;
Exemplo
<HTML>
<HEAD>
<TITLE>Titulo da Pagina</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>Linha 1 Coluna 1</TD>
<TD>Linha 1 Coluna 2</TD>
<TD>Linha 1 Coluna 3</TD>
</TR>
<TR>
<TD>Linha 2 Coluna 1</TD>
<TD>Linha 2 Coluna 2</TD>
<TD>Linha 2 Coluna 3</TD>
</TR>
<TR>
<TD>Linha 3 Coluna 1</TD>
<TD>Linha 3 Coluna 2</TD>
<TD>Linha 3 Coluna 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Exemplo 2
<table border=" 1" >
<tr>
<th>Nome</th>
<td align=" center" >Jos carlos</td>
<td align=" center" >Valdison</td>
</tr>
<tr>
<th rowspan=" 2" >Telefone</th>
<td>66 3548 3549</td>
<td>66 3544 3578</td>
</tr>
<tr>
<td>66 9578 3258</td>
<td>66 9566 5799</td>
</tr>
</table>
Implementando uma Tabela
BORDER - Cria a borda que envolve as
clulas da tabela.;
COLSPAN - Faz com que a clula ocupe
colunas adjacentes.;
Ex: <TD ALIGN = CENTER COLSPAN=2>Linha 1 Coluna 1 e Coluna 2</TD>
ROWSPAN - Faz com que ela ocupe linhas
adjacentes.;
Ex: <TR>
<TD>Linha 2 Coluna 1</TD>
<TD rowspan=2>Linhas 2-3 Coluna 2</TD>
<TD>Linha 2 Coluna 3</TD>
</TR>

Uma imagem dentro da tabela
<td><img src=" C:\Users\Adriano\Pictures\fasipe.png" width=" 70" height=" 70" alt=" " border=" 4" ></td>
ncoras
Uma ncora qualquer um dos lados de
um vnculo de hipertexto. Em outras
palavras, tanto a origem quanto o destino
de um link so ncoras. Voc pode criar
uma ncora destino em uma pgina HTML
usando a tag <A> com atributo NAME.
ncoras
<A HREF ="#FIM DO CAPITULO"> Ir direto para o fim do capitulo</A>
Cria um link com determinada parte da pgina.


<A NAME ="FIM DO CAPITULO"></A>
Ancora para onde a referencia aponta.
Tag de Comentrio
<blockquote>
<p>"Educao, qualidade e<br>
segurana so nossas<br>
prioridades"</p>
</blockquote>
Frames
Frames (quadros) so painis que dividem a
rea de visualizao do browser em sub-
janelas, cada uma capaz de exibir uma
pgina diferente. Para mostrar duas pginas
ao mesmo tempo dentro de uma janela do
browser preciso ter pelo menos trs
arquivos. Dois so os arquivos HTML das
pginas que sero exibidas. O outro uma
pgina HTML que contm apenas as
instrues para que o browser saiba se dividir
em sub-janelas.
Atributos de Frames
FRAMEBORDER - Assume os valores 1 (com bordas entre os frames) ou 0 (sem
bordas).

BORDER - Especifica o tamanho das bordas.

BORDERCOLOR: Cor da borda.

FRAME NAME - Nome do frame. Esse nome ser utilizado para se indicar em qual
frame determinada pgina ir aparecer.

FRAMESET - Deve-se definir um dos dois atributos a tag <FRAMESET>para se ter
o layout desejado: COLS e ROWS.

SCROLLING - Configura a barra de rolagem, podendo aparecer ou no. Pode ainda,
aparecer somente quando o texto ultrapassar o tamanho da clula (AUTO, YES e
NO) .

NORESIZE - Impede que as barras que delimitam os frames sejam
redimensionados.
Exemplo de Frames
<HTML>
<HEAD>
<TITLE>TTULO DA PGINA </TITLE>
</HEAD>
<FRAMESET COLS=" 20%, 80%" BORDERCOLOR = RED NORESIZE >

<FRAME SRC=" C:\USERS\ADRIANO\DESKTOP\P2.HTML" />
<FRAME SRC=" C:\USERS\ADRIANO\DESKTOP\P3.HTML" />

<BODY>

</BODY>

</HTML>
Multimdia
Componentes Flashes, sons e vdeos
podem ser includos em uma pgina usando
o elemento <EMBED> ou o elemento
<OBJECT>. Embora o ltimo seja
recomendado pela especificao do HTML
4.0.
udio
udio
H vrios formatos de udio suportados na Web. Os que
possuem maior suporte so os formatos .au e .mid
suportados pelo componente LiveAudio. Mais
recentemente cresceu o suporte ao formato .mp3. O
LiveAudio exibe (opcionalmente) um controle de tela que
permite ao usurio manipular o som.

O elemento <EMBED> usado para incluir udio possui
vrios atributos adicionais.
Atributos
CONTROLS - Pode receber os valores console,
smallconsole, playbutton, pausebutton, stopbutton ou
volumelever.

LOOP - Pode ser true, false ou um n de vezes que o
som deve tocar.

AUTOSTART - Pode ser true ou false.

VOLUME - Varia de 0 a 100 e estabelece o volume do
som.
BGSOUND Som de Fundo - Ex: <BGSOUND
SRC=" musica.mid" LOOP=3>


EXEMPLO
<EMBED SRC="c:\Clocks.mp3" CONTROLS=console
HEIGHT=64 WIDTH=305 AUTOSTART=FALSE></EMBED>
Vdeo
Vdeo
Assim como os recursos de udio, vrios formatos de vdeo como
.mpg, .mov, .avi, .rm, etc. podem ser includos em pginas HTML
usando o elemento <EMBED>.

Cada plug-in tem seus prprios atributos que podem ser
acrescentados ao descritor <EMBED>. O formato .mov (QuickTime)
por exemplo suporta vrios outros atributos, entre eles
CONTROLLER=true ou false, para ligar ou desligar o controle do
vdeo o LOOP = true, false.

No Internet Explorer (e somente no Internet Explorer) possvel
incluir vdeos usando o atributo DYNSRC de <IMG>:
Ex:<IMG DYNSRC=" c:\Warriors.mpg ">

Exemplo
<EMBED SRC="c:\Warriors.mpg" CONTROLS=console
HEIGHT=260 WIDTH=450 AUTOSTART=false></EMBED>
Flash
Para carregarmos um vdeo em flash basicamente o
mesmo processo de carregar um vdeo apenas precisamos
acrescentar a extenso de arquivo para que o servidor
reconhea o formato indicando o tipo e configurando para
que se o navegador no possua o plugin o mesmo seja
baixado.

Tipo/subtipo: application/x-shockwave-flash
Extenso: .swf
Local do Plugin: http://xxxxxxx

Para acrescentar Flash em uma pgina HTML, use o
elemento <EMBED>.
Exemplo Flash
<embed style="WIDTH: 518px; HEIGHT: 415px

pluginspage="http://www.macromedia.com/shock
wave/download/index.cgi?P1_Prod_Version="
src="http://www.orapois.com.br/br/arquivos/021420
03171721326g.swf"
width="518" height="415" type="application/x-
shockwave-flash">

</embed>

Exemplo usando <OBJ ECT>

<OBJ ECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
CODEBASE="http://download.macromedia.com/pub/shock
wave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="x"
HEIGHT="y">

<PARAM NAME="movie" VALUE="nome do arquivo.swf">
<PARAM NAME="quality" VALUE="high">

<EMBED SRC="nome do arquivo.swf"
TYPE="application/shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashpl
ayer" WIDTH="x" HEIGHT="y">

</OBJ ECT>

Imagens Mapeadas
Para fazer com que uma imagem sirva como origem de um
vnculo de hipertexto basta coloc-la dentro de um bloco <A
HREF>. Mas se o que se deseja que partes diferentes da
imagem apontem para lugares diferentes, preciso usar
imagens mapeadas ou imagemaps. Imagens mapeadas so
muito usadas em barras de navegao, mapas, diagramas,
etc. Sempre que for necessrio selecionar uma rea
irregular de uma imagem e fazer com que ela esteja
relacionada a um destino (pgina, ncora local, etc.) pode-
se us-la.
Mapa de rea
<MAP></MAP>: Indica o incio de uma descrio de mapa processado no cliente.
Atributos:
NAME=nome: indica o nome do mapa;

<AREA>: Indica as regies sensveis que o mapa apresentar.
Atributos:
SHAPE=formato: indica o formato da regio. Pode ser Circle, Poly, Rect, Default;
COORDS=coordenadas: indica as coordenadas que formam a regio;
HREF=pagina: indica a pgina associada regio;

<IMG>: Indica a imagem mapeada.
Atributo:
SRC=arquivo: indica o nome do arquivo de imagem;
USEMAP=mapa: indica o mapa que ser utilizado
Exemplo
<map name=" Adriano" >

<area shape=" rect" coords=" 1,170,275,186"
href=" http://www.fasipe.com.br"
title=" FaculdadesdeSorriso" ></map>

<img src=" C:\Users\Adriano\Pictures\fasipe.png" border=" 0"
width=" 275" height=" 186" alt=" " usemap=" #Adriano" >
EXEMPLO PRTICO
VAMOS FAZER J UNTOS.
Formulrios

Os Formulrios (Forms) so usados
para enviar dados de entrada preenchidos
pelo usurio para o servidor web. O
servidor o responsvel por fornecer as
informaes do formulrio para o
programa CGI que ser executado e
tratar as mesmas, enviando como
resposta a sada de dados que ser
enviada ao computador do usurio.

CGI
CGI a sigla para Common Gateway
Interface e serve, basicamente, para permitir
que uma pgina web possua um contedo
dinmico, isto , que a pgina seja criada
baseada em informaes de entradas
informadas pelo usurio.
A linguagem onde
for escrita a CGI
depende muito do
webserver
A TAG FORM
A tag <FORM>...</FORM> delimita a rea
ocupada pelo formulrio e possui 2
atributos que indicam quem vai receber
os dados do formulrio.

Atributo Action
Atributo Method

Atributo Action
Define o tipo de ao a realizar com o formulrio onde existem duas
possibilidades:

O formulrio enviado a um endereo de correio eletrnico.
O formulrio enviado a um programa ou script que processa seu contedo.

No primeiro caso, o contedo do formulrio enviado ao endereo de
correio eletrnico especificado por meio de uma sintaxe deste tipo:

<form action="mailto:endereo@correio.com">

Se o que queremos que o formulrio seja processado por um programa,
temos de especificar o endereo do arquivo que contem o tal programa. A
sintaxe ficaria neste caso da seguinte forma:

<form action="endereo do arquivo"...>
Atributo Method
Este atributo se encarrega de especificar a
forma na qual o formulrio ira ser enviado. Os
dois valores possveis que este atributo pode
tomar so post e get.

GET - Pedido do recurso situado na URL
especificada.(Indicado para pequenos forms, sem
criptografia)

POST - Envio de dados ao programa situado na
URL especificada.
Exemplo


<FORM METHOD=GET ACTION=" mailto:webmaster@hdfree.com" >



<FORM METHOD=POST ACTION=" http://profadriano/cgi-
bin/script.cgi" >
O Atributo Enctype
Utilizado para indicar o formato na qual a informao ser
transmitida pelo formulrio. No caso mais corrente, enviar
o formulrio por correio eletrnico, o valor deste atributo
deve ser "text/plain". Assim, conseguimos que o contedo
do formulrio seja enviado como texto simples dentro do e-
mail.

Se quisermos que o formulrio seja processado
automaticamente por um programa, geralmente no
utilizaremos este atributo, de forma que tome seu valor
padro.
Exemplo

<form action="mailto:endereo@correio.com (ou o nome do
arquivo de processo)" method=" post" enctype="text/plain">
A tag <Input>
A tag de formulrio mais usada a tag
<input> pois ela nos permite criar uma serie
de elementos interativos.

O tipo de input especificado com o atributo
type (tipo).

Os tipos de input mais usados so
explicados e exemplificados a seguir.
<INPUT>
Tipos de Controles de Formulrios

TEXT so usados para campos de entrada de texto.

Exemplo:

<form>
Primeiro Nome:
<input type=" text" name=" firstname" >

<br>
<br>

ltimo Nome:
<input type=" text" name=" lastname" >
</form>

Tipos de Controles de Formulrios

RADIO - so usados quando voc quer que o usurio
selecione uma entre uma quantidade limitada de
escolhas.

Exemplo:

<form>
<input type=" radio" name=" sex" value=" male" > Masculino
<br>
<input type=" radio" name=" sex" value=" female" > Feminino
</form>
Tipos de Controles de Formulrios

Caixas de Seleo As Caixas de Seleo so usadas
quando voc quer que o usurio selecione uma ou mais
opes de uma quantidade limitada de escolhas.
Exemplo:

<form>
<p> Qual(s) meio(s) de locomoo voc possui ?</p>
<input type=" checkbox" name=" bicicleta" > Bicicleta
<br>
<input type=" checkbox" name=" carro" > Carro
<br>
<input type=" checkbox" name=" moto" > Moto
</form>
Tipos de Controles de Formulrios

PASSWORD - funciona da mesma forma que o atributo
TEXT, exceto que todas as letras digitadas aparecem
como um asterisco (*).
Exemplo:

<form>
<p>Digite sua senha de acesso</p>
Login:
<input type=" text" name=" login" >
<br>
Senha:
<input type=" PASSWORD" name=" senha" >
</form>



Tipos de Controles de Formulrios

TEXTAREA Um controle de entrada de texto multilinhas,
que permite ao usurio escrever um texto limitado ou
ilimitado, dependendo da sua configurao.
Exemplo:

<Center>

<textarea name="parea" rows="5" cols="60" wrap="on >
</textarea>

</center>




Tipos de Controles de Formulrios

Caixas Drop-Down So usadas quando voc quer que
o usurio selecione uma e apenas uma opo da lista.
Exemplo:

<form>
<select name=" Carros" >
<option value=" Ford" >Ranger
<option value=" gm" >S10
<option value=" Fiat" selected>Fiat Plio
<option value=" audi" >Audi A4
</select>
</form>


Botes de Ao
SUBMIT apresenta o boto que causa o envio dos dados de entrada para o
servidor:
Ex.: <INPUT TYPE=SUBMIT>

possvel modificar o rtulo desse boto atravs do atributo VALUE
<INPUT TYPE=SUBMIT VALUE="Envia mensagem">

RESET restaura os valores iniciais das entradas de dados.
Ex.: <INPUT TYPE=RESET>

possvel modificar o rtulo desse boto atravs do atributo VALUE
<INPUT TYPE=RESET VALUE=Limpar Campos">

Botes de Ao
Exemplo

<form>
<p><b>Tipos de Botes<b></p>
<br>
<INPUT TYPE=SUBMIT VALUE=" Envia mensagem" >
<br>
<br>
<INPUT TYPE=RESET VALUE=" Limpar campos" >
<br>
<br>
<INPUT TYPE=SUBMIT VALUE=" Enviar" accesskey=" z" >
</form>

Refresh
<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="5;
URL=Pagina2.htm">
<TITLE>Curso de HTML - Refresh</TITLE>
</HEAD>
<BODY>
<H1>Aguarde...<H1>
<H2>Aps 5 segundos ser carregada a Pagina2.htm</H2>
</BODY>
</HTML>
A Hospedagem
Domnios;
Clientes FTP;
Ferramentas de edio;
Ferramentas de Criao;
Ferramentas de Edio de Imagem
Atualizao.
Hospedagem de Sites
Brasil
http://www.hpg.ig.com.br/
http://www.xpg.com.br/
http://www.v10.com.br/
http://www.hd1.com.br/
http://www.hospedagratis.net/
http://www.criandosite.com.br/
http://www.osite.com.br/
http://www.gratix.com.br/
Hospedagem de Sites
Exterior
http://www.astahost.com/index.php
http://www.topcities.com/
http://www.zerocatch.com/
http://www.brinkster.com/
http://www.freeservers.com/
http://www.freewebsites.com/
http://homepages.sapo.pt/
http://espacio.miarroba.com/
http://www.personales.com/
http://free.prohosting.com/
http://www.setemares.terravista.pt/
http://www.vr9.com/
http://www.webhostme.com/
http://www.xoom.it/
http://www.250free.com/
Uteis
Erros Possveis

http://pt.kioskea.net/contents/internet/http.
php3

WYSIWYG quer dizer What You See Is
What You Get, ou, O que voc v o
que voc obtm .