Vous êtes sur la page 1sur 68

Curso de HTML

Daniel Destro do Carmo


Softech Network Informtica
daniel@danieldestro.com.br
Curso de HTML
Ob]etivo do curso
Definies conceituais
O que HTML?
Criando e publicando uma pgina web
Elementos da HTML
Estrutura bsica de uma pgina HTML
Meta-informaes da HTML
Formatando contedo
Cores
Listagens
Imagens
Links e ncoras
Tabelas
Formulrios e componentes
Frames
Curso de HTML
Definies conceituais
World Wide Web (WWW)
uma rede pblica de computadores que suporta o protocolo HTTP.
HTTP
Hyper Text Transfer Protocol
o protocolo de comunicao entre um cliente WWW (navegador) e um
servidor WWW.
HTTPS
HTTP over Secure-Socket Layer
o protocolo HTTP sobre uma camada segura para transferncia de dados.
Muito usada por sites de bancos e comrcio eletrnico.
HTML
Hyper Text Markup Language
uma linguagem de marcao utilizada para desenhar pginas web.
Curso de HTML
O que HTML?
A HTML uma linguagem simples que mistura contedo textual e marcaes (tags).
usada para exibir contedo formatado num cliente web (navegador) e tambm
para interagir com sistemas baseadas na web, hospedados em um servidor.
As tags de marcao so usadas para descrever:
aparncia
posicionamento (layout)
contedo
e elementos na pgina (ex.: formulrios, imagens etc.)
As tags so formadas assim: <nome_da_tag [parmetros] ... >
Cada pgina web (ou HTML) representada por um arquivo com a extenso .html
ou .htm.
A especificao da HTML definida e mantida pelo consrcio W3C, e atualmente
est na verso 4.0.
Curso de HTML
O que HTML?
<html>
<head>
<title>P&aacute;gina de Exemplo</title>
</head>
<body bgcolor="white">
<center>
<h1>P&aacute;gina HTML de Exemplo</h1>
</center>
<hr>
<table align="center" border="1" cellpadding="3" cellspacing="1">
<tr>
<td><img src="http://claws.tupia.net/photos/tyler-hello.jpg" width="171" height="144"></td>
<td valign="top">
Este adorvel gatinho se chama <b>Kit Kat</b>.<br>
O gato da espcia <i>Persa</i>, muito comum no Brasil.<br>
<a href="http://www.google.com.br/search?q=gatos">
Clique aqui para saber mais sobre os gatos.
</a><br>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="yellow" align="center">
<font face="Arial">
Quer aprender mais <b><i>HTML</i></b>? Continue lendo...
</font>
</td>
</tr>
</table>
<br>
Os gatos so timos animais de estimao para apartamentos e locais pequenos, apesar
de adorarem seu prprio espao e sarem vagando por a durante a noite.
</body>
</html>
Curso de HTML
Criando e publicando uma pagina web
Criao
A tarefa de criao de uma pgina web no requer nenhum programa em especial,
pois se trata de um simples arquivo texto com a extenso .html ou .htm.
Porm existem bons programas grficos que facilitam a criao de pginas mais
profissionais, e acabam dando maior produtividade criao.
Macromedia Dreaweaver
Curso de HTML
Criando e publicando uma pagina web
Publicao
Uma pgina HTML pode ser aberta em qualquer navegador existente, diretamente
do disco rgido, porm a sua publicao na web depende da disponibilizao da
pgina por meio da um programa de servidor de pginas web, conhecido como
webserver, que deve estar disponvel e visvel na WWW (internet), com IP pblico.
Os servidores web geralmente trabalham na porta 80 do protocolo TCP/IP, e ficam
escutando as requisies HTTP e atendem enviando a pgina solicitada ao cliente
que fez a requisio. O navegador o responsvel por exibir as pginas.
Curso de HTML
Elementos da HTML
Estrutura
html, head, body, div, span
Meta-Informao
DOCTYPE, title, link, meta, style
Formatao
h1, h2, h3, h4, h5, h6, p, strong, em, abbr, acronym
address, bdo, blockquote, cite, q, code, ins, del, dfn
kbd, pre, samp, var, br, center, b, i, tt, sub, sup, big,
small, hr
Links
a, base
Imagens and Objetos
img, area, map, object, param
Curso de HTML
Elementos da HTML
Listas
ul, ol, li, dl, dt, dd
Tabelas
table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption
Formulrios
form, input, textarea, select, option, optgroup, button,
label, fieldset, legend
Script
script, noscript
Curso de HTML
Estrutura basica de uma pagina HTML
Toda pgina HTML deve ser formada por uma estrutura bsica de tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
O contedo da pgina vai aqui...
</body>
</html>
Crie um arquivo chamado teste.htm, salve-o com o contedo acima e abra em um
navegador web para ver o resultado.
O cdigo acima define uma pgina HTML, na verso 4.01, contendo um ttulo e uma
simples mensagem no corpo da pgina. A seguir descrevemos cada tag utilizada.
Curso de HTML
DOCTYPE
Declara o tipo do documento e a verso do HTML. Deve ser o primeiro elemento
da pgina.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML
Elemento raz da pgina, que delimita todos os elementos da pgina. Deve
conter a marcao de incio e de fim (ltima tag do documento) e ser nico na
pgina. Todos os outros elementos vo dentro dele.
<html>
...
</html>
Estrutura basica de uma pagina HTML
Curso de HTML
HEAD
Define o cabealho da pgina. Deve ser nico na pgina e vir logo aps HTML.
TITLE - Define o ttulo da pgina, que aparece na barra do navegador.
BASE - Define o local base para os links da pgina.
META - Usado para descrever informaes sobre a pgina.
BGSOUND - Define um fundo musical.
SCRIPT - Usado para definir um bloco de linguagem script.
NOSCRIPT - Define contedo quando o navegador no aceita scripts.
STYLE - Usado para definir um estilo (CSS) na prpria pgina.
LINK - Faz uma referncia (link) a um recurso externo (geralmente um CSS).
Estrutura basica de uma pagina HTML
Curso de HTML
<head>
<title>Ttulo da pgina</title>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="keywords" content="curso, html">
<bgsound src="musica.mid">
<script type="text/javascript" src="meu_script.js"></script>
<script type="text/javascript">
function exibirMensagem() {
alert("Ol Mundo!");
}
</script>
<noscript>
<p>JavaScript desativado!</p>
</noscript>
<style type="text/css">
body {
color: red;
background-color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
HEAD
Estrutura basica de uma pagina HTML
Curso de HTML
BODY
Define o corpo da pgina. Tudo o que estiver dentro dele o que ser
apresentado no navegador. Deve vir logo aps a tag HEAD.
Esta tag aceita inmeros parmetros que definem caractersticas da pgina.
BGCOLOR - define a cor de fundo da pgina.
TEXT - define a cor padro do texto.
LINK - define a cor padro dos links.
ALINK - define a cor padro dos links ativos.
VLINK - define a cor padro dos links visitados.
BACKGROUND - define a imagem de fundo.
LEFTMARGIN - define a margem esquerda.
RIGHTMARGIN - define a margem direita.
TOPMARGIN - define a margem superior.
MARGINWIDTH - define a margem esquerda (netscape).
MARGINHEIGHT - define a margem superior (netscape).
ONLOAD nome do mtodo JavaScript a ser chamado quando a pgina for
carregada.
Estrutura basica de uma pagina HTML
Curso de HTML
BODY
<body bgcolor="white" text="black" link="red" alink="yellow" vlink="green"
leftmargin="1" rightmargin="1" topmargin="1" marginwidth="1"
marginheight="1" onLoad="exibirMensagens();">
O contedo da pgina vai aqui.
</body>
Estrutura basica de uma pagina HTML
Curso de HTML
Meta-informaes da HTML
META
Existem tags que so destinadas a descrever informaes sobre o documento
(pgina) teis para sistemas de busca e indexao alm de fazer
redirecionamento de pginas, atualizaes automticas etc.
So as chamadas META TAG, ou tags de meta-informao.
Estas tags devem ser posicionadas dentro da tag HEAD e no so obrigatrias.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Nome do autor">
<meta name="description" content="Pgina sobre tal assunto">
<meta name="keywords" content="isso, aquilo, fulano, ciclano">
<meta http-equiv="refresh" content="15">
</head>
Curso de HTML
Formatando contedo
H1 ... H6
As tags H? formatam o texto como um cabealho ou tpico na pgina. A tag H1 tem
um tamanho de fonte maior, indo at a H6, que tem um tamanho menor.
<body>
<h1>Tpico 1</h1>
Algum texto aqui...
<h2>Tpico 2</h2>
Outro texto aqui...
<h4>Tpico 4</h4>
Mais texto ali...
<h6>Tpico 6</h6>
E mais texto acol...
</body>
Curso de HTML
Formatando contedo
P
Um caracterstica da HTML que o texto no exibido no navegador exatamente da
mesma maneira como foi escrito no seu fonte, ou seja, quebras de linhas e mltiplos
espaos no so exibidos da mesma maneira em que foram escritos na pgina.
As tag P serve para demarcar pargrafos de texto. A tag P deve conter a marcao
de incio e fim, apesar dos navegadores aceitarem apenas a marcao de incio.
<body>
<p>Este um exemplo de pargrafo.</p>
<p>Aqui j comea um novo pargrafo do texto.</p>
</body>
Este um exemplo de pargrafo.
Aqui j comea um novo pargrafo do texto.
Curso de HTML
Formatando contedo
BR
A tag BR serve para marcar quebra de linha, j que a quebra de linha no fonte do
HTML no representado no navegador.
Esta tag no tem marcao de fim.
<body>
Linha 1 do texto.<br>
Esta a linha 2 do nosso texto.<br>
Terceira linha e assim por diante.
</body>
Linha 1 do texto.
Esta a linha 2 do nosso texto.
Terceira linha e assim por diante.
Curso de HTML
Formatando contedo
CENTER
A tag CENTER serve para centralizar qualquer tipo de elemento contido na sua
marcao, desde textos at tabelas e componentes de formulrio e imagens.
A centralizao baseada no espao de onde a tag est contida, por exemplo, a
pgina em s, uma clula de um tabela etc.
<body>
<center>Texto centralizado.</center>
Texto com posicionamento padro ( esquerda).
<center><img src="gatinho.jpg"></center>
</body>
Texto centralizado.
Texto com posicionamento padro ( esquerda).
Curso de HTML
Formatando contedo
PRE
A tag PRE exibe o contedo marcado exatamente da maneira como foi gravado no
fonte da pgina, respeitando espaos em branco, tabulaes e quebras de linhas.
muito til para, por exemplo, exibir trechos de cdigo de programao.
<body>
<pre>
public class MinhaClasse {
public MinhaClasse() {
}
public int calcular(int i, int j) {
if( i < j ) {
return i * i * j;
} else {
return i * j;
}
}
}
</pre>
</body>
public class MinhaClasse {
public MinhaClasse() {
}
public int calcular(int i, int j) {
if( i < j ) {
return i * i * j;
} else {
return i * j;
}
}
}
Curso de HTML
Formatando contedo
CODE
A tag CODE apresenta o texto marcado como diferenciado, denotando como um
trecho de cdigo, por exemplo.
<body>
O programa executado com o comando: <br>
<code>java cp . teste.Main</code>
</body>
O programa executado com o comando:
java cp . teste.Main
Curso de HTML
Formatando contedo
BLOCKQUOTE
A tag BLOCKQUOTE usada para fazer uma cotao de texto, ou seja, o texto fica
recuado direita, em relao ao texto que o precede e/ou sucede.
Outras tags podem ser aninhadas dentro desta tag.
<body>
Texto sem cotao.
<blockquote>Este texto pode ser uma citao.</blockquote>
E aqui continua o resto do texto.
</body>
Texto sem cotao.
Este texto pode ser uma citao.
E aqui continua o resto do texto.
Curso de HTML
Formatando contedo
B
A tag B marca um texto em negrito.
I
A tag I marca um texto em itlico.
U
A tag U marca um texto sublinhado.
<body>
Este o curso de <b>HTML</b>.<br>
Este o curso de <i>HTML</i>.<br>
Este o curso de <i><b>HTML</b></i>.<br>
Este o curso de <u>HTML</u>.
</body>
Este o curso de HTML.
Este o curso de HTML.
Este o curso de HTML.
Este o curso de HTML.
Curso de HTML
Formatando contedo
SMALL
A tag SMALL marca um texto menor.
BIG
A tag BIG marca um texto maior.
S
A tag S marca um texto riscado.
<body>
Texto <small>menor</small>. <br>
Texto <big>maior</big>. <br>
Texto <s>riscado</s>.
</body>
Texto menor.
Texto maior.
Texto riscado.
Curso de HTML
Formatando contedo
SUP
A tag SUP marca um texto sobrescrito.
SUB
A tag SUB marca um texto subscrito.
TT
A tag TT marca um texto de tele tipo.
<body>
Texto <sup>sobrescrito</sup>. <br>
Texto <sub>subscrito</sub>. <br>
Texto <tt>tele tipo</tt>.
</body>
Texto
sobrescrito
.
Texto
subscrito
.
Texto tele tipo.
Curso de HTML
Formatando contedo
FONT
A tag FONT define o tipo, tamanho e cor de fonte do texto marcado.
Esta tag aceita os seguintes parmetros:
SIZE define o tamanha da fonte, de 1 a 7.
COLOR define a cor da fonte.
FACE define o tipo da fonte.
<body>
Este texto
<font size="2" face="Arial" color="red">tem
<font size="4" color="green">uma fonte</font>
diferente</font>.
</body>
Este texto tem uma fonte diferente.
Curso de HTML
Formatando contedo
HR
A tag HR desenha uma linha horizontal na tela.
Os seguintes parmetros podem ser usados:
width largura da linha (expressa em pixels ou porcentagem).
size altura da linha.
color cor da linha.
<body>
Este o texto superior.
<hr>
Este o texto inferior.
</body>
Curso de HTML
Cores
As cores, em HTML, so expressas nas formas de nome pr-existente e,
principalmente como representaes hexadecimais dos nveis de cores RGB.
So 16 os nomes existentes de cores: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white e yellow.
Para todas as outras cores use o padro hexadecimal, que est na forma
#RRGGBB.
O primeiro caracter um #, os dois seguintes so a representao hexa do tom de
vermelho, os dois do meio o hexa do verde e os dois ltimos o hexa do tom de azul.
A mistura das trs cores gera outras muitas cores possveis. Exemplos:
#C0C0C0 #A52A2A #CC0099 #99FF00 #FF9900
#00CCFF #FFFFFF #CCCCCC #FFFF00 #00FFFF
#FF00FF #000000 #0000FF #00FF00 #FF0000
Curso de HTML
Listagens
Em HTML possvel usar dois tipos de listagens: ordenadas e no-ordenadas.
OL
Declara uma listagem ordenada (enumerada). Dever marcar o incio e o fim da
listagem e contar os itens listados dentro da sua marcao.
Aceita os atributos: TYPE (A, a, 1, I), START, COMPACT.
LI
Declara um item de uma listagem. Deve marcar o incio e o fim do item, apesar dos
navegadores aceitarem apenas a marcao inicial.
Aceita os atributos: TYPE, VALUE.
Curso de HTML
Listagens
OL / LI
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
1. Item 1
2. Item 2
3. Item 3
<ol type="I">
<li>Introduo ao HTML</li>
<li>Formatao</li>
<ol type="A">
<li>Textos
<ol type="a">
<li>B</li>
<li>FONT</li>
</ol>
</ol>
<li>Listagens</li>
<ol type="A">
<li>OL
<li>UL
</ol>
</ol>
I. Introduo ao HTML
II. Formatao
A. Textos
a. B
b.
FONT
III. Listagens
A. OL
B. UL
Curso de HTML
Listagens
UL
Declara uma listagem no-ordenada (com figuras) . Dever marcar o incio e o fim da
listagem e contar os itens listados dentro da sua marcao.
Aceita os atributos: TYPE (SQUARE, CIRCLE, DISC), COMPACT.
LI
Declara um item de uma listagem. Deve marcar o incio e o fim do item, apesar dos
navegadores aceitarem apenas a marcao inicial.
Aceita o atributo: TYPE.
Curso de HTML
Listagens
UL / LI
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Item 1
Item 2
Item 3
<ul type="disc">
<li>Introduo ao HTML</li>
<li>Formatao</li>
<ul type="square">
<li>Textos
<ul type="circle">
<li>B</li>
<li>FONT</li>
</ul>
</ul>
<li>Listagens</li>
<ul type="square">
<li>OL
<li>UL
</ul>
</ul>
Curso de HTML
magens
A apresentao de imagens totalmente suportada pela HTML.
As imagens no so gravadas (bytes) diretamente na pgina, mas possuem uma
referncia na pgina, que o navegador se encarrega de abrir uma nova thread de
processamento para baixar a imagem e exibi-la.
Os formatos de imagens suportados so: GIF e JPG, e em alguns navegadores o
formato PNG tambm aceito.
No abuse de muitas imagens, principalmente grandes e de alta qualidade, pois
pode causar lentido no trfego da rede, principalmente por causa do seu tamanho
(em bytes).
Curso de HTML
magens
IMG
A referncia imagem feita por meio da tag IMG.
Esta tag aceita os seguintes parmetros:
SRC Caminho da imagem - URL absoluta ou relativa (obrigatrio).
ALT Mensagem a ser exibida sobre a imagem (tooltip).
WIDTH Largura da imagem, em pixels.
HEIGHT Altura da imagem, em pixels.
BORDER Define a largura da borda da imagem ( 0 = sem borda ).
ALIGN Alinhamento da imagem em relao ao texto (LEFT, RIGHT, TOP,
BOTTOM, MIDDLE).
<img src="imagens/getjava.gif" width="88"
height="31" alt="Get Java">
Curso de HTML
magens
Alinhameto das imagens:
Curso de HTML
Links e ncoras
possvel se criar um vnculo (ou link) de uma pgina web para outra, bem como um
vnculo para qualquer outro recurso que possa estar disponvel local ou
remotamente, por meio de uma referncia.
Tanto um texto, quanto uma imagem podem ser vinculados a um outro recurso.
Quando um link criado, o texto ou imagem que possui o vnculo pode levar o
usurio ao recurso refernciado atravs de um simples clique do mouse em cima do
elemento vinculado.
Outra vantagens dos links a de poder posicionar a tela da pgina em um
determinado ponto. Isso muito til quando se tem um texto ou contedo extenso e
se deseja ir diretamente a um tpico ou ponto do texto. Isso feito atravs dos links
e das ncoras.
Clique aqui
Bl bl bl...
Pgina 2,
bem-vindo
Curso de HTML
Links e ncoras
A
Os links (ou hyperlinks) podem ser criados por meio da tag A.
Esta tag aceita os seguintes argumentos:
HREF Caminho para o recurso vinculado (absoluto ou relativo)
obrigatrio. Os caminhas absolutos precisam comear por http://.
TARGET Onde ser aberto o recurso. usado quando se usa frames em
HTML ou quando se quer abrir em uma nova janela. Aceita os valores: _BLANK
(nova janela), _SELF (mesma janela/frame), _TOP (frame principal), _PARENT
(frame pai). Na falta deste atributo, o vnculo aberto na mesmo janela/frame.
<a href="contato.htm">contato</a> <br>
<a href="mailto:email@servidor.com">Mande e-mail</a> <br>
<a href="vendas.htm"><img src="vendas.gif"></a> <br>
<a href="fotos/produto1.jpg" target= "_blank">Ver produto 1</a>
Curso de HTML
Links e ncoras
A
As ncoras tambm so criadas por meio da tag A, porm somente leva o atributo
NAME, que define o nome da ncora.
Para acessar uma ncora usa-se um sinal de # no HREF.
possvel direcionar para uma ncora da mesma pgina ou ir diretamente para uma
ncora de outra pgina.
<a href="#produtos">Ver produtos</a> <br>
... Um texto muito grande aqui ...
<a name="produtos">
... Texto sobre produtos aqui ...
<a href="vendas.htm#faturamento">Ver faturamento</a>
Curso de HTML
Tabelas
As tabelas so elementos da HTML que servem para organizar o layout da pgina e
tambm organizar dados e informaes.
So formadas por, basicamente, linhas e colunas.
Os dados (texto) ou outros elementos da HTML so posicionados dentro das clulas
da tabela.
As tabelas so formadas pelas tags TABLE, TR e TD, porm pode conter outras tags
auxiliares e tambm diversos atributos que formatam a tabela.
Linha
Coluna
Clula
Curso de HTML
Tabelas
TABLE
A tag TABLE define uma tabela.
Esta tag aceita os seguintes parmetros:
BORDER Largura da borda da tabela, em pixels (padro = 0).
WIDTH Largura da tabela, em pixels ou em percentual.
CELLPADDING Distncia, em pixels, da borda at o dado da clula.
CELLSPACING Distncia entre as clulas, em pixels.
RULES Define as linhas da tabela (NONE, ALL, ROWS, COLS).
ALIGN Define o alinhamento da tabela (CENTER, LEFT, RIGHT).
FRAME Define o desenho das bordas externas (BORDER, BOX, VOID,
ABOVE, BELLOW, HSIDES, VSIDES, LHS, RHS).
BACKGROUND Define uma imagem de fundo.
BGCOLOR Define a cor de fundo da tabela.
BORDERCOLOR Define a cor da borda.
BORDERCOLORDARK Define a cor escura da borda (apenas IE).
BORDERCOLORLIGHT Define a cor clara da borda (apenas IE).
Curso de HTML
Tabelas
TR
A tag TR define uma linha da tabela.
Esta tag aceita os seguintes parmetros:
HEIGHT Altura da linha, em pixels.
ALIGN Define o alinhamento horizontal na linha (CENTER, LEFT, RIGHT,
JUSTIFY).
VALIGN Define o alinhamento vertical na linha (MIDDLE, TOP,
BOTTOM).
BGCOLOR Define a cor de fundo da linha.
BACKGROUND Define uma imagem de fundo.
BORDERCOLOR Define a cor da borda.
BORDERCOLORDARK Define a cor escura da borda (apenas IE).
BORDERCOLORLIGHT Define a cor clara da borda (apenas IE).
Curso de HTML
Tabelas
TD
A tag TD define uma clula da tabela. Cada clula em uma linha define uma coluna.
Esta tag aceita os seguintes parmetros:
WIDTH Largura da clula, em pixels.
HEIGHT Altura da clula, em pixels.
ALIGN Define o alinhamento horizontal na linha (CENTER, LEFT, RIGHT,
JUSTIFY).
VALIGN Define o alinhamento vertical na linha (MIDDLE, TOP,
BOTTOM).
BGCOLOR Define a cor de fundo da linha.
BACKGROUND Define uma imagem de fundo.
NOWRAP Expande a clula para no haver quebra de texto.
Curso de HTML
Tabelas
TH
A tag TH define uma clula de cabealho da tabela. Cada clula em uma linha define
uma coluna. O texto do cabealho fica em negrito.
Esta tag aceita os seguintes parmetros:
WIDTH Largura da clula, em pixels.
HEIGHT Altura da clula, em pixels.
ALIGN Define o alinhamento horizontal na linha (CENTER, LEFT, RIGHT,
JUSTIFY).
VALIGN Define o alinhamento vertical na linha (MIDDLE, TOP,
BOTTOM).
BGCOLOR Define a cor de fundo da linha.
BACKGROUND Define uma imagem de fundo.
NOWRAP Expande a clula para no haver quebra de texto.
Curso de HTML
Tabelas
Tabela
<table border="1" bgcolor="#FFFF00" cellspacing="2" cellpadding="2">
<caption>Clientes</caption>
<tr height="30" bgcolor="#00FF00">
<th align="center">Nome</td>
<th align="center">Idade</td>
<th align="center">Saldo</td>
</tr>
<tr>
<td align="left">Marcos</td>
<td align="center">33</td>
<td align="right">$ 1.000,00</td>
</tr>
<tr>
<td align="left">Rose</td>
<td align="center">28</td>
<td align="right">$ 1.500,00</td>
</tr>
<tr>
<td align="left">Srgio</td>
<td align="center">30</td>
<td align="right">$ 99,99</td>
</tr>
</table>
Curso de HTML
Tabelas
COLSPAN e ROWSPAN
Os atributos COLSPAN e ROWSPAN da tag TD e TH servem para:
COLSPAN Agrupa clulas em uma s, mesclando colunas.
ROWSPAN Agrupa clulas de uma coluna em uma s linha.
Curso de HTML
Tabelas
Tabela com clulas agrupadas.
<table border="1" bgcolor="#FFFF00" cellspacing="2" cellpadding="2">
<caption>Clientes</caption>
<tr bgcolor="#00FF00">
<th align="center" rowspan="2">Nome</td>
<th align="center" colspan="2">Endereo</td>
</tr>
<tr bgcolor="#00FF00">
<th align="center">Rua</td>
<th align="center">Nro.</td>
</tr>
<tr>
<td align="left" rowspan="2">Marcos</td>
<td align="center">Av. Paulista</td>
<td align="right">1000</td>
</tr>
</tr>
<tr>
<td align="center">Av. Nove de Julho</td>
<td align="right">4230</td>
</tr>
...
</table>
Curso de HTML
Formularios e componentes
Os formulrios e seus componentes do ao usurio a capacidade de inserir dados e
envi-los ao servidor, como uma forma de interao.
A HTML fornece suporte a um nmero limitado de componentes, comuns aos
componentes existentes em outras plataformas (VB, Delphi, Java etc).
Os componentes disponveis so:
Campos de texto e senha.
Lista de seleo (combo e lista)
Botes
Botes de radio
Caixas de seleo (checkbox)
Seleo de arquivos
Elementos como rvores (trees) e Tabela (estilo Excel) no existem na HTML.
Curso de HTML
Formularios e componentes
FORM
A tag FORM define o incio e o fim de um formulrio. O formulrio pode estar dentro
de uma tabela ou outros elementos, alm de poder conter outros elementos da
HTML dentro de s.
Esta tag aceita os seguintes parmetros:
ACTION Define a URL do recurso para onde sero enviados os dados.
METHOD Define o mtodo de envio (POST, GET).
NAME Nome do formulrio. Para identificar, caso haja mais de um na
pgina.
ENCTYPE Especifica o MIME Type usado para codificar os dados do
formulrio. Quando se deseja enviar arquivos, deve ser multipart/form-data. O
padro application/x-www-form-urlencoded.
Curso de HTML
Formularios e componentes
TEXTFIELD
O textfield um campo usado para a digitao de um texto.
formado pela tag INPUT, com o atributo TYPE=TEXT.
Aceita os seguintes parmetros:
NAME Nome do campo de texto.
VALUE Valor a ser exibido no campo.
SIZE Define o tamanho do campo (em nmero de caracteres).
MAXLENGTH Define o nmero mximo de caracteres.
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Cadastro" method="post">
Nome: <input type="text" name="nome" value="Daniel" size="20">
</form>
Curso de HTML
Formularios e componentes
PASSWORD
O password um campo usado para a digitao de um texto para senhas.
formado pela tag INPUT, com o atributo TYPE=PASSWORD.
Aceita os seguintes parmetros:
NAME Nome do campo de senha.
VALUE Valor do campo o valor exibido ser sempre asterscos (*).
SIZE Define o tamanho do campo (em nmero de caracteres).
MAXLENGTH Define o nmero mximo de caracteres.
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Login" method="post">
Senha: <input type="password" name="senha" size="15">
</form>
Curso de HTML
Formularios e componentes
TEXT AREA
O text area um campo usado para a digitao de textos grandes.
formado pela tag TEXTAREA. O texto de contedo deve ir entre a tag inicial e final.
Aceita os seguintes parmetros:
NAME Nome do campo de senha.
ROWS Nmero de linhas do campo (visualmente).
COLS Nmero de colunas caracteres - do campo (visualmente).
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Login"
method="post">
Memo:<br>
<textarea name="memo" rows="5" cols="30">
</textarea>
</form>
Curso de HTML
Formularios e componentes
BOTES
Os botes so componentes que podem ser pressionados ou clicados, para a
execuo de uma ao.
Existem trs tipos de botes: SUBMIT, RESET e BUTTON.
SUBMIT Este boto, ao ser clicado, submete as informaes do
formulrio.
RESET Ao ser clicado, limpa as informaes do formulrio, voltando ao
estado inicial.
BUTTON Um boto comum, sem funo padro. Sua funcionalidade
determinada pela execuo de um mtodo JavaScript definido no atributo onClick.
Curso de HTML
Formularios e componentes
BOTES
formado pela tag INPUT, com o atributo TYPE informando o tipo desejado.
Aceita os seguintes parmetros:
NAME Nome do boto.
VALUE Texto a ser exibido no boto.
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
<form name="f1" action="/Login" method="post">
<input type="submit" name="enviar" value="Enviar">
<input type="reset" name="limpar" value="Limpar">
<input type="button" name="nada" value="Nada Faz">
</form>
Curso de HTML
Formularios e componentes
CHECKBOX
O checkbox um caixinha usada para selecionar itens de um grupo.
formado pela tag INPUT, com o atributo TYPE=CHECKBOX.
Aceita os seguintes parmetros:
NAME Nome do campo (grupo de itens).
VALUE Valor do item. Apenas os valores dos selecionados so enviados.
DISABLED Indica se o item est desabilitado (TRUE, FALSE).
CHECKED Indica se o item est selecionado (TRUE, FALSE).
<form name="f1" action="/Login" method="post">
<input type="checkbox" name="forma" value="email"> E-mail<br>
<input type="checkbox" name="forma" value="telefone">
Telefone<br>
<input type="checkbox" name="forma"
value="carta" disabled="true"> Carta
</form>
Curso de HTML
Formularios e componentes
RADIO BUTTON
O radio button uma espcie de boto usado para seleo nica de grupos de itens.
formado pela tag INPUT, com o atributo TYPE=RADIO.
Aceita os seguintes parmetros:
NAME Nome do campo (grupo de itens).
VALUE Valor do item. Apenas o item selecionado ser enviado.
DISABLED Indica se o item est desabilitado (TRUE, FALSE).
CHECKED Indica se o item est selecionado (TRUE, FALSE).
<form name="f1" action="/Login" method="post">
<input type="radio" name="forma" value="email"> E-mail<br>
<input type="radio" name="forma" value="telefone">
Telefone<br>
<input type="radio" name="forma"
value="carta" disabled="true"> Carta
</form>
Curso de HTML
Formularios e componentes
COMBOBOX
O combobox um caixa usada para selecionar um item de uma lista (pop-up).
formado pelas tags SELECT e OPTION.
Aceita os seguintes parmetros:
NAME Nome do componente, usado na tag SELECT.
DISABLED Indica se o combo est desabilitado (TRUE, FALSE).
CHECKED Indica se o combo est selecionado (TRUE, FALSE).
VALUE Valor do item, usado na tag OPTION.
SELECTED Indica qual o item que est selecionado.
<form name="f1" action="/Login" method="post">
<select name="cartao">
<option value="VISA" SELECTED>Visa</option>
<option value="MASTERCARD">Mastercard</option>
<option value="AMEX">American Express</option>
</select>
</form>
Curso de HTML
Formularios e componentes
LIST
O list um caixa usada para selecionar um item de uma lista (aberta).
formado pelas tags SELECT e OPTION.
Aceita os seguintes parmetros:
NAME Nome do componente, usado na tag SELECT.
SIZE Define o tamanho (visual) da lista (nmero de itens).
MULTIPLE Indica se a lista de seleo mltipla (TRUE, FALSE).
DISABLED Indica se o combo est desabilitado (TRUE, FALSE).
CHECKED Indica se o combo est selecionado (TRUE, FALSE).
VALUE Valor do item, usado na tag OPTION.
SELECTED Indica qual o item que est selecionado.
<select name="cartao" size=3>
<option value="VISA" SELECTED>Visa</option>
<option value="MASTERCARD">Mastercard</option>
<option value="AMEX">American Express</option>
</select>
Curso de HTML
Formularios e componentes
FILE CHOOSER
O file chooser um caixa usada para selecionar um arquivo do sistema operacional.
formado pela tag INPUT, com o atributo TYPE=FILE.
Aceita os seguintes parmetros:
NAME Nome do campo.
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
<form name="f3" action="/Album"
method="post" enctype="multipart/form-data">
Foto: <input type="file" name="foto">
<input type="submit" name="enviar" value="Enviar">
</form>
Curso de HTML
Formularios e componentes
CAMPO OCULTO (HIDDEN)
O campo oculto (hidden) um campo no-visual, utilizado para enviar informaes
pertinentes ao formulrio, mas que no precisam ser exibidas na pgina.
formado pela tag INPUT, com o atributo TYPE=HIDDEN.
Aceita os seguintes parmetros:
NAME Nome do campo.
VALUE Valor do campo.
<form name="f3" action="/Cadastro" method="post">
<input type="hidden" name="codigo" value="123">
</form>
Curso de HTML
Frames
Os frames so uma forma de dividir uma janela do navegador em vrias.
Imagine um site que tenha um menu fixo e um contedo que muda quando cada item
(link) do menu selecionado. Esta pgina pode ser dividida em frames, por exemplo.
Os frame so criados com o auxlio das tags FRAMESET e FRAME.
Curso de HTML
Frames
FRAMESET
A tag FRAMESET define um conjunto de frames, definindo a diviso da tela.
Esta tag aceita os seguintes parmetros:
ROWS Define a diviso em linhas. O parmetro recebe o tamanho de
cada frame em: pixels, porcentagem ou astersco (ocupar espao restante).
COLS Define a diviso em colunas. O parmetro recebe o tamanho de
cada frame em: pixels, porcentagem ou astersco (ocupar espao restante).
FRAMEBORDER Indica a presena de bordas (YES, NO).
BORDER Define a largura, em pixels, da borda.
BORDERCOLOR Define a cor da borda.
Curso de HTML
Frames
FRAME
A tag FRAME define um frame, que faz parte de um frameset.
Esta tag aceita os seguintes parmetros:
SRC Define a URL da pgina ou recurso a ser exibido no frame.
NAME Define um nome para o frame. Usado pelo target da tag A.
FRAMEBORDER Indica a presena de bordas (YES, NO).
SCROLLING Indica se o frame deve ter barra de rolagem (YES, NO).
NORESIZE Indica se o frame no pode ser redimensionado (no leva um
valor).
Curso de HTML
Frames
Exemplo:
<html>
<head>
<title>Teste com Frames</title>
</head>
<frameset rows="50,*">
<frame src="menu.htm" name="menu">
<frame src="principal.htm" name="principal" scrolling="yes">
</frameset>
</html>
Curso de HTML
Frames
Exemplo (sem borda):
<html>
<head>
<title>Teste com Frames</title>
</head>
<frameset rows="50,*" border="0">
<frame src="menu.htm" name="menu">
<frame src="principal.htm" name="principal" noresize>
</frameset>
</html>
Curso de HTML
Frames
Exemplo (sem borda):
<html>
<head>
<title>Teste com Frames</title>
</head>
<frameset cols="70,*" border="1">
<frame src="menu.htm" name="menu">
<frame src="principal.htm" name="principal" scrolling="yes">
</frameset>
</html>
Curso de HTML
Websites Relacionados
World Wide Web Consortium W3C
http://www.w3c.org
Especificao HTML oficial W3C
http://www.w3c.org/MarkUp/
HTML Dog Site de guia de referncia para HTML
http://www.htmldog.com/reference/htmltags/