Anda di halaman 1dari 28

CURSO HTML

AVANADO

Mdulo 01 - Criando e formatando tabelas

Apresentao

Bem-vindo ao curso de HTML - Avanado.


O objetivo deste curso dar continuidade aos conhecimentos que voc adquiriu no curso de
HTML - Bsico ou aos que voc j possua sobre essa linguagem de marcao, que a mais
utilizada para criar pginas web.
Neste curso, voc aprender a incluir tabelas, formulrios e frames em sua pgina web,
usando o HTML. Sero abordados temas como:

Introduo ao mdulo

Neste mdulo, voc conhecer as tags e os atributos necessrios para a criao de tabelas.
Os tpicos a serem estudados so:

Por que utilizar tabelas em HTML?

Tabelas so muito teis para a organizao dos dados e das imagens em pginas web, pois
possibilitam um alinhamento que seria difcil de conseguir com simples comandos.
Uma tabela constituda de linhas e colunas, que podem, ou no, conter dados.

Vamos iniciar criando uma tabela simples. Depois, veremos maneiras de adicionar algumas
caractersticas tabela, como ttulo, borda elargura.
As tabelas podem conter textos, listas, imagens e, inclusive, outras tabelas.
Criando uma tabela

A tag utilizada para criar uma tabela a <TABLE></TABLE>.


No HTML as tabelas so criadas apenas com linhas e no colunas, diferente das criadas, por
exemplo, no Word.
Dessa forma, alm da tag <TABLE>, so necessrias mais duas tags para a construo da
tabela:

<TD> </TD> - responsvel por criar as clulas

<TR> - responsvel por criar as linhas

Observe, ao lado, como criar uma tabela simples. Em seguida, clique no boto para
visualizar o resultado na pgina web.
<HTML>
<HEAD>
<TITLE>Criandotabela</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Nome</TD>
<td>Sobrenome</TD>
<TR>
<TD>Anna</TD>
<td>Santos</TD>
<TR>
<TD>Vanessa</TD>
<td>Medeiros</TD>
</TABLE>
</BODY>
</HTML>
Atributos da tag

A tag <TABLE> possui vrios atributos que permitem, entre outros aspectos, controlar:

Voc ver, nas prximas telas, esses atributos.


Atributo BORDER

Para criar um efeito que facilite a visualizao da tabela, voc pode inserir uma borda.
Neste caso, voc utilizar o atributo BORDER. A espessura da borda definida em pixels.
A sintaxe fica assim:
<TABLE BORDER = "n de pixels">
<HTML><HEAD><TITLE>Inserindobordanatabela</TITLE></HEAD>
<BODY><TABLEBORDER="1"><TR><TD>Nome</TD><td>Sobrenome</TD><TR><TD>Anna
</TD><td>Santos</TD><TR><TD>Vanessa</TD><td>Medeiros</TD></TABLE></BODY>
</HTML>

Voc tambm pode inserir uma borda colorida. Neste caso, o atributo a ser utilizado o
BORDERCOLOR. A sintaxe fica assim:
<TABLE BORDERCOLOR = "cor">
<HTML><HEAD><TITLE>Inserindobordacolorida</TITLE></HEAD>
<BODY><TABLEBORDER="3"BORDERCOLOR="FF6600"><TR><TD>Nome</TD><td>Sobrenome
</TD><TR><TD>Anna</TD><td>Santos</TD><TR><TD>Vanessa</TD><td>Medeiros
</TD></TABLE></BODY>
</HTML>

Atributo BGCOLOR

O atributo BGCOLOR permite a voc definir uma cor de fundo para a tabela toda, quando
usada

na tag<TABLE>.

Pode

ou

no

ser

utilizado

com

os

atributos BORDER e BORDERCOLOR.


A sintaxe fica assim: <TABLE BGCOLOR = "cor">
<HTML><HEAD><TITLE>Cordefundonatabela</TITLE></HEAD>
<BODY><TABLEBORDER="3"BORDERCOLOR="FF6600"BGCOLOR="CCFFFF"><TR><TD>Nome
</TD><td>Sobrenome</TD><TR><TD>Anna</TD><td>Santos</TD><TR><TD>Vanessa
</TD><td>Medeiros</TD></TABLE></BODY>
</HTML>

possvel, tambm, definir uma cor de fundo para partes da tabela usando o
atributo BGCOLOR com as tags <TR> ou <TD>. A sintaxe fica assim:
<TR BGCOLOR "cor"> ou <TD BGCOLOR "cor">
<HTML><HEAD><TITLE>Cordefundonalinha/clula</TITLE></HEAD>

<BODY><TABLEBORDER="3"BORDERCOLOR="FF6600"><TRBGCOLOR="CCFFFF"><TD>Nome
</TD><TD>Sobrenome</TD><TR><TD>Anna</TD><TD>Santos</TD><TR><TD>Vanessa
</TD><TDBGCOLOR="CCFFFF">Medeiros</TD></TABLE></BODY>
</HTML>

Atributo BACKGROUND

O atributo BACKGROUND permite a voc definir uma imagem de fundo em uma tabela.
A imagem carregada em seu tamanho normal e distribuda em pequenas partes, at
preencher o contedo da tabela.
A sintaxe fica assim:
<TABLE BACKGROUND= "imagem">
Lembre-se! O nome do arquivo da imagem precisa ser indicado com a respectiva extenso.
<HTML><HEAD><TITLE>Inserindoimagemdefundo</TITLE></HEAD>
<BODY><TABLEBORDER="3"BORDERCOLOR="000066"
BACKGROUND="FB.png"><TR><TD><B>Nome</B></TD><td><B>Sobrenome</B></TD><TR><TD>Anna</TD
><TD>Santos</TD><TR><TD>Vanessa</TD><TD>Medeiros</TD></TABLE>
<TABLE
BACKGROUND="FB.png"><TR><TD><B>Nome</B></TD><td><B>Sobrenome</B></TD><TR><TD>Anna</TD
><TD>Santos</TD><TR><TD>Vanessa</TD><TD>Medeiros</TD></TABLE></BODY>
</HTML>

Atributos WIDTH e HEIGHT

Os atributos WIDTH e HEIGHT so utilizados para definir a largura e altura da tabela


em pixels ou porcentagem, uma vez que, por padro, a clula da tabela assume o tamanho
do maior dado inserido:

WIDTH - define a largura

HEIGHT - define a altura

A sintaxe fica assim:


<TABLE WIDTH="valor" HEIGHT="valor">
Dica: Os atributos width e height tambm podem ser utilizados para alterar a altura e largura das
clulas.

Se os valores definidos nestes atributos forem menores que o espao necessrio para
visualizao dos dados da tabela, o navegador os ignora para garantir a apresentao
adequada dos dados.

Atributos WIDTH e HEIGHT

Observe, neste exemplo, que a largura da tabela foi definida em 300 pixels (WIDTH="300")
e sua altura ocupar 20% (HEIGHT="20%") da altura do navegador.
<HTML><HEAD><TITLE>Definindodimensodatabela</TITLE></HEAD>
<BODY><TABLEWIDTH="300"HEIGHT="20%"BORDER="2"><TRBGCOLOR=#E0EEEE><TD><FONTFACE=
"ComicSansMS"><B>Nome</B></TD><TD><FONTFACE="ComicSans
MS"><B>Sobrenome</B></TD><TR><TD><FONTFACE="Calibri">Anna</FONT></TD><TD><FONT
FACE="Calibri">Santos</FONT></TD><TRBGCOLOR=#E0EEEE><TD><FONTFACE=
"Calibri">Vanessa</FONT></TD><TD><FONTFACE=
"Calibri">Medeiros</FONT></TD></TABLE></BODY>
</HTML>

Atributo ALIGN

O atributo ALIGN altera o alinhamento da tabela em relao pgina web. A sintaxe fica
assim: <TABLE ALIGN = "alinhamento">. O alinhamento pode ser:

Cellspacing

O atributo CELLSPACING especifica o espao entre a borda da tabela e as clulas,


sempre em pixels.
A sintaxe fica assim: <TABLE CELLSPACING = "valor">
Observe, no exemplo abaixo, a tabela antes e depois da aplicao do atributo CELLSPACING
= "10".
<HTML><HEAD><TITLE>Alterandoespaamentos</TITLE></HEAD>
<BODY><TABLEWIDTH="300"HEIGHT="25%"BORDER="4"CELLSPACING="10"><TRBGCOLOR=
#E0F8E0><TDALIGN="center"VALIGN="center"HEIGHT="40"COLSPAN="2"><FONTFACE=
"ComicSansMS"><B>CADASTRODECLIENTES</B></TD><TRBGCOLOR=#E0EEEE><TD><FONTFACE=
"Calibri"><B>Nome</B></TD><TD><FONTFACE=
"Calibri"><B>Sobrenome</B></TD><TR><TD><FONTFACE=
"Calibri">Anna</FONT></TD><TD><FONTFACE="Calibri">Santos</FONT></TD><TRBGCOLOR=
#E0EEEE><TD><FONTFACE="Calibri">Vanessa</FONT></TD><TD><FONTFACE=
"Calibri">Medeiros</FONT></TD></TABLE></BODY>
</HTML>

Cellpadding

J o atributo CELLPADDING especifica o espao entre os dados e a borda de uma


clula, sempre em pixels.
A sintaxe fica assim: <TABLE CELLPADDING = "valor">
Observe, no exemplo abaixo, a tabela antes e depois da aplicao do atributo CELLPADDING
= "7".
<HTML><HEAD><TITLE>Alterandoespaamentos</TITLE></HEAD>
<BODY><TABLEWIDTH="300"HEIGHT="25%"BORDER="4"CELLSPACING="10"CELLPADDING="7"><TR
BGCOLOR=#E0F8E0><TDALIGN="center"VALIGN="center"HEIGHT="40"COLSPAN="2"><FONT
FACE="ComicSansMS"><B>CADASTRODECLIENTES</B></TD><TRBGCOLOR=#E0EEEE><TD><FONT
FACE="Calibri"><B>Nome</B></TD><TD><FONTFACE=
"Calibri"><B>Sobrenome</B></TD><TR><TD><FONTFACE=
"Calibri">Anna</FONT></TD><TD><FONTFACE="Calibri">Santos</FONT></TD><TRBGCOLOR=

#E0EEEE><TD><FONTFACE="Calibri">Vanessa</FONT></TD><TD><FONTFACE=
"Calibri">Medeiros</FONT></TD></TABLE></BODY>
</HTML>

Atributos da tag TD

Agora, vamos analisar os atributos da tag TD. Podemos mudar as propriedades das
clulas utilizando os seguintes atributos:

Mdulo 02 - Criando e formatando formulrios


Introduo

No mdulo anterior voc aprendeu a trabalhar com a tag <TABLE> e seus principais
atributos.
Neste, aprender a criar formulrios. O formulrio permite ao usurio interagir com o
responsvel pelo site.
Para isso, os itens abordados sero:

O que um formulrio?

O formulrio nada mais que um questionrio que permite


ao usurio participar de uma pesquisa, se cadastrar
em sites diversos,

entrar

em

contato

para

esclarecer

dvidas, realizar compras, entre tantas outras opes.


Por exemplo, aqui na Escola Virtual ns usamos um
formulrio para receber seus dados quando voc se
cadastrou.
No entanto, os formulrios apenas coletam os dados, sem
process-los. Quem faz isso so scriptsde processamento
(programas armazenados no servidor) e o navegador exibe
o resultado em sua janela.
Neste mdulo, trataremos apenas da criao do formulrio.

Criando um formulrio

Para que voc possa criar um formulrio em HTML, utilize a tag FORM.
A sintaxe fica assim:
<FORM atributos>
(contedo do formulrio)
</FORM>

Entre as tags que iniciam e encerram o formulrio, voc deve inserir as tags que criam
campos de entrada, formatam o texto e fornecem instrues sobre o que fazer com os
dados que so inseridos.
Nas prximas telas, voc conhecer os atributos datag <FORM>.

Atributo ACTION

O primeiro atributo utilizado com a tag <FORM> o ACTION. Ele especifica a URL
do script que processar os dados do formulrio.
A sintaxe a seguinte: <FORM ACTION = "URL">
Observe os exemplos abaixo:

Atributo METHOD

O atributo METHOD especifica a maneira de envio dos dados do formulrio para o


servidor web, para que sejam processados.
Existem dois mtodos que podem ser utilizados: POST e GET.
METHOD="POST"
Se o valor do atributo METHOD for definido como POST, o navegador enviar diretamente
o fluxo de dados para o script CGI (*) no servidor web. mais utilizado, porque permite a
transmisso de uma maior quantidade de dados ao servidorweb.
O script Common Gateway Interface (CGI) um padro utilizado por servidores web para
transmitir o pedido de um usurio para um programa de aplicao e repassar os dados de
resposta de volta ao usurio. Funciona como uma ponte entre o usurio e a aplicao web.
(*)

METHOD="GET"
Por outro lado, se o atributo METHOD for definido como GET, o fluxo de dados ser
anexado URL especificada no atributo ACTION e enviado ao servidor como uma
nica URL. O valor GET utilizado para respostas nicas, como uma string de texto.
Caso voc tenha de utilizar um script, verifique qual o melhor mtodo para que as
informaes sejam enviadas a ele.
A sintaxe completa da tag <FORM> fica assim: <FORM ACTION="url" METHOD="get"
ou "post">

Objetos do formulrio

Um formulrio composto por vrios elementos responsveis por receber as informaes


inseridas pelo usurio.
Essas informaes so de diferentes tipos de entrada, como:

Tag INPUT e seus atributos

Voc utilizar a tag <INPUT> para criar os diferentes tipos de campos de entrada de dados
no formulrio. Veja alguns de seus atributos:

Os possveis valores de TYPE

O atributo TYPE, como comentamos, especifica o tipo de controle ou de campo que ser
criado. Portanto, voc j deve ter entendido que ele o mais importante.
Imagine criar um controle tipo texto para armazenar datas de nascimento. Seria bem difcil
consultar, por exemplo, os usurios com determinada idade, no mesmo?
Observe, ao lado, os tipos de controle de entrada que podem ser criados.
O valor do atributo TYPE no deve ser inserido entre aspas. Caso nenhum valor seja
definido, o campo ser criado como texto.

Inserindo um campo texto

Neste mdulo, voc aprender a adicionar um campo de texto, um campo de senha e


um campo oculto no formulrio.
Por exemplo, em um formulrio de compras on-line, podemos usar um campo de texto para
receber

o nome

do

cliente.

Para

isso,

voc

usa

valor TEXT no

atributo TYPE da tag <INPUT>.


A sintaxe para adicionar o campo do nome do cliente exibida abaixo:

Atributo VALUE

Por padro, os navegadores exibem uma caixa de texto vazia no formulrio. Caso exista a
necessidade de exibir um texto padro, deve-se usar o atributo VALUE, como exemplificado
abaixo:
<INPUT TYPE = text NAME="uf" SIZE="2" VALUE ="SP">
<HTML><HEAD><TITLE>Valorpadro</TITLE></HEAD>

<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=TEXTNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Estado:<INPUTTYPE
=textNAME="uf"SIZE="2"VALUE="SP"></FONT></P></FORM></BODY>
</HTML>

Inserindo um campo de senha

Agora, vamos demonstrar como adicionar um campo de senha em um formulrio. Este tipo
de campo utilizado para que as informaes inseridas no sejam exibidas na tela.
Por exemplo, em um formulrio de compra on-line, usa-se o campo de senha para que o
usurio

entre

com

os

dados

sem

que

ningum

veja.

Para

isso,

utilizado

valor PASSWORD no atributo TYPE.


A sintaxe para adicionar um campo de senha em um formulrio est exibida abaixo.
<INPUT TYPE=password NAME="cartao" SIZE="16">
Observe, ao lado, o cdigo e sua visualizao no navegador.
<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P></FORM></BODY>
</HTML>

Inserindo botes de escolha nica

Radio buttons so utilizados para permitir ao usurio selecionar uma opo nica entre
um conjunto de opes exibidas em um formulrio.
Por exemplo, no formulrio de pedido on-line, voc pode usar um conjunto de radio
buttons para verificar a bandeira do carto de crdito utilizado pelo cliente.
Para

adicionar

um radio

button em

um

formulrio,

usado

valor RADIO no

atributo TYPE da tag INPUT. A sintaxe a seguinte:


<INPUT TYPE=radio NAME="varivel">
Para exibir

uma

das

opes

selecionadas

como

padro,

usamos

atributo CHECKED na tag<INPUT>.


<INPUT TYPE=radio NAME="varivel" CHECKED>valor
<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P><P>Selecioneabandeiradocartodecrdito:<BR><INPUT

TYPE=radioNAME="vi"CHECKED>VISA<BR><INPUTTYPE=radio
NAME="mst">MASTERCARD</P></FORM></BODY>
</HTML>

Voc pode usar a tag <BR> para deixar cada opo em uma linha.
Inserindo botes de mltipla escolha

Agora, voc ver como adicionar um conjunto de checkboxes (botes de mltipla escolha)
para permitir ao usurio selecionar vrias opes.
Em um formulrio de pedido on-line, podemos usar umconjunto de checkboxes para obter a
informao sobre os horrios de entrega do pedido.
Para adicionar um checkbox, basta especificar o valor CHECKBOX no atributo TYPE.
A sintaxe deste comando assim:
<INPUT TYPE=checkbox" NAME="VARIVEL">valor
<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P><P>Selecioneabandeiradocartodecrdito:<BR><INPUT
TYPE=radioNAME="vi"CHECKED>VISA<BR><INPUTTYPE=radio
NAME="mst">MASTERCARD</P><P>Selecionehorriodeentrega:<BR><INPUTTYPE=checkbox
NAME="horario1"SIZE="1">8hs12h<BR><INPUTTYPE=checkboxNAME="horario2"
SIZE="1">13hs15h<BR><INPUTTYPE=checkboxNAME="horario2"SIZE="1">16hs
18h</P></FORM></BODY>
</HTML>

Assim como no boto RADIO, podemos escolher uma opo (ou mais), para aparecer
selecionada por padro. Para isto, basta adicionar a palavra CHECKED dentro
da tag INPUT desejada.

Inserindo uma rea de texto

Vamos verificar como adicionar uma rea de texto maior em um formulrio, para receber
vrias linhas de texto. Podemos utilizar este campo para registrar a referncia do endereo
de um cliente.
A tag <TEXTAREA></TEXTAREA> a responsvel pela criao desse campo especial.
Os atributos ROWS, que especifica o nmero de linhas (altura) e COLS, que especifica o
nmero de colunas (largura) da rea de texto, so utilizados com essa tag. A sintaxe est
exibida abaixo:
<TEXTAREA NAME = "nome" ROWS = "nmero" COLS = "nmero"
NAME="varivel"> Descrio </TEXTAREA>
Observe o exemplo ao lado.

<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P><P>Selecioneabandeiradocartodecrdito:<BR><INPUT
TYPE=radioNAME="vi"CHECKED>VISA<BR><INPUTTYPE=radio
NAME="mst">MASTERCARD</P><P>Selecionehorriodeentrega:<BR><INPUTTYPE=checkbox
NAME="horario1"SIZE="1">8hs12h<BR><INPUTTYPE=checkboxNAME="horario2"
SIZE="1">13hs15h<BR><INPUTTYPE=checkboxNAME="horario2"SIZE="1">16hs
18h</P><P>Endereo:<INPUTTYPE=TEXTNAME="end"SIZE="30"</P><P>Referncia:
<TEXTAREANAME="ref"ROWS="2"COLS="40"></TEXTAREA></P></FORM></BODY>
</HTML>

Botes SUBMIT e RESET


<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P><P>Selecioneabandeiradocartodecrdito:<BR><INPUT
TYPE=radioNAME="vi"CHECKED>VISA<BR><INPUTTYPE=radio
NAME="mst">MASTERCARD</P><P>Selecionehorriodeentrega:<BR><INPUTTYPE=checkbox
NAME="horario1"SIZE="1">8hs12h<BR><INPUTTYPE=checkboxNAME="horario2"
SIZE="1">13hs15h<BR><INPUTTYPE=checkboxNAME="horario2"SIZE="1">16hs
18h</P><P>Endereo:<INPUTTYPE=TEXTNAME="end"SIZE="30"</P><P>Referncia:
<TEXTAREANAME="ref"ROWS="2"COLS="30"></TEXTAREA></P><INPUTTYPE=submit
VALUE="Enviar"><INPUTTYPE=resetVALUE="Limpar"></FORM></BODY>
</HTML>

Em um formulrio, o boto SUBMIT envia ao servidor web a informao digitada pelo


usurio para ser processada pelo script CGI correspondente.
Para criar um boto de enviar, usamos o valor SUBMIT no atributo TYPE da tag INPUT.
Para trocar o texto padro do boto, insira o atributo VALUE e defina o novo texto, como
demonstrado abaixo:
<INPUT TYPE=submit VALUE="Enviar">

O boto RESET limpa as entradas que foram feitas em um formulrio, ou seja, apaga as
informaes inseridas em todos os campos.
Para

adicionar

um

boto RESET em

um

formulrio,

utilize

valor RESET no

atributoTYPE da tag INPUT.


Tambm possvel mudar o texto padro, utilizando-se o atributo VALUE e o texto
desejado, conforme ilustrado abaixo:

<INPUT TYPE=reset VALUE="Limpar">

Inserindo um campo oculto

Agora, voc ver como adicionar um campo oculto em um formulrio para enviar uma
palavra-chave, um nmero de validao ou qualquer string, para oscript CGI.
Por exemplo, no formulrio de pedidos on-line, podemos utilizar um campo oculto para
enviar uma palavra-chave, que valide o nmero do CPF do cliente.
Para adicionar este campo, incluimos o valor HIDDEN no atributo TYPE.
A sintaxe fica assim:
<INPUT TYPE=HIDDEN NAME="VARIVEL" VALUE="VALOR">

<HTML><HEAD><TITLE>Camposenha</TITLE></HEAD>
<BODY><FORMACTION="email@email.com"METHOD="get"><P><FONTFACE="CALIBRI">Nome:
<INPUTTYPE=textNAME="nome"SIZE="25"MAXLENGHT="50"></P><P>Ndocartodecrdito
<INPUTTYPE=textNAME="nun_cartao"SIZE="16"></P><P>Senha:<INPUTTYPE=password
NAME="senha"SIZE="6"></P><P>Selecioneabandeiradocartodecrdito:<BR><INPUT
TYPE=radioNAME="vi"CHECKED>VISA<BR><INPUTTYPE=radio
NAME="mst">MASTERCARD</P><P>Selecionehorriodeentrega:<BR><INPUTTYPE=checkbox
NAME="horario1"SIZE="1">8hs12h<BR><INPUTTYPE=checkboxNAME="horario2"
SIZE="1">13hs15h<BR><INPUTTYPE=checkboxNAME="horario2"SIZE="1">16hs
18h</P><P>Endereo:<INPUTTYPE=TEXTNAME="end"SIZE="30"</P><P>Referncia:
<TEXTAREANAME="ref"ROWS="2"COLS="30"></TEXTAREA></P><INPUTTYPE=submit
VALUE="Enviar"><INPUTTYPE=resetVALUE="Limpar"><INPUTTYPE=hiddenNAME="cpf"
VALUE="verdadeiro"></FORM></BODY>
</HTML>

Lista de opes ou menu?

Se voc precisar apresentar vrias opes para o usurio e no tiver muito espao para isso,
voc pode utilizar uma lista de opes ou um menu.
Ambas

as

opes

so

criadas

pela

mesma tag<SELECT></SELECT>.

exemplos ao lado e analise a diferena entre eles.

Observe

os

Lista de opes e menus

A lista de opes serve para controlar o nmero de opes exibidas, pois possvel definir
sua altura com o atributo SIZE. Observe abaixo:
<HTML><HEAD><TITLE>Listadeopes</TITLE></HEAD>
<BODY><H3>EXEMPLODELISTADEOPES</H3><H4>Escolhaacidadequedeseja
conhecer</H4><FORM><SELECTNAME="cidades"
SIZE="4"><OPTION>Londres<OPTION>Paris<OPTION>Roma<OPTION>Madri</SELECT></FORM></BODY>
</HTML>

possvel transformar a lista de opes em um menu, caso o espao disponvel seja


pequeno.

A diferena do menu para a lista de opes que apenas uma linha com uma seta para
baixo exibida quando o navegador carrega o formulrio.
<HTML><HEAD><TITLE>Menudeopes</TITLE></HEAD>
<BODY><H3>EXEMPLODEMENU</H3><H4>Escolhaacidadequedeseja
conhecer</H4><FORM><SELECT
NAME="cidades"><OPTION>Londres<OPTION>Paris<OPTION>Roma<OPTION>Madri</SELECT></FORM><
/BODY>
</HTML>

Consegue perceber a diferena do anterior?

Exerccio

Com base nos conhecimentos adquiridos nos mdulos 1 e 2, desenvolva um cdigo HTML
que crie um formulrio de cadastramento, de acordo com a imagem ao lado.

Aps concluir, salve o arquivo como Exerc1.html e visualize-o no


navegador.
Como voc j sabe, publicaremos o cdigo que gerou o formulrio ao
final do curso.

Mdulo 03 - Criando e formatando frames


Introduo

No mdulo anterior, voc aprendeu a trabalhar com formulrios e seus principais campos.
Neste mdulo, aprender a criar e formatar frames. Os frames dividem a pgina web,
possibilitando a utilizao de vrios documentos HTML.
Para isso, abordaremos os temas:

Frames: o que so e para que servem

Frames ou molduras so utilizados para dividir a janela do navegador em diferentes partes


e, cada uma delas, pode ser atualizada separadamente, pois carrega um documento HTML
diferente.
Frames so como moldes onde as pginas web so obrigadas a se encaixar.
O Frame Document ou Frameset o arquivo que define a estrutura e a distribuio
dos frames do site. Normalmente, este arquivo contm a pgina principal.
Para entender melhor o conceito, passe a lupa sobre a imagem ao lado e observe que
cada frame est delineado por uma cor diferente.

A tag FRAMESET

Para criar frames, voc usa a tag <FRAMESET> no lugar da tag <BODY>.
Observe o cdigo abaixo e o resultado no navegador.
<HTML><HEAD><TITLE>Frames</TITLE></HEAD>
<BODY><FRAMESETCOLS="25%,*,25%"><FRAMESRC="frame_a.html"><FRAME
SRC="frame_b.html"><FRAMESRC="frame_c.html"></FRAMESET></BODY>
</HTML>

Observe que o cdigo contm instrues para cadaframe abrir um documento diferente.
Alm disso, na tag <FRAMESET>, voc define o tamanho(*) de cada um dos frames com os
atributosCOLS e ROWS que especificam, respectivamente, a largura e a altura dos frames.
O primeiro e terceiro frames esto especificados como 25% do tamanho da tela.
O asterisco (*)colocado no do meio, indica que ele usar o espao restante, que neste
caso de 50%.
Tanto a altura quanto a largura dos frames podem ser especificados em pixels ou

(*)

porcentagem.

A tag FRAME

Como voc observou na tela anterior, utilizamos a tag FRAME com a tag FRAMESET.
Os atributos que voc pode usar com a tag FRAME para carregar uma pgina web so:

O atributo NAME

Agora

voc

aprender

no frame desejado.

apontar frames,

ou

seja,

direcionar

o link para

abrir

Quando usamos frames, podemos querer manter o contedo de um e carregar as


pginas web em outro. Para fazer isto, apontamos o link para umframe.
O frame em que o contedo permanece constante chamado de esttico e o outro, no qual
o contedo muda, chamado de dinmico.
Para apontar frames, voc precisa primeiro especificar nomes para os frames, usando o
atributoNAME com a tag FRAME.
O cdigo que voc usa para especificar o nomeMain para um frame que exibir o
arquivo phil.html <FRAME SRC="phil" NAME ="main">.

Apontando um frame

Depois de especificar um nome para um frame, voc pode especific-lo como o frame alvo
em um link.
Para isto, voc usa o atributo TARGET com a tag (ANCHOR - LINK).
A sintaxe fica assim: <A HREF="URL" TARGET="nome_frame">
O atributo TARGET possui quatro valores, veja:

Por exemplo, para abrir o documento exemplo.html em outra janela, devemos inserir o
seguinte cdigo no documento: <A HREF="exemplo.html" TARGET="_blank"> Clique
aqui </A>.

Mdulo 04 - Incrementando a pgina web


Introduo

Parabns, voc chegou ao ltimo mdulo do curso de HTML - Avanado!


No

mdulo

anterior

voc

aprendeu

trabalhar

com frames para

deixar

sua

pgina web ainda mais atrativa.


Agora, voc utilizar alguns atributos para auxiliar na documentao de sua pgina web.
O contedo abordado ser:

A tag META e seus atributos

Metadados so informaes sobre seus dados. Neste caso, a tag <META> fornece dados
sobre seu documento HTML.
Estes dados, no entanto, no so exibidos para o usurio final. Eles servem para descrever
as definies da pgina, palavras-chave, informaes sobre o autor, quando foi a ltima
modificao e outras informaes relevantes.
A tag <META> deve ser inserida entre as tags<HEAD> e </HEAD>.
Todos os dados podem ser utilizados pelos navegadores, sistemas de busca e outros
servios.
Vamos descobrir como inserir estas informaes na pgina?

O atributo CONTENT

O atributo CONTENT aceita somente texto e especifica o contedo da informao META.


Seu valor depende do valor dos atributos NAME ou HTTP-EQUIV. Veja, abaixo, os dois
casos:
NAME
O atributo NAME fornece um nome para a informao no atributo CONTENT.
<META NAME="author" CONTENT="Joo da Silva">

O atributo CONTENT ="Joo da Silva" refere-se ao nome do autor, especificado em NAME.


A sintaxe <META NAME =valor relativo name>
Os valores do atributo NAME podem ser:

HTTP-EQUIV
O

atributo HTTP-EQUIV fornece

um cabealhoHTTP

para

informao

atributo CONTENT.
<META HTTP-EQUIV="content-type" CONTENT="text/html" CHARSET=UTF-8>
Este exemplo define o tipo de contedo da pgina e o tipo de codificao.
A sintaxe <META HTTP-EQUIV =valor>
Os valores do atributo HTTP-EQUIV podem ser:

Por exemplo, a sintaxe para recarregar uma pgina automaticamente <META


HTTP_EQUIV="REFRESH" CONTENT="segundos" URL="novo_URL">

no

Exerccio resolvido

Para fixar ainda mais o seu aprendizado, revise e compare o exerccio que desenvolveu no
decorrer do curso com o exerccio resolvido, disponvel a seguir:

EXERCCIO
Com base nos conhecimentos adquiridos nos mdulos 1 e 2, desenvolva um cdigo HTML
que crie um formulrio de cadastramento, de acordo com a imagem abaixo.

Aps concluir, salve o arquivo como Exerc1.html e visualize-o no navegador.


Como voc j sabe, publicaremos o cdigo que gerou o formulrio ao final do curso.

SOLUO DO EXERCCIO

<HTML>
<HEAD>
<TITLE>Cadastro</TITLE>
</HEAD>
<BODY>
<P><FONT COLOR = "#0080FF" SIZE = "5" FACE ="VERDANA">Formulrio para
cadastro</FONT></P>
<FORM NAME = "Form1" METHOD="post" ACTION="envia.php">
<TABLE WIDTH ="100%" BORDER="0" CELLSPACING="5">
<TR>
<TD WIDTH = "13%">Nome</TD>
<TD WIDTH = "87%"><INPUT TYPE = text NAME="nome"></TD>
</TR>
<TR>
<TD>E-mail</TD>
<TD><INPUT TYPE = text NAME="email"></TD>
</TR>
<TR>
<TD>Sexo</TD>
<TD><INPUT TYPE = radio NAME="sexo" VALUE = "fem">Feminino
<INPUT TYPE = radio NAME="sexo" VALUE =
masc">Masculino</TD>
</TR>
<TR>
<TD>RG</TD>
<TD><INPUT TYPE = text NAME="rg"></TD>
</TR>
<TR>
<TD>CPF</TD>
<TD><INPUT TYPE = text NAME="cpf"></TD>
</TR>
<TR>
<TD>Login</TD>
<TD><INPUT TYPE = text NAME="login"></TD>
</TR>
<TR>
<TD>Senha</TD>
<TD><INPUT TYPE = password NAME="senha"></TD>
</TR>
<TR>
<TD><INPUT TYPE = submit NAME="enviar" VALUE = "Enviar"></TD>
<TD><INPUT TYPE = reset NAME="limpar" VALUE = "Limpar"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>