Anda di halaman 1dari 69

Criao de Pginas HTML

Volume I COTUCA Colgio Tcnico de Campinas Departamento de Processamento de Dados Curso Tcnico em Informtica

1o Semestre de 2002

Depto. Processamento de Dados

Criao de Pginas HTML

ndice
1. INTRODUO INTERNET..................................................................................4 1.1 1.2 1.3 1.4 1.5 PRINCIPAIS SERVIOS DA INTERNET.......................................................5 O QUE SO SITES DA INTERNET...............................................................9 BROWSERS ................................................................................................10 ELEMENTOS ENVOLVIDOS EM UMA CONEXO INTERNET..................10 TIPOS DE CONEXES COM A INTERNET................................................12

2. Introduo ao HTML .............................................................................................13 2.1 2.2 2.3 MARCAES (TAGS) .................................................................................13 CRIANDO DOCUMENTOS HTML ...............................................................14 ATIVIDADES PARA FIXAO ....................................................................16

3. Formatao de Texto ............................................................................................18 4. Criando Listas .......................................................................................................22 4.1 4.2 4.3 4.4 Listas No-Numeradas ................................................................................22 Listas Numeradas ........................................................................................22 Listas de Definio.......................................................................................23 Listas Intercaladas .......................................................................................24

5. Inserindo Imagens.................................................................................................25 5.1 5.2 5.3 5.4 Manipulando Imagens ..................................................................................25 GIF Intrelaado (Interlaced Gif)....................................................................26 Imagens Transparentes ...............................................................................26 Imagens Sensveis .......................................................................................27

6. Criando Links (Internos e Externos ao Documento)..............................................31 6.1 6.2 Interligando Documentos .............................................................................31 Interligando Documentos em Outros Diretrios ...........................................31

-2-

Depto. Processamento de Dados

Criao de Pginas HTML

6.3 6.4 6.5

Ligando URLs..............................................................................................32 Ligando sesses especficas em outro documento......................................33 Interligando sesses em uma pgina...........................................................33

7. Criando Tabelas ....................................................................................................35 8. Frames ..................................................................................................................41 8.1 8.2 8.3 8.4 8.5 Frameset ......................................................................................................41 Frame...........................................................................................................44 Noframes......................................................................................................45 Intercalando Frameset - exemplos...............................................................47 Links entre frames........................................................................................48

9. Formulrios ...........................................................................................................50 9.1 9.2 9.3 Entrada de Texto..........................................................................................51 Menus ..........................................................................................................55 Botes ..........................................................................................................59

-3-

Depto. Processamento de Dados

Criao de Pginas HTML

1. INTRODUO INTERNET

Internet uma grande rede de computadores interligados para troca de informaes. Esses computadores possuem as mais diversas arquiteturas e sistemas operacionais, porm conseguem estabelecer uma comunicao entre eles de forma transparente para os usurios. Quando um computador est ligado internet, ele consegue receber informaes de qualquer computador que tambm esteja ligado internet sem mesmo saber onde que este outro computador est fisicamente. Para entender melhor toda essa histria de Internet veja um pouco de histrico dos acontecimentos relacionados com esta rea. O incio de tudo isso se deu em funo da preocupao do governo americano em descentralizar as informaes estratgicas e sigilosas dos seus bancos de dados. Para tal, era preciso criar um meio de comunicao computadorizado, que permitisse a troca de informaes entre computadores distintos, com Sistemas Operacionais distintos sem perceber essa distino. Caso isso se tornasse uma realidade, qualquer ponto de armazenamento fsico de informao poderia ser destrudo sem causar gigantescas perdas, pois a informao estaria pulverizada pela rede, distribuda entre os vrios computadores que a compe. Toda essa preocupao se deu em plena guerra fria, na dcada de 50, logo aps a II Guerra Mundial. Nessa poca, foi criada uma agencia do governo americano de nome ARPA (Advanced Research Projects Agency ou Agencia de Projetos e Pesquisas Avanadas) que tinha o objetivo de pesquisar e desenvolver novas tecnologias para as foras armadas. Das pesquisas da ARPA surgiu, na dcada de 60, a ARPANet que deu os primeiros sinais da realizao da idia de interligar pontos do mundo. Bem, inicialmente os pontos ligados foram bases militares americanas, mas desse passo inicial surgiu o que conhecemos hoje por internet. Somente na dcada de 70 as universidades comearam a conectar-se internet expandindo o objetivo de uma rede militar para uma rede tambm acadmica. A partir da, foi realizada a primeira conexo entre pases utilizando cabos, rdio e satlites e a internet no parou mais de crescer. Com o passar dos tempos a internet foi se popularizando e se tornando um dos meios de comunicao e realizao de negcios mais utilizados no mundo. Para que mquinas completamente diferentes e com sistemas operacionais distintos pudessem conversar, foi necessrio estabelecer um padro de linguagem a ser utilizado na comunicao entre essas mquinas e a esse padro damos o nome de PROTOCOLO. O padro de comunicao da ARPANet foi aperfeioado por volta de 1974 e desde ento a internet adota como padro o protocolo TCP/IP, que divide os dados em pequenos pacotes e os envia pela rede. Cada pacote sabe onde deve chegar, ou seja, sabe o seu destino e segue o melhor caminho possvel no momento at chegar a ele. No protocolo TCP/IP no podemos garantir a ordem de chegada dos pacotes. Pode ser que a nossa informao seja dividida em trs pacotes e que cada um deles siga um

-4-

Depto. Processamento de Dados

Criao de Pginas HTML

caminho diferente para chegar ao seu destino. Note que ambos tem o mesmo destino, mas no necessariamente caminham juntos pela rede. Ao chegarem ao destino comum, os trs pacotes sero colocados em ordem e comporo novamente a informao original. Isso se d devido ao fato do protocolo TCP/IP no ser orientado a conexo, ou seja, ele no estabelece um canal individual de comunicao entre dois computadores (como acontece em uma conversa telefnica, por exemplo). Dizemos que o TCP/IP um protocolo orientado a pacotes. Dissemos anteriormente que cada pacote sabe qual o seu destino. Para que as mquinas na internet possam ser identificadas, cada uma delas recebe um nmero, que chamamos de Nmero IP ou Endereo IP. O protocolo IP verso 4 possui endereo IP composto por 4 nmeros separados por um ponto. Cada um desses nmeros varia de 0 a 255 compondo nmeros no seguinte formato: 143.106.1.3 ou 143.106.72.2. Algumas combinaes de nmeros so reservadas para uso especfico, mas no existe nenhum nmero IP vlido repetido e operante na internet. Caso duas mquinas estejam operando com o mesmo endereo IP vlido, ocorrer um conflito de IP e pelo menos a segunda mquina a entrar na internet no funcionar corretamente. Redes iniciadas pelo nmero 10 no so vlidas na Internet, portanto 10.0.3.1 no um endereo vlido. No incio, todo computador que estava conectado internet (portanto tinham um endereo IP nico) e que quisesse estabelecer uma comunicao com outro computador tambm na internet deveria saber qual era o endereo dessa mquina destino. Com o aumento das mquinas na internet foi ficando cada vez mais complicado o acesso aos computadores da rede atravs da utilizao de seus endereos IP. Para solucionar este problema, foi criada uma forma de associar os endereos IP a nomes facilmente lembrados pelos seres humanos. Nasceu ento o que conhecemos por DNS (Domain Name Service). Quando queremos acessar o site do COTUCA, por exemplo, digitamos www.cotuca.unicamp.br. Essa URL (Uniform Resouce Locator) convertida em nmeros, 143.106.250.34, por exemplo, e o computador que tem esse endereo IP (computador que hospeda o site do COTUCA) envia ao seu browser a pgina inicial do site. Podemos perceber ento que cada site tem dois endereos, um alfanumrico (www.cotuca.unicamp.br), que chamamos de URL, e um numrico (143.106.250.34) e pode ser acessado por qualquer um dos dois.

1.1

PRINCIPAIS SERVIOS DA INTERNET


No apenas de navegao que vive a internet.

Com a popularizao da internet, vrios servios oferecidos por ela se tornaram bastante utilizados e continuam sendo at hoje. Vejamos, a seguir quais so os servios mais utilizados na internet.

-5-

Depto. Processamento de Dados

Criao de Pginas HTML

1.1.1 FTP (File Transfer Protocol) O servio FTP permite a transferncia de arquivos entre computadores na Internet. Seu funcionamento baseia-se no estabelecimento de uma sesso limitada entre o cliente FTP local (o seu computador) e servidor FTP remoto (o servidor de FTP da unicamp, por exemplo). No servidor remoto a sesso autenticada, via prompt de comando que requisita o nome de login e senha do usurio. Essa sesso possui apenas comandos referentes manipulao de arquivos. Existe um tipo de servidor de FTP que chamamos de servidor FTP anonymous, que disponibiliza uma conta especial com autenticao flexvel (nome de login: anonymous, e a senha normalmente apenas o endereo de correio eletrnico do usurio), permitindo um acesso com restries aos dados do repositrio de arquivos e informaes. Por medidas de segurana e disponibilidade, usa-se um FTP mirroring, que disponibiliza cpias de um dado repositrio em mais de um servidor FTP. Alguns servidores varrem um cadastro de servidores FTP anonymous e criam bases de dados a partir do contedo desses servidores, esse processo conhecido como archie. Permite que um usurio que deseja obter um dado arquivo de domnio pblico obtenha de um desses servidores archie sua localizao. O acesso pode ser feito via programas clientes archie, ou via telnet com uma conta especial do servidor archie ou via correio eletrnico, associado a um programa que interage com o servidor archie. 1.1.2 E-Mail (Eletronic Mail) So servios que permitem a troca de mensagens entre usurios atravs da Internet. Sendo os servios de maior alcance da Internet, possibilita a troca de mensagens entre usurios de vrias redes de servio (CompuServe, Americam OnLine, Bitnet, etc) at usurios de rede coorporativas no totalmente interligadas a Internet. Seu funcionamento tem como base um endereo conhecido como endereo de correio eletrnico (e-mail address), cujo formato : usuario@servidor. Onde usuario representa o identificador de uma caixa postal e servidor representa o domnio ou nome completo de uma mquina que ser responsvel por armazenar a mensagem at que o destinatrio a receba. O endereo eletrnico pode estar associado a um usurio, a um grupo de usurios ou mesmo a um servio a ser prestado que usa o correio eletrnico como meio de transporte. Seu funcionamento baseado no paradigma store-and-forward no tendo interao entre usurios e sim softwares servidores responsveis por executar e gerenciar a transferncia de mensagens. Os principais componentes de um sistema de correio eletrnico so:

-6-

Depto. Processamento de Dados

Criao de Pginas HTML

Agente usurio aplicativo que interage com o usurio, responsvel pela edio de mensagens a serem transmitidas e a obteno das mensagens recebidas (Eudora, Elm, Mail, Outlook, etc.) Agente transporte aplicativo responsvel pelo transporte de mensagens entre os pontos envolvidos, locais ou remotos (Sendmail usando SMTP). Mail boxes caixas postais onde so armazenadas as mensagens recebidas. Gerente de mail boxes aplicativo responsvel pelo gerenciamento das caixas postais. O gerente necessrio especialmente quando os softwares agente usurio e o agente transporte de mail no residem em mesmo equipamento.

Outros servios baseados no sistema de correio eletrnico: Listas de discusso: (mailing lists) baseado na associao de um endereo de correio eletrnico a vrias caixas postais (uma lista de usurios), de forma que uma mensagem enviada a esse endereo recebida em todas as caixas postais. Sendo classificadas como: o Simples, sem controle sobre as mensagens e cadastramento de usurios. o Moderada, com controle sobre as mensagens por um usurio moderador. o Fechada, com controle sobre o cadastramento de usurios.

1.1.3 HTTP (HyperText Transfer Protocol) O HTTP o protocolo utilizado na comunicao entre o servidor Web e o browser. Uma conexo http realizada atravs de comandos telnet, que por sua vez so formados por mensagens de texto trocadas atravs de uma conexo de rede. Um exemplo: telnet www.cotuca.unicamp.br 80 GET /index.html http/1.0 O valor 80 se refere ao nmero da porta destinada a conexes com o servidor Web.

-7-

Depto. Processamento de Dados

Criao de Pginas HTML

1.1.4 News composto por informaes agrupadas por categorias e softwares responsveis pelo seu intercmbio, divulgao e acesso. Originado a partir dos usurios da rede Usenet (uma rede acadmica de equipamentos com sistema operacional Unix, conectados atravs de linhas discadas via UUCP), atualmente amplamente difundido pela Internet. Newsgroup so categorias de news onde as informaes so agrupadas, organizadas de forma hierrquica, partindo da atividade at o assunto. Exemplo rec.music.classic, msica clssica, da atividade msica, que atividade recreativa. Os newgroups so classificados como: Newsgroups livres, no tem controle sobre suas informaes. Newgroups moderados tem uma triagem das informaes antes de sua publicao. A unidade que compe o newsgroup denominada de artigo, tendo o formato semelhante a uma mensagem de correio eletrnico. No existe um catlogo nico de todos os newsgroups existentes, pois estes grupos esto relacionados a assuntos de interesse local. Usurios podem participar desses grupos a partir da seleo de um ou mais grupos de seu interesse para leitura de artigos ou at mesmo o envio de artigos prprios ou respostas a outros artigos. 1.1.5 Telnet Permite a execuo de aplicaes em outras estaes da rede, com a interao a partir do terminal ou estao local. As estaes remotas devem possuir mecanismos de autorizao de acesso via um sistema de contas (login). O funcionamento do servio telnet tem as seguintes caractersticas: O usurio interage com um software cliente telnet selecionando a estao remota que deseja executar uma aplicao. Na estao remota acionado um servidor telnet, que disponibiliza um prompt (nome de login e senha) para estabelecimento da sesso.

-8-

Depto. Processamento de Dados

Criao de Pginas HTML

1.1.6 SSH SSH (Secure Shell) um programa similar ao telnet, porm permite que todos os dados que sero trocados na conexo sejam criptografados, ou seja, fornece uma conexo segura entre o cliente e o servidor.

1.2

O QUE SO SITES DA INTERNET

Chamamos de Site o conjunto de pginas que tratam de um mesmo assunto. Os sites possuem vrios objetivos, por exemplo, a divulgao de empresas, produtos, servios, filantropia, comrcio eletrnico e informaes em geral. Os sites podem ser estticos ou dinmicos. Os sites estticos so aqueles que no utilizam Banco de Dados, ou seja, no utilizam linguagens dinmicas, constituindo-se apenas em sites de divulgao de informaes que no sofrem alteraes constantes. As alteraes das informaes em sites estticos obrigatoriamente envolvem a figura de um profissional da informtica. Sites dinmicos so aqueles que utilizam Banco de Dados como fonte de informao. So desenvolvidos utilizando linguagens dinmicas para gravar e recuperar informaes de Banco de Dados. O exemplo mais clssico de sites desse tipo so os sites de E-commerce, onde os produtos disponveis e seus preos so constantemente alterados por transaes realizadas por sistemas de compra e venda de mercadorias. Ao longo do desenvolvimento tecnolgico da internet, os sites tambm foram evoluindo em formato e em tecnologia. Podemos classificar os sites em trs geraes, que so: Sites de Primeira Gerao: Foram os Primeiros sites feitos por pesquisadores (alunos, professores e cientistas) que tinham como nico objetivo divulgar informao. So sites estticos e sobre os quais o desenvolvedor teve apenas a preocupao mnima com esttica. Sites de Segunda Gerao: Com a popularizao da internet e a abertura do comrcio utilizando a internet foi necessrio criar atrativos para que os internautas visitassem e permanecessem utilizando os sites. Foi ento que surgiu a preocupao no somente com o contedo do site, mas tambm com a sua esttica. Surgiram os sites animados utilizando a tecnologia dos applets Java e mais tarde a tecnologia Flash. Porm, houve um excessivo uso de animaes o os sites se tornaram muito pesados, confusos e lentos. Sites de Terceira Gerao: Aps o grande glamour dos sites animados, houve a interferncia de profissionais da informtica que uniram o atrativo das animaes necessidade de organizao das informaes procurando cada vez mais satisfazer os navegadores, exibindo o site de forma rpida, animada e principalmente organizada. Mas a grande alterao no comportamento dos sites de terceira gerao foi a interao com

-9-

Depto. Processamento de Dados

Criao de Pginas HTML

programas gerenciadores de banco de dados para a extrao de informaes atualizadas a cada nova solicitao de exibio da pgina. Com essa possibilidade de atualizao da informao surgiram as pginas dinmicas.

1.3

BROWSERS

A palavra browser aplicada informtica significa programa visualizador. Em linhas gerais, o browser utilizado para visualizar sites e navegar atravs de seus links. Os browsers para a Internet tambm so chamados Navegadores, pelo fato de o Netscape Navigator ser o browser pioneiro e que inicialmente tomou conta do mercado. Assim, "navegar ou surfar" "passear" pela Internet em busca de informao (com ou sem objetivo especfico). Todo browser tem a capacidade de interpretar a linguagem HTML, que padro de desenvolvimento de pginas para internet e desejvel tambm que seja capaz de interpretar linguagens de script (JavaScript, VBScript, Perl) que so muito utilizadas hoje em dia. 1.3.1 Qual o melhor navegador? A princpio, no existe um melhor, mas duas empresas concorrentes dominam o mercado: a Netscape, proprietria do Netscape Communicator e a Microsoft, fabricante do Internet Explorer. Isso significa que o Internet Explorer - pelo fato ser instalado juntamente com o Windows - mais facilmente encontrado nos computadores, o que nos traz uma idia errnea de que existe um navegador melhor.

1.4

ELEMENTOS ENVOLVIDOS EM UMA CONEXO INTERNET

Para estabelecermos uma conexo com a Internet, alm de um computador, precisamos ainda de outros elementos computacionais, que so basicamente: Computador Modem Linha Telefnica Provedor Softwares de Comunicao

- 10 -

Depto. Processamento de Dados

Criao de Pginas HTML

1.4.1 Computador Muito pouco exigido de um computador para que ele esteja apto a estabelecer uma conexo com a Internet. A configurao mnima para um computador processador 486, com 8 MB de Memria RAM e monitor colorido. Porm, somente isso no basta, necessrio que o computador tenha um Modem ligado a ele. 1.4.2 Modem A palavra Modem a juno das iniciais das palavras MOdulador e DEModulador e um equipamento que permite a comunicao entre o computador e a linha telefnica. este aparelho que traduz as informaes que trafegam dentro do computador (sinais binrios) para sinais que trafegam na linha telefnica e vice-versa. 1.4.3 Linha Telefnica o meio atravs do qual as informaes vo ser levadas de um lado pra outro. Quanto melhor for a linha telefnica, melhor ser a velocidade de acesso s informaes na internet, portanto procure usar linhas digitais no lugar de linhas analgicas. 1.4.4 Provedor Chamamos de Provedor a empresa que nos d acesso Internet. Essas empresas possuem conexes de alta velocidade com as empresas que ligam um pas rede mundial e permitem que vrias pessoas tenham acesso internet ao mesmo tempo. No Brasil existem quatro empresas que fazem a ligao do nosso pas com o mundo atravs da internet, so elas: Embratel (MCI), RNP (Rede Nacional de Pesquisas), Global One e a Inpsat. A essas empresas esto ligados os nossos provedores (UOL, AOL, ig, Unicamp, etc) e a eles ns estamos conectados. 1.4.5 Softwares de Comunicao Chamamos de Softwares de Comunicao qualquer programa que permita o estabelecimento de uma conexo com a internet. O mais conhecido deles o Dial-Up pois um programa que vem instalado junto com o sistema operacional Windows. Os programas de comunicao permitem que informemos um nmero de telefone a ser discado, um nome de usurio e uma senha. Este programa ento efetua uma ligao telefnica para o nmero indicado (nmero do provedor) e solicita uma permisso de acesso para o usurio e senha indicados. Se o usurio e a senha forem vlidos, o provedor estabelece a conexo com o seu computador e lhe permite acesso internet.

- 11 -

Depto. Processamento de Dados

Criao de Pginas HTML

1.5

TIPOS DE CONEXES COM A INTERNET

Para que um computador esteja ligado internet, ele precisa estabelecer uma conexo com um computador que lhe de acesso espinha dorsal da internet. Esse computador chamado provedor de acesso e existem duas formas de estabelecermos uma conexo com o provedor. 1.5.1 Acesso Discado Conexes realizadas em modo discado so feitas a partir de uma linha telefnica (como as que temos em casa). Esse tipo de conexo utilizado por usurios caseiros e por empresas de pequeno e mdio porte. 1.5.2 Acesso Dedicado Conexes realizadas em modo dedicado so feitas a partir de uma linha telefnica privada de dados, que chamamos de LP, que conecta o computador ou uma rede diretamente ao provedor. Esse tipo de conexo utilizado por empresas, condomnios, escolas.

- 12 -

Depto. Processamento de Dados

Criao de Pginas HTML

2. Introduo ao HTML
HTML (Hypertext Markup Language) significa Linguagem de Marcao de Hipertexto. Esta uma linguagem dedicada construo de pginas Web. O HTML um tipo de documento que contm como caracterstica principal a presena de hipertextos, ou seja, clicando num texto marcado possvel acessar outros textos, geralmente com assuntos relacionados. Os documentos HTML so arquivos escritos em ASCII - texto. Podem ser criados em qualquer editor de texto (vi, emacs, edit, notepad, etc.), como tambm em editores especficos (FrontPage, Composer, etc.).

2.1

MARCAES (TAGS)

O HTML visa fornecer uma formatao do texto e ligao entre vrias pginas. Para realizar essas caractersticas, o HTML possui alguns comandos conhecidos como marcaes ou simplesmente tags. Uma marcao ou tag informa como o texto dever ser exibido. As marcaes do HTML (tags) so iniciadas com o sinal < (o smbolo de "menor que") seguido pelo nome da marcao e fechadas pelo sinal > (o smbolo de maior que"). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho</H1>. O smbolo que termina uma determinada marcao igual quele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de cabealho e </H1> avisa que o cabealho acabou. H excees a esse funcionamento em pares das marcaes. Por exemplo, a que indica um final de pargrafo: <P> . No necessita de uma correspondente: </P>. A marcao que indica quebra de linha - <BR> - tambm no precisa de uma correspondente, e outras tais como <HR> e <LI>. Como exemplos de marcaes comumente usadas temos: <TITLE> (e a correspondente </TITLE>), especificam o ttulo de um documento. <H1> (e a correspondente </H1>), indica a aparncia de um cabealho. <P> a marcao para final de pargrafo.

- 13 -

Depto. Processamento de Dados

Criao de Pginas HTML

2.2

CRIANDO DOCUMENTOS HTML

Todo documento para internet deve comear informando que um documento HTML atravs das tags <HTML> e </HTML>. Entre estas tags dever estar todo o texto da pgina, bem como suas respectivas tags de formatao. Para organizar o texto da pgina, possvel definir o texto que ser referente ao cabealho atravs das tags <HEAD> e <HEAD> e o corpo do texto atravs das tags <BODY> e </BODY>. Estrutura Bsica de uma pgina HTML

<HTML> <HEAD> <TITLE> Ttulo da Home Page </TITLE> </HEAD> <BODY>


Aqui voc insere textos, imagens, tabelas, etc.

</BODY> </HTML>

Observe o documento a seguir:

- 14 -

Depto. Processamento de Dados

Criao de Pginas HTML

<HTML> <HEAD> <TITLE>Exemplo de HTML simples</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho</H1>
Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<P> E este o segundo.<P> </BODY>

</HTML>

Como podemos observar nos exemplos anteriores, a pgina possui duas partes: o cabealho (HEAD) e o corpo do documento (BODY). Os atributos do cabealho devem ser inseridos entre as tags <HEAD> e </HEAD>. Por exemplo, temos os seguintes: <TITLE> Ttulo da pgina </TITLE> ttulos do browser. insere o ttulo que aparecer na barra de insere a

<META NAME=Description CONTENT=Descrio da pgina> descrio da pgina que aparecer nos sistemas de buscas.

A tag <BODY> determina onde comea e termina o corpo do documento. Nessa tag possvel determinar algumas caractersticas do texto, como cor de escrita e background, cor do texto referente uma ligao a outro texto (link) e possvel tambm definir caractersticas para o documento como, por exemplo, uma imagem de fundo para a pgina. Veja a linha de definio do corpo da pgina abaixo: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" BACKGROUND="fundo.gif" LINK="#EEEEEE" ALINK="#EEEEEE" VLINK="#EEEEEE">

- 15 -

Depto. Processamento de Dados

Criao de Pginas HTML

... Texto da Pgina ...

</BODY> Dentro da tag <BODY>, esto definidas caractersticas que sero aplicadas no texto que estiver entre as tag de inicio e fim do corpo do documento HTML. As caractersticas definidas acima so: BGCOLOR ="valor" - Cor do fundo da pgina TEXT ="valor" - Cor do texto padro BACKGROUND="fundo.gif" - Imagem a ser usada como pano de fundo da pgina LINK ="valor" - Cor dos links ALINK ="valor" - Cor dos links acionados VLINK ="valor" - Cor dos links j visitados Os valores para as cores devem ser escritos no padro Hexadecimal. Para obter uma lista de cores Hexadecimais consulte o Anexo I.

2.3
1)

ATIVIDADES PARA FIXAO


Execute o editor notepad (Bloco de Notas) e digite as seguintes linhas:

<HTML> <HEAD> <TITLE>Curso de Informtica - Criao de Pginas para Internet</TITLE> </HEAD> <BODY>
Seja Bem-Vindo programao HTML !!!

</BODY> </HTML>
2) Salve o documento acima com o nome Primeiro.HTML e execute essa Pgina em um browser.

- 16 -

Depto. Processamento de Dados

Criao de Pginas HTML

3) 4) 5)

Perceba em que local do seu browser aparecem os textos indicados nas tags <TITLE> e <BODY>. Altere o seu documento para que o texto do corpo do arquivo seja exibido na cor Vermelha (#FF0000). Altere o seu documento para que a cor de fundo seja Amarela (#FFFF00).

- 17 -

Depto. Processamento de Dados

Criao de Pginas HTML

3. Formatao de Texto
A interpretao de um arquivo HTML no se d da mesma forma que a interpretao de um arquivo de um editor de texto. Ao contrrio dos editores de texto, o browser no reconhece o pressionamento da tecla <enter> dentro de um arquivo HTML como uma quebra de linha. Toda a formatao de texto, quebra de linha, centralizao de pargrafo deve ser realizada atravs de tags criadas para esse propsito. Podemos aplicar diversas formataes ao texto. Para alterar o tipo da letra, cor e tamanho, utilizamos a tag <FONT> e </FONT> e podemos determinar os atributos desejados da seguinte forma: <FONT COLOR = nome_cor > Texto </FONT> <FONT FACE = tipo_letra > Texto </FONT> , <FONT SIZE =+n >Texto </FONT> , onde n seria o incremento ao tamanho original. Os trs comandos acima podem ser representador por uma nica tag <FONT> da seguinte forma: <FONT COLOR = nome_cor FACE = tipo_letra SIZE =+n > Texto </FONT> O parmetro COLOR permite especificar a cor da letra que ser aplicada ao texto. Veja a tabela de cores no Anexo I. O parmetro FACE permite que seja escolhida uma forte diferenciada para o texto. Vrias fontes podem ser especificadas, dessa forma o browser verifica da lista de possveis fontes qual a primeira que est disponvel no computador e a utiliza. Para especificar vrias fontes basta separa-las por vrgula. O parmetro SIZE permite especificar o tamanho da fonte a ser usado para o texto. Podem ser especificados nmeros de 1 at 7, sendo o padro o nmero 3. Caso utilizemos o sinal de adio (+) antes do nmero, estaremos indicando que esse nmero deve ser acrescido no tamanho atual da fonte. Em relao ao tamanho da letra, ainda temos as tags <H1> e </H1> que podem variar em at 6 nveis. As tags H* so normalmente utilizadas para especificar ttulos ou nveis de cabealho (Header).

<H1> Tamanho H1</H1> <H2> Tamanho H2</H2>

- 18 -

Depto. Processamento de Dados

Criao de Pginas HTML

<H3> Tamanho H3</H3> <H4> Tamanho H4</H4> <H5> Tamanho H5</H5> <H6> Tamanho H6</H6>

h6, h5,h4, h3 ,

h2 ,

h1

Veja a seguir uma tabela de outros estilos que podem ser aplicados a um texto:

TAG
<B> Texto </B> <I> Texto </I> <TT> Texto </TT>

Efeito
Aplica o estilo negrito (Bold) Aplica o estilo Itlico Aplica o estilo Typewriter deixando o texto com espaamento regular como de uma mquina de escrever Aplica o estilo sublinhado Reduz a fonte do texto Similar ao negrito ( <B> ) Aumenta a fonte e aplica o estilo negrito Aplica o estilo sobrescrito Aplica o etilo subscrito Aplica o estilo piscante

<U> Texto </U> <SMALL> Texto </SMALL> <STRONG> Texto </STRONG> <BIG> Texto </BIG> <SUP> Texto </SUP> <SUB> Texto </SUB> <BLINK> Texto </BLINK>

Para alinhar o texto pgina, contamos com as seguintes tags:

TAG <CENTER> <BR> <P>

Efeito
Centraliza o texto em relao pgina Quebra de linha, iniciando o texto seguinte na linha logo abaixo Fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar outro pargrafo

- 19 -

Depto. Processamento de Dados

Criao de Pginas HTML

<HR>

Rgua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos

WIDTH SIZE <PRE>

_% comprimento. Ex. width=50% _ espessura do trao. Ex. size=6

Respeita a formatao original do texto inserido na pgina

A marcao <BR> faz uma quebra de linha sem acrescentar espao extra entre as linhas. Veja a diferena do uso de <P> e <BR> nos exemplos a seguir:

<HTML> <BODY> <H1>Utilizando p</H1>


Vamos separar esta sentena com marcao de pargrafo.<P> Para verificar a diferena.

<HR> <H1>Utilizando br</H1>


Diferena quando separamos duas linhas utilizando<BR> a marcao de quebra de linha<BR> Diferena quando separamos duas linhas utilizando<BR> a marcao de quebra de linha<BR> Deu pra notar?

</BODY> </HTML>

Veja a diferena no uso das duas notaes:

- 20 -

Depto. Processamento de Dados

Criao de Pginas HTML

- 21 -

Depto. Processamento de Dados

Criao de Pginas HTML

4. Criando Listas
A utilizao de listas em um documento HTML pode facilitar a organizao e at a navegao pelo seu site. Podemos utilizar listas para montar menus ou para montar um sumrio do contedo de suas pginas e permitir ao usurio acessar diretamente cada uma das partes que compe a sua pgina. Existem basicamente trs formatos de listas. As no-numeradas, as numeradas e as de definio.

4.1

Listas No-Numeradas

As listas no-numeradas ou no ordenadas so aquelas que contm uma srie de itens indicados por smbolos, no por nmeros. Para criar uma lista no numerada, utilizamos a tag <UL> (Unordered List) Para indicar que desejamos criar uma lista no numerada, devemos colocar todos os itens dessa lista entre as tags <UL> e </UL>. Cada item da lista deve ainda ser precedido da tag <LI>(List Item). necessrio fechar a tag <LI> com a tag </LI>, porm essa uma boa prtica. Abaixo o exemplo de uma lista com dois itens: No

<HTML> <BODY> <H1>Vai aparecer assim...</H1> <UL> <LI> mas </LI> <LI> bananas </LI> </UL> </BODY> </HTML>

4.2

Listas Numeradas

As listas numeradas so aquelas que apresentam uma numerao crescente diante de cada elemento que a compe. Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto pela utilizao da marcao <OL> (Ordered List) ao

- 22 -

Depto. Processamento de Dados

Criao de Pginas HTML

invs da marcao <UL> (Unordered List). Os itens so identificados utilizando-se a mesma notao <LI> (List Item). Abaixo temos um exemplo de uma lista numerada:

<HTML> <BODY> <H1>Vai aparecer assim...</H1> <OL> <LI> laranjas </LI> <LI> pras </LI> <LI> uvas </LI> </OL> </BODY> </HTML>

4.3

Listas de Definio

Listas de definies consistem em destacar textos de acordo com o recuo. Utilizamos as tags <DT> (Definition Title) e <DD> (Definition Detail). As tags <DL> (Definition List) e </DL> definem a regio onde ser aplicada a lista de definio.

<DL> <DT> URL <DD> Uniform Resource Locator (URL)/Localizador Uniforme de Recursos o que o WWW usa para encontrar a localizao de arquivos e documentos (e outras coisas) nos computadores da Internet. Os browsers apresentam a URL dos documentos que esto sendo mostrados na tela. <DT> Hyperlink <DD> uma ligao hipertexto, ou seja, so os lugares da pgina onde o mouse vira "dedinho" e, quando voc clica, remetido para outro local, outra parte do mesmo documento ou outro documento. O uso abreviou o termo para Link. </DL>

- 23 -

Depto. Processamento de Dados

Criao de Pginas HTML

4.4

Listas Intercaladas

As listas descritas acima podem ser intercaladas ou encadeadas podendo oferecer uma certa flexibilidade ao usurio. Utilizamos esse tipo de recurso quando precisamos expressar hierarquia. Exemplo:

<HTML> <BODY> <H1>Vai aparecer assim...</H1>


<UL> <LI> Pases da Amrica do Sul: <UL> <LI> Brasil <LI> Paraguai </UL> <LI> Um pas da Europa: <UL> <LI> Espanha </UL>

</UL> </BODY> </HTML>

- 24 -

Depto. Processamento de Dados

Criao de Pginas HTML

5. Inserindo Imagens
Inserir imagens em uma pgina HTML uma tarefa relativamente fcil, porm requer alguns requisitos bsicos. O formato da imagem , talvez, o requisito mais importante a ser considerado. Ela deve estar em formato GIF ou JPG. No incio da utilizao de imagens na internet, o formato GIF se tornou muito popular, porm, hoje em dia o formato JPG tomou o seu lugar por apresentar arquivos com um tamanho menor ao mesmo arquivo em verso GIF. Comparado com o formato BMP, um arquivo JPG pode oferecer uma reduo de tamanho de at dez vezes.

5.1

Manipulando Imagens

Para a insero de imagens, usamos a tag <IMG> com o atributo SRC (Source). Atualmente, as imagens mais usadas so: GIF, JPG e PNG. Exemplo: <IMG SRC=nome_da_imagem.gif> Veja alguns outros atributos que podem ser configurados para uma imagem: Atributo na tag IMG Caracterstica Especifica um texto alternativo que descreve a imagem. Esse texto ser exibido caso a imagem no possa ser exibida e ser exibido tambm quando o cursor do mouse repousar sobre a imagem funcionando, neste caso, como ToolTip. Especifica, em pixel, a altura da imagem. Especifica, em pixel, a largura da imagem. Especifica, em pixels, a largura da borda da imagem. Especifica o alinhamento do texto em relao imagem que pode ser: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. Especifica, em pixels, o espao que deve ser deixado em branco nas laterais da imagem. Especifica, em pixels, o espao que deve ser deixado em branco na parte superior e inferior da imagem. Especifica que a imagem um mapa de imagens.

ALT="texto"

HEIGHT = "valor" WIDTH = "valor" BORDER = "valor" ALIGN = valor


HSPACE=valor

VSPACE=valor

ISMAP

Veja abaixo alguns exemplos do uso da tag <IMG> <IMG ALIGN=bottom SRC=nome_da_imagem.gif>

- 25 -

Depto. Processamento de Dados

Criao de Pginas HTML

<IMG ALIGN=right SRC=nome_da_imagem.gif> <IMG WIDTH=100 HEIGHT=100 SRC=nome_da_imagem.gif> Ao utilizar o atributo ALING especificando alinhamento TOP, MIDDLE ou BOTTON teremos o seguinte efeito do texto com relao imagem:

TOP

MIDDLE

BOTTOM

Devemos tomar uma srie de cuidados ao trabalhar com imagens em nosso documento HTML. Quando inserimos uma imagem, o texto subseqente a ela ser colocado na mesma linha, ao lado o texto e nem sempre isso desejvel. Para que a nossa imagem aparea sozinha em uma linha, devemos utilizar a tag de quebra de linha <BR> ou a tag de finalizao de pargrafo <P> logo aps a especificao da tag da imagem. Podemos tambm centralizar a imagem na linha do documento HTML colocando a tab <IMG> entre as tag <CENTER> e </CENTER>.

5.2

GIF Intrelaado (Interlaced Gif)

Quando uma pgina est sendo transmitida, as imagens gif definidas como interlaced so carregadas gradualmente, ou seja, o usurio consegue visualizar a imagem toda, e assim, com a progresso da transmisso a resoluo da imagem se torna mais definida. Sem essa caracterstica, a imagem transmitida em blocos, sendo que o usurio s poder ter uma noo da imagem toda quando a transmisso finalizar. Dependendo da resoluo da imagem, haver diferena de nvel de resoluo final em um arquivo interlaced no padro gif89a ou gif87a. De um modo geral, o formato gif87a oferece melhor resoluo para arquivos "interlaced". Criando um Arquivo Interlaced com LVIEW PRO Para definir um arquivo "gif" como interlaced, selecione o menu OPTIONS e ative a opo SAVE GIF's INTERLACED. Caso voc observe perda de resoluo na imagem, salve-a no padro gif87a.

5.3

Imagens Transparentes

O formato gif89a permite que se defina que uma cor em um arquivo fique transparente, dessa forma, teremos uma imagem com fundo transparente permitindo que apenas o desejo seja visto e no o seu fundo.

- 26 -

Depto. Processamento de Dados

Criao de Pginas HTML

Veja a diferena nas duas imagens abaixo: Transparente Fundo normal

Criando Imagens Transparentes com LVIEW PRO 1. Selecione o menu Retouch 2. Neste menu, escolha a opo Color Depth 3. Defina como Palette Image e clique em OK 4. Selecione o menu Options 5. Escolha Background Color 6. Clique no boto Dropper 7. O curso vai ficar com a aparncia de um conta gotas 8. Clique com o cursor sobre a cor que voc deseja que fique transparente 9. Salve a imagem como gif89a (file => Save as)

Ateno, voc s ir visualizar a transparncia da imagem ao exib-la com o browser. Na tela do Lview a aparncia do arquivo no alterada.

5.4

Imagens Sensveis

Imagens sensveis ou mapas clicveis so imagens que contm vrios links associados a elas. Uma aplicao comum para este recurso a utilizao de mapas geogrficos em que, ao se clicar em cada regio/rea/cidade, ser obtido um arquivo diferente. Passo a Passo Para criar uma imagem sensvel preciso: 1. Mapear as coordenadas do arquivo imagem, gerando um arquivo do tipo .map

- 27 -

Depto. Processamento de Dados

Criao de Pginas HTML

2. Copiar o arquivo .map para o seu servidor 3. Atualizar na rea do servidor www a existncia do novo .map (normalmente, no arquivo imagemap.com, que se encontra no diretrio /usr/local/etc/httpd/conf no Unix) 4. Inserir o arquivo em uma pgina, incluindo a extenso ismap junto imagem, da seguinte forma: <img src="nome_do_arquivo.gif" ismap> 5. Fazer uma ncora da imagem para o programa que interpreta mapas no servidor - imagemap -, com a identificao do mapa a ser associado a esta imagem. Exemplo: <a href="/cgi-bin/imagemap/mapa1"><img src="arquivo.gif"></a>

Gerando o Arquivo .MAP com MAPEDIT FOR WINDOWS 1. Selecione no menu file a opo open/create 2. Defina o tipo de servidor como (NCSA, Apache, ...) 3. Na janela GIF Filename localize o arquivo imagem que voc quer mapear (use o boto de browse para chegar at ele, se estiver no PC) 4. Digite na janela Map Filename o nome que voc deseja dar ao arquivo .map 5. Clique ok. O Mapedit vai informar que o arquivo .map no existe e pedir confirmao para sua criao. 6. Em seguida, o arquivo imagem que foi especificado ser exibido na tela do Mapedit 7. No menu tools, selecione o formato da primeira rea que voc quer mapear (polgono, crculo ou retngulo) 8. Mantendo o boto esquerdo do mouse pressionado, delimite a rea que voc quer mapear e clique no boto direito do mouse. 9. Surgir uma janela de dilogo em que voc deve inserir a URL que deseja associar quela rea e, opcionalmente, comentrios. 10. Repita operao semelhante at concluir o mapeamento completo da imagem. 11. Escolha no menu file a opo Save As 12. Confirme o correto formato do arquivo .map e o nome do arquivo.

- 28 -

Depto. Processamento de Dados

Criao de Pginas HTML

Copiando .MAP para o Servidor O arquivo .map referente a esta imagem dever estar armazenado juntamente com as suas pginas e imagens a serem tornadas disponveis no WWW. interessante criar um subdiretrio no servidor exclusivamente para armazenar os arquivos .map a serem utilizados.

Atualizando o .MAP no IMAGEMAP.CONF Uma vez copiado o arquivo .map para o servidor, para que ele funcione necessrio inserir sua localizao em um arquivo chamado imagemap.conf este o arquivo consultado no servidor para interpretar qualquer imagem sensvel. O imagemap.conf um arquivo texto que se encontra na rea de configurao do servidor. Por isso, normalmente s o administrador da mquina ter acessso a ele . Basta ento solicitar ao administrador que atualize o imagemap.conf toda vez que um novo .map for criado O imagemap.conf est localizado no diretrio /usr/local/etc/httpd/conf e tem a seguinte aparncia: # # Mapeamento de imagens # # ex do rio #backbone: /data/httpd/htdocs/dpd/backbone.map #wood : /home/servicos/httpd/htdocs/info/imagem-clicavel/wood.map Brasil : /is/www/SVI/Brasil.map BRnorte : /is/www/SVI/BRnorte.map BRnordeste : /is/www/SVI/BRnordeste.map BRsudeste : /is/www/SVI/BRsudeste.map BRcentro : /is/www/SVI/BRcentro.map BRsul : /is/www/SVI/BRsul.map #clique : /home/servicos/httpd/htdocs/ct/hdoc/clique/mapa1.map wood3 : /is/www/mercosul/wood2.map mercosul : /is/www/mercosul/mercosul.map

- 29 -

Depto. Processamento de Dados

Criao de Pginas HTML

Inserindo a Imagem Mapeada na Pgina Para inserir uma imagem mapeada em uma pgina, abra uma ncora apontando para o imagemap na rea de cgi-bin do seu servidor, especifique o nome com que o mapa referente est referenciado no imagemap.conf e insira a imagem no interior da ncora, associando o atributo ISMAP, da seguinte forma: <a href="/cgi-bin/imagemap/mapa1"><img src="brasil.gif" ismap></a> Onde mapa1 o nome utitilizado no arquivo imagemap.conf para referenciar o arquivo .map criado para o arquivo brasil.gif, no exemplo.

- 30 -

Depto. Processamento de Dados

Criao de Pginas HTML

6. Criando Links (Internos e Externos ao Documento)


A principal caracterstica do HTML a capacidade de interligar partes de um texto (e tambm imagens) a outros documentos. Os clientes exibem em destaque estas reas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata de um link, ou interligao, no hipertexto.

6.1

Interligando Documentos

A marcao <A>, que define o ponto de partida para os links, denominada de ncora. Para incluir uma ncora em seu documento: 1. Inicie a ncora com <A . (H um espao depois de A.) 2. Especifique o documento a ser HREF="filename" seguido do sinal: > interligado, inserindo parmetro

3. Insira o texto que vai funcionar como link no documento corrente 4. Anote a marcao de final da ncora: </A>.

Um exemplo de referncia a um hipertexto: <A HREF="ListaCidades.html"> Cidades </A>

A palavra Cidades' definida como o marcador do link para se chegar ao documento ListaCidades.html, que est no mesmo diretrio do documento corrente. Ou seja, "Cidades" aparece em negrito e se eu clicar nessa palavra ser exibido o documento apontado - ListaCidades.html

6.2

Interligando Documentos em Outros Diretrios

possvel interligar documentos em outro diretrio especificando-se o caminho relativo a partir do documento corrente, em relao ao que est sendo interligado. Por exemplo, um link para o arquivo SaoPaulo.html localizado no subdiretrio Estados seria assim:

<A HREF="Estados/SaoPaulo.html"> So Paulo</A>

- 31 -

Depto. Processamento de Dados

Criao de Pginas HTML

Estes so dos denominados links relativos. tambm possvel usar o caminho completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padro do sistema UNIX. Importante: se voc quiser referenciar um diretrio a partir do raiz do seu servidor www, inicie a notao com /. Isto , se voc tiver uma notao desta forma <A HREF=/imagens/incon1.gif>, significa que o arquivo incon1.gif dever ser buscado no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor WWW.

6.3

Ligando URLs

O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localizao de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e, gopher, WAIS), o endereo do servidor, e a localizao do arquivo. A estrutura do comando a seguinte:

protocolo://servidor[:port]/path/filename

Onde protocolo uma das seguintes definies:

Protocolo file http gopher WAIS news telnet

Descrio
um arquivo no seu sistema local, ou servidor de ftp um arquivo em um servidor World Wide Web um arquivo em um servidor Gopher um arquivo em um servidor WAIS um Usenet newsgroup uma conexo Telnet

Por exemplo, para incluir um link para o HTML Beginners Guide, em um documento, deve ser usada a seguinte tag:

<A HREF = "http://www.altavista.com"> Altavista </A>

- 32 -

Depto. Processamento de Dados

Criao de Pginas HTML

Ou ainda: <A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>

O que torna a sentena NCSA's Beginner's Guide to HTML'' um link para tal documento. Para mais informaes sobre URLs, veja em WWW Names and Addresses, URIs, escrito por pessoas do CERN, disponvel em URLs, URNs, http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html.

A Beginner's Guide to URLs, localizado no menu de Help do NCSA Mosaic, e disponvel em http://www.ncsa.uiuc.edu/demoweb/url-primer.html

6.4

Ligando sesses especficas em outro documento

Para fazer links com sesses de outros documentos o processo o mesmo da sesso anterior. Faz-se uma ncora normalmente, e apenas acrescentado, aps a url do documento de destino, o sinal # e uma palavra, ou identificador. O identificador a palavra "enderecos", exemplo:

Por exemplo: <a href="exemplo.html#enderecos">link</a>

No texto do documento apontado pela ncora, deve-se identificar qual a sesso corresponde ao ponto indicado pela palavra volta. Utiliza-se, por exemplo, uma notao que reconhea a palavra/identificador informando no ponto de partida no documento exemplo.html Pode ser: <a name="enderecos"> Endereos Eletrnicos </a>.

6.5

Interligando sesses em uma pgina

HTML permite que se faam ligaes entre diferentes trechos de um documento. Voc pode apontar uma palavra ou trecho de um texto utilizando uma ncora de nome (named anchor). Este recurso bastante usado na gerao de ndices de contedo no incio de uma pgina. O passo a passo :

- 33 -

Depto. Processamento de Dados

Criao de Pginas HTML

1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo item1-, precedido do caracter #,da seguinte forma:

Veja o incio da <a href="#item1">segunda sesso</a>.

2.Defina o "ponto de chegada", atribuindo a ele uma ncora de nome, com o nome correspondente ao do ponto de partida, assim:

Esta <a name="intem1">segunda sesso</a> trata de..

- 34 -

Depto. Processamento de Dados

Criao de Pginas HTML

7. Criando Tabelas
Para criarmos tabelas, utilizamos vrias tags para determinarmos o incio e fim de uma tabela, quantas linhas, quantas colunas, etc. Em seguida, temos uma lista dos comandos relacionados a criao de tabelas:

<TABLE> </TABLE>

Essas tags servem para indicar a regio que compreende uma tabela. Os demais comandos para criao de linhas e colunas devem aparecer entre <TABLE> </TABLE>. Se omitirmos o atributo BORDER, a tabela ser criada sem as bordas.

<TR> </TR> (Table Row)

Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>. (TR = Table Row).

<TD> </TD> (Table Data)

Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas clulas alinhado a esquerda. <TH> </TH> (Table Header)

Com esta tag, definimos os ttulos de uma tabela. O texto da clula criada com essa tag aparecer em negrito.

Abaixo, temos um exemplo simples: <TABLE BORDER>

<TR> <TD>Itens/Ms</TD> <TH>Janeiro</TH><TH>Fevereiro</TH><TH>Maro</TH> </TR>

- 35 -

Depto. Processamento de Dados

Criao de Pginas HTML

<TR> <TH>Usuarios</TH><TD>80</TD><TD>93</TD><TD>120</TD> </TR>

<TR> <TH>Linhas</TH><TD>3</TD><TD>3</TD><TD>5</TD> </TR>

</TABLE>

Vejamos agora alguns atributos:

<BORDER>

Esse atributo aparece junto a tag <TABLE>. A omisso desse atributo implica numa tabela sem bordas. Ou seja, como j vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas marcaes <TABLE BORDER> </TABLE>. Podemos alterar o tamanho da borda, acrescentando valores: <TABLE BORDER=5> ... </TABLE> <ALIGN>

Este atributo pode ser aplicado a TR,TH e TD, e controla como ser o alinhamento do texto dentro de uma clula, com relao s bordas laterais.

Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar ou alinhar a direita.

Veja o exemplo:

- 36 -

Depto. Processamento de Dados

Criao de Pginas HTML

<TABLE BORDER> <TR> <TD>Primeira clula</TD><TD>Segunda clula</TD><TD>Terceira clula</TD> </TR> <TR> <TD ALIGN=center>centro</TD> <TD ALIGN=left>esquerda</TD> <TDA ALIGN=right>direita</TD> </TR> </TABLE>

<VALIGN>

Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas clulas com relao a borda superior e inferior. Aceita os valores top, middle e bottom <TABLE BORDER> <TD> <TD> Teste para linhamento<BR> com relao a bordas<BR> inferior e superior<BR> </TD> <TD VALIGN=top> TOP </td> <TD VALIGN=middle>MIDDLE</td> <TD VALIGN=botton>BOTTOM</td> </TR> </TABLE>

- 37 -

Depto. Processamento de Dados

Criao de Pginas HTML

<NOWRAP>

Este atributo evita que haja uma quebra de linha dentro de uma clula. Cautela ao utiliz-lo, para no produzir clulas muito largas.

<COLSPAN>

Pode ser aplicado a TH ou TD. Define quantas colunas uma clula poder abranger. Por padro cada clula corresponde a uma coluna, ou seja, COLSPAN=1. Vejamos um exemplo:

<TABLE BORDER> <TR> <TD COLSPAN=3>3colunas</TD><TD>normal</TD><TD>normal</TD> </TR> <TR> <TD>col 1</TD><TD>col 2</TD><TD>col3</TD><TD>col 4</TD><TD>col 5</TD> </TR> </TABLE>

<ROWSPAN>

Este atributo pode ser aplicado a clulas (TH e TD) e define quantas linhas uma mesma clula pode abranger. Assim como na marcao anterior, o padro uma clula corresponder a uma linha. Novamente, vamos ver exemplos: <TABLE BORDER> <TR> <TD ROWSPAN=3>3 linhas</TD> <TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col5</TD> </TR>

- 38 -

Depto. Processamento de Dados

Criao de Pginas HTML

<TR> <TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col 5</TD> </TR> <TR> <TD>col 2</TD><TD>col 3</TD><TD>col4</TD><TD>col 5</TD> </TR> </TABLE>

CELLSPACING=<value>

Este atributo aplicvel marcao TABLE. Como padro, o Netscape 1.1 utiliza espao 2 entre as clulas. Este atributo define o espao entre cada clula na tabela.

<TABLE BORDER CELLSPACING=5> <TR> <TD>teste1</TD> <TD>teste2</TD> <TD>teste3</TD> </TR> <TR> <TD>teste4</TD> <TD>teste5</TD> <TD>teste6</TD> </TR> </TABLE>

CELLPADDING=<value>

Este atributo aplicado tambm marcao TABLE e define a distncia entre o texto e a borda de cada clula. Veja exemplo:

<TABLE BORDER CELLPADDING=8> <TR>

- 39 -

Depto. Processamento de Dados

Criao de Pginas HTML

<TD>teste1</TD> <TD>teste2</TD> <TD>teste3</TD> </TR> <TR> <TD>teste4</TD> <TD>teste5</TD> <TD>teste6</TD> </TR> </TABLE>

WIDTH=<value or percent>

Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser associado um valor em "pixels" (ponto em tela grfica), como um valor percentual. Ou seja, determina o quanto da tela uma tabela ou clula de tabela dever ocupar. Vamos ver os exemplos: <TABLE BORDER WIDTH=50%> <TR> <TD>segunda</TD> <TD>ter&ccedil;a</TD> <TD>quarta</TD> </TR> <TR> <TD>quinta</TD> <TD>sexta</TD> <TD>s&aacute;bado</TD> </TR> </TABLE>

- 40 -

Depto. Processamento de Dados

Criao de Pginas HTML

8. Frames

O Frame Document um arquivo onde se define a estrutura das janelas (frames) para seu hiperdocumento em HTML. Neste documento as marcaes <BODY> e </BODY> so substitudas por <FRAMESET> e </FRAMESET>. Veja a estrutura bsica abaixo:

<HTML> <HEAD> <TITLE></TITLE> </HEAD>

<FRAMESET ...> <FRAME SRC="URL"> <FRAME SRC="URL"> </FRAMESET>

</HTML> Note que cada frame ser indicado com a tag <FRAME SRC=..>, que dever conter a URL e atributos se necessrio.

8.1

Frameset

Frameset aceita os atributos ROWS e COLS, referentes divises horizontais (como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente s marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: No podem ser utilizadas as marcaes vlidas entre marcaes <BODY></BODY> nem internamente a marcaes FRAMESET, nem antes dela, seno FRAMESET ser ignorada.

- 41 -

Depto. Processamento de Dados

Criao de Pginas HTML

Os atributos do Frameset so: ROWS (<frameset rows=valor, valor, valor...>)

Define divises horizontais entre janelas. Vem sempre acompanhado de valores associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada janela a ser criada dever haver um valor associado. Estes valores devem vir separados por vrgulas. Este valor poder ser: o Numrico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela) deve ocupar. A desvantagem desta notao que no possvel ter controle do valor total de pixels que o cliente do usurio compreende. o Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre somando um valor de 100%. ( o mtodo mais simples) o Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois teros da tela, e o segundo um tero. Exemplos: 1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais larga que as de cima e de baixo: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET ROWS="20%, 60%, 20%"> <FRAME SRC="cell1.html"> <FRAME SRC="cell2.html"> <FRAME SRC="cell3.html"> </FRAMESET> </HTML>

- 42 -

Depto. Processamento de Dados

Criao de Pginas HTML

2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao:

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET ROWS="30, *, 50"> <FRAME SRC="cell1.html"> <FRAME SRC="cell2.html"> <FRAME SRC="cell3.html"> </FRAMESET> </HTML>

COLS (<frameset cols=valor, valor, valor.. >)

Funciona exatamente como a marcao anterior, no entanto, divide a tela em frames ou janelas verticais. Exemplos: Para dividir a tela do browser em trs janelas verticais 1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="20%, 60% ,20%"> <FRAME SRC="cell1.html"> <FRAME SRC="cell2.html"> <FRAME SRC="cell3.html"> </FRAMESET> </HTML>

- 43 -

Depto. Processamento de Dados

Criao de Pginas HTML

2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="200, *, 100"> <FRAME SRC="cell1.html"> <FRAME SRC="cell2.html"> <FRAME SRC="cell3.html"> </FRAMESET> </HTML>

8.2

Frame

A marcao FRAME define cada janela contida em uma rea frameset. Esta marcao no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos possveis: SRC="url" O atributo SRC define a URL que ser exibida em cada frame. NAME="nome_da_janela"

Este atributo utilizado para associar um nome a uma janela. Deve ser usado quando uma janela - frame - for o destino de um link em outro documento (normalmente no mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias urls em outras janelas). Este atributo opcional. Por padro, os frames no tem nome. Importante, o nome_da_janela deve comear por caracter alfanumrico.

MARGINWIDTH="valor"

- 44 -

Depto. Processamento de Dados

Criao de Pginas HTML

Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser um valor absoluto em pixels. O menor valor aceito ser 1. Este atributo opcional, caso no venha definido, o browser usar o seu padro para definir as margens no frame/janela.

MARGINHEIGHT="valor"

Tambm um atributo opcional. Funciona exatamente como o anterior, s que determina as margens superior/inferior em cada frame.

SCROLLING="yes/no/auto"

Novamente, um atributo opcional, que define se uma janela deve possuir barra de rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio. O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser aplicar a barra de rolagem, sempre que necessrio.

NORESIZE

Este atributo no possui valor associado. Quando ele no aparece, o usurio poder alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que todas as janelas possam ter seu tamanho alterado. NORESIZE opcional . Um frame, com todos os atributos definidos, seria escrito assim, por exemplo:

<frame src=http://www.cotuca.unicamp.br name=home marginwidth=5 marginheight=5 scrolling=auto noresize>

8.3

Noframes

Esta marcao possibilita que se crie uma opo de navegao na pgina para quem no possui um browser que entende frames. Esta marcao aparece no documento de estrutura "Frame document", e sempre usada em pares (<noframes>.. contedo... </noframes>).

- 45 -

Depto. Processamento de Dados

Criao de Pginas HTML

Quando o acesso for feito atravs de um browser que entenda frames, o que estiver entre as marcaes "noframes" ser simplesmente ignorado. Internamente a uma rea "noframes" dever ser usada a estrutura padro de documentos html (<head> </head>, <title> </title> <body> </body>, etc...). Um exemplo: <HTML> <HEAD> <TITLE>Teste, uso de frames</TITLE> </HEAD> <FRAMESET ROWS="15%, 85%"> <NOFRAMES> <BODY BGCOLOR="#000000" TEXT="#ffff00" LINK="#ff0000" > Bem-vindo a uma pgina de teste.<P> Para acess-la, voc deve utilizar a verso 2.0 ou acima do <I>browser</I><A HREF="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</A> <HR> </BODY> </NOFRAMES> <FRAMESET COLS="25%, 75%"> <FRAME NAME="1" SRC="teste1.htm" NORESIZE> <FRAME NAME="2" SRC="teste2.htm" NORESIZE> </FRAMESET> <FRAMESET COLS="30%, 70%"> <FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm"> <FRAMESET ROWS="65%, 35%"> <FRAME NAME="4" SRC="teste4.htm" NAME="chat"> <FRAME NAME="5" SRC="teste5.htm"> </FRAMESET>

- 46 -

Depto. Processamento de Dados

Criao de Pginas HTML

</FRAMESET> </FRAMESET> </HTML>

Browser (Mosaic) no l frames

Browser (Netscape ou IE) l frames

8.4

Intercalando Frameset - exemplos

Para tornar mais claro como se constroem mltiplas e intercaladas janelas - divises horizontais e verticais - utilizando marcaes de frames, seguem abaixo dois exemplos de construo de documentos com mltiplas janelas. Exemplo 1:
<HTML> <HEAD> <TITLE>Ttulo</TITLE> </HEAD> <FRAMESET ROWS="30%, 70%"> <FRAMESET COLS="33%, 33%, 33%"> <FRAME SRC=""> <FRAME SRC=""> <FRAME SRC=""> </FRAMESET> <FRAMESET COLS="50%, 50%"> <FRAME SRC=""> <FRAME SRC=""> </FRAMESET> </FRAMESET>

- 47 -

Depto. Processamento de Dados


</HTML>

Criao de Pginas HTML

Exemplo 2:
<HTML> <HEAD> <TITLE>Ttulo</TITLE> </HEAD> <FRAMESET ROWS="15%, 85%"> <FRAME SRC="teste5.htm"> <FRAMESET COLS="25%, 75%"> <FRAMSE SRC="teste4.htm"> <FRAMESET ROWS="85%, 15%"> <FRAME SRC="teste3.htm"> <FRAME SRC="teste2.htm"> </FRAMESET> </FRAMESET> </FRAMESET </HTML>

8.5

Links entre frames

A marcao TARGET, permite que se controle em qual janela um link especfico ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espcie de indce do servio de informao e outra janela em que a navegao propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel durante toda a consulta. Para utilizar este recurso voc dever: 1. Atribuir um "name" a cada frame em seu "frame document" (name="valor"). 2. No documento onde ser criado um link, que vai aparecer em outra janela, ao criar o link, acrescentar a marcao target="valor"" ncora, da seguinte forma: <a href="URL" target="valor">

Onde este valor idntico quele associado marcao name no frame document.

- 48 -

Depto. Processamento de Dados

Criao de Pginas HTML

Exemplo:

O frame document dever ser escrito assim:


<HTML> <HEAD> <TITLE>Ttulo</TITLE></HEAD> <FRAMESET ROWS="80%, 20%"> <FRAME NAME="navega" SRC="teste3.htm"> <FRAME SRC="barra.htm"> </FRAMESET> </HTML>

O documento que contm o ndice navegao (barra.htm), ser assim:


<HTML> <HEAD> <TITLE>Ttulo</TITLE> </HEAD> <BODY> <A HREF="http://www.cotuca.unicamp.br/" TARGET="navega"> [link para o cotuca]</a> <A HREF="http://www.cotuca.unicamp.br/" TARGET="navega"> [link para o cotuca]</a> <A HREF="http://www.cotuca.unicamp.br/" target="navega"> [link para o cotuca]</a> </BODY> </HTML>

de

- 49 -

Depto. Processamento de Dados

Criao de Pginas HTML

9. Formulrios
Um formulrio comea com a tag <FORM> e termina com </FORM>, porm outros itens devem ser especificados: Primeiro, o formulrio precisa saber como enviar a informao para o servidor. Existem dois mtodos, GET e POST.

METHOD="GET" A maioria dos documentos HTML recuperada a partir da requisio de uma nica URL ao servidor. Assim, um formulrio que utilize este mtodo, envia toda sua informao ao final da URL ativada.

METHOD="POST" Este mtodo transmite toda a informao fornecida via formulrio, imediatamente aps a URL ativada. Ou seja, quando o servidor recebe uma ativao de um formulrio utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informao. Este o melhor mtodo.

Segundo, o formulrio precisa saber para onde enviar a informao. Esta a URL sendo ativada a partir do formulrio, e ela referenciada atravs da marcao ACTION. Esta URL em geral aponta para um script CGI que ir receber e decodificar os resultados. Lembre-se que se voc est referenciando um script que reside no mesmo servidor do formulrio, voc no precisa incluir a URL completa.

ACTION="/cgi-bin/post-query" para um script no seu servidor ACTION="http://www.cotuca.unicamp.br/cgi-bin/post-query" para um script no servidor do CR/DF Aps a construo destas marcaes, seu formulrio geralmente ter a seguinte estrutura:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Marcaes de campos de entrada e HTML em geral </FORM>

- 50 -

Depto. Processamento de Dados

Criao de Pginas HTML

Observe que este formulrio utiliza o mtodo POST e envia as informaes digitadas para um script local chamado post-query no diretrio /cgi-bin do servidor. Outra informao importante: cada marcao de entrada em um formulrio tem uma opo NAME associada, de tal forma que o script saiba qual o nome, isto , como chamar cada valor digitado. Certamente voc pode definir mais de um campo de entrada textual ou menu dentro de um formulrio, mas certifique-se de que cada um possui um nome diferente.

9.1

Entrada de Texto

9.1.1 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. Opes:

VALUE="" (OPCIONAL)

Utilizando a marcao VALUE voc especifica que texto aparecer no campo quando o formulrio for exibido.

SIZE="" (OPCIONAL) Esta marcao altera o tamanho deste campo exibido na tela.

Obs.: o usurio sempre poder digitar mais caracteres do que o tamanho do campo na tela, pois o texto ir se deslocar a esquerda dentro do campo.

MAXLENGTH="" (OPCIONAL)

Se voc deseja limitar o nmero de caracteres que o usurio pode digitar, basta usar esta marcao. O formulrio ir emitir um bip de erro se o usurio tentar digitar alm do permitido em MAXLENGTH.

- 51 -

Depto. Processamento de Dados

Criao de Pginas HTML

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Qual o seu primeiro nome?


<INPUT TYPE="text" NAME="primeiro_nome" VALUE="Joo" SIZE="10" MAXLENGTH="15">

</FORM>

Observaes: o O valor informado em NAME deve utilizar sublinhado em vez de espaos em branco. Inserir espaos em branco nestes nomes pode causar problemas no servidor na decodificao dos valores informados.
o

Se seu formulrio possui apenas um campo de entrada textual, ao teclar ENTER neste campo o formulrio ser submetido, como se o usurio tivesse acionado o boto SUBMIT.

9.1.2 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 ( *). Opes: VALUE="" (OPCIONAL) A marcao VALUE especifica um valor default para este campo.

SIZE="" (OPCIONAL) Esta troca o tamanho do campo de password exibido na tela.

- 52 -

Depto. Processamento de Dados

Criao de Pginas HTML

MAXLENGTH="" (OPCIONAL) Limita o nmero de caracteres que o usurio pode informar como password.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Informe sua senha de acesso (8 caracteres):


<INPUT TYPE="password" VALUE="xpto" NAME="sua_senha" SIZE="8" MAXLENGTH="8">

</FORM>

Observaes: o Se voc pretende utilizar MAXLENGTH para limitar o nmero de caracteres informados, tenha certeza de especificar um SIZE com o mesmo tamanho, para fornecer ao usurio o sentimento de qual a largura do campo. Esta regra no foi utilizada no primeiro exemplo, que possui SIZE igual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar nos ltimos 5 caracteres caso o valor informado possua mais do que 10 caracteres. o Mesmo que o valor default VALUE esteja representado por asteriscos, o usurio pode visualizar o seu valor atravs da recuperao do fonte do hiperdocumento em HTML (uma opo comum na maioria dos clientes WWW). 9.1.3 Entrada oculta - HIDDEN Alm da marcao PASSWORD com um valor VALUE default, possvel "esconder" informao passada dentro de blocos FORM com uma marcao HIDDEN. Esta informao recebida pelo script de decodificao no servidor, mas no diretamente exibida ao usurio no formulrio. Opes: VALUE="" (OBRIGATRIO)

- 53 -

Depto. Processamento de Dados

Criao de Pginas HTML

Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado ao script processador do formulrio.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Voc no pode visualizar nada aqui embaixo. <INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12"> </FORM>

Observao: o Mesmo que o valor especificado em HIDDEN VALUE no seja exibido no formulrio, o usurio pode v-lo atravs da operao de visualizao do fonte do hiperdocumento, da mesma forma como no campo PASSWORD. 9.1.4 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.

COLS="" (OBRIGATRIO) Especifica o nmero de colunas da entrada textual.

Texto default (OPCIONAL)

- 54 -

Depto. Processamento de Dados

Criao de Pginas HTML

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.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Por favor, escreva aqui suas sugestes, dvidas e crticas:<BR> <TEXTAREA NAME="critica" ROWS="3" COLS="40"> Gostaria de obter mais informaes sobre este servidor. Grato. </TEXTAREA> </FORM>

Observao: o O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas definidas em ROWS e COLS.

9.2

Menus

9.2.1 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>. Opes: OPTION (OBRIGATRIO) Especifica uma opo presente no menu.

- 55 -

Depto. Processamento de Dados

Criao de Pginas HTML

VALUE="" (OPCIONAL)

Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo enviado ao servidor.

SELECTED (OPCIONAL)

Por default, a primeira OPTION exibida no menu. Esta marcao estabelece uma opo de menu a ser exibida inicialmente, quando no se deseja que seja a primeira OPTION. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Onde voc pretende fazer turismo nas frias? <SELECT NAME="lugares_para_ver"> <OPTION>Fortaleza <OPTION VALUE="sul">Florianpolis ou Porto Alegre <OPTION>Rio de Janeiro <OPTION SELECTED>Braslia <OPTION VALUE="amazonia">Manaus </SELECT> </FORM>

Observaes: o Se voc possui mais do que 3 ou 4 opes de escolha, e o usurio s pode selecionar uma, ento este elemento de entrada o melhor. As pessoas frequentemente utilizam vrios RADIOBUTTONS, que veremos a seguir.

- 56 -

Depto. Processamento de Dados

Criao de Pginas HTML

o O script decodificador, no servidor, provavelmente apreciar uma nica palavra para VALUE, em vez de mltiplas palavras. Voc sempre pode utilizar sublinhado para separar expresses compostas.

9.2.2 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) 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.

- 57 -

Depto. Processamento de Dados

Criao de Pginas HTML

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Que facilidades de acomodao voc deseja?<BR> <SELECT NAME="opcional" MULTIPLE SIZE="5"> <OPTION>Televiso <OPTION VALUE="casal" SELECTED>Cama de Casal <OPTION>Ar Condicionado <OPTION>Fax <OPTION SELECTED>Modem V.34 <OPTION>Sauna <OPTION>Lavanderia <OPTION>Frigo-Bar </SELECT> </FORM>

Observaes: o Este elemento de entrada bom para listas com muitas opes, porque possvel controlar quantas sero exibidas por vez. o Em alguns clientes WWW, necessrio teclar simultaneamente as teclas CONTROL ou SHIFT para selecionar mltiplos itens.

- 58 -

Depto. Processamento de Dados

Criao de Pginas HTML

9.3

Botes

9.3.1 Botes sim ou no - CHECKBOX Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES perfeita para escolher entre duas opes. Opes:

VALUE="" (OPCIONAL)

Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on" enviado ao script decodificador.

CHECKED (OPCIONAL) Esta marcao define a opo selecionada por default.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> <INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim de notcias. <P> <INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informaes tursticas. </DL> </FORM>

- 59 -

Depto. Processamento de Dados

Criao de Pginas HTML

Observaes: o Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off".
o

Voc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo NAME, mas diferentes VALUES

9.3.2 Botes com opes - RADIO RADIOBUTTONS utilizam uma notao similar a de CHECKBOXES, contudo, apenas uma opo pode ser escolhida. Opes:

VALUE="" (OBRIGATRIO) Especifica o valor da opo a ser enviado para o servidor. Se no for definido, um valor "on" enviado ao script decodificador.

CHECKED (RECOMENDADO) Esta marcao especifica qual boto estar selecionado por default.

Uma vez que uma seleo precisa ser feita, melhor prover uma opo preselecionada.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Suas preferncias na viagem: <DL> <DD>Classe do Bilhete: <INPUT TYPE="radio" NAME="classe" VALUE="eco">econmica <INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva <INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira <DD>Localizao: <INPUT TYPE="radio" NAME="local" VALUE="frente">rea fumante <INPUT TYPE="radio" NAME="local" VALUE="tras">rea no fumante </DL> </FORM>

- 60 -

Depto. Processamento de Dados

Criao de Pginas HTML

Observaes: o Como j foi mencionado, RADIOBUTTONS no so boa escolha para listas com muitos itens, porque o cliente tem problemas para exibir muitos botes. melhor utilizar o menu SELECT. o Uma vez que um boto selecionado, ele no pode ser desmarcado sem selecionar outro boto que possua o mesmo NAME. A seleo default pode ser restaurada com a utilizao do boto RESET, introduzido a seguir. o Se voc utiliza vrios RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o servidor no ser capaz de dizer que boto foi selecionado, uma vez que o valor "on" ser retornado para qualquer um deles.

9.3.3 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 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. Opes: VALUE="" OPCIONAL Especifica o texto a ser exibido no boto. Se no for especificado, os textos default "Reset" e "Submit Query" sero colocados nos botes RESET e SUBMIT, respectivamente.

- 61 -

Depto. Processamento de Dados

Criao de Pginas HTML

NAME="" OPCIONAL

Se NAME for definido em um boto SUBMIT, o formulrio ir transmitir o valor do contedo do elemento VALUE, permitindo que voc tenha mltiplos botes SUBMIT numa espcie de verso simplificada de um RADIOBUTTONS. <FORM METHOD="POST" ACTION="/cgi-bin/donothing"> Qual o seu primeiro nome? <INPUT TYPE="text"><BR> Aperte este boto: <INPUT TYPE="radio" NAME="nada"><BR> <INPUT TYPE="reset" VALUE="Limpa campos"> <INPUT TYPE="submit"> </FORM>

Observaes: o Normalmente, o script decodificador retorna um hiperdocumento aps ele processar a informao do formulrio. o Nem todos os clientes suportam mltiplos botes SUBMIT. melhor utilizar apenas um nico boto SUBMIT para transmitir a informao digitada no formulrio.

- 62 -

Depto. Processamento de Dados

Criao de Pginas HTML

ANEXO I

Tabela de Cores em Hexadecimal


Nome da Cor White Red Green Blue Magenta Cyan Yellow Black Aquamarine Baker's Chocolate Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown Cdigo RGB
#FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033

Nome da Cor Mandarian Orange Maroon Medium Aquamarine Medium Blue Medium Forest Green Medium Goldenrod Medium Orchid Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red Medium Wood Midnight Blue Navy Blue Neon Blue Neon Pink New Midnight Blue New Tan Old Gold
Orange Orange Red

Cdigo RGB
#E47833 #8E236B #32CD99 #3232CD #6B8E23 #EAEAAE #9370DB #426F42 #7F00FF #7FFF00 #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79E #CFB53B #FF7F00 #FF2400

- 63 -

Depto. Processamento de Dados

Criao de Pginas HTML

Dark Green Dark Green Copper Dark Olive Green Dark Orchid Dark Purple Dark Slate Blue Dark Slate Grey Dark Tan Dark Turquoise Dark Wood Dim Grey Dusty Rose Feldspar Firebrick Forest Green Gold Goldenrod Grey Green Copper Green Yellow Hunter Green Indian Red Khaki Light Blue Light Grey Light Steel Blue Light Wood Lime Green

#2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23 #CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6 #32CD32

Orchid Pale Green Pink Plum Quartz Rich Blue Salmon Scarlet Sea Green Semi-Sweet Chocolate Sienna Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan Thistle Turquoise Very Dark Brown Very Light Grey Violet Violet Red Wheat Yellow Green

#DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #99CC32

- 64 -

Depto. Processamento de Dados

Criao de Pginas HTML

ANEXO II

Resumo dos Comandos de Frame

Marcao

Funo / caractersticas

Estrutura Bsica

<html> e </html>

Delimita o "frame document", como em qualquer arquivo html normal.

<head></head>

Define cabea do documento, novamente, como em qualquer arquivo html.

<frameset></frameset>

delimita as janelas a serem usadas no documento. Podem haver vrios frameset intercalados. Controla o comportamente das janelas atravs de seus atributos.

<frame src="URL">

Define cada janela/frame. Normalmente possui uma URL associada. Aceita atributos e valores.

Sintaxe

Para Frameset
<frameset valor, valor"> rows="valor, define quantas linhas - janelas horizontais - e sua ocupao na tela, para cada rea frameset. Aparecero tantos valores quantas forem as janelas. Os valores relativos a cada janela devero ser separados por vrgulas.

Cada valor associado poder ser:

- 65 -

Depto. Processamento de Dados

Criao de Pginas HTML

1. Numrico - em pixels = <frameset rows="30, 50"> 2. Percentual = <frameset rows="25%, 25%, 50%"> Relativo = <"2*,*">;

<frameset valor, valor">

cols="valor,

define quantas colunas - janelas verticais - e sua ocupao da tela. Funciona exatamente como a marcao interior (associao de valores, com as mesmas opes).

Para Frame
<frame SRC="URL"> associa uma url a uma janela

<frame NAME="valor">

associa um nome a uma janela

<frame MARGINWIDTH="valor"> <frame MARGINHEIGHT="valor"> <frame SCROLLING="yes/no/auto">

determina margem direita/esquerda em cada frame

determina margem superior/inferior em cada frame

define presena, ausncia, ou atribuio automtica (pelo browser) de barras de rolagem

<frame NORESIZE >

mantm fixo o tamanho de cada janela/frame

Para Noframes
<noframe></noframe> delimita rea para navegao opcional, destinada a quem usa browser que no entenda 'frame'.Internamente, recebe a marcao <body></body> delimitando o documento, e todas as demais marcaes HTML.

Target
<a target="name"> href="URL" Define a janela em que ser exibido um link ao ser ativado. O name associado dever ser idntico ao name atribudo a janela de destino no frame document.

- 66 -

Depto. Processamento de Dados

Criao de Pginas HTML

GLOSSRIO

TERMO

Significado

ARPANET

Rede que originou a Internet (denominada anteriormente como ARPA Advanced Research and Projects Agency), que interligava as Universidades da Califrnia, Los Angeles, Santa Barbara, Universidade de Utah e Instituto de Pesquisa de Stanford.

Browser

Programa para visualizar pginas HTML.

e-Mail

Mensagem eletrnica

FTP

O Protocolo de Transferncia de Arquivos (ftp) da Internet.

Gopher

Um servidor de informaes dirigido por menus hierrquicos, que representam diretrios e arquivos.

http

Servidor World Wide Web que prov documentos HTML e outros tipos de arquivos e informaes. "HTTP" a sigla de HyperText Transfer Protocol (Protocolo de Transferncia de HiperTexto).

Hyperlink

uma ligao hipertexto, ou seja, so os lugares da pgina onde o mouse vira "dedinho" e, quando voc clica, remetido para outro local, outra parte do mesmo documento ou outro documento. O uso abreviou o termo para Link.

IP

(Internet Procotocol) Endereo (identificao) de computadores na Internet. (Compe o protocolo de rede TCP/IP).

NEWS

Indica um servidor de Usenet News que pode ser acessado remotamente. News prov um sistema para discusso em grupos

- 67 -

Depto. Processamento de Dados

Criao de Pginas HTML

remotamente. News prov um sistema para discusso em grupos mundiais sobre todos os assuntos, tcnicos, cientficos ou no.

Site

Conjunto de pginas HTML relacionadas ao mesmo assunto e interligadas por links.

SSH

Semelhante ao Telnet, porm os dados que so transmitidos so criptografados.

TCP

(Transmission Control Procotol) Procotolo de transmisso de dados. (Compe o protocolo de rede TCP/IP).

Telnet

Inicia uma sesso Telnet para logar remotamente em outro computador. O browser lana um programa externo de Telnet que tenta se conectar ao stio especificado.

URL

Uniform Resource Locator (URL)/Localizador Uniforme de Recursos o que o WWW usa para encontrar a localizao de arquivos e documentos (e outras coisas) nos computadores da Internet. Os browsers apresentam a URL dos documentos que esto sendo mostrados na tela.

Usenet

Sistema de conferncia mundial que engloba todos os tipos de (universidades, organizaes comerciais, rgos informao governamentais e computadores domsticos) com o objetivo de transmitir notcias.

WAIS

Wide Area Information Server - Servidor de Informaes indexado, que faz busca de documentos por assunto/palavras-chave.

- 68 -

Depto. Processamento de Dados

Criao de Pginas HTML

BIBLIOGRAFIA

Coleo Informtica Descomplicada HTML Aprenda a Fazer sua Pgina na Internet, Equipe Frente, Editora Escala, 2001

Tutorial - Autoria em World Wide Web, Rede Nacional de Pesquisa RNP, 1985.

HTML & XHTML The Definitive Guide (4th Edition) ,Chuck Musciano e Bill Kennedy, Editora OReilly, Agosto de 2000.

ASP Srie Ramalho Prtico e Rpido, Jos Antnio Alves Ramalho, Editora Berkeley, 2001

Confeco de Web Pages Bsico, Treinamento CCUEC / AFPU - UNICAMP 2001, Magali Barcellos / Rita de Cssia Souza

Projetos em Sala de Aula Internet, Sanmua Feitosa Tajra, Editora rica, 2001

- 69 -