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

HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto do "casamento" dos padrões HyTime e SGML.

HyTime - Hypermedia/Time-based Document Structuring Language

Hy Time (ISO 10744:1992) - padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks.
O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que alicam os padrões de maneira particular

SGML - Standard Generalized Markup Language

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
SGML não é padrão aplicado de maneira comum: todos os produtos SGML têm seu próprio sistema para traduzir as tags para um particular formatador de texto.
- DTD - Document Type Definition - define as regras de formatação para uma dada classe de documentos.

Características Gerais do HTML

Documentos HTML são arquivos escritos em ASCII - texto.
Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad).
Existem conversores de vários formatos, por exemplo, doc para html.
A unidade mínima de informação é a “página”.
Há diferenças entre os diversos clientes Web, de forma que nem todas as marcações e seus correspondentes recursos são suportadas por todos eles. Quando um cliente não entende uma determinada marcação, ele simplesmente a ignora. Ao criar um documento, é importante testá-lo com vários clientes.
HTML utiliza marcações específicas e distintas para dizer ao Web browser como exibir o documento.
- Todo documento HTML apresenta elementos entre parênteses angulares (< e >).
- Esses elementos são as marcações (tags) de HTML, que são os comandos de formatação da linguagem.
- HTML não faz diferença entre maiúsculas e minúsculas (não é "case sensitive"). Então a marcação <title> é equivalente a <TITLE> ou <TiTlE>.
- A maioria das tags tem sua correspondente de fechamento: <tag>...</tag>. Isso é necessário porque as tags servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.
- Há excessões a esse funcionamento em pares das marcações. Por exemplo, a que indica um final de parágrafo: <p> . Não necessita de uma correspondente: </p>. A marcação que indica quebra de linha <br> também não precisa de uma correspondente, e outras tais como <hr> e <li>.
- Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <tag>
- Todos os elementos podem ter atributos: <tag atributo1=valor1 atributo2=valor2 >...</tag>

Documento Básico e seus Componentes

Todo documento deve ser identificado como HTML (<html> </html>), ter uma área de cabeçalho (<head></head>) com o nome para o documento (<title> </title>), um título principal e uma área definida como corpo(<body></body>) do conteúdo do documento. Como o exemplo a seguir

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

Esta página vai aparecer assim:

A Tag <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>

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 <title>

Todo documento em HTML deve possuir um título.
De um modo geral o título aparece em lugar separado da página (por exemplo, alto da tela do browser).
É interessante que o título possa sugerir claramente o conteúdo do documento.
Atenção porque o conceito de título é diferente de cabeçalho.Não é um elemento relevante na visualização do documento como acontece com o cabeçalho.
A tag utilizada para títulos é <title> e seu par </title>.

A Tag <body>

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

Atributos de <body>

Através de atributos de <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:

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

A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco entre cada parágrafo.
HTML não reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada.
Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de <li>,<hy> e outras, esta será ignorada.
Atributos de alinhamento são frequentemente usados com uma marcação de parágrafo, incluindo align=left, align=center, align=right, como segue:
- <p align="center"> Informações do parágrafo </p>

Cabeçalhos

"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior destaque.
Cabeçalhos são exibidos em letras maiores e em negrito.
Ao se definir o tamanho de um cabeçalho, você não está definindo o tamanho da letra (fonte). Você apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo programa visualizador de html (browser) de cada pessoa que acessar a informação.
As notações relativas a cabeçalhos são: <hy>Texto do cabeçalho </hy > onde y é um número entre 1 e 6 especificando o nível do cabeçalho.
O conjunto de notações possíveis é o que segue:
<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>

Quebras de Linha

A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <p>e <br>, no exemplo a seguir:

<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

Barras horizontais são linhas que quebram longas seções de texto.
Ajudam melhorar o design do documento.
Para usar uma barra horizontal, inclua a tag <hr> aonde você desejar que ela apareca. Essa linha tem diversos atributos, oferecendo resultados diversos. Ex.:
- <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

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.

Listas Não-Numeradas

Para criar uma lista não numerada:

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

Abaixo um exemplo de uma lista com dois itens:

<ul>
   <li> maçãs </li>
   <li>bananas </li>
</ul>

Vai aparecer assim:

Listas Numeradas

Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porque utiliza marcação <ol> ao invés de <ul>.
Os itens são identificados utilizando-se a mesma notação <LI>.
Uma lista criada assim:

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

Apresentará o seguinte resultado:

Listas de Definições

Uma lista de definições normalmente consiste em alternar um termo (abreviado como <dt>) e uma definição (abreviado como <dd>).
Clientes Web browsers geralmente mostram a definição em nova linha com outro alinhamento.
Exemplo de uma lista de definição:

<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

As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados bastante interessantes.
A prática é que vai mostrar qual o número máximo de listas que vale a pena intercalar.

<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:

Formatação de Textos e Caracteres

Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre elas se deve à idéia básica de independência entre especificação e apresentação.
Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final).
Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.
A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos.
A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações.

Blocos de Texto

Texto Pré-Formatado

A marcação <pre>(derivada de”preformatted”) delimita uma área de texto em que espaços, novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente da forma como foi digitado, mesmo que não hajam marcações do html.
É uma forma de se preservar o formato de um texto.
Este recurso é geralmente utilizado para apresentar listas de programas. O exemplo abaixo elucida este recurso.

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

A marcação <address></address> é habitualmente utilizada para especificar o autor do documento e a forma de contato com ele (por exemplo, o endereço eletrônico). Geralmente é o último item de uma página. Por exemplo
<p align="center"> Envie críticas e sugestões para <address align="center">apoio@ficticio.br</address>, produz o resultado:

Envie críticas e sugestões para

apoio@ficticio.br

Existe ainda um recurso para criar um item na página que, ao ser selecionado, abre uma janela, e permite que se envie uma mensagem eletrônica para um endereço específico.
Para isso utiliza-se a variável "mailto:" Veja o exemplo abaixo, para enviar mensagens de dúvidas para o endereço eletrônico coordenacao@ficticio.br

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

Fica assim:

Frases

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:

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 H₂O.

<sup>

Frase em estilo ^expoente, como em Km².

Tabelas de Acentuação/Caracteres Especias

HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & 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	&
&quot	Aspas duplas	"
&reg	Marca registrada	®
&copy	copyrights	©

Outras sequências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português:

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; = æ = æ
Letra com argola	Å = Å e &aring = å
Cedilha	Ç = Ç e &ccedil= ç
N com til	Ñ = Ñ e ñ = ñ
O cortado	Ø = Ø e ø = ø
THORN maiúsculo	&THORN = Þ(Icelandic)
thorn minúsculo	&thorn= þ (Icelandic)
eth minúsculo	&eth ð (Icelandic)
eth maiúsculo	Ð= Ð (Icelandic)

Cores e Fontes

Cores

As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos):

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

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>.

Tamanho

A formatação,

<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

Um atributo que permite a escolha da fonte para os textos, é o FACE:

<FONT FACE=fonte_da_letra>Texto</FONT>

Por exemplo:

<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)

O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e também imagens) a outros documentos.
Os clientes exibem em destaque estas áreas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata de um link, ou interligação, no hipertexto.
A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. Para incluir uma âncora em seu documento:

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

Interligando Documentos em outros Diretórios

É possível interligar documentos em outro diretório especificando-se o caminho relativo a partir do documento corrente, em relação ao que está sendo interligado. Por exemplo, um link para o arquivo Paraiba.html localizado no subdiretório Estados seria assim:

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

Este tipo de ligação é denominada de link relativo. É também possível usar o caminho completo (pathname absoluto) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão do sistema UNIX.

Ligando URL's

O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localização de arquivos em servidores.
Uma URL inclui o tipo de recurso acessado (gopher, telnet), o endereço do servidor, e a localização do arquivo.
Se escreve de acordo com o esquema abaixo:

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

onde protocolo é uma das seguintes definições:

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.

Ligando Sessões Específicas em um Outro Documento

Além do atributo href, que indica um documento destino de uma ligação hipertexto, o elemento a possui um atributo name que permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.
Neste documento temos diversos parágrafos marcados como chegada de um link, por exemplo:

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

Inserindo Imagens

O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma:

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

Assim, escrevendo:
```
<IMG SRC = "/imagens/sorria.gif">
```
inserimos a figura no documento.

Atributos Básicos

ALT
- Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente.

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">
<IMG SRC="/imagens/sorria.gif" ALT="Novo!">
é apresentado nos browsers gráficos assim:

WIDTH e HEIGHT
- Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

<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
- Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição. Por exemplo:
- Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.
- Se quisermos uma borda maior...
```
<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A>
```
- Se quisermos uma imagem sem borda...
```
<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>
```

ALIGN

<IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento>

Existem também atributos de alinhamento, que produzem os seguintes resultados:

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

Terra 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!

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

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

Sorria praia ...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.

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

Tabelas

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.
Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.
Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas.
Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

Elementos Básicos

<TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda.


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

Títulos, linhas e elementos

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

Uma tabela simples:

<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

É possível englobar colunas e linhas, através dos atributos 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

Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3).

Alinhamentos em tabelas

Este exemplo servirá para estudarmos alinhamentos, controle de larguras e espaçamento 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

O conteúdo é informativo, porém a apresentação não é agradável devido à disposição do texto na tabela.
Primeiro, vamos mexer com os alinhamentos.

Alinhamentos simples

Os alinhamentos padrões em tabelas são:

no sentido horizontal: alinhamento à esquerda

no sentido vertical: alinhamento no centro da célula

As linhas e células podem ter alinhamentos definidos através dos atributos:

ALIGN = alin_horizontal

VALIGN = 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`

Obs.: a tabela acima foi feita especialmente para testar os alinhamentos. Uma tabela comum ajusta o tamanho de suas células ao conteúdo:

Padrão	align=left	align=center	align=right
Padrão	valign=top	valign=middle	valign=bottom

Alinhamentos combinados

Uma mesma célula pode ter atributos ALIGN e VALIGN.

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

Por exemplo:

Padrão ALIGN=LEFT, VALIGN=BOTTOM ALIGN=CENTER, VALIGN=TOP ALIGN=RIGHT, VALIGN=MIDDLE

Alinhamentos de linhas

O alinhamento pode ser aplicado a linhas inteiras, com:

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

Isso pode ser interessante para algumas aplicações.

Já conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados
Serão realizadas mais algumas formatações para se chegar a uma apresentação "amigável" da tabela - o exemplo continua.

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

Na seção anterior, foi comentado que uma tabela comum ajusta o tamanho de suas células ao conteúdo. Por exemplo:

janeiro	fevereiro	março
abril	maio	junho

Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo width. Esse atributo pode ser aplicado também a linhas e células.

Essa largura pode ser definida em porcentagem (do espaço disponível):

WIDTH=x%

ou em pixels:

WIDTH=x

Ex.1: Tabela ocupando 50% do espaço disponível

<TABLE BORDER=1 width=50%>

janeiro	fevereiro	março
abril	maio	junho

Ex.2: Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço disponível na tabela

<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

Ex3.: O controle da largura da tabela está limitado à dimensão de seu conteúdo:

<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

De volta ao exemplo inicial, já podemos melhorar um pouco mais nossa tabela, manteremos os alinhamentos definidos na seção anterior e aplicaremos atributos de largura:

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

Ainda faltam detalhes. Um deles é evitar que o texto fique grudado nas bordas da tabela; veremos na próxima seção, sobre espaçamentos.

Atributos de espaçamento

Dois atributos permitem o controle de espaçamento em tabelas:

CELLPADDING - espaço entre o texto e as bordas da célula
CELLSPACING - espaço entre células

Tomemos a mesma tabela simples da seção anterior:

janeiro	fevereiro	março
abril	maio	junho

Ex.1: Espaço entre o texto e as bordas

<TABLE BORDER=1 CELLPADDING=20>

janeiro	fevereiro	março
abril	maio	junho

Ex.2: Espaço entre células

<TABLE BORDER=1 CELLSPACING=20>

janeiro	fevereiro	março
abril	maio	junho

Ex3.: Espaço entre texto e bordas, e espaço entre células

<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>

janeiro	fevereiro	março
abril	maio	junho

Assim, damos mais uma mexida na tabela inicial:

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

Por último, retiramos a borda:

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

Um formulário é um modelo para a entrada de um conjunto de dados.
O primeiro passo para fazer formulários é aprender as tags que desenham os elementos de entrada de dados, para depois trabalharmos com os scripts, que são os programas que tratam esses dados.
A tag <form> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.

<FORM ACTION="URL_de_script" METHOD=método>...</FORM>

Os atributos de FORM que nos interessam agora são:

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.

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>

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <form> as formatações para campos de entrada de dados, que são três: <input>, <select> e <textarea>.
Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo script.
São os scripts que organizam esses dados de entrada em um conjunto de informações significativas para determinado propósito.
Primeiro vamos ver os tipos de campos para montar um formulário, e depois passaremos aos scripts.

Entrada de Dados

Campo de texto

Quando 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:

Campo de senha

Entrada de texto na qual os caracteres são escondidos por asteriscos, como se pode ver no exemplo.


  
    
      <FORM>
   Login: <INPUT TYPE=TEXT NAME="login"><br>
   Password: <INPUT TYPE=PASSWORD NAME="senha">
</FORM>

Alguns atributos
- 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">

SIZE especifica o tamanho do espaço no display para o campo do formulário. Só é válido para campos TEXT e PASSWORD. 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 entrada TEXT e PASSWORD.
<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.

Área de Texto

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>

Campo de Múltipla escolha

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>

Uma diretiva 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>

Campo de Escolha Única

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>

Uma diretiva 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>

Campos de Seleção

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

Também é possível estabelecer uma escolha-padrão, através do atributo SELECTED:

<SELECT NAME="sabor">
   Escolha seu sabor preferido:
   <OPTION>Abacaxi
   <OPTION SELECTED>Creme
   <OPTION>Morango
   <OPTION>Chocolate
</SELECT>

Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4)
Com o atributo 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.

Botões de ação

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>

 
  html programa  próxima

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

A Tag <html>

A Tag <head>

A Tag <title>

A Tag <body>

Atributos de <body>

Parágrafos

Cabeçalhos

Quebras de Linha

Barras Horizontais

Listas

Listas Não-Numeradas

Listas Numeradas

Listas de Definições

Listas Intercaladas

Formatação de Textos e Caracteres

Blocos de Texto

Texto Pré-Formatado

Endereços

Frases

Estilos Lógicos

Estilos Físicos

Tabelas de Acentuação/Caracteres Especias

Cores e Fontes

Cores

Tamanho

Fontes

Interligando Documentos (uso de links)

Interligando Documentos em outros Diretórios

Ligando URL's

Ligando Sessões Específicas em um Outro Documento

Inserindo Imagens

Atributos Básicos

Tabelas

Elementos Básicos

Títulos, linhas e elementos

Títulos compreendendo mais de uma coluna ou linha

Alinhamentos em tabelas

Prédio principal do DSC-UFPB

Alinhamentos simples

Alinhamentos combinados

Alinhamentos de linhas

Prédio principal do DSC-UFPB

Larguras

Prédio principal do DSC-UFPB

Atributos de espaçamento

Prédio principal do DSC-UFPB

Prédio principal do DSC-UFPB

Formulários

Entrada de Dados

Campo de texto

Campo de senha

Área de Texto

Campo de Múltipla escolha

Campo de Escolha Única

Campos de Seleção

Botões de ação