INTRODUÇÃO AO HYPER TEXT MARKUP LANGUAGE (HTML)

HyTime - Hypermedia/Time-based Document Structuring Language

SGML - Standard Generalized Markup Language

Características Gerais do HTML

Documento Básico e seus Componentes

  <HTML> 
  <HEAD> 
  <TITLE>Exemplo de HTML simples</TITLE>
  </HEAD>
  <BODY>
  <H1>Este é o primeiro nível de cabeçalho</H1> 
  <P>Este é o primeiro parágrafo.
  <P>E este é o segundo.</P>
  </BODY>
  </HTML>

A Tag <html>

A Tag <head>

A Tag <title>

A Tag <body>

Atributos de <body>

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
onde:
bgcolor
cor de fundo (padrão: cinza ou branco)
text
cor dos textos da página (padrão: preto)
link
a cor dos links (padrão: azul)
alink
cor dos links, quando acionados (padrão: vermelho)
vlink
cor dos links, depois de visitados (padrão: azul escuro ou roxo)
Seus valores são dados em valores hexadecimais, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0.
Browsers que seguem a definição de HTML 3.2 também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.
backgroung
indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água.

Parágrafos

Cabeçalhos

Quebras de Linha

<body>
   <h1>Utilizando p</h1>
   <p>Esta sentença está separada por uma marcação de parágrafo </p>,;
   <p>desta sentença.</p>
   <HR WIDTH=100% ALIGN=CENTER SHADE>
   <h1>Utilizando br </h1>
   <br>Esta sentença está separada por uma marcação de quebra de linha lt;br>
   <br> desta sentença. </br>
   <body>

Barras Horizontais

Listas

Listas Não-Numeradas

  1. Comece com a marcação de início de lista: <UL>.
  2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar a marcação com </LI> ) 
  3. Encerre com a marcação de fim de lista: </UL>.
<ul>
   <li> maçãs </li>
   <li>bananas </li>
</ul>

Listas Numeradas

<ol>
   <li>laranja</li>
   <li>abacate</li>
   <li>abacaxi</li>
</ol>

Listas de Definições

<dl>
  <dt>SEFIN</dt>
     <dd>Secretaria de Finanças</dd>
  <dt>UFPB</dt>
     <dd>Universidade Federal da Paraíba</dd>
</dl>

Esta lista será vista assim:

Listas Intercaladas

<dl>
<dt>termo a ser definido
<dd>definição
   <ol>
   <li>item de uma lista numerada
   <li>item de uma lista numerada
      <ul>
      <li>item de uma lista
      </ul>
   <li>item de uma lista numerada
   </ol>
<dt>termo a ser definido
<dd>definição
</dl>

Formatação de Textos e Caracteres

Blocos de Texto

Texto Pré-Formatado

try{
  BDOdbc bdOdbcMolap = carga.criaBDOdbcMolap();
  System.out.println("Total Molap = " + carga.select(ordem,bdOdbcMolap,"P1","LOJA1","2001"));

  BDOdbc bdOdbcOlap = carga.criaBDOdbcOlap();
  System.out.println("Total Olap = " + carga.constulta(bdOdbcOlap));
}catch (Exception e){
  System.out.println(e);
}

Endereços

Envie críticas e sugestões para

apoio@ficticio.br
Qualquer dúvida ou comentário, você pode enviar um email à 
<a href="mailto:coordenacaro@ficticio.br"> coordenação

Frases

Estilos Lógicos

<cite>
Para títulos de livros, filmes, e citações curtas. Exemplo:
Assisti Guerra nas Estrelas umas oito vezes!
<code>
Para indicar trechos de código de programas. Exemplo:
for (x=0); cl &&(!feof(stdin)); x++));
<dfn>
Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo:
CERN: Centre d’Éstudes et Recherches Nucleaires
<em>
Ênfase, também normalmente apresentado em itálico. Exemplo:
É preciso pesquisar muito para encontrar o termo exato.
<kbd>
Indica uma entrada via teclado. Exemplo:
Para ler mensagens recebidas, digite pine -i
<samp>
Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:
O resultado do primeiro applet é: Hello, World!
<strong>
Forte ênfase, mostrado normalmente em negrito. Exemplo:
Antes de enviar um e-mail, confira o campo “Subject:”!
<var>
Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo:
No campo Login, escreva guest.

Estilos Físicos

<b>
Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)
<i>
Itálico (em alguns casos, caracteres apenas inclinados)
<tt>
Tipo teletype - fonte de espaçamento fixo.
<u>
Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.
<strike> ou <s>
Frase riscada.
<big>
Fonte um pouco maior.
<small>
Fonte um pouco menor.
<sub>
Frase em estilo índice, como em H2O.
<sup>
Frase em estilo expoente, como em Km2.

Tabelas de Acentuação/Caracteres Especias

Notação Descrição Aparência
&lt; Menor que <
&gt; Maior que >
&amp; E Comercial &
&quot Aspas duplas "
&reg Marca registrada ®
&copy copyrights ©
Caracter Notação
Acento agudo &xacute; onde x é uma letra qualquer, maiúscula ou minúscula
Acento grave &xgrave; onde x é uma letra qualquer, maiúscula ou minúscula
Acento circunflexo &xcirc; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com til &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com trema &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letras unidas &Aelig; = &aelig; = æ
Letra com argola &Aring; = Å e &aring = å
Cedilha &Ccedil; = Ç e &ccedil= ç
N com til &Ntilde; = Ñ e &ntilde; = ñ
O cortado &Oslash; = Ø e &oslash; = ø
THORN maiúsculo &THORN = Þ(Icelandic)
thorn minúsculo &thorn= þ (Icelandic)
eth minúsculo &eth ð (Icelandic)
eth maiúsculo &ETH;= Ð (Icelandic)

Cores e Fontes

Cores

<FONT COLOR="#rrggbb">Texto</FONT>

Tamanho

<FONT SIZE=tamanho_da_letra>Texto</FONT>

permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho padrão dos textos é 3. Podemos indicar tamanhos relativos a esse, por exemplo:

<FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=-2>Letra menor</FONT>

Letra maior Letra normal Letra menor

Fontes

<FONT FACE=fonte_da_letra>Texto</FONT>
<FONT FACE=Times COLOR="#0000AA">Fonte Times azul</FONT>
Fonte Times azul
<FONT FACE=Arial COLOR="#00AA00">Fonte Arial verde</FONT>
Fonte Arial verde
<FONT FACE=Courier COLOR="#AA0000">Fonte Courier vermelha</FONT>
Fonte Courier vermelha

Interligando Documentos (uso de links)

  1. Inicie a âncora com <a ( Há um espaço depois de a.).
  2. Especifique o documento a ser interligado, inserindo parâmetro HREF="nome do arquivo" seguido do sinal: > 
  3. Insira o texto que vai funcionar como link no documento corrente.
  4. Anote a marcação de final da âncora: </a>.

<a  href="ListaPraias.html">Praias</A>

Interligando Documentos em outros Diretórios

<a  href="Estados/Paraiba.html">Paraiba</A>

Ligando URL's

protocolo://servidor[:port]/path/filename,

file um arquivo no seu sistema local, ou servidor de ftp
http um arquivo em um servidor World Wide Web
gopher um arquivo em um servidor Gopher
WAIS um arquivo em um servidor WAIS
news um Usenet newsgroup
telnet uma conexão Telnet

Ligando Sessões Específicas em um Outro Documento

<h3><A NAME="relativo">Caminho relativo</A></h3>
que faz com que a âncora Caminho relativo seja o destino de um link. Se escrevermos:
Leia sobre <A HREF="#relativo">caminhos relativos</A>.
teremos uma ligação hipertexto para um trecho deste mesmo documento:

Inserindo Imagens

<IMG SRC="URL_imagem">
onde URL_imagem é a URL do arquivo que contém a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Atributos Básicos

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">
<IMG SRC="/imagens/sorria.gif" ALT="Novo!">

 é apresentado nos browsers gráficos assim: Sorria  

<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">
 
<IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento>

Terraalign=top Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom.

Terra align=middle Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom

Terra align=bottom Alinha o texto adjacente com a parte de baixo da imagem (default)

Terra align=right Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

Terra align=left Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

 

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

<IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right SRC="imagem.gif" alt="imagem">...e se pode escrever à vontade entre as imagens!

Isso resulta em:

TerraTerra ...e se pode escrever à vontade entre as imagens!

Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou seja:

praiaSuponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa...

...mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento top.

Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>.

Com esse atributo, podemos, por exemplo...

Sorriapraia ...ter um texto posicionado no ponto em que a margem direita fica livre, com
<BR CLEAR=RIGHT>
ou no ponto em que a margem esquerda fica livre, com
<BR CLEAR=LEFT>
Dessa maneira, podemos controlar bem a posição relativa dos textos.

praiaTambém se pode posicionar o texto no ponto em que ambas as margens estão livres. CorinthiansIsso é conseguido com
<BR CLEAR=ALL>

 

 

Tabelas

Elementos Básicos

<TABLE BORDER="borda">
...
</TABLE>

Títulos, linhas e elementos

define o título da tabela.
delimita uma linha.
define um cabeçalho para colunas ou linhas (dentro de <TR>).
delimita um elemento ou célula (dentro de <TR>).
<TABLE BORDER=4>
   <CAPTION>Primeiro exemplo</CAPTION>
   <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>
   <TR><TD>linha1, 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>
Primeiro exemplo
Coluna 1

Coluna 2

linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

Títulos compreendendo mais de uma coluna ou linha

<TABLE BORDER=1>
   <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR>
   <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>
   <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>
   <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>
   <TR><TD>duas linhas</TD></TR>
   <TR><TD>tres linhas</TD></TR>
</TABLE>
Colunas 1 e 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2
3 linhas uma linha
duas linhas
tres linhas

Alinhamentos em tabelas


Prédio principal do DSC-UFPB

O Centro de Ciência e Tecnologia da Universidade Federal da Paraíba desenvolve, desde 1970, atividades de Pós-Graduação e é reconhecido como Centro de Excelência pelo Conselho Nacional de Desenvolvimento Científico e Tecnológico (CNPq).

O Curso de Mestrado em Informática é oferecido pelo Centro de Ciências e Tecnologia (CCT) da Universidade Federal da Paraíba - Campus II, localizado em Campina Grande, Estado da Paraíba.

Laboratório de Sistemas de Informação (LSI) No Laboratório de Sistemas de Informação são desenvolvidas pesquisas relacionadas com banco de dados. As principais aplicações são relacionadas à Bancos de Dados Ativos e Dedutivos, Bancos de Dados Temporais, Projeto de Sistemas de Informação, Serviços de informação na Web e Sistemas Cooperativos. 
Laboratório de Redes de Petri (LABPETRI) No Laboratório de Redes de Petri são desenvolvidas pesquisas relacionadas com computação concorrente e distribuída, através da aplicação de redes de Petri e outros métodos formais, com ênfase na concepção, especificação, modelagem e validação de tais sistemas. As principais aplicações são relacionadas à Engenharia de Software, Sistemas em Tempo-Real, Banco de Dados, Sistemas a Eventos Discretos e Sistemas de Híbridos.
Para maiores informações:
Secretaria da Pós-Graduação: copin@dsc.ufpb.br

Alinhamentos simples

<TD ALIGN=alin_horizontal>Texto da célula</TD>
<TD VALIGN=alin_vertical>Texto da célula</TD>

Padrão

ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT

Padrão

VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM
Padrão align=left align=center align=right
Padrão valign=top valign=middle valign=bottom

Alinhamentos combinados

<TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TD>

Padrão

ALIGN=LEFT, VALIGN=BOTTOM ALIGN=CENTER, VALIGN=TOP ALIGN=RIGHT, VALIGN=MIDDLE

Alinhamentos de linhas

<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>


Prédio principal do DSC-UFPB

O Centro de Ciência e Tecnologia da Universidade Federal da Paraíba desenvolve, desde 1970, atividades de Pós-Graduação e é reconhecido como Centro de Excelência pelo Conselho Nacional de Desenvolvimento Científico e Tecnológico (CNPq).

O Curso de Mestrado em Informática é oferecido pelo Centro de Ciências e Tecnologia (CCT) da Universidade Federal da Paraíba - Campus II, localizado em Campina Grande, Estado da Paraíba.

Laboratório de Sistemas de Informação (LSI) No Laboratório de Sistemas de Informação são desenvolvidas pesquisas relacionadas com banco de dados. As principais aplicações são relacionadas à Bancos de Dados Ativos e Dedutivos, Bancos de Dados Temporais, Projeto de Sistemas de Informação, Serviços de informação na Web e Sistemas Cooperativos. 
Laboratório de Redes de Petri (LABPETRI) No Laboratório de Redes de Petri são desenvolvidas pesquisas relacionadas com computação concorrente e distribuída, através da aplicação de redes de Petri e outros métodos formais, com ênfase na concepção, especificação, modelagem e validação de tais sistemas. As principais aplicações são relacionadas à Engenharia de Software, Sistemas em Tempo-Real, Banco de Dados, Sistemas a Eventos Discretos e Sistemas de Híbridos.
Para maiores informações:
Secretaria da Pós-Graduação: copin@dsc.ufpb.br

Larguras

janeiro fevereiro março
abril maio junho
WIDTH=x%

ou em pixels:

WIDTH=x
<TABLE BORDER=1 width=50%>
janeiro fevereiro março
abril maio junho
<TABLE BORDER=1 width=50%>
<TR>
<TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>
</TR>
</TABLE>
janeiro fevereiro março
abril maio junho
<TABLE BORDER=1 width=50%>
<TR>
<TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD>
</TR>
</TABLE>
janeiro fevereiro março
abril maio junho

Prédio principal do DSC-UFPB

O Centro de Ciência e Tecnologia da Universidade Federal da Paraíba desenvolve, desde 1970, atividades de Pós-Graduação e é reconhecido como Centro de Excelência pelo Conselho Nacional de Desenvolvimento Científico e Tecnológico (CNPq).

O Curso de Mestrado em Informática é oferecido pelo Centro de Ciências e Tecnologia (CCT) da Universidade Federal da Paraíba - Campus II, localizado em Campina Grande, Estado da Paraíba.

Laboratório de Sistemas de Informação (LSI) No Laboratório de Sistemas de Informação são desenvolvidas pesquisas relacionadas com banco de dados. As principais aplicações são relacionadas à Bancos de Dados Ativos e Dedutivos, Bancos de Dados Temporais, Projeto de Sistemas de Informação, Serviços de informação na Web e Sistemas Cooperativos. 
Laboratório de Redes de Petri (LABPETRI) No Laboratório de Redes de Petri são desenvolvidas pesquisas relacionadas com computação concorrente e distribuída, através da aplicação de redes de Petri e outros métodos formais, com ênfase na concepção, especificação, modelagem e validação de tais sistemas. As principais aplicações são relacionadas à Engenharia de Software, Sistemas em Tempo-Real, Banco de Dados, Sistemas a Eventos Discretos e Sistemas de Híbridos.
Para maiores informações:
Secretaria da Pós-Graduação: copin@dsc.ufpb.br

Atributos de espaçamento

CELLPADDING - espaço entre o texto e as bordas da célula
CELLSPACING - espaço entre células
janeiro fevereiro março
abril maio junho
<TABLE BORDER=1 CELLPADDING=20>
janeiro fevereiro março
abril maio junho
<TABLE BORDER=1 CELLSPACING=20>
janeiro fevereiro março
abril maio junho
<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>
janeiro fevereiro março
abril maio junho

Prédio principal do DSC-UFPB

O Centro de Ciência e Tecnologia da Universidade Federal da Paraíba desenvolve, desde 1970, atividades de Pós-Graduação e é reconhecido como Centro de Excelência pelo Conselho Nacional de Desenvolvimento Científico e Tecnológico (CNPq).

O Curso de Mestrado em Informática é oferecido pelo Centro de Ciências e Tecnologia (CCT) da Universidade Federal da Paraíba - Campus II, localizado em Campina Grande, Estado da Paraíba.

Laboratório de Sistemas de Informação (LSI) No Laboratório de Sistemas de Informação são desenvolvidas pesquisas relacionadas com banco de dados. As principais aplicações são relacionadas à Bancos de Dados Ativos e Dedutivos, Bancos de Dados Temporais, Projeto de Sistemas de Informação, Serviços de informação na Web e Sistemas Cooperativos. 
Laboratório de Redes de Petri (LABPETRI) No Laboratório de Redes de Petri são desenvolvidas pesquisas relacionadas com computação concorrente e distribuída, através da aplicação de redes de Petri e outros métodos formais, com ênfase na concepção, especificação, modelagem e validação de tais sistemas. As principais aplicações são relacionadas à Engenharia de Software, Sistemas em Tempo-Real, Banco de Dados, Sistemas a Eventos Discretos e Sistemas de Híbridos.
Para maiores informações:
Secretaria da Pós-Graduação: copin@dsc.ufpb.br

Prédio principal do DSC-UFPB

O Centro de Ciência e Tecnologia da Universidade Federal da Paraíba desenvolve, desde 1970, atividades de Pós-Graduação e é reconhecido como Centro de Excelência pelo Conselho Nacional de Desenvolvimento Científico e Tecnológico (CNPq).

O Curso de Mestrado em Informática é oferecido pelo Centro de Ciências e Tecnologia (CCT) da Universidade Federal da Paraíba - Campus II, localizado em Campina Grande, Estado da Paraíba.

Laboratório de Sistemas de Informação (LSI) No Laboratório de Sistemas de Informação são desenvolvidas pesquisas relacionadas com banco de dados. As principais aplicações são relacionadas à Bancos de Dados Ativos e Dedutivos, Bancos de Dados Temporais, Projeto de Sistemas de Informação, Serviços de informação na Web e Sistemas Cooperativos. 
Laboratório de Redes de Petri (LABPETRI) No Laboratório de Redes de Petri são desenvolvidas pesquisas relacionadas com computação concorrente e distribuída, através da aplicação de redes de Petri e outros métodos formais, com ênfase na concepção, especificação, modelagem e validação de tais sistemas. As principais aplicações são relacionadas à Engenharia de Software, Sistemas em Tempo-Real, Banco de Dados, Sistemas a Eventos Discretos e Sistemas de Híbridos.
Para maiores informações:
Secretaria da Pós-Graduação: copin@dsc.ufpb.br

Formulários

<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
action
O formulário precisa saber para onde enviar suas informações. A marcação action especifica o URL do script ao qual serão enviados os dados do formulário.
action="js-bin/post-query" - para um script no servidor

"http://www.dsc.ufpb.br/lsi/js-bin/post-query" para um script no servidor do DSCSERVERP
method
O formulário precisa saber como enviar suas informações. A marcação method seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica:
  • post
    • Os dados entrados fazem parte do corpo da mensagem enviada para o servidor.
    • Transfere grande quantidade de dados.
  • Os dados entrados fazem parte do URL associado à consulta enviada para o servidor;
  • Suporta até 128 caracteres.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

   Marcações de campos de entrada e HTML em geral

</FORM>

Entrada de Dados

Campo de texto

<FORM>
Nome: <INPUT TYPE=TEXT NAME="Nome">
</FORM>
ou apenas:
<FORM>
Nome: <INPUT NAME="Nome">
</FORM>
produz o resultado:
Nome:

Campo de senha

<FORM>
   Login: <INPUT TYPE=TEXT NAME="login"><br>
   Password: <INPUT TYPE=PASSWORD NAME="senha">
</FORM>
Login:
Password:
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE ="Seu nome">
Nome:
<FORM>
   Endereço: <INPUT TYPE=TEXT SIZE=35>
</FORM>
Endereço:
<FORM>
   Dia do mês: <INPUT TYPE=TEXT NAME="nome" MAXLENGHT=2 SIZE=2>
</FORM>
Dia do mês:

Obs.: Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo.

Área de Texto

rows="" OBRIGATÓRIO 

Especifica o número de linhas da entrada textual. 

cols="" OBRIGATÓRIO 

Especifica o número de colunas da entrada textual. 

Texto default OPCIONAL 

Se você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fim da TEXTAREA. 

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
   Por favor, escreva aqui suas sugestões, dúvidas e críticas:<BR>
   <TEXTAREA NAME="critica" ROWS="3" COLS="40">
      Gostaria de obter mais informações sobre
      este servidor. Grato.
   </TEXTAREA>
</FORM>

Campo de Múltipla escolha

<INPUT TYPE=CHECKBOX NAME="NOME" VALUE="VALOR">Descrição<br>

<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol<br>
<INPUT TYPE=CHECKBOX NAME="NOME" VALUE="VALOR" CHECKED>Descrição<br>

<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol" CHECKED>Futebol<br>
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="natacao" CHECKED>Natação<br>
Esportes que você pratica:
Futebol
Vôlei
Natação
Basquete
Tênis
Surf

Campo de Escolha Única

<INPUT TYPE=RADIO NAME="NOME" VALUE="VALOR">Descrição<br>

<INPUT TYPE=RADIO NAME="TIME" VALUE="COR">CORINTHIANS<br>
<INPUT TYPE=RADIO NAME="NOME" VALUE="VALOR" CHECKED>Descrição<br>

<INPUT TYPE=RADIO NAME="TIME" VALUE="COR" CHECKED>CORINTHIANS<br>

Seu time do coração:
Palmeiras  Flamengo  Grêmio  Santos  Atlético  Corinthians  Fluminense  Internacional  Cruzeiro  Botafogo  São Paulo.

Campos de Seleção

<SELECT NAME="sabor">
   Escolha seu sabor preferido:
   <OPTION>Abacaxi
   <OPTION>Creme
   <OPTION>Morango
   <OPTION>Chocolate
</SELECT>
Escolha seu sabor preferido:
<SELECT NAME="sabor">
   Escolha seu sabor preferido:
   <OPTION>Abacaxi
   <OPTION SELECTED>Creme
   <OPTION>Morango
   <OPTION>Chocolate
</SELECT>
Escolha seu sabor preferido:
Quais as facilidades de acomodação que você deseja?
<SELECT NAME="acomodacao" SIZE=4 MULTIPLE>
   <OPTION>Cama Casal
   <OPTION SELECTED>Televisão
   <OPTION>Ar Condicionado
   <OPTION>Frigobar
</SELECT>
Quais as facilidades de acomodação que você deseja?

Botões de ação

<FORM>
   <INPUT TYPE=SUBMIT NAME="ENVIA" VALUE="Envia Consulta">
</FORM>
<FORM>
   <INPUT TYPE=RESET NAME="REDEFINE" VALUE="Redefinir">
</FORM>

 

html programa próxima