Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
2 Programação HTML 2
Compartilhar
Prévia do material em texto
Programação Web - HTML 1 AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE CURSO DE CIÊNCIA DA COMPUTAÇÃO PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB HTML (HyperText Markup Language) Petrolina-PE, 2008 Programação Web - HTML 2 PROGRAMAÇÃO WEB DO LADO DO CLIENTE TECNOLOGIAS As tecnologias cliente adotadas para esta disciplina são: − HTML (HyperText Markup Language – Linguagem de Marcação de Hipertextos) corresponde a uma linguagem utilizada para a construção de documentos/páginas para Web (Web Sites). Ela é composta por tags (comando cercado pelos caracteres “<” e “>”) e cada tag pode conter de nenhum a mais de um atributo. A versão adotada será o HTML 4.0. − CSS (Cascading Style Sheets – Folha de Estilos em Cascata) corresponde a documentos de formatação de Web Sites. O CSS foi criado e padronizado no final de 1996 pela World Wide Web Consortium (W3C). a versão adotada será CSS 2.0. − Javascript corresponde a uma linguagem de scripts desenvolvidos pela Netscape para gerar aplicativos web entrelaçando seu código com o HTML. ESTRUTURA BÁSICA DO DOCUMENTO HTML <HTML>...</HTML> Todo documento HTML começa com a tag “<HTML>” e termina com a tag “</HTML>”. Entre estas tags está o código fonte do documento web que é composto por duas seções: − Cabeçalho, que usa as tags <HEAD>...</HEAD>; − Corpo, que usa as tags <BODY>...</BODY>. O mais básico documento HTML é: <HTML> <HEAD> </HEAD> <BODY > </BODY> </HTML> O código acima não mostra nada, mas contém as tags necessárias para um documento HTML. <HEAD>…</HEAD> A tag <HEAD> corresponde à seção que é formada pelo cabeçalho do documento HTML e que contém informações necessárias para o navegador ou servidor processar este documento. Estas informações são título, dados para mecanismo de busca, âncora e o que for necessário para ser lido pelo navegador antes do documento ser mostrado na tela. As duas tags da seção HEAD são: TITLE e META. Programação Web - HTML 3 <TITLE>…</TITLE> Esta tag identifica o título do documento. Ela não contém nenhum atributo e só aparece uma vez em cada documento. <HTML> <HEAD> <TITLE>Testando ...</TITLE> </HEAD> <BODY > </BODY> </HTML> Testando … Navegador <META …> Esta tag tem a função de servir informações para o servidor para serem analisados. Ela tem dois atributos: “HTTP-EQUIV” e “CONTENT”. O atributo “HTTP-EQUIV” corresponde ao nome, ao rótulo de uma determinada informação ao servidor. O atributo “CONTENT” corresponde à própria informação analisada pelo servidor. <META HTTP-EQUIV=”Keywords” CONTENT=”Palavras separadas por vírgulas”> A tag acima informa palavras que serão utilizadas pelos mecanismos de busca para a identificação do documento. <META HTTP-EQUIV=”Refresh” CONTENT=”10”> Esta tag tem a função de atualizar o mesmo documento a cada 10 segundos. <META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=’documento.html’”> Esta tag tem a função de carregar o documento HTML indicado no atributo URL após 5 segundos. <BODY...>...</BODY> A tag <BODY> corresponde à seção que é formada pelo corpo do documento. É nela que se encontra a parte visual e auditiva do documento, o texto, formulário, tabela, imagem, links, etc. Os principais atributos da tag <BODY> correspondem a plano de fundo, margens, links e textos. Os atributos que se referem a plano de fundo são: “BACKGROUND” e “BGCOLOR”. O “BACKGROUND” contém o nome do arquivo de imagem ou URL completo até chegar a esta imagem que será utilizada como plano de fundo. <BODY BACKGROUND=”Caminho/até/chegar/em/arquivo/de/imagem”> O atributo “BGCOLOR” contém a cor que será usada como plano de fundo do documento. A cor poderá ser identificada pelo seu nome (em inglês) ou pelo código hexadecimal, que é formado pelo caractere “#”, seguido de seis dígitos. Destes, os dois primeiros correspondem à cor vermelha, os dois do meio correspondem à cor verde e os dois últimos correspondem à cor azul. Enquanto 00 corresponde ao preto, FF corresponde ao branco. Programação Web - HTML 4 Nome Código Nome Código Red FF0000 Maroon 800000 Lime 00FF00 Green 008000 Blue 0000FF Navy 000080 Yellow FFFF00 Olive 808000 Aqua 00FFFF Teal 008080 Fuchsia FF00FF Purple 800080 White FFFFFF Silver C0C0C0 Black 000000 Gray 808080 <BODY BGCOLOR="Gray"> - Cinza <BODY BGCOLOR="#FFFFFF"> - Branco <BODY BGCOLOR="#000000"> - Preto <BODY BGCOLOR="#FF0000"> - Vermelho. <BODY BGCOLOR="#00FF00"> - Verde. <BODY BGCOLOR="#0000FF"> - Azul. Os atributos que tratam das margens são: “TOPMARGIN” e “LEFTMARGIN”, que atendem ao Internet Explorer; e “MARGINWIDTH” e “MARGINHEIGHT”, que atendem aos demais navegadores. Os atributos “TOPMARGIN” e “MARGINWIDTH” correspondem à margem superior e “LEFTMARGIN” e “MARGINHEIGHT” correspondem à margem esquerda. Os atributos que tratam dos links e textos são: LINK, VLINK, ALINK, TEXT. O atributo LINK corresponde a cor de todos os links de um documento que ainda não foram acessados, VLINK corresponde a cor dos links que já foram acessados, ALINK afeta a cor do link ativo, que está sendo acessado e TEXT afeta a cor do texto. ESTRUTURA BÁSICA DO CORPO DO DOCUMENTO HTML <P>…</P> Esta tag cerca um parágrafo do documento. O atributo ALIGN corresponde ao alinhamento deste parágrafo. As opções são: LEFT, RIGHT, CENTER e JUSTIFY, sendo o padrão a opção LEFT. <H?>...</H?> Esta tag corresponde à identificação de um determinado texto como título. A interrogação acima corresponde, na verdade, a um número entre 1 e 6, sendo 1, o texto maior e 6, o menor. As tags são assim: <H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5> e <H6>...</H6>. Programação Web - HTML 5 <HR> Esta tag corresponde a uma linha horizontal. Os seus atributos são ALIGN: que corresponde ao alinhamento; WIDTH, que corresponde à largura, podendo ser em porcentagem ou pixels; SIZE, que corresponde à espessura em pixels; e NOSHADE, que cria uma linha sem efeito 3D. <HR ALIGN=”CENTER” WIDTH=”100%” SIZE=”2” NOSHADE> <FONT>…</FONT> A tag <FONT> corresponde a configuração do texto no que se refere ao tipo de fonte, cor e tamanho. Os atributos desta tag são: FACE, que corresponde ao nome da fonte; SIZE, que corresponde ao tamanho do texto, variando de 1 a 7; e COLOR, que corresponde a cor do texto, podendo ser o nome da cor ou em código hexadecimal. <FONT FACE=”Verdana” SIZE=”3” COLOR=”#000080”>...</FONT> <BR> Esta tag corresponde à quebra de linha. <I>…</I> Esta tag coloca o texto, a qual cerca, em itálico. <U>…</U> Esta tag coloca o texto, a qual cerca, sublinhado. <B>…</B> Esta tag coloca o texto, a qual cerca, em negrito. <S>…</S> Esta tag coloca o texto, a qual cerca, riscado. <BLOCKQUOTE>…</BLOCKQUOTE> Esta tag gera um espaçamento no conteúdo. <CENTER>…</CENTER> Esta tag coloca o texto, a qual cerca, centralizado. <BIG>…</BIG> Esta tag aumenta o texto. Quanto mais tags inserir, maior ficará o texto. Programação Web - HTML 6 <SMALL>…</SMALL> Esta tag diminui o texto. Quanto mais tags inserir, menor ficará o texto. <ADDRESS>…</ADDRESS> Esta tag serve para referenciar o autor (créditos). Ao visualizar o resultado da tag, o texto torna-se semelhante ao resultado das tags <I>...</i>. <MARQUEE>…</MARQUEE> Esta tag permite aplicar um efeito conhecido como “letreiro eletrônico”, onde o texto que fica entre as tags desliza de um lado para outro do monitor. <PRE>…</PRE> Estas tags mantêm a formatação e o espaçamento original do texto que se encontra entre elas. <!-- COMENTÁRIO --> Estaestrutura é 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 seusprincipais atributos são: • ROWS, que define as dimensões das linhas da estrutura. A quantidade de valores separados por vírgulas corresponde à quantidade de linhas e estes valores podem ser em pixel (número sem unidade), porcentagem (número seguido pelo sinal %) e/ou * (asterisco), que determina flexibilidade na dimensão (completa o espaço que o resto da área disponível). • COLS, que define as dimensões das colunas da estrutura. Valores semelhantes ao atributo ROWS. • FRAMEBORDER, que define se a estrutura terá moldura ou não. Se o valor for igual a 1 (um), terá moldura, senão for igual a 0 (zero), não terá moldura. • BORDER, que define a espessura da borda da moldura. • BORDERCOLOR, que define a cor da borda, podendo ser o nome em inglês ou sistema RGB em hexadecimal. <FRAME> Corresponde a tag que abre um documento web em uma parte da estrutura Frame. Os seus principais atributos são: • SRC, que define o caminho do arquivo. • NAME, que define um identificador para cada parte do Frame. • TARGET, que define o Frame-destino dos links que serão clicados. • SCROLLING, que define se tem barra de rolagem obrigatória, representado por “YES”; “NO”, se não tem barra de rolagem; e “AUTO”, só terá barra de rolagem quando necessário. • NORESIZE, que define as bordas da estrutura Frame como imóveis quando aplicado na tag. IFRAME A tag <IFRAME> corresponde a um documento HTML dentro de outro documento HTML. Os atributos são: SRC, que corresponde ao caminho até o documento HTML que será inserido dentro do documento ativo; WIDTH, que é a largura da área, podendo ser em porcentagem ou pixels; HEIGHT, Programação Web - HTML 13 que é a altura da área, podendo ser em porcentagem ou pixels; e ALIGN, que consiste no alinhamento da área. Este último atributo só é atendido no Internet Explorer <IFRAME SRC="documento.html" WIDTH="450" HEIGHT="200" ALIGN="center"></IFRAME> AÚDIO E VÍDEO <EMBED ...> Esta tag tem a função de publicar no navegador, um programa (plugin) do computador cliente que executa áudio e vídeo. Os principais atributos são: • SRC, caminho do arquivo que será executado pelo plugin. • WIDTH, largura da área visível. • HEIGHT, altura da área visível. • ALIGN, alinhamento. Os principais valores são: LEFT e RIGHT. • HIDDEN, Se o valor for TRUE, torna o plugin visível; se for FALSE, torna o plugin invisível. • AUTOSTART, Se o valor for TRUE, indica que será executado após carregar o site; se for FALSE, indica que será necessário apertar o botão “Play” para executar. • LOOP, Se o valor for TRUE, a quantidade de repetições será infinita; se for FALSE, repetirá somente uma vez. Os principais formatos de áudio utilizados são: MP3, WAV e MID. Já os de vídeo são: SWF, MOV, MPEG, WMV.
Perguntas Recentes
Compartilhar