2 Programação HTML 2

estrutura é utilizada para inserir comentários, textos que não deverão ser visíveis no 
monitor. Basta inserir o texto que será o comentário entre <!-- e -->. 
 
TABELA DE ACENTUAÇÃO E CARACTERES ESPECIAIS 
 
 Programação Web - HTML 
 
 
7
 
 
LISTAS 
 
Existem três tipos de tags direcionados para listagem. Elas são: <UL>, <OL> e <DL>. 
 
<UL>…</UL> 
A tag <UL> corresponde a listas desordenadas, que são listadas por elementos geométricos. 
O atributo desta tag é TYPE, que pode assumir os seguintes valores: “DISC” (círculo preenchido – 
padrão), “CIRCLE” (círculo oco) e “SQUARE” (quadrado). Cada elemento da lista deverá ser iniciado 
com a tag <LI>. 
<UL> 
<LI>Primeiro item 
<LI>Segundo item 
</UL> 
 
<OL>…</OL> 
A tag <OL> corresponde a listas ordenadas, que são listadas por números e letras. O atributo 
desta tag também é TYPE, que pode assumir os seguintes valores: “1” (algarismo arábico - padrão), 
“A” (letra maiúscula), “a” (letra minúscula), “i” (algarismo romano minúsculo) e “I” (algarismo romano 
maiúsculo). Cada um dos elementos desta lista também é iniciado com a tag <LI>. 
 
 Programação Web - HTML 
 
 
8
<DL>…</DL> 
A tag <DL> corresponde a lista de definições. Esta inicia a lista. As tags <DT> e <DD> tratam 
do conteúdo. Enquanto <DT> trata do termo, <DD> trata da definição em si, dos dados, da 
explicação. 
 
IMAGEM 
 
<IMG> 
Esta tag corresponde a que demonstra uma figura no documento. Os atributos são: SRC, que 
corresponde ao caminho do arquivo que contém a imagem; WIDTH, que corresponde a largura da 
imagem em pixels; HEIGHT, a altura em pixels; BORDER, que indica se a imagem tem borda (1) ou 
não (0); e ALT, que corresponde a uma descrição da imagem. 
<IMG SRC=”imagens/foto.jpg” WIDTH=”150” HEIGHT=”90” BORDER=”0” ALT=”Foto do professor”> 
 
LINKS 
 
<A>…</A> 
Os links correspondem ao ponto que encaminha algo para outro lugar. A tag de links é <A>. 
Os seus atributos são: HREF, que corresponde a um link para outro documento ou para um 
determinado local do documento; e NAME, que corresponde a um local receptor do documento. 
Quando se trata de um local específico pelo HREF, deve-se colocar “#” antes do valor do 
referenciado. Existe um atributo chamado TARGET que, recebendo o valor “_blank”, tem a função de 
abrir o link destino em outra janela. 
<A HREF=”index.html”> 
<A HREF=”#local”> 
. . . 
<A NAME=”local”> 
 
<A HREF=”arquivo.html#item”> 
text.html 
 
 
 
 
<A NAME=”item”> 
arquivo.html 
 
 
TABELAS 
 
<TABLE>…</TABLE> 
Estas tags correspondem à estrutura geral de uma tabela. Os atributos básicos são: WIDTH, 
largura medida em porcentagem ou pixels; HEIGHT, altura também medida em porcentagem ou 
pixels; BORDER, que indica a largura da borda em pixels, variando de 0 (sem borda) até 1000; 
CELLPADDING, margem dentro das células medida em pixels; CELLSPACING; largura da borda das 
células medida em pixels; BORDERCOLOR, que corresponde a cor da borda da tabela, podendo ser 
o nome ou o código hexadecimal; ALIGN, que corresponde ao alinhamento desta tabela; 
BACKGROUND, que contém o nome do arquivo de imagem ou URL completo até chegar a esta 
 Programação Web - HTML 
 
 
9
imagem que será utilizada como plano de fundo da tabela; e BGCOLOR, que contém a cor de fundo 
da tabela, sendo o nome ou código hexadecimal. 
 
<TR>…</TR> 
Estas tags correspondem à estrutura de uma linha da tabela. Os atributos aplicados a estas 
tags são os mesmos aplicados nos das tags de célula. 
 
<TD>…</TD> 
Estas tags correspondem à estrutura de uma célula da tabela. Os atributos básicos são: 
ALIGN, que corresponde ao alinhamento horizontal do conteúdo da célula; VALIGN, que corresponde 
ao alinhamento vertical do conteúdo da célula, sendo as opções TOP (superior), MIDDLE (meio) e 
BOTTOM (base); WIDTH, largura medida em porcentagem ou pixels; HEIGHT, altura também medida 
em porcentagem ou pixels; BACKGROUND, que contém o caminho até o arquivo de imagem que 
será utilizada como plano de fundo da célula; e BGCOLOR, que contém a cor de fundo da célula, 
sendo o nome ou código hexadecimal. Tem dois atributos específicos para TD e TH: COLSPAN, que 
mescla “N” células da mesma linha; e ROWSPAN, que mescla “N” células da mesma coluna. 
 
<TABLE BORDER="1"> 
 <TR> 
 <TD COLSPAN="2">1</TD> 
 </TR> 
 <TR> 
 <TD>2</TD> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
1 
2 3 
 
<TABLE BORDER="1"> 
 <TR> 
 <TD>1</TD> 
 <TD>2</TD> 
 </TR> 
 <TR> 
 <TD COLSPAN="2">3</TD> 
 </TR> 
</TABLE> 
 
1 2 
3 
 
 
<TABLE border="1"> 
 <TR> 
 <TD>1</TD> 
 <TD rowspan="2">2</TD> 
 </TR> 
 <TR> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
1 
3 
2 
 
 
<TABLE border="1"> 
 <TR> 
 <TD rowspan="2">1</TD> 
 <TD>2</TD> 
 </TR> 
 <TR> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
2 
1 
3 
 
 
<TH>…</TH> 
Estas tags são semelhantes às tags <TD ...>...</TD>. A diferença entre elas é que o texto que 
fica dentro da tags “TH” fica em negrito como padrão. Geralmente, elas são utilizadas como linha de 
cabeçalho da tabela. Os atributos são os mesmos das tags <TD ...>...</TD>. 
 
 Programação Web - HTML 
 
 
10
FORMULÁRIO 
 
Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários 
ligados a scripts desenvolvidos em linguagens como PHP, Servlets, JSP, ASP, etc. 
 
<FORM></FORM> 
Determina o início e o fim de um formulário. O FORM possui dois atributos que são: ACTION, 
destino após a submissão do formulário; e METHOD, método como os dados serão enviados para o 
destino, sendo os valores deste atributo, os métodos GET e POST. 
 
<INPUT> 
Esta tag especifica vários campos dentro de um formulário. Ele pode receber diversos 
atributos que definem o tipo de campo (botão, caixa de texto, etc). O atributo mais importante do input 
é o NAME, ele associa o valor da entrada no elemento. Quando receber os dados processados irá 
aparecer NAME = resposta dada pelo usuário. Outro atributo importante é o TYPE que identifica o 
tipo de campo. Tem também os atributos SIZE (define o tamanho do campo), MAXLENGHT (define a 
quantidade máxima de caracteres em um determinado campo) e VALUE (valor default). 
 
Caixa de Texto 
Caixa de texto simples. 
<INPUT TYPE = "TEXT" NAME="NOME"> 
 
<INPUT TYPE = "TEXT" NAME="NOME" VALUE = "Texto"> 
Texto
 
 
Password 
Esconde a informação digitada. 
<INPUT TYPE = "PASSWORD" NAME="PASSWORD"> 
*******
 
 
Radio 
O usuário deve escolher uma resposta em uma única alternativa. 
sim<INPUT TYPE = "RADIO" NAME="RESPOSTA" VALUE = "SIM" CHECKED><BR> 
não<INPUT TYPE = "RADIO" NAME="RESPOSTA" VALUE = "NÃO"> 
sim 
não 
 
 Programação Web - HTML 
 
 
11
Textarea 
Caixa de texto em tamanho maior. 
<TEXTAREA NAME=“CAIXA” ROWS=“5” COLS=“30”>Texto</TEXTAREA> 
Texto
 
 
Checkbox 
O usuário pode escolher várias alternativas. 
FrontPage<INPUT TYPE = "CHECKBOX" NAME="OPCAO" VALUE = "FRONT" CHECKED><BR> 
Dreamweaver<INPUT TYPE = "CHECKBOX" NAME="OPCAO" VALUE = "DREAM"> 
Front Page 
Dreamweaver 
 
Select 
Menu com várias opções para o usuário escolher. 
<SELECT NAME=”OPCOES”> 
<OPTION value=”1” SELECTED>MENU</OPTION> 
<OPTION value=”2”>Outra opção</OPTION> 
</SELECT> 
 
menu
 
 
Submit 
Botão que envia os dados do formulário. 
<INPUT TYPE = "SUBMIT" VALUE="Enviar"> 
Enviar
 
 
Reset 
Botão que limpa os dados do formulário. 
<INPUT TYPE="RESET" VALUE="Limpar"> 
Limpar
 
 
Hidden 
Corresponde a uma “caixa de texto invisível”. Armazena informações que poderão ser 
utilizadas por formulários, mas que não fica visível no navegador. 
<INPUT TYPE = "HIDDEN" NAME="NOME" VALUE = "Texto"> 
 
 Programação Web - HTML 
 
 
12
FRAME 
 
 Frame corresponde a uma estrutura que tem a finalidade de definir o layout do web site 
utilizando vários outros documentos web, separando-os através de molduras. 
 
<FRAMESET...>...</FRAMESET> 
Correspondem às tags que inicia e finaliza a estrutura Frame, respectivamente. Os seus