Grátis
13 pág.

Pré-visualização | Página 2 de 3
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