[1572]Linguagens Programacao I

Universidade do Sul de Santa Catarina

Palhoça

UnisulVirtual

2009

Linguagens de Programação I

Disciplina na modalidade a distância

2ª edição revista e atualizada

Apresentação

Este livro didático corresponde à disciplina Linguagens de Programação I.

O material foi elaborado visando a uma aprendizagem autônoma e aborda conteúdos especialmente selecionados e relacionados à sua área de formação. Ao adotar uma linguagem didática e dialógica, objetivamos facilitar seu estudo a distância, proporcionando condições favoráveis às múltiplas interações e a um aprendizado contextualizado e eficaz.

Lembre-se que sua caminhada, nesta disciplina, será acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual, por isso a “distância” fica caracterizada somente na modalidade de ensino que você optou para sua formação, pois na relação de aprendizagem professores e instituição estarão sempre conectados com você.

Então, sempre que sentir necessidade entre em contato; você tem à disposição diversas ferramentas e canais de acesso tais como: telefone, e-mail e o Espaço Unisul Virtual de Aprendizagem, que é o canal mais recomendado, pois tudo o que for enviado e recebido fica registrado para seu maior controle e comodidade. Nossa equipe técnica e pedagógica terá o maior prazer em lhe atender, pois sua aprendizagem é o nosso principal objetivo.

Bom estudo e sucesso!

Equipe UnisulVirtual.

Patrícia Gerent Petry

Palhoça

UnisulVirtual

2009

Revisão e atualizaçãoAlexandre Henrique Paes

Design instrucionalLeandro Kingeski Pacheco

2ª edição revista e atualizada


Livro didático

005.133P59 Petry, Patrícia Gerent Linguagens de programação I : livro didático / Patrícia Gerent Petry ; revisão e atualização Alexandre Henrique Paes ; design instrucional Leandro Kingeski Pacheco, [assistente acadêmico Nágila Cristina Hinckel]. – 2. ed. rev. e atual. – Palhoça : UnisulVirtual, 2009. 322 p. : il. ; 28 cm.

Inclui bibliografia.

1. Linguagem de programação (Computadores). 2. HTML (Linguagem de programação de computador) I. Paes, Alexandre Henrique. II. Pacheco, Leandro Kingeski. III. Hinckel, Nagila Cristina. IV. Título.

Edição – Livro Didático

Professor ConteudistaPatricia Gerent Petry

Revisão e AtualizaçãoAlexandre Henrique Paes (2ª edição revista e atualizada)

Design InstrucionalLeandro K. Pacheco

Assistente AcadêmicoNágila Cristina Hinckel (2ª edição revista e atualizada)

Projeto Gráfico e CapaEquipe UnisulVirtual

DiagramaçãoRafael Pessi

Fernando Roberto Dias Zimmermann (2ª edição revista e atualizada)

RevisãoB2B

Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul

Copyright © UnisulVirtual 2009

Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição.

Sumário

Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

UNIDADE 1 – Conceitos básicos pertinentes à linguagem de programação HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

UNIDADE 2 – Introdução à HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37

UNIDADE 3 – Listas e Vínculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69

UNIDADE 4 – Mais formatação em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

UNIDADE 5 – Uso de Imagens, Painéis de Fundos e Arquivos de Música . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125

UNIDADE 6 – Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155

UNIDADE 7 – Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189

UNIDADE 8 – Desenvolvendo páginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . .219

UNIDADE 9 – Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243

UNIDADE 10 – Criação de Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273

UNIDADE 11 – Elementos e atributos HTML obsoletos . . . . . . . . . . . . . . . . . . . .307

Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313

Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315

Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317

Respostas e comentários das atividades de auto-avaliação . . . . . . . . . . . . . . . .319

Palavras da professora

Caro Aluno!

Você já deve ter passado boa parte de seu tempo explorando a web e é provável que já esteja familiarizado com a maior parte do conteúdo deste livro. Com ele, vamos aprender a escrever páginas para a web. Talvez você até já tenha realizado isso em alguma oportunidade. Muito dos conteúdos provavelmente serão cansativos para você. Mas não deixe de ler e participar, contribuindo assim para o bom andamento da Disciplina.

Neste livro você encontrará tudo que precisa para criar uma página estática na web. Digo estática porque, aqui, ainda não aprenderemos a tornar as páginas dinâmicas, como existem em muitos sites já visitados por vocês (por exemplo, realizar um cadastro em um banco de dados, via web). Iremos aprender como criar uma página HTML, disponibilizá-la na web, criar vínculos, incluir imagens etc.

Este livro trata de detalhes técnicos básicos para a criação de um site na web. Você aprenderá porque deve produzir um efeito em particular em uma página, quando deve usá-lo e como. Neste livro, você também encontrará dicas, sugestões e muitos exemplos de como estruturar sua apresentação e não simplesmente o texto em cada página. Ou seja, o livro dará dicas para uma boa apresentação de um site na web.

Trabalhar com desenvolvimento para a web é gratificante, pois sabemos que uma das características mais interessantes da internet é a oportunidade que todas as pessoas têm de disseminar informações. Portanto, disponibilizar informações na web será o nosso foco. Espero que você se anime e se divirta bastante enquanto estuda. Vamos lá?

Bons estudos!

Professora Patrícia Gerent Petry

Plano de estudo

O plano de estudo visa orientá-lo/a no desenvolvimento do Projeto Integrador. Nele, você encontrará elementos que esclarecerão o contexto do mesmo e sugerirão formas de organizar o seu tempo de estudos.

O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam. Assim, a construção de competências se dá sobre a articulação de metodologias e por meio das diversas formas de ação/mediação.

São elementos desse processo:

o livro didático; �

o Espaço UnisulVirtual de Aprendizagem - � EVA;

as atividades de avaliação a distância (não serão feitas �

avaliações presenciais);

o Sistema Tutorial. �

EmentaApresentação das principais linguagens de programação e ferramentas para desenvolvimento de sites. Estudo de HTML. Desenvolvimento de sites estáticos. Tabelas, frames, formulários, imagens, som, vídeo e links. Estilos de fontes e definição de conteúdos. Implementação de sites e seus respectivos testes, avaliação e manutenção.

Carga HoráriaA carga horária total da disciplina é 120 horas-aula, 8 créditos, incluindo o processo de avaliação.

12


ObjetivosGerais:

Esta Disciplina tem por objetivo fornecer um estudo sobre a linguagem básica utilizada para a criação de páginas na internet: HTML (HyperText Markup Language). Serão abordados os conceitos básicos e avançados da linguagem.

Específicos:

Apresentar o funcionamento da � web.

Descrever os principais conceitos referentes à HTML. �

Conhecer alguns editores de HTML. �

Definir o que são � tags HTML.

Identificar as � tags e a estrutura geral de uma página HTML.

Aprender a criar listas. �

Como criar vínculos em HTML. �

Proporcionar formatações em parágrafos e textos �

HTML.

Trabalhar com imagens em páginas da � web.

Utilizar tabelas. �

Construir � frames.

Proporcionar a criação de folhas de estilos. �

Elaborar um � layout adequado para as suas páginas em HTML.

Criar formulários. �

Verificar elementos e atributos HTML obsoletos. �

13


Conteúdo programático/objetivosOs objetivos de cada unidade definem o conjunto de conhecimentos que você deverá deter para o desenvolvimento de habilidades e competências necessárias à sua formação. Neste sentido, veja, a seguir, as unidades que compõem o livro didático desta Disciplina, bem como os seus respectivos objetivos.

Unidades de estudo: 11

Unidade 1 – Conceitos básicos pertinentes à linguagem de programação HTML

Esta unidade pretende descrever o que é a internet, revendo seus conceitos. Como funciona a web, definindo o que é HTML e como editar documentos HTML.

Unidade 2 – Introdução à HTML

A unidade que iniciará a criação de páginas da web é simples. Você aprenderá a estruturar seu código HTML. Utilizará separadores entre linhas, textos. Aprenderá o alinhamento de texto.

Unidade 3 – Listas e Vínculos

Nesta unidade, você saberá como criar os vários tipos de listas possíveis. Aprenderá a incluir um comentário em seu código HTML e aprenderá a incluir vínculos entre o texto e as páginas da web.

Unidade 4 – Mais formatação em HTML

Na unidade 4, você aprenderá os diferentes estilos de caracter. Ao fim da unidade, saberá como formatar texto e a utilizar as tags <blink> e <marquee>.

14


Unidade 5 – Uso de Imagens, Painéis de Fundos e Arquivos de Música

Nesta unidade, você utilizará a tag <img> e seus atributos. Fará referência de hipertexto com imagem. Criará painéis de fundo com imagens. Serão abordadas sugestões para um melhor uso das imagens. Música.

Unidade 6 – Tabelas

Na unidade 6, você criará tabelas. Elementos básicos de tabelas. Alinhamento da tabela e das células. Dimensões da tabela. Cor em tabelas.

Unidade 7 – Frames

Nesta unidade, você construirá frames com o elemento FRAMESET. Links com frames. Composição com frames. Os atributos de frameset. Os atributos de frame. Aplicações de frames e cuidados no uso.

Unidade 8 – Desenvolvendo páginas eficientes

Na unidade 8, você aprenderá a desenvolver páginas eficientes. Uso das extensões HTML. Seu texto na web. Projeto e layout da página. Uso de vínculos. Outras sugestões de bons hábitos.

Unidade 9 – Folhas de Estilo

Na unidade 9, você saberá o que são as famosas folhas de estilos. A sintaxe CSS. Os tipos de definição de estilos. A ordem da cascata.

Unidade 10 – Criação de Formulários

Nesta unidade, você criará formulários. Aprenderá a usar campos de entrada de texto. Seleções – listas de opções. Botões de rádio. Caixas de validação. Botão de envio. Exemplo completo de formulário.

15


Unidade 11 – Elementos e atributos HTML obsoletos(deprecated).

Segundo a W3C alguns elementos e atributos HTML estão em desuso. Por isso W3C recomenda, que deve-se evitar desde já o seu uso, visto que tornar-se-ão obsoletos nas futuras versões do HTML. Nesta unidade veremos alguns exemplos de elementos/atributos em desuso.

Agenda de atividades/ Cronograma

Verifique com atenção o EVA, organize-se para acessar �

periodicamente o espaço da Disciplina. O sucesso nos seus estudos depende da priorização do tempo para a leitura; da realização de análises e sínteses do conteúdo; e da interação com os seus colegas e professor.

Não perca os prazos das atividades. Registre no espaço �

a seguir as datas, com base no cronograma da disciplina disponibilizado no EVA.

Use o quadro para agendar e programar as atividades �

relativas ao desenvolvimento da Disciplina.

16


Atividades obrigatórias

Demais atividades (registro pessoal)

1UNIDADE 1

Conceitos básicos pertinentes à linguagem de programação HTML

Objetivos de aprendizagem

� Rever conceitos importantes sobre Internet.

� Conhecer HTML.

� Conhecer alguns editores de HTML existentes.

Seções de estudo

Seção 1 O que é a Internet

Seção 2 Como funciona a web

Seção 3 Afinal o que é HTML?

Seção 4 Edição de documentos HTML

18


Para início de conversa

Caro aluno, antes de você iniciar seus estudos sobre linguagem de programação I, vamos relembrar alguns conceitos já estudados.

Uma das características mais interessantes da Internet é a oportunidade que todos os usuários têm de disseminar informações. Tanto um vencedor do prêmio Nobel quanto um estudante do primeiro ano de faculdade contam com os mesmos canais de distribuição para expressar suas idéias. Com o surgimento da World Wide Web, esse meio só foi enriquecido. O conteúdo da rede ficou mais atraente com a possibilidade de incorporar imagens e sons. Um novo sistema de localização de arquivos criou um ambiente em que cada informação tem um endereço único e pode ser encontrada por qualquer usuário da rede.

Isso significa que, na prática, não existe nenhuma diferença entre as páginas de uma grande empresa na web e as páginas que você irá produzir. Ambas podem ser acessadas com a mesma facilidade. A diferença é uma só: a criatividade. Este livro tem o objetivo de fornecer as ferramentas básicas para exercitar a criatividade na web. Será preciso, então, aprender um pouco de HTML (HyperText Markup Language), a linguagem utilizada para criar as páginas. Você também vai encontrar uma porção de dicas, truques e exemplos.

Seção 1 - O que é a Internet

Muito provavelmente, você já estudou a internet. Antes de iniciar os estudos, escreva aqui o que você entende por internet?

A World Wide Web (Teia de Alcance Mundial) é o nome dado à rede de servidores da Internet que mantém documentos hipermídia, interligados entre si por hiperlinks e que formam uma grande teia de informações espalhadas pelo mundo. A WWW foi a grande responsável pela popularização da Internet, oferecendo um método mais intuitivo de pesquisar e consultar informações na grande rede.

19


Unidade 1

Existem muitos termos que tentam definir a Internet. Superestrada da informação, preferem os políticos. Rede de redes, insistem os cientistas. O certo é que cada um desses grupos prefere ver a rede segundo seus próprios interesses. Para os políticos, uma nova fronteira de construção e investimentos coletivos é um desafio. Já os cientistas, rigorosos em suas definições, enxergam a virtude da Internet em conectar computadores de qualquer tipo em todo o globo.

As visões distintas da rede não param por aí. Há quem veja na Internet uma perigosa fonte de pornografia. As indústrias sonham com o dia em que poderão vender diretamente aos consumidores, sem nenhum intermediário. Empresas de comunicação esperam o meio que reúna rádio, TV e televisão em um mesmo sistema de produção. Pais de estudantes no exterior matam as saudades pelo monitor e paqueras virtuais acontecem a toda hora em cada canto da rede.

A Internet é tudo isso ao mesmo tempo e, com certeza, muito mais. A rede é o que cada pessoa quiser que ela seja. Em toda a história da Internet foram os usuários que inventaram novos recursos e novas aplicações. É um terreno fértil para boas idéias.

20


Isso tudo porque a Internet é uma invenção muito simples. Nada mais é do que uma forma fácil e barata de fazer com que computadores distantes possam se comunicar. A partir daí, a revolução está nas mãos das pessoas.

Cada usuário recebe uma identificação única, conhecida como endereço. Com esse endereço, ele pode se comunicar, enviando mensagens para outras pessoas. É o que se chama de correio eletrônico. Graças aos esforços de instituições como Universidades e empresas ligadas à pesquisa, dispostas a investir dinheiro e pessoal para criar e manter os pontos principais da rede - os servidores (computadores de alto desempenho) - é possível conseguir programas de graça e consultar bancos de dados públicos.

Hoje, com o sucesso da Internet, toda empresa se vê na obrigação de colocar a cara na rede. Os serviços se multiplicam. Os bancos oferecem todas as suas operações pelo computador. Notícias são distribuídas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos.

No entanto, boa parte do material da rede é produzido por indivíduos querendo expressar ao mundo suas preferências. Um usuário reúne tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais práticos, escreve um currículo e espera que seus talentos sejam descobertos. Todo mundo que um dia sentiu vontade de compartilhar suas façanhas agora pode fazer isso. O tal terreno fértil da Internet tem um nome. Chama-se World Wide Web ou apenas web.

Seção 2 - Como funciona a web

A web funciona basicamente com dois tipos de programas: os clientes e os servidores. O cliente é o programa utilizado pelos usuários para ver as páginas, enquanto os servidores ficam responsáveis por armazenar e permitir o acesso ao conteúdo da rede. Neste livro, chamamos o programa cliente de navegador (browser, em inglês). O que o navegador faz é requisitar um

O navegador é usado para exibir páginas da web e outras informações disponíveis na world wide web e navegar por elas.

21


Unidade 1

arquivo para um servidor. Se a informação pedida estiver realmente armazenada naquele servidor, o pedido será enviado de volta e mostrado na tela do navegador.

Você tem idéia de como a informação na web é organizada?

A informação na web é organizada na forma de páginas, que podem conter texto, imagens, sons e, mais recentemente, pequenos programas. Além disso, as páginas da web podem ser ligadas umas com as outras, formando o que se chama de um conjunto de hipertextos. Assim, é possível, por exemplo, que um trabalho de faculdade faça referência direta a um texto que serviu de base para o estudo. O leitor interessado na fonte de pesquisa pode saltar imediatamente para o texto original. Dessa forma, qualquer documento pode levar a um outro texto que também esteja disponível na rede. A possibilidade de criar uma “malha” de informação em torno do planeta deu origem ao nome World Wide Web, que significa “teia de alcance mundial”.

A web é um sistema de informação em hipertexto. Os sistemas de ajuda on-line utilizam hipertextos para apresentar informações. A figura 1.1 a seguir mostra um diagrama simples de como funciona esse tipo de sistema.

FIGURA 1.1 – UM SIMPLES SISTEMA DE AJUDA ON-LINE

22


Saiba mais sobre hipertexto, link ou hiperlink

Hipertexto é um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fácil publicação, atualização e pesquisa de informação. O sistema de hipertexto mais conhecido atualmente é a World Wide Web. O hipertexto permite que você leia um texto e navegue por ele e por informações visuais não-linear, com base nas informações que deseja obter em seguida.

O Link ou Hiperlink é um dos principais elementos de um hipertexto, pois permite a conexão de uma página com informações à outra previamente definida, geralmente contendo um assunto correlato. Nas páginas WWW, os hiperlinks aparecem como palavras em destaque, normalmente sublinhadas e de cor diferente do restante do texto, e são acionados clicando-se sobre eles com o mouse.

A web é gráfica e fácil de ser navegadaAntes da web, o uso da internet envolvia conexões simples de textos. Você tinha de navegar pelos vários serviços da internet utilizando interfaces de linha de comandos e ferramentas rudimentares. Embora houvesse muitas informações realmente interessantes na internet, ela não tinha um aspecto agradável.

A web fornece recursos de imagem, som e vídeo que podem ser incorporados ao texto, e os softwares mais recentes oferecem novos recursos para multimídia e aplicativos incorporados. E o mais importante é que a interface de todos esses recursos é de fácil navegação – basta saltar de vínculo em vínculo, de página em página, passando por sites e servidores.

23


Unidade 1

Atenção!

Se a web incorpora muito mais do que texto, por que é chamada de sistema de hipertexto? Não deveria ser um sistema de hipermídia? Muitos autores discutem sobre o assunto. Muitos argumentam que a web começou com um sistema de textos e que a maior parte de seu conteúdo ainda é, basicamente, composta de textos, com partes extras de mídias.

A web é distribuídaSabemos que as informações ocupam muito espaço, especialmente quando você inclui imagens, sons, vídeos. Para armazenar todas as informações que a web fornece, você precisa de um espaço enorme em disco e seria quase impossível gerenciá-las.

A web consegue fornecer um volume tão grande de informações porque elas estão distribuídas globalmente por milhares de sites, cada qual contribuindo com o espaço necessário às informações que divulga.

A web é dinâmicaComo as informações da web estão contidas no site que as divulgou, as pessoas que as publicaram, originalmente, podem atualizá-las de forma instantânea, a qualquer momento. Para obter informações atualizadas basta usar o seu navegador para navegar pelas informações e verificar o que há de novo.

A web é independente de plataformaO termo independente de plataforma significa que você pode acessar as informações disponíveis na web igualmente bem a partir de qualquer computador, sistema operacional e monitor de vídeo.

Você tem acesso à web através de um aplicativo denominado navegador (browser), como o Netscape Navigator ou o Internet Explorer. Você pode encontrar muitos desses navegadores para a maioria dos sistemas computacionais existentes. E, depois que tiver um navegador e uma conexão com a internet, você terá alcançado seu objetivo. Você estará na web.

Site da web é um local na web que divulga algum tipo de informação. Quando você exibe uma página da web, o seu navegador se conecta a esse site da web para obter essas informações.

24


Atenção!

A idéia de que a web é independente de plataforma é sustentada por uns e por outros não. Com a introdução de novos recursos, tecnologias e tipos de mídia, a web está perdendo parte de sua capacidade de ser verdadeiramente independente de plataforma. À medida que os autores da web optam por usar esses recursos mais recentes, eles voluntariamente limitam o público potencial para seus sites.

A web é interativaInteratividade é a capacidade de “responder” ao servidor web. A web é interativa por natureza. O ato de selecionar um vínculo e acessar outra página da web para ir a outro local na web é uma forma de interatividade. Além disso, ela permite que você se comunique com o autor das páginas que está lendo e com outros leitores dessas páginas.

Os navegadores da webConforme você estudou anteriormente, os usuários circulam por essa teia com um programa chamado navegador, que é o programa que você utiliza para exibir páginas pela world wide web. Esse programa envia pedidos de páginas pela rede e as apresenta na tela do usuário. Existem vários navegadores da web, praticamente para todas as plataformas que você possa imaginar, desde sistemas baseados em GUI (Mac, Windows), a sistemas de textos para conexões UNIX. Os navegadores mais conhecidos são o Netscape Navigator, o Microsoft Internet Explorer e o NCSA Mosaic.

A opção de desenvolver programas para um navegador específico é conveniente quando você sabe que o seu site da web vai ser visto por um público limitado. Esse tipo de desenvolvimento é uma prática comum em intranets implementadas em corporações.

Neste livro, os exemplos realizados foram utilizados com o navegador Internet Explorer 5.0.

GUI = Interface Gráfica com o Usuário

25


Unidade 1

Os servidores webPara que uma página esteja permanentemente disponível pela web, ela precisa ter um endereço fixo, alojada em um servidor.

Os pedidos dos navegadores são atendidos por uma combinação de computadores e programas que formam os servidores. Esses computadores e programas armazenam as páginas e podem exercer algum tipo de controle sobre quais usuários podem acessá-las. Os servidores são máquinas potentes instaladas em universidades, empresas e órgãos do governo, conectados permanentemente à Internet. Também é possível montar um servidor de web em casa, com um computador pessoal.

Apesar de poderem ser instalados em, praticamente, todos os tipos de computadores, os servidores devem estar conectados 24 horas por dia na rede para que os usuários possam requisitar as páginas a qualquer momento. A melhor solução para montar um conjunto de páginas é procurar uma empresa que aluga espaço em um servidor web.

Existem vários provedores de espaço (hostings) gratuitos. Os provedores de acesso à internet geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos são geralmente hospedados em provedores de espaço pagos.

Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas.

O que é uma URL A web permitiu que cada documento na rede tenha um endereço único, que indica o nome do arquivo, diretório, nome do servidor e o método pelo qual ele deve ser requisitado. Esse endereço foi chamado de URL (Uniform Resource Locator, numa tradução literal, localizador uniforme de recursos). Toda URL apresenta uma estrutura básica. Acompanhe tal estrutura em função do exemplo seguinte:

26


Considere o seguinte URL:

http://www.inf.unisul.br/~patricia/aprendajava.html

Onde,

http:// é o método pelo qual ocorrerá a transação entre cliente e servidor. HTTP (HyperText Transfer Protocol, ou protocolo de transferência de arquivos de hipertexto) é o método utilizado para transportar páginas de web pela rede. Outros métodos comuns são: ftp:// (para transferir arquivos), news:// (grupos de discussão) e mailto:// (para enviar correio eletrônico).

www.inf.unisul.br é o nome do servidor onde está armazenado o arquivo. Nem sempre o nome de um servidor de web inicia por www. Existem alguns com nomes como cs. dal. ca.

/~patricia/ é o diretório onde está o arquivo. Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.

aprendajava.html é o nome do arquivo. A extensão .html indica que se trata de uma página web. Uma URL pode indicar outras extensões. Quando o navegador recebe um arquivo com a extensão .txt, o arquivo é tratado como um texto comum. Em outros casos, como nas extensões .zip (arquivo comprimido) e .exe (um programa), o navegador abre uma janela perguntando ao usuário o que fazer com o arquivo.

Esse endereço único de um documento pode ser utilizado pelo usuário para localizar um arquivo com o navegador. Nesse caso, o usuário deve preencher com o endereço uma janela do navegador conhecida como Endereço. A URL será enviada até o servidor, que tentará localizar o arquivo e enviá-lo para o usuário. Caso o arquivo não esteja disponível no servidor, o usuário receberá uma mensagem de erro.

As URLs também são colocadas dentro de páginas de WWW para fazer referência a outras informações disponíveis na Internet. Nesse caso, determinados itens (trechos de texto ou imagens) da página, conhecidos como links, como já visto, podem ser utilizados pelos usuários para saltar de um lugar a outro na rede. Os links podem estabelecer ligação com qualquer tipo de arquivo. Essa ligação entre os documentos é o que se chama de hipertexto.

27


Unidade 1

Seção 3 - Afinal o que é HTML?

Para você publicar informações acessíveis a todos, você precisa de uma linguagem entendida mundialmente, algo parecido como uma linguagem padrão que todos os computadores possam entender. Como já dito, a linguagem utilizada para a World Wide Web é a HTML (HyperText Markup Language – ou linguagem de formatação de hipertexto).

O HTML é uma linguagem de marcação de texto ou dado relativamente simples e que pode ser combinado com outras linguagens de programação como: JSP, PHP, ASP, etc; podendo dar efeito dinâmico aos sites.

O HTML permite:

publicar documentos � on-line com texto, tabelas, fotografias e muito mais;

receber informações através de ligações ( � links) de hipertexto através de um clique;

desenhar formulários para transações comerciais através �

de serviços remotos, como para encontrar informação, fazer reservas, encomendar produtos, etc.;

e ainda incluir som, vídeo e muitas aplicações nos �

documentos.

Breve histórico do HTMLO HTML foi originalmente desenvolvido por Tim Berners-Lee, quando estava no CERN, e tornou-se conhecido através do Mosaic, um browser desenvolvido em NCSA. Durante os primórdios dos anos 90, expandiu-se com a enorme explosão do crescimento da WWW. Quando o HTML surgiu, a sua principal utilização era para descrever a informação, sendo predominantemente usado no meio científico para partilhar documentos de forma universal e facilmente legível. Parágrafos, listas, cabeçalhos, títulos (os elementos principais do HTML) eram ideais para este tipo de documentação.

28


Posteriormente, o HTML foi expandido em vários caminhos. De 1990 a 1995, a linguagem HTML sofreu uma série de extensões por parte de diversos grupos e organizações: HTML 2.0 da IETF, HTML+, HTML 3.0.

Em 1996, os esforços do grupo de trabalho do World Wide Web Consortium, levaram ao aparecimento do standard HTML 3.2.

Entretanto, o problema foi que a web ficou literalmente cheia de sites feitos com essas “criatividades” em HTML, que o puxaram para uma finalidade que não a original. Para acomodar os mais variados pedidos, as tags de apresentação (cor, fonte e alinhamento) foram usadas e abusadas, quando o principal propósito da linguagem era estruturar a informação. Muitos, em alguma fase, aproveitaram-se das aparentes facilidades desta versão do HTML e de browsers demasiado permissivos a erros.

Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem através de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML 4.0, que é uma extensão do HTML 3.2, que permite a utilização de folhas de estilo (style sheets), mecanismos de scripts, frames, objetos incorporados, e alguns mecanismos de acessibilidade para deficientes.

Em 1999, o HTML 4.01 fixa um certo número de erros e incongruências encontradas na recomendação anterior.

Neste momento, em 1999, existe um consenso para a necessidade de se voltar um pouco atrás, preparando ao mesmo tempo o futuro. Um exemplo é a separação do conteúdo com a apresentação do documento, usando XHTML para o conteúdo e deixando a apresentação do documento a cargo de Cascading Style Sheets (CSS).

Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendação do World Wide Web Consortium (W3C) em 2000, e é a sucessora do HTML 4.0. O XHTML nada mais é que o HTML escrito em XML (eXtensible Markup Language).

29


Unidade 1

Saiba mais sobre o World Wide Web Consortium (W3C)

O World Wide Web Consortium é um consórcio de empresas de tecnologia (atualmente cerca de 500 membros) fundado por Tim Berners Lee, em 1994, para levar a web ao seu potencial máximo, através do desenvolvimento de protocolos comuns e fóruns abertos que promovam sua evolução e assegurem a sua interoperabilidade. O W3C desenvolve tecnologias denominadas padrões da web para a criação e a interpretação dos seus conteúdos. Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia independente de hardware ou software utilizados, como celular, PDA, eletrodomésticos etc., independentemente da plataforma, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da internet.

Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar estas tecnologias. Com a padronização, os programas conseguem acessar facilmente os códigos e entender onde deve ser aplicado cada conhecimento expresso no documento.

Apesar do W3C não ser muito conhecido no Brasil, padrões seus como HTML, eXtensible Hypertext Markup Language (XHTML) e Cascading Style Sheets (CSS) são muito populares. Contudo, em muitos casos são usados de forma errônea devido à falta de conhecimento de suas especificações.

É um dever de todo desenvolvedor web respeitar e seguir os padrões do W3C, pois, de outro modo, poderá estar impondo barreiras tecnológicas a diversas pessoas e, com isso, desestimulando e, até mesmo, impedindo o acesso a suas páginas.

O site oficial da W3C é http://www.w3c.org. Todas as atividades em desenvolvimento estão em inglês, mas você encontrará uma grande parte das especificações traduzida para outras línguas.

30


Em suma, hoje em dia temos um HTML mais flexível, portátil e com um formato prático para dar forma aos documentos de Internet, que pode ser combinado com outras linguagens como Javascript, Flash e Java tornando o documento muito mais interativo.

Seção 4 - Edição de documentos HTML

Agora que você conheceu um pouco da história do HTML e de suas novidades, vamos aprender como editar um documento HTML, além de uma breve introdução à linguagem HTML. Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi (no linux), emacs (no linux), textedit, bloco de notas, ou qualquer editor simples.

Para facilitar a produção de documentos, existem editores HTML específicos:

Editores de texto fonte - � facilitam a inserção das etiquetas (tags, como chamaremos), orientando o uso de atributos e marcações. Ex.: W3e, HotDog, Crimson Editor.

FIGURA 1.2 - TELA DO CRIMSON EDITOR

31


Unidade 1

Editores WYSIWYG - � oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Ex.: FrontPage, Namo Editor, Dreamweaver.

WYSIWYG é o acrônimo da expressão em inglês “What You See Is What You Get”, que pode ser traduzido para “O que você vê é o que você recebe”. Trata-se de um método de edição, no qual o usuário vê o objeto no momento da edição na tela do computador já com a aparência do produto final.

Um exemplo clássico de editor WYSIWYG é o Microsoft Word, no qual o documento é mostrado na tela da mesma forma que será impresso. O criador do primeiro editor WYSIWYG, o Bravo, foi Charles Simonyi.

Na linguagem de programação para internet, um dos editores mais conhecidos atualmente é o Macromedia Dreamweaver, no qual qualquer pessoa, com o mínimo de conhecimento em HTML, pode fazer muito rapidamente uma página ou até um site inteiro para internet.

FIGURA 1.3 - TELA DO NAMO EDITOR

Além dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML.

O documento HTML produzido normalmente terá extensão .html ou .htm.

32


Existem muitos editores de HTML gratuitos, como:

Html beauty: http://www.htmlbeauty.com/ �

PageBreeze: http://www.pagebreeze.com/ �

Web writer: http://www.webwriter.dk/english/index.htm �

Introdução à linguagem HTMLA linguagem HTML é fruto do “casamento” dos padrões HyTime e SGML. Estes padrões são especificados a seguir.

HyTime - Hypermedia/Time-based Document �

Structuring Language HyTime (ISO 10744:1992) – é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo-se de documentos que aplicam os padrões de maneira particular.

SGML - � Standard Generalized Markup Language SGML é o padrão ISO 8879 de formatação de textos. Não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações. O SGML não é aplicado de maneira padronizada. Todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.

DTD - Document Type Definition � - define as regras de formatação para uma determinada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML.

Neste sentido, o HTML é definido segundo um DTD de SGML.

33


Unidade 1

Todo documento HTML apresenta elementos entre < e >; esses elementos são as etiquetas (doravante chamadas de tags) de HTML, que são os comandos de formatação da linguagem, que podem ser escritas em maiúscula ou minúscula. A maioria das tags tem sua correspondente de fechamento:

<tag>...</tag>

Isso é necessário porque as tags servem para definir a formatação de uma porção de texto e, assim, marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:

<tag>

Todos os elementos podem ter atributos:

<tag atributo1=valor1 atributo2=valor2>...</tag>

Os valores dos atributos devem estar entre aspas.

<A HREF=”URL”>Texto</A>

34


Síntese

Caro aluno, você finalizou a unidade 1, revisando alguns conceitos importantes, já estudados em disciplinas anteriores, como Internet, World Wide Web, clientes, servidores, hipertextos, Link ou Hiperlink, navegador, servidores, provedores de espaço (hostings) e URL.

Você também aprendeu conceitos introdutórios de HTML, que é um recurso muito simples e acessível para a produção de documentos. Não podemos deixar de frisar a importância das tags em HTML. Por isso, segue abaixo uma tabela resumindo a morfologia das tags:

Tipo Sintaxe Exemplo

Tag <tag> <BR>

Texto <tag>texto</tag> <B>texto</B>

Atributo <tag NOME_ATRIBUTO=valor>texto</tag> <A HREF=”url”>texto</A>

Nas próximas unidades, você estudará outros elementos do HTML, que lhe possibilitarão, com alguma imaginação, fazer um bom website.

Até lá!

35


Unidade 1

Atividades de auto-avaliação

1. Faça uma pesquisa sobre alguns editores gratuitos de HTML na internet. Pontue vantagens e desvantagens. Na ferramenta FÓRUM do EVA, vamos discutir sobre os editores HTML encontrados.

Saiba mais

Para você aprimorar ainda mais seus conhecimentos acerca dos temas aprendidos nesta unidade, consulte a seguinte referência:

PRATES, Rubens. HTML: guia de consulta rápida. São Paulo: Editora Novatec, 1997.

E os seguintes sites:

http://www.abcdohtml.hpg.ig.com.br/html_intro.htm � (Introdução ao HTML)

http://minerva.ufpel.edu.br/~bira/html/web.html � (Web Design)

2UNIDADE 2

Introdução à HTML


Conhecer o que é HTML e a importância de utilizá-la. �

Conhecer o que são as � tags HTML e como utilizá-las.

Identificar as � tags para a estrutura geral de uma página.

Identificar as � tags para títulos, cabeçalhos e parágrafos.

Seções de estudo

Seção 1 Criação de páginas da web simples

Seção 2 Estruture sua HTML

Seção 3 Sepa radores

Seção 4 Alinhamento de texto

38



Depois de apresentarmos os conceitos iniciais, você deve estar se perguntando: quando é que vamos começar a criar uma página web? Afinal, este é um dos objetivos desta disciplina. Então, nesta unidade, você começa a conhecer a estrutura da HTML – a linguagem em que são criadas as páginas da web.

Seção 1 - Criação de páginas da web simples

Apesar da aparente sofisticação, as páginas web não passam de documentos de texto simples. Você pode produzi-las com qualquer editor de texto, como o bloco de notas do Windows. A diferença é que as páginas web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas, também, para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas web, HTML.

As tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser.

Em compensação, é muito simples criar uma página básica para colocar na internet com HTML. Nesta unidade, você estudará um exemplo enxuto, que, aos poucos, ficará mais sofisticado.

39


Unidade 2

Seção 2 - Estruture sua HTML

Nos exemplos a seguir você irá verificar vários trechos de texto marcados por códigos colocados entre os caracteres < e >. Esses códigos, chamados de tags, são responsáveis pela marcação do texto em função de seu papel dentro do documento. O título principal de um documento, por exemplo, pode ser marcado com as tags <b> e </b> (coloca o texto em negrito), enquanto os parágrafos são separados pela tag <P>. Existem dois tipos de tags. Algumas são formadas aos pares, indicando o início e o fim do trecho afetado, como o par <b> e </b>. Outros podem ser colocados individualmente, como o <P>, que simplesmente insere um espaço para dividir parágrafos. Mais adiante, mostraremos que os tags também podem receber atributos.

Tags básicas

A estrutura básica de um documento HTML apresenta os seguintes tags:

<HTML>

<HEAD>

<TITLE>Titulo do Documento</TITLE>

</HEAD>

<BODY>

texto,

imagem,

links,

...

</BODY>

</HTML>

40


Observe que existem quatro pares de tags, que devem ser sempre colocados na página.

O par de tags <HTML> e </HTML> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento HTML.

O documento, por sua vez, está dividido em duas partes: o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferentes.

Tudo que estiver entre o par <HEAD> e </HEAD> irá compor o cabeçalho, não aparecendo na página.

O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par <TITLE> e </TITLE>.

Os navegadores mostram o título na barra de título do programa e na área em aparecem as páginas já visitadas. Por fim, existe o par <BODY> e </BODY>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador.

As tags HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...

Veja, em detalhe, cada uma destas tags estruturais.

<HTML>

A primeira tag de estrutura de toda a página em HTML é a <html>, que indica que o conteúdo do arquivo encontra-se codificado na linguagem HTML. Para que o computador reconheça que você está escrevendo um documento em HTML, todo o seu conteúdo deverá ser delimitado pelas tags HTML de abertura e fechamento, como no exemplo:

<HTML>

.... a sua página ...

</HTML>

41


Unidade 2

<HEAD>

A tag <HEAD> e </HEAD> delimita o cabeçalho do documento. Geralmente há poucas tags na parte <HEAD> da página. Você nunca deve incluir no cabeçalho parte alguma do texto de sua página. Eis um exemplo típico de uso correto da tag <HEAD>:

<HTML>

<HEAD>

<TITLE> ESTE É MEU TÍTULO </TITLE>

</HEAD>

</HTML>

Campo <TITLE>

O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do navegador. Todo documento web deve ter um título; este título é referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prática a importância do título, se você adicionar uma página com título aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como “Introdução”. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da internet.

As tags <TITLE> são sempre incluídas no cabeçalho da página, entre as tags <HEAD> e </HEAD>, e descrevem o conteúdo da mesma como no exemplo anterior. Você pode ter apenas um título na página e o título pode conter somente texto simples, ou seja, não pode haver outras tags no título. Escolha um título curto, mas que descreva o conteúdo da página.

42


Campo <META>

Além do título, <HEAD> contém outras informações de importância para os “robôs” de pesquisa, indicadas nos campos <META>.

Os campos <META> têm dois atributos principais:

NAME � , indicando um nome para a informação.

HTTP-EQUIV � , que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação deste campo pode ser lida pelos navegadores e provocar algumas ações.

Atenção!

Os atributos são partes extras das tags da HTML que contêm opções ou outras informações sobre a tag em si.

Acompanhe a sintaxe seguinte, como modelo de uso dos atributos <META> (NAME e HTTP-EQUIV):

<HEAD>

<TITLE>Título do Documento</TITLE>

<META NAME=”nome” CONTENT=”valor”>

<META HTTP-EQUIV=”nome” CONTENT=”valor”>

</HEAD>

A Sintaxe refere-se às regras para a construção de um comando ou instrução.

43


Unidade 2

Um documento, por exemplo, pode ter as seguintes informações:

<HEAD>

<META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=iso-8859-1”>

<TITLE>Título da Janela</TITLE>

<META NAME= “Author” CONTENT=“Patrícia”>

<META NAME=”Description” CONTENT=”Livro de Linguagem de Programação I”>

<META NAME=”KeyWords” CONTENT=”HTML, WWW, Web, Internet”>

<LINK REL=”stylesheet” HREF=”folhasestilos.css”>

</HEAD>

Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela.

Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type, que indica o conjunto de caracteres usados na página. Essa informação ajuda o navegador a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh. Veja este exemplo:

<HEAD>

<TITLE> ... </TITLE>

<META HTTP-EQUIV=”Refresh” CONTENT=”segundos; URL= pagina.html”>

</HEAD>

44


onde: pagina.html � : é a página a ser carregada automaticamente.

segundos � : é o número de segundos passados até que a página indicada seja carregada.

Como comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensamos em uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”. A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenha uma foto produzida por uma câmara de vídeo. Você pode forçar, com o Refresh (atualizador), a atualização dessa página, mostrando para o usuário sempre uma imagem mais atual de algum evento focalizado pela câmara. Outra utilização é em “chats”, ou em páginas que desviem a navegação através de documentos desenvolvidos para navegadores avançados.

Saiba mais sobre o uso de META tags!

O uso de META tags não é obrigatório. Até poucos anos atrás, elas eram consideradas essenciais para uma página ter bom posicionamento nos resultados das pesquisas em catálogos da web.

Com o tempo, no entanto, os responsáveis pelos catálogos viram que os autores de páginas abusavam das tags META, colocando palavras-chave em demasia para enganar os critérios de catalogação.

Atualmente, nenhum dos catálogos mais conceituados considera as palavras-chave contidas em META tags.

<BODY>

É o corpo do documento. Tudo que estiver contido em <BODY> será mostrado na janela principal do seu navegador. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

45


Unidade 2

Estas duas tags, <BODY> </BODY>, delimitam todo o conteúdo do site. É aí que aparecerão os textos, as imagens, o fundo de tela, entre outras coisas.

Dentro da tag <BODY> você conseguirá especificar os seguintes atributos:

BACKGROUND � (configura a imagem que você deseja como fundo de tela) - indica o URL da imagem a ser replicada no fundo da página, como uma marca d`água. Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer 5.0. Exemplo: <body background=”imagem.gif”>

BGCOLOR � (cor de fundo) - a cor de fundo da tela. Quando não é indicada, o navegador irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página. Exemplo: <body bgcolor=”cor”>

TEXT � (cor do texto padrão) - a cor padrão de todo o texto da página. Cor dos textos da página (padrão: preto). Exemplo: <body text=”cor”>

LINK � (cor dos links) - determina a cor de todos os links da página. Cor dos links (padrão: azul). Exemplo: <body link=”cor”>

VLINK � (cor dos links visitados) - determina a cor de todos os links já visitados na página. Cor dos links, depois de visitados (padrão: azul escuro ou roxo). Exemplo: <body vlink=”cor”>

46


ALINK � (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padrão: vermelho). Exemplo: <body alink=”cor”>

Acompanhe a sintaxe seguinte, como modelo de uso dos atributos específicos do <BODY>:

<BODY BACKGROUND=”imagem.gif” BGCOLOR=”cor” TEXT=”cor” LINK=”cor” ALINK=”cor” VLINK=”cor”>

conteúdo

</BODY>

O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto seja preto, os links ainda não visitados sejam azuis, os links já visitados sejam roxos, e os links ativos sejam verdes:

<BODY BGCOLOR=”yellow” TEXT=”black” LINK=”blue” VLINK=”purple” ALINK=”green”>

conteúdo

</BODY>

Os valores das cores podem ser dados também em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos, tais como #FF80A0.

47


Unidade 2

Saiba mais sobre o sistema hexadecimal

O sistema hexadecimal é um sistema de numeração vinculado à informática, já que os computadores interpretam as linguagens de programação em bytes, que são compostos de oito dígitos. À medida que os computadores e os programas aumentam a sua capacidade de processamento, eles funcionam com múltiplos de oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dígitos, é um standard na informática.

Como o nosso sistema de numeração só dispõe de dez dígitos, devemos incluir seis letras para completar o sistema. Estas letras e o seu valor em decimal são: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15.

A utilização do sistema hexadecimal nos computadores, deve-se a que um dígito hexadecimal representa quatro dígitos binários (4 bits), portanto dois dígitos hexadecimais representam oito dígitos binários (8 bits = 1 byte) que, como é sabido, é a unidade básica de armazenamento de informação.

Fonte: http://pt.wikipedia.org/wiki/Hexadecimal

Navegadores que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR=”BLUE”. Porém, os navegadores mais antigos não apresentam as cores indicadas.

Criando uma página HTMLA melhor maneira de você aprender a escrever páginas de web é fazendo. Vamos ao primeiro exemplo. Abra o bloco de notas e digite o código a seguir. Por ora, não é necessário que você entenda todas as tags que ele apresenta e o que significa. Você aprenderá tudo sobre elas mais adiante. Este é só um exemplo simples para você começar.

48


<HTML>

<HEAD>

<TITLE>Primeiro exemplo</TITLE>

</HEAD>

<BODY>

<b>Título principal</b> <p>

Este é o texto do primeiro exemplo.<p>

Este é o segundo parágrafo. <p>

<b>Título secundário</b> <br>

Acabei de abrir uma linha. Vamos agora adicionar uma lista.<p>

<b>Uma lista</b>

<UL>

<LI>Item 1

<LI>Item 2

<LI>Item 3

</UL>

</BODY>

</HTML>

Após criar seu arquivo HTML, grave-o em alguma pasta com seus trabalhos. Lembre-se de gravar estes arquivos, escolhendo a opção Salvar Como. Existem duas regras que você deverá seguir ao escolher um nome para o arquivo:

o nome do arquivo deverá ter uma extensão .html (ou �

.htm). Por exemplo, meuarquivo.html ou principal.htm. A maioria dos softwares exigirá que os seus arquivos tenham essa extensão. Por isso, crie desde já o hábito de utilizá-la;

use nome simples e curtos. Não inclua espaços ou �

caracteres especiais (marcadores, letras acentuadas etc.). Use apenas letras e números.

49


Unidade 2

Visualizando o exemplo no navegador

Agora que você tem um arquivo em HTML, inicialize o seu navegador da web. Você não precisa estar conectado com a rede, uma vez que não vai abrir páginas armazenadas em outros sites.

No seu navegador, procure um comando no menu ou botão para abrir um arquivo. Esse comando permitirá que você navegue pelo seu disco local, solicitando ao navegador que leia um arquivo em HTML do seu disco, analise-o e apresente-o, como se fosse uma página já existente na web. Ao usar o seu navegador, você pode criar e testar os seus arquivos HTML no seu computador.

Se o que for apresentado na tela não se parecer com o que está ilustrado na figura 2.1, a seguir, então volte ao bloco de notas, abra o seu arquivo criado e compare-o com exemplo apresentado acima. Verifique se todas as tags têm tags de fechamento e se todas as tags estão descritas corretamente. Assim, basta corrigir o arquivo e gravá-lo novamente com o mesmo nome. Para isso você não precisa sair do navegador.

FIGURA 2.1 – VISUALIZANDO O PRIMEIRO EXEMPLO NO NAVEGADOR

50


Em seguida, retorne ao navegador. Deve haver um item no menu ou botão denominado Atualizar (recarregar). O navegador lerá a nova versão do seu arquivo e, então, você poderá editar e visualizar o documento sucessivamente até que tudo esteja correto.

Mas não esqueça também de verificar a extensão de seu arquivo, caso o seu navegador apresente o texto HTML real. A extensão é importante.

Vamos exercitar? Que tal agora você usar o mesmo exemplo anteriormente criado e atribuir à tag <BODY> alguns atributos, como por exemplo a cor de fundo e a cor do texto? Vamos tentar?

Portanto, para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimentos dos códigos que compõem a linguagem. Os códigos, conhecidos como tags, servem para indicar a função de cada elemento da página na rede.

Quando uma página em HTML é analisada por um navegador, toda a formatação feita manualmente – espaços, tabulações, quebras de parágrafos etc. – é ignorada. O único elemento capaz de formatar uma página em HTML são as tags de HTML. Se você passar horas editando cuidadosamente um arquivo de texto simples para ter parágrafos e colunas de números bem formatados, mas se esquecer de incluir as tags, quando for ler a página em um navegador HTML, todo o texto fluirá em um único parágrafo. E todo o seu trabalho terá sido em vão. A vantagem de todos os espaços em branco serem ignorados está no fato de você poder incluir as suas tags onde desejar.

51


Unidade 2

Atenção!

Há uma única exceção a essa regra: uma tag denominada <PRE>. Você aprenderá sobre ela mais adiante.

Cabeçalho

Os cabeçalhos são usados para dividir seções do texto. A HTML define 6 níveis de cabeçalho. As tags de cabeçalho têm o seguinte formato:

<H1> texto do cabeçalho de nível 1 </H1>

Os números indicam os níveis de cabeçalho (de H1 a H6). Quando apresentados na tela, eles aparecem em letras maiores, em negrito, centralizados, sublinhados ou em letras maiúsculas, de alguma forma que os destaque do restante do texto. O <H1> deixa a letra maior que o <H2> e assim por diante. Veja o seguinte exemplo:

<H1>Este é um cabeçalho de nível 1</H1>






52


Esses cabeçalhos são mostrados da seguinte forma:

FIGURA 2.2 – VISUALIZANDO EXEMPLO DE CABEÇALHO

Aninhamento de cabeçalhos

Os cabeçalhos não podem ser aninhados, isto é, a formatação pode produzir algum resultado próximo ao desejado como no exemplo abaixo. Vamos testar?

<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

FIGURA 2.3 – VISUALIZANDO EXEMPLO DE NÃO ANINHAMENTO DE TAG

Aninhamento é colocar documentos dentro de outro documento. Em HTML, aninhar é colocar tags uma dentro das outras.

53


Unidade 2

Mas o mais comum é que os navegadores “entendam” a formatação anterior como:

<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

Ou seja, os navegadores interpretam a formatação anterior como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1> e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:

FIGURA 2.4 – VISUALIZANDO EXEMPLO DE ANINHAMENTO DE TAG

Os editores WYSIWYG ‘naturalmente’ não permitem o aninhamento de cabeçalhos.

Alinhamento dos cabeçalhos

Os cabeçalhos têm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>

<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>

<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4>

Verifique o resultado no seu navegador.

54


Seção 3 - Separadores

Como você viu no primeiro exemplo, as quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, você precisa, então, de separadores tal como os apresentados aqui.

Quebra de linhaQuando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os navegadores já quebram as linhas automaticamente para apresentar os textos.

Quando um navegador da web encontra uma tag <BR>, ele reinicia o texto na margem esquerda da linha seguinte a essa tag. Você pode usar a tag <BR> dentro de outros elementos, como por exemplo, parágrafos ou itens de uma lista. Essa tag não possui espaço extra acima ou abaixo da nova linha, nem altera a fonte ou o estilo atual. Ela apenas reinicia o texto na linha seguinte.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Este elemento tem um atributo especial (CLEAR), que é utilizado com imagens que têm texto ao redor, conforme será apresentado na unidade 5.

ParágrafosOs parágrafos são digitados normalmente. A tag <P> serve para indicar o início de um novo parágrafo. As tags <P> e </P> delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag <P>, ou seja, omitir o </P>, sem prejudicar, o resultado final.

Ao contrário da quebra de linha, com o uso do <P> é deixada uma linha em branco antes do próximo parágrafo. Quebra de linha não deixa uma linha em branco.

55


Unidade 2

O atributo que deve ser utilizado com a tag <P> é o ALIGN, podendo ter os seguintes valores que delimitam o alinhamento do parágrafo:

LEFT � - se você quiser que o texto fique alinhado à esquerda. Exemplo: <P ALIGN=“left”>

RIGHT � - se você quiser que o texto fique alinhado à direita. Exemplo: <P ALIGN =“right”>

CENTER � - se você quiser que o texto fique alinhado ao centro. Exemplo: <P ALIGN =“center”>

Neste último caso, a tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar uma tag de fechamento (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente.

Observe o exemplo 1, que aborda como inserir uma linha em branco entre parágrafos:

Parágrafo 1;<P>Parágrafo 2.

56


Verifique se o resultado no seu navegador ficou próximo deste:

FIGURA 2.5 – EXEMPLO DE USO DE PARÁGRAFO

Acompanhe o exemplo 2, que combina a inserção de linha entre parágrafos e quebras de linha:

Parágrafo 1;<br> linha 1 do parágrafo 1, <br> linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br> linha 2 do parágrafo 2.

O resultado da marcação acima no navegador é:

FIGURA 2.6 – EXEMPLO DE PARÁGRAFO E QUEBRA DE LINHA

57


Unidade 2

Veja o exemplo 3 sobre o alinhamento de parágrafos, além de inserção de linhas entre parágrafos e quebra de linha:

<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P>

<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>

<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>

Verifique o seguinte resultado no navegador:

FIGURA 2.7 – EXEMPLO DE ALINHAMENTO DE PARÁGRAFO

Linha horizontalA tag <HR> é utilizado para colocar linhas horizontais em uma página. Essa linha tem diversos atributos, oferecendo resultados diversos. As linhas (ou fios) são excelentes para separar visualmente seções da página da web antes dos cabeçalhos ou para separar o texto de uma lista de itens. Você pode determinar a altura, a largura e o alinhamento da linha.

58


Observe o exemplo 1:

<HR SIZE=8 ALIGN=”center” WIDTH=75%>

Onde:

Size: configura a espessura da linha, no exemplo insere uma linha de largura de 8 pixels.

Width: configura a largura da linha (pode ser em porcentagem ou em pixels). No exemplo, insere uma linha que ocupa 75% do espaço horizontal disponível.

Align: determina o posicionamento da linha.

Noshade: indica sem efeito tridimensional.

FIGURA 2.8 – VISUALIZANDO UMA LINHA HORIZONTAL CENTRALIZADA NO NAVEGADOR

Considere o exemplo 2:

<HR WIDTH=30% ALIGN=RIGHT NOSHADE>

Com estes comandos, você insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional. Verifique o resultado no seu navegador.

59


Unidade 2

Figura 2.9 – EXEMPLO DE LINHA HORIZONTAL

Também veja o exemplo 3:

<HR SIZE=70 WIDTH=7 ALIGN=LEFT>

Neste caso, você insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>). Verifique o resultado no seu navegador. Terá o aspecto abaixo? Se sim, então está correto.

FIGURA 2.10 – EXEMPLO DE LINHA HORIZONTAL

60


Seção 4 - Alinhamento de texto

Nesta seção, você aprenderá como alinhar um bloco de texto em sua página da web. Você estudará diversas tags para esta finalidade (centralizar um texto, formatar um bloco de texto). Ao fim saberá qual a melhor alternativa para tornar sua página da web melhor.

Alinhamento de bloco de texto As tags <DIV ALIGN=”…”> e </DIV> marcam uma divisão lógica de um documento, formatação bastante usada atualmente, e configuram o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).

A tag <DIV> é utilizada para delimitar um bloco de tags HTML de qualquer tipo e atinge todas as tags e o texto contido entre as de abertura e de fechamento.Existem vantagens da utilização da tag <DIV> em vez do atributo ALIGN:

Essa � tag precisa ser usada apenas uma vez, ao contrário do atributo ALIGN, que tem de ser incluído em diversas tags.

A � tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações etc.). O atributo ALIGN encontra-se disponível apenas em um número limitado de tags.

Veja o seguinte exemplo:

<DIV ALIGN=LEFT>

<H1>Exemplo de texto à esquerda</H1>

<p>Testando à esquerda</p>

</DIV>

61


Unidade 2

Verifique o seguinte resultado no navegador:

FIGURA 2.11 – EXEMPLO DE ALINHAMENTO DE BLOCO DE TEXTO À ESQUERDA

Centralização de texto As tags <CENTER> e </CENTER> centralizam os elementos - textos, imagens, tabelas - que estiverem dentro de sua marcação. A tag <CENTER> funciona de maneira idêntica a <DIV ALIGN=CENTER>, centralizando todo o conteúdo HTML contido entre as tags de abertura e de fechamento.

Acompanhe o seguinte exemplo:

<CENTER>

<H1>Exemplo de texto centralizado</H1>

<p>Testando.</p>

</CENTER>

Verifique o resultado no seu navegador.

62


FIGURA 2.12 - EXEMPLO DE ALINHAMENTO DE BLOCO DE TEXTO CENTRALIZADO

MargemOutro controle sobre o alinhamento dos elementos da página pode ser conseguido através de mudança, de configuração, de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito dessa tag pode ser acumulado para conseguir margens maiores.

Veja os exemplos:

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>

63


Unidade 2

O resultado no seu navegador parece-se com este da figura abaixo?

FIGURA 2.13 – EXEMPLO DE CONFIGURAÇÃO DE MARGEM

A tag <BLOCKQUOTE> é utilizada, principalmente, na criação de citações. Geralmente, as citações são destacadas em relação ao restante do texto através do recuo.

Atenção!

Se você não deseja aumentar a margem do texto, não utilize a tag <BLOCKQUOTE>. Por padrão, os códigos HTML não têm margem definida.

Texto pré-formatado Existe ainda uma outra forma de modificar o alinhamento. É a utilização do par de tags <PRE> e </PRE>. Usando essas tags, todos os espaços e entradas de parágrafo (o resultado da tecla ENTER) são respeitados. Em um texto normal, qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em, praticamente, qualquer lugar da página.

Apesar da vantagem dessa forma de alinhamento arbitrário, a tag <PRE> muda o tipo de caractere para uma fonte monoespaçada.

Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o “i” ocupa menos espaço do que o “a”, por exemplo.

64


Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

Acompanhe este exemplo:

<PRE> Este texto está pré-formatado. A fonte é monoespaçada e as entradas de parágrafo, assim como os espaços adicionais, são respeitadas.

Neste caso, a margem esquerda foi aumentada em cinco caracteres.</PRE>

O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no meio do texto. Entradas de parágrafos adicionais também são ignoradas.

Vamos ver o resultado no navegador?

FIGURA 2.14 – EXEMPLO DE FONTE MONOESPAÇADA

65


Unidade 2

Síntese

Como você aprendeu, a HTML é uma linguagem de marcação de texto usada para descrever documentos de hipertexto na WWW, que descreve uma página e o seu conteúdo, não a sua aparência.

Nesta unidade, você também aprendeu a estrutura básica de um documento HTML, como criar e visualizar arquivos em HTML simples. Aprendeu ainda a usar as tags de HTML apresentadas na tabela abaixo.

TAG USO

<HTML>...</HTML> Toda a página em HTML

<HEAD>...</HEAD> O cabeçalho, o prólogo da página em HTML

<BODY>...</BODY> Todo o restante do conteúdo da página em HTML

<TITLE>...</TITLE> O título da página

<H1>...</H1> Título de nível 1






<BR> Nova linha

<P> Parágrafo

<CENTER>...</CENTER> Alinhar o texto ao centro

<PRE> Pré-formatação

<BLOCKQUOTE>...</BLOCKQUOTE> Margem

<HR> Linha Horizontal

<DIV>...</DIV> Alinhamento de bloco de texto

66



Caro aluno, leia cada enunciado com atenção e responda as questões que seguem.

1. Em muitas páginas da web, as tags de estrutura de página (<HTML>, <HEAD>, <BODY>) não são usadas. Devo incluí-las mesmo que as páginas funcionem bem sem elas? Por que?

67


Unidade 2

2. Agora que você sabe o que é HTML, conhece algumas tags, possui os conhecimentos suficientes para criar páginas simples em HTML, e até navegou por arquivos em HTML (através dos exemplos) - crie uma página inicial em HTML com o nome de index.html, utilizando tags e atributos estudados nesta unidade.

68


Saiba mais

Aprofunde os conteúdos estudados nesta unidade ao consultar as seguintes referências:

MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programação para web. Editora Érica, 2005.

Também consulte o seguinte site para aprofundar seus estudos:

http://www.icmc.usp.br/ensino/material/html/edicao.html (Instituto de Ciências Matemáticas e de Computação)

3UNIDADE 3

Listas e Vínculos


Conhecer as � tags para listas.

Realizar comentários através do código HTML. �

Conhecer os vínculos realizados em HTML. �

Seções de estudo

Seção 1 Listas

Seção 2 Comentários

Seção 3 ‘Tudo’ sobre vínculos

70



Além dos cabeçalhos e parágrafos, é provável que o elemento HTML mais comum que você usará seja a lista. Depois de estudar esta unidade, você saberá criar uma lista em HTML e, mais que isso, saberá criar cinco tipos de listas, um tipo para cada ocasião.

A HTML define estes cinco tipos de listas:

Listas numeradas ou ordenadas; �

Listas com marcadores ou não-ordenadas; �

Listas de definição ou de glossário; �

Listas de menu e Listas de diretório. �

Você também estudará como realizar um comentário e como estabelecer os vínculos em HTML.

Vamos começar!

Seção 1 - Listas

Nesta seção, você estuda agora os cinco tipos de lista em HTML.

Todas as tags de lista possuem em comum estes elementos:

a lista inteira é delimitada pelas � tags de abertura e fechamento referentes ao tipo da lista;

cada item da lista tem sua própria � tag.

71


Unidade 3

Listas Numeradas ou OrdenadasAs listas numeradas são delimitadas pelas tags <OL>...</OL> e cada item da lista começa com a tag <LI>, onde:

OL = � Ordered List (lista ordenada)

LI = � List Item (item de lista)

A tag <LI> é unilateral, você não precisa especificar a tag de fechamento. A existência da próxima <LI> ou da tag de fechamento </OL> indica o final desse item na lista.

Quando o navegador interpreta uma lista ordenada, ele numera (e em geral recua) cada um dos elementos de forma seqüencial. Você não precisa numerá-los.


<OL>

<LI>item de uma lista numerada

<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

<LI>item de lista numerada

</OL>

Visualize o resultado em seu navegador:

FIGURA 3.1 – EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA

Listas ordenadas são aquelas em que cada item tem um número.

72


Atenção!

Utilize listas numeradas somente quando quiser indicar que os elementos estão ordenados, ou seja, nos casos em que os itens deverão ser apresentados nessa ordem específica.

As listas numeradas têm vários atributos que você pode utilizar para personalizar sua apresentação no navegador. Esses atributos permitem controlar várias características das listas, incluindo o esquema de numeração a ser usado e a partir de que número se vai iniciar a contagem (se você não quiser iniciar em 1).

Você pode personalizar listas ordenadas de duas maneiras:

como elas são numeradas; e �

em que número a lista começa. �

A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir o tipo de numeração a ser usado na lista:

“ � 1” - especifica que os algarismos arábicos padrões devem ser usados para numerar a lista (isto é, 1, 2, 3, 4 etc.);

“ � a” - especifica que as letras minúsculas devem ser usadas para numerar a lista (isto é, a, b, c, d etc.);

“ � A” - especifica que as letras maiúsculas devem ser usadas para numerar a lista (isto é, A, B, C, D etc.);

“ � i” - especifica que os algarismos romanos minúsculos devem ser usados para numerar a lista (isto é, i, ii, iii, iv etc.);

“ � I” - especifica que os algarismos romanos maiúsculos devem ser usados para numerar a lista (isto é, I, II, III, IV etc.).

Os tipos de numeração podem ser especificados na tag <OL>, como no exemplo a seguir, que utiliza o padrão TYPE=“a”.

73


Unidade 3

<OL TYPE=a>


<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário preocupar-se com a formatação das margens de texto


</OL>

Visualize o seguinte resultado no navegador:

FIGURA 3.2 – EXEMPLO DE LISTA ORDENADA PERSONALIZADA

Atenção!

Os navegadores da web geralmente ignoram os atributos que não entendem. Por exemplo, se um navegador não suportar o atributo TYPE da tag OL, ele simplesmente vai ignorá-lo quando o encontrar.

O atributo TYPE também pode ser aplicado na tag <LI>, mudando efetivamente o tipo de numeração no meio da lista. Quando o atributo TYPE é usado na tag <LI>, ele afeta o item em questão e todas as entradas que venham a seguir na lista.

Usando o atributo START, você pode especificar o número ou letra que inicia sua lista. O ponto inicial padrão é 1, é claro. Usando START, você pode mudar esse número. Por exemplo, <OL START=4> iniciaria a lista no número 4, enquanto <OL TYPE=“a” START=3> iniciaria a numeração com ‘c’ e percorreria o alfabeto a partir daí.

74


Veja o exemplo a seguir.

<OL TYPE=a START=3>


<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto


</OL>

O navegador apresenta o seguinte resultado:

FIGURA 3.3 – EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA PERSONALIZADA

Assim como no atributo TYPE, você pode mudar o valor do número de uma entrada em qualquer ponto da lista. Isto é feito usando-se o atributo VALUE na tag <LI>. A atribuição de um VALUE em uma tag <LI> reinicia a numeração na lista a partir da entrada afetada, como no exemplo a seguir:

75


Unidade 3

<OL>

<LI>item 1

<LI>item 2

<LI>item 3

<LI VALUE=55>item 55

<LI>item 56

</OL>

Veja o resultado em seu navegador.

FIGURA 3.4 – EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA PERSONALIZADA

Listas com Marcadores Não-ordenados ou Não-numeradosListas não ordenadas são aquelas em que os elementos podem ser apresentados em qualquer ordem. Estas listas se assemelham às listas ordenadas na HTML. A diferença é que a lista é indicada através das tags <UL>...</UL>, em vez de <OL>. Os elementos da lista são separados por <LI>, como nas listas ordenadas. Confira o exemplo:

<UL>

<LI>item 1

<LI>item 2

<LI>item 3

<LI>item 4

<LI>item 5

</UL>

76


E visualize-o no navegador:

FIGURA 3.5 – EXEMPLO NO NAVEGADOR DE UMA LISTA COM MARCADORES

Atenção!

Listas não-ordenadas são aquelas em que os itens são marcadores ou outros símbolos.

Assim como as listas ordenadas, as listas não-ordenadas podem ser personalizadas. De acordo com a especificação HTML, o atributo TYPE pode receber três valores possí veis, quando apresentados no Netscape Navigator:

disc � - configura um disco ou marcador (este é o padrão), na maioria das vezes representa um círculo preenchido;

square - � configura um quadrado;

circle � - este marcador gera um círculo não preenchido em navegadores compatíveis.

77


Unidade 3

Confira o exemplo:

<UL TYPE=disc>

<LI>Fita

<LI>CD

<LI>DVD

</UL>

<UL TYPE=square>

<LI>Fita

<LI>CD

<LI>DVD

</UL>

<UL TYPE=circle>

<LI>Fita

<LI>CD

<LI>DVD

</UL>

Este exemplo é assim visualizado:

FIGURA 3.6 – EXEMPLO NO NAVEGADOR DE UMA LISTA PERSONALIZADA COM MARCADORES

78


Cada item de uma lista com marcadores não-ordenados também pode ter seu atributo específico, através do TYPE na tag <LI>:

<UL>

<LI TYPE=disc>um item

<LI TYPE=circle>mais um item

<LI TYPE=square>último item

</UL>

Veja o resultado no seu navegador:

FIGURA 3.7 – EXEMPLO NO NAVEGADOR DE UMA LISTA PERSONALIZADA COM MARCADORES

As listas com marcadores em HTML são equivalentes às listas com marcadores do Microsoft Word. A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, distinção que veremos mais adiante.

Listas de Glossário ou Listas de DefiniçãoAs listas de definição são também chamadas ‘listas de glossário’. Elas são um pouco diferentes das outras listas. Cada item de uma lista de glossário tem estes dois componentes:

um termo; �

a definição do termo. �

79


Unidade 3

Uma lista de glossário permite incluir uma descrição de cada item listado. O descritor <DL> e os descritores <DT> e <DD> fazem esta função.

Cada componente da lista de glossário possui sua própria tag:

<DT>: para o termo ( � Definition Term)

<DD>: para a respectiva definição ( � Definition Definition)

Essas tags são unilaterais e, em geral, apresentadas aos pares, embora a maioria dos navegadores possa tratar <tratar o quê?> com definições ou termos específicos. A lista de glossário inteira é indicada pelas tags <DL>...</DL> (Definition List)

Eis um exemplo de uma lista de glossário:

<DL>

<DT>termo a ser definido

<DD>definição


<DD>definição

</DL>

Considere a seguinte visualização:

FIGURA 3.8 – EXEMPLO NO NAVEGADOR DE UMA LISTA DE GLOSSÁRIO

80


Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, pois permite a tabulação do texto. Um exemplo de ocorrência desta lista são os índices de navegação presentes em muitas páginas de tutoriais na web.

Listas de Menu e Listas de DiretóriosListas de menu são listas de itens ou parágrafos curtos sem marcadores, números ou qualquer outro símbolo. Essas listas se assemelham às listas simples de parágrafos. A diferença é que alguns navegadores podem recuá-las ou formatá-las de maneira diferente dos parágrafos normais. As listas de menu são delimitadas pelas tags <MENU> e </MENU> e cada item da lista é indicado pela tag <LI>.

As listas de diretórios são destinadas a itens ainda mais curtos do que os da lista de menu e devem ser formatadas pelos navegadores horizontalmente em colunas. As listas de diretório são delimitadas pelas tags <DIR> e </DIR> e a tag <LI> identifica cada item da lista. Veja o exemplo abaixo:

<MENU>

<LI>maça

<LI>laranja

<LI>goiaba

</MENU>

Veja o resultado no seu navegador que é como se fosse mostrada uma lista. Conforme descrito anteriormente, o que diferencia é o recuo que alguns navegadores podem adotar.

81


Unidade 3

FIGURA 3.9 – EXEMPLO NO NAVEGADOR DE UMA LISTA DE MENU E LISTA DE DIRETÓRIO

Atenção!Embora as listas de menu e de diretório existam na especificação HTML 2.0, não são muito utilizadas em páginas na web. Na HTML 4.0 elas são consideradas diferentes das listas não-ordenadas e das listas de glossário - por serem representadas de modo diferente na, aparência, em relação às listas não ordenadas ou de glossário -, mas os navegadores ainda não as implementam de modo diferente. Considerando que a maioria dos navegadores formata menus e diretórios da mesma forma que as listas de glossário ou listas não-ordenadas, e não da forma como estão descritas na especificação, é provável que a melhor opção seja utilizar os outros 3 formatos de lista (LEMAY; LAURA).

A maioria dos navegadores aceita o uso da tag <LI> fora de uma estrutura de lista, isolada na página e a formatará como um parágrafo simples ou como um item com marcador, mas sem recuo. Contudo, segundo a verdadeira definição HTML, o uso de uma tag <LI> é inválido dessa forma. Por isso, as páginas em HTML adequadas não devem usá-la assim. E como estamos procurando criar páginas em HTML corretas, você não deverá fazer uso desse método. Assim, inclua sempre os seus itens nas listas a que pertencem.

82


Aninhamento de ListasO que acontece quando você insere uma lista em outra? Já parou para pensar? Já tentou criar?

As listas podem ser aninhadas sim. Apenas inclua a estrutura inteira de uma lista na outra lista, como se fosse um de seus elementos. Digite o exemplo seguinte no bloco de notas e verifique seu resultado no navegador.

<DL>


<DD>definição

<OL>



<UL>

<LI>item de uma lista

</UL>


</OL>


<DD>definição

</DL>

O recuo de listas aninhadas no próprio código HTML ajuda a mostrar no layout final, o seguinte relacionamento entre as listas:

FIGURA 3.10 – EXEMPLO NO NAVEGADOR DE LISTAS ANINHADAS

83


Unidade 3

Considere o seguinte exemplo:

<HTML>

<HEAD>

<TITLE>Exemplo</TITLE>

</HEAD>

<BODY BGCOLOR=”black” TEXT=”yellow”>

<UL>

<LI>1</LI>

<LI>2</LI>

<LI>3</LI>

<UL>

</BODY>

</HTML>

Vamos verificar o resultado em seu navegador? Que tal publicar na ferramenta EXPOSIÇÃO do EVA?

Atenção!

Boa parte dos editores HTML (WYSIWYG ou não) insere marcações que não existem em HTML. Exemplos típicos são </DD>, </DT>, e </LI>. Porém, como essas tags não são reconhecidas pelos navegadores, elas não causam efeito colateral algum nos documentos.

84


Um exemplo deste caso:

<UL>

<LI>Documentos básicos

<LI>Documentos avançados

<UL>

<LI>formulários

<UL>

<LI>CGI

</UL>

<LI>contadores

<LI>relógios

</UL>

<LI>Detalhes sobre imagens

</UL>

Veja o resultado no navegador:


Observe que estas mesmas listas também não apresentariam numeração em formato 1.1, 1.2 etc., quando ordenadas e compostas:

85


Unidade 3

1. Documentos básicos

2. Documentos avançados

1. formulários

1. CGI

2. contadores

3. relógios

3. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

<OL TYPE=I>

<LI>Documentos básicos

<LI>Documentos avançados

<OL TYPE=a>

<LI >formulários

<OL TYPE=i>

<LI>CGI

</OL>

<LI>contadores

<LI>relógios

</OL>

<LI>Detalhes sobre imagens

</OL>

86


Vamos testar o exemplo acima no seu navegador e verificar o resultado? Ele apresenta-se como o visualizado abaixo!


Um outro exemplo de listas aninhadas são as listas de glossários, descritas tal como no exemplo a seguir:

<DL>

<DT>Imperadores do Brasil:

<DD>D. Pedro I

<DL>

<DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

</DL>

<DD>D. Pedro II

<DL>

<DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

</DL>

</DL>

87


Unidade 3

Vamos visualizar o exemplo acima no seu navegador?! Qual o resultado? Publique este resultado também na ferramenta EXPOSIÇÃO no ambiente virtual EVA.

Atenção!

Se você não está vendo diferença alguma entre as listas comuns e as que têm atributos TYPE, isto se deve ao fato de seu navegador não estar reconhecendo esses atributos como válidos. Trata-se de um navegador de versão antiga. Deve-se pensar nisto quando usamos atributos mais recentes, pois nem todo usuário poderá ver o resultado das novas marcações.

Seção 2 - Comentários

Você pode incluir comentários em páginas em HTML para descrever a própria página ou para fornecer alguma indicação de seu status. O texto inserido é ignorado quando o arquivo em HTML é analisado. Os comentários nunca são apresentados na tela – por isto são comentários. Eles têm um formato semelhante ao seguinte:



Em versões mais atuais da HTML, você pode comentar também várias linhas assim:



Aqui tem um exemplo de comentário!!

Ele não apareceu escrito!!

88


Visualize o exemplo acima no seu navegador:

FIGURA 3.13 — EXEMPLO DE COMENTÁRIO

Atividade de auto-avaliação

A partir de seus estudos, leia com atenção e resolva a atividade programada para a sua auto-avaliação.

1. Crie uma página HTML chamada de MinhaLista.html e crie listas aninhadas nesta página. Não esqueça de comentar o seu código HTML.

89


Unidade 3

Seção 3 - ‘Tudo’ sobre vínculos

Até agora, produzimos apenas um documento bastante simples, que poderia ser composto com recursos muito mais sofisticados, em qualquer processador de texto. Mas nesta seção, falaremos de documentos de hipertexto, que podem fazer ligações com outros textos.

Com HTML é possível você fazer ligações de uma região de texto (ou imagem) a um outro documento. O navegador destaca regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links, como você já estudou na unidade 1.

Para criar um vínculo em HTML, você precisa de dois componentes:

o nome do arquivo � (ou URL do arquivo) com o qual deseja estabelecer o vínculo;

o texto que será destacado no navegador � e deverá ser selecionado pelos usuários para acompanhar os vínculos.

Apenas este segundo componente estará visível na sua página. Quando você clicar sobre o texto que aponta para o vínculo, o navegador reconhecerá o primeiro componente como o local para onde deverá ‘ir’.

A tag de vínculo <A>Para criar um vínculo em uma página em HTML, você deverá utilizar a tag de vínculo <A>...</A>. Esta tag é chamada também de tag de âncora, pois pode ser utilizada para criar âncoras para vínculos, como você aprenderá mais à frente. No entanto, a tag de vínculo costuma ser mais utilizada, em geral, na criação de vínculos com outras páginas. Dentro dessa tag, na forma de atributo, é colocada a referência ao arquivo ligado. A referência indica a URL do documento. Quando o usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo ligado será requisitado ao servidor e mostrado na janela do navegador.

90


Atributos

A tag <A> tem vários atributos, utilizados conforme a ação associada ao link. Os mais usados são:

HREF - indica o arquivo de destino da ligação de �

hipertexto ou o endereço de uma página HTML.

TARGET - indica o � frame em que será carregado o arquivo de destino. Maiores detalhes, você verá na unidade 7, que aborda frames.

NAME - marca um indicador, isto é, a região de um �

documento como destino de uma ligação.

Veja o exemplo abaixo:

<A HREF=’.../cadastro/menu.htlm’>Acesse o Menu Principal</A>

Neste exemplo, o texto ‘Acesse o Menu Principal’ aparece no navegador realçado de alguma forma, normalmente, em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mãozinha quando colocado sobre o texto realçado. Ao clicar no link, o arquivo ‘menu.html’, do diretório ‘/cadastro/’ será mostrado na tela.

Arquivo a ser carregado quando o link é selecionado

Tag de abertura

Texto que será selecionado

Tag de fechamento

91


Unidade 3

Referência de HipertextoColocando uma URL no atributo HREF da tag <A>, pode-se ligar uma página com qualquer outro documento disponível na internet, ou seja, é possível estabelecer uma referência de hipertexto em função de tags que criam links para outras páginas da internet. Pode-se fazer uma página com uma lista de páginas preferidas da rede com suas devidas ligações de hipertexto.

Veja este modelo:

<a href=”http://endereçodapagina.htm”>Aqui vai o nome ou o endereço da página para a qual você está apontando o link</a>

Vamos verificar o resultado no navegador?

FIGURA 3.14 — EXEMPLO DE VÍNCULO

Por exemplo, para colocar um link da UnisulVirtual na sua página, escreva:

<a href=http://www.virtual.unisul.br>UnisulVirtual</a>

Um visitante na sua página que clicar sobre o link UnisulVirtual será levado à página principal do site.

92


Links na mesma Página (âncora)A tag <A> com o atributo NAME permite que você crie links internos na mesma página, ou seja, faz com que a âncora indicada (por isso também chamado de indicador) seja o destino de um link.

Observe este exemplo:

<A HREF=”#explicação”>Saiba mais sobre o meu site</A><P><hr>

Escrevendo um texto em HTML com vínculos.<P><br><br><br><br><br><br><br>

<A NAME=”explicação”>O meu site</A>

O exemplo acima, ‘Saiba mais sobre o meu site’ está vinculado à região chamada ‘O meu site’. Ou seja, quando um usuário clicar sobre ‘Saiba mais sobre o meu site’, será levado para a região, na mesma página, chamada ‘Meu site’. O caractere ‘#’ indica que se trata de um link em uma mesma página.

Atenção!

Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.

Veja o resultado no navegador:

FIGURA 3.15 – EXEMPLO DE LINK NA MESMA PÁGINA

93


Unidade 3

No exemplo do navegador acima, quando o usuário clicar em “Saiba mais sobre o meu site”, o link levará o usuário a mesma página onde foi marcado o ponto de chegada, neste caso “O meu site”. Veja:

FIGURA 3.16 – EXEMPLO DE LINK NA MESMA PÁGINA

Quando construímos links para trechos determinados de outros documentos, precisamos saber quais trechos do documento destino estão marcados para ponto de chegada de um link.

Atenção!

Lembre-se que os nomes das âncoras não contêm caracteres #. Somente os vínculos correspondentes contêm esses caracteres.

Uma referência a uma outra parte do mesmo documento é particularmente útil quando se está fazendo o índice de um texto. Vejamos um outro exemplo:

<A HREF=#cap1>Capítulo 1</A>

Enquanto o alvo do link fica desta forma:

<A NAME=cap1>Capítulo 1</A>

94


Neste exemplo, quando o usuário clicar sobre o link <A HREF=#cap1>Capítulo 1</A>, ele será remetido ao ponto onde está a referência <A NAME=cap1>Capítulo 1</A>. A parte do texto que é referenciada (o alvo de um link) não fica realçada como os hyperlinks. Além de ser invisível, não é obrigatório que exista um link apontando para ele.

Atenção!

As âncoras fazem distinção entre maiúsculas e minúsculas. Por isto, se o navegador não conseguir localizar o nome de uma âncora que tenha a grafia exata, é possível que ele tente selecionar outro nome semelhante contido na página. Isto varia em função do comportamento do navegador.

Link para e-mailA tag <A> também permite que os visitantes mandem e-mail para o autor do site, ao clicar no endereço. É possível esta ação a partir do seguinte modelo:

<A HREF=mailto:[email protected]>Mande-me um e-mail</A>

Vínculos de Páginas Locais através de Nomes de Caminhos Absolutos e RelativosAqui você verá exemplos de como estabelecer vínculos entre páginas que estejam contidas na mesma página ou em diferentes pastas (ou diretórios) de seu disco local (páginas locais). Os links podem estar indicados como caminhos relativos ou absolutos.

95


Unidade 3

Caminho RelativoQuando você especifica, entre aspas, apenas o nome do caminho de um arquivo vinculado, o navegador procura esse arquivo no diretório em que está armazenado o arquivo atual. Isso ocorre mesmo se o arquivo atual e o arquivo com que se está estabelecendo o vínculo estejam armazenados em um servidor localizado em algum outro ponto da rede. Os dois arquivos estão contidos no mesmo diretório nesse servidor. Essa é a forma mais simples de nomear o caminho relativo.

Atenção!

O caminho relativo deve ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual.

O nome de um caminho relativo pode conter também o nome de diretório(s) ou indicar o caminho que você tomaria para navegar até esse arquivo, se tivesse partido do diretório ou pasta atual. Um nome de caminho pode conter, por exemplo, as direções a serem percorridas para subir dois níveis de diretório e, em seguida, descer outros dois para obter acesso ao arquivo.

Não esqueça!

Os nomes de caminhos relativos indicam os arquivos com base em sua localização relativa, ou seja, na posição em que se encontram em relação ao arquivo atual.

96


A tabela abaixo mostra alguns exemplos de nomes de caminhos relativos e seus significados:

Nome do caminho Descrição

HREF=“arquivo.html” Arquivo.html está localizado na pasta atual.

HREF=“docs/arquivo.html” Arquivo.html está localizado na pasta (ou diretório) docs e a pasta docs está localizada na pasta atual.

HREF=“../arquivo.html” Arquivo.html está localizado na pasta situada um nível acima da pasta atual (pasta ou diretório superior)

HREF=“../../docs/arquivo.html”

Arquivo.html está localizado na pasta docs, sendo que esta pasta está localizada dois níveis acima da pasta atual.


Veja o <A HREF=”exemplos/doc2.html”>exemplo de caminho relativo</A>.

A referência cruzada entre arquivos armazenados no mesmo computador, mas em diretórios diferentes merece bastante atenção. Digamos que existam dois diretórios colocados no mesmo nível. Um chamado música e o outro comida. Um arquivo chamado ‘rock.htm’, do diretório música deve fazer uma referência ao arquivo ‘feijoada.htm’, do diretório comida. A âncora de hipertexto do documento ‘rock.htm’ deve ficar assim:

<A HREF=../comida/feijoada.htm>Tudo sobre feijoada</A>

Pode-se colocar referências do tipo <A NAME> em um documento longo para que outras pessoas que estejam navegando na web possam fazer ligações para determinadas partes do texto.

97


Unidade 3

Para citar uma determinada parte de um outro texto, a referência é:

<A HREF=exemplo.htm#capitulo1>Capítulo 1 do Exemplo</A>

Neste caso, ‘exemplo.htm’ é o nome do arquivo referenciado e ‘capítulo1’ é a referência a uma parte daquele texto.

Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando. Quando há alguma dúvida, o melhor é usar o caminho absoluto.

Caminho AbsolutoUtilize o caminho absoluto quando desejar referenciar um documento que esteja em outro servidor.

No vínculo seguinte, por exemplo, é oferecido um link para um documento no servidor WWW da Unisul:

<A HREF=”http://www.unisul.br/ “>Universidade do Sul de Santa Catarina</A>

Com esta mesma sintaxe, é possível escrever links para qualquer servidor de informações da internet.

Veja este outro exemplo:

São Carlos é um <A HREF= “/ambiente/saocarlos/histprog.html#polo”>pólo de alta tecnologia</A>.

Neste caso, foi produzido um link para um parágrafo marcado com <A NAME=”polo”> no arquivo histprogr.html sobre a cidade de São Carlos, no diretório /ambiente/saocarlos/.

98


Cores dos Hyperlinks Da mesma forma que é possível definir cores diferentes para o fundo e o texto, pode-se mudar a cor dos links. As cores das âncoras de hipertexto variam de acordo com a sua condição: visitados, nunca visitados e ativos. Assim, os navegadores sabem quais foram os hyperlinks já visitados pelo usuário em um determinado período de tempo. Por isso, a cor dos links já visitados deve ser diferente da cor das referências nunca visitadas. Além disso, o link pisca em uma cor ainda diferente dessas duas logo depois que é clicado pelo usuário.

A cor dos links é definida no tag <BODY> como já foi estudado na unidade 2.

<BODY LINK=”red” ALINK=”blue” VLINK=”green”>

Onde:

LINK - determina a cor dos � links não visitados;

ALINK - determina a cor que os � links devem piscar quando clicados;

VLINK - determina a cor dos � links já visitados.

Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para não confundir os usuários, a cor dos links já visitados deve ser uma versão mais clara da cor das ligações ainda não visitadas.

99


Unidade 3

Síntese

Amigos, mais uma unidade vencida! Nesta unidade, aprendemos como criar os mais diferentes tipos de listas. As listas podem ser as seguintes:

Tipo de lista Sintaxe Exemplo

Ordenada <OL>conteúdo</OL><OL> <LI>item</LI></OL>

Não-Ordenada <UL>conteúdo</UL><UL> <LI>item</LI></UL>

Definição <DL>conteúdo</DL>

<DL> <DT>termo</DT>

<DD>definição</DD></DL>

Você também aprendeu como criar vínculos de uma página à outra na internet, através da tag <A> com o atributo HREF.

Tipo de vínculo Sintaxe Exemplo

Localização HREF=”LOCALIZAÇÃO” <A HREF=”http://link.da/pagina.html”> texto</A>

Abrir Nova Janela TARGET=”_BLANK” <A HREF=”http://link.da/pagina.html” TARGET=”_

BLANK”>texto</A>

Mail HREF=”mailto:MAIL” <A HREF=”mailto:[email protected]”> texto</A>

100



Leia com atenção e resolva a seguinte atividade de auto-avaliação.

1. Você pode colocar qualquer URL em um vínculo? Comente esta questão na ferramenta FÓRUM no Espaço UnisulVirtual de Aprendizagem e discuta com os colegas!

Saiba mais


MARCONDES, Christian Alfim. � HTML 4.0 fundamental: a base da programação para web. Editora Érica, 2005.

Também consulte o(s) seguinte(s) site(s) para aprofundar seus estudos:

http://home.fmh.utl.pt/~cferreira/informatica/pdf/webpages.pdf �

4UNIDADE 4

Formatação de Texto


� Especificar o aspecto visual dos caracteres.

� Incluir caracteres especiais.

Alterar a fonte e o tamanho da fonte. �

Seções de estudo

Seção 1 Estilos de Caracter

Seção 2 Caracteres Especiais

Seção 3 Formatação do Texto

Seção 4 A Tag <blink> e <marquee>

Seção 5 Endereços

102



Você já aprendeu os conceitos básicos da HTML, que abrangem vários elementos básicos da página e vínculos. Com esse conhecimento, você está agora preparado para aprender um pouco mais sobre o que a HTML oferece no que diz respeito à formatação do texto e à elaboração do layout das páginas.

Esta unidade descreve várias tags e atributos. Mas não se preocupe em memorizar tudo. Dedique-se apenas a aprender os diversos tipos de formatação que você pode utilizar na HTML.

Seção 1 - Estilos de Caracter

Quando você utiliza uma tag HTML em parágrafos, cabeçalhos ou listas, essas tags afetam esse bloco de texto como um todo, alterando a fonte, o espaçamento acima e abaixo da linha ou incluindo caracteres (como as listas com marcadores). Os estilos de caracter são tags que afetam as palavras ou caracteres contidos em outras entidades HTML e alteram o aspecto visual do texto de forma a diferenciá-lo do texto restante, como por exemplo, através do negrito, sublinhado.

Há dois tipos de formatação em HTML:

as � tags de estilo lógico;

e as � tags de estilo físico.

Os efeitos de apresentação na tela, a partir destes dois tipos de formatação, são os mesmos. O motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. Então, para alterar a aparência de um conjunto de caracteres contidos no texto, você pode usar esses dois estilos.

103


Unidade 4

Estilos LógicosAs tags de estilo lógico indicam como o texto destacado deverá ser utilizado e não como será apresentado (formatado). Elas se assemelham às tags de elementos comuns, utilizadas para parágrafos ou cabeçalhos. Essas tags podem indicar uma definição, um segmento de código ou uma palavra enfatizada.

Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve apresentar alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o navegador - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o usuário final.

Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação dos cabeçalhos, parágrafos, listas etc.

A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o navegador, podendo oferecer resultados mais ricos.

Cada tag de estilo de caracter contém lados de abertura e de fechamento e afeta o texto contido entre essas duas tags. Existem 8 tags padrão para esse estilo:

104


Tabela 4.1 - Estilos Lógicos

Tag de Estilo lógico

Definição Exemplo

<CITE> Para títulos de livros, filmes, e citações curtas.

<CITE>Assisti Guerra nas Estrelas umas oito vezes!</CITE><P> Este trecho foi citado no livro X <CITE>(Silva, 2006)</CITE></P>

<CODE> Para indicar trechos de código de programas.

<CODE>for (x=0); cl &&(!feof(stdin)); x++)); </CODE><CODE>#include “teste.h”#</CODE>

<DFN> Indica definição de uma palavra ou expressão. Em geral apresenta o texto em itálico.

<DFN>CERN: Centre d`Éstudes et Recherches Nucleaires </DFN>

<EM>

Ênfase. Indica que os caracteres deverão ser enfatizados de alguma forma. Em geral, apresentada em itálico.

É preciso pesquisar <EM>muito</EM> para encontrar o termo exato.

<KBD> Indica uma entrada via teclado, ou seja, o texto a ser digitado pelo usuário.

Para ler mensagens recebidas, digite <KBD> pine -i </KBD>

<SAMP>

Indica uma seqüência de caracteres, por exemplo, uma mensagem de erro ou um resultado ou um texto de exemplo. Semelhante a <CODE>.

O resultado do primeiro applet é: <SAMP> Hello, World! </SAMP>

<STRONG> Forte ênfase, mostrado normalmente em negrito.

Antes de enviar um e-mail, <STRONG> confira o campo “Subject:”! </STRONG>

<VAR>

Indica variáveis ou valores que o usuário deverá escrever. Geralmente mostrado em itálico ou sublinhado.

No campo Login, escreva <VAR> guest. </VAR>

Fonte: LEMAY, 1998.

Estilos FísicosA formatação física especifica o estilo que se quer para o texto. Ou seja, existe um conjunto de tags que altera realmente o estilo de apresentação de um texto: itálico, grifado, negrito, espaçamento etc. Sua apresentação final não sofre grandes variações. Assim como as tags de estilos de caracter lógico, cada tag de formatação física contém uma tag de abertura e uma tag de fechamento. As tags de estilo físico são as descritas a seguir:

105


Unidade 4

Tabela 4.2 - Estilos Físicos

Tag deEstilo Físico

Definição Exemplo

<B>Negrito (Quando disponível em alguns navegadores pode aparecer sublinhado).

<B>Texto em negrito</B>

<I> Itálico. <I>Texto em itálico</I>

<TT>Fonte de máquina de escrever com espaçamento uniforme (monoespaçada).

<TT>Texto monoespaçado </TT>

<U> Sublinhado. <U>Texto sublinhado</U>

<STRIKE> ou <S> Tachado. <S>Texto Tachado</S>

<BIG> Fonte maior que a do texto ao redor. Testando a <BIG>fonte</BIG> maior.

<SMALL> Fonte menor. Testando a <SMALL> fonte </SMALL> menor.

<SUB> Subscrito. Frase em estilo índice, como em H2O.

<SUP> Sobrescrito. Frase em estilo expoente, como em Km2.

Fonte: LEMAY, 1998.

Atenção!

Utilize a Tag <U> com cuidado, pois ela se confunde com a apresentação de links.

As tags de estilo podem ser usadas umas sobre as outras, acumulando seus efeitos. Você pode aninhar tags de caracter, como nos exemplos abaixo:

106


<B><I>Texto em negrito e itálico</I></B><P>

<B><TT>Texto monoespaçado em negrito</TT></B><P>

<I><TT>Texto monoespaçado em itálico</TT></I><P>

<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>

Vamos visualizar o exemplo acima no navegador:

FIGURA 4.1 – EXEMPLO DE TAGS DE ESTILO

Ao contrário de <PRE>, a tag <TT> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, a tag <TT> funciona exatamente como texto normal.

Entretanto, o resultado na tela dependerá do navegador utilizado. Sobretudo em navegadores baseados em texto como, por exemplo, o Lynx, algumas dessas tags não poderão ser representadas visualmente.ASCII (American Standard Code

for Information Interchange) é um conjunto de códigos para o computador representar números, letras, pontuação e outros caracteres.

107


Unidade 4

Seção 2 - Caracteres Especiais

Não é recomendável que os documentos web contenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado.

Os arquivos HTML são textos ASCII que não devem conter formatação ou caracteres especiais. Na verdade, os únicos caracteres que deverá incluir nos seus arquivos HTML são os que constam no seu teclado. Se você tiver de pressionar qualquer tecla que não seja a tecla SHIFT ou pressionar uma combinação complexa de teclas para produzir um único caracter, então você não poderá usar esse caracter no seu arquivo em HTML. Isso se aplica também a caracteres que talvez você esteja acostumado a usar, como travessões, por exemplo.

Mas, espere um instante! Sabemos o que você está pensando: se eu posso digitar um caracter, como um marcador ou um ‘a’ acentuado no meu teclado através de uma seqüência de teclas especiais, incluindo-o assim no meu arquivo em HTML, e o meu navegador é capaz de apresentá-lo corretamente, qual é o problema?

O problema, neste caso, é que a codificação interna feita pelo seu computador para produzir esse caracter (que permite a apresentação de forma apropriada no seu arquivo em HTML e no seu navegador) provavelmente não poderá ser convertida em outros computadores. Se uma outra pessoa estiver lendo o seu arquivo HTML na internet com esse caracter especial, é provável que acabe vendo outro caracter na tela, o que costumamos chamar de “lixo”. Ou, dependendo de como a sua página for apresentada na internet, o caracter poderá se perder antes de chegar ao computador em que o arquivo está sendo exibido.

E o que você pode fazer? A HTML oferece uma solução razoável. Ela define um conjunto especial de códigos, que são chamados de entidades de caracter. Você pode incluir essas entidades nos seus arquivos em HTML para representar os caracteres que deseja usar. Quando interpretadas pelo navegador, essas entidades são apresentadas como caracteres apropriados para a plataforma e a fonte especificadas.

108


Por exemplo, quando alguém copia uma página web e a envia para outra pessoa através de correio eletrônico. Para contornar este problema, existe uma tabela de códigos que substituem os acentos. Os navegadores transformam estes códigos em caracteres acentuados e o documento poderá ser transmitido por qualquer meio.

HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um ‘&’ inicial, um ‘número’ ou ‘cadeia de caracteres’ correspondente ao caracter desejado, e um ‘;’ final. Dessa forma, para usar a palavra “café” no seu arquivo HTML, você deveria usar:

Café

Ou

Café

Acompanhe como fica esta palavra em seu navegador:

FIGURA 4.2 - EXEMPLO DE VISUALIZAÇÃO DO USO DE CARACTERES ESPECIAIS

No exemplo acima, eacute e #233 equivale ao caracter e acentuado na tabela ASCII.

Suponha agora que você queira incluir em um arquivo em HTML uma linha de código semelhante a esta:

109


Unidade 4

<CODE>se (x < 0) então</CODE>

A HTML não é capaz de representar essa linha da forma como foi digitada. Por que? O problema está relacionado ao caracter < (menor que). Para um navegador HTML, esse caracter significa “este é o início de uma tag”. Como nesse contexto o caracter < (menor que) não representa o início de uma tag, o navegador ficará confuso. Dessa forma, para ser gravada de forma correta para a HTML, essa linha de código deveria ser apresentada da seguinte forma:

<CODE>se (x < 0) então</CODE>

Acompanhe a visualização do texto em questão:

FIGURA 4.3 - EXEMPLO DE VISUALIZAÇÃO DE UMA LINHA DE CÓDIGO DE PROGRAMA

Quatro caracteres ASCII: <, >, & e “ têm significados especiais em HTML e são usados dentro de documentos seguindo esta correspondência:

Entidade Caracter

< <

> >

ISO Latin1: ASCII com extensões para idiomas Europeus

110


& &

" “

Outras seqüências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em português:

Entidade Caracter

á á

â â

à à

ã ã

ç ç

é é

ê ê

í í

ó ó

ô ô

õ õ

ú ú

ü ü

Entidade Caracter

Á Á

Â Â

À À

Ã Ã

Ç Ç

É É

Ê Ê

111


Unidade 4

Í Í

Ó Ó

Ô Ô

Õ Õ

Ú Ú

Ü Ü

Como vemos, as seqüências de escape são sensíveis à caixa (alta ou baixa). Os editores de HTML fazem essa tradução automaticamente.

Alguns editores, no entanto, mantêm a acentuação sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo:

<HTML>

<HEAD>

<TITLE>...</TITLE>

<META HTTP-EQUIV=”Content-Type”

CONTENT=”text/html; charset=ISO-8859-1”>

</HEAD>

</HTML>

Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo:

© para o símbolo ©; �

® para ®, e; �

§ para §. �

112


Por que usar essas formatações?Por causa de um problema técnico relativo à transmissão dos caracteres especiais de várias línguas.

Chama-se conjunto de caracteres uma representação digital de texto. O conjunto de representação amplamente utilizado é o ASCII. O ASCII padrão tem 7 bits, porém são usadas versões particulares desse padrão - o ASCII americano, ASCII português etc., que utilizam 8 bits.

Se você gera um texto em ASCII de 8 bits e, na transmissão, esse texto é tratado por um sistema que “compreende” apenas o ASCII de 7 bits, então os caracteres especiais serão transformados em caracteres diferentes, pela perda do oitavo bit.

Como usuário da Internet, você já deve ter sofrido experiência semelhante com mensagens de e-mail, que chegam com caracteres estranhos, ou páginas da web com textos em japonês ou russo.

Seção 3 - Formatação do Texto

A tag <FONT> é usada para controlar as características de determinado conjunto de caracteres, que por sua vez não é representado pelos estilos de caracter Lógico e Físico, como vimos na seção 1 desta unidade. Originalmente, essa tag era usada apenas para controlar o tamanho da fonte dos caracteres delimitados por ela. Mas tem sido expandida no sentido de permitir que você altere a própria fonte e a cor desses caracteres.

Tamanho da FonteO uso mais comum da tag <FONT> consiste em alterar o tamanho da fonte de um caracter, palavra, frase ou qualquer texto. As tags <FONT> e </FONT> delimitam o texto e o atributo <SIZE> indica o tamanho a ser atribuído à fonte. Os

113


Unidade 4

valores desse atributo variam de 1 a 7 e o valor 3 corresponde ao tamanho padrão. O modelo é o seguinte:

<FONT SIZE=tamanho_da_letra>Texto</FONT>

A formatação acima permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. Veja o exemplo a seguir:

<FONT SIZE=7>Texto</FONT>

Visualize o exemplo acima no seu navegador:

FIGURA 4.4 – EXEMPLO DE VISUALIZAÇÃO DE TAMANHO DE FONTE

Você pode também indicar o tamanho na tag <FONT> como um valor relativo, através da utilização dos caracteres + ou - no valor do atributo SIZE. Como o padrão é 3, você pode alterar os tamanhos de fonte relativos de -3 a +4, da seguinte maneira:

<FONT SIZE=+2>Letra maior</FONT><p>

Letra normal<p>

<FONT SIZE=-2>Letra menor</FONT>

114


Vamos visualizar este exemplo no seu navegador? O que aconteceu? Comente:

A tag <FONT> pode ser atribuída a qualquer parte do texto, com exceção dos títulos. Não existe nenhuma relação entre os valores no atributo SIZE e o número de pontos (pixels - a unidade utilizada para medir os caracteres). Portanto, o melhor é experimentar todos os tamanhos e avaliar o resultado. Observe os exemplos:

<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P>






<FONT SIZE=1>Texto com FONT SIZE=1</FONT>

Acompanhe a visualização:

115


Unidade 4

FIGURA 4.5 - EXEMPLO DE VISUALIZAÇÃO DE VÁRIOS TAMANHOS DE FONTE

A tag <FONT> também pode ser utilizada com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.

<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>

Veja a visualização do código HTML acima no seu navegador.

FIGURA 4.6 – EXEMPLO DE VISUALIZAÇÃO DE TAMANHO DE FONTE DIFERENTE ENTRE OS CARACTERES DE UM TEXTO

116


Também é possível modificar o tamanho de todo o texto de uma vez só colocando a tag <BASEFONT> no topo do texto. Confira o exemplo:

<BASEFONT SIZE=5> Aqui todo o texto está em um único<br>tamanho de fonte.

Visualização:

FIGURA 4.7 – EXEMPLO DE VISUALIZAÇÃO DE TAMANHO DE FONTE DE TODO O TEXTO

Como alterar o tipo da fonte O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto. Assim, o autor de uma página web pode definir com este navegador qual será o tipo de fonte de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows, por exemplo.

O atributo FACE na tag FONT recebe como valor um conjunto de nomes de fonte, delimitados por aspas e separados por vírgulas. Quando um navegador que oferece suporte ao atributo FACE interpretar uma página que o contém, ele localizará no sistema cada um nos dos nomes de fonte especificados. Se não conseguir encontrar o primeiro nome, procurará o segundo, depois, o terceiro e assim por diante, até localizar uma fonte que esteja instalada no sistema. Se nenhuma das fontes especificadas for localizada, será utilizada a fonte padrão.

O modelo de sintaxe completa da tag FONT ficaria assim:

117


Unidade 4

<FONT face=”tipologia” size=”tamanho” color=”cor”></FONT>

Onde:

o atributo FACE determina o tipo da fonte; �

o atributo SIZE, como já foi estudado, o tamanho da �

fonte; e

o atributo COLOR a cor do texto que vier escrito entre �

essas tags.

Por exemplo:

<FONT face=”arial” SIZE=6 COLOR=”red”>O texto será escrito em vermelho, com fonte arial e tamanho 6.</FONT>


FIGURA 4.8 - EXEMPLO DE VISUALIZAÇÃO DE FORMATAÇÃO DE TEXTO

Cores diferentes As cores são introduzidas através do elemento <FONT>, com o atributo COLOR, usando o sistema RGB (red, green, blue) para cores, como já comentado na seção 2 da unidade 2:

118


<FONT COLOR=”#rrggbb”>Texto</FONT>

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Podemos utilizar o sistema RGB como escrever o nome da cor indicada (porém, navegadores antigos não aceitam este último). Estes dois modelos seguintes oferecem o mesmo resultado no navegador.

<FONT COLOR=”ffffff”>Texto na cor branca</FONT>

ou

<FONT COLOR=”white”>Texto na cor branca</FONT>

Ainda, é possível ter texto de várias cores na mesma página.

<FONT COLOR=”white”>Texto em branco</FONT>,

<FONT COLOR=”blue”>azul</FONT>,

<FONT COLOR=”green”>verde</FONT> e <FONT COLOR=”red”>vermelho</FONT>

Confira a visualização:

119


Unidade 4

FIGURA 4.9 - EXEMPLO DE VISUALIZAÇÃO DE FORMATAÇÃO DE CORES EM TEXTOS.

Também podemos realizar uma alteração simultânea de tipo de fonte e cor, como no exemplo:

<FONT FACE=”Verdana” COLOR=”#0000AA”>Fonte Verdana azul</FONT>

<FONT FACE=”Arial” COLOR=”#00AA00”>Fonte Arial verde</FONT>

Este exemplo é assim visualizado:

FIGURA 4.10 - EXEMPLO DE VISUALIZAÇÃO DE FORMATAÇÃO DE CARACTERES

Seção 4 - A Tag <Blink> e <Marquee>

Você conhece as tags <BLINK> e </BLINK>? Para que servem estas tags? Você estudará essas tags logo abaixo.

120


BLINK

As tags <BLINK> e </BLINK> atribuem um efeito piscante ao texto. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos os efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso.

Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript. Felizmente, são poucos os navegadores que mostram o efeito dessa formatação. O Internet Explorer é um dos navegadores que não consideram o BLINK.

Um exemplo seria:

<BLINK>Efeito piscante ao texto.</BLINK>

Atenção!

Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou ‘flechinhas’), nunca em grande número, muito menos em frases inteiras ou cabeçalhos.

MARQUEE

Um texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário. É possível obter esse efeito de animação de texto, através da formatação <MARQUEE>. Este é o modelo para o uso do MARQUEE:

<MARQUEE BEHAVIOR=efeito WIDTH=largura>Texto</MARQUEE>

Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Também se podem aplicar cores,

121


Unidade 4

negrito, itálico, alterar a fonte e o seu tamanho, normalmente. Por exemplo, (o efeito de MARQUEE só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes):

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

No exemplo acima, o texto movimenta-se da direita para a esquerda, utilizando apenas 30% da linha horizontal. Vamos testar esse movimento no seu navegador?

No exemplo abaixo, o texto movimenta-se da esquerda para a direita:

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>

Vamos visualizar o texto acima no seu navegador?

No exemplo abaixo, o texto movimenta-se da direita para a esquerda. Não esqueça de visualizar o movimento no seu navegador:

<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

Confira os atributos da tag <MARQUEE>:

Atributo Definição Exemplo

BGCOLOR cor de fundo BGCOLOR =”#FFFFFF”

BEHAVIOR comportamento do texto BEHAVIOR =”scroll “ ou “slide” ou “alternate”

122


DIRECTION direção do texto DIRECTION =”right” ou “left”

LOOP quantidade de vezes de repetição do texto LOOP =”nombre” ou “infinite”

HSPACEespaço entreo texto e a marquee

HSPACE =”10”

VSPACEespaço entreas linhas da marquee

VSAPCE =”5”

HEIGHT altura em pixels HEIGHT =”200”

WIDTH largura em pixels WIDTH =”300”

Veja o exemplo de uso alguns destes atributos MARQUEE logo abaixo:

<marquee behavior=”scroll” bgcolor=”#FF0000”>

<font face=”arial” color=”#ffffff” size=”2”>

<b>MXSTUDIO</b>

- Comunidade DW e FW

</font>

</marquee>

Observe o resultado no seu navegador. O texto percorre continuamente (ele não pára) o caminho da direita para a esquerda conforme o resultado nos dois navegadores abaixo:

123


Unidade 4

FIGURA 4.11 - EXEMPLO DO USO DA TAG MARQUEE – ETAPA 1

FIGURA 4.12 - EXEMPLO DO USO DA TAG MARQUEE – ETAPA 2

Seção 5 - Endereços

A tag <ADDRESS> é utilizada para entidades de assinaturas em páginas da web. Ela é usada para formatar endereços, e-mail e referências a autores de documentos. As tags de endereço em geral são apresentadas na parte inferior de cada página da web e utilizadas para indicar quem criou tal página. Veja o exemplo:

Envie críticas e sugestões para <address>[email protected]</address>

No navegador, fica assim:

124


FIGURA 4.13 - EXEMPLO DO USO DE ENDEREÇOS NO SEU NAVEGADOR

Síntese

Tags, tags e mais tags! Nesta unidade, você aprendeu a usar a maioria das tags para apresentação de texto e outras tags que oferecem outras opções de formatação de texto e apresentação de página. Você poderia parar agora e criar algumas páginas web de boa qualidade. Mas, ainda, há muita coisa interessante a aprender. Por isso, continue seus estudos. Vamos em frente!

Que tal você preparar uma tabela resumo com todas as tags aprendidas até agora? Coloque o nome da tag, descrição e um exemplo. Vamos tentar? E a cada nova tag, vá acrescentando nesta sua tabela.


Caro aluno, leia o enunciado com atenção e responda a questão.

1. Até agora, você já aprendeu muita coisa sobre as tags e também criou 2 páginas em HTML (index.html e MinhaLista.html). Que tal abrir estes arquivos e formatá-los, conforme o desejado, utilizando tipos de fontes diferentes, estilos, cores etc.? Enfim, aplique tudo que você já estudou até o momento. Após a formatação do texto, na página index.html,

5UNIDADE 5

Uso de Imagens, Painéis de Fundos e Arquivos de Música


Identificar os tipos de imagens que você pode utilizar �

na web.

Compreender como e quando incluir imagens em uma �

página na web.

Conhecer como usar imagens com vínculos. �

Compreender como usar imagens para painéis de �

fundo lado a lado.

Identificar como inserir um arquivo de música na � web.

Seções de estudo

Seção 1 A tag <img> e seus atributos

Seção 2 Referência de hipertexto com imagem

Seção 3 Painéis de fundo com imagens

Seção 4 Sugestões para um melhor uso das imagens

Seção 5 Música

126


Para início de conversaO HTML torna muito fácil para você a tarefa de mostrar imagens dentro de um documento. Porém, as imagens devem estar em formato específico. Normalmente, as imagens têm terminação .gif ou .jpg. O formato .GIF é hoje o padrão mais conhecido e existem mais navegadores capazes de exibir arquivos GIF do que arquivos JPEG, por exemplo. Por isso, o uso do formato GIF é o método mais seguro de garantir que as suas imagens possam ser exibidas para o maior público possível.

Mas o suporte ao formato JPEG está se tornando cada vez mais difundido. Hoje em dia, existem também muitos programas de edição de imagens, como por exemplo, o Adobe Photoshop, Paint Shop Pro, CorelDraw etc., que fornecem meios de promover a conversão entre formatos de imagens. Existem também programas freeware e shareware para várias plataformas, destinados exatamente à conversão entre formatos de imagens.

Atenção!

Alguns editores de imagens tentarão gravar os arquivos com extensões compostas por letras maiúsculas (.GIF, .JPEG). Embora essas extensões sejam corretas, há distinção entre letras maiúsculas e minúsculas nos nomes das imagens, bem como nos nomes de arquivo em HTML. Por isso, GIF não é a mesma extensão que gif. A grafia da extensão não é importante quando se está realizando testes no seu sistema local, mas será relevante quando você transferir os seus arquivos HTML e imagens para o servidor, onde seu site ficará hospedado. Por isso, sempre que possível, utilize letras minúsculas.

A vantagem do formato GIF é que você pode gravar na opção GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usuário tem a impressão da imagem estar sendo carregada no navegador mais rápido.

O formato JPG oferece um fator de compressão maior do que o GIF. Ou seja, as imagens JPG ocupam menos espaço em bytes.

127


Unidade 5

Mas o processo de compressão do JPG pode causar alguma perda de qualidade à imagem.

Como regra geral, o formato JPG deve ser usado em imagens fotográficas e o GIF em imagens criadas em computador ou desenhadas. A compressão do formato GIF se dá ainda melhor com imagens com poucas cores e trechos contínuos de uma cor só.

Seção 1 - A Tag <Img> e seus atributos

A inserção de imagens num documento faz-se com a tag <IMG>. Esta tag tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem tag de fechamento. A tag <IMG> pode vir acompanhada de diversos atributos, entre eles o SRC.

A escolha da imagem que será mostrada na página faz-se através do atributo SRC (que é uma abreviação de “source” ou origem). Este atributo indica o nome e o local em que pode ser encontrada a pasta que contém a imagem que você deseja incluir - esse nome deve ser digitado entre aspas. Esse é o atributo mais importante da tag <IMG>.

A forma genérica mais simples de expressar a tag IMG e o seu atributo SRC é a seguinte:

<IMG SRC=”url_imagem”>

Neste caso, a url_imagem aponta para o local onde se encontra a pasta que contém a imagem. Pode, também, ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente). Por exemplo, se quisermos mostrar o ícone que aparece no início de cada página do W3C, devemos usar o URL:

http://www.w3.org/Icons/WWW/w3c_home

128


Então o código ficaria assim:

<IMG SRC=”http://www.w3.org/Icons/WWW/w3c_home”>

A imagem será desenhada no local que corresponde à tag <IMG> dentro do documento HTML, claro que fazendo referência àquele servidor.

FIGURA 5.1 – EXEMPLO DO USO DE IMAGEM ATRAVÉS DE UMA PÁGINA NA INTERNET

O exemplo seguinte ilustra um outro uso desta tag, onde o arquivo de imagem “amigos.jpg” encontra-se na pasta imagens:

<html>

<body>

<img src=”.imagens/amigos.jpg”>

</body>

</html>

Para visualizar o código acima no seu navegador, você precisa ter a figura chamada amigos.jpg na pasta imagens, que está dentro da pasta onde está gravado o código HTML acima. Vamos visualizar:

129


Unidade 5

FIGURA 5.2 - EXEMPLO DO USO DE IMAGEM NO SEU CÓDIGO HTML

Observe que o nome de caminho referente ao arquivo utiliza as mesmas regras de nomes de caminhos usadas pelo atributo HREF em vínculos. Por isso, um arquivo GIF denominado “imagem.gif ”, contido na mesma pasta que o arquivo HTML, poderá usar a seguinte tag:

<IMG SRC=“imagem.gif”>

Para um arquivo de imagem que esteja localizado uma pasta acima da pasta atual, utilize esta tag:

<IMG SRC=”../imagem.gif”>

E assim por diante! Use sempre as mesmas regras que utilizaria para nomes de página na parte HREF da tag <A>, como já foi estudado na unidade 3.

130


Quando o caminho não está correto ou o nome da figura está errado, o que aparecerá no seu visualizador será algo assim:

FIGURA 5.3 – EXEMPLO DO USO DE IMAGEM COM CAMINHO OU NOME ERRADO

Atenção!

Se sua imagem não for carregada (e o seu navegador apresentar um ícone esquisito no lugar dela), verifique, antes, se você especificou corretamente o nome do arquivo no código HTML. Se não for isso, examine o arquivo de imagem para verificar se ela está realmente no formato GIF ou JPEG e se tem a extensão de arquivo apropriada.

Outros Atributos Básicos de ImagemA seguir, você vê outros atributos básicos de imagem: ALT, WIDTH e HEIGHT, BORDER, ALIGN, HSPACE e VSPACE.

ALT

De nada adianta você caprichar na produção de uma imagem, se a pessoa que vê as páginas utiliza um navegador incapaz de mostrar as imagens (sim, estes navegadores existem e são bastante utilizados, principalmente o Lynx).

Outros usuários também ajustam o navegador para não carregar imediatamente as imagens. Por causa de conexões lentas, algumas pessoas preferem receber o texto e, depois, pedir as imagens. Mas para isso elas precisam saber do que tratam as imagens. Essa é a função do texto alternativo. Pode-se colocar o título ou a melhor descrição possível de uma imagem utilizando o atributo ALT. Veja a sintaxe a seguir:

131


Unidade 5

<IMG SRC=”URL_imagem” ALT=”descrição_da_imagem”>

O texto alternativo descreve brevemente a imagem. Tal texto é apresentado no lugar da imagem nos navegadores de texto ou quando se desabilita o carregamento de imagens em navegadores gráficos, como já citado. É recomendável que esteja sempre presente, pois este texto será mostrado, em vez da imagem, caso o navegador não conseguir apresentá-la.

O texto acompanhado do ALT aparecerá quando o usuário passar o cursor em cima da imagem. É uma legenda alternativa para a imagem.

<img src=”http://www.w3.org/Icons/WWW/w3c_home” alt=”Ícone do W3C”>

FIGURA 5.4 – EXEMPLO DE IMAGEM COM O USO DO ATRIBUTO ALT

FIGURA 5.5 – EXEMPLO DE IMAGEM NÃO ENCONTRADA COM O ATRIBUTO ALT

132


O atributo ALT deve ter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo, mesmo sem vê-la. A utilização do atributo ALT é recomendada porque melhora a acessibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos, sem o atributo ALT o conteúdo das imagens seria sempre um mistério.

Dessa forma,

<IMG SRC=”/icones/newred.gif” ALT=”Novo!”>

é apresentado nos navegadores gráficos assim:

e nos navegadores de texto assim:

[Novo!]

Se a imagem estiver em um diretório (ou pasta) diferente do arquivo de texto, como no exemplo acima, é preciso especificá-lo na referência. Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos arquivos.

WIDTH e HEIGHT

WIDTH e HEIGHT são atributos de dimensão da imagem em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicam a inserção de uma imagem. Veja a sintaxe abaixo:

133


Unidade 5

<IMG SRC=”imagem” ALT=”descrição” WIDTH=”largura” HEIGHT=”altura”>

No exemplo abaixo, definimos as dimensões da imagem, veja:

<IMG SRC=”imagens/amigos.jpg” ALT=”Meus amigos” WIDTH=”100” HEIGHT=”50”>

Vamos visualizar o resultado no seu navegador?

FIGURA 5.6 – EXEMPLO DE IMAGEM COM ATRIBUTOS WIDTH E HEIGHT

Uma das vantagens de se usar esses atributos é que o navegador pode montar mais rapidamente as páginas, por saber, de antemão, o espaço que deverá ser reservado a elas. Por isso, se as dimensões da imagem forem colocadas na referência, o usuário terá a impressão de que a página foi carregada mais rápido. Fornecendo as dimensões, o navegador reserva o espaço para a imagem e vai carregando o texto para que o usuário possa começar a ler. Depois de carregado o texto, as imagens começam a ser mostradas.

134


BORDERCom o atributo BORDER é possível colocar uma borda em volta da imagem. O valor da borda é expresso em pixels.

Aqui você vê uma imagem:<P>

<IMG SRC=“sol.gif” BORDER=2>

Note que a imagem...<P>

Veja você o resultado no seu navegador, não esquecendo de criar uma imagem com o nome de sol.gif em um editor de imagens. O resultado deve ser este:

FIGURA 5.7 - EXEMPLO DA UTILIZAÇÃO DE BORDA EM IMAGENS

ALIGN

A tag <IMG> contém também um atributo ALIGN, que permite alinhar a imagem com a parte superior ou inferior do texto existente, ao redor ou com outras imagens contidas na mesma linha. Sua sintaxe é:

<IMG SRC=”imagem” ALT=”descrição” ALIGN=alinhamento>

135


Unidade 5

A HTML 2.0 define três valores básicos para o atributo ALIGN, que são os seguintes:

ALIGN= Definição

topalinha a parte superior da imagem com a parte superior da linha.

middle alinha o centro da imagem com a parte central da linha.

bottomalinha a parte inferior da imagem com a parte inferior da linha de texto.

Vamos verificar os atributos de alinhamento e seus resultados, logo a seguir.

<IMG ALIGN=top SRC=”imagem.jpg” ALT=”imagem”>Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom. Pois provavelmente a próxima linha do texto irá para a linha abaixo da imagem.

Observe o resultado no seu navegador. É semelhante ao que está sendo visualizado a seguir?

FIGURA 5.8 - EXEMPLO DE ALINHAMENTO DE TEXTO E IMAGEM

136


Vamos testar agora os dois códigos abaixo? Qual o resultado em seu navegador?

<IMG ALIGN=middle SRC=”imagem.jpg” ALT=”imagem”>Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom. Pois provavelmente a próxima linha do texto irá para a linha abaixo da imagem.

Visualização:


<IMG ALIGN=bottom SRC=”imagens/amigos.jpg” ALT=”imagem”>Alinha o texto adjacente com a parte de baixo da imagem. Se existir mais texto, o mesmo pula para a linha imediatamente após a imagem.

Visualização:


137


Unidade 5

Quando não especificado o atributo ALIGN, o padrão utilizado pelo navegador é o bottom. A inclusão de uma imagem em uma linha funciona bem quando você tem apenas uma linha de texto. Se você tiver várias linhas de texto e incluir uma imagem no meio dessas linhas, todo o texto ao redor da imagem (exceto o da primeira linha) será apresentado acima e abaixo dessa imagem, como nos exemplos acima.

E se você quiser promover o retorno automático de várias linhas de texto ao redor de uma imagem? Com a HTML 2.0 isso não é possível. Você está, então, restrito a uma única linha de texto em cada lado da imagem, o que limita os tipos de projetos que você pode realizar.

Para contornar essa limitação, novos valores para o atributo ALIGN da tag <IMG> foram incorporados na HTML 3.2: left e right.

ALIGN= Definição

right alinha uma imagem na margem direita.

left alinha uma imagem na margem esquerda.

Mas o uso desses atributos faz também com que todo o texto localizado após a imagem seja apresentado no espaço à direita ou à esquerda dessa imagem, dependendo do alinhamento da margem. Veja os exemplos a seguir:

138


<IMG ALIGN=right SRC=”imagem.jpg” ALT=”imagem”>ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

Confira o resultado:


<IMG ALIGN=left SRC=”imagem.jpg” ALT=”imagem”>ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

Visualização:


139


Unidade 5

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

<IMG align=left SRC=”imagem.jpg” alt=”imagem”><IMG align=right SRC=”imagem.jpg” alt=”imagem”>...e agora você pode escrever à vontade entre as imagens! O texto que você desejar, sem a linha ir para abaixo da imagem...

Isso resulta em:

FIGURA 5.13 - EXEMPLO DE VISUALIZAÇÃO DE TEXTO ENTRE DUAS IMAGENS

Você pode incluir qualquer texto HTML após uma imagem alinhada e será promovido o retorno automático do texto no espaço existente entre a imagem e a margem ou entre 2 imagens, como no exemplo anterior. O navegador preenche o espaço com texto até a parte inferior da imagem e, em seguida, continua a preencher com texto o espaço existente abaixo dela.

No entanto, quando se usam os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior é puxado para o lado da imagem. Se for necessário interromper o fluxo de texto ao lado da imagem, pode-se usar a tag <BR> com o atributo CLEAR=ALL, conforme exemplo abaixo:

<IMG align=left SRC=”imagem.jpg” alt=”imagem”><IMG align=right SRC=”imagem.jpg” alt=”imagem”>...e agora você pode escrever à vontade entre as imagens! O texto que você desejar, sem a linha ir para abaixo da imagem...<BR CLEAR=all>Mas agora eu quero interromper essa linha e jogar abaixo das imagens.

140


Visualização:


Note que o texto está contornando as imagens, mas somente até determinado ponto:<BR CLEAR=all>. A partir deste ponto, o texto é jogado para a próxima margem livre em qualquer um dos lados da janela.

HSPACE e VSPACE

Com a capacidade de promover o retorno automático do texto ao redor de uma imagem, é possível que você queira também ajustar o espaço existente ao redor dessa imagem. Você pode controlar o espaço em volta da imagem colocando o valor em pixels da margem desejada. É possível definir as margens separadamente ou em conjunto. Os atributos HSPACE e VSPACE (introduzidos na HTML 3.2) permitem isso.

O atributo VSPACE controla o espaço acima e abaixo da imagem. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela. A sintaxe é a seguinte:

<IMG SRC=”imagem” VSPACE=”espaçovertical”>

O atributo HSPACE controla o espaço à esquerda e à direita da imagem. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela. A sintaxe é a seguinte:

<IMG SRC=”imagem” HSPACE=”espaçohorizontal”>

141


Unidade 5

Esses atributos surgiram para melhorar ainda mais a apresentação das imagens junto com os textos. Também são conhecidos como atributos de moldura.

O efeito desses atributos pode ser percebido nos textos a seguir. No primeiro texto, as imagens não têm atributos de moldura (é fácil notar como o texto fica “grudado” na imagem):

...e agora você pode escrever<IMG align=left SRC=”imagem.jpg” alt=”imagem” WIDTH=”138” HEIGHT=”65”>à vontade entre as imagens! O texto que você desejar, sem a linha ir para abaixo da imagem...... ter um texto posicionado no ponto em que a margem <IMG align=right SRC=”imagem.jpg” alt=”imagem” WIDTH=”110” HEIGHT=”71”>direita fica livre, com ou no ponto em que a margem esquerda fica livre, com Mas agora eu quero interromper essa linha e jogar abaixo das imagens.

Veja o resultado do código acima no seu navegador:


Neste segundo texto são usadas, respectivamente, as seguintes formatações:

<IMG align=left SRC=”imagem.jpg” alt=”imagem” WIDTH=”138” HEIGHT=”65” VSPACE=30>

e

<IMG align=right SRC=”imagem.jpg” alt=”imagem” WIDTH=”110” HEIGHT=”71” HSPACE=40>

142


Neste segundo texto, a primeira imagem surgirá no texto com espaçamento vertical em relação ao texto e a segunda imagem com espaçamento horizontal em relação ao texto. Veja o resultado mostrado no navegador abaixo:


Vamos testar?

Que tal, agora, você utilizar os alinhamentos em conjunto como no exemplo abaixo? Faça um teste no seu navegador. Crie uma imagem chamada imagem.jpg e guarde na mesma pasta do seu arquivo que contém o código HTML abaixo:

...e agora você pode escrever

<IMG align=left SRC=”imagem.jpg” alt=”imagem” WIDTH=”118” HEIGHT=”65” VSPACE=30 HSPACE=30>à vontade entre as

imagens! O texto que você desejar, sem a linha ir para abaixo da imagem......

ter um texto posicionado no ponto em que a margem <IMG align=right SRC=”imagem.jpg” alt=”imagem” WIDTH=”100”

HEIGHT=”71” HSPACE=30 VSPACE=30 border=3>direita fica livre, com

ou no ponto em que a margem esquerda fica livre, com

Mas agora eu quero interromper essa linha e jogar abaixo das imagens.Acrescentando mais texto pois assim

fica mais visível o uso dos atributos

HSPACE e VSPACE. Podemos observar que as imagens não aparecem tão grudadas agora ao texto. Isso em função

dos valores <br clear=all>

atribuídos aos atributos HSPACE e VSPACE utilizados em conjunto na mesma tag IMG.Na imagem a direita foi

colocado uma borda com espessura 3.

143


Unidade 5

O resultado no navegador do Internet Explorer é este:


Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em baixo e à direita e à esquerda). Portanto, não há como definir uma margem maior apenas à esquerda ou somente na parte inferior.

Seção 2 - Referência de hipertexto com imagem

Uma imagem pode funcionar como um vínculo? É evidente que sim! Se você incluir a tag <IMG> entre as partes de abertura e de fechamento de uma tag de vínculo (<A>), essa imagem funcionará como um ponto ativo (que pode ser selecionado com um clique) referente ao próprio vínculo. A sintaxe é basicamente a seguinte:

<A href=”URL”>

<IMG src=”nome da imagem” >

</A>

144


Se uma frase é marcada como âncora de um link, então ela se apresenta sublinhada; se uma imagem se faz de âncora, então ela ganha uma borda que indica a sua condição. Neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem. Veja o exemplo:

<HTML>

<HEAD>

<TITLE>Exemplo Link em Imagem</TITLE>

</HEAD>

<BODY BGCOLOR=”black” TEXT=”yellow”>

<A HREF=”pagina2.html”>

<IMG SRC=imagens/amigos.jpg>

</A>

</BODY>

</HTML>

Vamos verificar o exemplo acima no seu navegador?

FIGURA 5.18 – EXEMPLO DE IMAGEM COM LINK

145


Unidade 5

Se você quiser uma borda mais larga, siga o exemplo:

<A HREF=”URL”><IMG SRC=sol.gif ALT=”descrição” BORDER=4></A>

E confira o resultado:

FIGURA 5.19 - EXEMPLO DO USO DE IMAGEM COMO LINK

Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, você pode controlar esse detalhe.

<A HREF=”URL”><IMG SRC=sol.gif ALT=”descrição” BORDER=0></A>

Assim aparecerá no navegador:

FIGURA 5.20 - EXEMPLO DO USO DE IMAGEM SEM BORDA

146


Portanto, a borda pode ser apresentada tanto em imagens que não são âncora de links como em links.

Se você incluir uma imagem e um texto na âncora, a imagem e o texto se tornarão pontos ativos que conduzirão à mesma página. Veja o exemplo:

<A href=http://www.bol.com.br>

<IMG src=sol.gif border=0 alt=”BOL”>Clique aqui para ir a página do BOL

</A>

A visualização deve ser esta:


As imagens que são pontos ativos referentes a vínculos aparecem com uma borda ao redor, como na figura 5.18.

Atenção!

Ao utilizar as imagens, tenha em conta que elas podem aumentar consideravelmente o tempo que é preciso esperar para se ver os conteúdos das páginas. Por isso, use-as com cuidado!

147


Unidade 5

Seção 3 - Painéis de fundo com imagens

Você já deve ter visto páginas na internet com imagens de fundo. Esta seção consiste no desenvolvimento da capacidade de usar uma imagem como painel de fundo para as suas páginas HTML, em vez de utilizar simplesmente um fundo de determinada cor. Quando você usa uma imagem em um painel de fundo, essa imagem é apresentada “lado a lado”. Ou seja, esta imagem é repetida em fileiras para preencher a janela do navegador.

Para criar um painel de fundo, você precisará de uma imagem que será repetida para compor esse painel. De modo geral, ao criar uma imagem para essa finalidade, você precisará verificar se o padrão escolhido flui harmoniosamente quando disposto lado a lado.

Normalmente, você pode realizar com cautela algumas operações de edição na imagem, através da utilização do seu programa preferido de edição de imagens, para ter certeza de que as bordas estão alinhadas. O objetivo é que as bordas coincidam perfeitamente umas com as outras, de modo a não haver emendas entre as imagens quando você as apresentar lado a lado. Você também pode experimentar usar pacotes de clip-art destinados a painéis de fundo ou padrões lado a lado, que em geral são projetados especificamente para serem apresentados dessa forma.

Quando você tiver essa imagem, tudo o que você precisará para criar um painel de fundo é do atributo BACKGROUND, que faz parte da tag <BODY>. O valor desse atributo é um nome de arquivo ou URL que corresponda ao seu arquivo de imagem, como no seguinte exemplo:

<BODY background=”fundo.gif”>

148


O resultado é visualizado assim:

FIGURA 5.22 - EXEMPLO DE PAINEL DE FUNDO

Seção 4 - Sugestões para um melhor uso das imagens

O uso de imagens é hoje um dos assuntos mais discutidos entre usuários e provedores de páginas da web. Todo aquele que deseja projetar páginas da web, incluindo imagens maiores e mais claras para tirar maior proveito dos recursos gráficos da web, deve estar ciente de que sempre existirá alguém com uma conexão lenta de rede, que estará implorando por menos imagens para que seu navegador não leve horas para carregar uma única página.

Ao desenvolver websites, você deve considerar esses aspectos: procure alcançar o ponto de equilíbrio entre a criação de uma página da web bem estruturada e colorida e a necessidade de transmitir as suas informações a todo o seu público – e isso inclui, também, as pessoas que não têm acesso às suas imagens. Atente paras as seguintes sugestões:

Fonte: LEMAY, 1998.

149


Unidade 5

Você precisa realmente dessa imagem? - � Para cada imagem que você inserir na página da web, reflita sobre o motivo pelo qual a está incluindo. Essa imagem acrescenta algo ao projeto da página? Ela fornece informações que poderiam ser substituídas por texto? Ou você simplesmente a incluiu porque gosta do resultado produzido? Uma página simples com apenas algumas imagens de ícones costuma produzir um efeito melhor do que uma página que apresenta uma imagem enorme, sofisticados botões tridimensionais e marcadores sombreados.

Mantenha as imagens pequenas! - � Uma imagem pequena leva menos tempo para ser transferida na internet. Por isso, o uso dessas imagens faz a página da web ser carregada mais rapidamente e causa menos frustração aos usuários que tentam lê-la em uma conexão lenta de rede. Para criar imagens pequenas, você pode reduzir as dimensões físicas reais dessas imagens na tela. Pode, também, criar tamanhos de arquivos menores para as suas imagens através da redução do número de cores. Uma boa regra consiste em procurar manter as imagens com menos de 20KB. Esse tamanho pode parecer pequeno, mas um arquivo simples de 20 KB leva quase 20 segundos para ser carregado por um download em uma conexão de 14,4 Kbps. Multiplique esse tempo pelo número de imagens contidas na página da web e você verá que a carga dessa página pode levar um tempo considerável.

Procure reutilizar imagens! - � Procure reutilizar as mesmas imagens o máximo possível, em páginas isoladas e em várias páginas. Se, por exemplo, você tiver imagens como marcadores, use a mesma para todos os marcadores, em vez de usar diversas imagens. A reutilização de imagens proporciona o projeto padronizado das páginas, que faz parte da criação de uma “identidade visual” global para o seu site. E o mais importante é que, assim, o seu navegador tem de fazer apenas uma vez o download delas.

Forneça alternativas às imagens! - � Se você ainda não estiver utilizando o atributo ALT nas suas imagens, passe a usá-lo. Esse atributo é muito útil, pois permite que a sua página da web seja lida por navegadores de texto.

150


Seção 5 - Música

Você pode incluir em sua página um som de fundo. Com isso, sempre que alguém acessá-la, este som será tocado. Desta forma, você pode fazer seu site ter mais recursos e personalidade.

Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV).

Existem duas maneiras de colocar músicas em seu site. A primeira é com a tag <BGSOUND> que só é reconhecida pelo Internet Explorer. Para utilizar esta tag, siga o exemplo:

<BGSOUND src=”arquivo.mid”>

Onde:

arquivo.mid é o arquivo de música. �

Caso você queira que a música se repita, adicione o atributo loop=”infinite”.

A segunda maneira de adicionar música ao seu site é com a tag <EMBED> que, por ser reconhecida pelo Internet Explorer e Netscape, é a mais recomendada. Para utilizá-la, siga o exemplo:

<EMBED src=”arquivo.mid”>

151


Unidade 5

Essa tag também pode ser usada com alguns atributos. Veja o exemplo:

<embed src=”nome da música” autostart=”true” loop=10>

Onde:

Em "nome da musica", você coloca o nome da música �

mid ou wav.

Em "loop", você coloca o número de vezes que o som será �

repetido.

Em "autostart", você define se quer que a música comece �

a tocar sozinha (atributo TRUE). Caso contrário, você deve colocar “FALSE”, opção na qual o usuário terá que clicar no botão de “play” para ouvir a música.

Se você quiser que a música fique se repetindo infinitamente, basta colocar “infinity” no lugar de um número. Não é necessário colocar “</embed>” neste caso.

Atenção!

O Netscape e o Internet Explorer têm algumas diferenças em seu sistema e, por isso, em algumas versões do Netscape o som pode não tocar.

É recomendado usar arquivos mid por serem bem menores que os wavs.

152


Síntese

Um dos principais recursos que fazem a WWW se destacar em relação aos outros documentos de informações da internet consiste na capacidade dos documentos da web conterem imagens em cores. Com certeza, foi graças a essas imagens que a web se tornou tão conhecida e utilizada em um curto período de tempo.

Para serem inseridas em páginas da web, as imagens precisam estar no formato GIF ou JPEG e ter dimensões suficientemente reduzidas para poderem ser carregadas rapidamente por download em uma conexão lenta.

Nesta unidade, você também aprendeu que a tag <IMG> da HTML permite inserir uma imagem na página da web, utilizando atributos básicos, que contam com o suporte da HTML padrão:


Localização SRC=”localização” <IMG SRC=”linkdaimagem.tipo”>

ComprimentoWIDTH=”tamanho” (em pixels ou % da página)

<IMG SRC=”linkdaimagem.tipo” WIDTH=”10””>

AlturaHEIGHT=”tamanho” (em pixels ou % da página)

<IMG SRC=”linkdaimagem.tipo” HEIGHT=”20”>

BordaBORDER=”tamanho” (em pixels)

<IMG SRC=”linkdaimagem.tipo” BORDER=”2”>

AlternativaALT=”texto” (usa-se em caso de não aparecer a imagem)

<IMG SRC=”linkdaimagem.tipo” ALT=”Minha Foto”>

Alinhamento

ALIGN=”tipo” (o modo como a imagem será posicionada verticalmente em relação ao texto existente ao redor)

<IMG SRC=”linkdaimagem.tipo” ALIGN=top> <IMG SRC=”linkdaimagem.tipo” ALIGN=middle> <IMG SRC=”linkdaimagem.tipo” ALIGN=bottom>

Além das imagens, você aprendeu a incluir painéis de fundo compostos por padrões ou imagens lado a lado, através do atributo BACKGROUND, da tag <BODY>, com a imagem que será usada para compor o painel.

153


Unidade 5


A partir de seus estudos, leia com atenção e resolva a atividade programada para a sua auto-avaliação.

1. Que tal acrescentar um arquivo mid em sua página index.html, como sua atividade de auto-avaliação?

Saiba mais

Você pode saber mais sobre o assunto estudado nesta unidade consultando as seguintes referências:

LEMAY, Laura. � Aprenda a criar páginas web com HTML e XHTML em 21 Dias. São Paulo: Makron Book Editora, 2002.

E os seguintes sites:

http://www.silicio.com.br/html/dicas/abertura.html (Silício: o portal brasileiro na internet) �

http://www.w3schools.com/html/html_images.asp (HTML Images) �

6UNIDADE 6

Tabelas


Definir tabelas em HTML. �

Criar legendas, células de cabeçalho e de dados. �

Modificar o alinhamento da célula. �

Criar células que ocupam várias linhas ou colunas. �

Trabalhar com cores nas tabelas. �

Elaborar tabelas nos seus documentos da � web.

Seções de estudo

Seção 1 Elementos básicos de tabelas

Seção 2 Alinhamento da tabela e das células

Seção 3 Dimensões da tabela

Seção 4 Cor em tabelas

156



As tabelas são construções avançadas em HTML, que permitem a você organizar um texto, imagens e outro tipo de conteúdo HTML em linhas e colunas, com ou sem bordas. Elas podem ser usadas não apenas para apresentar dados em um formato tabular, mas também para a definição do layout da página e para o controle do posicionamento dos vários elementos HTML em uma página. As tabelas tornaram-se tão conhecidas, que a maioria dos principais navegadores hoje oferece suporte para esse recurso.

A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer desta unidade.

Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.

Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

Cientes dessa possibilidade, vamos em frente!

157


Unidade 6

Seção 1 - Elementos básicos de tabelas

Para criar tabelas em HTML, você deve definir as partes de sua tabela e os elementos HTML a serem inseridos. Em seguida, delimite essas partes com o código HTML de tabela. Por último, aprimore o aspecto visual da tabela através de alinhamentos, bordas e células coloridas.

Antes de entrarmos no código HTML propriamente dito para criar uma tabela, permita-nos definir alguns termos para que você entenda o que será descrito:

Legenda � - indica o assunto ao qual a tabela se refere, como, por exemplo, “Estatísticas das Eleições”. As legendas são opcionais.

Cabeçalhos da tabela - � identificam as linhas ou as colunas, ou ambas. Em geral, os cabeçalhos da tabela são apresentados em uma fonte maior ou enfatizada, de alguma forma diferentes em relação ao restante da tabela. Os cabeçalhos da tabela também são opcionais.

Dados da tabela - � consistem nos valores que compõem a tabela. A combinação dos cabeçalhos com os dados resulta na parte essencial da tabela.

Células da tabela - � consistem em cada um dos quadrados que a compõem. Uma célula pode conter dados normais de tabela ou um cabeçalho de tabela.

Feitas estas considerações preliminares, vamos aprender algumas tags próprias para a formatação da tabela:

A tag <TABLE>Para criar uma tabela em HTML, utilize as tags <TABLE>...</TABLE> que contém o código referente a uma legenda e o conteúdo da própria tabela.

158


O atributo mais comum da tag <TABLE> é o atributo BORDER, que indica a apresentação da borda. Veja o exemplo:

<TABLE BORDER=”borda”>

...

</TABLE>

Definir BORDER=0 significa que a borda não tem largura e, portanto, não é apresentada. BORDER=1 cria uma borda de um pixel de largura, BODER=2 cria uma borda de 2 pixels de largura e assim por diante.

Além disso, se você omitir o atributo BORDER, os navegadores não deverão apresentar uma borda. As tabelas sem borda são úteis quando você deseja usar a estrutura da tabela para fins de layout, mas não quer, necessariamente, apresentar a estrutura de uma tabela na página.

Linhas e célulasEntre as tags <TABLE>...</TABLE> você define o conteúdo da tabela. As tabelas são especificadas linha por linha em HTML e a definição de cada linha contém definições referentes a todas as células dessa linha. Por isso, para definir uma tabela, você começa definindo a primeira linha e cada uma de suas células e, em seguida, define a segunda e suas respectivas células e assim por diante. As colunas são calculadas automaticamente, com base na quantidade de células de cada linha.

Cada linha da tabela é indicada pela tag <TR> e termina a tag de fechamento </TR>. Cada linha da tabela por sua vez tem várias células, que são indicadas pelas tags <TH>...</TH> (para células de cabeçalho) e <TD>...</TD> (para células de dados).

Você pode ter quantas linhas quiser e quantas células forem necessárias em cada linha, para compor as suas colunas. Mas deve verificar se cada linha tem o mesmo número de células para que as colunas fiquem alinhadas.

159


Unidade 6

LegendasAs legendas de tabela informam ao leitor o assunto da tabela. Embora você possa simplesmente usar um parágrafo normal ou um cabeçalho como um rótulo para a sua tabela, a tag <CAPTION> tem justamente essa finalidade de legenda.

Mas o que fazer se você não quiser usar uma legenda? Você não precisa incluí-la. As legendas são opcionais.

A tag <CAPTION> é incluída na tag <TABLE>, antes das linhas da tabela, e contém o título da tabela. Ela é fechada pela tag </CAPTION>.

O atributo ALIGN da legenda determina o seu alinhamento. Por padrão, a legenda é colocada na parte superior da tabela (ALIGN=top)

Vejamos o exemplo de uma tabela simples com legenda:

<TABLE BORDER=4>

<CAPTION>Primeiro exemplo</CAPTION>

<TR> <TH>Coluna 1</TH><TH>Coluna 2</TH> </TR>

<TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> </TR>

<TR> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TR>

</TABLE>

Visualize agora:

FIGURA 6.1 – EXEMPLO DE VISUALIZAÇÃO DE TABELA COM LEGENDA POR COLUNA

160


A tag <TH> indica uma célula que também é um cabeçalho da tabela e a tag <TD> indica uma célula comum da tabela (TD significa Table Data = dados da tabela). Os cabeçalhos geralmente são apresentados de forma diferente das células da tabela, como, por exemplo, em uma fonte em negrito.

O exemplo anterior mostra um cabeçalho apresentado na borda superior da tabela, através da tag <TH> incluída na primeira linha. Para apresentar os cabeçalhos na borda esquerda da tabela, inclua cada uma das tags <TH> na primeira célula de cada linha, como neste exemplo:

<TABLE BORDER=4>

<CAPTION>Primeiro exemplo</CAPTION>

<TR>

<TH>Linha 1</TH>

<TD>linha 1, coluna 1</TD>

</TR>

<TR>

<TH>Linha 2</TH>

<TD>linha 2, coluna 1</TD>

</TR>

</TABLE>

A visualização fica assim:

FIGURA 6.2 – EXEMPLO DE VISUALIZAÇÃO DE TABELA COM LEGENDA POR LINHA

161


Unidade 6

Os cabeçalhos e os dados da tabela podem conter qualquer texto ou código HTML, ou ambos, incluindo vínculos, listas, formulários, imagens e outras tabelas.

Células vaziasE se você quisesse ter uma célula sem qualquer conteúdo? Isso é simples. Basta definir uma célula com a uma tag <TH> ou <TD> sem especificar texto algum, como neste exemplo:

<TABLE BORDER=3>

<TR>

<TD></TD>

<TD>20</TD>

<TD>30</TD>

</TR>

</TABLE>

Às vezes, uma célula vazia desse tipo é apresentada como se a célula não existisse:

FIGURA 6.3 – EXEMPLO DE VISUALIZAÇÃO DE TABELA COM A PRIMEIRA CÉLULA INEXISTENTE

162


Se você quiser forçar a apresentação de uma célula vazia, pode incluir uma quebra de linha nessa célula, sem inserir texto algum:

<TABLE BORDER=3>

<TR>

<TD><BR></TD>

<TD>20</TD>

<TD>30</TD>

</TR>

</TABLE>

No navegador fica assim:

FIGURA 6.4 – EXEMPLO DE VISUALIZAÇÃO DE TABELA COM A PRIMEIRA CÉLULA VAZIA

163


Unidade 6

Seção 2 - Alinhamento da tabela e das células

Nesta seção, você vê como as tags auxiliam no alinhamento da tabela e das células.

Alinhamento da tabelaOs elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Por padrão, as tabelas são apresentadas em uma linha no lado esquerdo da página, com o restante do texto acima ou abaixo da tabela.

No entanto, ao usar o atributo ALIGN, você pode alinhar as tabelas na margem esquerda ou direita e promover o retorno automático do texto ao redor delas, exatamente como faria com as imagens.

As linhas e células podem ter alinhamentos definidos através dos atributos:

ALIGN = alinhamento horizontal �

VALIGN = alinhamento vertical �

Esses atributos devem ser usados dentro das tags <TR> e <TD> (além de <TH>, se for o caso). Por padrão, as células de dados são alinhadas:

no sentido horizontal: alinhamento à esquerda �

no sentido vertical: alinhamento no centro da célula �

164


Alinhamento da célulaQuando as suas linhas e células estiverem na posição adequada e a tabela estiver alinhada corretamente na página, você poderá, ainda, alinhar os dados contidos em cada célula para obter o melhor efeito possível com base no conteúdo da sua tabela. As tabelas oferecem várias opções para o alinhamento dos dados contidos nas células, tanto na horizontal como na vertical.

Alinhamento horizontal:

ALIGN=LEFT: alinha o conteúdo à esquerda. �

ALIGN=RIGHT: alinha o conteúdo à direita. �

ALIGN=CENTER: alinha o conteúdo ao centro. �

Alinhamento vertical:

VALIGN=BASELINE: mantém as linhas de texto com o �

mesmo alinhamento (para ser usado dentro de <TR> ou no primeiro <TD> de uma linha).

VALIGN=TOP: alinha o conteúdo no topo. �

VALIGN=MIDDLE: alinha o conteúdo ao centro. �

VALIGN=BOTTOM: alinha o conteúdo na base da célula. �

Veja como esses alinhamentos funcionam nas células:

<TD ALIGN=alinhamento_horizontal>Texto da célula</TD>

<TD VALIGN=alinhamento_vertical>Texto da célula</TD>

165


Unidade 6

O alinhamento pode ser assim resumido no quadro abaixo:

Alinhamento Horizontal

ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT

Alinhamento Vertical

VALIGN=TOP

VALIGN=MIDDLE

VALIGN=BOTTOM

Atenção!

A tabela acima foi feita especialmente para mostrar as diferenças entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas células ao conteúdo, desta seguinte forma:

Confira a visualização:

FIGURA 6.5 – EXEMPLO DE UMA TABELA

Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento padrão.

<TABLE BORDER=1> <TR> <TH>Título 1</TH> <TH>Título 2</TH> </TR> <TR> <TD>Célula 1</TD> <TD><B>Célula 2</B><P>

Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.

</TD> </TR> </TABLE>

166


A visualização é esta:

FIGURA 6.6 – EXEMPLO DE ALINHAMENTO DE TABELA

Observe que a largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda coluna.

Vamos, agora, melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a largura da borda da tabela. Se você observar, também, as células de cabeçalho por padrão são centralizadas verticalmente e horizontalmente:

<TABLE BORDER=3>

<TR>

<TH>Título 1</TH>

<TH>Título 2</TH>

</TR>

<TR>

<TD valign=top>Célula 1</TD>

<TD width=300><B>Célula 2</B><P>A largura de cada célula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD>

</TR>

</TABLE>

167


Unidade 6

Qual o resultado do código acima? Qual a aparência de sua tabela agora?

Alinhamento combinadoRepare que uma mesma célula pode ter atributos ALIGN e VALIGN combinados:

<TD ALIGN=alinhamento_horizontal VALIGN=alinhamento_vertical>Texto da célula</TD>

Veja algumas combinações na tabela abaixo:

Alinhamento horizontal e vertical

ALIGN=LEFT, VALIGN=BOTTOM

ALIGN=CENTER, VALIGN=TOP

ALIGN=RIGHT, VALIGN=MIDDLE

Alinhamento de linhasAcima, você viu o alinhamento na tag TD. O alinhamento pode ser aplicado a linhas inteiras na tag da linha TR, com a seguinte sintaxe:

<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>

Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da linha, como se vê no exemplo:

168


Center center center TD ALIGN=right

bottom

TD VALIGN=top

bottom bottom

FIGURA 6.7 – EXEMPLO DE ALINHAMENTO COMBINADO EM TABELA

Tal resultado pode ser interessante, conforme sua necessidade.

Células que ocupam várias linhas ou colunasTodas as tabelas que você criou até o momento tinham um valor para cada célula e, às vezes, uma célula vazia. Você, também, pode criar células que ocupem várias linhas ou colunas da tabela.

Para criar uma célula que ocupa várias linhas ou colunas, você deve incluir o atributo COLSPAN (para colunas) e ROWSPAN (para linhas) nas tags <TH> ou <TD> junto com o número de linhas ou colunas que deseja que a célula ocupe.

O exemplo abaixo mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas. É possível expandir as células para que elas ocupem o espaço de mais de uma coluna:

<TABLE BORDER=2> <TR> <TD COLSPAN=2>Célula expandida</TD> </TR> <TR> <TD>Célula 1</TD><TD>Célula 2</TD> </TR> <TR> <TD>Célula 3</TD><TD>Célula 4</TD> </TR> </TABLE>

169


Unidade 6


FIGURA 6.8 – EXEMPLO DE CÉLULA EXPANDIDA OU MESCLADA POR LINHA

Agora vamos expandir as células para que ocupem o espaço de mais de uma linha.

<TABLE BORDER=3>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>

<TD>Célula 1</TD><TD>Célula 2</TD>

</TR>

<TR>


</TR>

</TABLE>

Observe no seu navegador:

FIGURA 6.9 – EXEMPLO DE CÉLULA EXPANDIDA OU MESCLADA POR COLUNA

170


A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na mesma linha das células 1 e 2.

Podemos expandir colunas e linhas em uma mesma tabela. Os dados contidos nessa célula preencherão a largura ou o comprimento das células combinadas, como no exemplo a seguir:

<TABLE BORDER=1>

<TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR>

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

<TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>

<TR><TD>duas linhas</TD></TR>

<TR><TD>tres linhas</TD></TR>

</TABLE>

Vamos testar o código acima no seu navegador? Ele ficou parecido com o que está sendo visualizado abaixo? Ótimo! Se não ficou, não se desespere, verifique se não esqueceu de fechar alguma tag. Ou será que não faltou algum código HTML? Observe!

FIGURA 6.10 – EXEMPLO DE CÉLULA EXPANDIDA

171


Unidade 6

Neste exemplo, perceba que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

Atenção!

A identação no código HTML facilita a visualização de possíveis erros e até o entendimento do código.

Uma outra maneira de identarmos o código anterior poderia ser assim:

<TABLE BORDER=1> <TR> <TH COLSPAN=2>Colunas 1 e 2</TH> </TR> <TR> <TD>linha1, coluna 1</TD> <TD> linha 1, coluna 2</TD> </TR> <TR> <TD>linha 2, coluna 1</TD> <TD>linha 2, coluna 2</TD> </TR> <TR> <TH ROWSPAN=3>3 linhas</TH> <TD>uma linha</TD> </TR> <TR> <TD>duas linhas</TD> </TR> <TR> <TD>três linhas</TD> </TR> </TABLE>

Identação significa organizar o código HTML para o mesmo tornar-se legível, sabendo, por exemplo, onde inicia e termina uma tag ou, ainda, sabendo quais tags ou texto estão dentro de outras tags. Organizamos o código utilizando espaço ou a tecla TAB.

172


Quais das visualizações dos códigos em HTML para o exemplo acima parecem ser mais “legíveis” a você?! Observe que os dois códigos representam a mesma coisa, ou seja, trazem como resultado a mesma tela do navegador mostrado anteriormente.

Seção 3 - Dimensões da tabela

Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels) de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos através de atributos dentro da tag <TABLE>.

Os atributos largura da tabela são:

WIDTH: para definir a largura da tabela. �

HEIGHT: para definir a altura da tabela. �

Os atributos de espaçamento são:

CELLPADDING: para definir a margem dentro das células. �

CELLSPACING: para definir o espaço entre as células. �

173


Unidade 6

Acompanhe o exemplo:

<TABLE BORDER=2 WIDTH=400 HEIGHT=200 CELLPADDING=20 CELLSPACING=20>

<TR>

<TD ROWSPAN=2>Célula expandida</TD>


</TR>

<TR>


</TR>

</TABLE>

A visualização é a seguinte:

FIGURA 6.11 – EXEMPLO DO USO DE TABELA COM DIMENSÕES ALTERADAS

Os atributos WIDTH e HEIGHT também podem ser utilizados para definir o tamanho de células específicas. Neste caso, devem ser colocados dentro da tag <TD> (ou <TH>).

Vamos estudar detalhadamente cada um deles a seguir.

174


Atributos de larguraJá foi comentado que uma tabela comum ajusta o tamanho de suas células ao conteúdo. Por exemplo:

FIGURA 6.12 – EXEMPLO DE TABELA AJUSTADA

Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado, também, a linhas e células.

Essa largura pode ser definida:

em porcentagem (do espaço disponível) - WIDTH=x%; �

em � pixels - WIDTH=x.

Abaixo, segue o exemplo de uma tabela ocupando 50% do espaço disponível:

<TABLE BORDER=1 width=50%>

A visualização é como segue:

175


Unidade 6

FIGURA 6.13 – EXEMPLO DE TABELA OCUPANDO 50% DA JANELA

A seguir, um exemplo de uma tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço disponível na tabela:


<TR>

<TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>março</TD>

</TR>

<TR>

<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>

</TR>

</TABLE>

Observe o resultado em seu navegador:

FIGURA 6.14 – EXEMPLO DE TABELA USANDO 50% DA JANELA E ALTERANDO LARGURA DA 2ª COLUNA

176


Agora, neste outro exemplo, o controle da largura da tabela está limitado à dimensão de seu conteúdo. Ou seja, a tabela ocupará 50% do espaço disponível com uma coluna de 1%. Os ajustes far-se-ão às outras colunas para a ocupação dos 50%:


<TR>

<TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>março</TD>

</TR>

<TR>

<TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD>

</TR>

</TABLE>

Assim fica a visualização:

FIGURA 6.15 – EXEMPLO DE OCUPAÇÃO DE TABELA EM RELAÇÃO À JANELA E AJUSTE DE COLUNA

Atributos de espaçamentoComo você já verificou, existem dois atributos que permitem o controle de espaçamento em tabelas:

177


Unidade 6

CELLPADDING – estabelece o espaço entre o texto e as bordas da célula. �

CELLSPACING – estabelece o espaço entre células. �

Tomemos a mesma tabela simples já vista na figura 6.12:

FIGURA 6.16 – EXEMPLO DE TABELA AJUSTADA

Agora, vamos alterar o espaço entre o texto e as bordas do exemplo anterior, colocando na tag TABLE, o seguinte código:

<TABLE BORDER=1 CELLPADDING=20>

Observe que o texto afastou-se da borda:

FIGURA 6.17 – EXEMPLO DE ESPAÇAMENTO DO TEXTO EM RELAÇÃO ÀS BORDAS DA TABELA

178


Vamos alterar, agora também, o espaço entre células do exemplo anterior:

<TABLE BORDER=1 CELLSPACING=20>

Veja o espaçamento entre as células (o preenchimento) foi afetado:

FIGURA 6.18 – EXEMPLO DE PREENCHIMENTO DAS BORDAS DA TABELA (AFASTAMENTO ENTRE AS CÉLULAS)

Podemos, ainda, combinar os dois atributos, alterando o espaço entre texto e bordas além do espaço entre células, conforme exemplo abaixo:

<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>

A tabela é assim visualizada:

FIGURA 6.19 – EXEMPLO DE ESPAÇAMENTO E PREENCHIMENTO NA TABELA

179


Unidade 6

Você, agora, já viu grande parte dos recursos disponíveis para manipular tabelas, que permitem produzir bons efeitos de apresentação.

Vamos, então, estudar as cores em tabelas?

Seção 4 - Cor em tabelas

Você vai estudar, nesta seção, como inserir, em tabelas, cor de fundo e de borda além de como combinar tais cores.

Cor de fundoPara alterar a cor de fundo de uma tabela, de uma linha ou de uma célula contida em uma linha, use o atributo BGCOLOR das tags <TABLE>, <TR>, <TD> ou <TH>. Novamente, utilize o exemplo dos meses, para propor uma cor de fundo na tabela:

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR=”#E1FFD9”>

Veja o resultado abaixo:

FIGURA 6.20 – EXEMPLO DA UTILIZAÇÃO DE CORES EM TABELA

180


Cada cor de fundo anula a cor de fundo do elemento em que está contida. O fundo de uma tabela, por exemplo, anula o fundo da página; o fundo de uma linha anula o fundo da tabela; e as cores das células anulam todas as outras cores.

Podemos colocar cor de fundo em células específicas da tabela, verifique o exemplo a seguir:

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10>

<TR>

<TD BGCOLOR=”#E1FFD9”>janeiro</TD>

<TD>fevereiro</TD>

<TD BGCOLOR=”#E1FFD9”>março</TD>

</TR>

<TR>

<TD>abril</TD>

<TD BGCOLOR=”#E1FFD9”>maio</TD>

<TD>junho</TD>

</TR>

</TABLE>


FIGURA 6.21 – EXEMPLO DO USO DE CORES DE FUNDO EM CÉLULAS ALTERNADAS

181


Unidade 6

Cor de bordaAlguns navegadores permitem que você altere as cores dos elementos da borda da tabela, através da utilização dos seguintes atributos:

BORDERCOLOR - define a corda da borda, anulando o �

aspecto tridimensional da borda padrão.

BORDERCOLORLIGHT - define o componente claro de �

bordas tridimensionais.

BORDERCOLORDARK - define o componente escuro de �

bordas tridimensionais.


<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">

Veja o resultado do atributo BORDERCOLOR no navegador:

FIGURA 6.22 – EXEMPLO DE BORDA COM COR

182


Veja este outro exemplo:

<TABLE BORDER=”1” CELLSPACING=”0” CELLPADDING=10 BORDERCOLOR=”#00FF00”>

<TR>

<TD bgcolor=”#E1FFD9”>janeiro</TD>

<TD>fevereiro</TD>

<TD bgcolor=”#E1FFD9”>março</TD>

</TR>

<TR>

<TD>abril</TD>

<TD bgcolor=”#E1FFD9”>maio</TD>

<TD>junho</TD>

</TR>

</TABLE>


FIGURA 6.23 – EXEMPLO DE FORMATAÇÃO DE TABELA

183


Unidade 6

Combinando coresO Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada célula. Basta acrescentar o atributo BGCOLOR com a cor desejada às tags de célula. Em algumas combinações de cores será necessário também modificar a cor das letras. Isso é feito com o atributo COLOR dentro da tag <FONT>. Veja o exemplo:

<TABLE BORDER>

<TR>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Comida</FONT></TH>

<TH BGCOLOR=000000><FONT COLOR=FFFFFF>Bebida</FONT></TH>

</TR>

<TR>

<TD BGCOLOR=white>Arroz</TD>

<TD BGCOLOR=black><FONT COLOR=WHITE>Vinho</FONT></TD>

</TR>

</TABLE>

Visualização:

FIGURA 6.24 – EXEMPLO DE FORMATAÇÃO DE TABELA

184


Síntese

Para melhor auxiliar você nos seus estudos, abaixo, segue uma síntese das tabelas com os atributos de tabela, coluna e linha:

Sintaxe Definição

<TABLE>...</TABLE> define a tabela

<CAPTION>...</CAPTION> define o título da tabela

<TR>...</TR> delimita uma linha

<TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>)

<TD>...</TD> delimita um elemento ou célula (dentro de <TR>)

Eis um resumo para a tag <TABLE>:


Alinhamento ALIGN=”LEFT|RIGHT|CENTER” <TABLE ALIGN=”CENTER”>texto</TABLE>

BordaBORDER=”TAMANHO” (em pixels)

<TABLE BORDER=”1”>texto</TABLE>

ComprimentoWIDTH=”TAMANHO” (em pixels ou % da pagina)

<TABLE WIDTH=”20%”>texto</TABLE>

AlturaHEIGHT=”TAMANHO” (em pixels ou % da pagina)

<TABLE HEIGHT=”20%”>texto</TABLE>

Cor de fundo BGCOLOR=”COR” <TABLE BGCOLOR=”blue”>texto</TABLE>

Cor da borda BORDERCOLOR=”COR” <TABLE BORDERCOLOR=”orange”>texto</TABLE>

Cor da borda escura BORDERCOLORDARK=”COR” <TABLE BORDERCOLORDARK=”red”>texto</TABLE>

Cor da borda clara BORDERCOLORLIGHT=”COR” <TABLE BORDERCOLORLIGHT=”yellow”>texto</TABLE>

185


Unidade 6

Para a tag <TR>:


Alinhamento ALIGN=”LEFT|RIGHT|CENTER|MIDDLE|BOTTOM” <TR ALIGN=”CENTER”>texto</TR>

Para a tag <TD>:


AlinhamentoALIGN=”LEFT|RIGHT|CENTER” e VALIGN=TOP|MIDDLE|BOTTOM

<TD ALIGN=”CENTER”>texto</TD>

Colunas que ocupa

COLSPAN=”NUMERO” <COLSPAN=”2”>texto</TD>

Linhas que ocupa

ROWSPAN=”NUMERO” <ROWSPAN=”2”>texto</TD>

Cor de fundo BGCOLOR=”COR” <TD BGCOLOR=”#123456”>texto</TD>

Existe também o <TH> que é como o <TD>, mas ele já vem com o atributo negrito e centralizado como padrão.

186



Leia com atenção o enunciado seguinte e resolva a atividade programada para a sua auto-avaliação.

1. Caro aluno, você consegue reproduzir o código HTML que está sendo mostrado no navegador abaixo? Vamos tentar?

FIGURA 6.25 – UM EXEMPLO DE TABELA PARA A AUTO-AVALIAÇÃO

Pior que os acentos...

A formatação de tabelas é complicada e o texto fonte chega a ser quase ininteligível quando montamos tabelas complexas e fazemos uso de seus diversos atributos.

A melhor opção para você montar sua tabela, sem dúvida, é usar os editores WYSIWYG.

Alguns editores de modo texto têm uma interface gráfica que ajuda na criação de tabelas, mas a edição de tabelas já existentes precisa ser feita à mão.

187


Unidade 6

Saiba mais


http://ftp.unicamp.br/pub/apoio/treinamentos/internet/webpages.pdf (Confecção de �

webpages)

http://www.pypbr.com/html/htm_avc.asp#table (HTML Avançado) �

7UNIDADE 7

Frames


Construir � Frames

Utilizar os atributos de FRAMESET �

Utilizar os atributos para FRAME �

Definir a janela alvo através do atributo TARGET �

Seções de estudo

Seção 1 Links com frames

Seção 2 Composição com frames

Seção 3 Atributos de FRAMESET

Seção 4 Atributos de FRAME

Seção 5 Tag NOFRAMES

190



A especificação de frames em HTML 3.2 ainda está em andamento e nem todos os navegadores oferecem suporte a eles. O Netscape foi o primeiro a implementar essa facilidade (a partir da versão 2.0).

Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível apresentar mais de uma página por vez. Tome como exemplo um índice principal em uma parte pequena da tela e os textos relacionados ao índice em outra parte.

Os documentos que possuem frames são bonitos e atrativos, por serem diferentes do padrão simples de páginas encontradas na web. Eles possibilitam dividir um hipertexto em múltiplas janelas (os frames), nas quais podem ser carregados diferentes documentos HTML.

É muito fácil colocar frames em páginas. Porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas.

Os frames mudam o conceito de página para o navegador e para você. Ao contrário de todos os exemplos anteriores, que utilizam uma única página em HTML para apresentar uma tela de informações, quando você cria sites na web, através da utilização de frames, uma única tela é composta, na verdade, de diversos documentos HTML separados, que interagem uns com os outros.

Bookmark é um “atalho” que marca o endereço de um site já acessado para ser acessado novamente. Os navegadores possibilitam armazenar bookmarks ou favoritos, que guardam a URL dos sites tornando fácil visitá-los novamente. É uma lista de endereços já visitados na internet.

191


Unidade 7

A figura seguinte mostra que é necessário um mínimo de quatro documentos distintos para criar uma tela como a representada a seguir:

FIGURA 7.1 ESTRUTURA BÁSICA DE FRAMES

Os frames são gerados através de dois componentes básicos:

elemento � FRAMESET - responsável pela divisão do documento em campos separados;

elemento � FRAME - que indica as páginas que devem ser carregadas em cada uma dessas subdivisões.

O documento que implementa frames, em que se define a estrutura das janelas, é conhecido como Frame Document. É nele que se estabelece o número de janelas desejado e a sua distribuição na tela. Dentro de um Frame Document, as marcações <BODY> e </BODY> são substituídas por <FRAMESET> e </FRAMESET>.

192


Construindo Frames com o elemento FRAMESETComo já dito, a tag <FRAMESET> divide um documento em diversas regiões. Para tal, ela faz uso dos atributos COLS e ROWS, referentes a divisões verticais (como colunas em uma tabela) e horizontais (como linhas) entre as janelas na tela. Os atributos FRAMEBORDER, BORDER e BORDERCOLOR também podem ser utilizados para modificar o layout dos frames. Veremos esses atributos mais adiante.

Atenção!

Observe que dentro de um FRAMESET não se pode utilizar nenhum outro dos elementos válidos no corpo de um texto HTML comum.

Uma página com frames tem um texto fonte semelhante a:

<HTML>

<HEAD><TITLE>Assunto X</TITLE></HEAD>

<FRAMESET COLS=”20%, 80%”>

<FRAME SRC=”indice1.html”>

<FRAME SRC=”texto.html” NAME=”principal”>

<NOFRAME>

<BODY>

<H2>Bem-vindo à página do assunto X!</h2>

<P>Blá blá blá blá blá blá blá blá blá blá

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

193


Unidade 7

Conforme o exemplo acima, a parte FRAMESET define a divisão da página em “quadros”. Neste caso, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela e a segunda coluna com os restantes 80% da tela.

Observe que, dentro da formatação de FRAMESET, temos os FRAME SRC, que fazem referências às páginas que serão mostradas nos frames definidos.

Assim, no código descrito acima, a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela) e a página texto.html será mostrada na segunda (ocupando 80% da tela).

O conteúdo do arquivo indice1.html é este:

<HTML>

TESTANDO FRAME... 20%

</HTML>

E o conteúdo o arquivo texto.html é este:

<HTML>


</HTML>

Assim, o resultado apresentado no navegador será:

FIGURA 7.2 – EXEMPLO DE VISUALIZAÇÃO DE UM FRAME

194


A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos navegadores que não suportam sua apresentação.

Seção 1 - Links com FramesSempre que se aciona um link dentro de uma página, é padrão que a página referente a esse link seja carregada na mesma janela da página anterior.

Definindo a janela Alvo através do Atributo TARGETO atributo TARGET permite controlar em qual janela um link específico será exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espécie de índice, em que vários links estarão disponíveis, e uma outra janela em que serão carregados os documentos referentes a esses links. Para projetar um documento com essas características, é preciso que o atributo TARGET seja utilizado, pois ele é responsável por indicar em que lugar um determinado documento deve ser visualizado.

É aqui que entra a necessidade de adicionar o atributo NAME ao elemento FRAME, pois é a partir do atributo NAME que o elemento TARGET saberá em qual janela da tela deve ser exibido o documento.

No exemplo a seguir um link dentro da janela à direita faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%):

195


Unidade 7

<HTML>

<HEAD><TITLE>Assunto X</TITLE></HEAD>


<FRAME SRC=”indice1.html”>

<FRAME SRC=”texto.html” NAME=”principal”>

<NOFRAME>

<BODY>

<H2>Bem-vindo à página do assunto X!</h2>

<P> Blá blá blá blá blá blá blá blá blá blá

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Veja que no código fonte acima o frame associado à apresenta.html tem um atributo NAME. Nomear um frame permite que direcionemos o frame em que será apresentado o documento de destino de um link.

No arquivo indice1.html, temos o seguinte conteúdo:

<HTML>


<a href=”apresenta.html” TARGET=principal>Exemplo nº.2</a>.

</HTML>

Deste modo, indica-se que se está definindo (pelo atributo target) o frame em que a página de destino do link (apresenta.html) será mostrada.

196


No arquivo apresenta.html, temos o seguinte conteúdo:

<HTML>

Aqui estamos vendo a apresentação de frames com link.

</HTML>

O resultado no seu navegador será assim:

FIGURA 7.3 – EXEMPLO DE LINKS COM FRAMES

Quando clicarmos em Exemplo nº 2, no frame da esquerda, o resultado será mostrado no frame da direita, conforme figura a seguir:

FIGURA 7.4 – EXEMPLO DE LINK JÁ VISITADO COM FRAME

Se você não entendeu como funciona esse mecanismo de direcionamento, reveja o exemplo e teste todos os links para verificar o que foi dito neste item, pois esta estrutura básica de FRAMES em HTML é fundamental!

197


Unidade 7

Limpando a telaHá basicamente dois efeitos possíveis para limpar a apresentação de frames e isso é feito com “targets” especiais (como você já viu, o atributo TARGET foi apresentado no item Links com Frames):

TARGET=" � _top” limpa os frames que estiverem ativos, apresentando a página de destino na tela inteira.

TARGET=" � _blank” abre uma nova janela do browser para apresentar a página de destino.

Seção 2 - Composição com Frames

Como você já observou, a formatação FRAMESET tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas. Podemos utilizar uma combinação de “ framesets” para criar diversos modos de apresentação do conteúdo de um site.

Antes de ver algumas composições, lembre-se de que os pontos-chave para o mecanismo dos frames são estes, mostrados no item anterior:

a nomeação dos � frames; e

a declaração dos � targets dos links, que definem o frame no qual as páginas de destino serão mostradas.

Embora quase todos os editores WYSIWYG de HTML dêem suporte à criação de frames, é necessário que o autor se preocupe com os detalhes de nomeação de frames e de direcionamento de links.

198


Veja como montar dois frames em coluna:

FIGURA 7.5 – EXEMPLO DE FRAME EM COLUNA

<FRAMESET COLS=”x, y”>

<FRAME SRC=”col1.html”>


</FRAMESET>

Como montar dois frames em linha:

FIGURA 7.6 - EXEMPLO DE FRAME EM LINHA

<FRAMESET ROWS=”x, y”>

<FRAME SRC=”lin1.html”>


</FRAMESET>

Para montar esta estrutura abaixo, você deve criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:

FIGURA 7.7 - EXEMPLO DE DOIS FRAMES EM COLUNA E DOIS FRAMES EM LINHA






</FRAMESET>

</FRAMESET>

199


Unidade 7

Para montar a estrutura abaixo, crie primeiro dois frames em linha e componha a segunda linha com dois frames em coluna:

FIGURA 7.8 - EXEMPLO DE DOIS FRAMES EM LINHA E DOIS FRAMES EM COLUNA






</FRAMESET>

</FRAMESET>

Atenção!

As composições com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.

Seção 3 - Atributos de FRAMESET

Nesta seção você estudará os seguintes atributos de FRAMESET: ROWS; COLS, FRAMEBORDER, BORDER e BORDERCOLOR.

ROWS Este atributo define divisões horizontais entre janelas. Vem sempre acompanhado de valores que definem que espaço da tela será ocupado por cada janela. Cada janela a ser criada deverá

200


ter, portanto, um valor associado e esses valores devem estar separados por vírgula. Veja a sintaxe:

(ROWS=”valor, valor, valor...”)

Cada valor poderá ser:

Numérico em pixels (ROWS=”30,50”)

Refere quantos pixels cada frame (ou janela) deve ocupar. A desvantagem dessa notação é que não é possível ter o controle do valor total de pixels que o navegador do usuário contém.

Percentual (ROWS=”25%,25%,50%”)

Corresponde a um valor percentual do tamanho da página, sempre somando um total de 100%. Esse é o método mais simples.

Relativo (ROWS=”*,*,2*”)

Define o tamanho de uma janela em relação às outras. No exemplo ao lado, os dois primeiros frames vão ocupar um quarto da tela e o terceiro frame ocupará dois quartos, ou seja, metade da tela. Esse exemplo produz o mesmo resultado que o exemplo anterior utilizado no Percentual.

No último caso, do valor relativo, o “ * “ funciona como uma variável: ao se somar os valores de cada um dos campos em que será dividida a tela, deve-se obter 1 (um). No exemplo anterior, teríamos o seguinte: * + * + 2* = 1 > * = 1/4. Por este motivo, as primeiras janelas ocupam um quarto da tela (*) e a terceira janela ocupa um meio (2*).

Também é possível combinar os valores numéricos, percentuais e relativos, como demonstram os exemplos a seguir.

Veja como dividir a tela do navegador em três janelas horizontais, com a do meio mais larga que as de cima e de baixo.

201


Unidade 7

<HTML><HEAD>

<TITLE> Documento Frame</TITLE></HEAD><FRAMESET ROWS=”30%, 40%, 30%”>

<FRAME SRC=”exemplo1.html”><FRAME SCR=”exemplo2.html”><FRAME SCR=”exemplo3.html”>

</FRAMESET></HTML>


EXEMPLO 7.9 – EXEMPLO DA TELA DIVIDIDA EM 3 FRAMES EM LINHA

Atenção!

Se os arquivos Exemplo1.html, Exemplo2.html e Exemplo3.html não existirem, o resultado na tela naquele frame que indica um dos arquivos inexistente aparecerá com a mensagem “A página não pode ser exibida”.

202


Você também pode propor três janelas horizontais: a primeira e a última com altura fixa e o frame central ocupando o restante do espaço (é o próprio navegador que define qual o tamanho do frame central, de acordo com o espaço que sobra na tela após a definição do primeiro e do último frames).

<HTML>

<HEAD>

<TITLE> Frame Document </TITLE>

</HEAD>

<FRAMESET ROWS=”35, *, 40”>

<FRAME SCR=”exemplo1.html”>

<FRAME SRC=”exemplo2.html”>

<FRAME SCR=”exemplo3.html”>

</FRAMESET>

</HTML>

Visualizando a tela dividida em frames no seu navegador:

EXEMPLO 7.10 – EXEMPLO DO USO DE FRAMES EM LINHA COM O FRAME CENTRAL MAIS LARGO

203


Unidade 7

Na definição do Frame Document anterior, cada janela (frame) corresponde a um elemento FRAME que indica, no mínimo, a URL que será associada a essa região da tela, através do atributo SRC. O elemento FRAME e seus atributos serão descritos em breve.

COLSO atributo COLS funciona exatamente como a marcação anterior (inclusive no que diz respeito ao modo de apresentação do campo “valor”). No entanto, este atributo divide a tela em frames ou janelas verticais (assim como as colunas em tabelas), como mostram os exemplos a seguir. A sintaxe é a seguinte:

(COLS=”valor,valor,valor..”)

Acompanhe os exemplos:

Aqui se divide a tela em 3 colunas, sendo que a do meio é mais larga que as outras duas:

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=”30%, 40% ,30%”> <FRAME SRC=”exemplo1.html”> <FRAME SRC=”exemplo2.html”> <FRAME SRC=”exemplo3.html”> </FRAMESET> </HTML>

Vejamos o resultado do código HTML acima no seu navegador.

204


EXEMPLO 7.11 – EXEMPLO DA TELA DIVIDIDA EM 3 FRAMES EM COLUNA

Aqui se divide a tela em duas verticais:

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=”200,*”> <FRAME SRC=”exemplo1.html”> <FRAME SRC=”exemplo2.html”> </FRAMESET> </HTML>

Vejamos o resultado no seu navegador:

EXEMPLO 7.12 – EXEMPLO DA TELA DIVIDIDA EM 2 FRAMES EM COLUNA

205


Unidade 7

Da mesma maneira que nos exemplos das linhas (ROWS), o navegador irá definir sozinho qual o tamanho da segunda célula do atributo COLS. Para intercalar janelas verticais e horizontais, é necessário definir várias áreas FRAMESET. Para cada área delimitada com FRAMESET, pode-se definir o número de linhas ou colunas. Contudo, não é possível definir COLS e ROWS para uma mesma área FRAMESET.

Para intercalar linhas e colunas, pode-se fazer como no exemplo a seguir:

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD>  <FRAMESET ROWS=”30%,70%”> <FRAME SRC=”exemplo1.html”>  <FRAMESET COLS=”50%,50%”> <FRAME SRC=”exemplo2.html”> <FRAME SRC=”exemplo3.html”> </FRAMESET> </FRAMESET>

</HTML>

206



EXEMPLO 7.13 – EXEMPLO DA TELA DIVIDIDA EM FRAMES POR LINHA E COLUNA

FRAMEBORDER Este atributo especifica se os frames do FRAMESET devem apresentar uma borda ou não. Se ele for omitido, será usado o valor (“yes” ou “no”) do FRAMESET mais externo. Se nenhum FRAMESET apresentar esse atributo, então, o valor padrão (com bordas) será usado. O modelo é o seguinte:

(FRAMEBORDER=”yes”|”no”)

Eis um exemplo:

<FRAMEBORDER=”no”>

207


Unidade 7

Podemos testar o exemplo a seguir utilizando o atributo FRAMEBORDER no FRAMESET:

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=”200,*” FRAMEBORDER=”no”> <FRAME SRC=”exemplo1.html”> <FRAME SRC=”exemplo2.html”> </FRAMESET> </HTML>

Veja o resultado do frame sem as bordas no seu navegador:

EXEMPLO 7.14 – EXEMPLO DE FRAME SEM BORDA

208


BORDEREste atributo especifica a largura da borda que os frames desse FRAMESET devem apresentar. A sintaxe é esta:

(BORDER=”valor”)

BORDER=0 equivale a definir FRAMESET=”no”. O exemplo a seguir define bordas com espessura de 10 pixels:

<BORDER=”10”>

BORDERCOLOREste atributo especifica a cor da borda que os frames desse FRAMESET devem apresentar. A sintaxe é a seguinte:

(BORDERCOLOR=nome-cor|RGB)

Neste caso, você pode usar tanto o nome da uma cor (nome-cor) quanto o padrão RGB:

<BORDERCOLOR=blue>

209


Unidade 7

Seção 4 – Atributos de FRAME

Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME).

A tag <FRAME> define que página HTML será carregada em cada janela contida em uma área FRAMESET. Ela aceita seis possíveis atributos, cuja utilização depende das necessidades do criador da página (Frame Document):

SRC �

NAME �

MARGINWIDTH �

MARGINHEIGHT �

SCROLLING �

NORESIZE �

Vejamos cada atributo em separado.

SRC O atributo SRC define a URL que será exibida em cada frame. Ele pode ser omitido caso se deseje criar uma região em branco na tela. A sintaxe é esta:

(SRC=”url”)

Veja o exemplo:

<FRAME SRC=”indice.html”>

210


NAME Esse atributo é utilizado para associar um nome a uma das divisões do Frame Document. Deve ser usado quando se deseja especificar onde (em que janela) documentos devem ser carregados. É um atributo opcional. Por padrão, os frames não têm nome, mas quando acontece de se estabelecerem nomes para janelas, estes devem começar com caractere alfanumérico. A sintaxe é a seguinte:

(NAME=”nome”)


<FRAME SRC=”inicial.html” NAME=”navega”>

MARGINWIDTH Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distância entre o conteúdo da página e as margens da janela. O valor associado será em valor absoluto em pixels. O menor valor aceito é 1. É um atributo opcional. Caso não esteja definido, o navegador usará o seu padrão para definir as margens dos frames ou janelas. A sintaxe é a seguinte:

(MARGINWIDTH=”valor”)

Observe o exemplo:

<FRAME SRC=”indice.html” MARGINWIDTH=”3”>

211


Unidade 7

MARGINHEIGHTTambém é um atributo opcional. Funciona exatamente como o anterior, só que determina as margens superior/inferior de cada frame. Eis a sintaxe:

(MARGINHEIGHT=”valor”)

Veja o exemplo:

<FRAME SRC=”indice.html” MARGINHEIGHT=”4”>

SCROLLINGNovamente, temos um atributo opcional. Com SCROLLING é definido se uma janela deve possuir barra de rolagem ou não. Caso seja definido como YES, a janela sempre possuirá uma barra de rolagem visível. Caso seja definido como NO, nunca haverá barra de rolagem. E, finalmente, se vier como AUTO, o navegador aplicará a barra quando necessário. O valor padrão é AUTO. Portanto, se o atributo SCROLLING não for definido, o navegador aplicará a barra de rolagem à janela em questão, automaticamente, toda vez que o conteúdo da página HTML não couber completamente no frame. A sintaxe é esta:

(SCROLLING=”yes/no/auto”)

Observe o exemplo:

<FRAME SRC=”indice.html” SCROLLING=”yes”>

212


Para dispor o frame sem a barra de rolagem:


<FRAME SRC=”indice.html” SCROLLING=”no”>

<FRAME SRC=”apresenta.html” NAME=”principal”>

</FRAMESET>

É bom lembrar que a barra de rolagem de um frame fica sempre à direita; não é possível, atualmente, mudar essa característica.

NORESIZENORESIZE é também opcional. Esse atributo não possui valor associado; quando ele não aparece, o usuário poderá alterar o tamanho da janela, arrastando a sua borda com o mouse. Caso contrário, a janela terá sempre um tamanho inalterável. Normalmente, todas as janelas podem ter seu tamanho alterado, já que navegadores diferentes estarão sendo utilizados por diferentes pessoas e as páginas podem não caber na tela, impedindo que os usuários possam lê-las. Eis um exemplo:

<FRAME SRC=”indice.html” NORESIZE>

213


Unidade 7

Aqui está um exemplo de elemento FRAME acompanhado de alguns atributos:

<HTML>

<HEAD>

<TITLE> Frame Document </TITLE>

</HEAD>

<FRAMESET COLS=”200,*,*”>

<FRAME SRC=”Exemplo1.html”>

<FRAME SRC=”Exemplo2.html” NAME=”indice” MARGINWIDTH=”3”

MARGINHEIGHT=”4” SCROLLING=”yes” NORESIZE>

<FRAME SRC=”Exemplo3.html”>

</FRAMESET>

</HTML>


EXEMPLO 7.15 – EXEMPLO DE ATRIBUTOS NA TAG FRAME

214


Seção 5 – Tag NOFRAMES

Se existem navegadores que não suportam ou não entendem frames, o que fazer para viabilizar Frame Documents que possam ser navegados por eles?

É justamente aí que entra a container tag <NOFRAMES>. Ela possibilita que se crie uma opção de navegação na página para quem não possui um navegador que entenda frames. Isso é bastante recomendável! Essa marcação aparece no documento inicial Frame Document.

Quando o acesso for feito através de um navegador que NÃO entenda frames, os elementos FRAMESET e FRAME (e NOFRAMES também!) serão ignorados pelo navegador e as marcações entre <NOFRAME> e </NOFRAME> serão obedecidas, montando-se uma página alternativa. Por outro lado, os navegadores que suportam frames ignoram todo conteúdo entre as marcações NOFRAMES. Veja o exemplo a seguir:

<HTML>

<HEAD>

<TITLE> Noframes </TITLE>

</HEAD>

<FRAMESET ROWS=”30%,70%”>

<FRAME SRC=”exemplo1.htm”>

<FRAMESET COLS=”50%,50%”>



</FRAMESET>

</FRAMESET>



<NOFRAMES>

<FONT SIZE=4>

215


Unidade 7

Esta parte do código, só irá aparecer no seu navegador caso o mesmo não suporte o uso de frames.

</FONT>

</NOFRAMES>

</HTML>

Veja o resultado no seu navegador. Se ele suporta o uso de frames, surgirá algo do tipo:

EXEMPLO 7.16 – EXEMPLO DO USO DA TAG NOFRAMES

Caso o seu navegador NÃO suporte o uso de frames surgirá na tela a seguinte mensagem:

EXEMPLO 7.15 – EXEMPLO DO USO DA TAG NOFRAMES QUANDO O NAVEGADOR NÃO ACEITA FRAME

216


Síntese

E assim acaba nossa unidade. Neste momento, você tem os conhecimentos suficientes para a construção de um web site básico. Agora, com um bocado de imaginação pode fazer um bom web site. Boa sorte e sucesso!

Os Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para a navegação. Além disso, com este recurso torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do browser.

Tenha o cuidado de procurar controlar a navegação, evitando que o acionamento de links não leve o leitor a ver seu navegador criar frames dentro de frames, gerando uma grande confusão. Evite isso utilizando a tag TARGET, como vimos na seção 1 desta unidade.

217


Unidade 7


Leia com atenção e resolva as atividades programadas para a sua auto-avaliação.

1 – Crie o frame a seguir para ser visualizado no seu navegador:

Cabeçalho.html

Menu.html Principal.html

Rodapé.html

2 – Quais as vantagens de se utilizar frames em um site? Vamos discutir sobre isso na ferramenta FORUM.

3 - É importante criarmos tags NOFRAME? Por quê?

218


Saiba mais


http://www.sistemasabertos.com.br/twiki/bin/genpdfpub/Pub/LivroHTMLTotal (HTML) �

http://www.criarweb.com/artigos/131.php (Frames em HTML) �

http://ftp.unicamp.br/pub/apoio/treinamentos/internet/webpages.pdf (Confecção de �

webpages)

8UNIDADE 8

Desenvolvendo Páginas Eficientes


Utilizar as � tags HTML 2.0, 3.2 ou 4.

Criar páginas HTML de modo a serem facilmente �

consultadas.

Elaborar um � layout adequado de páginas da web.

Compreender quando e por que criar vínculos. �

Seções de estudo

Seção 1 Uso das extensões HTML

Seção 2 Seu texto na web

Seção 3 Projeto e layout da página

Seção 4 Uso de vínculos

Seção 5 Outras sugestões de bons hábitos

220



Nesta unidade, não vamos abordar as tags HTML e sim, estudaremos os elementos que podem diferenciar os seus documentos dos de alguém que apenas conhece as tags e espalha o texto e as imagens gráficas no documento, chamando isso de apresentação.

Seção 1 – Uso das extensões HTML

No passado, antes de todas as empresas que produzem navegadores começarem a introduzir suas próprias tags HTML, era fácil ser um projetista da web. As únicas tags que você tinha que lidar eram aquelas da HTML 2.0 e a grande maioria dos navegadores existentes na web era capaz de ler as suas páginas sem qualquer problema. Hoje, ser um projetista da web é bem mais complicado. Você tem que trabalhar com vários grupos de tags:

Tags � da HTML 2.0.

Recursos da HTML 3.2 e 4, como, por exemplo, � frames, tabelas, divisões, painéis de fundos, cores e folhas de estilos, que contam com o suporte da maioria, mas não de todos os navegadores.

Tags � específicas dos navegadores, que podem ou não se tornarem parte da especificação HTML oficial e cujo suporte varia de um navegador para outro.

Outras � tags propostas para o futuro para a HTML, que contam com o suporte de poucos navegadores.

Fonte: LEMAY, 2001.

Se você considera essa situação confusa, saiba que não é o único. Os autores e projetistas estão tentando esclarecer essa confusão e tomar decisões com base no aspecto visual que desejam

221


Unidade 8

atribuir às suas páginas. As extensões HTML oferecem maior flexibilidade no layout, mas limitam o público que pode ver essas páginas da maneira que você deseja que elas sejam exibidas.

A escolha de uma estratégia para a utilização de extensões HTML é uma das mais importantes decisões de projeto que você fará ao criar páginas da web. Se o autor da web quer o maior público possível para suas páginas da web, então ele deve se manter fiel às tags da HTML 2.0, conforme definidas pelo padrão. Você pode criar um documento da web magnífico com as tags da HTML 2.0 e esse documento tem uma grande vantagem em relação a muitos documentos experimentais, pois ele é reconhecido sem qualquer dificuldade pela grande maioria dos navegadores e atinge, portanto, o maior público possível.

Se o autor da web, por outro lado, deseja ter sobre o layout de páginas o tipo de controle que as mais avançadas tags proporcionam e está disposto a perder boa parte de seu público para conseguir isso, então ele utilizará as mais novas inserções propostas pela HTML 4. As páginas para esse autor são elaboradas para poucos navegadores, são testadas somente nesses navegadores e é possível inclusive que haja um aviso na página informando em qual navegador a página deve ser lida. Na maioria das vezes, se você usar outro navegador para ler essas páginas, o resultado poderá ser bem confuso, quando não for inteiramente ilegível.

A melhor posição, ao se escolher entre um projeto refinado e um grande público provavelmente é o equilíbrio entre os dois. Com algum conhecimento prévio dos efeitos que as extensões HTML terão sobre as suas páginas, tanto em navegadores que oferecem suporte para elas como em outros que não oferecem esse suporte, você poderá promover pequenas modificações no seu projeto, que permitirão tirar proveito dos dois aspectos mencionados. Assim, as suas páginas continuarão legíveis e úteis em navegadores mais antigos e em uma grande variedade de plataformas, mas poderão também tirar proveito dos recursos avançados nos novos navegadores (LEMAY, 2001).

A estratégia mais importante que podemos sugerir para utilizar extensões e, ao mesmo tempo, manter a compatibilidade com outros navegadores consiste em testar os seus arquivos nesses navegadores. A maioria dos navegadores é composta

222


de programa freeware ou shareware e se encontra disponível para download. Por isso, basta localizá-los e instalá-los. Ao testar as suas páginas, você poderá ter uma noção de como os diversos navegadores interpretam as diferentes tags e acabará percebendo quais extensões proporcionam maior flexibilidade, quais delas exigem codificação especial para fornecer alternativas em navegadores mais antigos e quais tags podem ser usadas livremente sem causar problema em outros navegadores.

Você sabe por que usar o HTML 4?

Pesquise no site http://www.artifice.web.pt/tutoriais/cntd/tut_html16.html

Seção 2 – Seu texto na web

A redação na web não é diferente da redação no mundo real. Mesmo que o texto que você esteja redigindo para a web não seja apresentado em uma cópia impressa, ainda assim ele será “publicado” e refletirá a sua personalidade e o seu trabalho. Na verdade, você deverá seguir as regras de uma boa redação com mais cuidado, pelo fato de o documento estar no ambiente on-line e ser, por isso, muito visitado por leitores muito exigentes.

Com a grande quantidade de informações na web, os leitores não terão muita paciência se a sua página estiver cheia de erros de grafia ou desorganizada. Eles certamente desistirão depois de lerem a segunda frase e passarão para a página de outra pessoa. Afinal de contas, existem milhões de páginas na web. Não há tempo a perder com páginas ruins. Vai dizer que você nunca fez isso? Nunca visitou uma página carregada de informações desorganizadas, sem um bom layout e acabou desistindo?

Isso não significa que você tenha que se tornar um escritor profissional para criar uma página na web apresentável. Mas deve seguir algumas sugestões para tornar a sua página mais legível e compreensível. A seguir estão elas:

223


Unidade 8

Redija com clareza e objetividadeUma das melhores formas de tornar as suas páginas da web legíveis consiste em redigir da maneira mais clara e objetiva possível, apresentando os seus pontos de vista e nada mais. Se você colocar muitas informações adicionais, poderá dificultar a compreensão das suas idéias por parte do leitor da sua página.

O critério de qualidade do texto vale tanto para a Internet quanto para o papel. Não há linguagem nova que desobrigue o texto na Internet a ser bom, legível e compreensível. O texto só passa a existir realmente quando é consumido produtivamente pela pessoa que está do outro lado da linha.

Saiba mais sobre webwriting!

Você sabe o que é webwriting? Webwriting é o trabalho de criação, produção, edição e administração de textos específicos para conteúdo de websites, a partir de um conjunto de características próprias da linguagem escrita da mídia internet. Estude mais sobre o assunto no seguinte site:

http://www.webwritersbrasil.com.br/detalhe.asp?numero=146

Organize as suas páginas para uma rápida consultaMesmo que você crie o texto mais sucinto e bem-estruturado jamais visto em toda a web, os seus leitores não irão lê-lo com atenção do início ao fim.

Um texto para internet tem que ter o tamanho que a informação exigir. Na informação rápida, não se pode esquecer de um ponto crucial: o porquê. Se nós entramos na Internet, queremos saber o porquê dos fatos, não queremos só rapidez. A velocidade tem que vir com peso, com qualidade. A internet é a grande chance da humanidade para preservar sua cultura e, neste sentido, deve funcionar como um banco de dados e não apenas como um veículo de informação.

224


A consulta, nesse contexto, é a primeira olhada dos leitores em cada página, para ter uma noção geral de seu conteúdo. Dependendo das informações que eles quiserem obter nas páginas, poderão ler as partes que mais chamam a atenção (cabeçalhos, vínculos, palavras enfatizadas) e, talvez, alguns parágrafos contextuais para, em seguida, continuar a leitura. Ao criar e organizar as suas páginas para facilitar a “consulta”, você estará ajudando os leitores a obter o mais rapidamente possível as informações que necessitam. Para facilitar a consulta à página:

Utilize cabeçalhos para resumir os tópicos - � Se observar, este livro possui títulos e subtítulos para que você possa percorrer rapidamente na busca da informação de maior interesse. O mesmo se aplica às páginas da web.

Utilize listas - � São excelentes para resumir itens relacionados.

Não se esqueça dos menus de vínculos - � O menu de vínculo consiste em uma espécie de lista que, além de oferecer todas as vantagens das listas para a consulta, funciona como uma excelente ferramenta de navegação, através dos links.

Não esconda informações importantes no meio do texto - � Se tiver alguma ressalva ou ponto a destacar, faça-o na parte superior da página ou no início do parágrafo. Parágrafos longos são de difícil leitura e é mais complicado obter informações neles. Quanto mais para dentro do parágrafo você colocar a questão que deseja destacar, menor será a probabilidade desta ser lida.

Destaque cada página � - Tenha o cuidado de criar páginas da web de modo que cada uma delas seja auto-suficiente. Por exemplo, se o leitor cair em uma de suas páginas de seu site, que depende de uma página que ele não visitou, deve ser dado um destaque a essa página visitada de que ele precisa de informações de outra página ou criar um vínculo até a outra página.

Utilize títulos descritivos - � O título deverá fornecer informações sobre o assunto abordado nessa página e também sobre o seu relacionamento com as outras páginas da apresentação de que faz parte.

Se uma página depender de outra anterior a ela, forneça um vínculo �de retorno à página anterior (de preferência crie também um vínculo com a página que ocupa o nível mais alto da hierarquia).

Evite frases do tipo � “você poderá evitar esses problemas fazendo...”, “ao terminar isso, faça aquilo...”, “as vantagens desse método são...” que disponham informações que estarão sendo apresentadas em outra página. Ao se deparar logo de início com essas frases, o leitor poderá ficar confuso.

Fonte: LEMAY, 2001.

225


Unidade 8

Não exagere na ênfaseParágrafos com muitas informações em negrito e itálico ou palavras EM LETRAS MAIÚSCULAS são de difícil leitura, especialmente se você as utiliza diversas vezes em um mesmo parágrafo ou se enfatiza trechos muito longos. A melhor maneira de enfatizar o texto consiste em destacar apenas palavras pequenas, como, por exemplo, E, MAS...

Os textos de vínculo constituem também uma forma de ênfase. Utilize uma única palavra ou uma frase curta como texto de vínculo. Não use trechos ou parágrafos inteiros como vínculos.

Não use termos específicos do navegadorEvite fazer referências a recursos específicos de determinados navegadores. Não use, por exemplo, frases como estas:

Dê um clique Aqui - � E se o seu leitor estiver usando um navegador sem mouse?

Para gravar estar página, abra o menu Arquivo e selecione Salvar �- Cada navegador tem um conjunto diferente de menus e maneiras específicas de executar a mesma ação, além de idiomas diferentes. Sempre que possível, evite fazer referência a operações específicas do navegador nas suas páginas da web.

Utilize o botão Voltar/Back para retornar à página anterior - � Como no item anterior, cada navegador possui um conjunto de botões e métodos específicos de “retorno”. Para que seus leitores consigam realmente retornar a uma página anterior ou acessar outra página específica, estabeleça um vínculo direto com essas páginas.

Verifique a grafia e revise as suas páginasParece óbvio esse item, mas em virtude da quantidade de páginas que existem e que já visitamos, vale a pena mencioná-lo. A elaboração de um conjunto de páginas da web e sua publicação correspondem ao processo de publicação de um livro,

226


à produção de uma revista ou ao lançamento de um produto. Obviamente, é muito mais fácil publicar páginas na web do que livros, revistas ou outros produtos. No entanto, o fato de ser mais fácil não significa que o processo deve ser descuidado. Por isso, existem muitas páginas com muitos erros, pois qualquer pessoa pode redigir um texto, mesmo sem ser um “expert” em língua portuguesa, por exemplo.

Lembre-se que qualquer pessoa poderá ler e explorar suas páginas da web. Erros ortográficos ou gramaticais produzem uma impressão negativa do seu trabalho, de você e das informações que estiver fornecendo. Uma redação ruim poderá irritar o leitor e fazê-lo desistir de prosseguir com a leitura do seu site, por mais fascinante que seja o assunto abordado.

Revise e verifique a grafia de cada uma de suas páginas da web. Se possível, peça a alguém para lê-las. Quando outra pessoa lê, esta poderá detectar melhor determinados erros que você, por ser o autor, muitas vezes não percebe. Uma simples revisão poderá aprimorar muito as suas páginas, facilitando a leitura e navegação.

227


Unidade 8

Atividade de auto-avaliação

Leia cada enunciado com atenção e responda as questões que seguem.

1. O texto na web apresentado, a seguir, mostra o tipo de técnica de redação que deve ser evitado. Pelo fato de todas as informações dessa página serem apresentadas em formato de parágrafo, os seus leitores terão de ler todos os parágrafos para localizar as informações que desejam e ainda descobrir como prosseguir com a leitura. Como você aprimoraria esse exemplo? Procure elaborar novamente essa seção de forma a destacar melhor os pontos principais do texto e o layout da página. Não esqueça de revisar o português e fazer os links como veremos abaixo:

FIGURA 8.1 – COMO CONSTRUIR UM WEBSITE

Atenção!

O código HTML para ser utilizado no exercício de auto-avaliação encontra-se na MIDIATECA. Publique o seu resultado em EXPOSIÇÃO.

Fonte: LE MAY, 2001.

228


Resposta:

229


Unidade 8

Seção 3 – Projeto e layout da página

O melhor layout a ser seguido ao elaborar o projeto de cada página da web é o seguinte: mantenha o projeto o mais simples possível. Reduza o número de elementos (imagens, cabeçalhos e linhas) e lembre-se sempre de chamar a atenção para os pontos mais importantes da página, sem exagerar.

Use cabeçalho como cabeçalhosAqui estamos falando das tags de cabeçalhos <h1>, <h2>... Em navegadores gráficos, os cabeçalhos são em geral representados em fontes maiores ou em negrito. Por isso, somos sempre tentados a utilizar uma tag de cabeçalho para fornecer algum tipo de advertência ou nota ou mesmo enfatizar um texto normal.

Os cabeçalhos funcionam melhor quando utilizados realmente como cabeçalhos, pois destacam o texto e indicam o início de um novo tópico. Se você desejar enfatizar uma determinada seção do texto, considere a possibilidade de utilizar uma imagem pequena, uma linha ou outra forma de ênfase.

Agrupe visualmente as informações relacionadasAgrupar informações relacionadas em uma página da web é uma tarefa de criação e de projeto. Conforme já sugerido, você pode aumentar a capacidade de consulta através do agrupamento de informações afins em cabeçalhos. Ao separar visualmente as seções, você facilita sua diferenciação e enfatiza a relação existente entre as informações fornecidas.

Se uma página da web contiver diversas seções, separe-as visualmente, utilizando, por exemplo, um cabeçalho ou uma linha horizontal, através da tag <HR>.

230


Use um layout padronizadoEm um livro ou revista, as páginas e seções apresentam em geral o mesmo layout (veja este livro, por exemplo). Os números das páginas, assim como a primeira palavra apresentada nelas, estão sempre na posição padrão.

Esse tipo de layout padronizado funciona igualmente bem nas páginas da web. A atribuição de uma única aparência e de um único comportamento a todas as páginas da sua apresentação da web proporciona conforto aos leitores. Depois da segunda ou terceira página, eles conhecerão os elementos de cada página e saberão onde localizá-los. Assim, com um projeto padronizado, os seus leitores podem localizar as informações que necessitam e navegar pelas suas páginas sem precisar parar em cada uma delas para saber onde encontrar essas informações.

Um layout padronizado deve conter:

Elementos de página padronizados - � Se você utilizar cabeçalhos de segundo nível (<H2>), em uma página, para indicar os tópicos principais, deverá utilizá-los também para os tópicos principais de todas as outras páginas. Se tiver incluído um cabeçalho e uma linha horizontal na parte superior da página, utilize esse mesmo layout em todas as outras páginas.

Formas padronizadas de navegação - � Inclua os seus menus de navegação na mesma posição em todas as páginas (em geral, na parte superior ou inferior da página) e utilize a mesma quantidade de menus. Se preferir usar ícones de navegação, lembre-se de utilizar os mesmos ícones na mesma ordem em todas as páginas.

Você sabe como os internautas lêem na Internet?

Pesquise o assunto no site:

http:// www.comunidade.sebrae.com.br/intranet/Downloads/Downloads_GetFile.aspx?id=5101

231


Unidade 8

Seção 4 – Uso de vínculos

Sem os vínculos, as páginas da web não teriam a menor graça e seria praticamente impossível encontrar algo interessante na web. Sob vários aspectos, a qualidade dos seus vínculos pode ser tão importante quanto a criação e o projeto das páginas propriamente ditas. Considere as seguintes dicas que Lemay (2001; 2002) coloca em seus livros:

Use menus de vínculos com texto descritivoConforme já comentado, quando você organiza os vínculos em listas ou em outras estruturas semelhantes a menus, o seu leitor pode consultar rápida e facilmente as opções oferecidas para a página.

No entanto, a simples organização dos vínculos em menus não é suficiente. Ao organizá-los dessa forma, verifique se as suas descrições não estão excessivamente reduzidas. Muitas vezes somos tentados a usar menus de nomes de arquivo ou de outros vínculos pouco descritivos.

Se os vínculos forem menus com nomes de arquivo, por exemplo, então como o leitor poderá saber quais as informações encontrarão no outro lado do vínculo? E assim, como o leitor poderá determinar se está ou não interessado nessas informações, a partir das limitadas indicações fornecidas? A maneira correta ofereceria um texto adicional que descrevesse o conteúdo do arquivo ou simplesmente evitasse o uso de nomes de arquivos (quem estaria interessado neles)? Logo, descreva o conteúdo dos arquivos no menu, destacando o texto apropriado.

Uso de vínculos no textoA melhor maneira de fornecer vínculos no texto consiste em redigir antes o texto sem os vínculos, como se você não pretendesse incluir vínculo algum nele (para utilizá-lo, por exemplo, apenas como uma cópia impressa). Em seguida, destaque as palavras apropriadas que funcionarão como o texto

232


dos vínculos, que conduzirão a outras páginas. Ao incluir um vínculo, verifique se este não está interrompendo o fluxo da página.

A idéia de inclusão de vínculos no meio do texto torna-o auto-suficiente. Dessa forma, os vínculos fornecem informações adicionais ou superficiais que os leitores podem optar por ignorar ou acessar, de acordo com seu interesse.

Se você estiver usando um texto apenas para descrever vínculos, considere a possibilidade de usar um menu de vínculos, em vez de um parágrafo. Os leitores encontrarão mais facilmente as informações que estiverem procurando. Em vez de lerem o parágrafo inteiro, poderão simplesmente dar uma olhada nos vínculos para identificar aqueles que estão interessados.

Uma maneira de saber se você esta incluindo vínculos no texto da forma apropriada consiste em imprimir a página da web formatada no seu navegador. Na cópia impressa, sem hipertexto, o parágrafo faz algum sentido? Se a página ficar esquisita no papel, ficará esquisita também na web. De modo geral, alguns ajustes na construção das frases podem tornar o texto mais legível e mais útil tanto na web quanto na cópia impressa.

Evite a síndrome do “Aqui”Um erro comum que muitos autores da web cometem ao criar vínculos no meio do texto consiste no que costumamos chamar de “síndrome do aqui”. Essa síndrome é a tendência de criar vínculos com uma única palavra (aqui) destacada e descrever o vínculo em alguma outra parte do texto. Por exemplo:

Informações sobre o uso de vínculo clique aqui.

Uma opção muito melhor seria usar algo semelhante a isso:

Selecione este link para obter informações sobre o uso de vínculo.

233


Unidade 8

Ou ainda:

O tutorial de HTML tem informações sobre o uso de vínculos.

Por estarem destacados na página da web, os vínculos se “sobressaem” visualmente mais do que o texto apresentado ao redor. Assim, o seu leitor verá o vínculo antes de ler o texto. Experimente usar vínculos desse modo.

Use vínculos de retorno à origemConsidere a possibilidade de incluir em cada uma das páginas da sua apresentação, um vínculo com a página de nível mais alto ou com a home-page. Esse vínculo permite que os leitores saiam rapidamente dos níveis mais profundos do seu documento. Usar um vínculo de retorno à origem é bem mais fácil que tentar navegar de volta pela hierarquia das páginas ou utilizar o recurso de retorno (voltar) de um navegador.

Vincular ou Não VincularA exemplo do que ocorre com as imagens gráficas, para todo vínculo criado, você deverá considerar o motivo pelo qual está vinculando duas páginas ou seções. Esse vínculo é útil para os leitores? Ele fornecerá mais informações e os deixará mais próximos de seus objetivos? Esse vínculo é relevante em relação ao assunto corrente?

Cada vínculo deve ter uma finalidade. Tenha motivos razoáveis para estabelecê-los. O simples fato de você mencionar a palavra “café” em uma página referente a algum outro tópico não significa que tenha de vinculá-la com um site referente ao café. Isso pode até parecer interessante, mas se um vínculo não for útil para o assunto corrente, servirá apenas para confundir o leitor.

234


Existem algumas categorias de vínculos úteis em páginas da web. Vejamos:

Vínculos explícitos de navegação - � São aqueles que indicam os caminhos específicos que o leitor poderá tomar nas páginas da web: para frente, para trás, para cima e para o início. Em geral, esses vínculos são indicados por ícones de navegação.

Vínculos implícitos de navegação - � São aqueles que apenas sugerem, sem indicar de forma direta, a navegação entre as páginas. Os menus de vínculos são o melhor exemplo de vínculos implícitos. O destaque do texto de vínculo torna claro ao leitor que ele poderá obter maiores informações sobre esse tópico ao selecionar um vínculo correspondente. Mas isso não é indicado de forma explícita no texto. Os vínculos implícitos de navegação podem também conter estruturas de sumário ou outras estruturas de visão geral compostas inteiramente por vínculos.

Vínculos de definição - � Palavras ou definições de conceitos podem se tornar vínculos excelentes, especialmente se você estiver criando grandes redes de páginas que contenham glossários. Ao estabelecer um vínculo entre a primeira ocorrência de uma palavra e sua definição, você pode explicar o significado dessa palavra aos leitores que não o conhecem, sem desviar a atenção daqueles que já possuem esse conhecimento.

Vínculos de tangentes - � Vínculos com informações tangentes e relacionadas são úteis quando o conteúdo do texto pode desviar a atenção do leitor do objetivo principal da página. Considere os vínculos de tangente como as notas de rodapé ou as notas de fim em um texto impresso. Eles podem se referir a citações de outras obras ou a informações adicionais que sejam interessantes, mas que não sejam diretamente relacionadas àquelas que você quer transmitir. Mas cuidado com os vínculos de tangente. É possível você criar tantas tangentes a ponto de os leitores passarem um tempo enorme acessando vínculos para outras páginas e não conseguirem, por isso, retornar ao texto original. Resista à tentação de criar todos os vínculos que puder e procure estabelecer vínculos apenas para tangentes relevantes ao seu próprio texto. Evite também duplicar a mesma tangente – por exemplo, estabelecer vínculos com todas as ocorrências da palavra web na sua página.

235


Unidade 8

Seção 5 – Outras sugestões de bons hábitos

A seguir, algumas sugestões sobre os bons hábitos que você deve desenvolver ao trabalhar com grupos de páginas da web.

Não divida os tópicos entre as páginasAs páginas da web funcionam melhor quando abrangem um único tópico completamente. Não divida os tópicos entre as páginas. Mesmo que você crie vínculos entre elas, a transição pode ser confusa. E ficará ainda mais confusa se um leitor passar diretamente para a segunda ou a terceira página e não souber o que está acontecendo.

Se você perceber que um tópico está ficando muito longo para uma única página, considere a possibilidade de reorganizar o conteúdo para que possa dividir esse tópico em vários subtópicos. Isso funciona especialmente bem em organizações hierárquicas e permite que você determine exatamente o nível de detalhe de cada “nível” da hierarquia que deve ser incluído, além do tamanho e da complexidade a serem atribuídos a cada página.

Não crie páginas a mais ou a menosNão existem regras para o número de páginas ou para o tamanho que as suas apresentações da web devem ter. Você pode ter uma única página ou milhares delas, dependendo do volume de informações que deseja transmitir e da forma como as tiver organizado.

Suponha que você queira incluir todas as informações que deseja transmitir em uma página grande e crie vários vínculos com as seções dessa página. Você pode optar por um extremo ou por outro, cada qual com suas vantagens e desvantagens:

236


Vantagens:

A manutenção de um único arquivo é mais fácil e os �

vínculos contidos nele não serão rompidos se você mover as informações ou atribuir novos nomes aos arquivos vinculados.

A estrutura é a mesma utilizada em documentos reais. �

Desvantagens:

Leva muito tempo para se fazer � download de um arquivo grande, especialmente em conexões de rede lentas e se a página contém muitas imagens gráficas.

Os leitores precisam rolar o texto várias vezes para �

localizar o que desejam. O acesso a informações específicas pode ser tornar tedioso. A navegação até outros pontos que não estejam localizados nem no início nem no final do documento torna-se praticamente impossível.

A estrutura é excessivamente rígida. Uma única página �

é, por natureza, linear. Embora você possa passar diretamente de uma seção para outra, a estrutura linear ainda reflete a da página impressa e não tira proveito da flexibilidade das páginas menores vinculadas de forma não linear.

Ou, por outro lado, você pode criar um conjunto de páginas pequenas e estabelecer vínculos entre elas.

Vantagens:

As páginas menores são carregadas rapidamente. �

Freqüentemente você pode apresentar a página inteira na �

tela. Dessa forma, as informações contidas nessa página podem ser facilmente consultadas pelo leitor.

237


Unidade 8

Desvantagens:

A manutenção de todos esses vínculos pode se tornar um �

pesadelo. A simples inclusão de algum tipo de estrutura de navegação para essa grande quantidade de páginas criaria milhares de vínculos.

Se houver muitos vínculos entre as páginas, eles ficarão �

em desarmonia. É difícil manter a continuidade da leitura quando o leitor passa mais tempo alternando entre documentos do que propriamente lendo o texto.

Afinal, qual é a solução?! De modo geral, o assunto que você está escrevendo determinará o tamanho e a quantidade de páginas que você precisará, especialmente se você seguir a sugestão de usar um tópico por página. Se você testar as suas páginas da web em uma grande variedade de plataformas e velocidades de rede, saberá se uma única página é muito grande. Se, por exemplo, você passar muito tempo rolando o texto do documento ou se ele demorar mais do que o esperado para ser carregado, significa que está muito grande.

Assine as suas páginasCada página deve conter algum tipo de informação na parte inferior, que funcione como uma “assinatura”. A tag <ADDRESS> foi criada especificamente com esse objetivo. A utilização desta tag é útil nas suas páginas, pois informam:

Sobre � como entrar em contato com o autor da página da web ou com a pessoa responsável pela página, a quem chamamos de webmaster. Essas informações devem conter pelo menos o nome e o correio eletrônico dessa pessoa.

O � status da página. Ela está completa? É um trabalho ainda em andamento? Foi deixada propositalmente em branco?

Webmaster é a pessoa responsável pela criação e manutenção de um site na web. Em geral, as responsabilidades de um webmaster incluem responder a mensagens de correio eletrônico, garantir a operação apropriada do site, criar e atualizar páginas da web e manter a estrutura e o projeto do site. Muitas vezes, o webmaster acumula a tarefa de administração de servidores na qual se alberga o site.

238


A data da última revisão � realizada na página. Isso é especialmente importante no caso de páginas alteradas com muita freqüência. Inclua uma data em cada página para que as pessoas saibam há quanto tempo ela foi criada e/ou atualizada.

Sobre � os direitos autorais e as marcas registradas, quando necessário.

O � URL da página. A inclusão de um URL impresso de uma página que pode ser localizada nesse mesmo URL pode parecer um pouco exagerada. Mas, e se alguém imprimir a página e perder todas as outras referências a ela no meio da pilha de papéis da mesa de trabalho? De onde elas vieram?

A figura abaixo apresenta um ótimo exemplo de um bloco de endereço:

FIGURA 8.2 – EXEMPLO DE ASSINATURA PARA UMA PÁGINA WEB

Uma boa sugestão para a sua página da web é estabelecer um vínculo entre um URL mailto e o texto que contém o endereço de correio eletrônico (e-mail) do webmaster, como neste exemplo:

<A HREF=”mailto:[email protected]”>[email protected]</A>

239


Unidade 8

O endereço da figura anterior ficaria assim:

FIGURA 8.3 – EXEMPLO DE ASSINATURA PARA UMA PÁGINA WEB COM MAILTO

Tal procedimento permite aos leitores que tenham navegadores que ofereçam suporte ao URL mailto, simplesmente selecionar o vínculo e enviar uma correspondência para a pessoal responsável pela página, sem precisar digitar novamente o endereço em seus programas de correio eletrônico.

Síntese

As principais normas para o projeto e a elaboração de páginas da web, apresentadas nesta unidade, são agora destacadas:

Teste as suas páginas da � web em vários navegadores.

Redija suas páginas de forma clara e concisa. �

Organize o texto da página para que os leitores possam �

consultar as informações importantes.

Crie páginas independentes de contexto, ou seja, crie �

páginas que não dependam de páginas anteriores ou posteriores.

Não abuse da ênfase e nem utilize as � tags de cabeçalho para dar ênfase.

Não use terminologias específicas de algum navegador. �

240


Revise e verifique a grafia das suas páginas, bem como a �

concordância gramatical.

Utilize um � layout padronizado e simples em todas as páginas.

Use menus de vínculos. �

Não sobrecarregue a página com imagens bonitas, porém �

desnecessárias.


Leia cada enunciado com atenção e responda as questões que seguem.

1. Visite os 3 sites seguintes, explore-os e na ferramenta FÓRUM discuta o tipo de informação que é apresentada, o projeto e layout da(s) página(s), o uso de vínculos e imagens. Aponte ainda os recursos adequados e inadequados:

http://www.hippo.com.br �

http://www.livrodereceitas.com �

http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki �

241


Unidade 8

Saiba mais


DAMASCENO, Anielle. � Webdesign: teoria e prática. São Paulo: Visual Books, 2006.

LEMAY, Laura. � Aprenda em 1 semana HTML 4. São Paulo: Campus, 2001.

LEMAY, Laura. � Aprenda a criar páginas web com HTML e XHTML em 21 Dias. São Paulo: Makron Book, 2002.

RODRIGUES, Bruno. � Webwriting redação & informação para a web. Rio de Janeiro: Brasport, 2006.

Também consulte o(s) seguinte(s) site(s) para aprofundar seus estudos:

black.rc.unesp.br/marcus/tese.pdf �

(Construção de páginas web: depuração e especificação de um ambiente de aprendizagem)

http://www.freecode.com.br/forum/lofiversion/index.php/t8902.html �

(O valor de um projeto de página web)

9UNIDADE 9

Folhas de Estilo


Identificar a definição de folhas de estilos. �

Compreender como e porque utilizar folhas de estilos �

em cascata.

Conhecer a sintaxe e os tipos de definição de estilos. �

Criar folhas de estilos. �

Seções de estudo

Seção 1 O que são os estilos CSS

Seção 2 A sintaxe CSS

Seção 3 Tipos de definição de estilos

Seção 4 A ordem da cascata

244



Você deve estar perguntando: o que será que são folhas de estilo? Para que servem? Já ouvi falar tanto nisso, mas não tenho idéia do que se trata. Nesta unidade, aprenderemos a criar essas folhas de estilos no seu documento HTML ou em parte dele. Mas antes de definirmos folhas de estilo, que tal você descrever o que é um estilo?

Conseguiu? Ótimo! Observe que você já sabe o que é estilo ou já tem uma noção do que trata um estilo. Sabendo o que isso significa, podemos começar o nosso estudo de folhas de estilo.

245


Unidade 9

Seção 1 – O que são os estilos CSS

As tags que definem os elementos do HTML foram concebidas para definir conteúdos. O autor do HTML nunca teve qualquer intenção de usar esta linguagem para definir estilos gráficos para as páginas. As tags do HTML foram idealizadas para declarar coisas como “Isto é um parágrafo”, ou “Isto é um cabeçalho”. Para isso, colocavam-se tags como <P> ou <H1> em redor do texto. A forma como esta informação devia ser apresentada graficamente era um problema que o navegador tinha que resolver tendo em consideração o significado de cada tag.

Este conceito perfeitamente racional era muito adequado enquanto o objetivo das páginas era apenas a escrita e a partilha de textos na web, mas a rápida aceitação da web fez com que as pessoas que davam importância ao design também se interessassem por este meio.

Esse interesse estimulou esforços para criar páginas graficamente elaboradas, mais ao gosto dos designers. Um dos efeitos importantes foi a completa adulteração do propósito de diversas tags. A tag <TABLE>, por exemplo, foi concebida unicamente para apresentar tabelas com dados numéricos, mas os designers passaram a usá-la para colocar as tags em diversos pontos das páginas em arranjos cada vez mais complexos.

Mas isto não foi suficiente porque havia coisas que não podiam ser feitas usando apenas as tags disponíveis. Para dar aos designers aquilo que eles pediam, os criadores dos navegadores acharam que era boa idéia os primeiros inventarem as suas próprias tags e acrescentarem atributos estilísticos às que já existiam. Estas extensões permitiram usar o HTML para dar cores e estilos diferentes ao texto e aplicar outras formatações.

As iniciativas dos criadores destas novas tags e atributos ignoraram por completo a filosofia na qual o criador do HTML, Tim Berners Lee, baseou-se para criar a linguagem. As novas tags (como a tag <FONT>) davam importância ao aspecto gráfico que produziam e não ao significado daquilo que continham.

Apesar de todas as contra-indicações, a criação e rápida disseminação de tags conduziu a uma situação em que os conteúdos das páginas estavam completamente misturados com

246


os aspectos estilísticos. Este contexto conduziu, no final da década de 1990, o HTML a um estado em que era muito difícil criar e fazer a manutenção de websites compostos por mais do que um número reduzido de páginas. Os conteúdos das páginas não eram mais do que imensas “sopas de tags” mal organizadas, cujo significado não era muito claro.

Este problema começou a ser resolvido pelo World Wide Web Consortium (W3C) com a criação dos padrões HTML 4, CSS, XML e XHTML. Para o W3C, o HTML deve ser usado em conjunto com estilos CSS (folhas de estilo em cascata), sendo que os conteúdos se exprimem em HTML e os estilos em CSS. As folhas de estilo permitem que você defina a aparência padrão de diferentes partes de seu documento. E é precisamente esse o objetivo das folhas de estilo em cascata. Com elas, você pode controlar a cor e o estilo de fontes, ajustar o espaço em branco etc.

Este novo paradigma para a criação de páginas é bem suportado por todos os navegadores dominantes: Netscape 7/Mozilla, Microsoft Internet Explorer 5 e superior e Opera 7.

Vantagens dos estilos CSSAs páginas que usam estilos CSS, além de serem mais fáceis de escrever, são também mais leves e aparecem mais depressa no navegador.

Como já mencionado, as regras de estilos definem o layout, a tipografia e os recursos de projeto de um documento, separados da definição da estrutura do documento. Assim, a estrutura de um documento é definida através da utilização do HTML. Um autor pode, então, definir a aparência e o projeto de sua preferência, usando uma folha de estilo.

A folha de estilo é um conjunto de regras, normalmente definido em um arquivo separado, que um navegador compatível utiliza para representar o documento estruturado, definido com o HTML.

247


Unidade 9

Atenção!

Um navegador que não ofereça suporte para folhas de estilo ainda pode representar o arquivo como um documento HTML padrão e este documento deve ser auto-suficiente, sem depender da folha de estilo.

As folhas de estilos permitem ganhar tempo e flexibilidadeO que é interessante na idéia das folhas de estilos é que elas são flexíveis. As tags e atributos, usados para aplicar folhas de estilo em um documento HTML, não prendem os autores e fabricantes de navegadores a um tipo único de folha de estilo.

Os estilos CSS definem o aspecto gráfico a dar às tags do HTML. Os estilos podem ser definidos numa folha de estilos, externa ou internamente, no próprio documento HTML.

Quando definidos numa pasta externa, os estilos podem ser compartilhados por muitas páginas, o que permite alterar instantaneamente o aspecto gráfico de todas as páginas, modificando apenas a pasta em que os estilos são definidos.

Quando você tinha de usar as técnicas antigas para fazer alterações no aspecto gráfico de um website, você era obrigado a alterar todas as tags <FONT> e todas as tabelas usadas para formatar as páginas. Isto tinha que ser feito em todas as páginas.

Quando você utiliza estilos CSS, basta modificar um número reduzido de definições numa única folha de estilo para instantaneamente atualizar centenas ou milhares de páginas com um esforço mínimo. Os erros ocorrem com muito menor freqüência e são muito mais fáceis de corrigir.

A facilidade com que as alterações são assim feitas dá uma maior flexibilidade ao website e melhoram o seu desempenho. As páginas ficam simultaneamente mais ricas e mais leves.

248


O “mecanismo” de cascataO termo cascata se refere à seqüência ordenada de estilos de formatação do documento. As regras das folhas posteriores têm precedência sobre as anteriores. A ordem de estilos aplicados é:

Um arquivo de folha de estilos separado que é vinculado �

- uma folha de estilos externa.

Informações de estilos incorporados dentro da página �

- uma folha de estilo interna.

Estilos aplicados diretamente a texto selecionado - um �

estilo linear ou inline.

Atenção! As definições dos diferentes tipos de estilos, você estudará na seção 3 desta Unidade.

As folhas de estilos CSS dão-nos muita liberdade na forma de definir os estilos. No mesmo documento, podemos utilizar uma ou mais pastas externas, definir os estilos na secção <HEAD> do documento ou utilizar o atributo STYLE nas tags do HTML. O navegador lê todas as definições de estilos que encontra e, quando aparecem estilos repetidos, ele combina-os num só estilo seguindo algumas regras simples.

Uma das regras da cascata diz que, ao encontrar várias versões para o mesmo estilo, o navegador guarda a última que encontrou. Outra regra diz que alguns estilos são herdados pelas tags que se encontram dentro de outras tags.

Limitações dos navegadores atuaisAs limitações associadas ao suporte que os navegadores atuais oferecem devem estar sempre presentes na mente do criador de páginas baseadas em CSS. Se você usar apenas as funcionalidades que são bem suportadas, que já são muitas, não será preciso tomar muitas precauções. Se você decidiu utilizar funcionalidades mais avançadas, definidas pelos padrões CSS, lembre-se que é preciso testar tudo de forma exaustiva em todos os navegadores relevantes para não ter surpresas desagradáveis.

249


Unidade 9

Seção 2 - A sintaxe CSS

Agora você está pronto para usar as folhas de estilo em cascata. Elas utilizam uma sintaxe simples para definir a propriedade de estilo. A sintaxe das definições CSS é composta por duas partes: uma tag e uma declaração.

Veja:

tag { propriedade: valor }

Os nomes de propriedade fazem parte da especificação CSS (color, background etc.). Os valores representam todos os valores válidos para a propriedade específica. Veja um exemplo:

Tag Declaração

H1 { color: green }

Neste exemplo a tag H1 diz que o estilo se aplica a tags <h1> e a definição diz que a cor do texto destas tags deve ser verde (“green”).

A declaração fica entre chaves ({...}) e pode conter várias definições. Cada definição é formada por um par propriedade: valor, que é separado da propriedade pelo carácter : (dois pontos.).

A declaração pode ser composta de uma lista de pares-propriedade: valores separados por ; (ponto e vírgula). Veja o exemplo abaixo:

Tag Declaração

P{ color: green;

font-family: arial}

250


Essas listas podem ser usadas de várias formas, para aplicar estilo a uma tag. A W3C definiu um conjunto de tags e atributos que podem ser usados para aplicar qualquer folha de estilo em um documento. A base das folhas de estilo é simples (será estudada com mais ênfase na próxima seção). Veja:

folhas de estilo � inline – é uma definição de estilo que pode ser aplicada a uma tag HTML específica, através da utilização do atributo STYLE.

folhas de estilo interna � – é uma definição de estilo que pode ser criada entre as tags <STYLE> e </STYLE> (isso deve estar no cabeçalho do documento HTML). Esse tipo de definição estabelece um estilo para todas as ocorrências de determinada tag HTML. Por exemplo, você pode definir todas as ocorrências de cabeçalho <H1> para que sejam apresentadas em tipo vermelho.

folhas de estilo externa � – é uma folha de estilo que pode ser importada de um arquivo externo, através da utilização de <LINK REL=stylesheet HREF=”nome do arquivo de folha de estilo”>.

Atenção!

O ideal é remover toda a formatação das tags da linguagem e colocar em folhas de estilo em cascata.

Seção 3 – Tipos de definição de estilos

Quando o navegador encontra uma folha de estilos num documento, ele a usa para formatar os elementos desse documento. Existem três formas básicas e diferentes (como já comentado) para definir estilos e inseri-los num documento.

251


Unidade 9

1. Folhas de Estilo InlineUsa-se um estilo “inline” quando a definição só precisa ser utilizada uma única vez.

A definição de estilos “inline” faz-se através do atributo STYLE colocado na tag ao qual queremos aplicar o estilo. A definição pode conter qualquer uma das propriedades CSS. A sintaxe a seguir mostra como é a definição de um estilo inline:

<tag STYLE=”propriedade: valor; propriedade: valor”>... </tag>

A definição de estilos utilizando o atributo STYLE faz-nos perder muitas das vantagens das folhas de estilos porque acabamos por misturar estilos com conteúdos. Esta forma de definir estilos deve ser feita em uma única tag.

O atributo STYLE aceita quase todas as propriedades CSS. O exemplo seguinte mostra como podemos controlar a cor e a margem esquerda de um parágrafo:

<html>

<body>

<p style=”color: blue; margin-left: 20px”>

Isto é um parágrafo formatado com o atributo style</p>

<p> este parágrafo não tem estilo

</body>

</html>

252


Assim fica no navegador:

FIGURA 9.1 – EXEMPLO DA CRIAÇÃO DE UM ESTILO EM PARÁGRAFO

Se desejarmos atribuir a uma propriedade um valor que contém espaços, devemos colocá-lo entre apóstrofos (‘). No exemplo seguinte, usaremos o tipo de letra “sans serif ” a um parágrafo e “comic sans ms” a outro:

<html>

<body>

<p style=”font-family: ‘sans-serif’”>

Neste parágrafo o tipo de letra é “sans-serif”</p>

<p style=”font-family: ‘comic sans ms’”>

Neste parágrafo o tipo de letra é “comic sans ms”

</p>

</body>

</html>


FIGURA 9.2 - EXEMPLO DA CRIAÇÃO DE UM ESTILO EM PARÁGRAFOS DIFERENTES

253


Unidade 9

2. Folha de Estilos InternaAs folhas de estilos internas devem ser usadas quando as definições são usadas por um único documento. Neste caso, as definições dos estilos são colocadas dentro de uma tag <STYLE> no cabeçalho do documento HTML. Veja este exemplo:

<STYLE TYPE=”text/css”>

tag {propriedade : valor; propriedade : valor; ...}

tag {propriedade : valor; propriedade : valor; ...}

...

</STYLE>

Observe o uso do atributo TYPE na tag <STYLE> para indicar o uso da folha de estilo em cascata. Uma folha de estilos interna deve ser usada quando os estilos são usados uma única vez. Nesse caso, as definições fazem-se dentro de uma tag <STYLE> que deve ser colocada dentro da tag <HEAD> da página HTML, assim:

<HEAD>

<STYLE type=”text/css”>

body { background-color: red }

p { margin-left: 20px }

</STYLE>

</HEAD>

O navegador lê as definições contidas na tag <STYLE> e faz a formatação dos elementos da página aplicando essas definições. O exemplo seguinte, permite-lhe experimentar isto de imediato e ver seu resultado no navegador:

254


<html>

<head>

<style type=”text/css”>

H1 { color: green }

</style>

</head>

<body>

<H1>Este cabeçalho tem cor verde</H1>

</body>

</html>

Visualização:

FIGURA 9.3 – EXEMPLO DE FOLHA DE ESTILO INTERNO

Se o valor que queremos dar à propriedade tiver mais do que uma palavra, então devemos colocá-lo entre aspas, como mostrado a seguir:

<html>

<head>


p { font-family: “comic sans ms” }

</style>

</head>

<body>

<p> O texto deste parágrafo tem tipo de letra “comic sans ms”.

</p>

</body>

</html>

255


Unidade 9

Visualize agora:

FIGURA 9.4 – EXEMPLO DE FOLHA DE ESTILO COM PROPRIEDADE COM MAIS DE UMA PALAVRA

Dentro das chaves { e }, podemos colocar várias definições separadas pelo caracter “;” (ponto e vírgula), conforme já comentado. O exemplo seguinte define três propriedades para a tag <P>, que são o alinhamento, a cor do texto e o tipo de letra:

<html>

<head>


p { text-align: center;

color: green;

font-family: arial

}

</style>

</head>

<body>

<p> O texto deste parágrafo tem tipo de letra “arial”, cor verde e está alinhado ao centro.</p>

</body>

</html>

256


Observe como fica no navegador:

FIGURA 9.5 – EXEMPLO DE FOLHA DE ESTILO COM MAIS DE UMA DEFINIÇÃO

Atenção!

Para tornarmos mais legíveis as definições dos estilos, devemos colocar cada definição em uma linha diferente, mas podemos também escrever tudo na mesma linha.

O comportamento normal dos navegadores consiste em ignorar os elementos cujo significado desconhecem. Isto significa que um navegador muito antigo, que não suporta estilos CSS, ignorará a tag <STYLE>, mas não ignorará o texto que está escrito lá dentro. Se for necessário evitar que esse navegador escreva o texto das definições, devemos então ocultá-lo, colocando-o dentro de um comentário do HTML, como mostramos a seguir:

<head>




</style>

</head>

257


Unidade 9

Se o navegador suporta CSS, ele entenderá a aplicação da folha de estilo à tag mencionada.

Saiba mais sobre os estilos!

Mas opa! Você deve estar se perguntando... Como vou saber aplicar todos os estilos? Como vou saber o nome exato de uma fonte que desejo? Como vou saber definir uma margem? E o espaçamento entre as linhas? Calma, não se preocupe. Existem as propriedades da CSS que você encontra em vários livros e sites. Não é necessário decorar todas as propriedades. Mas é interessante conhecê-las para poder criar as folhas de estilo a serem utilizadas no seu documento HTML e utilizar as tags HTML apenas para o conteúdo, sem se preocupar com layout. Um bom site é o da própria W3C: http://www.w3.org/TR/REC-CSS1.

Consulte também outros sites na seção Saiba Mais, nesta unidade.

3. Folha de Estilos ExternaUma folha de estilos externa é a solução mais indicada quando se pretende aplicar os mesmos estilos a várias páginas. Este método de formatação permite-nos alterar os estilos apenas na folha e assim aplicá-los a todas as páginas imediatamente. Todas as páginas ficam atualizadas com as novas definições. Para uma página poder usar uma folha de estilos, basta colocar dentro do cabeçalho (<HEAD>) uma tag <LINK> com uma referência para a folha de estilos que contém as definições, como se ilustra a seguir:

<HEAD>

<LINK rel=”stylesheet” type=”text/css” href=”meu_estilo.css”>

</HEAD>

258


A tag LINK associa um arquivo de folha de estilo externa ao documento corrente. Dessa forma, um estilo padronizado para um site pode ser determinado pelo gerente, por exemplo, e aplicado aos documentos criados por um autor de uma organização. O atributo REL relaciona o link a uma folha de estilos externa.

A utilização de folha de estilos externa permite poupar tempo, ganhar flexibilidade e aumentar a consistência das páginas que constituem um website. Quando guardamos os estilos em uma pasta externa e os aplicamos a todas as páginas de um website, a modificação de diversas qualidades do aspecto gráfico passa a ser uma tarefa fácil.

O navegador lê as definições contidas na folha de estilos (meu_estilo.css) e faz a formatação dos elementos do documento aplicando essas definições.

Se você abrir o arquivo “meu_estilo.css” irá reparar que a folha de estilos externa é apenas um arquivo de texto que contém definições CSS. No seu conteúdo não podem aparecer tags do HTML, pois só são permitidas definições CSS válidas.

Elementos de bloco e elementos “inline”Todos os elementos visíveis numa página escrita em HTML pertencem a um destes dois tipos: bloco ou “inline”.

Os elementos de bloco, como por exemplo <div> ou <table>, começam numa nova linha e ao terminarem ocorre novamente uma mudança de linha. Os elementos de bloco recebem larguras que são calculadas em função da largura do bloco em que estão contidos.

Os elementos “inline”, como <b> ou <span>, não dão início a uma nova linha e a sua largura é determinada apenas pelo seu conteúdo. O seu comportamento é semelhante ao comportamento do texto simples.

259


Unidade 9

Agrupar tagsSe você desejar aplicar os estilos a mais do que uma tag, agrupe as tags que partilham as mesmas definições. Para isso, escreva uns seguidos dos outros, separados por vírgulas. No exemplo seguinte, as tags de <h1> até <h6> partilham todas a mesma definição:

h1,h2,h3,h4,h5,h6

{

color: green

}

Tags de ClasseUma classe é um estilo amplamente definido, que estabelece propriedades para alguns ou para todos os elementos de um documento. Assim, a classe pode ser aplicada a qualquer elemento, através da utilização do atributo CLASS. Apenas as definições de estilo para esse elemento na classe específica serão aplicadas a ele.

As definições de classes permitem-nos definir estilos diferentes que podem ser aplicados à mesma tag. Imagine que você precisa ter dois tipos diferentes de parágrafo no documento, um alinhado à direita e outro alinhado ao centro. Vejamos como as classes tornam isto fácil:

<html>

<head>


p.direita { text-align: right }

p.centro { text-align: center }

</style>

</head>

<body>

260


<p class=”direita”> Este parágrafo está alinhado a direita.</p>

<p class=”centro”> Este parágrafo está alinhado ao centro.</p>

</body>

</html>

Visualize:

FIGURA 9.6 – EXEMPLO DE TAG DE CLASSE

O atributo CLASS, como qualquer outro atributo, só pode ser especificado uma única vez em uma tag. O exemplo seguinte está errado:

<p class=”direita” class=”verde”>

Este parágrafo tem um erro causado pela utilização repetida do atributo class.

</p>

As definições de classe também podem ser criadas sem colocarmos o nome de uma tag no início da definição. Quando isso acontece, as definições podem ser aplicadas a qualquer tag, cujo atributo CLASS tenha o valor correto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer tag da HTML:

261


Unidade 9

<html>

<head>


.centro { text-align: center }

</style>

</head>

<body>

<h2 class=”centro”> Cabeçalho alinhado ao centro </h2>

<p class=”centro”> Este parágrafo também está alinhado ao centro. </p>

</body>

</html>


FIGURA 9.7 – EXEMPLO DE TAG DE CLASSE EM TAGS DIFERENTES

Tags de IDO atributo ID define algo que tenha um valor exclusivo para um documento inteiro, ou seja, aplica-se a um único elemento da página. As regras do HTML ditam que os valores do atributo ID não podem repetir-se numa mesma página. Daí resulta que o número de elementos no documento com um determinado ID é um ou é zero.

262


A regra de seleção para o estilo definido no exemplo seguinte indica que ele só pode ser aplicado a uma tag <P> que tenha o valor “para1” no atributo ID:

<html><head>

<style type=”text/css”>p#para1{ text-align: center; color: red}</style>

</head><body>

<p id=”para1”> Este parágrafo está alinhado ao centro e tem cor vermelho. </p>

</body></html>

Visualize:

FIGURA 9.8 – EXEMPLO DE TAG DE ID

263


Unidade 9

Se tentarmos aplicar esta regra a uma tag <DIV>, usando id=”para1”, vemos que o navegador não a aceita, pois ele foi definido somente para a tag <P>:

<html><head>

<style type=”text/css”>p#para1{

text-align: center; color: red

}</style>

</head><body>

<div id=”para1”> Este elemento não está alinhado ao centro e não tem cor vermelho porque não é um parágrafo.</div>

</body></html>

A visualização fica assim:

FIGURA 9.9 – EXEMPLO DE TAG ID UTILIZADA EM OUTRA TAG NÃO DEFINIDA

264


Se quisermos que a regra se aplique a qualquer tag que tenha o id=“para1”, basta escrevê-la na forma seguinte:

#para1

{

text-align: center;

color: red

}

A regra acima é aplicável a qualquer tag que tenha o ID correto porque não está sendo definido para uma tag específica e sim para o ID que se aplica a todas as tags. No exemplo seguinte, ela seria aplicada à tag <H1>:

<H1 id=”para1”>As músicas do Bonga são bué de fixes</H1>

Escrever Comentários em Folha de EstilosPodemos inserir comentários nas definições CSS para explicar o código que escrevemos tornando-o mais fácil de compreender. Ao mais tarde voltarmos a uma folha de estilos ou se a partilharmos com outra pessoa, será mais fácil perceber como funciona.

Para iniciar um comentário escreva a seqüência de caracteres “/*”, depois o texto do comentário e no fim escreva “*/” para terminar o comentário. O exemplo seguinte mostra como se faz:

265


Unidade 9

p

{

text-align: center;

/* Isto é um comentário */

color: black;

/* O MSIE 5 não reconhece os comentários!!! */

font-family: arial

}

Seção 4 - A ordem da cascata

Quando um estilo é definido mais do que uma vez, qual das definições deve o navegador escolher? A primeira? A última? Nenhuma delas? Para decidir, o navegador aplica as regras seguintes (listadas por ordem crescente de importância):

Estilos definidos por omissão (são aplicados sempre que �

não existirem outros que se sobreponham a eles).

Estilos definidos numa folha de estilos interna (dentro da �

tag <STYLE>) ou em uma pasta externa.

Estilos " � inline” (definidos através do atributo STYLE nas tags do documento HTML).

Assim, temos que os estilos que são definidos na própria tag através do atributo STYLE têm a prioridade mais elevada. As definições que o atributo STYLE faz sobrepõem-se a qualquer definição que tenha sido feita antes.

266


Atenção!

Um documento HTML pode definir ou utilizar mais do que uma folha de estilos. Quando isso acontece, é possível que algumas propriedades sejam definidas numa folha e definidas de novo numa outra. Nestes casos, o navegador deve aplicar as regras descritas para decidir qual das definições é mais importante.

Suponha que uma folha de estilos externa defina as seguintes propriedades para a tag h2:

H2{

color: red;text-align: left;font-size: 8pt

}

Mas existe uma folha de estilos interna com as seguintes propriedades também para a tag h2:

H2{

text-align: right;font-size: 20pt

}

Se a página que contém a folha de estilos interna usa a tag <link> para se ligar à folha de estilos externa indicada antes, então as duas definições serão combinadas para produzir a seguinte versão final para a tag h2:

H2{

color: red;text-align: right;font-size: 20pt

}

267


Unidade 9

Veja que a cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de letra foram substituídos pelas definições dadas na folha interna.

Herança de Estilos entre ElementosAlgumas propriedades CSS definidas para um elemento são automaticamente aplicadas aos descendentes desse elemento. Quando isso acontece, diz-se que as propriedades são herdadas. O exemplo seguinte mostra como funciona este mecanismo de “herança” de estilos:

<html><head>

<style type=”text/css”>div { color: blue }

</style></head><body>

<div>O texto dos elementos <div> tem cor azul. <p> Este parágrafo está dentro de um elemento <div>. Ele herda a cor azul. </p>

</div><p> Este parágrafo não está dentro de nenhum elemento que lhe deixe uma “herança”.</p>

</body></html>

No exemplo acima, a folha de estilos expressa que o texto das tags <DIV> deve ter cor azul. O parágrafo que está dentro de uma tag <DIV> herda a cor azul porque a propriedade color é herdada pelos descendentes de uma tag. Já o segundo parágrafo não está dentro de nenhuma tag que lhe deixe uma “herança” (que neste caso é a propriedade color) e por isto o seu texto tem a cor normal.

268


Visualização:

FIGURA 9.10 – EXEMPLO DE HERANÇA DE ESTILOS

Há outras propriedades que só afetam o elemento ao qual são aplicadas e não se propagam aos seus descendentes. Diz-se que estas propriedades não são herdadas. O exemplo seguinte é semelhante ao anterior com o acréscimo da propriedade border, que não é herdada:

<html><head>

<style type=”text/css”>div{ color: blue;

border: solid thin red}

</style></head><body>

<div>Os elementos <div> recebem uma linha de contorno

vermelha (border) e texto com cor azul.<p>

Este parágrafo está dentro de um elemento <div>. Ele herda a cor azul mas não herda a linha de contorno (border).

</p> <div>

Tal como o elemento <div> principal este elemento <div> recebe a sua própria linha de contorno.

</div></div>

</body></html>

269


Unidade 9

Como você pode observar no seu navegador, a propriedade color propaga-se à tag <P> mas a propriedade border não:

FIGURA 9.11 – OUTRO EXEMPLO DE HERANÇA DE ESTILOS

Síntese

Através da utilização das folhas de estilo, você pode definir tudo, de tipos de fonte para as diferentes tags da HTML até cores de fontes, cores e imagens gráficas de fundo, margens, espaçamento, estilo de tipo e muito mais. Basicamente, qualquer parte da aparência visual de seu documento pode ser definida com as folhas de estilo em cascata. Enfim, nesta unidade aprendemos a criar estilos para um documento HTML.

Apesar de os navegadores atuais (Netscape 7/Mozilla, MSIE 5 e superior, Opera 7) oferecerem um bom suporte para os estilos CSS, é preciso chamar a atenção para o fato de ainda subsistirem alguns problemas quando aplicamos técnicas avançadas de formatação baseadas em CSS. Por isso, é necessário testar e aplicar os estilos para que você veja o resultado em vários navegadores.

Nesta unidade, também definimos algumas tags utilizadas para criar estilos em documentos HTML que podem ser resumidas no quadro a seguir:

270


Tag Descrição

<STYLE> Define estilos CSS – estilos internos

<LINK> Define uma referência para um estilo externo

<DIV> Insere uma seção no documento


1. Crie uma folha de estilo externa para seu documento HTML. Utilize as mais variadas propriedades em tags como <BODY>, <P>, <DIV> etc. Veja as referências para consultar as propriedades e seus valores em sites apropriados.

271


Unidade 9

Saiba mais

Você pode saber mais sobre o assunto estudado nesta unidade consultando os seguintes sites:

http://www.w3.org/TR/REC-CSS1 ( � Cascading style sheets, level 1)

http://www.artifice.web.pt/tutoriais/cntd/tut_css19.html ( � Tutorial e referência de CSS)

http://www.htmlhelp.com/reference/css/structure.html ( � CSS structure and rules)

http://www.maujor.com/ ( � CSS para web design)

http://paginas.fe.up.pt/~jvv/Assuntos/CSS/CSS_ficheiros/frame.html ( � Cascading style sheets)

http://unix.wmonline.com.br/dreamweaver/tutoriais/melhordaweb/css_dw/ ( � Como utilizar folhas de estilos em cascata)

O seguinte site aborda apostilas de CSS:

http://www.crieseuwebsite.com/apostilas/abrecategoria.php?cat=7&nomecat=CSS (Crie seu � web site)

Também existem outras propriedades de recursos mais avançados para a utilização em folhas de estilos que poderão ser encontradas em:

http://www.artifice.web.pt/tutoriais/cntd/tut_css10.html (CSS avançado) �

UNIDADE 10

Criação de Formulários


Criar um formulário. �

Conhecer os elementos básicos de entrada dos �

formulários.

Seções de estudo

Seção 1 Criando um formulário

Seção 2 Campos de entrada de texto

Seção 3 Seleções e listas de opções

Seção 4 Botões de rádio

Seção 5 Caixas de validação

Seção 6 O botão de envio

Seção 7 Exemplo completo de formulário

Seção 8 Exemplo de um formulário utilizando Javascript

274



Até agora você viu a forma na qual o HTML mostra a informação, essencialmente mediante o texto, imagens e links. Até então, os leitores estão sentados lendo as páginas, percorrendo vínculos e absorvendo as informações que você apresentou.

Os formulários mudam inteiramente essa situação. O leitor passa a interagir com o seu site através de uma grande quantidade de ações que se podem realizar na web: comprar um artigo, preencher uma enquete, enviar um comentário ao autor etc.

Você viu, anteriormente, que podemos, por intermédio dos links, entrar em contato diretamente com um correio eletrônico. Entretanto, esta opção pode ser pouco versátil em alguns casos se o que desejamos é que o leitor nos envie uma informação bem precisa através da página criada por você. Isto pode ser realizado por meio do uso de formulários.

Os formulários são estas famosas caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados para realizar buscas ou também para introduzir dados pessoais, por exemplo, em sites de comércio eletrônico. Os dados que o usuário introduz nestes campos são enviados ao correio eletrônico do administrador pelo formulário ou são processados automaticamente por um programa.

Usando HTML, você pode unicamente enviar o formulário a um correio eletrônico. Se quiser processá-lo por intermédio de um programa, a coisa pode ser um pouco mais complexa, já que você terá que empregar algumas linguagens para web como ASP ou PHP, por exemplo, que permitirá, entre outras coisas, o tratamento de formulários.

275


Unidade 10

Seção 1 - Criando um formulário

Um formulário é uma seção da página HTML que contém elementos que permitem ao leitor introduzir dados numéricos, textos curtos, textos extensos, selecionar elementos em uma lista com várias escolhas, responder facilmente respostas do tipo “sim” ou “não”, selecionar rapidamente uma opção em um pequeno grupo etc.

A criação de um formulário envolve, em geral, duas etapas independentes: a criação do layout do formulário e a criação de um programa de script no lado do servidor para processar as informações que você obtém a partir de um formulário. Mas, nesta unidade, você aprenderá a criar os layouts do formulário.

Para criar um formulário, você utiliza as tags <FORM>...</FORM>. A tag <FORM> por si só não faz com que o navegador desenhe algo na página nem permite inserir dados. Ela contém elementos que recolhem os dados (campos de texto, botões etc.) e possui atributos que dizem ao navegador como e para onde deve enviar os dados para processamento.

Atributos da tag <FORM>Acompanhe os atributos da tag <FORM>, utilizados para a criação de formulários.

ACTION

Este atributo da tag <FORM> define o tipo de ação a ser realizado com o formulário. Como já comentado anteriormente, existem duas possibilidades:

O formulário é enviado a um endereço de correio �

eletrônico.

O formulário é enviado a um programa ou � script que processa seu conteúdo, ou seja, uma URL.

276


No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônico especificado por meio da sintaxe abaixo:

<FORM action=”mailto:endereç[email protected]”>...</FORM>

Se o que o que você deseja é que o formulário seja processado por um programa, você deve especificar o endereço do arquivo que contém tal programa. Neste caso, a tag ficaria da seguinte forma:

<FORM action=”endereço do arquivo”>...</FORM>

A maneira de se expressar a localização do arquivo que contém o script é a mesma já estudada na unidade sobre vínculos.

METHOD

Este atributo da tag <FORM> encarrega-se de especificar a forma na qual o formulário é enviado, ou seja, seleciona um método para acessar a URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do navegador para o servidor, com a seguinte diferença básica:

POST - Os dados inseridos fazem parte do corpo da �

mensagem enviada para o servidor; transfere grande quantidade de dados.

GET - Os dados inseridos fazem parte da URL �

associada à consulta enviada para o servidor; suporta até 128 caracteres.

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da tag <FORM> as formatações para campos

277


Unidade 10

de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>.

Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, utilizado, posteriormente, pelo sistema para enviar os dados. Normalm ente, são usados “scripts”.

Os scripts organizam esses dados de entrada de todos os campos em um conjunto de informações e realizam uma tarefa programada como, por exemplo, enviar os dados do formulário para o seu e-mail.

Como a HTML não tem condições de fazer isso, é necessário utilizar scripts CGI, PERL, ASP, JavaScript etc. para executar estas tarefas. Porém, estes tipos de scripts necessitam de aprendizado mais dedicado para criar o que você deseja e são muito mais complexos do que a linguagem HTML, pois eles processam informações.

ENCTYPE

Este outro atributo da tag <FORM> indica a forma na qual a informação que for mandada pelo formulário viajará. No caso mais corrente, ao se enviar o formulário por correio eletrônico, o valor deste atributo deve ser “TEXT/PLAIN”. Assim, você consegue que o conteúdo do formulário seja enviado como texto plano dentro do e-mail.

Se você deseja que o formulário se processe automaticamente por um programa, geralmente não se utiliza este atributo no seu valor padrão, ou seja, não incluindo ENCTYPE dentro da tag <FORM>.

Assim, para o caso mais habitual - o envio do formulário por correio - a tag de criação do formulário terá o seguinte aspecto:

<FORM action=”mailto:endereç[email protected] (ou o nome do arquivo de script)” method=”post” enctype=”text/plain”>...</FORM>

278


Entre esta tag e seu fechamento, você colocará o resto de tags que darão forma ao seu formulário, as quais serão vistas nas próximas seções. O HTML propõe uma grande diversidade de alternativas na hora de criar os formulários. Elas vão desde a clássica caixa de texto até a lista de opções, passando pelas caixas de validação. Você vai ver em que consiste cada uma destas modalidades e como pode implementá-las em seu formulário.

Seção 2 – Campos de entrada de textoOs campos de textos permitem ao usuário digitar texto em um campo de única linha. A tag <INPUT> inicia a criação de campos de dados ou caixas de texto. Esse é um dos elementos que mais encontramos nos formulários.

A tag <INPUT> não tem tag de fechamento. O emprego destas caixas está fundamentalmente destinado à tomada de dados breves: palavras ou conjuntos de palavras de longitude relativamente curta. Você verá, mais adiante, que existe outra forma de tomar textos mais longos a partir de outra tag. Há vários atributos que permitem a criação de diferentes campos de entrada de dados.

Atributo NAMEO nome do elemento do formulário é de grande importância para poder identificá-lo em nosso programa de processamento ou no e-mail recebido. Sua sintaxe é:

<INPUT name=”nome_do_campo”>

Este atributo é especialmente usado para que você dê um nome ao campo. Ele não aparece na página, mas serve para identificar o campo e o valor digitado no e-mail que você receber ou algum elemento do script a ser processado.

279


Unidade 10

Nunca deixe de definir o nome dos campos, pois só assim você poderá saber o que cada usuário preencheu em cada campo. Por exemplo, se você tem vários campos de texto, cada um para um tipo de informação diferente, você usa o atributo NAME para identificar o campo. Você sempre verá em todas as tags INPUT que este atributo estará presente.

Atributo TYPEPor outro lado, é importantíssimo indicar o atributo TYPE, já que existem outras modalidades de formulário que usam esta mesma tag. Em campo de dados de texto, o atributo TYPE recebe o valor text.

A tag é da seguinte forma:

<INPUT type=”text” name=”nome”>

Deste modo expressamos nosso desejo de criar uma caixa de texto, cujo conteúdo será chamado nome (por exemplo). O aspecto deste tipo de caixas é conhecido, como pode ser visto aqui:

FIGURA 10.1 – CAIXA DE TEXTO

Quando INPUT não apresenta o atributo TYPE, assume-se TYPE=TEXT como padrão da formatação.

280


O exemplo seguinte mostra um formulário simples com dois elementos input:

<FORM action=”processar.php” method=”post”>

Primeiro nome: <INPUT type=”text” name=”primeiro_nome”><br>

Último nome: <INPUT type=”text” name=”ultimo_nome”>

</FORM>

Acompanhe o aspecto do formulário quando visualizado no seu navegador:

FIGURA 10.2 – EXEMPLO DE UM FORMULÁRIO

Atributo VALUE Em alguns casos pode ser interessante atribuir um valor definido ao campo em questão. Isto pode ajudar ao usuário a preencher mais rapidamente o formulário ou a dar alguma idéia sobre a natureza de dados que se deseja. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples:

<input type=”text” name=”nome” value=”Ana Paula”>

281


Unidade 10

Gera-se, assim, um campo deste tipo:

FIGURA 10.3 – EXEMPLO DE CAIXA DE TEXTO COM VALOR DEFINIDO

Campo de dados texto em formato senhaO campo de dados texto, em formato senha, é uma entrada de texto na qual os caracteres são escondidos por asteriscos. Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer certa confiabilidade. Este tipo de campo é análogo aos de texto com somente uma diferença: o atributo TYPE será igual ao “password”:

<INPUT type=”password” name=”nome”>

Neste caso, pode ser comprovado que, ao escrever dentro do campo no lugar de texto, serão vistos asteriscos. Estes campos são ideais para a introdução de dados confidenciais, principalmente códigos de acesso. É muito usado para entradas de senhas, como se pode ver no exemplo:

<FORM>

Usuário: <INPUT TYPE=TEXT NAME=login><br>

Senha: <INPUT TYPE=PASSWORD NAME=”senha”>

</FORM>

282


Resultado:

FIGURA 10.4 – EXEMPLO DE CAIXA DE TEXTO EM FORMATO SENHA

Campo de dados escondidoO campo de dados escondido funciona igual a um campo de texto, só que ele não aparece no formulário para o visitante. Ele está lá no código, mas o visitante não pode vê-lo ou alterá-lo. Isso é importante para você incluir informações que ache necessárias, mas que não deseja que o visitante altere. Veja um exemplo:

<FORM>

<INPUT TYPE=HIDDEN NAME=Escondido Value=Sim>

</FORM>

Aqui o campo está escondido. O visitante não o vê, mas ele vai ser processado pelo formulário. Você pode incluí-lo sem problemas junto com os outros elementos. Por exemplo:

<FORM>

Usuário: <INPUT TYPE=TEXT NAME=login><br>

Senha: <INPUT TYPE=PASSWORD NAME=”senha”>

<INPUT TYPE=HIDDEN NAME=Escondido Value=Sim>

</FORM>

283


Unidade 10

A visualização deste exemplo é a seguinte:

FIGURA 10.5 – EXEMPLO DE CAIXA DE TEXTO COM CAMPO ESCONDIDO

Em alguns casos, a parte dos próprios dados enviados pelo usuário, pode ser prático enviar dados definidos por nós mesmos, que ajudem o programa em seu processamento do formulário. Vejamos um outro exemplo:

<input type=hidden name=”site” value=”www.meusite.com”>

Esta tag, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou ao programa encarregado da gestão do formulário. Poderíamos, a partir deste dado, tornar conhecido para o programa a origem do formulário ou algum tipo de ação a ser realizada (um re-endereçamento, por exemplo).

Atributo SIZEO atributo SIZE define o tamanho da caixa em número de caracteres. Se, ao escrever, o usuário chega ao final da caixa, o texto irá desfilando à medida que se escreve fazendo desaparecer a parte de texto que fica à esquerda. Este atributo também especifica o tamanho do espaço no vídeo para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor padrão é 20. Veja um exemplo:

284


<FORM>

Endereço: <INPUT TYPE=TEXT SIZE=35>

</FORM>


FIGURA 10.6 - EXEMPLO DA UTILIZAÇÃO DO ATRIBUTO SIZE

Atributo MAXLENGTH Este atributo indica o tamanho máximo do texto que pode ser “tomado” pelo formulário. É importante não confundi-lo com o atributo SIZE. Enquanto o primeiro define o tamanho aparente da caixa de texto, o MEXLENGTH indica o tamanho máximo real do texto que pode ser escrito.

Podemos ter uma caixa de texto com um tamanho aparente (SIZE) que é menor do que o tamanho máximo (MAXLENGTH). O que ocorrerá, neste caso, é que, ao ser escrito, o texto irá desfilando dentro da caixa até que cheguemos ao seu tamanho máximo, definido por MAXLENGTH. Neste momento, será impossível continuar escrevendo. Este atributo só é válido para campos de entrada TEXT e PASSWORD.

<FORM>

Dia do mês: <INPUT TYPE=TEXT NAME=”ex” MAXLENGTH=2>

</FORM>

285


Unidade 10

Resultado:

FIGURA 10.7 - EXEMPLO DA UTILIZAÇÃO DO ATRIBUTO MAXLENGTH

No exemplo acima, apenas 2 caracteres serão lidos pelo formulário e não será possível digitar mais do que 2 caracteres no campo.

Atenção!

Quando você deseja utilizar elementos de formulário, você deve escrevê-los sempre entre as tags <form>...</form>. Caso contrário, os elementos serão vistos perfeitamente no Internet Explorer, enquanto em outros navegadores podem não ser.

É por isso que, para mostrar um campo de texto, não adianta colocar a tag <input> e sim, colocá-la dentro de um formulário, assim:

<form>

<input type=”text” name=”nome” value=”Josefa Palotes”>

</form>

Área de texto longoSe você deseja colocar à disposição do usuário um campo de texto, onde possa escrever sobre um espaço composto de várias linhas, você tem, então, que utilizar a tag <TEXTAREA> e seu fechamento correspondente.

286


Estes tipos de campos são práticos quando o conteúdo a ser enviado não é um nome, telefone ou qualquer outro dado breve e sim um comentário, opinião etc.

Dentro desta tag, você deve indicar o atributo NAME para associar o conteúdo a um nome, que será semelhante a uma variável em linguagens de programação. Além disso, você pode definir as dimensões do campo a partir dos seguintes atributos:

ROWS: Define o número de linhas do campo de texto. �

COLS: Define o número de colunas do campo de texto. �

A tag fica desta forma:

<TEXTAREA name=”comentário” rows=”10” cols=”40”>...</TEXTAREA>

O resultado é o seguinte:

FIGURA 10.8 - EXEMPLO DA UTILIZAÇÃO DE ÁREA DE TEXTO

Mesmo assim, ainda é possível definir o conteúdo do campo. Para isso, você não usará o atributo VALUE e sim, o conteúdo entre as tags que lhe desejamos atribuir. Vejamos:

<textarea name=”comentário” rows=”10” cols=”40”>Escreva seu comentário....</textarea>

287


Unidade 10

Você obtém o resultado:

FIGURA 10.9 - EXEMPLO DA UTILIZAÇÃO DE ÁREA DE TEXTO COM CONTEÚDO DEFINIDO

Repare que, no atributo “COLS”, nós definimos o número de colunas para a largura do campo de texto e, em “ROWS”, o número de linhas para o campo de texto. Se o usuário digitar mais do que 10 linhas ou se o texto ocupar mais do que as 10 linhas definidas, surgirá uma barra de rolagem. Os valores destes atributos podem ser modificados à vontade de acordo com a sua necessidade.

Seção 3 – Seleções e listas de opções

Efetivamente, os textos são uma forma muito prática para se fazer chegar a informação do navegante. Porém, em muitos casos, os textos são dificilmente adaptáveis a programas que possam processá-los devidamente ou pode ser, também, que seu conteúdo não se ajuste ao tipo de informação que requeremos. É por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao navegante, a partir da exposição de uma série de opções.

Este é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de crédito para um pagamento etc. Estes tipos de opções podem ser expressos de diferentes formas.

288


As listas de opções são tipos de menus desdobráveis que nos permitem escolher uma (ou várias) das múltiplas opções que nos propõem. Para construí-las, utilizaremos uma tag com seu respectivo fechamento: <SELECT>.

Como para os casos já vistos, dentro desta tag, definiremos seu nome por meio do atributo NAME. Cada opção será incluída em uma linha precedida da tag <OPTION>.

Veja, a partir destas diretrizes, a forma mais típica e simples desta tag:

<SELECT name=”estação”>

<option>Primavera</option>

<option>Verão</option>

<option>Outono</option>

<option>Inverno</option>

</SELECT>

O resultado é:

FIGURA 10.10 - EXEMPLO DE SELEÇÃO

A tag SELECT pode ser vista modificada, principalmente a partir de outros dois atributos: SIZE e MULTIPLE.

289


Unidade 10

Atributo SIZE – � indica o número de elementos da lista visíveis no formulário. O resto pode ser visto por meio da barra lateral de deslocamento. Exemplo:

<SELECT name=”estação” size=3>





</SELECT>

Visualize agora:

FIGURA 10.11 - EXEMPLO DE SELEÇÃO COM O ATRIBUTO SIZE

Atributo MULTIPLE � – permite a seleção de vários elementos da lista. A escolha de mais de um elemento se faz a partir das teclas CTRL ou SHIFT ou com o mouse.

Atenção!

Se for possível, não utilize MULTIPLE. Não recomendamos a prática desta opção já que o manejo das teclas CTRL ou SHIFT, para escolher várias opções, pode ser desconhecido para o usuário. Evidentemente, sempre cabe a possibilidade de explicar como funciona, apesar de ser uma complicação a mais para o visitante.

290


Vejamos qual é o efeito produzido por esses atributos:

<SELECT name=”estação” size=3 MULTIPLE>





</SELECT>

A lista poderá ser selecionada dessa forma:

FIGURA 10.12 - EXEMPLO DE SELEÇÃO COM O ATRIBUTO MULTIPLE

A tag <OPTION> ainda pode ser utilizada juntamente com outros atributos, tais como SELECTED e VALUE.

Atributo SELECT - � Da mesma forma que o MULTIPLE, este atributo não toma nenhum valor, a não ser o de simplesmente indicar que a opção apresentada está escolhida por padrão. Esse atributo é aplicado à tag <OPTION>.

Assim, se mudamos a linha do código anterior:

291


Unidade 10

<SELECT name=”estação”>



<option SELECTED>Outono</option>


</SELECT>

O resultado será:

FIGURA 10.13 - EXEMPLO DE SELEÇÃO COM O ATRIBUTO SELECTED

Atributo VALUE - � Define o valor da opção que será enviada ao programa ou ao correio eletrônico se o usuário escolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a um programa, visto que a cada opção se pode associar um número ou letra, o qual se torna muito mais fácil de manipular do que uma palavra ou texto. Poderíamos assim escrever linhas do tipo:

<option value=”1”>Primavera</option>

Deste modo, se o usuário escolhe primavera, o que chegará ao programa (ou ao correio) é uma variável chamada estação, que terá como valor 1. No correio eletrônico, por exemplo, receberíamos:

estação=1

292


Seção 4 - Botões de rádio

Os botões de rádio indicam uma lista de itens, dos quais apenas um pode ser escolhido de cada vez. Os botões de rádio usam a tag <INPUT> com o atributo TYPE igual a “radio”. Você indica os grupos de botões de rádio usando o mesmo atributo NAME para cada um.

Além disso, cada um dos botões de rádio deve ter um atributo VALUE exclusivo, indicando o valor da seleção. Veja o exemplo:

<form>

<input type=”radio” name=”sexo” value=”masculino”> Masculino<br>

<input type=”radio” name=”sexo” value=”feminino”> Feminino

</form>

Este é o aspecto do formulário quando visualizado em um navegador:

FIGURA 10.14 - EXEMPLO DE BOTÃO DE SELEÇÃO

Repare que só se pode selecionar uma das opções dadas. Elas excluem-se mutuamente. Se o usuário escolhe, supostamente, feminino, receberemos como resultado:

293


Unidade 10

Sexo=”feminino”

Atenção!

Observe que a tag <input type=”radio”> somente coloca o campo para clicar na página. Os textos que aparecem ao lado, assim como as quebras de linha, devem ser dispostos com o correspondente texto no código da página e com as tags HTML que necessitarmos.

Por padrão, todos os botões de rádio estão desativados (não selecionados). Você pode determinar o botão de rádio padrão de um grupo, através da utilização do atributo CHECKED, da seguinte forma:

<form>

<input type=”radio” name=”sexo” value=”masculino”> Masculino<br>

<input type=”radio” name=”sexo” value=”feminino” checked> Feminino

</form>

Vejamos o efeito:

FIGURA 10.15 - EXEMPLO DE BOTÃO DE SELEÇÃO SELECIONADO

294


Seção 5 - Caixas de validação

As caixas de validação (“checkboxes”) ou verificação devem ser usadas sempre que queremos que o usuário aprove (ou não) itens dentro de um pequeno grupo. É permitido validar mais do que uma opção simultaneamente. Ou seja, as caixas de verificação permitem a seleção de vários itens de uma lista.

Cada caixa pode estar ativada ou desativada (o padrão é desativada). A tag <INPUT>, juntamente com o atributo TYPE, definem as caixas de validação quando TYPE=“checkbox”.

Observe o exemplo:

<form>

<input type=”checkbox” name=”patins”>Eu tenho patins.<br>

<input type=”checkbox” name=”skate”>Eu tenho um skate.<br>

<input type=”checkbox” name=”bicicleta”>Eu tenho uma bicicleta.

</form>

Acompanhe o aspecto do formulário quando visualizado em um navegador:

FIGURA 10.16 - EXEMPLO DE CAIXA DE VALIDAÇÃO

Repare que você pode selecionar cada uma das opções de forma independente da outra. Estes tipos de elementos podem ser ativados ou desativados pelo usuário com um simples clique sobre a caixa em questão.

295


Unidade 10

Da mesma forma que para os botões de rádio, podemos ativar a caixa de validação por meio do atributo CHECKED. Exemplo:

<form>

<input type=”checkbox” name=”patins” checked>Eu tenho patins.<br>

<input type=”checkbox” name=”skate”>Eu tenho um skate.<br>

<input type=”checkbox” name=”bicicleta”>Eu tenho uma bicicleta.

</form>

Visualize:

FIGURA 10.17 - EXEMPLO DE CAIXA DE VALIDAÇÃO SELECIONADA

O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo:

patins=on (ou off dependendo se tiver sido ativada ou não)

296


Seção 6 – O botão de envio

Os botões de envio orientam o navegador para que envie os dados do formulário ao servidor. Você deverá incluir pelo menos um botão de envio em cada formulário. Para criar um botão de envio, use “SUBMIT” como valor do atributo em uma tag <INPUT>, da seguinte forma:

<INPUT type=“submit”>

Você pode modificar o texto de rótulo do botão usando o atributo VALUE, como neste exemplo:

<input type=”submit” value=”Enviar”>

O aspecto desse botão é o seguinte:

FIGURA 10.18 - EXEMPLO DE BOTÃO DE ENVIO

Quando o usuário clicar sobre o botão “Enviar” as repostas e texto inseridos no formulário são enviados para processamento. O atributo action do elemento <FORM> contém o endereço (URL) do recurso da web que está encarregado de realizar esse processamento. É para lá que o conteúdo do formulário é enviado. Veja este exemplo:

297


Unidade 10

<form name=”entrada” action=”pagina2.html” method=”get”>

Nome:

<input type=”text” name=”nome”>

<input type=”submit” value=”Enviar”>

</form>

Observe o aspecto do formulário quando visualizado em um navegador:

FIGURA 10.19 – EXEMPLO DE FORMULÁRIO

Os formulários, assim, não somente permitem captar uma informação do usuário como também apresentam uma outra série de funções. Concretamente, os formulários permitem-nos enviar informações através do seu botão de envio. Também pode ser prático propor um botão ‘Apagar Campos’ ou, ainda, propor dados ocultos que possam ajudar-nos em seu processamento.

Botão apagar campos Este botão nos permite apagar o formulário por completo, caso o usuário deseje refazê-lo desde o princípio. Sua estrutura sintática é igual à anterior, só que utilizamos o atributo TYPE com o valor “reset”:

<input type=”reset” value=”Apagar Campos”>

298


A diferença entre o botão de envio, indispensável em qualquer formulário, para o botão de Apagar Campos é meramente optativa já que este último não é utilizado freqüentemente. Tenha cuidado de não colocá-lo muito perto do botão de envio e de distinguir claramente um do outro.

Botões normaisDentro dos formulários, também podemos colocar botões normais, clicáveis como qualquer outro botão. Da mesma forma que ocorre com os campos HIDDEN, estes botões por si só não têm muita utilidade, mas poderemos necessitá-los para realizar ações no futuro. Sua sintaxe é a seguinte:

<input type=button value=”Texto escrito no botão”>

A visualização ficaria desta maneira:

FIGURA 10.20 - EXEMPLO DE BOTÃO

O uso mais freqüente de um botão é na programação do cliente. Utilizando linguagens como Javascript, podemos definir ações a tomar quando um usuário clica o botão de uma página web.

299


Unidade 10

Seção 7 - Exemplo completo de formulário

Com esta unidade, você finaliza o estudo sobre formulários. Passamos, agora, a exemplificar todo o aprendido a partir da criação de um formulário, que consulta o grau de satisfação dos usuários de uma linha de ônibus fictícia. O formulário está construído de modo que se enviem os dados por correio eletrônico a uma caixa de entrada determinada.

Vemos o formulário nesta página. Vocês devem agora construí-lo para ver se realmente entenderam bem os temas sobre formulários.

Nome

E-mail

Cidade

Sexo

Homem

Mulher

Freqüência das viagens

Comentários sobre sua satisfação pessoal

Desejo receber notificação das novidades nas linhas de ônibus.

FIGURA 10.21 - EXEMPLO DE UM FORMULÁRIO COMPLETO

300


A seguir, também mostraremos o código fonte deste formulário, importante para o olhar de todos, mesmo que seja rapidamente.

<form action=”mailto:[email protected]” method=”post” enctype=”text/plain”>

Nome <input type=”text” name=”nome” size=”30” maxlength=”100”> <br> E-mail<input type=”text” name=”email” size=”25” maxlength=”100” value=””>

<br>

Cidade <input type=”text” name=”cidade” size=”20” maxlength=”60”><br> Sexo<br> <input type=”radio” name=”sexo” value=”Masculino” checked> Homem<br> <input type=”radio” name=”sexo” value=”Feminino”> Mulher<br>

<br>

Frequência das viagens <br> <select name=”utilização”>

<option value=”1”>Várias vezes por dia<option value=”2”>Uma vez por dia <option value=”3”>Várias vezes por semana <option value=”4”>várias vezes por mês

</select>

<br><br>

Comentários sobre sua satisfação pessoal<br> <textarea cols=”30” rows=”7” name=”comentários”></textarea>

<br><br>

<input type=”checkbox” name=”receber_info” checked> Desejo receber notificação das novidades nas linhas de ônibus. <br><br> <input type=”submit” value=” Enviar formulário”> <br> <br> <input type=”Reset” value=”Apagar tudo”>

</form>

Para finalizar, veja um modelo de correio eletrônico recebido na empresa de ônibus quando um usuário qualquer preenchesse este formulário e clicasse sobre o botão de envio:

301


Unidade 10

nome=Frederico Silvestre

[email protected]

cidade=Rio de Janeiro

sexo=Masculino

utilização=2

comentários=Acho que não é uma boa linha. Colocar mais ônibus.

receber_info=on

Seção 8 – Exemplo de um formulário utilizando Javascript

JavaScript é uma linguagem para páginas web. Os scripts escritos com JavaScript podem ser colocados dentro das suas páginas HTML. Com JavaScript, você é capaz, por exemplo, de responder muito facilmente a eventos iniciados pelo usuário. Deste modo, você pode criar páginas muito sofisticadas com a ajuda desta linguagem.

Vamos ver um exemplo utilizando JAVASCRIPT? Antes de qualquer coisa, vamos criar um script simples que contém uma função chamada Enviar(). A página HTML terá dois elementos textuais, um campo texto e um botão para enviar os dados da caixa de texto para serem processadas.

<script language=”JavaScript”> function Enviar(form) { document.write(“Seu nome é: “+form.nome.value); }</script>

<form> Digite seu nome:<br> <input type=”text” name=”nome”> <hr> <input type=”button” name=”botao1” value=”Teste a Informação” onClick=”Enviar(this.form)”></form>

302


Vamos a uma rápida explicação. Todo script é executado dentro das tags <SCRIPT>...</SCRIPT>. Você pode usar essas tags no seu documento, no lugar que desejar. Muitos autores declaram os scripts dentro das tags <HEAD> quando utilizam funções Javascript, como é o caso do exemplo anterior (foi utilizada a função Enviar() com o parâmetro FORM). As funções são convocadas por eventos iniciados pelo usuário. Elas são carregadas antes que o usuário possa fazer alguma ação que chamará a função.

Quando executarmos o código anterior, surgirá no seu navegador a seguinte tela:

FIGURA 10.22 – VISUALIZANDO UM FORMULÁRIO HTML

Digite seu nome na caixa de texto e, após, clique no botão “Teste a Informação”. Após o clique neste botão (pelo atributo ONCLICK), a função Enviar(form) será chamada. Dentro desta função, temos o comando document.write(), que escreve na tela alguma informação. Poderíamos substituir este comando pelo comando alert(), que mostra a informação em uma janela. Como desejamos mostrar na tela o nome que foi digitado na caixa de texto, utilizamos o comando form.<nome da caixa de texto>.value. Então o comando fica assim: form.nome.value para pegar o valor da caixa de texto chamada “nome”. O resultado na tela, após o clique no botão, será:

303


Unidade 10

FIGURA 10.23 – RESULTADO DA AÇÃO DO BOTÃO

Atenção!

O estudo de Javascript não faz parte da nossa disciplina, por isso, segue, abaixo, alguns links para você aprofundar seu estudo:

• http://hospedagem.ilogic.com.br/suporte/tutorial/javascript/javascript3/index.htm

• http://www.cm-braganca.pt/document/448112/503209.pdf

• http://www.javascript-tutorial.com.br/content-cat-1.html

• http://www.mozilla.org/js/

• http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide

• http://pt.wikipedia.org/wiki/JavaScript

• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/ 0441e1e5-34e4-4d32-b188-f7fc35613478.asp

304


Síntese

Caros alunos!

Nesta unidade, você aprendeu a criar formulários. Os formulários são de extrema importância no HTML, uma vez que são responsáveis pela interação entre um usuário e o servidor, possibilitando a troca de dados ou informações. O uso de formulário é importante quando desejamos enviar os dados cadastrados em um formulário para outra página ou pelo correio eletrônico. Quando precisamos enviar dados para outra página, faz-se necessária a utilização de outra linguagem de programação para tornar o processo dinâmico, tais como Javascript, Php, Asp etc.

Veja, a seguir, um breve relato dos elementos estudados nesta unidade.

Elementos para Formulários

Elemento Descrição

<form> Define um formulário

<input> Insere um campo para introduzir dados

<textarea>Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres)

<select> Define uma lista com várias opções selecionáveis

<option>Insere uma opção a mais numa lista com várias opções selecionáveis

<button> Define um botão que pode ser pressionado

305


Unidade 10


1. Que tal, agora, você criar um formulário? Suponha que você irá fazer uma pesquisa sobre o usuário do seu site. Pergunte nome, endereço, e-mail, profissão, sexo e sugirá uma lista de opções do que ele gostaria de visualizar no site. Não esqueça de incluir um campo para comentários. Publique na ferramenta EXPOSIÇÃO do ambiente on-line.

Saiba mais


www.icmc.usp.br/ensino/material/html/forms.html (Formulários) �

http://www.mhavila.com.br/topicos/web/valform.html (Validação de formulários HTML �

comJavaScript)

http://www.criarweb.com/artigos/93.php?manual=2 (Formulários HTML) �

http://br.geocities.com/aquiaprende/10.html (Formulários HTML) �

UNIDADE 11

Elementos e atributos HTML obsoletos (deprecated)


Conhecer e identificar elementos/atributos obsoletos �

(deprecated).

Seções de estudo

Seção 1 O que são elementos/atributos obsoletos.

Seção 2 Exemplos de elementos obsoletos.

11

308



Nas unidades anteriores vimos como funciona as estruturas básicas do HTML como Listas, vínculos, tabelas, frames, etc ...

Vimos também os padrões CSS para desenvolvimento de layout de páginas.

Segundo a W3C devemos utilizar o HTML em conjunto com os CSS, sendo que os conteúdos se exprimem em HTML e os estilos em CSS.

Nesse trabalho em conjunto algumas tags sofreram modificações onde deixaram de pertencer ao HTML e foram incorporadas ao CSS, essas tags no HTML passaram a ser chamadas de deprecated ou obsoletas.

Nesta unidade vamos aprender um pouco mais quanto as tags obsoletas.

Seção 1 - O que são elementos/atributos obsoletos

No início o HTML era a linguagem mais utilizada por cientistas. Eles não precisavam de qualidade gráfica, diferentes formatações de textos, se preocupavam muito mais com o conteúdo do que a forma visual. Como as páginas eram simples, qualquer navegador poderia ser utilizado para visualização.

Com a evolução dos navegadores que apresentam novas funcionalidades para atrair usuário e designers, teve a necessidade de se criar páginas mais interessantes ao usuário o que as tornariam mais complexas. O designer da página passou a ter a mesma importância que o conteúdo, em um certo momento o HTML passou a se preocupar com ambas as necessidades(conteúdo, designer), mas não foi muito bem sucedido. As Web pages ficaram cheias de tags desnecessárias, muitas tabelas agrupadas e outros truques para fazer com que o HTML se comporta-se como uma linguagem de designer gráfico.

309


Unidade 11

As páginas tiveram que possuir uma codificação mais complexa e de difícil manutenção e que por conseqüência trouxeram problemas de exibição a certos navegadores.

Foi ai que a W3C resolveu dar um basta nisso e resolveu tornar essas tags de formatação de texto como obsoletas (deprecated), ou seja essas tags de formatação de texto e atributos estariam condenadas em futuras versões do HTML e do XHTML.

A W3C então incorporou essas tags de formatação de texto/atributos ao CSS, separando o que é conteúdo da estrutura.

No CSS as tags básicas do HTML definem os parágrafos, as listas, os cabeçalhos, etc.. e o CSS define como o navegador irá mostrar as informações.

Seção 2 - Exemplos de elementos obsoletos.

Nesta seção você verá algumas tags obsoletas do HTML 4.0.

TAG HTML Propriedade CSSCenter text-align:center

B font-weight:boldU font-style:italic

Font font-family:font name

HTML Atributo Propriedade CSSalign text-align

background background-image:url(image)bgcolor background-colorhspace paddingvspace padding

size font-size:

310


Exemplo :

align = left|center|right|justify

Exemplo Obsoleto:

<H1 align=”center”> Cabeçalho Centralizado </H1>

Exemplo utilizando CSS:<HEAD><STYLE type=”text/css”> H1 { text-align: center} </STYLE><BODY> <H1> Cabeçalho Centralizado </H1>

Note que o atributo align, que antes era definido no próprio HTML agora é definido no CSS.

Síntese

Com a evolução do HTML algumas tags vem sofrendo alterações, fazendo com que as anteriores se tornem precated ou obsoleto.

Nesta unidade vimos o que são essas tags precated e como proceder utilizá-las da maneira correta.

311


Unidade 11

Atividades de autoavaliação

Pesquise nos sites de referências as tags que estão se tornando obsoletas e exemplifique pelo menos 3 tags encontradas.

Saiba mais

Aprofunde os conteúdos estudados nesta unidade ao consultar as seguintes referências :

http://www.netmechanic.com/news/vol6/beginner_no11.htm �

http://www.codehelp.co.uk/html/deprecated.html �

http://www.htmlgoodies.com/tutorials/html_401/html4-ref/article.php/3460291 �

[OFICIAL] http://www.w3schools.com/tags/default.asp �

Para concluir o estudo

Caro aluno!

Conhecer HTML é imprescindível para qualquer profissional que pretende trabalhar com desenvolvimento web, sendo o primeiro passo na confecção de páginas na internet. Neste livro abordamos os conceitos introdutórios de HTML e suas características, utilização de tags de formatação de textos e parágrafos, estilos, blocos de texto, alinhamentos, listas, links, imagens, tabelas e células. Destacamos a importância e características dos frames, uso de formulários, alguns comandos básicos de JAVASCRIPT, bem como criar páginas eficientes.

Espero que você tenha gostado da disciplina e que tenha aproveitado os conhecimentos adquiridos para iniciar a construção de sua página web. A nossa preocupação foi direcioná-los ao início da construção de sites simples, colocando em prática os conceitos básicos sobre as tags de HTML, da melhor forma possível. Sabemos que a criação das páginas pode ser aprofundada em cada unidade estudada bem como através de linguagens dinâmicas que permitem a interação do usuário com o página, como por exemplo, Php, Asp, Javascript etc. Por isso, desejamos que você não pare seus estudos aqui! Vá em frente na sua constante busca de conhecimentos.

Espero que você consiga tirar proveito dos temas aqui trabalhados e aplicá-los em seus projetos pessoais tanto quanto profissionais. Que o nosso esforço lhe traga muito sucesso. Boa sorte!

Abraços, Patrícia.

Referências

FLANAGAN, David. JavaScript: o guia definitivo. 4ª ed. Porto Alegre: Bookman, 2004.

GRAHAM, Ian S. HTML 4.0 sourcebook: a complete guide to HTML 4.0 and HTML extensions. New York: Wiley Computer Publishing, 1998.

LEMAY, Laura. Aprenda em 1 semana HTML 4. Rio de Janeiro: Editora Campus, 1998.

MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programação para web. São Paulo: Editora Érica, 2005.

NIEDERST, Jennifer. Web design in a nutshell: a desktop quick reference. Sebastopol: O’Reilly, 1998.

PRATES, Rubens. HTML: guia de consulta rápida. São Paulo: Editora Novatec, 1997.

RAMALHO, José Antônio Alves. HTML 4: prático e rápido. São Paulo: Editora Berkeley, 1999.

REHDER, Wellington da Silva & PEREIRA, Marcelo Gino. HTML: hypertext markup Language. São Paulo: Editora Viena, 2003.

WEINMAN, Lynda; WEINMAN, Bill. Design criativo com Html 2: um guia prático e completo para design na web. Rio de Janeiro: Ciência Moderna, 2002.

316


Sites de Referência

• http://www.abcdohtml.hpg.ig.com.br/html_intro.htm

• http://www.intergate.com.br/suporte/glossario/glossario_w_x_y_z/glossario_w_x_y_z.html

• http://rouder.vilabol.uol.com.br/html.htm

• http://www.hexagora.com/en_home.asp

• http://www.icmc.usp.br/ensino/material/html/edicao.html

• http://www.mat.ua.pt/antoniop/html/intro.htm

• http://members.fortunecity.com/vshelter/html/

• http://eof.alunos.dcc.fc.up.pt/manuais/HTML/HTML.html

• http://www.webwritersbrasil.com.br/detalhe.asp?numero=145

• http://www.artifice.web.pt/tutoriais

• http://vitoria.upf.tche.br/~carolina/ccc002/oficina/

• http://www.maujor.com/blog/2006/04/06/el-html/

• http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki

• http://www.mxstudio.com.br/views.glossario.php?cid=6&char=&p=5

• http://www.imasters.com.br/artigo/4224/css/

• http://www.w3schools.com/

• http://www.webwriter.dk/english/index.htm

• http://www.htmlbeauty.com/

• http://www.pagebreeze.com/

• http://forum.htmlstaff.org/

Sobre a professora conteudista

Patrícia Gerent Petry nasceu em Florianópolis, SC. Formada em Ciência da Computação pela Universidade Federal de Santa Catarina. Mestre em Ciência da Computação, área Informática e Educação, pela Universidade Federal de Santa Catarina, tendo como tema principal de sua dissertação “O Processo de Ensino e Aprendizagem de Algoritmos”. Atuou como professora substituta da Universidade Federal de Santa Catarina. Foi professora nas instituições de ensino superior: Universidade do Vale do Itajaí e Faculdades Barddal.

Atualmente é Analista de Sistemas dos Correios/SC e atua como professora da Universidade do Sul de Santa Catarina desde 1998. Atuou por muitos anos nas disciplinas de Programação I, Programação II, Laboratório de Informática e Análise e Projeto de Sistemas I dos cursos de Sistema de Informação e Ciência da Computação no ensino presencial da UNISUL.

No ensino virtual, atua como tutora nas cadeiras de Introdução à Internet, Lógica de Programação I e II, Linguagem de Programação I do curso de Tecnólogo em Web Design e Programação.

Publicou diversos artigos científicos e capítulo de um livro na área de Informática e Educação.

Unidade 11) Resposta Pessoal

Unidade 21) Não. A maioria dos navegadores é capaz de lidar com páginas em HTML simples, sem as tags de estrutura de página. Mas ao incluí-las você permitirá que a sua página seja lida por ferramentas SGML (Standard Generalized Markup Language – define a estrutura geral do conteúdo dos documentos e não a aparência real desse conteúdo na página) mais genéricas e também tirará proveito dos recursos dos futuros navegadores.

2) Resposta pessoal.

Unidade 31) Resposta pessoal.

2) Resposta pessoal.



Respostas e comentários das atividades de auto-avaliação

320


Unidade 61)

<body bgcolor=”#000000”><table border=”1”> <tr> <td width=”8”><font color=”#FFFF00”>1</font></td> <td width=”8”><font color=”#FFFF00”>2</font></td> <td width=”16”><font color=”#FFFF00”>3</font>3</td> </tr> <tr> <td><font color=”#FFFF00”>4</font></td> <td><font color=”#FFFF00”>5</font></td> <td><font color=”#FFFF00”>6</font></td> </tr> <tr> <td><font color=”#FFFF00”>7</font></td> <td><font color=”#FFFF00”>8</font></td> <td><font color=”#FFFF00”>9</font></td> </tr></table></body>

Unidade 71) Resposta Pessoal.

2) Resposta Pessoal.

3) Sim. A tag NOFRAME possibilita que se crie uma opção de navegação na página para quem não possui um navegador que entenda frames. Se você está navegando na internet e entra em uma página que não suporte frames, o navegador ignora essas tags e procura pela tag NOFRAME, que seria uma página alternativa.

321



2) Resposta Pessoal.




[1572]Linguagens Programacao I

Documents

Transcript of [1572]Linguagens Programacao I