Instituto Vianna Jnior

Faculdades Integradas Vianna Jnior

Prof. Lcia Helena de Magalhes1

INTRODUO PROGRAMAO WEB

2007

Prof.a Lcia Helena de Magalhes Especialista em Desenvolvimento e Aplicaes para Web Especialista em Matemtica e Estatstica Mestranda em Computao de Alto Desempenho / Sistemas computacionais

INDICE 1. INTRODUO INTERNET E A THE WORLD WIDE WEB...................................4 1.1 A INTERNET.......................................................................................................................4 1.2 ENDEREAMENTO INTERNET .............................................................................................4 1.3 DEFINIES DA HTML .......................................................................................................4 1.4 ELEMENTOS DE UM PROJETO WEB.....................................................................................4 1.5 ESTRUTURA DE UM WEB SITE............................................................................................4 2. COMANDOS HTML (TAGS)............................................................................................5 2.1 FORMAS DOS COMANDOS HTML ......................................................................................5 2. 2 REGRAS HTML E DICAS ..................................................................................................6 2.3 DOCUMENTO BSICO HTML ...............................................................................................7 3 FORMATAO DE TEXTO, HIPERTEXTO E FIGURAS...........................................7 3.1 - FORMATAO BSICA DA FONTE ....................................................................................8 3.1.1 Exerccio - Formatao Bsica.................................................................................8 3.2 - FORMATAO DO TAMANHO E ESTILO DA FONTE ............................................................9 3.2.1 Atributo SIZE.............................................................................................................9 3.2.2 Atributo FACE...........................................................................................................9 3.2.3 Atributo COLOR......................................................................................................10 3.3 EXERCCIO - FORMATAO E CORES ...............................................................................12 3.4 CABEALHOS...................................................................................................................12 4 RGUAS E MARCADORES............................................................................................13 4.1 MARCADORES .................................................................................................................13 4.1.1 Lista com marcadores .............................................................................................13 4.1.2 Lista numerada ou alfabtica..................................................................................13 4.1.3 Lista sem marcadores..............................................................................................14 4.2 RGUAS ...........................................................................................................................14 4.3 EXERCCIO - RGUAS E MARCADORES ............................................................................16 5 INSERO DE IMAGENS ..............................................................................................16 5.1 IMAGEM DE FUNDO ..........................................................................................................19 5.1.1 - Exerccio - Insero de Imagens...........................................................................19

6 LINKS ...................................................................................................................................19 6.1 EMBUTINDO

LINKS EM TEXTOS .......................................................................................20

6.2 EXERCCIO LINKS ........................................................................................................21 7 IFRAME ...............................................................................................................................22 7.1 ATRIBUTOS ......................................................................................................................22 8 FRAMES .............................................................................................................................23 8.1 O TAG FRAMESET........................................................................................................24 8.2 NOFRAME.....................................................................................................................25 8.3 O TAG FRAME...............................................................................................................25 8.4 COMANDOS NO DOCUMENTO CONTEDO .........................................................................25 8.5 EXERCCIO .......................................................................................................................26 9 TABELAS ............................................................................................................................26 9.1 O TAG <TABLE></TABLE> ...................................................................................26 9.2 O TAG <TR></TR>...................................................................................................27 9.3 O TAG <TD></TD> E <TH></TH> .....................................................................28 9.4 EXERCCIO .......................................................................................................................30 10 FORMULRIOS...............................................................................................................30 10.1 TEXTO ...........................................................................................................................31 10.2 MENUS ..........................................................................................................................32 10.3 BOTES .........................................................................................................................33 BIBLIOGRAFIA ....................................................................................................................35

1. INTRODUO INTERNET E A THE WORLD WIDE WEB 1.1 A Internet A Internet a rede mundial de computadores e interliga vrias redes de computadores (instituies educacionais, governamentais, comerciais, etc). Milhares de pessoas trabalham na expanso e administrao destas redes. A rede mundial compreende recursos de informao to vastos que esto alm da compreenso humana. 1.2 Endereamento Internet nome@dominio nome = identificao do usurio (geralmente o mesmo usado no login) @ = pronuncia-se "et" para significar "em" (AT = preposio em ingls indicando lugar) domnio = nome do computador onde "est localizado" o usurio "nome". IMPORTANTE: Alguns sistemas operacionais utilizados em computadores na Internet diferenciam caracteres maisculos de minsculos (so Case Sensitive). Os endereos Internet so comumente escritos em minsculos. 1.3 Definies da Html Os documentos na Web so organizados com o uso de comandos que so interpretados pelos browsers. Estes comandos compem a linguagem HTML (HyperText Markup Language). A linguagem HTML uma linguagem utilizada para definir a aparncia (formatao) dos documentos na Web. 1.4 Elementos de um Projeto Web Pgina Web - Arquivo de texto formatado com HTML. Home Page - Pgina pessoal ou pgina inicial do site. Web Site - Stio, lugar; conjunto de pginas HTML que contm informaes relacionadas. Tambm podem fazer parte de um Web Site arquivos de texto, programas, imagens, etc. 1.5 Estrutura de um Web Site Um Web Site pode estar organizado de trs maneiras:

a)

Seqencial

b) rvore

c) Mista

2. COMANDOS HTML (TAGS) Os comandos HTML so descritores que indicam ao browser como as informaes devem aparecer e so chamados de tags. So escritos obrigatoriamente entre os sinais "<" (menor que) e ">" (maior que). 2.1 Formas dos Comandos HTML Os tags podem ser: - Abertos (simples): <comando> - Fechados: <comando> . . . </comando> - Compostos: <comando> <elemento 1> ... </elemento 1> <elemento 2> ... </elemento 2> .... <elemento n> ... </elemento n> </comando>

2. 2 Regras HTML e Dicas Fechar sempre os tags fechados e compostos; NUNCA esquecer um sinal de < ou de >, no incio ou no fim do tag; No usar espaos no tag (no interior dos sinais < e >). EX: </ comando> < com an do> ERRADO!!! - NUNCA!!!!

Os agrupamentos de espaos colocados FORA dos tags sero interpretados como apenas um espao. Fora dos tags no h restrio do uso dos espaos; NOMES DOS TAGS - Maisculas (no estritamente necessrio mas facilita a leitura e tomaremos como conveno para os nossos cdigos); NOMES DOS ARQUIVOS (inclusive extenso .html ou .htm) - Minsculas; Algumas dicas importantes para o seu sucesso na Web: Verifique suas pginas com diferentes navegadores e em diferentes plataformas para assegurar que voc ter uma experincia de visualizao consistente; Como a maioria dos usurios Web ainda se conectam a velocidades baixas, verifique se suas pginas podem ser visualizadas com estes modems; Revise a grafia e a gramtica antes de publicar a sua pgina (pea que outra pessoa a leia). Verifique todos os links entre as pginas. Esta dica simples mas muitas pessoas esquecem dela e publicam pssimos trabalhos; Em vez de fazer seu vnculo de texto com coisas chatas do tipo Clique aqui!, procure ser mais especfico, use Iniciar, Transferir, ou outra; No coloque informaes do tipo Este site est em processo de criao (geralmente acompanhada de sinais amarelos), pois praticamente todos os sites da Web esto em criao e em desenvolvimento. prefervel no colocar nada a colocar uma pgina com um aviso deste tipo; Pea a opinio de outras pessoas antes de publicar o seu site, o olhar crtico de algum pode detectar erros que no foram percebidos por voc.

OBSERVAES EM RELAO AOS NOMES DOS ARQUIVOS As extenses ".html" ou ".htm" so importantes quando o servidor Web est identificando o arquivo. Usaremos como conveno para os nossos trabalhos a extenso ".html"; Os nomes devem iniciar com uma letra obrigatoriamente; Pode-se utilizar caracteres como "-" e "_"; Procure usar nomes significativos, que remetam ao contedo do arquivo. 2.3 Documento bsico html <HTML> <HEAD> <TITLE>Titulo da Pgina</TITLE> </HEAD> <BODY> <!-- Corpo da Pgina --> </BODY> </HTML> Um documento HTML bsico composto de duas partes: A seo de cabealho descritiva; O corpo do contedo.

Analisaremos, mais adiante, cada um destes tags.

3 FORMATAO DE TEXTO, HIPERTEXTO E FIGURAS Neste captulo voc vai aprender como formatar o texto que far o corpo da sua pgina. Todo documento HTML segue o mesmo modelo bsico, e este modelo deve sempre estar completo para o browser reconhecer o seu documento. O modelo o seguinte: <HTML> <HEAD> <TITLE> O ttulo que ficar no topo da sua pgina voc escreve aqui</TITLE> </HEAD> <BODY> Todo o texto contido no seu documento HTML deve estar aqui</BODY> </HTML>

OBS.: Nunca se esquea de fechar cada tag, com a barra e o nome da tarefa. Quando seu tag tiver vrios atributos eles devem ser omitidos no fechamento do tag. Por exemplo: <A HREF="agenda.html">Agenda</A> Este tag um link, que voc aprender com mais detalhes depois, mais agora o importante que voc perceba que os atributos (detalhes do tag) foram omitidos no seu fechamento. Se voc no fechar um tag ele ficar aberto at o final do documento, alterando a propriedade de todo ele, por exemplo, se voc no fechar <B> que o tag que cria textos em negrito, o documento inteiro ficar em negrito. Uma dica que ns damos que voc sempre escreva os tags em letra maiscula, que facilita a posterior visualizao e modificao dos arquivos. 3.1 - Formatao bsica da Fonte Dentro do tag BODY, voc escreve todo o texto da sua pgina. E neste texto que vamos nos concentrar agora. Os principais tags para a formatao de texto so: <P>Cria um pargrafo</P> <CENTER>Centraliza o texto</CENTER> <B>Textos em negrito</B> <I>Textos em itlico</I> <U>Textos sublinhados</U> <TT>Textos no estilo da mquina de escrever</TT> <SUB>Texto subscrito</SUB> <SUP>Texto sobrescrito</SUP> <BR>Quebra de linha, no necessita ser fechado <!--Este tag foi feito para comentrios e ignorado pelo browser --> <DD>Este tag usado para criar pargrafo (o espao para a primeira linha). Se voc quiser um pargrafo maior ou menor necessrio o uso de espaos atravs do caractere &nbsp; No difcil, com o tempo voc ir memorizar o nome de cada tag!! 3.1.1 Exerccio - Formatao Bsica

3.2 - Formatao do tamanho e estilo da Fonte Um tag muito importante na linguagem HTML o tag <FONT>. Ele determina a cor, tamanho e tipo da fonte. Primeiramente vamos ver como mudar o tamanho e tipo da fonte: 3.2.1 Atributo SIZE O tamanho da fonte, em HTML, varia de 1 (menor) a 7 (maior). Lembre-se sempre que o tamanho em HTML no corresponde ao usual, que dado em pixels. Para configurarmos o nosso texto com estas fontes s fazer assim: <FONT SIZE=n>Onde n=tamanho da fonte desejado</FONT> Voc tambm pode querer aumentar ou diminuir a fonte em relao a que est configurada no momento, ento s por um sinal de mais (para aumentar) ou menos (para diminuir) o tamanho da fonte. Exemplo1: Formatao de fonte

Visualizao exemplo1

3.2.2 Atributo FACE Para mudar o estilo da fonte s usar o atributo FACE. Por exemplo, se eu quero que o meu texto use Arial tamanho 2, s fazer assim: <FONT SIZE=2 FACE=Arial>Este um exemplo da combinao de estilo e tamanho</FONT>

Exemplo2: Formatao de fonte

Visualizao exemplo2

Neste exemplo demonstramos que os atributos podem ser usados ao mesmo tempo sem nenhum problema para o browser. Nota 1: os tamanhos e estilos padres so configurados de acordo com cada browser. Ou seja, se voc no determinar estes valores, o browser que abrir a sua pgina ir interpretar o seu texto com a fonte e estilo configurada nele. Nota 2: os atributos SIZE e FACE, podem tambm ser usados no tag <BODY>, determinando o estilo do documento. Se voc determinou um estilo no tag <BODY>, mas quer mud-lo em uma s frase, s configurar as fontes para a frase desejada (como foi explicado acima). Lembre-se sempre valero as configuraes mais prximas do texto. 3.2.3 Atributo COLOR As cores das fontes so determinadas pelo atributo COLOR, no tag FONT ou, abrangendo todo o texto, pelo atributo TEXT, no tag BODY. Voc pode citar a cor que voc quer de duas formas: <FONT COLOR="nome da cor"></FONT> <FONT COLOR=#XXXXXX></FONT> Exemplo 3: Formatao de fonte

10

A primeira forma mais simples, e admite os nomes de cores: red (vermelho), blue (azul), green (verde), yellow (amarelo), maroon (marrom), navy (azul-marinho), purple (roxo), olive (verde-oliva), teal (verde-azulado),fuchsia (mangenta), aqua (azul-ciano), lime (verde-limo), silver (prata), gray (cinza), black (preto), white (branco). Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Alguns browsers no aceitam este tipo de configurao, ento o melhor fazer a configurao de cores pelo segundo mtodo. O segundo mtodo usa o cdigo RGB (red green blue), todos os browsers reconhecem este cdigo. Os XXXXXX podem ser qualquer nmero de 0 a 9 e qualquer letra de A a F, esses nmeros e letras representam uma ordem tonal do tom mais claro para o mais escuro: 0 1 2 3 4 5 6 7 8 9 A B C D E F Os dois primeiros X representam a quantidade de luz vermelha em uma cor, os dois do meio de luz verde e os dois ltimos de luz azul. Alguns exemplos de misturas: FFFFFF = branco 000000 = preto FF0000 = vermelho Para definir as cores no texto todo usa-se o BODY. <BODY BGCOLOR=#xxxxxx TEXT=#xxxxxx LINK=#xxxxxx VLINK=#xxxxxx> BGCOLOR - cor de fundo (padro: cinza ou branco) TEXT - cor dos textos da pgina (padro: preto) LINK - a cor dos links (padro: azul) ALINK - cor dos links, quando acionados (padro: vermelho) VLINK - cor dos links, depois de visitados (padro: azul escuro ou roxo) Seus valores so dados em valores hexadecimais, equivalentes a cores no padro RGB (Red, Green, Blue). Exemplos: #FFFFFF, #804040, #000000. 00FF00 = verde 0000FF = azul FFFF00 = amarelo

11

3.3 Exerccio - Formatao e Cores Reproduza a pgina:

3.4 Cabealhos Outra forma usada para configurar o tamanho da fonte o tag <H*></H> onde o asterisco substitudo por um nmero que vai de 6 (menor) a 1 (maior). Este tag mais usado para ttulos de textos. Exemplo 4: Cabealho

Visualizao do exemplo4

12

4 RGUAS E MARCADORES 4.1 Marcadores Outros recursos importantes para a formatao de textos em HTML so o uso de rguas e marcadores. Os marcadores podem ser usados de trs formas bsicas: 4.1.1 Lista com marcadores Listas no-numeradas equivalentes s listas com marcadores do MS Word: Funciona como nesta apostila, voc pode mudar a cor do marcador do mesmo modo que muda a cor de uma fonte. Primeiramente voc abre a lista com o tag <UL>. Depois, quando voc quiser incluir outro item s usar o tag <LI> para cada item includo. No se esquea de fechar a lista: </UL>. O atributo TYPE, assume os valores CIRCLE, SQUARE e DISC (default). Exemplo 5: Lista com marcadores:

4.1.2 Lista numerada ou alfabtica Nesta lista os marcadores so nmeros ou letras. Para abrir a lista use o tag <OL>, para cada item use novamente <LI>, fechando a lista com </OL>. Para escolher o tipo de marcador use o seguinte atributo: TYPE="A" (A, B, C...); "a" (a, b, c...); "I" (I, II, III...); START= "nmero": indica o marcador inicial. "i" (i, ii, iii...); "1" (1, 2, 3...).

13

Exemplo 6: Lista numerada

Visualizao do exemplo 6

4.1.3 Lista sem marcadores Se voc quiser usar uma lista sem marcadores, use o tag <DL> para abrir a lista, <DT> para cada item desejado e <DD> para cada subitem. Exemplo 7: Lista sem marcadores Visualizao do exemplo 7

4.2 Rguas As rguas so usadas da seguinte forma: Para a incluso de um rgua simples horizontal s usar o tag <HR>, se voc quiser mudar a aparncia da rgua, use os seguintes atributos: Para alterar a largura use o atributo WIDTH. Por exemplo: <HR WIDTH=50%> cria uma rgua com largura de 50% da pgina.

14

Para alterar a altura use o atributo SIZE. Por exemplo: <HR SIZE=5> cria uma rgua de altura 5 pixels.

A configurao padro cria uma rgua 3D, com o atributo NOSHADE voc cria uma rgua em negrito. Exemplo 8: Rgua Visualizao exemplo 8

A configurao padro cria uma rgua centralizada. Se voc quiser que ela fique alinhada a esquerda ou direita, use o atributo ALIGN igual a LEFT ou RIGHT. Exemplo 9: Rguas alinhadas

Visualizao exemplo 9

15

4.3 Exerccio - Rguas e Marcadores

5 INSERO DE IMAGENS Este um exemplo inicial: Exemplo 10: imagens

Visualizao exemplo 10

16

O tag utilizado para a incluso de imagens o: <IMG> Vrios atributos devem ser definidos sobre a origem, colocao e no tag . Veja os mais importantes: SRC SRC="local da imagem" Este atributo especifica o local aonde est a imagem e o seu nome. Nas pginas pessoais mais comum o uso de arquivos jpg ou gif, que voc pode obter facilmente na rede. Exemplo de uso: IMG <IMG SRC="tecnologia.gif"> Este tag abrir o arquivo tecnologia.gif, localizado no mesmo diretrio em que est o arquivo HTML que est sendo editado. Lembre-se que este o nico atributo que no pode ser omitido neste tag. Nota: guarde sempre as imagens de sua preferncia na mesma pasta em que esto os seus arquivos de HTML para evitar problemas, ento s escrever o nome do arquivo no atributo SRC para abrir a imagem. Dica1: mantenha as imagens pequenas e use-as com critrio, voc deve usar os grficos para dar impacto e interesse pgina, sem acrescentar muito volume (ou tempo de espera para o carregamento dos arquivos). Dica2: o alinhamento mais prtico quando feito com o uso de tabelas (que tambm ser explicado). ALT ALT="legenda" Fornece o texto que aparece no espao da imagem quando o browser no pode abrir a imagem ou esta capacidade foi "desligada". comportamento da

imagem. Uma parte deles opcional, com o tempo voc descobrir o que realmente importa

17

Exemplo 11: Legenda - imagens

Visualizao exemplo 11

ALIGN=LEFT, RIGHT, TOP, MIDDLE ou BOTTOM LEFT: a figura desenhada como uma imagem alinhada esquerda, com o texto fluindo ao seu redor. RIGHT: a figura desenhada como uma imagem alinhada direita. TOP: a parte superior do texto ao redor alinhada com a parte superior da imagem. MIDDLE: a linha de base do texto ao redor alinhada com a parte central da imagem. BOTTOM: A linha de base do texto ao redor alinhada com a parte inferior da imagem. Nota: o tag

<CENTER></CENTER> usado tambm para imagens, se voc quiser alinhar o texto e a figura em relao a pgina. O tag imagem deve estar dentro do tag CENTER.

18

HEIGHT=nmero e WIDTH=nmero HSPACE=nmero e VSPACE=nmero (em pixels): Especifica o espao em branco extra ou as margens ao redor da imagem. HSPACE o espao horizontal e VSPACE o espao vertical. 5.1 Imagem de fundo Podem ser includas tambm imagens de fundo, para isso utilize novamente o tag BODY, agora com o atributo BACKGROUND. Por exemplo: <BODY BGCOLOR=#FFFFFF BACKGROUND ="imagem.gif" TEXT=#000000 ...> Este tag abrir a figura imagem.gif no fundo e ter cor de texto branca. Para cor de fundo foi utilizado o preto porque enquanto a imagem imagem.gif no carregada o fundo preto possibilita ao usurio a leitura, j que o texto branco.

5.1.1 - Exerccio - Insero de Imagens

6 LINKS Um dos tags mais importantes o que permite fazer links, ou seja, fazer referncia a um outro recurso da WEB ou a um ponto especfico da sua pgina. ncoras Externas - Ligao (link) entre um arquivo hipertexto para outro arquivo.

19

Veja como us-lo: <A HREF="URL">Texto que aparece no link</A> O atributo HREF determina a localizao do arquivo da sua pgina ou do local da WEB a que o link se referencia. A URL (Uniforme Resource Locator) o endereo do link. O texto entre os tags aparecer sublinhado, indicando que um link de hipertexto. Nota 1: evite sublinhar o seu texto, para no confundir o seu usurio. Nota 2: as cores dos link podem ser mudadas utilizando-se os seguintes atributos dentro do tag <BODY>: LINK = cor: modifica a cor do link; VLINK = cor: modifica a cor do link j visitado. ALINK - cor dos links, quando acionados (padro: vermelho) Exemplos: <A HREF="http://www.viannajr.edu.br">Link para a pgina do Vianna Jr.</A> <A HREF="exemplo.html">Link para o arquivo exemplo.html, da sua pgina</A> <A HREF="exemplo.html"><IMG SRC="icone.gif"></A> Este ltimo exemplo abre uma imagem (icone.gif) e quando voc clicar nela o arquivo exemplo.html aberto na sua pgina. Voc pode fazer link para um e-mail tambm, para isso escreva: <A HREF="mailto: lmagalhaes@viannajr.edu.br">E-mail para a professora</A> claro que o e-mail deve ser trocado por aquele de sua preferncia. Voc tambm pode fazer links para e-mail com imagens (da mesma forma como para fazer links para arquivos - como foi explicado acima). 6.1 Embutindo links em textos ncoras Internas Para navegar dentro do prprio documento. So links que levam a outras partes do mesmo arquivo. mais usado com arquivos extensos.

20

Voc pode referenciar rea de texto para a qual voc quer pular. No local que voc quer acessar digite: <A NAME="nome da rea de texto">Texto que voc quer acessar</A> Para ir at esta rea digite: <A HREF="#nome-da-rea-de-texto">Link</A> Se a rea estiver em outro arquivo digite: <A HREF="outro.html#nome-da-rea-do-arquivo">Clique aqui</A>

Outros atributos podem ainda ser usados em tags <A>. Por exemplo: TARGET=" ": Especifica o carregamento de um link em uma janela de destino. Ele usado muitas vezes com o tag FRAME. Ele pode assumir diversos valores: _top Carrega o link no corpo inteiro da janela _blank Carrega o link em uma janela em branco _parent Carrega o link no seu pai imediato _self Carrega o link na mesma janela dele window Define a janela de destino do link (ver em FRAMES). 6.2 Exerccio Links

Vianna Jnior

21

7 IFRAME Outra maneira mais elegante de inserir outras pginas dentro de nossos documentos HTML atravs do comando <iframe>. Nesse caso, devemos especificar o tamanho do espao que dever ser aberto no documento para apresentao da outra pgina. Abaixo um exemplo, onde <iframe> foi colocado de forma a abrir uma pgina centralizada: CENTER> <iframe src="http://www.viannajr.edu.br" width=740 height=255> </iframe> </CENTER> 7.1 Atributos ALIGN = LEFT | RIGHT | CENTER | TOP | MIDDLE | BOTTOM Valores : LEFT Moldura esquerda e texto ao redor; RIGHT Moldura direita e texto ao redor; CENTER Moldura no centro e texto ao redor; TOP Texto alinhado com a parte superior do frame; MIDDLE Texto alinhado com o centro do frame; BOTTOM Texto alinhado com a parte inferior do frame; FRAMEBORDER = 1 | 0 HEIGHT = nmero | % - Altura da moldura. MARGINHEIGHT = nmero | % MARGINWIDTH = nmero | % NAME = texto NORESIZE

22

SCROLLING = yes | no | auto SRC = URL WIDTH = nmero | % - Largura da moldura.

8 FRAMES Um recurso que nos permite sair do carter contnuo de um texto exibido na tela o frame, onde podemos colocar em um lado da tela (ou em qualquer outra parte) um ndice para os diversos assuntos que so abordados na pgina, sem que esse ndice desaparea quando escolhemos algum de seus tpicos. O frame o recurso que nos permite uma tela do navegador em vrias reas diferentes. Cada frame tratado como uma pgina independente, pois para sua utilizao se faz necessrio dois tipos de documentos .html: o frameset e o contedo. O frameset um documento.html que o responsvel pelo layout da pgina com os frames. nele que so especificados a quantidade, o tamanho e a posio. O contedo o documento.html em que ficam contidas as informaes (texto, figuras, etc.) a serem exibidas em seu respectivo frame ou em uma janela independente. O frameset um documento que serve apenas como o layout da pgina, portanto, os tags de formatao de texto, insero de figuras, tabelas e outros no so suportados neste documento, incluindo o tag <BODY>. Mesmo assim o frameset permitido dentro de um documento comum, mas no pode ficar entre os tags <BODY></BODY>, apesar disso recomendamos que o frameset seja um documento totalmente separado, pois facilita a construo da pgina e suas futuras correes e expanses. Exemplo 12:

Para o documento acima, temos os seguintes arquivos:

23

No arquivo frameset.html especificado quais os documentos (frame01.html e frame02.html) que vo ocupar as reas da janela. Nestes documentos encontram-se os contedos de cada frame. Se o endereo digitado for o de um arquivo contedo (frame01.html e frame02.html) somente aparecer o contedo do respectivo arquivo. 8.1 O Tag FRAMESET Definio de grupo de frames. usado no lugar do tag <BODY> no documento que define os frames. <FRAMESET ROWS=t1/t1%,t2/t2%, COLS=t1/t1%,t2/t2%, FRAMEBORDER=0/1 FRAMESPACING="t1"> </FRAMESET> t1,t2: especifica o tamanho em pixels. t1%,t2%: especifica o tamanho como porcentagem da janela./ 8.1.1 Atributos ROWS: faz a diviso horizontal da janela. COLS: divide a janela em colunas. Combinando ROWS e COLS teremos a formao de uma grade. O exemplo mostrado anteriormente tem 1 linha (no exibe ROW) e 2 colunas (ROWS=40%,60%).

24

FRAMEBORDER: oculta (0) ou exibe (1) BORDER: espessura da borda (em pixels) BORDERCOLOR: cor da borda FRAMESPACING: espaamento entre os frames. 8.2 NOFRAME <NOFRAME></NOFRAME>: especifica o contedo que ser mostrado no lugar das frames caso o browser no possua suporte a frames. Os browsers que suportam este recurso iro ignorar esta tag e no haver problemas com a exibio do documento. 8.3 O Tag FRAME Define o frame dentro do frameset. <FRAME SRC=URL NAME=TEXTO> 8.3.1 Atributos SRC: define o endereo do arquivo a ser exibido no frame. NAME: Nome do frame. Outros comandos so opcionais como: MARGINWIDTH=t1/t1%: define o tamanho das margens esquerda e direita. MARGINHEIGHT=t1/t1%: define o tamanho das margens superior e inferior. NORESIZE: evita que o usurio redimensione o frame. SCROLLING=(YES/NO/AUTO): barras de rolagem do frame (yes: visvel / no: no exibe a barra / auto: inclui se o contedo ultrapassar o tamanho definido para o frame, esta a opo padro). 8.4 Comandos no documento contedo Para que exista coordenao entre o documento de layout (frameset) e os documentos de contedo eles devem conter as seguintes tags: <A HREF=URL TARGET=NOME>...</A> Carrega a pgina (URL) no frame especificado por NOME.

25

8.5 Exerccio Construa os arquivos para o documento mostrado a seguir:

9 TABELAS Atravs das tags apropriadas podem ser colocados em forma de tabela textos formatados, listas, links, imagens e campos de formulrio. Para que uma tabela seja exibida corretamente deve-se tomar o cuidado de usar os comandos de fechamento dos tags </TH>, </TD> e </TR>, pois caso no sejam usados diferentes browsers interpretaro, e portanto iro exibir, a tabela de maneira diferente. 9.1 O TAG <TABLE></TABLE> Estas tags definem que o contedo que est entre elas deve ser organizado na forma de tabela. Para a formatao da tabela podem ser colocados junto da tag <TABLE> os seguintes atributos abaixo, sendo n: tamanho em pixels e n%: tamanho em porcentagem relativo ao tamanho da tabela. ALIGN=(LEFT/CENTER/RIGHT): Alinhamento da tabela em relao ao documento. BGCOLOR: Define uma cor para o segundo plano da tabela.

26

BORDER=n: coloca uma borda com espessura n (padro: sem borda). CELLSPACING=n: espaamento entre as clulas (padro: 2). CELLPADING=n: espaamento entre a borda de uma clula e seu contedo (padro: 1). COLS=n: Nmero de colunas de uma tabela. Permite o carregamento mais rpido de tabela muito grandes. WIDTH=n/n%: Largura da tabela. Depois de definida a estrutura da tabela podemos colocar as tags que posicionaro o contedo da tabela. Abaixo mostramos somente o esqueleto de uma tabela com clulas de ttulo (tag <TH></TH>) e 2 linhas e 2 colunas de dados. O contedo da tabela colocado entre o tags <TD></TD>. <TABLE> <!-- DEFINE A TABELA --> <TR> <!-- ABRE UMA LINHA --> <TH></TH> <!--INSERE UMA CLULA TTULO E SEU CONTEDO--> <TH></TH> <!--INSERE UMA CLULA TTULO E SEU CONTEDO--> </TR> <!-- FECHA A LINHA --> <TR> <!-- ABRE UMA LINHA --> <TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO --> <TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO --> </TR> <!-- FECHA A LINHA --> <TR> <!-- ABRE UMA LINHA --> <TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO --> <TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO --> </TR> <!-- FECHA A LINHA --> </TABLE> <!-- FECHA A TABELA--> 9.2 O TAG <TR></TR> Abertura de uma linha da tabela, possui as seguintes opes: ALIGN=(LEFT/CENTER/RIGHT): Alinhamento horizontal do contedo, tornando-se padro para toda linha. VALIGN=(TOP/MIDDLE/BOTTOM/BASELINE): Alinhamento vertical do contedo, tornando-se padro para toda linha. BGCOLOR: Define uma cor para o segundo plano para a linha.

27

9.3 O TAG <TD></TD> E <TH></TH> Cria uma clula na tabela, a tag de clula ttulo (<TH></TH>) tambm possui as mesmas opes mostradas abaixo.ALIGN=(LEFT/CENTER/RIGHT): Alinhamento horizontal do contedo, tornando-se padro para toda linha. VALIGN=(TOP/MIDDLE/BOTTOM/BASELINE): Alinhamento vertical do contedo, tornando-se padro para toda linha. BGCOLOR: Define uma cor para o segundo plano para a linha. BORDER=n: coloca uma borda com espessura n (padro: sem borda). COLSPAN=n: nmero de colunas que a clula sobrepe. ROWSPAN=n: nmero de linhas que a clula sobrepe. WIDTH=n/n%: Largura da clula. NOWRAP: no deixa o texto dividido. Exemplo 13

Vianna Jr.

Agora vemos um exemplo de tabela:

<HTML> <HEAD> <TITLE>Desenvolvimento Web</TITLE></HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" ALINK="#FF0000"> <CENTER><IMG SRC="cdown.gif"><BR> <FONT FACE="COMIC SANS MS">CURSO DE HTML E JAVASCRIPT <HR WIDTH="100%"></CENTER> <TABLE COLS=6 WIDTH="100%" > <TR> <TD ALIGN=CENTER> <A HREF="HTTP://WWW.CAPES.GOV.BR" TARGET="_TOP"> VLINK="#000099"

28

<IMG SRC="ANIMICON.GIF" BORDER=0></A> </TD> <TD ALIGN=CENTER> <A HREF="http://www.viannajr.edu.br" TARGET="_TOP">

<IMG SRC="LEILAO_ICONE.GIF" BORDER=0 HEIGHT=62 WIDTH=64></A>

</TD> <TD ALIGN=CENTER> <A HREF=" http://prouni-inscricao.mec.gov.br/prouni/ " TARGET="_TOP"> <IMG SRC="coffee.GIF" BORDER=0 HEIGHT=89 WIDTH=100></A> </TD> <TD ALIGN=CENTER> <A HREF="HTTP://WWW.UFJF.BR" TARGET="_TOP"> <IMG SRC="FAX-ICON.GIF" BORDER=0 HEIGHT=70 WIDTH=70></A> </TD> <TD ALIGN=CENTER> <A HREF=" http://www.capes.gov.br/capes/portal/ " TARGET="_TOP"> <IMG SRC="TEL-ICON.GIF" BORDER=0 HEIGHT=84 WIDTH=56></A> </TD> <TD ALIGN=CENTER> <B><FONT FACE="CENTURY GOTHIC"><FONT SIZE=-1> <AHREF=http://www.viannajr.edu.br/ TARGET="_TOP">Vianna</A></FONT></B> </TD> </TR> </TABLE> TELEFONE: <I>XXX-XXXX</I> / FAX: <I>331-7075</I> <FONT SIZE=-2> <BR><A HREF="ATUALIZACAO.HTML">LTIMA ATUALIZAO: <I>06/02/2007</I></A> </FONT> </BODY> </HTML>

29

9.4 Exerccio

10 Formulrios Um dos recursos mais fascinante da linguagem Html a possibilidade de criar formulrios eletrnicos. Usando um formulrio o usurio pode interagir com o servidor, enviando dados que sero processados no servidor e posteriormente devolvidos ao cliente. Esses comandos so os principais responsveis pela viabilizao da troca de informaes entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de atividade. O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento. <FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM> Os atributos de FORM que nos interessam agora so: ACTION - especifica o URL do script ou email ao qual sero enviados os dados do formulrio. METHOD - Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so : POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. GET - os dados entrados fazem parte do URL associado consulta enviada para o servidor; suporta at 128 caracteres. FORM tambm pode apresentar o atributo: ENCTYPE Indica o tipo de codificao dos dados enviados atravs do formulrio. O tipo default application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers text/plain, mas sua utilizao ainda no est padronizada.

30

Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. 10.1 Texto a. Entrada de texto comum - TEXT b. Entrada de texto protegido, senha - PASSWORD c. Entrada oculta - HIDDEN d. Entrada de vrias linhas de texto - TEXTAREA a. Entrada de texto comum TEXT

A forma mais simples de campo de entrada a marcao text. Este campo permite a digitao de uma nica palavra ou linha de texto, e possui uma largura default de 20 caracteres. b. Entrada de texto protegido, senha PASSWORD

Marcaes de entrada do tipo password so idnticas aos campos do tipo text, exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *). c. Entrada de vrias linhas de texto - TEXTAREA

A marcao TEXTAREA no utiliza o formato convencional INPUT TYPE="text" dos exemplos anteriores. Ao contrrio, uma marcao <TEXTAREA> delimita o seu incio e a marcao </TEXTAREA> o seu fim. Opes: ROWS ="" OBRIGATRIO Especifica o nmero de linhas da entrada textual.

31

COLS="" OBRIGATRIO Especifica o nmero de colunas da entrada textual. Texto default OPCIONAL Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio, simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA. 10.2 Menus a. Menus com opes - SELECT b. Listas paginveis - SELECT com SIZE a. Menus com opes - SELECT

Menu de opo nica A marcao SELECT segue a mesma conveno de TEXTAREA. Ou seja, as opes de menu ficam entre a marcao de incio <SELECT> e a de fim </SELECT>. b. Listas paginveis - SELECT com SIZE

A nica diferena entre este elemento de entrada e o anterior SELECT a introduo da opo SIZE. Ela especifica quantas linhas com opes de menu sero exibidas na janela. Opes: MULTIPLE OPCIONAL Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo anterior do SELECT, onde apenas uma opo pode ser selecionada no menu. SIZE - OBRIGATRIO Nmero de linhas (opes de menu) exibidas na janela. OPTION - OBRIGATRIO Especifica uma opo da lista. VALUE - OPCIONAL

32

Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo enviado ao servidor. SELECTED OPCIONAL Esta opo determina uma OPTION default para ser selecionada. 10.3 Botes a. Botes sim ou no - CHECKBOX b. Botes com opes - RADIO c. Botes de submisso e limpeza a. Botes sim ou no CHECKBOX

Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES perfeita para escolher entre duas opes. b. Botes com opes RADIO

So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie de opes. Suas principais propriedades so: name, value e checked. name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos os objetos desta srie tm que ter o mesmo "name". value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio de "checked". checked : Especifica que o objeto inicialmente estar ligado. c. Botes de submisso e limpeza - RESET E SUBMIT

Em vez do usurio corrigir cada INPUT, um boto RESET pode ser utilizado para restaurar todos os campos a seus valores default, como se nenhuma informao houvesse sido

33

digitada. E finalmente, o FORM precisa de uma opo para enviar toda a informao digitada para o servidor, uma vez que o usurio terminou de preencher os todos os campos de entrada. O boto SUBMIT transfere toda a informao para a URL especificada no elemento ACTION. Exemplo 14: Cadastro de informaes

34

BIBLIOGRAFIA 1. OLIVEIRO, Carlos A. J. HTML 4.0 - Orientado por projeto.. 2 ed. Ed. rica, So Paulo 2001. 2. PRATES, Rubens. HTML - Guia de consulta rpida. So Paulo, 1999, Ed. Novatec. 3. PROFFITT, Brian e Zupan, Ann. XHTM Desenvolvimento Web. Makron Books, So Paulo, 2001. 4. TITTEL, Ed et al. HTML 4 para Dummies. Rio de Janeiro, 1998. Ed. Campus Ltda.

35