Curso HTML

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.
<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

<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=
</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=
</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.
<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>
<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
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
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.
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

<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.
<INPUT TYPE=HIDDEN NAME="VARIVEL" VALUE="VALOR">
<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>

Curso HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

CURSO HTML

Mdulo 01 - Criando e formatando tabelas

Bem-vindo ao curso de HTML - Avanado.

Por que utilizar tabelas em HTML?

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

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

<TR> - responsvel por criar as linhas

Voc ver, nas prximas telas, esses atributos.

atributos BORDER e BORDERCOLOR.

Atributos WIDTH e HEIGHT

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

WIDTH - define a largura

HEIGHT - define a altura

A sintaxe fica assim:

Atributos WIDTH e HEIGHT

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

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

Mdulo 02 - Criando e formatando formulrios

O formulrio nada mais que um questionrio que permite

dvidas, realizar compras, entre tantas outras opes.

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

Um formulrio composto por vrios elementos responsveis por receber as informaes

Tag INPUT e seus atributos

Os possveis valores de TYPE

Inserindo um campo texto

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

atributo TYPE da tag <INPUT>.

Inserindo um campo de senha

valor PASSWORD no atributo TYPE.

Inserindo botes de escolha nica

atributo TYPE da tag INPUT. A sintaxe a seguinte:

atributo CHECKED na tag<INPUT>.

Inserindo uma rea de texto

Botes SUBMIT e RESET

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

atributoTYPE da tag INPUT.

<INPUT TYPE=reset VALUE="Limpar">

Inserindo um campo oculto

Lista de opes ou menu?

exemplos ao lado e analise a diferena entre eles.

Lista de opes e menus

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

Consegue perceber a diferena do anterior?

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

Mdulo 03 - Criando e formatando frames

Frames: o que so e para que servem

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

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

Mdulo 04 - Incrementando a pgina web

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

com frames para

pgina web ainda mais atrativa.

A tag META e seus atributos

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

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

atributo HTTP-EQUIV fornece

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

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

Anda mungkin juga menyukai