80771551 linguagens-de-programacao-i-unisul-livro-completo-2010

Universidade do Sul de Santa Catarina

Palhoça

UnisulVirtual

2010

Linguagens de Programação I

Disciplina na modalidade a distância

CréditosUniversidade do Sul de Santa Catarina – Campus UnisulVirtual – Educação Superior a Distância

Reitor UnisulAilton Nazareno Soares

Vice-Reitor Sebastião Salésio Heerdt

Chefe de Gabinete da ReitoriaWillian Máximo

Pró-Reitora AcadêmicaMiriam de Fátima Bora Rosa

Pró-Reitor de AdministraçãoFabian Martins de Castro

Pró-Reitor de EnsinoMauri Luiz Heerdt

Campus Universitário de Tubarão DiretoraMilene Pacheco Kindermann

Campus Universitário da Grande Florianópolis Diretor Hércules Nunes de Araújo

Campus Universitário UnisulVirtualDiretoraJucimara Roesler

Equipe UnisulVirtual

Diretora AdjuntaPatrícia Alberton

Secretaria Executiva e CerimonialJackson Schuelter Wiggers (Coord.)Bruno Lucion RosoMarcelo Fraiberg MachadoTenille Catarina

Assessoria de Assuntos InternacionaisMurilo Matos Mendonça

Assessoria DAD - Disciplinas a Distância Enzo de Oliveira Moreira (Coord.)Carlos Alberto AreiasFranciele Arruda Rampelotti Luiz Fernando Meneghel

Assessoria de Inovação e Qualidade da EaDDênia Falcão de Bittencourt (Coord.)Rafael Bavaresco Bongiolo

Assessoria de Relação com Poder Público e Forças ArmadasAdenir Siqueira Viana

Assessoria de Tecnologia Osmar de Oliveira Braz Júnior (Coord.) Felipe Jacson de Freitas

Jefferson Amorin OliveiraJosé Olímpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da SilvaPriscila da SilvaRodrigo Battistotti Pimpão

Coordenação dos CursosAuxiliares das coordenaçõesFabiana Lange PatricioMaria de Fátima MartinsTânia Regina Goularte Waltemann

Coordenadores GraduaçãoAdriana Santos RammêAdriano Sérgio da Cunha Aloísio José Rodrigues Ana Luisa Mülbert Ana Paula R. Pacheco Bernardino José da SilvaCarmen Maria C. Pandini Catia Melissa S. RodriguesCharles Cesconetto Diva Marília Flemming Eduardo Aquino Hübler Eliza B. D. LocksFabiano CerettaHorácio Dutra MelloItamar Pedro BevilaquaJairo Afonso HenkesJanaína Baeta NevesJardel Mendes VieiraJoel Irineu LohnJorge Alexandre N. CardosoJosé Carlos N. OliveiraJosé Gabriel da SilvaJosé Humberto D. ToledoJoseane Borges de MirandaLuciana ManfroiMarciel Evangelista CatâneoMaria Cristina VeitMaria da Graça Poyer Mauro Faccioni FilhoMoacir Fogaça Myriam RiguettoNélio Herzmann Onei Tadeu Dutra Raulino Jacó Brüning Rogério Santos da CostaRosa Beatriz M. PinheiroTatiana Lee MarquesThiago Coelho SoaresValnei Campos DenardinRoberto IunskovskiRose Clér BecheRodrigo Nunes Lunardelli

Coordenadores Pós-GraduaçãoAloisio RodriguesAnelise Leal Vieira CubasBernardino José da SilvaCarmen Maria Cipriani PandiniDaniela Ernani Monteiro WillGiovani de PaulaKarla Leonora NunesLuiz Otávio Botelho LentoThiago Coelho SoaresVera Regina N. Schuhmacher

Gerência Administração Acadêmica Márcia Luz de Oliveira (Gerente)Fernanda Farias

Financeiro AcadêmicoMarlene Schauffer Rafael BackVilmar Isaurino Vidal

Gestão DocumentalLamuniê Souza (Coord.)Clair Maria CardosoJanaina Stuart da CostaJosiane LealMarília Locks FernandesRicardo Mello Platt

Secretaria de Ensino a Distância Karine Augusta Zanoni (Secretária de Ensino) Giane dos Passos (Secretária Acadêmica)Alessandro Alves da SilvaAndréa Luci Mandira Cristina Mara ShauffertDjeime Sammer Bortolotti Douglas SilveiraFabiano Silva MichelsFelipe Wronski HenriqueJanaina ConceiçãoJean MartinsLuana Borges da SilvaLuana Tarsila HellmannMaria José Rossetti Miguel Rodrigues da Silveira JuniorMonique Tayse da SilvaPatricia A. Pereira de CarvalhoPatricia Nunes Martins Paulo Lisboa CordeiroRafaela FusiegerRosângela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt

Gerência Administrativa e FinanceiraRenato André Luz (Gerente)Naiara Jeremias da RochaValmir Venício Inácio

Gerência de Ensino, Pesquisa e ExtensãoMoacir Heerdt (Gerente)Aracelli Araldi Hackbarth

Elaboração de Projeto e Reconhecimento de CursoDiane Dal Mago Vanderlei Brasil

ExtensãoMaria Cristina Veit (Coord.)

PesquisaDaniela Will (Coord. PUIP, PUIC, PIBIC) Mauro Faccioni (Coord. Nuvem)

Pós-GraduaçãoClarissa Carneiro Mussi (Coord.)

Biblioteca Soraya Arruda (Coord.)Paula Sanhudo da SilvaRenan Felipe CascaesRodrigo Martins da Silva

Capacitação e Assessoria ao DocenteAngelita Marçal Flores (Coord.)Adriana SilveiraAlexandre Wagner da RochaCláudia Behr ValenteElaine Cristiane SurianJuliana Cardoso EsmeraldinoPatrícia da Silva Meneghel Simone Perroni da Silva Zigunovas

Monitoria e SuporteRafael da Cunha Lara (Coord.)Anderson da SilveiraAngélica Cristina Gollo

Bruno Augusto ZuninoClaudia Noemi NascimentoDébora Cristina SilveiraEdnéia Araujo Alberto Francine Cardoso da SilvaKarla F. Wisniewski DesengriniMaria Eugênia Ferreira CeleghinMaria Lina Moratelli PradoMayara de Oliveira BastosPatrícia de Souza AmorimPoliana Morgana SimãoPriscila Machado

Gerência de Desenho e Desenvolvimento de Materiais DidáticosMárcia Loch (Gerente)

Acessibilidade Vanessa de Andrade Manoel (Coord.) Bruna de Souza Rachadel Letícia Regiane Da Silva Tobal

Desenho EducacionalCarmen Maria Cipriani Pandini (Coord. Pós)Carolina Hoeller da S. Boeing (Coord. Ext/DAD) Silvana Souza da Cruz (Coord. Grad.) Ana Cláudia Taú Cristina Klipp de Oliveira Eloisa Machado Seemann Flávia Lumi MatuzawaGabriella Araújo Souza Esteves Giovanny Noceti Viana Jaqueline Cardozo PollaLis Airê Fogolari Lygia Pereira Luiz Henrique Milani QueriquelliMarina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes CorreaNágila Cristina Hinckel Roberta de Fátima Martins Sabrina Paula Soares ScarantoViviane Bastos

Gerência de Logística Jeferson Cassiano A. da Costa (Gerente)Andrei Rodrigues

Logística de Encontros Presenciais Graciele Marinês Lindenmayr (Coord.) Ana Paula de AndradeCristilaine Santana MedeirosDaiana Cristina BortolottiEdesio Medeiros Martins FilhoFabiana PereiraFernando Oliveira SantosFernando SteimbachMarcelo Jair Ramos

Logística de Materiais Carlos Eduardo D. da Silva (Coord.)Abraão do Nascimento GermanoFylippy Margino dos SantosGuilherme LentzPablo Farela da SilveiraRubens Amorim

Gerência de Marketing Fabiano Ceretta (Gerente)Alex Fabiano WehrleSheyla Fabiana Batista GuerrerVictor Henrique M. Ferreira (África)

Relacionamento com o MercadoEliza Bianchini Dallanhol LocksWalter Félix Cardoso Júnior

Gerência de Produção Arthur Emmanuel F. Silveira (Gerente)Francini Ferreira Dias

Design Visual Pedro Paulo Alves Teixeira (Coord.)Adriana Ferreira dos Santos Alex Sandro XavierAlice Demaria Silva Anne Cristyne PereiraDiogo Rafael da SilvaEdison Rodrigo ValimFrederico Trilha Higor Ghisi LucianoJordana Paula SchulkaNelson RosaPatrícia Fragnani de Morais

Multimídia Sérgio Giron (Coord.)Cristiano Neri Gonçalves RibeiroDandara Lemos ReynaldoFernando Gustav Soares Lima Sérgio Freitas Flores

PortalRafael Pessi (Coord.)Luiz Felipe Buchmann Figueiredo

ComunicaçãoMarcelo BarcelosAndreia DrewesCarla Fabiana Feltrin Raimundo

Produção IndustrialFrancisco Asp (Coord.)Ana Paula PereiraMarcelo Bittencourt

Gerência Serviço de Atenção Integral ao AcadêmicoJames Marcel Silva Ribeiro (Gerente)

AtendimentoMaria Isabel Aragon (Coord.)Andiara Clara FerreiraAndré Luiz PortesBruno Ataide MartinsHoldrin Milet BrandaoJenniffer CamargoMaurício dos Santos AugustoMaycon de Sousa CandidoSabrina Mari Kawano GonçalvesVanessa TrindadeOrivaldo Carli da Silva Junior

Estágio Jonatas Collaço de Souza (Coord.)Juliana Cardoso da SilvaMicheli Maria Lino de MedeirosPriscilla Geovana Pagani

ProuniTatiane Crestani Trentin (Coord.) Gisele Terezinha Cardoso FerreiraScheila Cristina MartinsTaize Muller

Avenida dos Lagos, 41 – Cidade Universitária Pedra Branca | Palhoça – SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: [email protected] | Site: www.unisul.br/unisulvirtual

Patrícia Gerent Petry


Livro didático

Palhoça

UnisulVirtual

2010

Revisão e atualizaçãoClavison Martinelli Zapelini

Design instrucionalLeandro Kingeski PachecoMelina de la Barrera Ayres

3ª edição revista e atualizada

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

005.133P59 Petry, Patrícia Gerent

Linguagens de programação I : livro didático / Patrícia Gerent Petry ; revisão e atualização Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski Pacheco, Melina De La Barrera Ayres ; [assistente acadêmico Sabrina Paula Soares Scaranto, Lygia Pereira]. – 3. ed. rev. e atual. – Palhoça : UnisulVirtual, 2010.

310 p. : il. ; 28 cm.

Inclui bibliografia.

1. Linguagem de programação (Computadores). 2. HTML (Linguagem de programação de computador). I. Zapelini, Clavison Martinelli. II. Pacheco, Leandro Kingeski. III. Ayres, Melina De La Barrera. IV. Scaranto, Sabrina Paula Soares. IV. Pereira, Lygia. V. Título.

Edição – Livro Didático

Professor ConteudistaPatricia Gerent Petry

Revisão e AtualizaçãoClavison Martinelli Zapelini (3ª ed. rev. e atual.)

Design InstrucionalLeandro Kingeski Pacheco

Melina de la Barrera Ayres (3ª ed. rev. e atual.)

Assistente AcadêmicoSabrina Paula Soares Scaranto (3ª ed. rev. e atual.)

Lygia Pereira (3ª ed. rev. e atual.)

Projeto Gráfico e CapaEquipe UnisulVirtual

DiagramaçãoRafael Pessi

Anne Cristyne Pereira (3ª ed. rev. e atual.)

RevisãoAmaline Boulus Issa Mussi (3ª ed. rev. e atual.)

Copyright © UnisulVirtual 2010

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

Sumário

Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99

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

UNIDADE 6 – Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153

UNIDADE 7 – Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

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

UNIDADE 9 – Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239

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

Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301

Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303

Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305

Respostas e comentários das atividades de autoavaliação . . . . . . . . . . . . . . . . .307

Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309

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 que sua caminhada nesta disciplina será acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual. Neste sentido a expressão “a distância” caracteriza, somente, a modalidade de ensino pela qual 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

Palavras da professora

Caro(a) Aluno(a)!

Você já deve ter passado boa parte de seu tempo explorando a web, e é provável que já esteja familiarizado(a) 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 isto em alguma oportunidade. Muitos 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.

Aqui 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ê (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á por que 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 estudos visa a orientá-lo(a) no desenvolvimento da disciplina. Possui elementos que o(a) ajudarão a conhecer o contexto da disciplina e a organizar o seu tempo de estudos.

O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam, portanto 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 (complementares, a distância e presenciais);

� o Sistema Tutorial.

Ementa

Apresentaçã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.

12


Carga Horária

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

Objetivos

Gerais

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.

� Aprender a 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/objetivos

Os 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: 10

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

Nesta unidade, você iniciará a criação de páginas web. Aprenderá a estruturar o código HTML e a utilizar os tags.

Unidade 3 – Listas e Vínculos

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

Unidade 4 – Mais formatação em HTML

Nesta unidade, você distinguirá os diferentes estilos de caracter. Saberá como formatar e utilizar as tags <blink> e <marquee>.

14


Unidade 5 – Uso de Imagens, Painéis de Fundo e Arquivos de Áudio

Nesta unidade, você utilizará a tag <img> e seus atributos. Fará referência de hipertexto com imagem. Criará painéis de fundo com imagens. Além disso, serão abordadas sugestões para um melhor uso das imagens e técnicas para manipulação de arquivos de áudio.

Unidade 6 – Tabelas

Nesta unidade, você criará as tabelas e seus elementos básicos: alinhamento da tabela e das células, dimensões e cor.

Unidade 7 – Frames

Nesta unidade, você construirá frames com o elemento FRAMESET, aprenderá suas aplicações e cuidados no uso. Fará links com frames. Realizará a composição dos frames e distinguirá os atributos de frameset e frame.

Unidade 8 – Desenvolvendo páginas eficientes

Na unidade 8, você desenvolverá páginas eficientes. Saberá como utilizar as extensões de HTML, como realizar o projeto e layout da página e como usar os vínculos. Nesta unidade, também encontrará sugestões de bons hábitos e conhecerá atributos HTML em desuso.

Unidade 9 – Folhas de Estilo

Nesta unidade, você saberá o que são as folhas de estilos e a sintaxe SCC. Aprenderá os tipos de definição de estilos e a ordem da cascata.

15


Unidade 10 – Criação de Formulários

Nesta unidade, você criará formulários. Usará campos de entrada de texto; seleções - listas de opções; botões de rádio, caixas de validação e botões de envio. Você verá, também, um exemplo completo de formulário.

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 estudo

Caro(a) aluno(a), 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 ideias. 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.

A evolução da internet é constante. Atualmente, a evolução mais marcante é a preconizada WEB 2.0, que melhorou muito o carregamento de páginas dinâmicas com a substituição do simples HTML pelo XHTML e a utilização de AJAX. Esses conceitos serão abordados de forma mais aprofundada na unidade 7. 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 os quais 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 ideias, e, ao mesmo tempo, perigoso, quando utilizado para fins ilícitos.

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 é produzida por indivíduos que desejam 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. Qualquer pessoa 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 o conteúdo da rede e permitir o acesso a ele. Neste livro, chamamos o programa cliente de navegador (browser, em inglês). O que o navegador faz é

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

requisitar um 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 ideia 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. Desta 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 – Sistema de ajuda on-line.

Um exemplo de páginas que utilizam hipertextos pode ser visualizados em: <http://pt.wikipedia.org/wiki/Internet>. Acesso em 1ºmar.2010.

22


Você Sabia?

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 lineares, 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 a 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.

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

23


Unidade 1

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 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, Internet Explorer, Mozilla Firefox ou Google Chrome. 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


A ideia de que a web é independente de plataforma não é sustentada por todos. 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, Mozilla Firefox ou Google Chrome.

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 na web, ela precisa ter um endereço fixo, alojada em um servidor. Este endereço é chamado URL (Uniform Resource Locator, numa tradução literal, localizador uniforme de recursos).

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. Toda URL apresenta uma estrutura básica. Acompanhe tal estrutura em função do exemplo seguinte:

26


Considere a seguinte URL:

<http://www.unisul.br/aluno/aluno.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.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.

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

aluno.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. Neste 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 com 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 por meio 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 certo número de erros e incongruências encontrados 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

Você Sabia?

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 efetuar 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 é 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.

Existem muitos editores de HTML gratuitos, como:

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

32


� 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, as quais 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 algo 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(a) aluno(a), você finalizou a unidade 1. Revisando alguns conceitos importantes: 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 autoavaliaçã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/> (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 Separadores

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>. Outras podem ser colocadas individualmente, como o <P>, que simplesmente insere um espaço para dividir parágrafos. Mais adiante, mostraremos que as tags também podem receber atributos.

Tags básicas

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

<HTML>

<HEAD>

<TITLE>Título 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 que 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>, a qual 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. Além do título da página (< TITLE> ... </TITLE>), no cabeçalho são inseridas também tags utilizadas para indexação do documento HTML e para relacionamento com documentos externos (javascript, CSS, etc...). 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.

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 diz:

� 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 pensarmos 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.

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.

Ainda no exemplo anterior, se você observar atentamente, além das tags TITLE e META, a última tag utilizada no cabeçalho foi LINK. Esta tag tem a função de fazer um relacionamento com algum documento externo.

<LINK REL= “stylesheet” HREF=“folhaestilo.css”>

45


Unidade 2

O atributo REL é a identificação do tipo de formato do documento. O valor “stylesheet” indica que se trata de folhas de estilo. Poderiam ser outro valores, como por exemplo “script”, que indicaria arquivo de funções java script.

HREF é o caminho físico do arquivo. Neste caso, existe um arquivo chamado folhaestilo.css no próprio diretório do HTML.

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

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 a 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, de modo que ela não se mova junto com o texto, ao se rolar a página. Exemplo: <body background=”imagem.gif”>

Neste exemplo, o arquivo de imagem deve estar no mesmo diretório do arquivo HTML.

� 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”>

46


O atributo “cor” pode ser utilizado em todas as tags, tanto pode ser o nome de uma cor (RED, BLUE, BLACK, etc...) ou a codificação da cor em representação hexadecimal (#FF00FF, #C42A1F, etc...).

� 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”>

� 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

47


Unidade 2

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.

Você Sabia?

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.

48


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 significam. Você aprenderá tudo sobre elas mais adiante. Este é só um exemplo simples para você começar.

<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>

49


Unidade 2

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 esta extensão. Por isso, crie desde já o hábito de utilizá-la;

� use nomes simples e curtos. Não inclua espaços ou caracteres especiais (marcadores, letras acentuadas, etc.). Use apenas letras e números.

Aqui vai uma dica, se você for utilizar o bloco de notas do Windows para editar o exemplo: no momento de gravar o arquivo, coloque o nome e extensão entre aspas duplas, por exemplo: “meuarquivo.html”. Este processo evitará que o arquivo seja gravado com a extensão txt (meuarquivo.html.txt), confusão ocasionada conforme a configuração do sistema operacional.

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.

Uma outra forma de abrir o arquivo é dar dois cliques sobre ele. Abrirá o navegador que estiver configurado como navegador padrão.

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 o exemplo apresentado acima. Verifique se todas as tags têm tags de

50


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

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 se esqueça de verificar também 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?

51


Unidade 2

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.

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>

52


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>






Lembre-se de que todas as tags acima devem estar dentro da BODY.

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 a seguir. Vamos testar?

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

53


Unidade 2

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

Figura 2.3 – Visualizando exemplo de não aninhamento de tag.

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

<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1><H2> 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>, e oferecem o seguinte resultado:

Figura 2.4 – Visualizando exemplo de aninhamento de tag.

54


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.

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 tais 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.

55


Unidade 2

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.

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 ideias à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> é utilizada 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”>

A utilização de aspas duplas nos valores dos atributos é opcional, porém é considerada uma boa prática.

Neste caso, você insere uma linha de altura 70 (pixels), comprimento 7 (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 afirmativo, 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 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:

61


Unidade 2

<DIV ALIGN=”LEFT”>

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

<p>Testando à esquerda</p>

</DIV>

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 à <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.

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 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 desta forma de alinhamento arbitrário, a tag <PRE> muda o tipo de caractere para uma fonte monoespaçada.

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.

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


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(a) aluno(a), 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 quê?

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.

67


Unidade 2

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. São Paulo: 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 e criar as tags para listas.

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

� Fazer 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 aprenderá a 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 listas 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 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 sequencial. 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


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.

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:

<OL>

<LI>item 1

<LI>item 2

<LI>item 3

<LI VALUE=”55”>item 55

<LI>item 56

</OL>

75


Unidade 3

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 cada 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>

E visualize-o no navegador:

Figura 3.5 – Exemplo no navegador de uma lista com marcadores.

76


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.

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>

77


Unidade 3

Este exemplo é assim visualizado:

Figura 3.6 – Exemplo no navegador de uma lista personalizada com marcadores.

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.

78


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.

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:

79


Unidade 3

Figura 3.8 – Exemplo no navegador de uma lista de glossário.

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çã

<LI>laranja

<LI>goiaba

</MENU>

80


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.

Figura 3.9 – Exemplo no navegador de uma lista de menu e lista de diretório.

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, 1998).

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 desta 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.

81


Unidade 3

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.

82


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?

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.

83


Unidade 3

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:

1. Documentos básicos

2. Documentos avançados

84


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>

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


85


Unidade 3

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>

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

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.

86


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!!

Visualize o exemplo acima no seu navegador:

Figura 3.13 - Exemplo de comentário.

87


Unidade 3

Atividade de autoavaliação

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

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

88


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

Até agora, produzimos 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.

89


Unidade 3

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.

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

Arquivo a ser carregado quando o link é selecionado

Tag de abertura

Texto que será selecionado

Tag de fechamento

90


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.

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 chamada de indicador) seja o destino de um link.

91


Unidade 3

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.

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.

92


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.

Lembre-se de 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 outro exemplo:

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

Enquanto o alvo do link fica desta forma:

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

93


Unidade 3

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.

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.

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á

94


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.

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.

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.

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.

95


Unidade 3


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.

Para citar uma determinada parte de 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.

96


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/.

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 disto, 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>, conforme já foi estudado na unidade 2.

97


Unidade 3

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

Síntese

Amigos, mais uma unidade vencida! Nesta unidade, aprendemos como criar os mais diferentes tipos de lista. 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.

98


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>


Leia com atenção e resolva a seguinte atividade de autoavaliaçã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

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


<http://www.clem.ufba.br/tuts/html/c07.htm>

<http://www.criarweb.com/manuais/2/>

4UNIDADE 4

Mais formatação em HTML


� 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 Caractere

Seção 2 Caracteres Especiais

Seção 3 Formatação do Texto

Seção 4 As Tags <blink> e <marquee>

Seção 5 Endereços

100



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(a) 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 Caractere

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 caractere 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 à ideia 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.

101


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. Estes 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 caractere 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:

102


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 sequê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, mostrada 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 caractere lógico, cada

103


Unidade 4

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:

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.

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 caractere, como nos exemplos a seguir:

104


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

105


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 caractere, então você não poderá usar esse caractere no seu arquivo em HTML. Isso se aplica também a caracteres que talvez você esteja acostumado(a) a usar, como travessões, por exemplo.

Mas, espere um instante! Imagino o que você está pensando: se eu posso digitar um caractere, como um marcador ou um ‘a’ acentuado no meu teclado através de uma sequê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 caractere (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 outra pessoa estiver lendo o seu arquivo HTML na internet com esse caractere especial, é provável que acabe vendo outro caractere na tela, o que costumamos chamar de “lixo”. Ou, dependendo de como a sua página for apresentada na internet, o caractere poderá perder-se 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 caractere. 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.

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

106


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 sequências de escape, indicadas por três partes: um ‘&’ inicial, um ‘número’ ou ‘cadeia de caracteres’ correspondente ao caractere 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 caractere e acentuado na tabela ASCII.

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

107


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 caractere < (menor que). Para um navegador HTML, esse caractere significa “este é o início de uma tag”. Como nesse contexto o caractere < (menor que) não representa o início de uma tag, o navegador ficará confuso. Outro problema trata da acentuação da palavra “então”, que deverá ser substituída pela sequência correspondente. 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&atiloe;0</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 Caractere

< <

108


> >

& &

" “

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

Entidade Caractere

á á

â â

à à

ã ã

ç ç

é é

ê ê

í í

ó ó

ô ô

õ õ

ú ú

ü ü

Entidade Caractere

Á Á

Â Â

À À

Ã Ã

Ç Ç

ISO Latin1: ASCII com extensões para idiomas Europeus

109


Unidade 4

É É

Ê Ê

Í Í

Ó Ó

Ô Ô

Õ Õ

Ú Ú

Como vemos, as sequê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 §.

110


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 caractere 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 caractere, 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 valores desse atributo variam de 1 a 7, e o valor 3 corresponde ao tamanho padrão. O modelo é o seguinte:

111


Unidade 4

<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>

112


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>

113


Unidade 4

Acompanhe a visualização:

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.

114


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. Os navegadores mais conhecidos também já implementam essa funcionalidade.

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 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

115


Unidade 4

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:

<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:

116


<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:

Figura 4.9 - Exemplo de visualização de formatação de cores em textos.

117


Unidade 4

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 - As Tags <Blink> e <Marquee>

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

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.

118


Um exemplo seria:

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

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, 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?

119


Unidade 4

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 se 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”

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”

120


Veja o exemplo de uso de 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 para) o caminho da direita para a esquerda, conforme o resultado nos dois navegadores abaixo:

Figura 4.11 - Exemplo do uso da tag MARQUEE – Etapa 1.

Figura 4.12 - Exemplo do uso da tag MARQUEE – Etapa 2.

121


Unidade 4

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 suas dúvidas sobre a entrega de seu material para

<address>[email protected]</address>

No navegador, fica assim:

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.

122



Caro aluno, leia o enunciado com atenção e responda à 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, crie um link (vínculo) com a página MinhaLista.html. Verifique depois o resultado no seu navegador, iniciando em index.html.

Saiba mais

Aprofunde-se sobre formatação em HTML, consultando as seguintes referências:

WATRALL Ethan, SIARTO Jeff. Use a cabeça Web-Design. São Paulo: Alta Books, 2009

<http://www.juliobattisti.com.br/tutoriais/ericogoncalves/htmlbasico004.asp>

<http://www.vas-y.com/dicas/curso/html/2_3.htm>

5UNIDADE 5

Uso de Imagens, Painéis de Fundo 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.

� Criar vínculos com as imagens.

� Aprender a usar imagens para painéis de fundo lado a lado.

� 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 Arquivos de Áudio

124


Para início de estudoO 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 mais utilizadas em páginas web têm as terminações: .bmp, .jpg, .gif ou .png.

Cada extensão de imagem possui suas vantagens e desvantagens. Observe:

As imagens com terminação .bmp: têm tamanho muito grande, o que gera lentidão no carregamento das páginas e não permite transparência. A vantagem deste tipo de imagem é a facilidade de edição sem a perda da qualidade, porém, com a evolução tecnológica, está sendo bem pouco utilizada.

O formato jpg (ou jpeg) pode trabalhar com esquema de cores de 24 bits, aceitando assim 16,8 milhões de cores. A qualidade da imagem é boa, mas também não permite transparência. O tamanho é bem reduzido, se comparado com o .bmp, mas ainda é grande para páginas que utilizam muitas imagens.

Os gifs trabalham com apenas 256 cores, de forma que o tamanho é o menor de todos os formatos, permitindo também transparência e animações. É um dos formatos mais utilizados na web justamente pela rapidez em carregar as imagens. Porém o fato de utilizar apenas 256 cores deixa a qualidade da imagem bem limitada.

O .png é interessante, porque consegue trabalhar com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores, suportando também a transparência e com tamanho menor que o formato .jpg, pois utiliza um algoritmo mais eficiente para compressão da imagem. É um pouco maior que o .gif, por causa da qualidade da imagem, que é bem superior. Atualmente, é um formato bastante utilizado.

Hoje em dia, existem 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.

125


Unidade 5

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.

Graças aos formatos .jpg, .gif e .png, é possível utilizar imagens em diferentes aplicações, até mesmo na definição de layout das páginas. A escolha do tipo de imagem não pode ser arbitrária, devem ser levadas em consideração todas as vantagens e desvantagens, principalmente no que se refere à qualidade e tamanho.

Uma boa prática é utilizar .png ou .jpg para imagens fotográficas e .gif para imagens criadas em computador ou desenhadas (ícones, botões, etc...).

Os formatos de imagem explicados aqui são os mais utilizados e compatíveis com os diversos tipos de navegadores, porém existem vários outros tipos de imagens, cada um com características e finalidades diferentes.

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 onde pode ser encontrada a

126


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 na página da Unisul Virtual, devemos usar o URL:

https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif

Então o código ficaria assim:

<IMG SRC= “https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif”>

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.

127


Unidade 5

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 se encontra dentro da pasta onde está gravado o código HTML acima. Vamos visualizar:

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”>

128


Para um arquivo de imagem que esteja localizado em 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.

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.

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.

129


Unidade 5

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:

<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 consiga 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= “https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif” alt= “Ícone Unisul Virtual”>

130


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.

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 por pessoas que têm deficiências visuais. Nesses casos, sem o atributo ALT, o conteúdo das imagens seria sempre um mistério.

131


Unidade 5

Desta 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:

<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”>

132


Vamos visualizar o resultado no seu navegador?

Figura 5.6 – Exemplo de imagem com atributos WIDTH e HEIGHT.

Uma das vantagens de se usarem 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.

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 se esquecendo de criar uma imagem com o nome de sol.gif em um editor de imagens. O resultado deve ser este:

133


Unidade 5

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”>

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.

134


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

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:


135


Unidade 5

<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:


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.

136


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:

<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:


Para ter duas imagens, uma em cada margem, numa mesma

137


Unidade 5

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.

138


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”>

139


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”>

140


Neste segundo texto, a primeira imagem surgirá 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 à direita foi colocada uma borda com espessura 3.

141


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>

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

142


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.

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

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

143


Unidade 5

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>

Deste modo, aparecerá no navegador:

Figura 5.20 - Exemplo do uso de imagem sem borda.

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

144


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 à 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.

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

145


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 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, a qual 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”>

146


O resultado é visualizado assim:

Figura 5.22 - Exemplo de painel de fundo.

Caso o desenvolvedor necessite colocar uma imagem de fundo sem que a mesma seja repetida, utilizará técnicas de folhas de estilo (CSS), que permitem a configuração visual de toda a página. O CSS será abordado, ainda neste material, nas próximas unidades.

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 para as seguintes sugestões (LEMAY, 1998):

147


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.

148


Seção 5 - Arquivos de Áudio

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”>

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

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

149


Unidade 5

Onde:

� Em "nome da música", você coloca o nome e caminho do arquivo a 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.

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.

150


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, PNG ou JPG 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.

151


Unidade 5


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

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

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

154



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 isto 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 adiante!

155


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, vamos 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 diferente 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.

156


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

157


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.

158


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:


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

159


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? Isto é simples. Basta definir uma célula com 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 deste 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.

160


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.

161


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

162


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>

163


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”

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>

164


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:


<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>

165


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:

166


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>

167


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.


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

168


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:


<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>

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.

169


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

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>

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 mostrada anteriormente.

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.

170


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.

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>

171


Unidade 6

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.

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:

172


� 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:

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:

<TABLE BORDER=”1” width=”50%”>

<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>

173


Unidade 6

Observe o resultado em seu navegador:

Figura 6.14 – Exemplo de tabela usando 50% da janela e alterando largura da 2ª coluna.

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%:

<TABLE BORDER= “1” width= “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.

174


Atributos de espaçamentoComo você já verificou, existem dois atributos que permitem o controle de espaçamento em tabelas:

� 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.

175


Unidade 6

Vamos também alterar, agora, 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.

176


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 das frutas, 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.

177


Unidade 6

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.

178


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.

Veja este outro exemplo:

179


Unidade 6

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

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:

180


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

181


Unidade 6

Síntese

Para melhor auxiliar você nos seus estudos, segue abaixo 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>

Borda BORDER=”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>

182


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=”NÚMERO” <COLSPAN=”2”>texto</TD>

Linhas que ocupa

ROWSPAN=”NÚMERO” <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.


Leia com atenção o enunciado seguinte e resolva a atividade programada para a sua autoavaliação.

1. Caro(a) aluno(a), 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 autoavaliação.

183


Unidade 6

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.

Saiba mais

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

<http://www.criarweb.com/artigos/64.php>

<http://www.juliobattisti.com.br/tutoriais/ericogoncalves/htmlbasico010.asp>

<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

186



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 esta 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.

187


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

188


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 estes atributos mais adiante.

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=”índice1.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>

Conforme o exemplo acima, a parte FRAMESET define a divisão da página em “quadros”. Neste caso, a página será

189


Unidade 7

dividida em duas colunas, sendo a primeira com 20% do tamanho da tela e a segunda coluna com os restantes 80% da tela.

Neste exemplo, não foi configurado o número de linhas (ROWS) do FRAMESET. Como veremos a seguir, as composições de linhas e colunas seguem um padrão diferenciado, de forma que não é possível a definição dos dois atributos (ROWS e COLS) simultaneamente.

Observe que, dentro da formatação de FRAMESET, temos os FRAME SRC, os quais fazem referências às páginas que serão mostradas nos frames definidos.

O caminho das páginas a serem inseridas como frames (no exemplo: índice1.html e texto.html) seguem a mesma padronização para a inserção de imagens; neste caso, os dois arquivos estão no mesmo diretório do frame document (arquivo que contém a tag FRAMESET).

Assim, no código descrito acima, a página índice1.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 índice1.html é este:

<HTML>

TESTANDO FRAME... 20%

</HTML>

E o conteúdo do arquivo texto.html é este:

<HTML>


</HTML>

Assim, o resultado apresentado no navegador será:

190


Figura 7.2 – Exemplo de visualização de um FRAME.

A formatação de frames inclui também uma parte NOFRAME, a qual é 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 à esquerda faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%):

191


Unidade 7

<HTML>

<HEAD><TITLE>Assunto X</TITLE></HEAD>


<FRAME SRC=”índice1.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 índice1.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.

192


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!

193


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 deem 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.

194


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>

195


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>

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á ter, portanto, um valor associado, e esses valores devem estar separados por vírgula. Veja a sintaxe:

196


(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. Este 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 serem somados 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.

197


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>


FIgura 7.9 – Exemplo da tela dividida em 3 FRAMES em linha.

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”.

198


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:

Figura 7.10 – Exemplo do uso de FRAMES em linha com o FRAME central mais largo.

199


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.

200


Figura 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:

Figura 7.12 – Exemplo da tela dividida em 2 FRAMES em coluna.

201


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>

202



Figura 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 este atributo, então, o valor padrão (com bordas) será usado. O modelo é o seguinte:

(FRAMEBORDER=”yes”|”no”)

Eis um exemplo:

<FRAMEBORDER=”no”>

203


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:

Figura 7.14 – Exemplo de FRAME sem borda.

204


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”>

205


Unidade 7

Seção 4 – Atributos de FRAMEAté este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME).

A tag <FRAME> define qual 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 separadamente.

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=”índice.html”>

206


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 Este 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=”índice.html” MARGINWIDTH=”3”>

207


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=”índice.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=”índice.html” SCROLLING=”yes”>

208


Para dispor o frame sem a barra de rolagem:


<FRAME SRC=”índice.html” SCROLLING=”no”>

<FRAME SRC=”apresenta.html” NAME=”principal”>

</FRAMESET>

A barra de rolagem de um frame fica sempre à direita. Não é possível, atualmente, mudar esta característica.

NORESIZENORESIZE é também opcional. Este 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=”índice.html” NORESIZE>

Aqui está um exemplo de elemento FRAME acompanhado de alguns atributos:

209


Unidade 7

<HTML>

<HEAD>

<TITLE> Frame Document </TITLE>

</HEAD>

<FRAMESET COLS=”200,*,*”>

<FRAME SRC=”Exemplo1.html”>

<FRAME SRC=”Exemplo2.html” NAME=”índice” MARGINWIDTH=”3”

MARGINHEIGHT=”4” SCROLLING=”yes” NORESIZE>

<FRAME SRC=”Exemplo3.html”>

</FRAMESET>

</HTML>


Figura 7.15 – Exemplo de atributos na tag FRAME.

210


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>

211


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:

Figura 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:

Figura 7.17 – Exemplo do uso da tag NOFRAMES quando o navegador não aceita FRAME.

212


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.

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


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

213


Unidade 7

2 – Quais as vantagens de se utilizarem frames em um site? Vamos discutir sobre isso na ferramenta FORUM.

3 - É importante criarmos tags NOFRAME? Por quê?

Saiba mais


<http://www.icmc.usp.br/ensino/material/html/>

<http://www.criarweb.com/artigos/131.php (Frames em HTML)>

<http://www.apostilaspdf.com/apostila-manual-criacao-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.

� Identificar elementos/ atributos obsoletos (deprecated).

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

Seção 6 Elementos e atributos obsoletos

216



Nesta unidade, não vamos abordar as tags HTML, e sim, 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. Ainda: conheceremos alguns elementos e atributos que já estão obsoletos e que devem ser evitados na programação eficiente.

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 com que você tinha de 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 tornar 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 tal situação confusa, saiba que não é o(a) único(a). Os autores e projetistas estão tentando esclarecer

217


Unidade 8

essa confusão e tomar decisões com base no aspecto visual que desejam 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

218


nesses navegadores. A maioria dos navegadores é composta 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 como usar um HTML 4?

Pesquise no site: <http://www.clem.ufba.br/tuts/html/c16.htm>.

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 de 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. Analise-as na sequência.

219


Unidade 8

Redija com clareza e objetividade

Uma 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 ideias 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.

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 de 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.

220


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 percorrê-lo 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 autossuficiente. Por exemplo: se o leitor cair em uma das páginas de seu site, a qual depende de uma página que ele não visitou, deve ser dado um destaque nessa 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 as quais 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.

221


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 esta 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,

222


à 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 de 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 os quais você, por ser o autor, muitas vezes não percebe. Uma simples revisão poderá aprimorar as suas páginas, facilitando a leitura e navegação.

223


Unidade 8

Atividade de autoavaliaçã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 este exemplo? Procure elaborar novamente esta seção, de forma a destacar melhor os pontos principais do texto e o layout da página. Não se esqueça de revisar o português e fazer os links, como veremos abaixo:

Figura 8.1 – Como construir um website.

O código HTML, para ser utilizado no exercício de autoavaliação, encontra-se na MIDIATECA. Publique o seu resultado em EXPOSIÇÃO.

Fonte: LE MAY, 2001.

224


Resposta:

225


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

226


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 leem na Internet?

Pesquise o assunto no site:

<http:// www.comunidade.sebrae.com.br/intranet/Downloads/Downloads_GetFile.aspx?id=5101>.

227


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, na sequência, orientações 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, como o leitor saberá quais informações encontrará 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. 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

228


dos vínculos, os quais conduzirão a outras páginas. Ao incluir um vínculo, verifique se este não está interrompendo o fluxo da página.

A ideia de inclusão de vínculos no meio do texto torna-o autossuficiente. 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 em que estão interessados.

Uma maneira de saber se você esta incluindo vínculos no texto de 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”. Esta 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 isto:

Selecione este link para obter informações sobre o uso de vínculo.

229


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. Este 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.

230


Existem algumas categorias de vínculos úteis em páginas da web. Veja na sequência.

� 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.

231


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. Isto 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.

232


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 se 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.

� Frequentemente você pode apresentar a página inteira na tela. Desta forma, as informações contidas nessa página podem ser facilmente consultadas pelo leitor.

233


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 de 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. Estas 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.

234


� A data da última revisão realizada na página. Isto é especialmente importante no caso de páginas alteradas com muita frequê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>

235


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 os quais tenham navegadores que ofereçam suporte ao URL mailto, simplesmente selecionar o vínculo e enviar uma correspondência para a pessoa responsável pela página, sem precisar digitar novamente o endereço em seus programas de correio eletrônico.

Seção 6 - Elementos e 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, preocupavam-se 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, surgiu a necessidade de criar páginas mais interessantes e, ao mesmo tempo, mais complexas.

O design 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 comportasse como uma linguagem de design gráfico.

236


As páginas passaram a ter uma codificação mais complexa e de difícil manutenção e, por consequência, trouxeram problemas de exibição a certos navegadores.

Foi aí 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.

Algumas tags obsoletas do HTML 4.0. são:

TAG HTML Propriedade CSSCenter text-align:centerB font-weight:boldU font-style:italicFont font-family:font name

HTML Atributo Propriedade CSSalign text-alignbackground background-image:url(image)bgcolor background-colorhspace paddingvspace paddingsize font-size:

Exemplo :

align = left|center|right|justify

Exemplo Obsoleto:

<H1 align=“center”> Cabeçalho Centralizado </H1>

Exemplo utilizando CSS:

<HEAD>

<STYLE type=“text/css”>

237


Unidade 8

H1 { text-align: center}

</STYLE>

<BODY>

<H1> Cabeçalho Centralizado </H1>

Síntese

As principais normas para o projeto e a elaboração de páginas da web, apresentadas nesta unidade, são destacadas a seguir.

� 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.

� 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.

238



Leia cada enunciado com atenção e responda às 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>

� <www.wikipedia.br>

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:

<http://www.unesp.br/prograd/PDFNE2003/Um%20ambeinte%20de%20aprendizagem.pdf> (Construção de páginas web: depuração e especificação de um ambiente de aprendizagem)

<http://www.abraweb.com.br/site/colunistas.php?c=27> (O valor de um projeto de página web)

9UNIDADE 9

Folhas de Estilo


� Definir folhas de estilos.

� Compreender como e por que utilizar folhas de estilos em cascata.

� Aprender 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

240



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 ideia do que seja. 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 mesmo, já tem uma noção a respeito do assunto: do que se trata, etc. Sabendo o que isto significa, podemos começar o nosso estudo de folhas de estilo.

241


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 de resolver, tendo em consideração o significado de cada tag.

Este conceito perfeitamente racional era muito adequado enquanto o objetivo das páginas se limitava à escrita e à 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 ideia 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 contraindicaçõ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

242


os aspectos estilísticos. Este contexto conduziu o HTML, no final da década de 1990, 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/Mozila, Microsoft Internet Explorer, Opera, Google Chrome, etc...

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 carregam mais rápido 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.

243


Unidade 9

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 autossuficiente, sem depender da folha de estilo.

As folhas de estilos permitem ganhar tempo e flexibilidadeO que é interessante na ideia 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) 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 frequência e são muito mais fáceis de corrigir.

A facilidade com que as alterações são feitas dá uma maior flexibilidade ao website e melhoram o seu desempenho. As páginas ficam simultaneamente mais ricas e mais leves.

244


O “mecanismo” de cascataO termo cascata se refere à sequê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 de que é preciso testar tudo de forma exaustiva, em todos os navegadores relevantes, para não ter surpresas desagradáveis.

245


Unidade 9

Seção 2 - A sintaxe CSS

Agora você está pronto(a) 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 caractere : (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}

246


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> (isto deve estar no cabeçalho do documento HTML). Este 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”>.

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.

247


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 à 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>

248


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.

249


Unidade 9

2. Folha de Estilos InternaAs folhas de estilos internas devem ser utilizadas, 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:

250


<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 desejamos 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>

251


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 caractere “;” (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>

252


Observe como fica no navegador:

Figura 9.5 – Exemplo de folha de estilo com mais de uma definiçã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>

Se o navegador suporta CSS, ele entenderá a aplicação da folha de estilo à tag mencionada.

253


Unidade 9

Você Sabia?

Os Estilos

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>

A tag LINK associa um arquivo de folha de estilo externa ao documento corrente. Desta forma, um estilo padronizado para um site pode ser determinado pelo gerente, por exemplo, e aplicado aos documentos criados por um autor de uma

254


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.

Mais uma vez, o caminho dos arquivos das folhas de estilo deve estar no mesmo diretório da página, ou ser definido o caminho absoluto ou relativo.

Para poder testar este tipo de inserção de folhas de estilho, crie um arquivo texto (pode ser editado no próprio bloco de notas do Windows) chamado “meu_estilo.css”. Em seu conteúdo, escreva as formatações dos exemplos.

Sempre que alterar o valor de um estilo, basta salvar o arquivo CSS e atualizar (F5) a página, sem a necessidade de nenhuma alteração no arquivo HTML.

Dentro do mesmo arquivo, pode haver a definição de layout de várias tags, classes de forma que, com a abertura e fechamento das chaves {}, delimitam uma declaração de outra.

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”.

255


Unidade 9

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.

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:

256


<html>

<head>


p.direita { text-align: right }

p.centro { text-align: center }

</style>

</head>

<body>

<p class=”direita”> Este parágrafo está alinhado à 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:

257


Unidade 9

<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:

<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>


258


Figura 9.7 – Exemplo de tag de classe em tags diferentes.

Perceba que a definição de classes genéricas, que pode ser utilizada em qualquer tag, necessita obrigatoriamente um ponto (.) antes do nome da classe.

Essa metodologia é bem interessante, pois existe a possibilidade de reaproveitamento de estilos, sempre que for necessário utilizar a referida formatação.

O critério de nomenclatura das classes é o seguinte:

Nome_da_tag.nome_da_classe .nome_da_classeUtilizado apenas para todas as tags definidas

Utilizado em qualquer tag a que se queira aplicar a classe

p.direta .centro

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.

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:

259


Unidade 9

<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 vermelha. </p>

</body></html>

Visualize:

Figura 9.8 – Exemplo de tag de ID.

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>:

260


<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 vermelha 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.

Se quisermos que a regra se aplique a qualquer tag que tenha o id=“para1”, basta escrevê-la na forma seguinte:

261


Unidade 9

#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 sequê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:

p

{

text-align: center;

/* Isto é um comentário */

color: black;

/* O MSIE 5 não reconhece os comentários!!! */

font-family: arial

}

262


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.

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

}

263


Unidade 9

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

}

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:

264


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

Visualização:

Figura 9.10 – Exemplo de herança de estilos.


Unidade 9 265

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>

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.

266


Síntese

Nesta unidade, aprendemos a criar estilos para um documento HTML.

Através da utilização das folhas de estilo, você pode definir desde 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.

Apesar de os navegadores atuais 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:

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

267


Unidade 9


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.

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://pt-br.html.net/tutorials/css/>

� <http://www.htmlhelp.com/reference/css/structure.html> (CSS structure and rules)

� <http://www.maujor.com/> (CSS para web design)

268


� <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)

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.linhadecodigo.com.br/artigo.aspx?ID=82>.

UNIDADE 10

Criação de Formulários


� Criar um formulário.

� Aprender 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

270



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.

271


Unidade 10

Seção 1 - Criando um formulário

Um formulário é uma seção da página HTML que contém elementos os quais permitem ao leitor introduzir dados numéricos, textos curtos, textos extensos, selecionar elementos em uma lista com várias escolhas, responder facilmente com respostas do tipo “sim” ou “não”, selecionar rapidamente uma opção em um pequeno grupo, etc.

Nesta unidade, você aprenderá a criar layouts do formulário

A criação de um formulário envolve, em geral, duas etapas independentes:

1) a criação do layout do formulário;

2) a criação de um programa de script no servidor para processar as informações que você obtém a partir de um 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.

272


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-se grande quantidade de dados e os mesmos não são visualizados pelos usuários;

� GET - os dados inseridos fazem parte da URL associada à consulta enviada para o servidor. Suporta até 128 caracteres, e os dados podem ser vistos pelos usuários na URL.

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

273


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. Normalmente, 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>

274


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. Todos os elementos do formulário dão suporte às configurações das folhas de estilo (CSS). 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”>

275


Unidade 10

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.

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.

O exemplo seguinte mostra um formulário simples com dois elementos input:

276


<FORM action=”processar.php” method=”post”>

Primeiro nome: <INPUT type=”text” name=”primeiro_nome”><br>

Último nome: <INPUT type=”text” name=”último_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 ideia 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”>

Gera-se, assim, um campo deste tipo:

277


Unidade 10

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>

278


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>

A visualização deste exemplo é a seguinte:

279


Unidade 10

Figura 10.5 – Exemplo de caixa de texto com campo escondido.

Em alguns casos, à 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 conhecida 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:

280


<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, em número de caracteres.

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>

281


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.

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.

282


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>

283


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.

284


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.

� 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:

285


Unidade 10

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

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.

Vejamos qual é o efeito produzido por esses atributos:

286


<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:

287


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 esta 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:

288


estação=1

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.

289


Unidade 10

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:

Sexo=”feminino”

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 de 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=”rádio” name=”sexo” value=”masculino”> Masculino<br>

<input type=”rádio” name=”sexo” value=”feminino” checked> Feminino

</form>

Vejamos o efeito:

Figura 10.15 - Exemplo de botão de seleção selecionado.

290


Seção 5 - Caixas de validação

As caixas de validação (“checkboxes”) ou verificação devem ser usadas sempre que desejamos 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.

291


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)

292


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 deste botão é o seguinte:

Figura 10.18 - Exemplo de botão de envio.

Quando o usuário clicar sobre o botão “Enviar”, as respostas 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:

293


Unidade 10

<form name=”entrada” action=”página2.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”>

294


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 frequentemente. 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ó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 frequente 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.

295


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ê deve agora construí-lo, para ver se realmente entendem bem os temas sobre formulários.

Nome

E-mail

Cidade

Sexo

Homem

Mulher

Frequê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.

296


A seguir, também mostraremos o código fonte deste formulário, importante para o seu olhar, 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:

297


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.

Estudos mais avançados de Java Script serão abordados em outras disciplinas do curso. 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=”botão1” value=”Teste a Informação” onClick=”Enviar(this.form)”></form>

298


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á:

299


Unidade 10

Figura 10.23 – Resultado da ação do botão.

O estudo de Javascript não faz parte da nossa disciplina, por isso, seguem, abaixo, alguns links para você aprofundar seu estudo:

• <http://www.javascript-tutorial.com.br/>

• <http://www.cm-braganca.pt/document/448112/503209.pdf>

• <http://www.mozilla.org/js/>

• <http://pt.wikipedia.org/wiki/JavaScript>

Síntese

Caro(a) aluno(a)!

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, entre eles: Javascript, Php, Asp, etc.

300


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


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 se 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 HTMLcomJavaScript)

� <http://www.criarweb.com/artigos/93.php?manual=2> (Formulários HTML)

Para concluir o estudo

Caro(a) aluno(a)!

Conhecer HTML é imprescindível para qualquer profissional que pretenda trabalhar com desenvolvimento web, sendo este 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á-lo(a) 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 a página, como por exemplo, Php, Asp, Javascript, etc. Por isso, desejamos que você não pare seus estudos aqui! Siga 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.


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.

304


Sites de Referência

• <http://www.abcdohtml.hpg.ig.com.br/html_intro.htm>

• <ht tp://www.intergate.com.br/supor te/glossar io/glossar io_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 autoavaliação

308


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.


2) Resposta Pessoal.



Biblioteca Virtual

Veja, a seguir, os serviços oferecidos pela Biblioteca Virtual aos alunos a distância:

� Pesquisa a publicações online www.unisul.br/textocompleto

� Acesso a bases de dados assinadas www. unisul.br/bdassinadas

� Acesso a bases de dados gratuitas selecionadas www.unisul.br/bdgratuitas

� Acesso a jornais e revistas on-line www. unisul.br/periodicos

� Empréstimo de livros www. unisul.br/emprestimos

� Escaneamento de parte de obra1

Acesse a página da Biblioteca Virtual da Unisul, disponível no EVA e explore seus recursos digitais.

Qualquer dúvida, escreva para [email protected]

1 Se você optar por escaneamento de parte do livro, o sumário da obra será enviado primeiramente para que você possa escolher os capítulos que deseja solicitar a reprodução. Lembre-se que para não ferir a Lei dos direitos autorais (Lei 9610/98), até 10 % do total de páginas de um livro podem ser reproduzidos.

80771551 linguagens-de-programacao-i-unisul-livro-completo-2010

Documents

Transcript of 80771551 linguagens-de-programacao-i-unisul-livro-completo-2010