Vous êtes sur la page 1sur 32

HTML

SUMRIO
CONCEITOS BSICOS
INTERNET
INTRANET
EXTRANET
HIPERTEXTO
MULTIMDIA
HIPERMDIA
BROWSER

03
03
03
03
03
03
03

PROTOCOLOS
TCP/IP
HTTP
HTTPS
FTP
TELNET
DNS

04
04
04
04
05
05

HTML
CONSIDERAES INICIAIS
BLOCOS BSICOS HTML

06
07

TAGS HTML
<html>
<head>
<title>
<meta>
<body>
<hn>
<font>
<p>
<br>
<pre>
<hr>
<blockquote>
<div>
<script>
<!-- -->

08
08
08
08
09
09
09
10
10
10
11
11
11
11
11

LISTAS
LISTAS ORDENADAS <ol>
LISTAS NO ORDENADAS <ul>
LISTAS DE DEFINIO <dl>

12
12
12

LINKS
LOCAIS
REMOTOS
NA PRPRIA PGINA
PARA UM E-MAIL
TARGET
CORES

13
13
13
13
14
14

IMAGENS
TIPOS
JPEG
GIF
PNG
INSERO
MAPEAMENTO

15
15
15
15
16

SONS
INSERO

17

TABELAS
<table>
<tr>
<td>
<th>
exemplo completo

18
18
18
18
19

FORMULRIOS
form
text
password
radio
checkbox
reset
submit
image
hidden
select
textarea
exemplo completo

19
19
19
19
20
20
20
21
21
21
21
22

FRAMES
<frameset>
<frame>
<noframes>
exemplo completo

23
24
24
25

FRAMES FLUTUANTES
<iframe>

26

CARACTERES ESPECIAIS E ACENTUAO

27

TABELAS DE CORES
HTML STANDARD COLORSET
HTML EXTENDED COLORSET

28
28

CONCEITOS BSICOS
INTERNET
Rede mundial de informao, a rede das redes. Criada nos EUA, tornou-se
uma associao mundial de redes interligadas.
Utiliza a arquitetura de protocolos de comunicao TCP/IP.

INTRANET
Redes corporativas que utilizam da tecnologia de comunicao utilizada pela
INTERNET.
Utilizadas na comunicao interna da prpria empresa.

EXTRANET
Conjunto de INTRANETS interligadas atravs da INTERNET.

HIPERTEXTO
Um mtodo de acoplamento de informaes relacionadas sem a necessidade
de um sistema hierrquico ou de menus. O usurio pode navegar atravs de
um documento seguindo as ligaes (links) pr-definidas.

MULTIMDIA
Combinao interativa de textos, grficos, animaes, imagens, udio
e vdeo exibidos por e sob o controle de um PC.

HIPERMDIA
Combinao de HIPERTEXTO e MULTIMDIA. O usurio pode ler um texto,
visualizar uma imagem, animao ou vdeo e ouvir um udio.

BROWSER
Software que fica do lado cliente utilizado para apresentar os documentos na
tela do PC. Atravs do BROWSER possvel ler, imprimir, visualizar imagens e
ouvir udio.

PROTOCOLOS
Protocolo de rede um conjunto de regras utilizadas pelos computadores de
uma rede para estabelecer a comunicao entre eles.
Assim como na lingugem falada, onde duas pessoas somente se comunicam
se falarem a mesma lngua, dois computadores s podem se comunicar
se utilizarem o mesmo protocolo.

TCP/IP (Transmition Control Protocol/Internet Protocol)


um conjunto de protocolos de comunicao utilizado para troca de dados
entre computadores em ambientes de redes locais e/ou remotas.
A arquitetura TCP/IP surgiu em 1975 na rede Arpanet (criada em 1969 pela
ARPA
Advanced
Research
Projects
Agency

rgo
do
departamento de defesa dos EUA).
As especificaes dos protocolos TCP/IP so pblicas e genricas, o
que permite sua implementao por diversos fabricantes.
Todos os sistemas operacionais atuais (Windows, Linux, Unix,
MacOS, Netware, etc.) fornecem uma implementao do protocolo TCP/IP

HTTP (HiperText Transfer Protocol)


HTTP o protocolo usado pela WWW World Wide Web para transmitir
recursos. Um recurso algum tipo de informao que pode ser identificada por
um URL Uniform Resource Locator.
O tipo mais comum de recurso um arquivo no formato HTML, mas
um recurso pode ser o resultado de uma consulta gerada dinamicamente, a
sada
de um script CGI, uma imagem ou qualquer outra forma de informao.

FTP (File Tranfer Protocol)


O protocolo FTP permite a transferncia de arquivos entre um computador
local e um servidor remoto, sendo muito utilizado para upload e download de
arquivos na Internet.
Permite a nagevao em uma parte da estrutura de diretrios do servidor
remoto para a localizao do arquivo desejado.
O FTP diferencia arquivos de texto (ASCII) e arquivos binrios
(imagens, aplicativos, etc.)

TELNET
O protocolo Telnet permite o acesso tipo terminal a um computador remoto.
A conexo a um sistema utilizando o protocolo Telnet permite interagir com
o servidor como se estivesse utilizando a console p prprio
servidor. possvel executar comandos do sistema operacional a
partir de linhas de comandos, executar scripts e utilizar sistemas instalados
no host remoto.
No processo de conexo solicitado o nome do usurio e a senha
para autenticao do terminal remoto.

DNS (Domain Name System)


O servio DNS tem como objetivo facilitar o modo de especificar um host
numa rede TCP/IP, utilizando um nome amigvel em vez do seu endereo IP.
No servidor DNS so cadastrados os hosts e seus endereos IP. Quando um
computador (cliente DNS) precisa saber a qual endereo IP um
nome se refere, solicita a resoluo deste nome ao servidor DNS.
Para distribuir essa tarefa entre diversos servidores, criou-se uma estrutura
hierrquica, agrupando computadores em grupos chamados domnios e
instalando um ou mais servidores de DNS para cada domnio.

HTML
CONSIDERAES INICIAIS
Para desenvolver um website fundamental conhecer HTML
(Hipertext
Markup Language ou Linguagem de Hipertexto baseada em Marcas).
Produzir um documento HTML muito parecido com o que fazemos
ao formatar um texto num editor como o Word.
Definiu-se que os documentos HTML fossem gerados num formato
muito simples, o txt. Por isso, os documentos HTML podem ser produzidos
partir de qualquer editor de texto. No UNIX o vi muito utilizado e no
Windows temos o NotePad (Bloco de Notas).
MARCAS (TAGS)
Para que o contedo de uma pgina Web seja exibido devidamente
formatado, utiliza-se as marcas-padro (ou tags, em ingls).
Por definio, as marcas so delimitadas pelos sinais < e >.
H um conjunto de palavras reservadas que so interpretadas pelo browser,
responsvel por apresentar o documento devidamente formatado.
Por exemplo, a tag <center> centraliza o texto na pgina, <br> insere uma
"quebra" de linha, <b> altera o texto para negrito, etc.
A maioria das marcas trabalham em pares, indicando o incio e o fim de um
trecho do documento. A marca para finalizar o bloco idntica a do
incio, porm precedida por uma barra /. Exemplo: <center> ... </center>
Algumas marcas no precisam de complemento ou finalizao. Ex: <br>
EDITORES
Desde o surgimento do padro HTML surgiram vrios editores
especficos para esta linguagem.
H dois tipos bsicos:
WYSIWYG (What You See IS What You Get o que voc v o que voc
obtm). Exemplos: FrontPage e DreamWeaver.
Editores com menus especficos da linguagem que apresentam o conjunto
de tags conforme padro HTML. Exemplos: FirstPage, HomeSite, HotDog.
Embora os editores WYSIWYG estejam cada dia mais sofisticados e ajudem
muito na produtividade, importante para o aprendizado da linguagem HTML
esquecer um pouco esses produtos e utilizar um editor de textos simples para
desenvolver pginas web.
H pelo menos dois motivos importantes para conhecer a linguagem apesar
das facilidades oferecidas por esses produtos:
Os
editores
WYSIWYG
muitas
vezes
inserem
marcaes
desnecessrias que so indesejveis para uma pgina "enxuta", que
possa ser carregada mais rapidamente.
s vezes necessrio fazer um "ajuste fino" nas pginas o que pode ser difcil
ou impossvel se contarmos exclusivamente com os recursos de um
editor
WYSIWYG.

BLOCOS BSICOS
<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
Contedo da pgina
</body>
</html>

TAGS HTML
<html> ... </html>
Indicam o incio e o fim de um documento. Todo o resto deve estar entre
estas marcas.
<head> ... </head>
Delimitam a seo de cabealho do documento. Trata-se da primeira seo
do documento.
<title> ... </title>
Indicam o ttulo do documento, que ser apresentado na barra superior do
browser. Estas marcas so internas seo <head> ... </head>
<head>
<title>Ttulo da pgina</title>
</head>

<meta> ... </meta>


Utilizada para indicar instrues especiais ao browser do cliente ou servidor,
realizando
uma
operao
de
anlise
gramatical.
Estas
tags
tambm so internas ao cabealho <head> de um documento.
<meta name="nome" http-equiv="nome" content="valor">
name
http-equiv
content

authors, keywords, description


creation-date, content type, expires, refresh
depende do valor de name ou http-equiv

Exemplo:
<html>
<head>
<title>Exemplo marcador meta</title>
<meta name="authors" content="Nome do Autor">
<meta name="keywords" content="palavra_chave1, palavra_chave2">
<meta name="description" content="Descricao da pagina ou site">
<meta http-equiv="creation-date" content="01-fev-2004 14:00:00 GMT">
<meta http-equiv="content-type" content="text/html; charset=isso-8859-1">
<meta http-equiv="expires content="31-jan-2005 14:00:00 GMT">
<meta http-equiv="refresh" content="10; URL=refresh.htm">
</head>
<body>
Dentro de dez segundos a pgina refresh.htm ser exibida.
</body>
</html>

<body> ... </body>


Marca o incio e o final do corpo da pgina e determina algumas
propriedades. Entre estas marcas estar contida a maior parte do contedo a
ser apresentado, textos, imagens, etc.
<body topmargin="n" leftmargin="n" background="arquivo"
bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor">
...
</body>
topmargin
leftmargin
background
bgcolor
text
link
alink
vlink

0, 1, 2 ...
0, 1, 2 ...
arquivo.ext
#FFFFFF
#000000
#0000FF
#00FF00
#FF0000

margem superior da pgina


margem esquerda da pgina
imagem para o fundo da pgina
cor de fundo da pgina
cor padro do texto da pgina
cor dos links da pgina (v. LINKS)
cor do link ativo (i.e. clicado)
cor dos links j visitados

<hn> ... </hn>


Utilizada para formatar ttulos e subttulos. Podemos utilizar at seis nveis
de ttulos ou "headings", que so numerados de 1 (o maior) a 6 (o menor).
<h1>Ttulo nvel 1</h1>
...
<h6>Ttulo nvel 6</h6>
Os elementos de ttulo podem ter o parmetro opcional align:
<h1 align="alinhamento">Ttulo nvel 1 alinhado</h1>
left
right
center

alinhamento esquerda
alinhamento a direita
alinhamento centralizado

<font> ... </font>


Determina o tamanho, o tipo e a cor da fonte.
<font size=n face="tipo da fonte" color="cor"> Texto </font>
size
face
color

1a7
"Times", "Arial", etc.
#FFFF00
yellow

#00FF00 green

Configura o tamanho da fonte


Configura o tipo da fonte
Configura a cor da fonte

Alm das propriedades j citadas, s vezes necessrio destacar palavras e


frases. Para isso podemos utilizar as seguintes tags:
<b>negrito</b>

negrito

<i>itlico</i>

itlico

<u>sublinhado</u>

sublinhado

<s>riscado</s>

riscado

<big>maior</big>

maior

<small>menor</small>

menor

<sub>subscrito</sub>

texto

subscrito

<sup>sobrescrito</sup>

texto

sobrescrito

<p> ... </p>


Indica o incio e o final (opcional) de um pargrafo.
<p align="alinhamento">
Primeiro pargrafo.
</p>
<p align="alinhamento">
Segundo pargrafo.
</p>
left
direita
center
justify

esquerda
direita
central
justificado

<br>
Insere uma quebra de linha no texto.
Neste ponto <br>
a linha foi "quebrada"

<pre> ... </pre>


Conserva o texto da mesma forma como foi digitado no editor de textos.
<pre>
Este texto ter a
formatao que foi
aplicada pelo editor.
</pre>

<hr>
Desenha uma linha (horizontal) na pgina.
<hr size="altura" width="comprimento" align="alinhamento" noshade>
size
witdh
align
noshade

nmero inteiro (1, 2, 3 ...)


comprimento (em pixels ou porcentagem)
left, right, center
preenche a linha

<blockquote> ... </blockquote>


Utilizado para deslocar um bloco de texto.
<blockquote>
Texto deslocado
</blockquote>
<div> ... </div>
Utilizado para posicionar um elemento (texto, imagem, etc.) na pgina.
<div align="alinhamento">Texto ou imagem</div>
left
direita
center
justify

esquerda
direita
central
justificado

<script> ... </script>


Utilizado para inserir o cdigo de uma linguagem de programao voltada
Internet (JavaScript, VBScript, etc.). Pode ser inserida dentro do
cabealho
<head> ou fazer parte do corpo <body> da pgina.
<script language="linguagem">
... Inserir o cdigo da linguagem.
</script>

<!-- ... -->


Utilizado para inserir um comentrio na pgina html. O comentrio no ser
visvel, destinando-se basicamente para documentar o cdigo.

LISTAS
LISTAS ORDENADAS <ol>
Insere uma lista ordenada, com marcadores do tipo: 1, 2, 3, ..., a, b, c, ...
<ol type="a">
<li> Item 1</li>
<li> Item 2</li>
</ol>
type:

1, a, I, i, A, ...

LISTAS NO ORDENADAS <ul>


Insere uma lista com marcadores diferenciados, sem uma ordem lgica.
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
type:

disk, square e circle

LISTAS DE DEFINIO <dl>


Insere uma lista onde cada item possui uma definio ou descrio do item.
<dl>
<dt>Item 1
<dd> Descrio 1
<dt>Item 2
<dd> Descrio 2
</dl>

LINKS
<a href="arquivo"> ... </a>
Um link liga uma pgina a outras pginas, e-mails e a pontos especficos da
prpria pgina ou de outras.
LOCAIS
Link com pginas ou arquivos de um mesmo site (inclusive localizados em
outros diretrios ou pastas).
<a href="pagina2.htm" title="Texto explicativo">LINK LOCAL</a>
ou
<a href="./outro_diretorio/pagina2.htm">LINK LOCAL</a>
O parmetro title faz com que um texto explicativo (referente ao link) seja
exibido prximo ao mouse quando este encontrar-se sobre o link.
REMOTOS
Link com pginas ou arquivos de outro site.
<a href="http://www.outrosite.com.br/pagina2.htm">LINK REMOTO</a>

NA PRPRIA PGINA
Link para outras partes da prpria pgina.
<a href="#marcador1">LINK NA PRPRIA PGINA</a>
<a name="marcador1"></a>Texto ...

PARA UM E-MAIL
Este link abre o programa cliente de e-mail do usurio e preenche o campo
de cabealho para: com o mesmo valor indicado em mailto:
<a href="mailto:destinatario@empresa.com.br">LINK PARA E-MAIL</a>

TARGET
<a href= ... target= ...> ... </a>
Atributo que direciona o browser para exibir o contedo de uma URL
em uma janela especfica.
<a href="arquivo.ext" target="nome">LINK</a>
_blank
_parent
_self
_top

carrega o contedo em uma nova janela


exibe o contedo na "janela-pai"
exibe o contedo na mesma janela
carrega o contedo numa janela que preenche o espao de
visualizao do browser

CORES
<link ... alink ... vlink>
Define uma cor para cada um dos estados que um link pode assumir:
link
alink
vlink

link no visitado
link ativo (clicado)
link j visitado

So utilizados com a tag <body> e valem para toda a pgina.


<body link="cor" alink="cor" vlink="cor">

IMAGENS
TIPOS
JPEG (Joint Photografic Experts Group)
O formato JPEG foi criado para que imagens true-color (16 milhes
de cores) pudessem ser armazenadas em arquivos pequenos.
Imagens JPEG no podem ser transparentes, portanto sempre
aparecem retangulares na tela.
Diferente do GIF, que tem uma compresso padro, o JPEG
tem uma compresso vrivel. Porm, quanto mais comprimido o arquivo,
maior ser a perda da qualidade da imagem. Numa escala de 1 a 100, a
compresso padro situa-se em torno de 33, mas recomendvel testar a
qualidade da imagem antes de public-la.
GIF (Graphics Interchange Format)
Os arquivos GIF podem ter no mximo 256 cores (8 bits por pixel).
O padro permite o entrelaamento e a transparncia de imagens.
Uma imagem entrelaada (interlaced) pode ser vista medida que
vai sendo carregada (melhorando a definio aos poucos) e uma imagem
transparente permite visualizar, atravs de certas partes, o que est por trs.
O recurso de transparncia oferece a impresso de que as imagens no so
retangulares.
PNG (Portable Network Graphics)
Outro formato aceito pelos navegadores.
INSERO
<img src= ...>
Insere uma imagem na pgina.
<img src="arquivo" border="n" alt="texto" width="n" height="n">
src
border
alt
width
height

nome do arquivo de imagem


tamanho da borda (em pixels)
texto associado imagem
largura (tamanho ou percentual)
altura (tamanho ou percentual)

MAPEAMENTO
<map name="mapa">
Divide a imagem em vrios setores ou pedaos. Cada setor corresponde a
um link diferente.
<img src="arquivo" usemap="#mapa">
<map name="mapa">
<area shape="tipo" coords="valor" href="URL">
<area shape="tipo" coords="valor" href="URL">
...
<area shape="tipo" coords="valor" href="URL">
</map>
O "valor" dado em pixels, de acordo com o "tipo":
tipo="circ"
tipo="rect"
tipo="poly"

valor="x,y,r"
valor="x1,y1,x2,y2"
valor="x1,y1,x2,y2,x3,y3, ..."

SONS
INSERO
<embed src= ...>
Insere um arquivo de som na pgina (formatos aceitos: WAV, AU, MIDI).
Internet Explorer:
<bgsound src="arquivo" loop="quantidade">

src
loop

nome do arquivo de msica


"infinite" ou qualquer valor inteiro

Internet Explorer e Netscape:


<embed src="arquivo" autostart="true" hidden="true" width="1" height="1">

src
loop
autostart
hidden

nome do arquivo de msica


"infinite" ou qualquer valor inteiro
a msica ser iniciada quando a pgina for carregada
esconde o "plugin" (programa necessrio para tocar a msica)

width=1
e
height=1

assegura que o objeto incorporado no utilizar nenhum espao

<noembed> ... </noembed>


Utilizado para compatibilidade com browsers que no suportam <embed>.

TABELAS
<table> ... </table>
Cria uma tabela, formata bordas, tamanho e alinhamento.
<table border="n" cellspacing="n" cellpadding="n" width="n"
height="n" align="alinhamento">
...
</table>
border
cellspacing
cellppading
width
height
align

largura da borda
espao entre o contedo e o lado da clula
espao entre as clulas adjacentes
largura da tabela (em pixels ou percentual)
altura da tabela (em pixels ou percentual)
alinhamento da tabela

0, 1, 2, ...
0, 1, 2, ...
0, 1, 2, ...
250, 60% ...
100, 30% ...
left, right, center

<tr>
Especifica o incio e o fim de uma linha da tabela.
<tr align="valor" valign="valor">
...
</tr>
align
valign

alinhamento horizontal
alinhamento vertical

left, center, right


top, center, bottom

<td> ... </td>


Especifica o contedo de uma clula da tabela.
<td colspan="n" rowspan="n" width="n" align="valor">
...
</td>
colspan
rowspan
width
align

nmero de colunas ocupadas pela clula


nmero de linhas ocupadas pela clula
largura da clula (em pixels ou percentual)
alinhamento horizontal

2, 3, ...
2, 3, ...
80, 15% ...
left, center, right

<th> ... </th>


Define as clulas de cabealho. Apresenta caractersticas idnticas s clulas
de dados <td>, exceto pelo alinhamento horizontal padro, que centralizado,
e pela utilizao de fontes em negrito.

TABELA EXEMPLO COMPLETO

<html>
<head>
<title>TABELA</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

FORMULRIOS
<form> ... </form>
Elementos que delimitam um formulrio. Todos os outros elementos devem
ficar entre eles.
<form action="script" method="mtodo" target="valor">
...
</form>
action

endereo do programa que vai receber os dados do formulrio

method

"get" ou "post"

target

opcional, necessrio se a resposta ser exibida em um frame


diferente do formulrio

<input type=

... >

Determina como ser a entrada de dados nos campos de um formulrio.


<input type="tipo" name="nome" value="valor" size="n" maxlength="n">

type
name
value

define o tipo do elemento (caixa de texto, boto, etc.)


nome ou identificador do campo
valor do campo (opcionalmente pode ser predefinido)

TEXT
O valor "text" no parmetro "type" indica que o campo ser de texto.
<input type="text" name="nome" value="valor" size="n" maxlength="n">

size
maxlenght

define o tamanho do campo que ser mostrado na pgina


nmero mximo de caracteres que podem ser digitados

PASSWORD
Funciona da mesma forma que o valor "text", exceto que todas as letras
digitadas aparecem como um asterisco *.
<input type="password" name="nome" value="valor" size="n" maxlength="n">

RADIO
O valor "radio" no parmetro "type" define botes de escolha. Eles so
usados onde somente UMA opo pode ser selecionada.

Coloque sua pergunta aqui ...


<input type="radio" name="pesquisa1" value="opo1">
<input type="radio" name="pesquisa1" value="opo2" checked>
<input type="radio" name=vpesquisa1" value="opo3">

type
name
value
checked

define o tipo do elemento, neste caso "radio" (boto de escolha)


deve ser o mesmo para todos os campos no grupo, pois est
identificando a questo formulada
valor do campo que ser passado ao ao programa interpretador
do formulrio
deve ser usado quando voc desejar que uma das opes esteja
selecionada como padro (Ex: Deseja receber nossos e-mails?)

CHECKBOX
Deve ser usado quando UMA ou MAIS opes so vlidas ou aceitveis.
Coloque sua pergunta aqui ...
<input type="checkbox" name="pesquisa2" value="opo1">
<input type="checkbox" name="pesquisa2" value="opo2" checked>
<input type="checkbox" name="pesquisa2" value="opo3">

type
name
value
checked

define o tipo do elemento, neste caso "checkbox"


deve ser diferente para cada campo
valor do campo que ser passado ao programa interpretador do
formulrio
deve ser usado quando voc desejar que uma das opes esteja
selecionada como padro

RESET
Define um boto que limpa todos dos campos, colocando os mesmos valores
de quando a pgina foi carregada.
No parmetro "value" pode-se definir o que estar escrito no boto. Caso
nenhum valor seja definido, aparecer escrito somente "Reset".
<input type="reset" value="limpar">

SUBMIT
Define
um
boto
que
aciona
o
envio
das
informaes
preenchidas no formulrio ao programa interpretador (definido no campo
"action" do elemento "form".
Caso nenhum valor seja definido no parmetro "value", aparecer
escrito
"Submit" no boto correspondente.

<input type="submit" value="enviar">

IMAGE
Alternativamente ao boto "submit", pode-se utilizar uma imagem.
Para isso, existe o tipo "image".
<input type="image" name="enviar" src="URL" alt="texto">

src
alt

nome ou endereo (URL) do arquivo de imagem


texto que ser mostrado caso a imagem no seja carregada

HIDDEN
O valor "hidden" (oculto) no parmetro "type" define dados que devem ser
passados ao programa interpretador, mas que no so visveis ao usurio.
<input type="hidden" name="nome" value="valor">

name
value

identifica o dado
define o valor que deve ser passado

<select name=

... > ... </select>

O elemento "select" possibilita definir uma lista de opes.


<select name="nome" size="tamanho">
<option value="opo1">opo1</option>
<option value="opo2">opo2</option>
<option value="opo3">opo3</option>
</select>

<textarea name=

... > ... </textarea>

O elemento "textarea" (rea de texto) permite definir um campo de texto


com vrias linhas.
<textarea name="nome" rows="n" cols="n">
</textarea>

name
rows
cols

nome da caixa de texto


nmero de linhas da caixa de texto
nmero de caracteres (colunas) cada linha possui

FORMULRIO - EXEMPLO COMPLETO

<html>
<head>
<title>FORMULARIO</title>
</head>
<body>
<p>
<form action="AnyForm.cgi" method="post">
<input type="hidden" name="AnyFormMode" value="mail">
<input type="hidden" name="AnyFormDisplay" value="MeuFormulario">
<input type="hidden" name="AnyFormTo" value="usuario@empresa.com.br">
<input type="hidden" name="AnyFormSubject" value="MensagemDoSite">
<input type="text" name="AnyFormFrom" size="40">
<p>
Entre com o seu nome:
<input type="text" name="AnyFormMode" value="mail">
<p>
Voc gostou da pgina?
<input type="radio" name="gostou" value="sim">sim
<input type="radio" name="gostou" value="mais ou menos">mais ou menos
<input type="radio" name="gostou" value="no">no
<p>
Qual a pgina que voc mais gostou?
<select name="Melhor Pgina">
<option value="Links">Links</option>
<option value="Curriculum">Curriculum</option>
<option value="Fotos">Fotos</option>
<option value="Biblioteca">Biblioteca</option>
</select>
<p>
Deixe aqui seus comentrios: <br>
<textarea name="Comentarios" rows="5" cols="40">
</textarea>
<p>
Deseja receber nossos e-mails diariamente?
<input type="checkbox" name="Deseja receber e-mails" value="sim"> sim
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</form>
</body>
</html>

FRAMES
Dividem a janela do browser em diferentes reas, cada uma comportando-se
como mini-pginas. Cada frame pode exibir, separadamente, um
arquivo HTML.
Um uso comum para os frames a navegao. A janela do
browser dividida em duas reas, e os botes de navegao ou links so
carregados em um dos frames, com o resto do site sendo exibido pelo outro.
Clicando em um link no frame de nagevao, o frame principal altera
a exibio da pgina selecionada e mantm o frame de navegao imutvel.
Isso permite ter uma nica pgina de navegao para o site inteiro, que
carregada somente uma vez e permanece ali enquanto o visitante
estiver acessando o site.
<frameset>
<frameset frameborder="yes/no" border="largura" rows="n" cols="n">
frameborder
border
rows
cols

yes/no
largura da borda
altura da "linha" (em % ou pixels)
largura da "coluna" (em % ou pixels)

Desenvolver um site utilizando frames envolve criar o documento de


frameset para dividir a janela do browser em vrias partes.
O frameset um documento HTML padro, conforme o exemplo a seguir:
<html>
<title>Dois frames horizontais</title>
<frameset rows="20%,80%">
<frame src="superior.htm">
<frame src="inferior.htm">
</frameset>
</html>
No exemplo acima, um frame ocupar 150 px da altura da pgina e o outro
80%.
No h o elemento <body> no frameset, e as pginas que sero carregadas
nos frames so especificadas na declarao do prprio frameset (superior.htm
e inferior.htm).
Para criar frames verticais:
<html>
<title>Dois frames verticais</title>
<frameset cols="20%,80%">
<frame src="esquerdo.htm">
<frame src="direito.htm">
</frameset>
</html>

Para criar trs frames, com a rea superior cobrindo toda a largura
da pgina e abaixo dois frames dividindo verticalmente a rea restante.
<html>
<title>Um frame horizontal e dois frames verticais</title>
<frameset rows="20%,80%">
<frame src="superior.htm">
<frameset cols="20%,80%">
<frame src="inferior_esquerdo.htm">
<frame src="inferior_direito.htm">
</frameset>
</frameset>
</html>
Nos exemplos apresentados, cada frame ocupa um percentual da
pgina (20%, 80%). No entanto, possvel utilizar medidas baseadas
em pixels, conforme exemplo a seguir:
<frameset rows="100,*">
O primeiro frame ocupar 100 pixels e o segundo ocupar o restante
do espao inferior da pgina (janela do browser).
<frame>
<frame src="URL_ pagina" name="nome_ frame" scrolling="yes/no/auto nosesize">

src
name
scrolling
noresize

endereo do arquivo HTML a ser apresentado nesta parte


nome dado a uma parte especfica, ser utilizado pelo atributo target
indica a existncia da barra de rolagem
informa que a parte especificada no pode ser redimensionada

Esse marcador especifica que pgina estar em uma determinada parte.


<noframes>
<noframes>
... tags HTML e pgina a ser exibida
</noframes>
Utilizado para compatibilidade com browsers antigos que no
reconhecem frames, este marcador evita que ocorram erros.

FRAMES - EXEMPLO COMPLETO


index.htm
<html>
<head>
<title>FRAMESET</title>
</head>
<frameset cols="150,*" frameborder="no" border="0">
<frame src="menu.htm" name="esquerda" scrolling="no" noresize>
<frame src="pagina1.htm" name="principal">
</frameset>
</html>
menu.htm
<html>
<head>
<title>MENU</title>
</head>
<body bgcolor=#CCCCCC>
<a href="pagina1.htm" target="principal">PGINA 1</a>
<a href="pagina2.htm" target="principal">PGINA 2</a>
</html>
pagina1.htm
<html>
<head>
<title>PAGINA 1</title>
</head>
<body>
Esta a pgina 1.
</body>
</html>
pagina2.htm
<html>
<head>
<title>PAGINA 2</title>
</head>
<body>
Esta a pgina 2.
</body>
</html>

FRAMES FLUTUANTES <iframe>


<iframe width=n height=n src="arquivo" name="nome">
width
height
src
name

largura do frame
altura do frame
endereo do arquivo HTML a ser apresentado nesta parte
nome dado a uma parte especfica, ser utilizado pelo atributo target

EXEMPLO:
index.htm
<html>
<head>
<title>FRAMES FLUTUANTES</title>
</head>
<body>
<iframe width=250 height=200 src="quadro1.htm" name="quadro">
</body>
</html>
quadro1.htm
<html>
<head>
<title>QUADRO 1</title>
</head>
<body bgcolor="#003366">
FRAME FLUTUANTE (IFRAME)
</body>
</html>
EXEMPLO LBUM DE FOTOS:
index.htm
<html>
<head>
<title>ALBUM DE FOTOS</title>
</head>
<body>
<a href="foto1.jpg" target="fotos">FOTO 1</a><br>
<a href="foto2.jpg" target="fotos">FOTO 2</a><br>
<a href="foto3.jpg" target="fotos">FOTO 3</a><br>
<iframe width=250 height=200 src="foto1.jpg" name="fotos">
</body>
</html>

CARACTERES ESPECIAIS E ACENTUAO

<
>

&nbsp;
&iexcl;
&cent;
&pound;
&curren;
&yen;
&brvbar;
&sect;
&uml;
&copy;
&ordf;
&laquo;
&not;
&shy;
&reg;
&macr;
&deg;
&plusmn;
&sup2;
&sup3;
&acute;
&micro;
&para;
&middot;
&cedil;
&sup1;
&ordm;
&raquo;
&frac14;
&frac12;
&frac34;
&iquest;
&Agrave;
&Aacute;
&Acirc;
&Atilde;
&Auml;
&Aring;
&AElig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&Igrave;
&Iacute;
&Icirc;
&Iuml;
&lt;
&gt;

&#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;
&#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;

&
"

&ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&times;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;
&agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;
&eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&divide;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;
&amp;
&quot;

&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;

TABELAS DE CORES
HTML STANDARD COLORSET
aqua
black
blue
fuchsia
gray
green
lime
maroon

#00FFFF
#000000
#0000FF
#FF00FF
#808080
#008000
#00FF00
#800000

navy
olive
purple
red
silver
teal
yellow
white

#000080
#808000
#800080
#FF0000
#C0C0C0
#008080
#FFFF00
#FFFFFF

HTML EXTENDED COLORSET


aliceblue
antiquewhite
aquamarine
azure
beige
bisque
blachedalmond
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
drakslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen

#F0F8FF
#FAEBD7
#7FFFD4
#F0FFFF
#F5F5DC
#FFE4C4
#FFEBCD
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC1436
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22

gainsboro
ghostwhite
gold
goldenrod
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
limegreen
linen
magenta
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream

#DCDCDC
#F8F8FF
#FFD700
#DAA520
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#90EE90
#D3D3D3
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#FFFFE0
#32CD32
#FAF0E6
#FF00FF
#66CDAA
#0000CD
#BA55D3
#9370DB
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA

mistyrose
moccasin
navajowhite
oldlace
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
skyblue
slateblue
slategray
snow
springgreen
steelblue
tan
thistle
tomato
turquoise
violet
wheat
whitesmoke
yellowgreen

#FFE4E1
#FFE4B5
#FFDEAD
#FDF5E6
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#DB7093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#F5F5F5
#9ACD32