2 Programação HTML 2
13 pág.

2 Programação HTML 2

Disciplina:Análise Textual6.572 materiais162.509 seguidores
Pré-visualização3 páginas
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