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

2 Programação HTML 2


DisciplinaAnálise Textual8.702 materiais291.141 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>\u2026</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: \u201cDISC\u201d (círculo preenchido \u2013 
padrão), \u201cCIRCLE\u201d (círculo oco) e \u201cSQUARE\u201d (quadrado). Cada elemento da lista deverá ser iniciado 
com a tag <LI>. 
<UL> 
<LI>Primeiro item 
<LI>Segundo item 
</UL> 
 
<OL>\u2026</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: \u201c1\u201d (algarismo arábico - padrão), 
\u201cA\u201d (letra maiúscula), \u201ca\u201d (letra minúscula), \u201ci\u201d (algarismo romano minúsculo) e \u201cI\u201d (algarismo romano 
maiúsculo). Cada um dos elementos desta lista também é iniciado com a tag <LI>. 
 
 Programação Web - HTML 
 
 
8
<DL>\u2026</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=\u201dimagens/foto.jpg\u201d WIDTH=\u201d150\u201d HEIGHT=\u201d90\u201d BORDER=\u201d0\u201d ALT=\u201dFoto do professor\u201d> 
 
LINKS 
 
<A>\u2026</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 \u201c#\u201d antes do valor do 
referenciado. Existe um atributo chamado TARGET que, recebendo o valor \u201c_blank\u201d, tem a função de 
abrir o link destino em outra janela. 
<A HREF=\u201dindex.html\u201d> 
<A HREF=\u201d#local\u201d> 
. . . 
<A NAME=\u201dlocal\u201d> 
 
<A HREF=\u201darquivo.html#item\u201d> 
text.html 
 
 
 
 
<A NAME=\u201ditem\u201d> 
arquivo.html 
 
 
TABELAS 
 
<TABLE>\u2026</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>\u2026</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>\u2026</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 \u201cN\u201d células da mesma linha; e ROWSPAN, que mescla \u201cN\u201d células da mesma coluna. 
 
<TABLE BORDER=&quot;1&quot;> 
 <TR> 
 <TD COLSPAN=&quot;2&quot;>1</TD> 
 </TR> 
 <TR> 
 <TD>2</TD> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
1 
2 3 
 
<TABLE BORDER=&quot;1&quot;> 
 <TR> 
 <TD>1</TD> 
 <TD>2</TD> 
 </TR> 
 <TR> 
 <TD COLSPAN=&quot;2&quot;>3</TD> 
 </TR> 
</TABLE> 
 
1 2 
3 
 
 
<TABLE border=&quot;1&quot;> 
 <TR> 
 <TD>1</TD> 
 <TD rowspan=&quot;2&quot;>2</TD> 
 </TR> 
 <TR> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
1 
3 
2 
 
 
<TABLE border=&quot;1&quot;> 
 <TR> 
 <TD rowspan=&quot;2&quot;>1</TD> 
 <TD>2</TD> 
 </TR> 
 <TR> 
 <TD>3</TD> 
 </TR> 
</TABLE> 
 
2 
1 
3 
 
 
<TH>\u2026</TH> 
Estas tags são semelhantes às tags <TD ...>...</TD>. A diferença entre elas é que o texto que 
fica dentro da tags \u201cTH\u201d 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 = &quot;TEXT&quot; NAME=&quot;NOME&quot;> 
 
<INPUT TYPE = &quot;TEXT&quot; NAME=&quot;NOME&quot; VALUE = &quot;Texto&quot;> 
Texto
 
 
Password 
Esconde a informação digitada. 
<INPUT TYPE = &quot;PASSWORD&quot; NAME=&quot;PASSWORD&quot;> 
*******
 
 
Radio 
O usuário deve escolher uma resposta em uma única alternativa. 
sim<INPUT TYPE = &quot;RADIO&quot; NAME=&quot;RESPOSTA&quot; VALUE = &quot;SIM&quot; CHECKED><BR> 
não<INPUT TYPE = &quot;RADIO&quot; NAME=&quot;RESPOSTA&quot; VALUE = &quot;NÃO&quot;> 
sim 
não 
 
 Programação Web - HTML 
 
 
11
Textarea 
Caixa de texto em tamanho maior. 
<TEXTAREA NAME=\u201cCAIXA\u201d ROWS=\u201c5\u201d COLS=\u201c30\u201d>Texto</TEXTAREA> 
Texto
 
 
Checkbox 
O usuário pode escolher várias alternativas. 
FrontPage<INPUT TYPE = &quot;CHECKBOX&quot; NAME=&quot;OPCAO&quot; VALUE = &quot;FRONT&quot; CHECKED><BR> 
Dreamweaver<INPUT TYPE = &quot;CHECKBOX&quot; NAME=&quot;OPCAO&quot; VALUE = &quot;DREAM&quot;> 
Front Page 
Dreamweaver 
 
Select 
Menu com várias opções para o usuário escolher. 
<SELECT NAME=\u201dOPCOES\u201d> 
<OPTION value=\u201d1\u201d SELECTED>MENU</OPTION> 
<OPTION value=\u201d2\u201d>Outra opção</OPTION> 
</SELECT> 
 
menu
 
 
Submit 
Botão que envia os dados do formulário. 
<INPUT TYPE = &quot;SUBMIT&quot; VALUE=&quot;Enviar&quot;> 
Enviar
 
 
Reset 
Botão que limpa os dados do formulário. 
<INPUT TYPE=&quot;RESET&quot; VALUE=&quot;Limpar&quot;> 
Limpar
 
 
Hidden 
Corresponde a uma \u201ccaixa de texto invisível\u201d. Armazena informações que poderão ser 
utilizadas por formulários, mas que não fica visível no navegador. 
<INPUT TYPE = &quot;HIDDEN&quot; NAME=&quot;NOME&quot; VALUE = &quot;Texto&quot;> 
 
 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