HTML

O que é HTML?

HyperText Markup Language ou Linguagem de Marcação HiperTexto, uma linguagem simples composta de marcações de formatação e diagramação de hipertexto/hipermídia (informações em texto, imagens, sons e ações ligadas umas às outras de uma forma complexa e não-seqüencial através de chaves relacionadas).

É a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatação e diagramação de hipertexto/hipermídia. Atualmente existem muitas outras linguagens utilizadas concorrentemente com o HTML (CSS, Javascript, PHP, Flash, etc...), mas a base da WWW ainda é, de longe, o HTML, que é interpretada por todos os navegadores (browsers) disponíveis (Firefox, Internet Explorer, etc...).
O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de qualquer editor de textos comum (Edit, notepad,...) e tem a terminação .html ou .html .

Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito dentro dos padrões da linguagem.

Dicas
  • Os softwares básicos para a programação em HTML são apenas dois : um Editor de Textos e um Navegador .
  • Existem softwares específicos para a criação de documentos HTML, que facilitam bastante o trabalho, mas é muito importante conhecer a linguagem para que seja possível criar boas páginas.

Anatomia de um documento HTML

Dentro de um documento HTML temos elementos de marcação denominados TAGS.

TAGs são os comandos utilizados pela linguagem HTML.
Cada TAG informa ao programa visualizador ou browser, como ele deverá formatar o texto e deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <html>, <body>, etc.
Os TAGs podem ser únicos ou duplos, com início e fim. Exemplos:

TAG único: <br />                 TAG duplo: <p>....</p>

Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador deve interpretá-la e normalmente são colocados na TAG inicializadora.

Ex.: <body background="fundo.gif"> .... Corpo do documento </body>  (define que o documento HTML terá como fundo a figura fundo.gif)

Obs: background é o atributo da tag body.

Dicas
  1. Nem todos os navegadores suportam todas as TAGS. É interessante sempre criar o documento com o conjunto mais básico de TAGS para que seja garantida a sua execução perfeita em qualquer navegador.
  2. Os navegadores também não interpretam todas as TAGS de maneira idêntica. É conveniente testar o funcionamento de seu documento em mais de um navegador para conferir o comportamento.
  3. O HTML não faz diferença entre letras maiúsculas e minúsculas. Mantenha um padrão em sua programação apenas para seu controle (é importante!).

Tags Iniciais

A estrutura de um documento HTML é:

Arquivo: index.html
<html>
   <head>
      <title> Meu primeiro programa </title>
   </head>
   <body>
      Esta é minha primeira página
   </body>
</html>
Tags <html> ... </html>

Todo documento HTML fica contido entre as tags <html> e </html>. Dentro dessas tags temos duas seções: head e body que indicam o cabeçalho do documento e o corpo, respectivamente.

Dicas
  1. Alguns navegadores não exigem a presença das tags <html> e </html>, mas por motivo de compatibilidade, comece seu documento HTML sempre utilizando essas tags.

Tags <head> ... </head>

Indicam o cabeçalho do documento e nelas estão contidas as informações de configuração da página.

Tag <title> ... </title>

Essas tags devem ser utilizadas entre as tags de cabeçalho <head>. Determinam o título que irá ser apresentado na barra de título da janela do navegador.

Tags <body> ... </body>

Todo o conteúdo do documento HTML deve estar entre as tags <body> e </body>.

Na versão 3.0 do HTML a tag <body> passou a admitir os atributos bgcolor, TEXT, LINK, ALINK e VLINK, que definem as cores de preenchimento da página, texto, links não visitados, links ativos e links visitados respectivamente e background, que define uma imagem de fundo para a página. Se não forem especificadas nem bgcolor e nem background, a cor de fundo da página será a padrão do navegador.

Dicas
  1. As imagens mostradas pelos navegadores normalmente devem estar nos formatos GIF (.gif) e JPEG (.jpg) . Outros formatos não são aceitos por todos os navegadores.
  2. As cores devem ser especificadas no formato RGB (Red, Green, Blue) e em hexadecimal. Na forma geral "#RRGGBB".

 

Alguns exemplos:
#FFFFFF (branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza)
#000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink)
#FF0000 (Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta)

Mudando a cor de fundo do texto:

<body bgcolor="#XXXXXX" text="#XXXXXX" link="#XXXXXX" vlink="#XXXXXX" alink="#XXXXXX">

bgcolor - É a cor do fundo, onde o padrão é branco.

text - É a cor do texto, sendo que o padrão é preto.

vlink - É a cor do link que já foi visitado. A cor padrão é vermelha.

alink - É a cor do link que está selecionado

Inserindo uma imagem de fundo fixo

A idéia é a de que, quando você rola uma página, em vez de todos os seus elementos - inclusive o painel de fundo - rolarem, apenas o primeiro plano da página (texto e imagem) rola. As imagens lado a lado que compõem o painel de fundo permanecem na mesma posição. Para criar esse efeito, use o atributo bgproperties="fixed" com a tag <body> da seguinte maneira:

<body background="arquivo2.gif" bgproperties="fixed">

Exemplo
<html>
   <head>
      <title> Esse documento tem o fundo amarelo !! </title>
   </head>
   <body bgcolor="#FFFF00">
      Exemplo com o fundo amarelo.
   </body>
</html>

Refresh Page

São páginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferência do internauta.

Para fazer uma página desta basta colocar no documento a seguinte linha de comando:

Ex.:

Exemplo:
<html>
<head>
   <META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.html">
   <title> Título </title>
</head>
<body>
   Corpo do Documento
</body>
<html>

Inserindo um comentário

Comentário é uma breve nota de explicação inseridas em um programa para descrever o que ele fará.

Os programadores usam comentários em seus programas para que outros programadores (e ele próprio) entendam o que o programa faz e como funciona.

Os comentários geralmente descrevem o que o programa faz, quem é o seu autor, por que ele foi alterado, e assim por diante. A maioria das linguagens de programação usa uma sintaxe própria para a especificação de comentários, de modo que os comentários sejam ignorados pelo compilador.

Os comentários não são analisados pelo programa.

Para inserir comentários com mais de uma linha basta colocar os símbolos <!-- para abrir o comentário e --> para fechar o comentário.

Veja exemplo:

Código fonte
<!--
   Comentário
   com mais
   de uma linha
-->

<!--
   Exemplo 1
   Exemplo 2
   Exemplo 3
-->

Inserindo Parágrafos

Tag <br />

Faz uma quebra de linha no texto. O texto em um documento HTML não faz quebras de linha automáticas. Essas devem ser inseridas utilizando-se tags <br />.

Exemplo
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio41.html.  Abra o seu navegador e utilize-o para verificar o resultado do exercício.
Insira tags <br /> nesse documento para que seja mais bem visualizado.
<html>
<head>
   <title>Exemplo que mostra quebras de linhas</title>
</head>
<body>
   O HTML precisa de tags especiais de quebra de linha.
   Os ENTER’s colocados no
   texto
   não geram quebras de linhas.
</body>
</html>

Tags <p> ... </p>

Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag <br />. Admitem também atributo de alinhamento align="left" (à esquerda), align="right" (à direita) e align="center" (ao centro).

Alinhando um texto

<p align="left"> - Texto alinhado à esquerda

<p align="right"> - Texto alinhado à direita

<p align="center"> - Texto centralizado

<p align="justify"> - Texto justificado

<center>Texto</center> - Centraliza o texto

Obs: As tags <div> </div>, <h1> </h1>...<h6> </h6> fazem o mesmo tipo de alinhamento

Tag <hr>

Desenha uma linha horizontal no documento. Pode ser modificada pelos seguintes atributos:

Exemplo:
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de index.html.  Faça alterações nos atributos para desenvolver mais sobre essa tag, experimente combinar os atributos.
<html>
<head>
   <title>Exemplo que mostra a utilização de linhas horizontais</title>
</head>
<body>
   Linha comum<br />
   <hr>
   Linha com a espessura modificada
   <hr size="5">
   Linha com largura especificada em percentual
   <hr width="50%">
   Linha com largura absoluta e sem sombra
   <hr width="400" NOSHADE>
</body>
</html>

 

Dicas
A tag <hr> não precisa de terminador </hr>.

Formatando o texto

<strong> texto </strong> - Negrito

<em> texto </em> - Itálico

<u> texto </u> - Sublinhado

<s> texto </s> - Tachado

<big> texto </big> - Aumenta o tamanho do texto

<small> texto </small> - Diminui o tamanho do texto

<sup> texto </sup> - Sobrescrito - Eleva o texto

<sub> texto </sub> - Subscrito - Rebaixa o texto

<blink> texto </blink> - Faz com que o texto pisque

<tt> texto </tt> - Deixa o texto com espaço regular

Exemplo:

Abra um novo arquivo e digite os seguintes dados para que possa verificar o funcionamento de cada comando que foi visto.
<html>
<head>
   <title> Efeitos em texto</title>
</head>
<body>
   <h2 align="center"> EXEMPLO DE EFEITOS NO TEXTO </h2>
   <strong>Texto em Negrito (B)</strong><br />
   <em>Texto em Itálico (I)</em><br />
   <tt>Texto com Tamanho Fixo (TT)</tt><br />
   <u>Texto Sublinhado (U)</u><br />
   H<sub>2</sub>O<br />
   Km<sup>2</sup>
</body>
</html>

Tags <pre> ... </pre>

Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente formatado. Com a utilização desse elemento, todos os espaços e saltos de linha são considerados de acordo com o que é inserido no documento.

Exercício
Escreva um documento em HTML que apresente uma pequena tabela conforme mostrada abaixo: 
<pre>
             +----------------------------------------+
             |        Tabela de Preços                |
             +--------------------------+-------------+
             |   Maça Argentina         |    R$ 10,00 |
             |   Laranja Pera           |    R$   5,00|
             |   Banana Nanica          |    R$   2,50|
             +--------------------------+-------------+
</pre>

Citação de bloco <blockquote>

Com a função de dar o destaque de um bloco de citação em um texto, foi criado o descritor <blockquote>. Alguns browsers o formatavam em itálico, outros em fonte menor, outros endentavam. Hoje, todos os browsers formatam um bloco blockquote endentado e com uma linha em branco antes e depois. Sua função acabou sendo a de um bloco de parágrafos endentados:

Exemplo: 
<blockquote>
     <p>"Tradição, qualidade e<br />
     segurança são nossas<br />
     prioridades"</p>
</blockquote>
Resultado:

"Tradição, qualidade e
segurança são nossas
prioridades"

Mas <blockquote> não deve ser usado pensando só na aparência. Qualquer folha de estilos pode endentar outro parágrafo ou mudar a aparência de <blockquote>.

Tags de Títulos e Sub-Títulos

Tags <Hn> ... </Hn>

<h1> Cabeçalho H1 </h1>

<h2> Cabeçalho H2 </h2>

<h3> Cabeçalho H3 </h3>

<h4> Cabeçalho H4 </h4>

<h5> Cabeçalho H5 </h5>
<h6> Cabeçalho H6 </h6>
Exercício

Digite o documento abaixo utilizando o Notepad e salve-o com o nome de index.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício.
Faça alterações, mudando o alinhamento dos cabeçalhos à esquerda, à direita e ao centro.
<html>
<head>
   <title>Exemplo que mostra os cabeçalhos das seções.</title>
</head>
<body>
   <H1> Cabeçalho principal </H1>
   Este texto está sobre a seção principal
   <H2> Cabeçalho nível 2 </H2>
   <H3> Cabeçalho nível 3 </H3>
   <H4> Cabeçalho nível 4 </H4>
   <H5> Cabeçalho nível 5 </H5>
   <H6> Cabeçalho nível 6 </H6>
   Este texto está sobre a seção cabeçalho nível 6
</body>
</html>

Tags de Formatação de Fontes

Tags <font> ... </font> 

As tags <font>...</font> fazem a formatação de fonte no texto que envolve no documento HTML. Juntamente a essas tags utilizam-se os atributos size, FACE e COLOR para definir tamanho, tipo de fonte e cor, respectivamente.

Dicas
  1. Os tamanhos de fontes podem variar entre 1 e 7 apenas.
  2. Cuidado com a utilização excessiva de fontes, não é garantido que exista a fonte especificada no computador que está acessando a sua página na Internet.
  3. Se forem colocados vários tipos de fontes separados por vírgulas, o navegador utilizará a primeira fonte da lista que estiver disponível na máquina.

Alterando o tamanho da fonte

Exemplo:

<font size=7> Texto </font>

<font size=6> Texto </font>

<font size=5> Texto </font>

<font size=4> Texto </font>

<font size=3> Texto </font>

<font size=2> Texto </font>

<font size=1> Texto </font>

Obs: Os valores permitidos vão de 1, ou menor, até 7, o maior. O padrão é 3.

Alterando o tipo de fonte

<font face="Verdana"> Texto </font>

<font face="Courier New"> Texto </font>

<font face="Times New Roman "> Texto </font>

Alterando as cores da fonte

<font color="green"> Texto </font>

<font color="#00FF00"> Texto </font>

<font color="blue"> Texto </font>

<font color="#0000FF"> Texto </font>

Black: #000000 Blue: #0000FF
White: #FFFFFF Green: #00FF00
Yellow: #FFFF00 Dark Green: 2F4F2F

 

Exercício
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício.
Faça alterações nos atributos e coloque quebras de linhas onde for necessário.
<html>
<head>
   <title>Exemplo que mostra as possíveis variações com fontes.</title>
</head>
<body>
   <font size="1" face="arial" color="#FF0000"> Arial, tam. 1 </font>
   <font size="3"face="helvetica" color="#00FF00"> Helvetica, tam. 3 </font>
   <font size="5"face="times" color="#0000FF"> Fonte de tamanho 5 </font>
   <font size="7" color="#FF00FF"> Times é o padrão</font>
</body>
</html>

Tag <basefont>

 Tem a finalidade de definir um padrão para a fonte que será utilizada no documento todo. Ainda assim é possível utilizar as tags <font> ...</font> para alterar esse padrão.

Exercício

Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio62.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício.
Faça alterações nos atributos e coloque quebras de linhas onde for necessário.
<html>
<head>
   <title>Exemplo que mostra as possíveis variações com fontes.</title>
</head>
<body>
   <basefont size="4" COLOR="#00FFFF" FACE="arial, helvetica, times">
   Todo esse texto deve estar em fonte Arial de tamanho 4 e cor azul claro. Se na máquina não tiver a fonte Arial,    será utilizado o Helvetica e em último caso, Times.
</body>
</html>

O comando Marquee

Este comando cria um efeito de movimento no texto, e a sua estrutura tem a seguinte definição.

Digite os dados seguintes em um arquivo novo e teste o comando.

Exercício:
<html>
<head>
   <title> Utilizando o efeito Marquee</title>
</head>
<body bgcolor="blue">
   <h2 align="center">
   <font color="white"><marquee>EFEITO MARQUEE</marquee></font>
   </h2>
</body>
</html>

Salve o arquivo com o nome index.html.

O comando <MARQUEE> é mais complexo do que os outros vistos anteriormente, pois ele contém parâmetros que vão influenciar no seu efeito final.

Parâmetros:

<marquee bgcolor="red">Efeito Marquee</marquee>

<marquee behavior="scroll">Efeito Marquee</marquee>

<marquee behavior="slide">Efeito Marquee</marquee>

<marquee behavior="alternate">Efeito Marquee</marquee>

<marquee direction="left">Efeito Marquee</marquee>

<marquee direction="right">Efeito Marquee</marquee>

<marquee width="50%">Efeito Marquee</marquee>

<marquee height="40%">Efeito Marquee</marquee>

<marquee hspace=50>Efeito Marquee</marquee>

<marquee vspace=30>Efeito Marquee</marquee>

<marquee scrollamount=10>Efeito Marquee</marquee>

<marquee scrolldelay=30>Efeito Marquee</marquee>

Caracteres Especiais

Caracteres Acentuados no Português

á &aacute; Á &Aacute; ã &atilde; Ã &Atilde;
â &acirc; Â &Acirc; à &agrave; À &Agrave;
é &eacute; É &Eacute; ê &ecirc; Ê &Ecirc;
í &iacute; Í &Iacute; ó &oacute; Ó &Oacute;
õ &otilde; Õ &Otilde; ô &ocirc; Ô &Ocirc;
ú &uacute; Ú &Uacute; ü &uuml; Ü &Uuml;
ç &ccedil; Ç &Ccedil;  

Caracteres em Espanhol

ñ &ntilde;
Ñ &Ntilde;
¡ &iexcl;
¿ &iquest;

Caracteres em Esperanto

Esperanta alfabeto
A   B   C   Ĉ &#264; D   E   F  
G   Ĝ &#284; H   Ĥ &#292; I   J   Ĵ &#308;
K   L   M   N   O   P   R  
S   Ŝ &#348; T   U   Ŭ &#364; V   Z  

(Maiúsculas)

Esperanta alfabeto
a   b   c   ĉ &#265; d   e   f  
g   ĝ &#285; h   ĥ &#293; i   j   ĵ &#309;
k   l   m   n   o   p   r  
s   ŝ &#349; t   u   ŭ &#365; v   z  

(Minúsculas)

Caracteres Especiais

  espaço &nbsp;
& e comercial &amp;
> maior que &gt;
< menor que &lt;
ˆ acento circunflexo &circ;
˜ acento til &tilde;
¨ acento trema &uml;
´ acento agudo &cute;
¸ cedilha &cedil;
" aspas duplas &quot;
“ e ” aspas duplas (esquerda e direita) &ldquo; e &rdquo;
‘ e ’ aspas simples (esquerda e direita) &lsquo; e &rsquo;
‹ e › aspas angulares simples (esquerda e direita) &lsaquo; e &rsaquo;
« e » aspas angulares duplas (esquerda e direita) &laquo; e &raquo;
º ordenal masculino &ordm;
ª ordinal feminino &ordf;
– travessão 'en' &ndash;
— travessão 'em' &mdash;
­   hífen oculto &shy;
¯ macron &macr;
… reticências &hellip;
<br /> barra vertical &brvbar;
• marcador (bullet) &bull;
parágrafo &para;
§ parágrafo legal &sect;

Naipe do baralho

♠ espadas &spades;
♤ espadas &#9828;
♣ paus &clubs;
♧ paus &#9831;
♥ copas &hearts;
♡ copas &#9825;
♦ ouros &diams;
♢ ouros &#9826;

Caracteres Comerciais

© copyright &copy;
® marca registrada &reg
™ trade mark &trade;
£ libra esterlina &pound;
¢ centavo &cent;
€ euro &euro;
¥ iene (yen) &yen;
¤ símbolo monetário &curren;

Caracteres Matemáticos e Lógicos

¹ elevado a um &sup1;
² ao quadrado &sup2;
³ ao cubo &sup3;
½ fração um meio &frac12;
¼ fração um quarto &frac14;
¾ fração três quartos &frac34;
⅛ fração um oitavo &#8539;
⅜ fração três oitavos &#8540;
⅝ fração cinco oitavos &#8541;
⅞ fração sete oitavos &#8542;
> maior que &gt;
< menor que &lt;
± mais ou menos &plusmn;
− sinal de subtração &minus;
× sinal de multiplicação &times;
÷ sinal de divisão &divide;
∗ asterisco &lowast;
⁄ barra de fração &frasl;
‰ por-mil &permil;
∫ sinal de integral &int;
∑ somatório &sum;
∏ PI &prod;
√ raiz quadrada &radic;
∞ infinito &infin;
≈ quase igual &asymp;
≅ aproximadamente igual &cong;
∝ proporcional &prop;
≡ idêntico &equiv;
≠ diferente &ne;
≤ menor ou igual &le;
≥ maior ou igual &ge;
∴ consequentemente &there4;
⋅ ponto &sdot;
· ponto do meio &middot;
∂ diferença parcial &part;
ℑ parte imaginária do número &image;
ℜ parte real do número &real;
′ minuto &prime;
″ segundo &Prime;
° grau &deg;
∠ ângulo &ang;
⊥ perpendicular &perp;
∇ nabla &nabla;
⊕ soma direta &oplus;
⊗ produto de vetor &otimes;
ℵ alef &alefsym;
ø produto vazio &oslash;
Ø produto vazio &Oslash;
∈ elemento de/pertence a &isin;
∉ nã é elemento de &notin;
∩ interseção &cap;
∪ união &cup;
⊂ subconjunto de &sub;
⊃ superconjunto de &sup;
⊆ subconjunto de ou igual a &sube;
⊇ superconjunto de ou igual a &supe;
∃ existe &exist;
∀ qualquer &forall;
∅ vazio &empty;
¬ não lógico &not;
∧ e lógico &and;
∨ ou lógico &or;
↵ retorno de carro &crarr;
← e → setas simples &larr; e &rarr;
↑ e ↓ setas simples &uarr; e &darr;
↔ seta simples &harr;
⇐ e ⇒ setas duplas &lArr; e &hrrr;
⇑ e ⇓ setas duplas &uArr; e &dArr;
⇔ seta dupla &hArr;
⌈ e ⌉ teto (esquerdo e direito) &lceil; e &rceil;
⌊ e ⌋ piso (esquerdo e direito) &lfloor; e &rfloor;
◊ losango &loz;

Outros Acentos e Caracteres Especiais

ñ &ntilde; Ñ &Ntilde; ¡ &iexcl; ¿ &iquest;
ä &auml; Ä &Auml; å &aring; Å &Aring;
ë &euml; Ë &Euml; è &grave; È &Egrave;
ï &iuml; Ï &Iuml; ì &igrave; Ì &Igrave;
î &icirc; Î &Icirc;  
ö &ouml; Ö &Ouml; ò &ograve; Ò &Ograve;
ù &ugrave; Ù &Ugrave; û &ucirc; Û &Ucirc;
ý &yacute; Ý &Yacute; ÿ &yuml; Ÿ &Yuml;
æ &aelig; Æ &AElig; œ &oelig; Œ &OElig;
† &dagger; ‡ &Dagger; š &scaron; Š &Scaron;
þ &thorn; Þ &THORN; ð &eth; Ð &ETH;
§ &sect; ƒ &fnof; ß &szlig; µ &micro;

Caracteres Gregos

α &alpha; Α &Alpha; β &beta; Β &Beta;
γ &gamma; Γ &Gamma; δ &delta; Δ &Delta;
ε &epsilon; Ε &Epsilon; ζ &zeta; Ζ &Zeta;
η &eta; Η &Eta; θ &theta; Θ &Theta;
ι &iota; Ι &Iota; κ &kappa; Κ &Kappa;
λ &lambda; Λ &Lambda; μ &mu; Μ &Mu;
ν &nu; Ν &Nu; ξ &xi; Ξ &Xi;
ο &omicron; Ο &Omicron; π &pi; Π &Pi;
ρ &rho; Ρ &Rho; σ &sigma; Σ &Sigma;
ς &sigmaf; τ &tau; Τ &Tau; υ &upsilon;
Υ &Upsilon; φ &phi; Φ &Phi; χ &chi;
Χ &Chi; ψ &psi; Ψ &Psi; ω &omega;
Ω &Omega; ϑ &thetasym; ϒ &upsih; ϖ &piv;

Planetas

☿ Mercúrio &#9791;
♀ Vênus &#9792;
♁ Terra &#9793;
♂ Marte &#9794;
♃ Júpiter &#9795;
♄ Saturno &#9796;
♅ Urano &#9797;
♆ Netuno &#9798;
♇ Plutão &#9799;

Sígnos do Zodíaco

♈ Áries &#9800;
♉ Touro &#9801;
♊ Gêmeos &#9802;
♋ Câncer &#9803;
♌ Leão &#9804;
♍ Virgem &#9805;
♎ Libra &#9806;
♏ Escorpião &#9807;
♐ Sagitário &#9808;
♑ Capricórnio &#9809;
♒ Peixe &#9810;
♓ Aquário &#9811;

Sinalização

☠ Venenoso &#9760;
☡ Cuidado &#9761;
☢ Radioativo &#9762;
☣ Venenoso &#9763;
☤ Caduceu &#9764;

Peças de Xadrez

♔ Rei branco &#99812;
♕ Rainha branca &#99813;
♖ Torre branca &#99814;
♗ Bispo branco &#99815;
♘ Cavalo branco &#99816;
♙ Peão branco &#99817;
♚ Rei preto &#99818;
♛ Rainha preta &#99819;
♜ Torre preta &#99820;
♝ Bispo preto &#99821;
♞ Cavalo preto &#99822;
♟ Peão preto &#99823;

 

Listas

 HTML suporta três tipos de listas.

UL - Listas não ordenadas

OL - Listas ordenadas

DL - Listas de definições (ou listas glossário)

Veja exemplos de listas:

Exemplo 1 Demonstração
<p> Estações do ano</p>
<ul>
   <li>Primavera</li>
   <li>Verão</li>
   <li>Outono</li>
   <li>Inverno</li>
</ul>

Estações do ano

  • Primavera
  • Verão
  • Outono
  • Inverno
Exemplo 2 Demonstração
<p>Estações do ano</p>
<ol>
   <li>Primavera</li>
   <li>Verão</li>
   <li>Outono</li>
   <li>Inverno</li>
</ol>

Estações do ano

  1. Primavera
  2. Verão
  3. Outono
  4. Inverno
  1. Tags <UL> ... </UL>
  2. Tags <LI> ... </LI>

Uma lista não ordenada é usualmente mostrada como uma lista de círculos ou quadrados.

Exemplo Resultado
<ul>
   <li>Maçãs</li>
   <li>Laranjas</li>
</ul>
  • Maçãs
  • Laranjas

 

Dicas
  1. É possível escolher o tipo de símbolos que serão apresentados através do atributo <UL TYPE="X"> , onde X pode ser SQUARE, CIRCLE e DISC.
  2. Os itens da lista têm tags de fim </LI>, mas elas são opcionais desde que uma nova tag implique no final da anterior.

<ul> ... </ul> - Lista com marcadores

type="disc" - É representado por um círculo cheio, esse estilo geralmente é o padrão.

type="square" - É representado por um quadrado cheio.

type="circle" = É representado por um círculo vazado.

Exemplo 1
<ul type="disc">
   <li>Primeiro item</li>
   <li>Segundo item</li>
   <li>Terceiro item</li>
</ul>
  • Primeiro item
  • Segundo item
  • Terceiro item
Exemplo 2  
<ul type="square">
   <li>Primeiro item</li>
   <li>Segundo item</li>
   <li>Terceiro item</li>
</ul>
  • Primeiro item
  • Segundo item
  • Terceiro item
Exemplo 3
<ul type="circle">
   <li>Primeiro item</li>
   <li>Segundo item</li>
   <li>Terceiro item</li>
</ul>
  • Primeiro item
  • Segundo item
  • Terceiro item
  1. Tags <OL> ... </OL>
  2. Tags <LI> ... </LI>

Uma lista ordenada são normalmente numeradas, veja exemplo:

Exemplo Resultado
<ol>
   <li>Apples</li>
   <li>Oranges</li>
</li>
  1. Apples
  2. Oranges

 

Dicas
Junto com a tag <OL> podemos utilizar dois atributos: TYPE="X" (que permite que se especifique o tipo de sistema de numeração A => maiúsculas, a => minúsculas, I => numerais romanos grandes e i => numerais romanos pequenos) e START="X" (que permite especificar quaisquer valores para iniciar a lista).

<ol> ... </ol> - Listas numeradas

type="1" - Cria uma lista numérica normal (é o padrão e não precisa ser especificado).

type="A" - Cria uma lista alfabética com letras maiúsculas começando por A.

type="a" - Cria uma lista alfabética com letras minúsculas começando por a.

type="I" - Cria uma lista numérica com números romanos (maiúsculos) começando por I.

type="i" - Cria uma lista numérica com números romanos (minúsculos) começando por i.

Exemplo 1 Demonstração
<p>Estações do ano</p>
<ol type="I" >
     <li> Primavera</li>
     <li> Verão</li>
     <li> Outono</li>
     <li> Inverno</li>
</ol>

Estações do ano

  1. Primavera
  2. Verão
  3. Outono
  4. Inverno
Exemplo 2 Demonstração
<p>Estações do ano</p>
<ol type="a" >
     <li> Primavera</li>
     <li> Verão</li>
     <li> Outono</li>
     <li> Inverno</li>
</ol>

Estações do ano

  1. Primavera
  2. Verão
  3. Outono
  4. Inverno

start=nº - usado para especificar o número ou a letra em que inicia uma lista. O ponto inicial padrão é 1. Usando start, você pode mudar este número.

Exemplo 1
<p>Lista com type = A e start=5</p>
 
<ol type="A" start=5>
     <li> Primeiro item
     <li> Segundo item
     <li> Terceiro item
</ol>

Lista com type = A e start=5

  1. Primeiro item
  2. Segundo item
  3. Terceiro item
Exemplo 2
<p> Lista com type = i e start=10</p>
 
 <ol type="i" start=10>
     <li> Primeiro item
     <li> Segundo item
     <li> Terceiro item
 </ol>

Lista com type = i e start=10

  1. Primeiro item
  2. Segundo item
  3. Terceiro item

Alinhando listas ordenadas

Exemplo Demonstração

<ol>
    <li> Item1
    <li> Item2
<ol>
    <li> Item3
    <li> Item4
    <li> Item5
<ul>
    <li> Item6
    <li> Item7
</ul>
    <li> Item8
</ol>
    <li> Item9
</ol>
  1. Item1
  2. Item2
    1. Item3
    2. Item4
    3. Item5
      • Item6
      • Item7
    4. Item8
  3. Item9
  1. Tags <DL> ... </DL>
  2. Tag <DT>
  3. Tag <DD>

Uma lista definição <DL> é uma lista de termos <DT> e suas definições <DD>. Cada definição é usualmente mostrada endentada em relação ao termo correspondente.

Exemplo Resultado

<dl>
   <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
   <dt>SGML</dt>
      <dd>Standard Generalized Markup Language</dd>
</dl>
HTML
HyperText Markup Language
SGML
Standard Generalized Markup Language

 

Exercício

Utilizando as tags desse capítulo você deve criar a seguinte página. De acordo com suas preferências.
Utilizando lista definição:
As coisas que eu mais gosto de fazer:

Sábado
  Pela manhã
     XXXXXXX
     YYYYYYYY
  À tarde
     XXXXXXX
     YYYYYYYY
  À noite
     XXXXXXX
     YYYYYYYY

Domingo
   XXXXXXXXXXX
   YYYYYYYYYYYY

Utilizando lista não ordenada:

Minhas bebidas preferidas
  AAAAAAA
  BBBBBBB
  CCCCCCC

Utilizando lista ordenada:

Quando eu acordo de manhã, essa é a seqüência das coisas que faço:

  AAAAAAAAA
  BBBBBBBBB

  CCCCCCCC

IMAGENS

Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado, para não errar a transmissão para o usuário.

Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.

Para inserir uma imagem, uso o TAG: <IMG>, que é único, não exigindo um TAG finalizado. Exemplo:

<IMG SRC="figura1.gif">

Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.

src - Define a origem do arquivo de imagem associado.

<img src="imagem1.jpg">

<img src="imagem2.jpg">

alt - Exibe o texto quando o browser não encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado.

<img src="imagem1.jpg" alt="Isto é uma estrela">

border - Especifica em pixels a largura da borda

<img src="imagem1.jpg" border="1">

vspace - Determina em pixel o espaço que deve ser deixado em branco na parte de cima e na parte de baixo da imagem

hspace - Determina em pixel o espaço que deve ser deixado em branco nas laterais da imagem

<img src="imagem1.jpg" hspace=50 vspace=50>

width - Define a largura da imagem, comprimento ou alongando, pode ser especificado em pixel ou em porcentagem.

Height - Define a altura da imagem, comprimento ou alongando, pode ser especificado em pixel ou em porcentagem.

<img src="imagem1.jpg" width=100 height=50>

Imagem

<img src="imagem1.jpg" width=50 height=100>

Align - Especifica o alinhamento da imagem

<img src="imagem1.jpg" align="top"> Texto alinhado na parte superior da imagem

Texto alinhado na parte superior da imagem

<img src="imagem1.jpg" align="middle"> Texto alinhado na parte média da imagem

Texto alinhado na parte média da imagem

<img src="imagem1.jpg" align="bottom"> Texto alinhado na parte inferior da imagem

Texto alinhado na parte inferior da imagem

<img src="imagem1.jpg" align="left"> Texto alinhado na margem esquerda <br /> mais um texto

Texto alinhado na margem esquerda
mais um texto

 

<img src="imagem1.jpg" align="right"> Texto alinhado na margem direita <br /> mais um texto

Texto alinhado na margem direita
mais um texto

 

 

 

Gifs Animados

Antes de saber como construir um Gif Animado é preciso saber o que é. Um Gif Animado não passa de várias imagens no formato .gif postas em sequência. A linguagem HTML não é capaz de produzir tal efeito de animação, para isso é necessário um programa específico.

Para entender melhor como funciona um "Gif Animado" veja a seguinte sequência de imagens:

Essas 4 imagens são colocadas em sequência (1, 2, 3, 4, 3, 2, loop), criando assim o efeito de animação...

Antes de inundar suas páginas de animações, lembre-se de que, ao usar a rede, a velocidade de transmissão das imagens é muito pequena. Por tanto uma imagem pode levar vários minutos para ser exibida, frustando o internauta.

Imagens com Mapas Clicáveis

É provável que você já tenha visto alguma imagem pela Internet cuja função era servir de link para outras páginas, porém de uma forma diferente, ao invés de termos uma imagem que quando clicada em qualquer ponto desta o browser se dirigi para um link específico, temos uma imagem dividida em diversas "regiões" onde cada uma delas, quando clicada, se dirigi a um link diferente.

Esse tipo de imagem é chamada de imagem com mapa clicável, imagem clicável ou imagem sensivel.

Você também pode usar um programa para criação de mapas clicáveis, que construirá o código do mapa para você, isto pode ser útil para aqueles que não sabem perfeitamente como criá-lo, um exemplo deste tipo de programa é o Mapedit.

 A referência para que a imagem siga um mapa determinado dentro do documento HTML é feita através do atributo usemap="nome do mapa" adicionado ao img.

Exemplo de uma imagem que deverá possuir um mapa clicável, sendo adicionada:
<img src="imagem.gif" usemap="#nome">

Nota: o nome do mapa deve ser precedido pelo caracter #.

Construindo os Mapas

Os mapas utilizam as tags <map>...</map> para a construção de sua estrutura, com o atributo name no elemento map para indicar o nome do mapa.

Exemplo da estrutura básica de um mapa:

<map name="nome">

<area shape="circle/rect/poly" coords="x,y" href="URL">
</map>            Para definir as regiões da imagem que serão linkadas deve-se usar a tag <AREA>, esta por sua vez deve ser procedida por alguns atributos específicos que seguem abaixo:

Atributo shape="circle/rect/poly"

Este atributo determina o tipo da area que será linkada (circle=circulo, rect=retângulo e poly=polígono).

Atributo coords="x,y"

Indica as coordenadas em pixels das áreas sensíveis de acordo com o tipo de forma especificada pelo atributo shape:

  • Circle (x,y,r)
    Se a forma for do tipo circulo, então devem ser indicados nas coordenadas três dados: x,y as coordenadas da localização do centro do circulo e r o tamanho do raio.

    <map id="planetamap" name="planetamap">
    <area shape="circle" coords="35,35,25" href="#" target="_blank"/>
    </map>
  • Rect (x1,y2,x3,y4)
    Se a forma for do tipo retângulo, se indica nas coordenadas 4 dados, sendo x1,y2 a localização do vértice superior esquerdo do retângulo e x3,y4 as coordenadas do vértice inferior direito do mesmo.

    <map id="planetamap" name="planetamap">
    <area shape="rect" coords="10,10,60,60" href="#" target="_blank"/>
    </map>
     
  • Poly (xa,ya,xb,yb...)
    Se a forma for do tipo polígono deve indicar-se a localização de cada vértice do polígono através de pares de coordenadas

    <map id="planetamap" name="planetamap">
    <area shape="poly" coords="10,10,70,10,40,60" href="#" target="_blank"/>
    </map>

    • Atributo href="http://www.dominio.com"

    Esse atributo é usado para indicar o endereço do link que a area clicavel da imagem deve fazer referencia.

    Não se esqueça que cada mapa pode conter mais de uma tag <area>. Veja abaixo o exemplo completo de um mapa clicável:

    <img   src="imagem.jpg" usemap="#mapa">
    <map name="mapa">
        <area   shape="rect" coords="0,0,80,60" href="pagina1.html">
        <area shape="rect"   coords="80,60,160,60" href="paga2.html">
        <area shape="circle"   coords="120,100,30" href="paga3.html">
        <area shape="poly"   coords="10,80,0,90,15,100,30,100,20,80,10,80"   href="pagina4.html">
    </map>

    Hyperlinks

    Tags <A>...</A>

    Faz a âncora entre documentos ou partes de um mesmo documento. Deve sempre ser utilizada acompanhada de um atributo que fará a especificação do tipo de âncora que se deseja. O texto que está incluído entre as tags <A> e </A> será apresentado como link no documento (sublinhado e em cor destacada).

    Abaixo alguns dos atributos mais comuns que podem ser utilizados com a tag <A>:

    Inserindo um link

    <a href="http://www.servidor1.com.br/pasta1/pagina1.html"> Página 1 </a>

    Nome do protocolo: http

    Nome do servidor: www.servidor1.com.br/

    Nome do diretório: pasta1

    Nome do arquivo: pagina1.html

    Exemplos de protocolos

    http, gopher, ftp, telnet, wais e file.

    Exemplos de links

    <a href="index.html"> Índice </a><br />

    <a href="produtos.html"> Produtos </a><br />

    <a href="service.html"> Serviços </a><br />

    <a href="help.html"> Ajuda </a><br />

    Exemplos de sites

    <a href="www.uol.com.br"> UOL </a><br />

    <a href="www.hotmail.com"> Hotmail </a><br />

    <a href="www.orkut.com"> Orkut </a><br />

    Exemplos de diretórios

    <a href="arquivo1.html"> Arquivo 1 </a>

    O arquivo1.html está localizado no diretório atual

    <a href="exemplo2/arquivo2.html"> Arquivo 2 </a>

    O arquivo2.html está localizado no diretório (ou pasta) exemplo2

    <a href="exemplo3/subexemplo/arquivo3.html"> Arquivo 3 </a>

    O arquivo3.html está localizado no diretório subexemplo, que está subordinado ao diretório exemplo3, que se encontra no diretório atual.

    <a href="../arquivo4.html"> Arquivo 4 </a>

    O arquivo4.html está localizado no diretório (ou pasta) situado um nível à esquerda do diretório atual.

    <a href="../../exemplo5/arquivo5.html"> Arquivo 5 </a>

    O arquivo5.html está localizado dois níveis de diretórios à esquerda, no diretório exemplo5

    Usando imagem como link

    <a href="fotos.html"> <img src="imagem1.jpg"> </a>

    O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo:

    <a href="#aqui">Aqui é um ponto para desvios</a><br />

    ...<br />

    <a name="aqui">Desvia para o ponto "aqui"</a>

    Exemplos de âncoras
    <html>
    <head>
       <title> Resumo da Grécia </title>
    </head>
    <body>
       <p> Informações breves sobre a Grécia </p>
       <hr>
       <p>
          <a href="#populacao"> | População | </a>
          <a href="#religiao"> |Religião | </a>
          <a href="#idioma">| Idioma |</a>
       </p>
       <hr>
       <p>
          <a name="populacao"> População: </a> 10.264.153 (estimativa do censo de 1991. Calcula-se que mais de 4 milhões de gregos vivem no exterior, inclusive mais de 2 milhões na América.
       </p>
       <p>
          <a name="religiao"> Religião: </a> De todos os cidadãos da república Helênica: 97,6% são ortodoxos, 1,3% muçulmanos, 0,4% católicos romanos, 0,1% protestantes, 0,6% outros, incluindo os judeus.
       </p>
       <p>
          <a name="idioma"> Idioma: </a> O idioma grego, com um registro de três e meio milênios de existência, é um elemento forte da continuidade nacional.
       </p>
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    </body>
    </html>

     

    Exercício
    Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício.
    <html>
    <head>
       <title>Link para o exercício 8.1.</title>
    </head>
    <body>
       <H1> Vamos ligar esse documento à parte inferior do exercício 8.1 </H1>
       <A href="exercicio.html#Final"> Clique aqui para ir ao final do exercício 8.1 </A>
       <br />
       <A href="#Final"> Clique aqui para ir ao final desse exercício </A>
       <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
       <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
       <A NAME="Final">Final desse documento.</A>
    </body>
    </html>

    O atributo target

    O atributo target permite-nos abrir uma nova janela ou moldura ("frame") diferente daquela em que se clicou.

    O target = " _blank" é útil em especial para links externos ou seja, o visitante abre o link de outro site, mas a janela atual não se fecha.

    Se for utilizado target="_top" o link será forçado a abrir em janela inteira, caso o link esteja numa página dentro de um frame

    target = "_blank": obriga que qualquer página seja carregada em uma nova janela.

    target = "_top": obriga que qualquer página seja carregada na janela de maior nível, limpando qualquer janela de frame existente no momento

    target = "_self": obriga que qualquer página de retorno seja carregada dentro da janela que o contém.

    target = "_parent": obriga que qualquer página de retorno seja carregada na janela que é a parente da janela mãe.

    COMO FAZER UM LINK PARA ENVIAR E-MAIL

    Código:<a href="mailto:seuemail@provedor.com.br">Clique Aqui</a>

    Note que ao ser clicado no link (Clique Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo:

    Meu e-mail é: fulano@provedor.com.br se preferir, Clique Aqui

    Criando links para download

    É provável que, depois de criar suas páginas, você queira colocar arquivos para que os visitantes façam download em sua home page. Este é um recurso bem fácil e simples. Vamos explicar.

    Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download.

    Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim:

    <a href="exemplo.zip">Descrição do link</a>

    Observações

    Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito.

    Dicas
    1. Coloque textos curtos e significativos para seus links.
    2. Na tag <body> é possível especificar a cor dos links não visitados, links visitados e links ativos, utilizando os atributos LINK, VLINK e ALINK, respectivamente.
    3. Quando referindo páginas que estão fora do diretório onde seu documento está armazenado não se esqueça de colocar o caminho completo para o link, por exemplo, http://www.site1.br para fazer um link para o site da SITE1.

    Multimídia

    <<<Por causa do Flash, estes comandos são poucos usados na Internet>>>

    Player Formato de Arquivos
    Quicktime aif, aiff, aac, au, bmp, gsm, mov, mid, midi, mpg, mpeg, mp4, m4a, psd, qt, qtif, qif, qti, snd, tif, tiff, wav, 3g2, 3pg
    Flash flv, mp3, swf
    Windows Media Player asx, asf, avi, wma, wmv
    Real Player ra, ram, rm, rpm, rv, smi, smil
    Silverlight xaml
    iframe html, pdf

    Como inserir música no Website

    Como tudo no Html, colocar som em um site é uma tarefa extremamente simples. Mas antes de mostrar a tag responsável pro esta tarefa, devo alertar os perigos com o uso dessa tag. Colocar música em um site, pode causar uma terrível lentidão no carregamento da página, principalmente que acessa internet via modem 56 K. E lembre-se: basta um clique e lá se vai o seu site belíssimo cheio de sons pesados...

    Existem duas formas de colocar som no seu site: pela tag <bgsound> e pela tag <embed>

    BGSOUND

    Obs: não funciona no Mozilla Firefox, só funciona no Internet Explorer.

    A tag <bgsound> insere uma música de fundo sem a presença do display, para sair da música é só apertar a tecla "Esc" do teclado.

    A tag <bgsound> tem os seguintes parâmetros:

    <bgsound src="nomedamusica.mid" loop="-1">

    Parâmetros Descrição
    src

    O parâmetro src é o endereço da URL do site onde está a música, exemplo:

    <bgsound src="http://www.nomedosite.com/nomedamusica.mid">

    Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV).

    É recomendado usar arquivos midi por serem bem menores que os wavs.

    Mas recentemente tem crescido o suporte ao formato .mp3.

    loop

    No parâmetro loop você pode definir quantas vezes a música irá repetir. Se você colocar LOOP="-1", a música irá tocar sem parar até que o internauta saia da página.

    Em "loop" você pode colocar o número de vezes que o som vai ser repetido, exemplo: LOOP="10". A música vai ser repetida 10 vezes.

    EMBED

    A tag <embed> insere a música num display, veja o display:

    A tag <embed> tem os seguintes parâmetros:

    Parâmetros Descrição
    src

    O parâmetro src é o endereço da URL do site onde está a música, exemplo:

    <bgsound src="http://www.nomedosite.com/nomedamusica.mid">

    Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV).

    É recomendado usar arquivos midi por serem bem menores que os wavs.

    Mas recentemente tem crescido o suporte ao formato .mp3.

    loop

    No parâmetro loop você pode definir quantas vezes a música irá repetir. Se você colocar LOOP="TRUE", a música irá tocar sem parar até que o internauta saia da página ou aperte no botão stop.

    Em LOOP="FALSE" irá tocar somente uma vez.

    autostart Em autostart você define se quer a música comece a tocar sozinha (atributo TRUE), ou se colocar "FALSE" o usuário terá que clicar no botão "play" para ouvir a música.
    Você ainda pode definir o tamanho do display
    width Largura do display
    Height Altura do display
    Outros valores não importantes
    Volume Controle a altura do volume, varia de 0 a 100.
    Hidden Esconde os controles que aparecem no navegador se escrever True.
    Align Alinha o controle e pode ser: top, bottom, center, left, right,...
    Starttime Determina aonde deve ser iniciado a música. Por exemplo: se uma música tem 3 minutos podemos determinar que a música comece aos 2min. e 19 seg. (insira 02:19)
    Endtime Determina aonde deve ser finalizada a música. P.ex.: 02:55
    Controls: Mostra os controles que deseja aparecer no navegador:
        Console: Inclui botões: Play, Pause, Stop e Volume;
        SmallConsole: Inclui somente os botões Play, Stop e Volume;
        PlayButton: Somente mostra o botão Play;
        PauseButton: Mostra somente o Pause;
        StopButton: Mostra somente o Stop;
        VolumeLever: Somente Volume
        MasterSound: É a música principal se usar vários embed’s;

    Como inserir audio usando Javascript

    A tag <embed> ter as suas propriedades Javascript, exemplo:

    <embed src="nomedamusica.mp3" loop="true" name="fundo" autostart="true">
    <br />
    <a href="javascript: document.fundo.play();">Play</a>
    <a href="javascript: document.fundo.pause();">Pause</a>
    <a href="javascript: document.fundo.stop();">Stop</a>

    Para ativar estas propriedades, use o atributo name="nomedapropriedade".

    Onde:

    Propriedade Definição
    document.nomedapropriedade.play() Inicia a música
    document.nomedapropriedade.pause() Pausa a música
    document.nomedapropriedade.stop() Pára a música

    Como inserir Vídeo no seu Website

    Assim como os recursos de audio, vários formatos de vídeos com .mpeg, .mov, .avi, etc. podem ser incluídos em páginas Html usando o elemento <embed>, exemplo:

    <embed src="filme.mov" autostart="false">

    A mesma tag <embed> pode ser usada para vídeos e sua extensão normalmente é .AVI. No caso de vídeo, também pode haver início automático e com loop e sendo assim é iniciado o plugin do windows Movie for Windows. Os controles permitidos são: Src, Autostart, Loop, width, Height e Align.

    Se a extensão for .MOV o plugin acionado será o QuickTime.

    Tabelas

    Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão que eles foram acrescentados à linguagem HTML.

    CONSTRUINDO TABELAS COM O ELEMENTO TABLE

    A TAG <TABLE>  é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>

    Exemplo de tabela

    Linha 1 - Coluna 1 Linha 1 - Coluna 2 Linha 1 - Coluna 3
    Linha 2 - Coluna 1 Linha 2 - Coluna 2 Linha 2 - Coluna 3

     

    <table border="1">
        <tr>
            <td> Linha 1 - Coluna 1 </td>
            <td> Linha 1 - Coluna 2 </td>
            <td> Linha 1 - Coluna 3 </td>
        </tr>
        <tr>
            <td> Linha 2 - Coluna 1 </td>
            <td> Linha 2 - Coluna 2 </td>
            <td> Linha 2 - Coluna 3 </td>
        </tr>
    </table>

    Alterando o tamanho das bordas

    O uso de bordas pode melhorar bastante a aparência da tabela. Quando é especificado border sem nenhum valor - <table border> -, é criada uma borda de 1 pixel de espessura. Para aumentar essa espessura, basta especificar o valor desejado, por exemplo: <table border=20>, <table border=5> ou <table border="1"0>.

    Se <table border=0> ou <table> sem o atributo border, cria uma tabela sem bordas.

    Exemplo simples:

    1. <table> ou <table border=0>
    2. <table border> ou <table border="1">
    3. <table border=5>
    4. <table border="1"0>
    5. <table border=20>

    Exemplo pratico:

    <table border=20>
        <tr>
            <td> Linha 1 Coluna 1 </td>
            <td> Linha 1 Coluna 2 </td>
        </tr>
        <tr>
            <td> Linha 2 Coluna 1 </td>
            <td> Linha 2 Coluna 2 </td>
        </tr>
    </table>

    Linha 1 Coluna 1 Linha 1 Coluna 2
    Linha 2 Coluna 1 Linha 2 Coluna 2

    colspan=nº - Indica o número de colunas que esta célula deverá ocupar.

    rowspan=nº - Indica o número de linhas que esta célula deverá ocupar.

    Exemplo simples:

    <td colspan="3"> Célula com 3 colunas </td>

    <td rowspan="2"> Célula com 2 linhas </td>

    Exemplo prático

    Célula com 3 colunas
    Item1 Item2 Item3

    <table border="1">
         <tr>
             <td colspan="3"> Célula com 3 colunas </td>
         </tr>
         <tr>
             <td> Item1 </td> <td> Item2 </td> <td> Item3 </td>
         </tr>
     </table>

    Célula com 2 colunas Item1
    Item2

    <table border="1">
         <tr>
             <td rowspan="2"> Célula com 2 colunas </td>
             <td> Item1 </td>
         </tr>
         <tr>
             <td> Item2 </td>
         </tr>
     </table>

    Aplicando cor na tabela inteira

    Para aplicar uma cor de fundo em uma tabela inteira, basta especificar a opção bgcolor no comando table.

    Exemplo simples:

    <table colorindo="blue">

    ou

    <table bgcolor="0000FF">

    Exemplo Prático:

    Linha 1 Coluna 1 Linha 1 Coluna 2
    Linha 2 Coluna 1 Linha 2 Coluna 2

    <table border="1" bgcolor="yellow" >
         <tr>
             <td> Linha 1 Coluna 1 </td>
             <td> Linha 1 Coluna 2 </td>
         </tr>
         <tr>
             <td> Linha 2 Coluna 1 </td>
             <td> Linha 2 Coluna 2 </td>
         </tr>
     </table>

    Aplicando cor em células específicas

    Você pode aplicar uma cor específica em uma célula usando a opção bgcolor dentro do comando <td>.

    Exemplo:

    Blue Green
    Red Yellow

    <table border="1">
         <tr>
             <td bgcolor="blue" > Blue </td>
             <td bgcolor="green"> Green </td>
         </tr>
         <tr>
             <td bgcolor="red" > Red </td>
             <td bgcolor="yellow" > Yellow </td>
         </tr>
     </table>

    Usando imagem de fundo em tabelas

    Pode-se acrescentar uma imagem de fundo na tabela como um todo, acrescentando a opção background="imagem" ao comando <table>.

    Exemplo simples:

    <table border background="figura1.jpg">

    Exemplo prático:

    Item A Item B Item C Item D
    Item E Item F Item G Item H
    Item I Item J Item L Item M

    <table border="1" background="figura1.jpg">
         <tr>
             <td> Item A </td>
             <td> Item B </td>
             <td> Item C </td>
             <td> Item D </td>
         </tr>
         <tr>
             <td> Item E </td>
             <td> Item F </td>
             <td> Item G </td>
             <td> Item H </td>
         </tr>
         <tr>
             <td> Item I </td>
             <td> Item J </td>
             <td> Item L </td>
             <td> Item M </td>
     </tr>
     </table>

    Alinhamento de célula

    As tabelas Html oferecem várias opções para o alinhamento dos dados contidos nas células, tanto na horizontal como na vertical.

    Align= "left" | "center" | "right" - Especifica o alinhamento horizontal do conteúdo da célula.

    Valign= "top" | "middle" | "bottom" - Especifica o alinhamento vertical do conteúdo da célula.

      align
    left center right
    valign       top
    middle
    bottom

    Exemplo simples

    <td align="left" valign="bottom">

    ou

    <tr align="center" valign="middle">

    Usando os atributos cellpadding e cellspacing

    cellspacing="número" - Especifica o espaçamento em pixels entre as células.

    cellpadding="número" - Especifica o espaçamento entre o conteúdo e a borda da célula.

    Exemplo:

    <table border="1" cellspacing=20 cellpadding=40 >
         <tr>
             <td> Item 1 </td>
             <td> Item 2 </td>
         </tr>
         <tr>
             <td> Item 3 </td>
             <td> Item 4 </td>
         </tr>
     </table>

    Usando as tags <caption> e <th>

    <th> - Através do comando <th> você pode especificar títulos para as colunas. Esse comando funciona da mesma forma que o comando <td>, só que deixa o conteúdo da célula centralizado e em negrito.

    <caption> - Se você quiser criar uma legenda para a tabela, basta usar o comando <caption> imediatamente após o comando <table>. No comando <caption> o atributo align pode ter o valor top ou bottom. Por padrão, a legenda é colocada na parte superior da tabela (align="top"). Você pode usar o atributo align="bottom" na legenda, se quiser apresentá-la na parte inferior da tabela, como neste exemplo:

    <table border>

    <caption align="bottom"> Legenda alinhada na parte inferior </caption>

    Exemplo prático:

    Legenda top
    Título 1 Título 2 Título 3
    Linha 1 Coluna 1 Linha 1 Coluna 2 Linha 1 Coluna 3

    <table border="1">
             <caption align="top"> Legenda top </caption>
         <tr>
             <th>Título 1 </th> <th> Título 2 </th> <th> Título 3 </th>
         </tr>
         <tr>
             <td> Linha 1 Coluna 1 </td>
             <td> Linha 1 Coluna 2 </td>
             <td> Linha 1 Coluna 3 </td>
         </tr>
     </table>

    Frames

    Os FRAMES são divisões de telas do seu browser que permite a utilização de vários documentos no formato HTML.
    Os FRAMES são visualizados pelo Firefox, e pelo Internet Explorer.

    ESTRUTURA

    Assim como o corpo do HTML, os FRAMES têm sua estrutura. Eles entram no lugar do corpo, substituindo o <body></body> por <FRAMESET></FRAMESET>.

    Exemplo:
    <html>
    <head>
       <title> Título do Documento </title>
    </head>
       <frameset>
          Sintaxe dos Frames
       <frameset>
    </html>

    SINTAXE

    Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES.

    a) conteúdo do arquivo exemplo1.html
    <html>
    <head>
       <title> Exemplo 1 </title>
    </head>
       <frameset cols="30%,*">
          <frame src="menu.html" name="janela1">
          <frame src="a.html" name="janela2">
       </frameset>
    </html>

     

    b) Conteúdo do arquivo menu.html
    <html>
    <head>
       <title> Menu Principal </title>
    </head>
    <body>
       <center>
       <h1> Menu Principal </h1>
       <ul>
          <li> <a href="a.html" target="janela2" > Introdução </a></li>
          <li> <a href="b.html" target="janela2" > Capítulo 1 </a></li>
          <li> <a href="c.html" target="janela2" > Capítulo 2 </a></li>
       </ul>
    </center>
    <body>
    </html>

     

    c) Documento a.html
    <html>
    <head>
       <title> Introdução </title>
    </head>
    <body>
       <h1> Este é o documento a.html </h1>
       <h2> Introdução </h2>
    </body>
    </html>

     

    d) Documento b.html
    <html>
    <head>
       <title> Introdução </title>
    </head>
    <body>
       <h1> Este é o documento b.html </h1>
       <h2>Capítulo 1 </h2>
    </body>
    </html>

     

    e) Documento c.html
    <html>
    <head>
       <title> Introdução </title>
    </head>
    <body>
       <h1> Este é o documento c.html </h1>
       <h2> Capítulo 2 </h2>
    </body>
    </html>

    Estudando a tag frameset

    COLS
    Especifica o numero de FRAMES e a largura de cada um.

    Exemplo:

    <frameset cols="30%,*">
       <frame src="menu.html" name="janela1">
       <frame src="a.html" name="janela2">
    </frameset>

    ROWS

    Especifica o numero de FRAMES e a altura de cada um.

    Exemplo:

    <frameset rows="*,*,*">
       <frame src="a.html">
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    1) Usando valores em pixels

    <frameset cols="100,300,200">
       <frame src="a.html">
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    2) Usando valores relativos

    <frameset cols="*,*,*">
       <frame src="a.html">
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    3) Usando valores percentuais

    <frameset cols="25%,50%,25%">
       <frame src="a.html">
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    4) Usando os 3 valores acima

    <frameset cols="25%,*,100">
       <frame src="a.html">
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    A) combinando linhas e colunas (rows e cols)

    <frameset rows="50%,50%">
       <frameset cols="50%,50%">
          <frame src="a.html">
          <frame src="b.html">
       </frameset>
          <frame src="c.html">
    </frameset>

    Utilizando o atributo framespacing

    Este atributo tem como finalidade alterar o espaço entre as frames dando a impressão de que a borda das frames foi aumentada. Contudo, ele apenas distancia um frame do outro pela quantidade de pixels especificados.

    <frameset rows="50%,50%" framespacing=20 >
       <frameset cols="50%,50%">
          <frame src="a.html">
          <frame src="b.html">
       </frameset>
          <frame src="c.html">
    </frameset>

    Utilizando o atributo frameborder="1" ou 0

    Este atributo tem a finalidade de eliminar as bordas das frames. Como padrão, ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão omitidas. A omissão de bordas é interessante para criar a ilusão de uma única janela, onde partes dessa janela são independentes das outras. Outro efeito interessante é a mudança da cor de fundo de cada janela, permitindo dividir a tela em áreas coloridas distintas.

    <frameset rows="50%,50%" frameborder=0 >
       <frameset cols="50%,50%">
          <frame src="a.html">
          <frame src="b.html">
       </frameset>
          <frame src="c.html">
    </frameset>

    Estudando a tag frame

    <frame
       src="endereço"
       name="nome"
       scrolling="yes|no|auto"
       noresize
       frameborder="1" | 0
       marginheight=altura
       marginwidth=largura
    >

    a) src="endereço"

    Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame.

    <frameset cols="30%,*">
       <frame src="menu.html" name="janela1">
       <frame src="a.html" name="janela2">
    </frameset>

    b) name="nome"

    Atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos

    Exemplo:

    <frameset cols="30%,*">
       <frame src="menu.html" name="janela1">
       <frame src="a.html" name="janela2">
    </frameset>

    c) scrolling=yes|no|auto                      —> barra de rolagem

    c.1) scrolling="auto"

    Por padrão, se o conteúdo de uma frame ocupar um espaço maior que a área disponível para ele, automaticamente incluirá barras de rolagem ao lado ou na parte inferior do frame, para que o usuário possa rolar o documento.

    c.2) scrolling="no"

    A definição do valor NO para o atributo scrolling desativa o uso de barras de rolagem para o frame corrente. (Convém notar que, se você definir scrolling="no", mas se o texto do documento ocupar um espaço maior que o reservado para a frame, o usuário não poderá rolar o documento para ler o texto adicional.)

    d) noresize

    Por padrão, os usuários podem alterar a posição das bordas. Assim como qualquer janela do windows, um frame pode ser redimensionado arrastando-se sua borda. Quando o cursor é posicionado sobre a borda, ele muda de formato e, se o usuário pressionar o botão esquerdo do mouse, poderá arrastar a borda até atingir o tamanho desejado.

    Para fixar as bordas de uma frame e impedir que elas sejam movidas, use o atributo noresize.

    e) marginheight=altura

    Especifica a altura da margem superior e inferior do frame em pixel.

    f) marginwidth=largura

    Especifica a largura das margens esquerda e direita do frame em pixel

    Usando os atributos marginheight e marginwidth

    <frameset rows="*,*,*">
       <frame src="a.html" marginwidth=50 marginheight=50>
       <frame src="b.html">
       <frame src="c.html">
    </frameset>

    Estudando a tag base

    A tag <base target> é responsável por indicar ao browser onde os arquivos vinculados pelo comando <a href> devem ser carregados. Se esse comando for omitido, os capítulos serão carregados no mesmo frame.

    Vejamos o conteúdo do arquivo menu.html

    Exemplo:
    <html>
    <head>
       <title> Menu Principal </title>
       <base target="janela2">
    </head>
    <body>
       <center>
       <h1> Menu Principal </h1>
       <ul>
          <li> <a href="a.html"> Introdução </a> </li>
          <li> <a href="b.html"> Capítulo 1 </a> </li>
          <li> <a href="c.html"> Capítulo 2 </a> </li>
       </ul>
       </center>
    </body>
    </html>

    Obs: o comando <base target="janela2"> substitui o comando <a href="a.html" target="janela2"> todos os links serão abertos na janela2.

    Utilizando o atributo target numa tag <a href>

    Exemplo:

    <ul>
             <li> <a href="a.html" target="janela2" > Introdução </a></li>
             <li> <a href="b.html" target="janela2" > Capítulo 1 </a></li>
             <li> <a href="c.html" target="janela2" > Capítulo 2 </a></li>
     </ul>

    Utilizando target mágicos

    a) target="_blank"

    O nome "_blank" faz com que uma nova janela seja aberta.

    Exemplo:

    <a href="exemplo1.html" target="_blank">

    b) target="_self"

    O nome "_self" faz com que o documento carregado seja exibido na mesma janela em que está o link.

    Exemplo:

    <a href="exemplo1.html" target="_self">

    c) target="_parent"

    Esse nome faz com que o link seja carregado no frameset de nível superior ao do documento atual

    Exemplo:

    <a href="exemplo1.html" target="_parent">

    d) target="_top"

    O nome "_top" faz com que o documento seja carregado usando a janela inteira do browser, ocupando assim a exibição das frames do documento.

    Exemplo:

    <a href="exemplo1.html" target="_top">

    6) - Utilizando a tag <iframe>

    Exemplo:
    <html>
    <head>
       <title> Iframe Exemplo </title>
    </head>
    <body>
       <p> Inserindo uma frame dentro de um documento sem usar a tag frameset </p>
       <iframe src="a.html" width=200 height=200 frameborder="1"></iframe>
    </body>
    </html>

    A tag <iframe> permite que você insira um documento Html em um frame de qualquer parte de outro documento html.

    Especifica a largura em pixels.

    Especifica a altura em pixels.

    Especifica a URL do frame flutuante a ser apresentado no frame.

    Especifica o nome do frame para propósito de vinculação e destino.

    Indica se a frame deve exibir uma borda. O valor 1 indica a presença de uma borda e o valor 0 indica que nenhuma borda deve ser apresentada.

    Especifica a espessura da borda em pixels (extensão do Internet Explorer).

    Especifica a cor da borda (extensão do Internet Explorer).

    Especifica o número de pixels adicionais entre a borda do frame (extensão do Internet Explorer).

    Especifica a largura da margem em pixels.

    Especifica a altura da margem em pixels.

    Indica que o frame não deve ser redimensionado pelo usuário (extensão do Internet Explorer).

    Assim como a tag <frame>, indica se o frame deve incluir barra de rolagem. (Esse atributo pode receber os valores yes, no ou auto. O padrão é auto.)

    Especifica a altura da margem (extensão do Internet Explorer).

    Especifica a largura da margem (extensão do Internet Explorer)

    Assim como a tag <img>, especifica o posicionamento do frame com relação à linha de texto em que ele ocorre. Os valores possíveis são left, middle, right, top, bottom, sendo que o último o padrão.

    align="top"

    O texto ao redor do frame é alinhado pela parte superior do frame.

    align="middle"

    O texto ao redor do frame é alinhado pelo meio do frame.

    align="bottom"

    O texto ao redor do frame é alinhado pela parte inferior do frame.

    align="left"

    O frame é alinhado à esquerda, deixando o texto posicionado no seu lado direito.

    align="right"

    O frame é alinhado à direita, deixando o texto posicionado no seu lado esquerdo.

    Redirecionamento com frames

    Quando você quiser fazer um redirecionamento mantendo o endereço do domínio no navegador, uma opção pode ser o uso de frames: você cria um quadro que ocupe 100% da tela e, dentro dele, faz referência ao novo endereço do site:

    Arquivo: index.html

    <html>
    <head>
    <title> Título do seu site </title>
    </head>
    <frameset rows="*" noborder border=0 frameborder=0>
    <frame name="conteudo" scrolling="yes" noresize src="http://www.site.com.br" marginwidth=0 marginheight=0>
    <noframes>
    <body>
    <h1>Mudamos de endereço</h1>
    <h1><a href="http://www.novosite.com.br">www.novosite.com.br</a>
    </body>
    </noframes>
    </frameset>
    </html>

    Para quem não conhece frames, vamos analisar cada trecho do código:

    <frameset rows="*" noborder border=0 frameborder=0>

    É a tag que define o frame. Aqui, rows="*" significa que o frame vai ocupar toda a tela. Os outros parâmetros garantem que nenhum tipo de borda vai aparecer, para que o usuário não perceba que está acessando o conteúdo dentro de um quadro.

    <frame name="conteudo" scrolling="yes" src="http://www.site.com.br">

    Aqui, definimos o quadro. O parâmetro name identifica o quadro - ele é mais útil quando você tem mais de um quadro na tela e precisa escolher em qual deles mostrar o conteúdo.

    O parâmetro scrolling diz respeito à barra de rolagem do navegador: usando "yes" elas aparecem, usando "no" elas somem.

    Em src, você define o endereço do site que quer exibir dentro do frame. Aqui valem as mesmas regras dos links: se fizer referência a uma página dentro do seu site, pode colocar só o nome dela; senão, coloque o endereço completo do site, sem esquecer do http://.

    E a tag noframes?

    Não se esqueça que você não sabe que navegador o usuário escolheu para acessar suas páginas. Se por acaso esse navegador não tiver suporte a frames, garanta que seu site vai ser acessado colocando pelo menos um link para o novo endereço.
    Se você escolheu os frames como solução permanente para seu site, a importância das meta-tags é ainda maior: os sites de busca não terão nenhum conteúdo na sua página index.htm para indexar. O que vai aparecer no resultado da busca é a mensagem que você utilizou dentro do noframes.

    Formulários

    A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um formulário em meu site onde eu peço a todos os visitantes que dêem suas opiniões. Essas informações devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente.

    O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc.

    É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado. É aí que entra a necessidade da interface ASP ou PHP. Tal interface permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador.

    A confecção de scripts exige que se aprenda uma linguagem de programação chamada ASP ou PHP

    CONSTRUINDO FORMULÁRIOS COM O FORM

    Para fazer formulário, você tem que colocar as TAGs <form></form>. Todos os outros comandos devem ficar dentro dessas TAGs. Ok?!

    ATRIBUTOS PARA FORM

    O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são:

    GET

    Esse atributo indica totalmente como o dado é passado para o script ou programa definido no atributo ACTION.

    POST

    Passa os dados para a entrada padrão do sistema operacional.

    Vale a pena lembrar, que será mostrado, abaixo, um exemplo completo, de como fazer sua página com formulários. Também será dado um endereço, de um servidor, que processa os dados e os retorna via e-mail. Aí  poderá ser lido normalmente. Agora será explicado como colocar os campos de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados, com o seu nome, e suas informações.

    Criando um formulário

    Exemplo:

    <form action="http://www.servidor1.com.br/bancodedados.php" method="post">
     ...
     </form>

    Obs: existe o method="get", mas o method="post" é o mais usado. Os atributos action e method são utilizados em outras linguagens de programação tais como ASP e PHP que serão ensinados em outros capítulos.

    INPUT

    A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valo mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando você for receber os dados, já, processados, irá vir o value = resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo:


    <input type="text" name="nome">

    Para mudar o tamanho, da janela padrão, você tem que colocar o comando size. Por exemplo:

    <input type="text" name="nome" size="8"> (ou número desejado)

    Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela. Por exemplo:

    <input type="text" name="nome" size="8" value="texto">

    Olhe como ficaria:

    TYPE="TEXT"

    Inserindo uma caixa de texto (text)

    Exemplo:

    <form>
       Campo 1: <input type="text" name="campo1"> <br />
       <!-- O primeiro campo permite a digitação de qualquer quantidade de caracteres em uma caixa com tamanho de 20    caracteres. -->
       Campo 2: <input type="text" name="campo2" size=5 maxlength=10> <br />
       <!-- O segundo campo possui uma caixa com tamanho 5 e permite a digitação de até 10 caracteres -->
       Campo 3: <input type="text" name="campo3" maxlength=5> <br />
       <!-- O terceiro campo mostra uma caixa com tamanho padrão e permite a digitação de 5 caracteres -->
       Campo 4: <input type="text" name="campo3" value="Isto é um texto">
       <!-- O último campo pode escrever "Isto é um texto" dentro da caixa de texto sem precisar digitá-lo -->
    </form>

    Resultado

    TIPOS DE ELEMENTOS TYPE

    Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte:


    <input type="password" name="nome" size="8">

    TYPE="PASSWORD"

    Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecerá o sinal de "*"! O comando é:

    <input type="password" name="senha" maxlength="6">

    Inserindo uma senha (password)

    Esse comando é idêntico ao comando caixa de texto. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco. Como o próprio nome indica, ele é ideal para a digitação de senha e palavras-chave, pois impede a visualização do texto que está sendo digitado.

    Exemplo:

    <form>
       Digite uma senha: <input type="password" name="senha" size=5 maxlength=5>
    </form>

    Resultado:

    TYPE="RADIO"

    Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto, utiliza-se o radiobutton's. Um exemplo típico do uso de tais botões, é cuja resposta pode ser SIM ou NÃO. É preciso que todos os rádios buttons sejam de um mesmo grupo, ou seja, referentes à mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e VALUE, são necessários. Veja a seguir:

    <p>
       <input type="radio" name="voce_gostou_dessa_home_page" value="sim">sim<br />
       <input type="radio" name="voce_gostou_dessa_home_page" value="nao">não
    </p>

    Repare:

    Inserindo botão de opção (radio)

    Exemplo:

    <form>
             Estado civil: <br />
             <input type="radio" name="estado" value="solteiro" checked> Solteiro <br />
             <input type="radio" name="estado" value="casado"> Casado <br />
             <input type="radio" name="estado" value="divorciado"> Divorciado <br />
             <input type="radio" name="estado" value="viuvo"> Viúvo
     </form>

    Resultado:

    TYPE="CHECKBOX"

    Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre está é a situação...O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa, pode ser escolhida.

    Definição dos checkboxs:
    <p>
       <imput Type="checkbox" name="Chrome" value="goo">Google Chrome<br />
       <imput Type="checkbox" name="Explorer" value="exp">Internet Explorer<br />
       <imput Type="checkbox" name="Firefox" value="fire">Firefox<br />
    </p>

    Veja o resultado:

    Inserindo caixa de seleção (checkbox)

    Exemplo:

    <form>
       <p>
             Linguagem de programação<br />
             <input type="checkbox" name="web1" value="html" checked> HTML<br />
             <input type="checkbox" name="web2" value="css" checked> CSS<br />
             <input type="checkbox" name="web3" value="javascript"> Javascript<br />
             <input type="checkbox" name="web4" value="dhtml"> Dhtml
       </p>
     </form>

    Resultado

    SELECT

    Embora os usuários não precisem digitar sempre suas respostas, mostrar cada opção através de botões consegue um bom espaço, e facilidade. Veja como ele funciona:
    <select>
    <option>opção1</option>
    </select>
    Veja o resultado:

    Inserindo caixa de listagem (select)

    Exemplo:

    <form>
             Digite capital:
             <select name="capital">
                     <option> Rio de Janeiro </option>
                     <option selected> São Paulo </option>
                     <option> Belo Horizonte </option>
                     <option> Vitória </option>
             </select>
     </form>

    Resultado:

    Usando os parâmetros size e multiple

    O parâmetro size permite a especificação de um tamanho fixo para a lista, independente da quantidade de itens que ela possui.

    Obs: para selecionar dois ou mais itens da lista pressione shift ou ctrl e selecione o item com o mouse.

    O parâmetro multiple permite que diversos itens sejam selecionados

    Exemplo:

    <form>
             Escolha seu nome:
             <select name="nomes" multiple size=8>
                     <option> João</option>
                     <option>Maria</option>
                     <option selected> Marcos</option>
                     <option> Sônia </option>
                     <option selected> Francisco</option>
                     <option> Joselma </option>
                     <option selected> Antônio</option>
                     <option> Francisca </option>
                     <option> Thiago</option>
                     <option> Romeu</option>
             </select>
     </form>

    Resultado:

    TEXTAREA

    Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associada à entrada do cliente (navegador). O atributo value não é aceito nesse elemento, mas você pode colocar já um texto da seguinte maneira. Veja como ele é colocado:

    <textarea name="nome" cols="20" rows="3">texto</textarea>

    Inserindo uma área de texto (textarea)

    rows - especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter.

    cols - especifica a largura, ou seja, a quantidade de caracteres ou colunas que a caixa deve ter.

    Exemplo:

    <form>
             <textarea name="campo1" rows="4" cols="20">
                     Digite seus comentários
             </textarea>
     </form>

    Resultado:

    TYPE="HIDDEN"

    Inserindo um texto oculto (hidden)

    Os campos ocultos não são apresentados no formulário. Eles ficam invisíveis na apresentação do navegador. Se alguém decidir consultar o código fonte Html da sua página estes campos serão apresentados.

    Exemplo:

    <input type="hidden" name="personagem" value="Bob Esponja Calça Quadrada">

    TYPE="FILE"

    Fazendo um upload de seus arquivos

    Se você quiser enviar a sua foto para o seu álbum de fotografia, esse comando é próprio para isto. Este comando envia para o servidor qualquer tipo de arquivo.

    Exemplo:

    <input type="file" name="foto" value="envie sua foto aqui">

    Resultado:

    TYPE="SUBMIT"

    Esse é o botão que submete os dados do formulário quando pressionados, ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja como se adiciona o botão:

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

    Veja como ficará:

    Enviando os dados do formulário - O botão submit

    Para enviar os dados do formulário para o servidor a linguagem html possui o botão submit que ao ser pressionado, acessa a URL do programa script especificado no comando form e envia os dados de cada campo do formulário.

    Veja o comando enviar abaixo

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

    TYPE="RESET"

    No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos os campos já preenchidos no formulário, voltando à situação inicial.

    <input type="reset" value="Limpar">

    Veja como ficará:

    Apagando o conteúdo de todos os campos

    Se você inserir novas informações para os campos do formulário, terá de apagar e digitar o texto nos campos de digitação. Por meio do botão apagar campo, você pode apagar e restabelecer o valor padrão para todos os campos do formulário de uma única vez.

    Veja o comando apagar campo abaixo:

    <input type="reset" value="apagar">

    Veja o exemplo com os campos enviar (submit) e apagar (reset) dentro de um formulário:

    <form action="http://www.meuservidor.com/formulário.php" method="post">
             Digite o seu nome neste campo: <br />
             <input type="text" name="nome" size=30 maxlength=50> <br />
             Pressione o botão para <br />
             <input type="submit" value="Enviar">
             ou <input type="reset" value="Apagar campo">
     </form>

    Resultado

    TYPE="BUTTON"

    Se não quero enviar os dados do formulário para o servidor, mas que os dados fiquem no navegador usamos o botão de comando (button), este botão só funciona quando utilizo uma outra linguagem, o Javascript, sem ele o botão não funciona.

    Inserindo um botão de comando (button)

    Exemplo:

    <input type="button" name="botao1" value="Botão de comando">

    Resultado:

    EXEMPLO COMPLETO

    Abaixo, temos um exemplo completo de uma página com um formulário.

    Código Fonte
    <form action="http://www.nomedaempresa.com.br/formulario.php" method="post">

             <input type="Hidden" name="TipoDeFormulario" value="E-mail">
             <input type="Hidden" name="Destino" value="nome@e-mail.com.br /">
             <input type="Hidden" name="Descricao" value="Dados do Formulário de HTML">

             Qual o seu nome?<input type="Text" name="Nome" size="40"><br />
             Qual o seu E-mail?<input type="Text" name="E_mail" size="40"><p>

             Você gostou da minha Home Page?<input type="Radio" name="Gostou" value="Sim">sim
             <input type="Radio" name="Gostou" value="Mais ou Menos"CHECKED> Mais ou Menos
             <input type="Radio" name="Gostou" value="Não">Nem um pouco!<p>

             Qual a página que você mais gostou??
             <select name="MelhorPágina">
                 <option value="Interface">Interface</option>
                 <option value="Imagens, som, etc.">Imagens, som, cores, comandos básicos, etc.</option>
                 <option value="Frames">Frames</option>
                 <option value="Ferramentas">Ferramentas</option>
                 <option value="Formulários">Formulários</option>
                 <option value="CGI">CGI</option>
                 <option value="JAVA">JAVA</option>
                 <option value="Javascript">Javascipt</option>
                 <option value="CHAT">CHAT</option>
                 <option value="Onde colocar">Onde colocar</option>
                 <option value="Onde divulgar">Onde Divulgar</option>
                 <option value="Bombas em Javascript">Bombas em Javascript</option>
                 <option value="Contadores de Acesso">Contadores de Acesso</option>
                 <option value="Organizando às informações">Organizando às informações</option>
             </select>

             <p> Deixe seus comentários sobre a minha Home Page:<textarea name="Comentários" cols="28" rows="5"></textarea><br />

             O que está faltando?<input type="Text" name="O_que_está_faltando" Value="o que falta?"><br />

             Essa Home Page lhe ajudou?
             <input type="Radio" name="Ajudou" value="sim">Sim
             <input type="Radio" name="Ajudou" value="Não!">Não!<p>

             <input type="Submit" value="Enviar ">
             <input type="Reset" value="Limpar Dados">
     </form>