<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> identifica o documento como um documento do tipo HTML. Tecnicamente, esta tag se tornou obsoleta com a surgimento da tag <!doctype>, mas ela ainda continua sendo bastante utilizada por razão de compatibilidade com browsers antigos.
A tag <head> contêm informações sobre o documento, incluindo seus títulos, scripts usados, definições de estilos e as descrições do documento.
A tag <body> delimita as demais tags, atributos e informações que serão mostradas pelo browser.
Ela aparece logo logo após o fechamento da tag </head> e fica delimitada pela tag <html>.
<BODY>, podemos definir cores
para os textos, links e para o fundo das páginas, bem como uma imagem de
fundo (marca d’água):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
onde:
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
<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>
<HR> insere uma linha horizontal:
<HR SIZE=7>
insere uma linha de largura 7 (pixels):
<HR WIDTH=50%>
insere uma linha que ocupa 50% do espaço disponível:
<HR WIDTH=30%
ALIGN=RIGHT
NOSHADE> insere uma linha de comprimento 30%
(do espaço disponível), alinhada à direita, sem efeito tridimensional:
<HR SIZE=30
WIDTH=2
ALIGN=LEFT>
insere uma linha de largura 30, comprimento 2, alinhada à esquerda
Listas são ótimos recursos para apresentar informações estruturadas.
Ela ajuda aos usuários visualizarem as informações de uma forma mais amigável.
- Comece com a marcação de início de lista: <UL>.
- Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar a marcação com </LI> )
- Encerre com a marcação de fim de lista: </UL>.
<ul> <li> maçãs </li> <li>bananas </li> </ul>
<ol> <li>laranja</li> <li>abacate</li> <li>abacaxi</li> </ol>
Apresentará o seguinte resultado:
<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:
<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>
Esta lista será vista assim:
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);
}
Envie críticas e sugestões para
apoio@ficticio.brQualquer dúvida ou comentário, você pode enviar um email à <a href="mailto:coordenacaro@ficticio.br"> coordenação
Como visto anteriormente (em Formatação de Textos e Caracteres), HTML permite dois tipos de estilos de formatação: lógico e físico; aqui veremos as formatações mais utilizadas:
- <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.
- <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.
&
inicial, um número ou cadeia de caracteres correspondente ao caracter
desejado, e um ; final.| Notação | Descrição | Aparência |
|---|---|---|
| < | Menor que | < |
| > | Maior que | > |
| & | E Comercial | & |
| " | Aspas duplas | " |
| ® | Marca registrada | ® |
| © | 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 | ◯ 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; = æ = æ |
| Letra com argola | Å = Å e å = å |
| Cedilha | Ç = Ç e ç= ç |
| N com til | Ñ = Ñ e ñ = ñ |
| O cortado | Ø = Ø e ø = ø |
| THORN maiúsculo | Þ = Þ(Icelandic) |
| thorn minúsculo | þ= þ (Icelandic) |
| eth minúsculo | ð ð (Icelandic) |
| eth maiúsculo | Ð= Ð (Icelandic) |
<FONT>,
usando o sistema RGB para cores (da mesma forma que vimos para cores de
documentos):<FONT COLOR="#rrggbb">Texto</FONT>
<BODY>.<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
FACE:<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
- Inicie a âncora com <a ( Há um espaço depois de a.).
- Especifique o documento a ser interligado, inserindo parâmetro HREF="nome do arquivo" seguido do sinal: >
- Insira o texto que vai funcionar como link no documento corrente.
- Anote a marcação de final da âncora: </a>.
Um exemplo de referência a um hipertexto:
<a href="ListaPraias.html">Praias</A>
A palavra "Praias" é definida como o marcador do link para se chegar ao documento ListaPraias.html, que está no mesmo diretório do documento corrente. Ou seja, "Praias" aparece em negrito e se eu clicar nessa palavra será exibido o documento apontado - ListaPraias.html
<a href="Estados/Paraiba.html">Paraiba</A>
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 |
Este tipo de ligação é denominada de link absoluto. Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:
<A HREF="http://www.correioweb.com.br/">Correio Brasiliense</A>
que oferece um link para um documento no servidor WWW do jornal Correio Brasiliense.
<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:
Da mesma forma, construímos links para trechos determinados de outros documentos, desde que saibamos qual é o caminho (relativo ou absoluto), e quais trechos do documento destino estão marcados para ponto de chegada de um link.
IMG insere imagens que são
apresentadas junto com os textos. Um atributo SRC deve estar
presente, da seguinte forma:onde<IMG SRC="URL_imagem">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).
<IMG SRC = "/imagens/sorria.gif">inserimos a figura
no documento.
<IMG SRC="URL_imagem" ALT="descrição_da_imagem"><IMG SRC="/imagens/sorria.gif" ALT="Novo!">é apresentado nos browsers gráficos assim:
![]()
<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">
- Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.
BORDER,
podemos controlar esse detalhe.<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A>
<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>
<IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento>
align=top
Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não
seja muito bom.
align=middle Alinha o texto
adjacente com o meio da imagem, embora com linhas compridas o resultado não
seja muito bom
align=bottom Alinha o
texto adjacente com a parte de baixo da imagem (default)
align=right Alinha imagem à direita, e
tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
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:
...e se pode escrever à vontade entre as imagens!

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

...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.
Também
se pode posicionar o texto no ponto em que ambas as margens estão livres.
Isso
é conseguido com
<BR CLEAR=ALL>
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML.
A maior diferença entre tabelas em HTML e emedit ores como o MS Word, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas.
<TABLE>...</TABLE>
delimita uma tabela. Um atributo básico é BORDER,
que indica a apresentação da borda.<TABLE BORDER="borda"> ... </TABLE>
<CAPTION>...</CAPTION>define o título da tabela.
<TR>...</TR>delimita uma linha.
<TH>...</TH>define um cabeçalho para colunas ou linhas (dentro de<TR>).
<TD>...</TD>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>
| Coluna 1 |
Coluna 2 |
|---|---|
| linha1, coluna 1 | linha 1, coluna 2 |
| linha 2, coluna 1 | linha 2, coluna 2 |
COLSPAN
(para colunas) e ROWSPAN (para linhas):<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 | |
|
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:
|
|
- no sentido horizontal: alinhamento à esquerda
- no sentido vertical: alinhamento no centro da célula
ALIGN= alin_horizontalVALIGN= alin_vertical
Vejamos como esses alinhamentos funcionam nas células:
<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 |
ALIGN e VALIGN.<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 |
<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>
|
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:
|
|
| janeiro | fevereiro | março |
| abril | maio | junho |
WIDTH=x%ou em pixels:
WIDTH=x
Tabela ocupando 50% do
espaço disponível<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 |
|
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:
|
|
CELLPADDING- espaço entre o texto e as bordas da célulaCELLSPACING- 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 |
|
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:
|
|
|
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:
|
|
<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
FORM que nos interessam agora são:
- action
- O formulário precisa saber para onde enviar suas informações. A marcação
actionespecifica oURLdo 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
methodseleciona um método para acessar o URL de ação. Os métodos usados atualmente sãoGETePOST. 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.
- get
- 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>
NAME, ao
qual associamos um nome, utilizado posteriormente pelo script.INPUT não apresenta atributos, é assumido TYPE=TEXT
(default); a formatação:<FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> </FORM>
ou apenas:
-
<FORM>
Nome: <INPUT NAME="Nome">
</FORM>
produz o resultado:
<FORM> Login: <INPUT TYPE=TEXT NAME="login"><br> Password: <INPUT TYPE=PASSWORD NAME="senha"> </FORM>
VALUE pode
ser usado para dar um valor inicial a um campo de tipo texto ou senha.
Desse modo, se o usuário não preencher este campo, será adotado este
valor padrão. Se o usuário quiser entra r dados, ele somente precisará
apagar o que já estiver escrito.Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">
SIZEespecifica o tamanho do espaço no display para o campo do formulário. Só é válido para camposTEXTePASSWORD. O valor default (padrão) é 20.
<FORM> Endereço: <INPUT TYPE=TEXT SIZE=35> </FORM>
MAXLENGHTé o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entradaTEXTePASSWORD.
<FORM> Dia do mês: <INPUT TYPE=TEXT NAME="nome" MAXLENGHT=2 SIZE=2> </FORM>
Obs.: Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo.
A marcação textarea não utiliza o formato convencional input type="text dos exemplos anteriores.
Uma marcação <textarea> delimita o seu início e a marcação</textarea> o seu fim.
Opções:
- 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>
CHECKBOX insere
um botão para escolha de opções. A cada alternativa corresponde um valor
a ser manipulado pelo script que processa os dados. Pode ser escolhida mais
de uma alternativa.<INPUT TYPE=CHECKBOX NAME="NOME" VALUE="VALOR">Descrição<br><INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol<br>
CHECKED marca uma escolha inicial, isto é, se o
usuário não escolher nenhuma opção, o formulário irá considerar a
alternativa "pré-escolhida":<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>
radio
insere um botão de escolha de valores para uma opção, isto é, somente
uma alternativa pode ser escolhida<INPUT TYPE=RADIO NAME="NOME" VALUE="VALOR">Descrição<br> <INPUT TYPE=RADIO NAME="TIME" VALUE="COR">CORINTHIANS<br>
CHECKED marca uma escolha inicial - se o usuário
não escolher nenhuma opção, o formulário irá considerar a alternativa
"pré-escolhida":<INPUT TYPE=RADIO NAME="NOME" VALUE="VALOR" CHECKED>Descrição<br> <INPUT TYPE=RADIO NAME="TIME" VALUE="COR" CHECKED>CORINTHIANS<br>
<SELECT>
apresenta uma lista de valores, através de campos OPTION.<SELECT NAME="sabor">Escolha seu sabor preferido:<OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT>
SELECTED:<SELECT NAME="sabor">Escolha seu sabor preferido:<OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT>
SIZE, escolhe-se quantos itens da lista serão
mostrados (no exemplo, SIZE=4)MULTIPLE, múltiplas opções podem ser selecionadas, em oposição ao exemplo anterior do SELECT, onde apenas uma opção pode ser selecionada.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>
Em alguns clientes WWW, é necessário teclar simultaneamente as teclas control ou shift para selecionar múltiplos itens.
SUBMIT
apresenta o botão que causa o envio dos dados de entrada para o servidor.
Ele transfere toda a informação para a URL especificada no elemento
action.<FORM> <INPUT TYPE=SUBMIT NAME="ENVIA" VALUE="Envia Consulta"> </FORM>
RESET restaura
os valores iniciais das entradas de dados.<FORM> <INPUT TYPE=RESET NAME="REDEFINE" VALUE="Redefinir"> </FORM>