2 Programação HTML 2
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="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>\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 = "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=\u201cCAIXA\u201d ROWS=\u201c5\u201d COLS=\u201c30\u201d>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=\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 = "SUBMIT" VALUE="Enviar"> Enviar Reset Botão que limpa os dados do formulário. <INPUT TYPE="RESET" VALUE="Limpar"> 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 = "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