Académique Documents
Professionnel Documents
Culture Documents
Linguagens de Programao I
Disciplina na modalidade a distncia
Crditos
Universidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia Reitor Unisul Ailton Nazareno Soares Vice-Reitor Sebastio Salsio Heerdt Chefe de Gabinete da Reitoria Willian Mximo Pr-Reitora Acadmica Miriam de Ftima Bora Rosa Pr-Reitor de Administrao Fabian Martins de Castro Pr-Reitor de Ensino Mauri Luiz Heerdt Campus Universitrio de Tubaro Diretora Milene Pacheco Kindermann Campus Universitrio da Grande Florianpolis Diretor Hrcules Nunes de Arajo Campus Universitrio UnisulVirtual Diretora Jucimara Roesler Equipe UnisulVirtual Diretora Adjunta
Patrcia Alberton Secretaria Executiva e Cerimonial Jackson Schuelter Wiggers (Coord.) Bruno Lucion Roso Marcelo Fraiberg Machado Tenille Catarina Assessoria de Assuntos Internacionais Murilo Matos Mendona Assessoria DAD - Disciplinas a Distncia Enzo de Oliveira Moreira (Coord.) Carlos Alberto Areias Franciele Arruda Rampelotti Luiz Fernando Meneghel Assessoria de Inovao e Qualidade da EaD Dnia Falco de Bittencourt (Coord.) Rafael Bavaresco Bongiolo Assessoria de Relao com Poder Pblico e Foras Armadas Adenir Siqueira Viana Assessoria de Tecnologia Osmar de Oliveira Braz Jnior (Coord.) Felipe Jacson de Freitas Jeerson Amorin Oliveira Jos Olmpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da Silva Priscila da Silva Rodrigo Battistotti Pimpo Gesto Documental Lamuni Souza (Coord.) Clair Maria Cardoso Janaina Stuart da Costa Josiane Leal Marlia Locks Fernandes Ricardo Mello Platt Secretaria de Ensino a Distncia Karine Augusta Zanoni Giane dos Passos
(Secretria de Ensino) (Secretria Acadmica)
Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtual Bruno Augusto Zunino Claudia Noemi Nascimento Dbora Cristina Silveira Ednia Araujo Alberto Francine Cardoso da Silva Karla F. Wisniewski Desengrini Maria Eugnia Ferreira Celeghin Maria Lina Moratelli Prado Mayara de Oliveira Bastos Patrcia de Souza Amorim Poliana Morgana Simo Priscila Machado Relacionamento com o Mercado Eliza Bianchini Dallanhol Locks Walter Flix Cardoso Jnior
Gerncia de Produo
Arthur Emmanuel F. Silveira (Gerente) Francini Ferreira Dias Design Visual Pedro Paulo Alves Teixeira (Coord.) Adriana Ferreira dos Santos Alex Sandro Xavier Alice Demaria Silva Anne Cristyne Pereira Diogo Rafael da Silva Edison Rodrigo Valim Frederico Trilha Higor Ghisi Luciano Jordana Paula Schulka Nelson Rosa Patrcia Fragnani de Morais Multimdia Srgio Giron (Coord.) Cristiano Neri Gonalves Ribeiro Dandara Lemos Reynaldo Fernando Gustav Soares Lima Srgio Freitas Flores Portal Rafael Pessi (Coord.) Luiz Felipe Buchmann Figueiredo Comunicao Marcelo Barcelos Andreia Drewes Carla Fabiana Feltrin Raimundo Produo Industrial Francisco Asp (Coord.) Ana Paula Pereira Marcelo Bittencourt
Alessandro Alves da Silva Andra Luci Mandira Cristina Mara Shauert Djeime Sammer Bortolotti Douglas Silveira Fabiano Silva Michels Felipe Wronski Henrique Janaina Conceio Jean Martins Luana Borges da Silva Luana Tarsila Hellmann Maria Jos Rossetti Miguel Rodrigues da Silveira Junior Monique Tayse da Silva Patricia A. Pereira de Carvalho Patricia Nunes Martins Paulo Lisboa Cordeiro Rafaela Fusieger Rosngela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt
(Coord. Ps)
Carolina Hoeller da S. Boeing Silvana Souza da Cruz (Coord. Grad.) Ana Cludia Ta Cristina Klipp de Oliveira Eloisa Machado Seemann Flvia Lumi Matuzawa Gabriella Arajo Souza Esteves Giovanny Noceti Viana Jaqueline Cardozo Polla Lis Air Fogolari Lygia Pereira Luiz Henrique Milani Queriquelli Marina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes Correa Ngila Cristina Hinckel Roberta de Ftima Martins Sabrina Paula Soares Scaranto Viviane Bastos
(Coord. Ext/DAD)
Gerncia de Logstica
(Gerente)
Jeferson Cassiano A. da Costa Andrei Rodrigues Logstica de Encontros Presenciais Graciele Marins Lindenmayr (Coord.) Ana Paula de Andrade Cristilaine Santana Medeiros Daiana Cristina Bortolotti Edesio Medeiros Martins Filho Fabiana Pereira Fernando Oliveira Santos Fernando Steimbach Marcelo Jair Ramos Logstica de Materiais Carlos Eduardo D. da Silva (Coord.) Abrao do Nascimento Germano Fylippy Margino dos Santos Guilherme Lentz Pablo Farela da Silveira Rubens Amorim
Gerncia de Marketing
Fabiano Ceretta (Gerente) Alex Fabiano Wehrle Sheyla Fabiana Batista Guerrer Victor Henrique M. Ferreira (frica)
Linguagens de Programao I
Livro didtico Reviso e atualizao Clavison Martinelli Zapelini Design instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres 3 edio revista e atualizada
Palhoa UnisulVirtual 2010
Copyright UnisulVirtual 2010 Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.
005.133 P59 Petry, Patrcia Gerent Linguagens de programao I : livro didtico / Patrcia Gerent Petry ; reviso e atualizao Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski Pacheco, Melina De La Barrera Ayres ; [assistente acadmico Sabrina Paula Soares Scaranto, Lygia Pereira]. 3. ed. rev. e atual. Palhoa : UnisulVirtual, 2010. 310 p. : il. ; 28 cm. Inclui bibliografia. 1. Linguagem de programao (Computadores). 2. HTML (Linguagem de programao 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. Ttulo.
Sumrio
Apresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 UNIDADE 1 Conceitos bsicos pertinentes linguagem de programao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 UNIDADE 2 Introduo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 UNIDADE 3 Listas e Vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 UNIDADE 4 Mais formatao em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 UNIDADE 5 Uso de Imagens, Painis de Fundo e Arquivos de Msica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 UNIDADE 6 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 UNIDADE 7 Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 UNIDADE 8 Desenvolvendo pginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . .215 UNIDADE 9 Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 UNIDADE 10 Criao de Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269 Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301 Referncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303 Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305 Respostas e comentrios das atividades de autoavaliao . . . . . . . . . . . . . . . . .307 Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309
Apresentao
Este livro didtico corresponde disciplina Linguagens de Programao I. O material foi elaborado visando a uma aprendizagem autnoma e aborda contedos especialmente selecionados e relacionados sua rea de formao. Ao adotar uma linguagem didtica e dialgica, objetivamos facilitar seu estudo a distncia, proporcionando condies favorveis s mltiplas interaes 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 expresso a distncia caracteriza, somente, a modalidade de ensino pela qual optou para sua formao, pois, na relao de aprendizagem, professores e instituio estaro sempre conectados com voc. Ento, sempre que sentir necessidade entre em contato. Voc tem disposio diversas ferramentas e canais de acesso, tais como: telefone, e-mail e o Espao 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 tcnica e pedaggica 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 provvel que j esteja familiarizado(a) com a maior parte do contedo deste livro. Com ele, vamos aprender a escrever pginas para a web. Talvez voc at j tenha realizado isto em alguma oportunidade. Muitos dos contedos provavelmente sero cansativos para voc. Mas no deixe de ler e participar, contribuindo assim para o bom andamento da Disciplina. Aqui voc encontrar tudo que precisa para criar uma pgina esttica na web. Digo esttica, porque, aqui, ainda no aprenderemos a tornar as pginas dinmicas, 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 pgina HTML, disponibiliz-la na web, criar vnculos, incluir imagens, etc. Este livro trata de detalhes tcnicos bsicos para a criao de um site na web. Voc aprender por que deve produzir um efeito em particular em uma pgina, quando deve us-lo e como. Neste livro, voc tambm encontrar dicas, sugestes e muitos exemplos de como estruturar sua apresentao, e no simplesmente o texto em cada pgina. Ou seja, o livro dar dicas para uma boa apresentao de um site na web. Trabalhar com desenvolvimento para a web gratificante, pois sabemos que uma das caractersticas mais interessantes da internet a oportunidade que todas as pessoas tm de disseminar informaes. Portanto disponibilizar informaes na web ser o nosso foco. Espero que voc se anime e se divirta bastante, enquanto estuda. Vamos l? Bons estudos! Professora Patrcia Gerent Petry
Plano de estudo
O plano de estudos visa a orient-lo(a) no desenvolvimento da disciplina. Possui elementos que o(a) ajudaro 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 construo de competncias se d sobre a articulao de metodologias e por meio das diversas formas de ao/mediao. So elementos desse processo:
o livro didtico; o Espao UnisulVirtual de Aprendizagem (EVA); as atividades de avaliao (complementares, a distncia e presenciais); o Sistema Tutorial.
Ementa
Apresentao das principais linguagens de programao e ferramentas para desenvolvimento de sites. Estudo de HTML. Desenvolvimento de sites estticos. Tabelas, frames, formulrios, imagens, som, vdeo e links. Estilos de fontes e definio de contedos. Implementao de sites e seus respectivos testes, avaliao e manuteno.
Carga Horria
A carga horria total da disciplina de 120 horas-aula, 8 crditos, incluindo o processo de avaliao.
Objetivos
Gerais Esta Disciplina tem por objetivo fornecer um estudo sobre a linguagem bsica utilizada para a criao de pginas na internet: HTML (HyperText Markup Language). Sero abordados os conceitos bsicos e avanados da linguagem. Especficos
Apresentar o funcionamento da web. Descrever os principais conceitos referentes HTML. Conhecer alguns editores de HTML. Definir o que so tags HTML. Identificar as tags e a estrutura geral de uma pgina HTML. Aprender a criar listas. Aprender a criar vnculos em HTML. Proporcionar formataes em pargrafos e textos HTML. Trabalhar com imagens em pginas da web. Utilizar tabelas. Construir frames. Proporcionar a criao de folhas de estilos. Elaborar um layout adequado para as suas pginas em HTML. Criar formulrios. Verificar elementos e atributos HTML obsoletos.
12
Linguagens de Programao I
Contedo programtico/objetivos
Os objetivos de cada unidade definem o conjunto de conhecimentos que voc dever deter para o desenvolvimento de habilidades e competncias necessrias sua formao. Neste sentido, veja, a seguir, as unidades que compem o livro didtico desta Disciplina, bem como os seus respectivos objetivos. Unidades de estudo: 10 Unidade 1 Conceitos bsicos pertinentes linguagem de programao 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 Introduo HTML Nesta unidade, voc iniciar a criao de pginas web. Aprender a estruturar o cdigo HTML e a utilizar os tags. Unidade 3 Listas e Vnculos Nesta unidade, voc criar diversos tipos de listas possveis. Saber como inserir um comentrio em seu cdigo HTML e como incluir vnculos entre o texto e as pginas da web. Unidade 4 Mais formatao em HTML Nesta unidade, voc distinguir os diferentes estilos de caracter. Saber como formatar e utilizar as tags <blink> e <marquee>.
13
Unidade 5 Uso de Imagens, Painis de Fundo e Arquivos de udio Nesta unidade, voc utilizar a tag <img> e seus atributos. Far referncia de hipertexto com imagem. Criar painis de fundo com imagens. Alm disso, sero abordadas sugestes para um melhor uso das imagens e tcnicas para manipulao de arquivos de udio. Unidade 6 Tabelas Nesta unidade, voc criar as tabelas e seus elementos bsicos: alinhamento da tabela e das clulas, dimenses e cor. Unidade 7 Frames Nesta unidade, voc construir frames com o elemento FRAMESET, aprender suas aplicaes e cuidados no uso. Far links com frames. Realizar a composio dos frames e distinguir os atributos de frameset e frame. Unidade 8 Desenvolvendo pginas eficientes Na unidade 8, voc desenvolver pginas eficientes. Saber como utilizar as extenses de HTML, como realizar o projeto e layout da pgina e como usar os vnculos. Nesta unidade, tambm encontrar sugestes de bons hbitos e conhecer atributos HTML em desuso. Unidade 9 Folhas de Estilo Nesta unidade, voc saber o que so as folhas de estilos e a sintaxe SCC. Aprender os tipos de definio de estilos e a ordem da cascata.
14
Linguagens de Programao I
Unidade 10 Criao de Formulrios Nesta unidade, voc criar formulrios. Usar campos de entrada de texto; selees - listas de opes; botes de rdio, caixas de validao e botes de envio. Voc ver, tambm, um exemplo completo de formulrio.
Verifique com ateno o EVA, organize-se para acessar periodicamente o espao da Disciplina. O sucesso nos seus estudos depende da priorizao do tempo para a leitura; da realizao de anlises e snteses do contedo; e da interao com os seus colegas e professor. No perca os prazos das atividades. Registre no espao 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.
15
Atividades obrigatrias
16
UNIDADE 1
Rever conceitos importantes sobre Internet. Conhecer HTML. Conhecer alguns editores de HTML existentes.
Sees de estudo
Seo 1 O que a Internet Seo 2 Como funciona a web Seo 3 Afinal o que HTML? Seo 4 Edio de documentos HTML
A World Wide Web (Teia de Alcance Mundial) o nome dado rede de servidores da Internet que mantm documentos hipermdia interligados entre si por hiperlinks os quais formam uma grande teia de informaes espalhadas pelo mundo. A WWW foi a grande responsvel pela popularizao da Internet, oferecendo um mtodo mais intuitivo de pesquisar e consultar informaes na grande rede.
18
Linguagens de Programao I
Existem muitos termos que tentam definir a Internet. Superestrada da informao, preferem os polticos. Rede de redes, insistem os cientistas. O certo que cada um desses grupos prefere ver a rede segundo seus prprios interesses. Para os polticos, uma nova fronteira de construo e investimentos coletivos um desafio. J os cientistas, rigorosos em suas definies, enxergam a virtude da Internet em conectar computadores de qualquer tipo em todo o globo. As vises distintas da rede no param por a. H quem veja na Internet uma perigosa fonte de pornografia. As indstrias sonham com o dia em que podero vender diretamente aos consumidores, sem nenhum intermedirio. Empresas de comunicao esperam o meio que rena rdio, TV e televiso em um mesmo sistema de produo. 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 histria da Internet, foram os usurios que inventaram novos recursos e novas aplicaes. um terreno frtil para boas ideias, e, ao mesmo tempo, perigoso, quando utilizado para fins ilcitos.
Unidade 1
19
Isso tudo porque a Internet uma inveno muito simples. Nada mais do que uma forma fcil e barata de fazer com que computadores distantes possam se comunicar. A partir da, a revoluo est nas mos das pessoas. Cada usurio recebe uma identificao nica, conhecida como endereo. Com esse endereo, ele pode se comunicar, enviando mensagens para outras pessoas. o que se chama de correio eletrnico. Graas aos esforos de instituies 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) - possvel conseguir programas de graa e consultar bancos de dados pblicos. Hoje, com o sucesso da Internet, toda empresa se v na obrigao de colocar a cara na rede. Os servios se multiplicam. Os bancos oferecem todas as suas operaes pelo computador. Notcias so distribudas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos. No entanto boa parte do material da rede produzida por indivduos que desejam expressar ao mundo suas preferncias. Um usurio rene tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais prticos, escreve um currculo e espera que seus talentos sejam descobertos. Qualquer pessoa que um dia sentiu vontade de compartilhar suas faanhas, agora pode fazer isso. O tal terreno frtil da Internet tem um nome. Chama-se World Wide Web ou apenas web.
O navegador usado para exibir pginas da web e outras informaes disponveis na world wide web e navegar por elas.
20
Linguagens de Programao I
requisitar um arquivo para um servidor. Se a informao pedida estiver realmente armazenada naquele servidor, o pedido ser enviado de volta e mostrado na tela do navegador.
Voc tem ideia de como a informao na web organizada?
A informao na web organizada na forma de pginas, que podem conter texto, imagens, sons e, mais recentemente, pequenos programas. Alm disso, as pginas da web podem ser ligadas umas com as outras, formando o que se chama de um conjunto de hipertextos. Assim, possvel, por exemplo, que um trabalho de faculdade faa referncia 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 tambm esteja disponvel na rede. A possibilidade de criar uma malha de informao em torno do planeta deu origem ao nome World Wide Web, que significa teia de alcance mundial. A web um sistema de informao em hipertexto. Os sistemas de ajuda on-line utilizam hipertextos para apresentar informaes. A figura 1.1 a seguir mostra um diagrama simples de como funciona esse tipo de sistema.
Um exemplo de pginas que utilizam hipertextos pode ser visualizados em: <http://pt.wikipedia.org/ wiki/Internet>. Acesso em 1mar.2010.
Ajuda Tpico um Tpico dois Tpico trs Ajuda no Tpico dois SubTpico um SubTpico dois SubTpico trs Ajuda no SubTpico dois Ajuda detalhada Mais detalhes Milhes de detalhes
Unidade 1
21
Voc Sabia?
Hipertexto um sistema para a visualizao de informao cujos documentos contm referncias internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fcil publicao, atualizao e pesquisa de informao. 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 informaes visuais no lineares, com base nas informaes que deseja obter em seguida. O Link ou Hiperlink um dos principais elementos de um hipertexto, pois permite a conexo de uma pgina com informaes a outra previamente definida, geralmente contendo um assunto correlato. Nas pginas WWW, os hiperlinks aparecem como palavras em destaque, normalmente sublinhadas e de cor diferente do restante do texto, e so acionados clicando-se sobre eles com o mouse.
Se a web incorpora muito mais do que texto, por que chamada de sistema de hipertexto? No deveria ser um sistema de hipermdia? Muitos autores discutem o assunto. Muitos argumentam que a web comeou com um sistema de textos e que a maior parte de seu contedo ainda , basicamente, composta de textos, com partes extras de mdias.
22
Linguagens de Programao I
A web distribuda
Sabemos que as informaes ocupam muito espao, especialmente quando voc inclui imagens, sons, vdeos. Para armazenar todas as informaes que a web fornece, voc precisa de um espao enorme em disco, e seria quase impossvel gerenci-las. A web consegue fornecer um volume to grande de informaes, porque elas esto distribudas, globalmente, por milhares de sites, cada qual contribuindo com o espao necessrio s informaes que divulga.
A web dinmica
Como as informaes da web esto contidas no site que as divulgou, as pessoas que as publicaram, originalmente, podem atualiz-las de forma instantnea, a qualquer momento. Para obter informaes atualizadas, basta usar o seu navegador para navegar pelas informaes e verificar o que h de novo.
Site da web um local na web que divulga algum tipo de informao. Quando voc exibe uma pgina da web, o seu navegador se conecta a esse site da web para obter essas informaes.
Unidade 1
23
A ideia de que a web independente de plataforma no sustentada por todos. Com a introduo de novos recursos, tecnologias e tipos de mdia, 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 pblico potencial para seus sites.
A web interativa
Interatividade a capacidade de responder ao servidor web. A web interativa por natureza. O ato de selecionar um vnculo e acessar outra pgina da web para ir a outro local na web uma forma de interatividade. Alm disso, ela permite que voc se comunique com o autor das pginas que est lendo e com outros leitores dessas pginas.
Os navegadores da web
Conforme voc estudou anteriormente, os usurios circulam por essa teia com um programa chamado navegador, que o programa que voc utiliza para exibir pginas pela world wide web. Esse programa envia pedidos de pginas pela rede e as apresenta na tela do usurio. Existem vrios navegadores da web, praticamente para todas as plataformas que voc possa imaginar, desde sistemas baseados em GUI (Mac, Windows), a sistemas de textos para conexes UNIX. Os navegadores mais conhecidos so o Netscape Navigator, o Microsoft Internet Explorer, Mozilla Firefox ou Google Chrome. A opo de desenvolver programas para um navegador especfico conveniente, quando voc sabe que o seu site da web vai ser visto por um pblico limitado. Esse tipo de desenvolvimento uma prtica comum em intranets implementadas em corporaes. Neste livro, os exemplos realizados foram utilizados com o navegador Internet Explorer 5.0.
24
Linguagens de Programao I
Os servidores web
Para que uma pgina esteja permanentemente disponvel na web, ela precisa ter um endereo fixo, alojada em um servidor.
Este endereo chamado URL (Uniform Resource Locator, numa traduo literal, localizador uniforme de recursos).
Os pedidos dos navegadores so atendidos por uma combinao de computadores e programas que formam os servidores. Esses computadores e programas armazenam as pginas e podem exercer algum tipo de controle sobre quais usurios podem acess-las. Os servidores so mquinas potentes instaladas em universidades, empresas e rgos do governo, conectados permanentemente Internet. Tambm possvel 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 usurios possam requisitar as pginas a qualquer momento. A melhor soluo para montar um conjunto de pginas procurar uma empresa que aluga espao em um servidor web. Existem vrios provedores de espao (hostings) gratuitos. Os provedores de acesso internet geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos so geralmente hospedados em provedores de espao pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pgina de envio no prprio provedor de espao), e suas pginas j estaro disponveis para visitas.
Unidade 1
25
Considere a seguinte URL: <http://www.unisul.br/aluno/aluno.html> Onde, http:// o mtodo pelo qual ocorrer a transao entre cliente e servidor. HTTP (HyperText Transfer Protocol, ou protocolo de transferncia de arquivos de hipertexto) o mtodo utilizado para transportar pginas de web pela rede. Outros mtodos comuns so: ftp:// (para transferir arquivos), news:// (grupos de discusso) e mailto:// (para enviar correio eletrnico). 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 diretrio onde est o arquivo. s vezes, uma URL indica apenas o diretrio (ou o servidor). Neste caso, o servidor se encarrega de procurar e enviar o arquivo adequado. aluno.html o nome do arquivo. A extenso .html indica que se trata de uma pgina web. Uma URL pode indicar outras extenses. Quando o navegador recebe um arquivo com a extenso .txt, o arquivo tratado como um texto comum. Em outros casos, como nas extenses .zip (arquivo comprimido) e .exe (um programa), o navegador abre uma janela, perguntando ao usurio o que fazer com o arquivo.
Esse endereo nico de um documento pode ser utilizado pelo usurio para localizar um arquivo com o navegador. Nesse caso, o usurio deve preencher com o endereo uma janela do navegador conhecida como Endereo. A URL ser enviada at o servidor, que tentar localizar o arquivo e envi-lo para o usurio. Caso o arquivo no esteja disponvel no servidor, o usurio receber uma mensagem de erro. As URLs tambm so colocadas dentro de pginas de WWW para fazer referncia a outras informaes disponveis na Internet. Neste caso, determinados itens (trechos de texto ou imagens) da pgina, conhecidos como links, como j visto, podem ser utilizados pelos usurios para saltar de um lugar a outro na rede. Os links podem estabelecer ligao com qualquer tipo de arquivo. Essa ligao entre os documentos o que se chama de hipertexto.
26
Linguagens de Programao I
publicar documentos on-line com texto, tabelas, fotografias e muito mais; receber informaes atravs de ligaes (links) de hipertexto por meio de um clique; desenhar formulrios para transaes comerciais atravs de servios remotos, como para encontrar informao, fazer reservas, encomendar produtos, etc.; e, ainda, incluir som, vdeo e muitas aplicaes nos documentos.
Unidade 1
Posteriormente, o HTML foi expandido em vrios caminhos. De 1990 a 1995, a linguagem HTML sofreu uma srie de extenses por parte de diversos grupos e organizaes: HTML 2.0 da IETF, HTML+, HTML 3.0. Em 1996, os esforos 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 no a original. Para acomodar os mais variados pedidos, as tags de apresentao (cor, fonte e alinhamento) foram usadas e abusadas, quando o principal propsito da linguagem era estruturar a informao. Muitos, em alguma fase, aproveitaram-se das aparentes facilidades desta verso do HTML e de browsers demasiado permissivos a erros. Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem, atravs de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML 4.0, que uma extenso do HTML 3.2, que permite a utilizao 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 nmero de erros e incongruncias encontrados na recomendao anterior. Neste momento, em 1999, existe um consenso para a necessidade de se voltar um pouco atrs, preparando ao mesmo tempo o futuro. Um exemplo a separao do contedo com a apresentao do documento, usando XHTML para o contedo e deixando a apresentao do documento a cargo de Cascading Style Sheets (CSS). Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendao 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).
28
Linguagens de Programao I
Unidade 1
29
Em suma, hoje em dia temos um HTML mais flexvel, porttil e com um formato prtico 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.
Editores de texto fonte - facilitam a insero das etiquetas (tags, como chamaremos), orientando o uso de atributos e marcaes. Ex.: W3e, HotDog, Crimson Editor.
30
Linguagens de Programao I
Editores WYSIWYG - oferecem ambiente de edio com um resultado final das marcaes (pois o resultado final depende do browser usado para visitar a pgina). Ex.: FrontPage, Namo Editor, Dreamweaver.
WYSIWYG o acrnimo da expresso em ingls What You See Is What You Get, que pode ser traduzido para O que voc v o que voc recebe. Trata-se de um mtodo de edio, no qual o usurio v o objeto no momento da edio na tela do computador, j com a aparncia do produto final. Um exemplo clssico 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 programao para internet, um dos editores o Macromedia Dreamweaver, no qual qualquer pessoa, com o mnimo de conhecimento em HTML, pode fazer muito rapidamente uma pgina ou at um site inteiro para internet.
Alm dos editores especficos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportao de seus documentos prprios para o formato HTML. O documento HTML produzido normalmente ter extenso .html ou .htm. Existem muitos editores de HTML gratuitos, como:
31
HyTime - Hypermedia/Time-based Document Structuring Language HyTime (ISO 10744:1992) o padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo-se de documentos que aplicam os padres de maneira particular. SGML - Standard Generalized Markup Language SGML o padro ISO 8879 de formatao de textos. No foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiperobjetos e para descrever as ligaes. O SGML no aplicado de maneira padronizada. Todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto. DTD - Document Type Definition - define as regras de formatao para uma determinada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML.
32
Linguagens de Programao I
Todo documento HTML apresenta elementos entre < e >; esses elementos so as etiquetas (doravante chamadas de tags) de HTML, que so os comandos de formatao da linguagem, as quais podem ser escritas em maiscula ou minscula. A maioria das tags tem sua correspondente de fechamento:
<tag>...</tag>
Isso necessrio, porque as tags servem para definir a formatao de uma poro de texto e, assim, marcamos onde comea e termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem algo no documento:
<tag>
Todos os elementos podem ter atributos:
Unidade 1
33
Sntese
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 espao (hostings) e URL. Voc tambm aprendeu conceitos introdutrios de HTML, que um recurso muito simples e acessvel para a produo de documentos. No podemos deixar de frisar a importncia das tags em HTML. Por isso, segue abaixo uma tabela resumindo a morfologia das tags:
Tipo
Tag Texto Atributo
Sintaxe
<tag> <tag>texto</tag> <tag NOME_ATRIBUTO=valor>texto</tag>
Exemplo
<BR> <B>texto</B> <A HREF=url>texto</A>
Nas prximas unidades, voc estudar outros elementos do HTML, que lhe possibilitaro, com alguma imaginao, fazer um bom website. At l!
34
Linguagens de Programao I
Atividades de autoavaliao
1. Faa uma pesquisa sobre alguns editores gratuitos de HTML na internet. Pontue vantagens e desvantagens. Na ferramenta FRUM 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 referncia: PRATES, Rubens. HTML: guia de consulta rpida. So Paulo: Editora Novatec, 1997. E os seguintes sites: <http://www.abcdohtml.hpg.ig.com.br/> (Introduo ao HTML) <http://minerva.ufpel.edu.br/~bira/html/web.html> (Web Design)
Unidade 1
35
UNIDADE 2
Introduo HTML
Objetivos de aprendizagem
Conhecer o que HTML e a importncia de utiliz-la. Conhecer o que so as tags HTML e como utiliz-las. Identificar as tags para a estrutura geral de uma pgina. Identificar as tags para ttulos, cabealhos e pargrafos.
Sees de estudo
Seo 1 Criao de pginas da web simples Seo 2 Estruture sua HTML Seo 3 Separadores Seo 4 Alinhamento de texto
38
Linguagens de Programao I
Tags bsicas
A estrutura bsica de um documento HTML apresenta as seguintes tags: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML>
Unidade 2
39
Observe que existem quatro pares de tags, que devem ser sempre colocados na pgina. O par de tags <HTML> e </HTML> deve englobar todo o contedo da pgina (estar presente no incio 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 cabealho 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 cabealho, no aparecendo na pgina. O elemento principal do cabealho o ttulo do documento, que deve ser colocado entre o par <TITLE> e </TITLE>. Os navegadores mostram o ttulo na barra de ttulo do programa e na rea em que aparecem as pginas 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 no so sensveis 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 pgina em HTML a <html>, a qual indica que o contedo do arquivo encontra-se codificado na linguagem HTML. Para que o computador reconhea que voc est escrevendo um documento em HTML, todo o seu contedo dever ser delimitado pelas tags HTML de abertura e fechamento, como no exemplo:
<HTML> .... a sua pgina ... </HTML> 40
Linguagens de Programao I
<HEAD>
A tag <HEAD> e </HEAD> delimita o cabealho do documento. Geralmente h poucas tags na parte <HEAD> da pgina. Voc nunca deve incluir no cabealho parte alguma do texto de sua pgina. Alm do ttulo da pgina (< TITLE> ...
</TITLE>), no cabealho so inseridas tambm tags utilizadas para indexao do documento HTML e para relacionamento com documentos externos (javascript, CSS, etc...). Eis um exemplo tpico
Campo <TITLE>
O elemento <TITLE>, por exemplo, define um ttulo, que mostrado no alto da janela do navegador. Todo documento web deve ter um ttulo; este ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prtica a importncia do ttulo, se voc adicionar uma pgina com ttulo aos seus Favoritos (Bookmarks), o ttulo da pgina se torna a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como Introduo. O ttulo tambm bastante significativo para a listagem de uma pgina nos resultados de pesquisas nos catlogos da internet. As tags <TITLE> so sempre includas no cabealho da pgina, entre as tags <HEAD> e </HEAD>, e descrevem o contedo da mesma como no exemplo anterior. Voc pode ter apenas um ttulo na pgina, e o ttulo pode conter somente texto simples, ou seja, no pode haver outras tags no ttulo. Escolha um ttulo curto, mas que descreva o contedo da pgina.
Unidade 2
41
Campo <META>
Alm do ttulo, <HEAD> contm outras informaes de importncia para os robs de pesquisa, indicadas nos campos <META>. Os campos <META> tm dois atributos principais:
NAME ,
que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao deste campo pode ser lida pelos navegadores e provocar algumas aes.
HTTP-EQUIV,
Os atributos so partes extras das tags da HTML que contm opes ou outras informaes sobre a tag em si.
Acompanhe a sintaxe seguinte, como modelo de uso dos atributos <META> (NAME e HTTP-EQUIV):
<HEAD> <TITLE>Ttulo do Documento</TITLE> <META NAME=nome CONTENT=valor> <META HTTP-EQUIV=nome CONTENT=valor> </HEAD>
42
Linguagens de Programao I
<HEAD> <META HTTP-EQUIV=content-type CONTENT=text/html; charset=iso-8859-1> <TITLE>Ttulo da Janela</TITLE> <META NAME= Author CONTENT=Patrcia> <META NAME=Description CONTENT=Livro de Linguagem de Programao I> <META NAME=KeyWords CONTENT=HTML, WWW, Web, Internet> <LINK REL=stylesheet HREF=folhasestilos.css> </HEAD>
Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, por exemplo: Author. Os campos Description e KeyWords ajudam a classificao da pgina em algumas ferramentas de busca. Essas informaes no tm qualquer efeito na apresentao da pgina, mas servem como uma explicao ou documentao sobre as informaes contidas nela. H poucos valores para META HTTP-EQUIV em uso. O mais comum content-type, que indica o conjunto de caracteres usados na pgina. Essa informao 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 mudana automtica de pginas, atribuindo-lhe o valor Refresh. Veja este exemplo:
<HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV=Refresh CONTENT=segundos; URL= pagina.html> </HEAD>
Unidade 2
43
Onde diz:
automaticamente;
Como comentado no exemplo, o efeito interessante, mas para que serve? Se no pensarmos em uma finalidade til para esse efeito, camos na tentao de us-lo toa. A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmara de vdeo. Voc pode forar, com o Refresh (atualizador), a atualizao dessa pgina, mostrando para o usurio sempre uma imagem mais atual de algum evento focalizado pela cmara. Outra utilizao em chats, ou em pginas que desviem a navegao atravs de documentos desenvolvidos para navegadores avanados.
Uso de META tags! O uso de META tags no obrigatrio. At poucos anos atrs, elas eram consideradas essenciais para uma pgina ter bom posicionamento nos resultados das pesquisas em catlogos da web. Com o tempo, no entanto, os responsveis pelos catlogos viram que os autores de pginas abusavam das tags META, colocando palavras-chave em demasia para enganar os critrios de catalogao. Atualmente, nenhum dos catlogos mais conceituados considera as palavras-chave contidas em META tags.
Ainda no exemplo anterior, se voc observar atentamente, alm das tags TITLE e META, a ltima tag utilizada no cabealho foi LINK. Esta tag tem a funo de fazer um relacionamento com algum documento externo. <LINK REL= stylesheet HREF=folhaestilo.css>
44
Linguagens de Programao I
O atributo REL a identificao 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 funes java script. HREF o caminho fsico do arquivo. Neste caso, existe um arquivo chamado folhaestilo.css no prprio diretrio do HTML.
<BODY>
o corpo do documento. Tudo que estiver contido em <BODY> ser mostrado na janela principal do seu navegador. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Estas duas tags, <BODY> </BODY>, delimitam todo o contedo do site. a que aparecero 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 pgina, como uma marca d`gua. Para efeitos de design, possvel fixar a imagem de fundo, de modo que ela no se mova junto com o texto, ao se rolar a pgina. Exemplo: <body background=imagem.gif> Neste exemplo, o arquivo de imagem deve estar no mesmo diretrio do arquivo HTML.
BGCOLOR (cor de fundo) - a cor de fundo da tela. Quando no indicada, o navegador ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina. Exemplo: <body bgcolor=cor>
Unidade 2
45
O atributo cor pode ser utilizado em todas as tags, tanto pode ser o nome de uma cor (RED, BLUE, BLACK, etc...) ou a codificao da cor em representao hexadecimal (#FF00FF, #C42A1F, etc...).
TEXT (cor do texto padro) - a cor padro de todo o texto da pgina. Cor dos textos da pgina (padro: preto). Exemplo: <body text=cor>
LINK (cor dos links) - determina a cor de todos os links da pgina. Cor dos links (padro: azul). Exemplo: <body link=cor>
VLINK (cor dos links visitados) - determina a cor de todos os links j visitados na pgina. Cor dos links, depois de visitados (padro: azul escuro ou roxo). Exemplo: <body vlink=cor> ALINK (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padro: vermelho). Exemplo: <body alink=cor>
Acompanhe a sintaxe seguinte, como modelo de uso dos atributos especficos do <BODY>:
<BODY BACKGROUND=imagem.gif BGCOLOR=cor TEXT=cor LINK=cor ALINK=cor VLINK=cor> contedo </BODY>
O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto seja preto, os links ainda no visitados sejam
46
Linguagens de Programao I
Os valores das cores podem ser dados tambm em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel, atravs da qual escolhemos as cores desejadas.
Voc Sabia?
O sistema hexadecimal um sistema de numerao vinculado informtica, j que os computadores interpretam as linguagens de programao em bytes, que so compostos de oito dgitos. medida que os computadores e os programas aumentam a sua capacidade de processamento, eles funcionam com mltiplos de oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dgitos, um standard na informtica. Como o nosso sistema de numerao s dispe de dez dgitos, devemos incluir seis letras para completar o sistema. Estas letras e o seu valor em decimal so: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. A utilizao do sistema hexadecimal nos computadores deve-se a que um dgito hexadecimal representa quatro dgitos binrios (4 bits), portanto dois dgitos hexadecimais representam oito dgitos binrios (8 bits = 1 byte) que, como sabido, a unidade bsica de armazenamento de informao.
Fonte: http://pt.wikipedia.org/wiki/Hexadecimal.
Unidade 2
47
Navegadores que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR=BLUE. Porm os navegadores mais antigos no apresentam as cores indicadas.
48
Linguagens de Programao I
Aps criar seu arquivo HTML, grave-o em alguma pasta com seus trabalhos. Lembre-se de gravar estes arquivos, escolhendo a opo Salvar Como. Existem duas regras que voc dever seguir ao escolher um nome para o arquivo:
o nome do arquivo dever ter uma extenso .html (ou .htm). Por exemplo, meuarquivo.html ou principal.htm. A maioria dos softwares exigir que os seus arquivos tenham esta extenso. Por isso, crie desde j o hbito de utiliz-la; use nomes simples e curtos. No inclua espaos ou caracteres especiais (marcadores, letras acentuadas, etc.). Use apenas letras e nmeros.
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 extenso entre aspas duplas, por exemplo: meuarquivo.html. Este processo evitar que o arquivo seja gravado com a extenso txt (meuarquivo.html.txt), confuso ocasionada conforme a configurao do sistema operacional.
Unidade 2
fechamento e se todas as tags esto descritas corretamente. Assim, basta corrigir o arquivo e grav-lo novamente com o mesmo nome. Para isso, voc no precisa sair do navegador.
Em seguida, retorne ao navegador. Deve haver um item, no menu ou boto, denominado Atualizar (recarregar). O navegador ler a nova verso do seu arquivo e, ento, voc poder editar e visualizar o documento sucessivamente, at que tudo esteja correto. Mas no se esquea de verificar tambm a extenso de seu arquivo, caso o seu navegador apresente o texto HTML real. A extenso 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?
50
Linguagens de Programao I
Para escrever documentos HTML no necessrio mais do que um editor de texto simples e conhecimentos dos cdigos que compem a linguagem. Os cdigos, conhecidos como tags, servem para indicar a funo de cada elemento da pgina na rede.
Quando uma pgina em HTML analisada por um navegador, toda a formatao feita manualmente espaos, tabulaes, quebras de pargrafos, etc. ignorada. O nico elemento capaz de formatar uma pgina em HTML so as tags de HTML. Se voc passar horas editando cuidadosamente um arquivo de texto simples para ter pargrafos e colunas de nmeros bem formatados, mas se esquecer de incluir as tags, quando for ler a pgina em um navegador HTML, todo o texto fluir em um nico pargrafo. E todo o seu trabalho ter sido em vo. A vantagem de todos os espaos em branco serem ignorados est no fato de voc poder incluir as suas tags onde desejar.
H uma nica exceo a essa regra: uma tag denominada <PRE>. Voc aprender sobre ela mais adiante.
Cabealho
Os cabealhos so usados para dividir sees do texto. A HTML define 6 nveis de cabealho. As tags de cabealho tm o seguinte formato:
Os nmeros indicam os nveis de cabealho (de H1 a H6). Quando apresentados na tela, eles aparecem em letras maiores, em negrito, centralizados, sublinhados ou em letras maisculas, de alguma forma que os destaque do restante do texto. O <H1>
Unidade 2
51
deixa a letra maior que o <H2> e assim por diante. Veja o seguinte exemplo:
<H1>Este um cabealho de nvel 1</H1> <H2>Este um cabealho de nvel 2</H2> <H3>Este um cabealho de nvel 3</H3> <H4>Este um cabealho de nvel 4</H4> <H5>Este um cabealho de nvel 5</H5> <H6>Este um cabealho de nvel 6</H6>
Lembre-se de que todas as tags acima devem estar dentro da BODY. Esses cabealhos so mostrados da seguinte forma:
Aninhamento colocar documentos dentro de outro documento. Em HTML, aninhar colocar tags uma dentro das outras.
Aninhamento de cabealhos
Os cabealhos no podem ser aninhados, isto , a formatao pode produzir algum resultado prximo ao desejado, como no exemplo a seguir. Vamos testar?
52
Linguagens de Programao I
<H2>Este </H2> <H1>um cabealho de nvel 1</H1><H2> dentro de um cabealho de nvel 2</H2>
Ou seja, os navegadores interpretam a formatao 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:
Unidade 2
53
Seo 3 - Separadores
Como voc viu no primeiro exemplo, as quebras de linha do texto fonte no so significativas na apresentao de documentos em HTML. Para organizar os textos, voc precisa, ento, de separadores tais como os apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio, 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, pargrafos ou itens de uma lista. Essa tag no possui espao 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 tm texto ao redor, conforme ser apresentado na unidade 5.
54
Linguagens de Programao I
Pargrafos
Os pargrafos so digitados normalmente. A tag <P> serve para indicar o incio de um novo pargrafo. As tags <P> e </P> delimitam um pargrafo no texto. possvel, neste caso, no fechar a tag <P>, ou seja, omitir o </P>, sem prejudicar o resultado final. Ao contrrio da quebra de linha, com o uso do <P> deixada uma linha em branco antes do prximo pargrafo. Quebra de linha no 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 pargrafo:
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 opo (ALIGN=CENTER). Por isso preciso utilizar uma tag de fechamento (</P>) para indicar que apenas aquele pargrafo receber um alinhamento diferente. Observe o exemplo 1, que aborda como inserir uma linha em branco entre pargrafos:
Pargrafo 1;<P>Pargrafo 2.
Unidade 2
55
Acompanhe o exemplo 2, que combina a insero de linha entre pargrafos e quebras de linha:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br> linha 2 do pargrafo 1.<P>Pargrafo 2;<br> linha 1 do pargrafo 2, <br> linha 2 do pargrafo 2.
56
Linguagens de Programao I
Veja o exemplo 3 sobre o alinhamento de pargrafos, alm de insero de linhas entre pargrafos 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 provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.</P> <P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.</P>
Linha horizontal
A tag <HR> utilizada para colocar linhas horizontais em uma pgina. Essa linha tem diversos atributos, oferecendo resultados diversos. As linhas (ou fios) so excelentes para separar visualmente sees da pgina da web antes dos cabealhos ou para separar o texto de uma lista de itens. Voc pode determinar a altura, a largura e o alinhamento da linha.
Unidade 2
57
Observe o exemplo 1:
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 espao horizontal disponvel. Align: determina o posicionamento da linha. Noshade: indica sem efeito tridimensional.
Considere o exemplo 2:
Com estes comandos, voc insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional. Verifique o resultado no seu navegador.
58
Linguagens de Programao I
A utilizao de aspas duplas nos valores dos atributos opcional, porm considerada uma boa prtica. Neste caso, voc insere uma linha de altura 70 (pixels), comprimento 7 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>). Verifique o resultado no seu navegador. Ter o aspecto abaixo? Se afirmativo, ento est correto.
Unidade 2
59
Essa tag precisa ser usada apenas uma vez, ao contrrio do atributo ALIGN, que tem de ser includo em diversas tags. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, etc.). O atributo ALIGN encontra-se disponvel apenas em um nmero limitado de tags.
60
Linguagens de Programao I
Centralizao de texto
As tags <CENTER> e </CENTER> centralizam os elementos textos, imagens, tabelas - que estiverem dentro de sua marcao. A tag <CENTER> funciona de maneira idntica <DIV ALIGN=CENTER>, centralizando todo o contedo HTML contido entre as tags de abertura e de fechamento. Acompanhe o seguinte exemplo:
61
Margem
Outro controle sobre o alinhamento dos elementos da pgina pode ser conseguido atravs de mudana, de configurao, de margem. O texto sempre comea a uma determinada distncia da janela do navegador (um pouco diferente em cada navegador). s vezes, ser necessrio aumentar essa margem e fazer com que o texto comece mais para dentro da pgina. 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:
62
Linguagens de Programao I
A tag <BLOCKQUOTE> utilizada, principalmente, na criao de citaes. Geralmente, as citaes so destacadas em relao ao restante do texto atravs do recuo.
Se voc no deseja aumentar a margem do texto, no utilize a tag <BLOCKQUOTE>. Por padro, os cdigos HTML no tm margem definida.
Texto pr-formatado
Existe ainda outra forma de modificar o alinhamento. a utilizao do par de tags <PRE> e </PRE>. Usando essas tags, todos os espaos e entradas de pargrafo (o resultado da tecla ENTER) so respeitados. Em um texto normal, qualquer espao a mais entre duas palavras ignorado pelo navegador. Com a pr-formatao, pode-se controlar o espaamento com a barra de espao e colocar o texto em, praticamente, qualquer lugar da pgina. Apesar da vantagem desta forma de alinhamento arbitrrio, a tag <PRE> muda o tipo de caractere para uma fonte monoespaada. Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especficos.
Uma fonte monoespaada aquela na qual todos os caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte proporcional, na qual o i ocupa menos espao do que o a, por exemplo.
Unidade 2
63
<PRE> Este texto est pr-formatado. A fonte monoespaada e as entradas de pargrafo, assim como os espaos adicionais, so respeitadas. Neste caso, a margem esquerda foi aumentada em cinco caracteres.</PRE> O texto normal recebe fonte proporcional e ignora a presena de espaos a mais no meio do texto. Entradas de pargrafos adicionais tambm so ignoradas.
64
Linguagens de Programao I
Sntese
Como voc aprendeu, a HTML uma linguagem de marcao de texto usada para descrever documentos de hipertexto na WWW, que descreve uma pgina e o seu contedo, no a sua aparncia. Nesta unidade, voc tambm aprendeu a estrutura bsica 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
<HTML>...</HTML> <HEAD>...</HEAD> <BODY>...</BODY> <TITLE>...</TITLE> <H1>...</H1> <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6> <BR> <P> <CENTER>...</CENTER> <PRE> <BLOCKQUOTE>...</ BLOCKQUOTE> <HR> <DIV>...</DIV>
USO
Toda a pgina em HTML O cabealho, o prlogo da pgina em HTML Todo o restante do contedo da pgina em HTML O ttulo da pgina Ttulo de nvel 1 Ttulo de nvel 2 Ttulo de nvel 3 Ttulo de nvel 4 Ttulo de nvel 5 Ttulo de nvel 6 Nova linha Pargrafo Alinhar o texto ao centro Pr-formatao Margem Linha Horizontal Alinhamento de bloco de texto
Unidade 2
65
Atividades de autoavaliao
Caro(a) aluno(a), leia cada enunciado com ateno e responda as questes que seguem. 1. Em muitas pginas da web, as tags de estrutura de pgina (<HTML>, <HEAD>, <BODY>) no so usadas. Devo inclu-las, mesmo que as pginas funcionem bem sem elas? Por qu?
2. Agora que voc sabe o que HTML, conhece algumas tags, possui os conhecimentos suficientes para criar pginas simples em HTML e at navegou por arquivos em HTML (atravs dos exemplos), crie uma pgina inicial em HTML com o nome de index.html, utilizando tags e atributos estudados nesta unidade.
66
Linguagens de Programao I
Saiba mais
Aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. So Paulo: Editora rica, 2005. Tambm consulte o seguinte site para aprofundar seus estudos:
<http://www.icmc.usp.br/ensino/material/html/edicao.html> (Instituto de Cincias Matemticas e de Computao)
Unidade 2
67
UNIDADE 3
Listas e Vnculos
Objetivos de aprendizagem
Conhecer e criar as tags para listas. Realizar comentrios atravs do cdigo HTML. Fazer os vnculos realizados em HTML.
Sees de estudo
Seo 1 Listas Seo 2 Comentrios Seo 3 Tudo sobre vnculos
Listas numeradas ou ordenadas; Listas com marcadores ou no ordenadas; Listas de definio ou de glossrio; Listas de menu e Listas de diretrio.
Voc tambm aprender a realizar um comentrio e como estabelecer os vnculos em HTML. Vamos comear!
Seo 1 - Listas
Nesta seo, 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 prpria tag.
70
Linguagens de Programao I
A tag <LI> unilateral, voc no precisa especificar a tag de fechamento. A existncia da prxima <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 no precisa numer-los. Acompanhe este exemplo:
<OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL>
Listas ordenadas so aquelas em que cada item tem um nmero.
Unidade 3
71
Utilize listas numeradas somente quando quiser indicar que os elementos esto ordenados, ou seja, nos casos em que os itens devero ser apresentados nessa ordem especfica.
As listas numeradas tm vrios atributos que voc pode utilizar para personalizar sua apresentao no navegador. Esses atributos permitem controlar vrias caractersticas das listas, incluindo o esquema de numerao a ser usado, e a partir de que nmero se vai iniciar a contagem (se voc no quiser iniciar em 1). Voc pode personalizar listas ordenadas de duas maneiras:
A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir o tipo de numerao a ser usado na lista:
1 - especifica que os algarismos arbicos padres devem ser usados para numerar a lista (isto : 1, 2, 3, 4, etc.); a - especifica que as letras minsculas devem ser usadas para numerar a lista (isto : a, b, c, d, etc.); A - especifica que as letras maisculas devem ser usadas para numerar a lista (isto : A, B, C, D, etc.); i - especifica que os algarismos romanos minsculos devem ser usados para numerar a lista (isto : i, ii, iii, iv, etc.); I - especifica que os algarismos romanos maisculos devem ser usados para numerar a lista (isto : I, II, III, IV, etc.).
Os tipos de numerao podem ser especificados na tag <OL>, como no exemplo a seguir, que utiliza o padro TYPE=a.
72
Linguagens de Programao I
<OL TYPE=a> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio preocupar-se com a formatao das margens de texto <LI>item de lista numerada </OL>
Os navegadores da web geralmente ignoram os atributos que no entendem. Por exemplo, se um navegador no suportar o atributo TYPE da tag OL, ele simplesmente vai ignor-lo quando o encontrar. O atributo TYPE tambm pode ser aplicado na tag <LI>, mudando efetivamente o tipo de numerao no meio da lista. Quando o atributo TYPE usado na tag <LI>, ele afeta o item em questo e todas as entradas que venham a seguir na lista.
Usando o atributo START, voc pode especificar o nmero ou letra que inicia sua lista. O ponto inicial padro 1, claro. Usando START, voc pode mudar esse nmero. Por exemplo, <OL START=4> iniciaria a lista no nmero 4, enquanto <OL TYPE=a START=3> iniciaria a numerao com c e percorreria o alfabeto a partir da.
Unidade 3
73
Assim como no atributo TYPE, voc pode mudar o valor do nmero de uma entrada em qualquer ponto da lista. Isto feito usando-se o atributo VALUE na tag <LI>. A atribuio de um VALUE em uma tag <LI> reinicia a numerao 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>
74
Linguagens de Programao I
E visualize-o no navegador:
Unidade 3
75
Assim como as listas ordenadas, as listas no ordenadas podem ser personalizadas. De acordo com a especificao HTML, o atributo TYPE pode receber trs valores possveis, quando apresentados no Netscape Navigator:
disc - configura um disco ou marcador (este o padro), na maioria das vezes representa um crculo preenchido; square - configura um quadrado; circle - este marcador gera um crculo no preenchido em navegadores compatveis.
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>
76
Linguagens de Programao I
Cada item de uma lista com marcadores no ordenados tambm pode ter seu atributo especfico, atravs do TYPE na tag <LI>:
<UL> <LI TYPE=disc>um item <LI TYPE=circle>mais um item <LI TYPE=square>ltimo item </UL>
As listas com marcadores em HTML so equivalentes s listas com marcadores do Microsoft Word. A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, distino que veremos mais adiante.
Unidade 3
77
Uma lista de glossrio permite incluir uma descrio de cada item listado. O descritor <DL> e os descritores <DT> e <DD> fazem esta funo. Cada componente da lista de glossrio possui sua prpria tag:
<DT>: para o termo (Definition Term) <DD>: para a respectiva definio (Definition Definition)
Essas tags so unilaterais e, em geral, apresentadas aos pares, embora a maioria dos navegadores possa tratar <tratar o qu?> com definies ou termos especficos. A lista de glossrio inteira indicada pelas tags <DL>...</DL> (Definition List). Eis um exemplo de uma lista de glossrio:
<DL> <DT>termo a ser definido <DD>definio <DT>termo a ser definido <DD>definio </DL>
78
Linguagens de Programao I
Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, pois permite a tabulao do texto. Um exemplo de ocorrncia desta lista so os ndices de navegao presentes em muitas pginas de tutoriais na web.
Unidade 3
79
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.
Embora as listas de menu e de diretrio existam na especificao HTML 2.0, no so muito utilizadas em pginas na web. Na HTML 4.0 elas so consideradas diferentes das listas no ordenadas e das listas de glossrio, por serem representadas de modo diferente, na aparncia, em relao s listas no ordenadas ou de glossrio, mas os navegadores ainda no as implementam de modo diferente. Considerando que a maioria dos navegadores formata menus e diretrios da mesma forma que as listas de glossrio ou listas no ordenadas, e no da forma como esto descritas na especificao, provvel que a melhor opo 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 pgina, e a formatar como um pargrafo simples ou como um item com marcador, mas sem recuo. Contudo, segundo a verdadeira definio HTML, o uso de uma tag <LI> invlido desta forma. Por isso, as pginas em HTML adequadas no devem us-la assim. E como estamos procurando criar pginas em HTML corretas, voc no dever fazer uso desse mtodo. Assim, inclua sempre os seus itens nas listas a que pertencem.
80
Linguagens de Programao I
Aninhamento de Listas
O 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> <DT>termo a ser definido <DD>definio <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser definido <DD>definio </DL>
O recuo de listas aninhadas no prprio cdigo HTML ajuda a mostrar, no layout final, o seguinte relacionamento entre as listas:
Unidade 3
81
<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 EXPOSIO do EVA?
Boa parte dos editores HTML (WYSIWYG ou no) insere marcaes que no existem em HTML. Exemplos tpicos so </DD>, </DT>, e </LI>. Porm, como essas tags no so reconhecidas pelos navegadores, elas no causam efeito colateral algum nos documentos.
82
Linguagens de Programao I
Observe que estas mesmas listas tambm no apresentariam numerao em formato 1.1, 1.2, etc., quando ordenadas e compostas: 1. Documentos bsicos 2. Documentos avanados
Unidade 3
83
1. formulrios 1. CGI 2. contadores 3. relgios 3. Detalhes sobre imagens Porm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens:
<OL TYPE=I> <LI>Documentos bsicos <LI>Documentos avanados <OL TYPE=a> <LI >formulrios <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relgios </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!
84
Linguagens de Programao I
Outro exemplo de listas aninhadas so as listas de glossrios, descritas tal como no exemplo a seguir:
<DL> <DT>Imperadores do Brasil: <DD>D. Pedro I <DL> <DD>Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga </DL> </DL>
Vamos visualizar o exemplo acima no seu navegador? Qual o resultado? Publique este resultado tambm na ferramenta EXPOSIO, no ambiente virtual EVA.
Se voc no est vendo diferena alguma entre as listas comuns e as que tm atributos TYPE, isto se deve ao fato de seu navegador no estar reconhecendo esses atributos como vlidos. Trata-se de um navegador de verso antiga. Deve-se pensar nisto quando usamos atributos mais recentes, pois nem todo usurio poder ver o resultado das novas marcaes.
Unidade 3
85
Seo 2 - Comentrios
Voc pode incluir comentrios em pginas em HTML para descrever a prpria pgina ou para fornecer alguma indicao de seu status. O texto inserido ignorado, quando o arquivo em HTML analisado. Os comentrios nunca so apresentados na tela por isto so comentrios. Eles tm um formato semelhante ao seguinte:
<!-- Isto um comentrio -->
Em verses mais atuais da HTML, voc pode comentar tambm vrias linhas assim:
<!-- Isto um comentrio De duas ou mais linhas --> Aqui tem um exemplo de comentrio!! Ele no apareceu escrito!!
86
Linguagens de Programao I
Atividade de autoavaliao
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua autoavaliao. 1. Crie uma pgina HTML chamada de MinhaLista.html e crie listas aninhadas nesta pgina. No se esquea de comentar o seu cdigo HTML.
Unidade 3
87
o nome do arquivo (ou URL do arquivo) com o qual deseja estabelecer o vnculo; o texto que ser destacado no navegador e dever ser selecionado pelos usurios para acompanhar os vnculos.
Apenas este segundo componente estar visvel na sua pgina. Quando voc clicar sobre o texto que aponta para o vnculo, o navegador reconhecer o primeiro componente como o local para onde dever ir.
88
Linguagens de Programao I
Atributos
A tag <A> tem vrios atributos, utilizados conforme a ao associada ao link. Os mais usados so:
HREF - indica o arquivo de destino da ligao de hipertexto ou o endereo de uma pgina 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 regio de um documento como destino de uma ligao.
Neste exemplo, o texto Acesse o Menu Principal aparece no navegador realado de alguma forma, normalmente, em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mozinha quando colocado sobre o texto realado. Ao clicar no link, o arquivo menu.html, do diretrio /cadastro/, ser mostrado na tela.
Referncia de Hipertexto
Colocando uma URL no atributo HREF da tag <A>, pode-se ligar uma pgina com qualquer outro documento disponvel na internet, ou seja, possvel estabelecer uma referncia de
89
Unidade 3
hipertexto em funo de tags que criam links para outras pginas da internet. Pode-se fazer uma pgina com uma lista de pginas preferidas da rede com suas devidas ligaes de hipertexto. Veja este modelo:
<a href=http://endereodapagina.htm>Aqui vai o nome ou o endereo da pgina para a qual voc est apontando o link</a>
<a href=http://www.virtual.unisul.br>UnisulVirtual</a>
Um visitante na sua pgina que clicar sobre o link UnisulVirtual ser levado pgina principal do site.
90
Linguagens de Programao I
<A HREF=#explicao>Saiba mais sobre o meu site</A><P><hr> Escrevendo um texto em HTML com vnculos.<P><br><br><br><br><br> <br><br> <A NAME=explicao>O meu site</A>
O exemplo acima, Saiba mais sobre o meu site, est vinculado regio chamada O meu site. Ou seja: quando um usurio clicar sobre Saiba mais sobre o meu site, ser levado para a regio, na mesma pgina, chamada Meu site. O caractere # indica que se trata de um link em uma mesma pgina.
Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto.
Unidade 3
91
No exemplo do navegador acima, quando o usurio clicar em Saiba mais sobre o meu site, o link levar o usurio a mesma pgina onde foi marcado o ponto de chegada, neste caso O meu site. Veja:
Quando construmos links para trechos determinados de outros documentos, precisamos saber quais trechos do documento destino esto marcados para ponto de chegada de um link.
Lembre-se de que os nomes das ncoras no contm caracteres #. Somente os vnculos correspondentes contm esses caracteres.
Uma referncia a uma outra parte do mesmo documento particularmente til, quando se est fazendo o ndice de um texto. Vejamos outro exemplo:
92
Linguagens de Programao I
Neste exemplo, quando o usurio clicar sobre o link <A HREF=#cap1>Captulo 1</A>, ele ser remetido ao ponto onde est a referncia <A NAME=cap1>Captulo 1</A>. A parte do texto que referenciada (o alvo de um link) no fica realada como os hyperlinks. Alm de ser invisvel, no obrigatrio que exista um link apontando para ele.
As ncoras fazem distino entre maisculas e minsculas. Por isto, se o navegador no conseguir localizar o nome de uma ncora que tenha a grafia exata, possvel que ele tente selecionar outro nome semelhante contido na pgina. Isto varia em funo do comportamento do navegador.
Caminho Relativo
Quando voc especifica, entre aspas, apenas o nome do caminho de um arquivo vinculado, o navegador procura esse arquivo no diretrio em que est armazenado o arquivo atual. Isso ocorre, mesmo se o arquivo atual e o arquivo com que se est
Unidade 3
93
estabelecendo o vnculo estejam armazenados em um servidor localizado em algum outro ponto da rede. Os dois arquivos esto contidos no mesmo diretrio nesse servidor. Essa a forma mais simples de nomear o caminho relativo.
O caminho relativo deve ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual.
O nome de um caminho relativo pode conter tambm o nome de diretrio(s) ou indicar o caminho que voc tomaria para navegar at esse arquivo, se tivesse partido do diretrio ou pasta atual. Um nome de caminho pode conter, por exemplo, as direes a serem percorridas para subir dois nveis de diretrio e, em seguida, descer outros dois para obter acesso ao arquivo.
Os nomes de caminhos relativos indicam os arquivos com base em sua localizao relativa, ou seja, na posio em que se encontram em relao ao arquivo atual.
A tabela abaixo mostra alguns exemplos de nomes de caminhos relativos e seus significados:
Nome do caminho
HREF=arquivo.html
Descrio
Arquivo.html est localizado na pasta atual. Arquivo.html est localizado na pasta (ou diretrio) docs e a pasta docs est localizada na pasta atual. Arquivo.html est localizado na pasta situada um nvel acima da pasta atual (pasta ou diretrio superior). Arquivo.html est localizado na pasta docs, sendo que esta pasta est localizada dois nveis acima da pasta atual.
HREF=docs/arquivo.html
94
Linguagens de Programao I
A referncia cruzada entre arquivos armazenados no mesmo computador, mas em diretrios diferentes, merece bastante ateno. Digamos que existam dois diretrios colocados no mesmo nvel. Um, chamado msica; e o outro, comida. Um arquivo chamado rock.htm, do diretrio msica, deve fazer uma referncia ao arquivo feijoada.htm, do diretrio comida. A ncora de hipertexto do documento rock.htm deve ficar assim:
Pode-se colocar referncias do tipo <A NAME> em um documento longo, para que outras pessoas que estejam navegando na web possam fazer ligaes para determinadas partes do texto. Para citar uma determinada parte de outro texto, a referncia :
Neste caso, exemplo.htm o nome do arquivo referenciado, e captulo1 a referncia a uma parte daquele texto. Para usar links com caminhos relativos, preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando. Quando h alguma dvida, o melhor usar o caminho absoluto.
Unidade 3
95
Caminho Absoluto
Utilize o caminho absoluto, quando desejar referenciar um documento que esteja em outro servidor. No vnculo seguinte, por exemplo, oferecido um link para um documento no servidor WWW da Unisul:
Com esta mesma sintaxe, possvel escrever links para qualquer servidor de informaes da internet. Veja este outro exemplo:
So Carlos um <A HREF= /ambiente/saocarlos/histprog.html#polo>plo de alta tecnologia</A>.
Neste caso, foi produzido um link para um pargrafo marcado com <A NAME=polo> no arquivo histprogr.html sobre a cidade de So Carlos, no diretrio /ambiente/saocarlos/.
96
Linguagens de Programao I
Onde:
LINK - determina a cor dos links no 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 no confundir os usurios, a cor dos links j visitados deve ser uma verso mais clara da cor das ligaes ainda no visitadas.
Sntese
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
Ordenada
Sintaxe
<OL>contedo</OL>
Exemplo
<OL> <LI>item</LI> </OL> <UL> <LI>item</LI> </UL> <DL> <DT>termo</DT> <DD>definio</DD> </DL>
No Ordenada
<UL>contedo</UL>
Definio
<DL>contedo</DL>
Voc tambm aprendeu como criar vnculos de uma pgina outra na internet, atravs da tag <A> com o atributo HREF.
Unidade 3
97
Tipo de vnculo
Localizao Abrir Nova Janela Mail
Sintaxe
HREF=LOCALIZAO
Exemplo
<A HREF=http://link.da/pagina.html> texto</A> <A HREF=http://link.da/pagina.html TARGET=_ BLANK>texto</A> <A HREF=mailto:mail@sub.dominio> texto</A>
TARGET=_BLANK
HREF=mailto:MAIL
Atividades de autoavaliao
Leia com ateno e resolva a seguinte atividade de autoavaliao. 1. Voc pode colocar qualquer URL em um vnculo? Comente esta questo na ferramenta FRUM no Espao UnisulVirtual de Aprendizagem e discuta com os colegas!
Saiba mais
Aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. So Paulo: Editora rica, 2005. <http://www.clem.ufba.br/tuts/html/c07.htm> <http://www.criarweb.com/manuais/2/>
98
UNIDADE 4
Especificar o aspecto visual dos caracteres. Incluir caracteres especiais. Alterar a fonte e o tamanho da fonte.
Sees de estudo
Seo 1 Estilos de Caractere Seo 2 Caracteres Especiais Seo 3 Formatao do Texto Seo 4 As Tags <blink> e <marquee> Seo 5 Endereos
Os efeitos de apresentao na tela, a partir destes dois tipos de formatao, so os mesmos. O motivo da distino entre eles se deve ideia bsica de independncia entre especificao e apresentao. Ento, para alterar a aparncia de um conjunto de caracteres contidos no texto, voc pode usar esses dois estilos.
100
Linguagens de Programao I
Estilos Lgicos
As tags de estilo lgico indicam como o texto destacado dever ser utilizado, e no como ser apresentado (formatado). Elas se assemelham s tags de elementos comuns, utilizadas para pargrafos ou cabealhos. Essas tags podem indicar uma definio, um segmento de cdigo ou uma palavra enfatizada. Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve apresentar alguma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado. Estes detalhes de apresentao so deixados para o navegador - o dispositivo de apresentao do documento - que pode ser configurado de acordo com o usurio final. Desse modo, alm de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentao dos cabealhos, pargrafos, listas, etc. A formatao lgica segue o significado lgico do texto marcado: um endereo de e-mail, uma citao, etc. Sua apresentao final varia conforme o navegador, podendo oferecer resultados mais ricos. Cada tag de estilo de caractere contm lados de abertura e de fechamento e afeta o texto contido entre essas duas tags. Existem 8 tags padro para esse estilo:
Unidade 4
101
Definio
Exemplo
<CITE>Assisti Guerra nas Estrelas umas oito vezes!</CITE> <P> Este trecho foi citado no livro X <CITE>(Silva, 2006)</CITE></P> <CODE>for (x=0); cl &&(!feof(stdin)); x++)); </CODE> <CODE>#include teste.h#</CODE> <DFN>CERN: Centre d`studes et Recherches Nucleaires </DFN>
<CODE>
Para indicar trechos de cdigo de programas. Indica definio de uma palavra ou expresso. Em geral apresenta o texto em itlico. nfase. Indica que os caracteres devero ser enfatizados de alguma forma. Em geral, apresentada em itlico. Indica uma entrada via teclado, ou seja, o texto a ser digitado pelo usurio. Indica uma sequncia de caracteres, por exemplo, uma mensagem de erro ou um resultado ou um texto de exemplo. Semelhante a <CODE>. Forte nfase, mostrada normalmente em negrito. Indica variveis ou valores que o usurio dever escrever. Geralmente mostrado em itlico ou sublinhado.
<DFN>
<EM>
<KBD>
<SAMP>
<STRONG>
<VAR>
Estilos Fsicos
A formatao fsica especifica o estilo que se quer para o texto. Ou seja: existe um conjunto de tags que altera realmente o estilo de apresentao de um texto: itlico, grifado, negrito, espaamento, etc. Sua apresentao final no sofre grandes variaes. Assim como as tags de estilos de caractere lgico, cada
102
Linguagens de Programao I
tag de formatao fsica contm uma tag de abertura e uma tag de fechamento. As tags de estilo fsico so as descritas a seguir:
Tabela 4.2 - Estilos Fsicos
Definio
Negrito (Quando disponvel em alguns navegadores, pode aparecer sublinhado). Itlico. Fonte de mquina de escrever com espaamento uniforme (monoespaada). Sublinhado. Tachado. Fonte maior que a do texto ao redor. Fonte menor. Subscrito. Sobrescrito.
Exemplo
<B>Texto em negrito</B>
<I>
<I>Texto em itlico</I>
<TT>Texto monoespaado </TT> <U>Texto sublinhado</U> <S>Texto Tachado</S> Testando a <BIG>fonte</BIG> maior. Testando a <SMALL> fonte </SMALL> menor. Frase em estilo ndice, como em H2O. Frase em estilo expoente, como em Km2.
Utilize a Tag <U> com cuidado, pois ela se confunde com a apresentao 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:
Unidade 4
103
<B><I>Texto em negrito e itlico</I></B><P> <B><TT>Texto monoespaado em negrito</TT></B><P> <I><TT>Texto monoespaado em itlico</TT></I><P> <B><TT><I>Texto monoespaado em negrito e itlico</I></TT></B>
Ao contrrio de <PRE>, a tag <TT> ignora espaos em branco adicionais e entradas de pargrafo no meio do texto. Em relao ao espaamento, 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 no podero ser representadas visualmente.
104
Linguagens de Programao I
ASCII (American Standard Code for Information Interchange) um conjunto de cdigos para o computador representar nmeros, letras, pontuao e outros caracteres.
Unidade 4
105
Por exemplo, quando algum copia uma pgina web e a envia para outra pessoa atravs de correio eletrnico. Para contornar este problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam estes cdigos em caracteres acentuados, e o documento poder ser transmitido por qualquer meio. HTML permite que caracteres especiais sejam representados por sequncias de escape, indicadas por trs partes: um & inicial, um nmero 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é
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 cdigo semelhante a esta:
106
Linguagens de Programao I
A HTML no 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 incio de uma tag. Como nesse contexto o caractere < (menor que) no representa o incio de uma tag, o navegador ficar confuso. Outro problema trata da acentuao da palavra ento, que dever ser substituda pela sequncia correspondente. Dessa forma, para ser gravada de forma correta para a HTML, essa linha de cdigo deveria ser apresentada da seguinte forma:
Quatro caracteres ASCII: <, >, & e tm significados especiais em HTML e so usados dentro de documentos seguindo esta correspondncia:
Entidade < Caractere <
Unidade 4
107
> &
Outras sequncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em portugus:
Entidade
á â à ã ç é ê í ó ô õ ú ü
Caractere
Entidade
Á Â À Ã Ç
Caractere
108
Linguagens de Programao I
Como vemos, as sequncias de escape so sensveis caixa (alta ou baixa). Os editores de HTML fazem essa traduo automaticamente. Alguns editores, no entanto, mantm a acentuao, sem usar as entidades de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:
Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo:
Unidade 4
109
Tamanho da Fonte
O 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 atribudo fonte. Os valores desse atributo variam de 1 a 7, e o valor 3 corresponde ao tamanho padro. O modelo o seguinte:
110
Linguagens de Programao I
<FONT SIZE=tamanho_da_letra>Texto</FONT>
A formatao acima permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. Veja o exemplo a seguir:
<FONT SIZE=7>Texto</FONT>
Voc pode tambm indicar o tamanho na tag <FONT> como um valor relativo, atravs da utilizao dos caracteres + ou - no valor do atributo SIZE. Como o padro 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>
Unidade 4
111
A tag <FONT> pode ser atribuda a qualquer parte do texto, com exceo dos ttulos. No existe nenhuma relao entre os valores no atributo SIZE e o nmero 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=6>Texto com FONT SIZE=6</FONT><P> <FONT SIZE=5>Texto com FONT SIZE=5</FONT><P> <FONT SIZE=4>Texto com FONT SIZE=4</FONT><P> <FONT SIZE=3>Texto com FONT SIZE=3</FONT><P> <FONT SIZE=2>Texto com FONT SIZE=2</FONT><P> <FONT SIZE=1>Texto com FONT SIZE=1</FONT>
112
Linguagens de Programao I
Acompanhe a visualizao:
A tag <FONT> tambm pode ser utilizada com um atributo diferente para cada letra. A aplicao mais bvia a colocao de uma capitular, aquela letra em tamanho maior no incio de um pargrafo.
<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>
Figura 4.6 Exemplo de visualizao de tamanho de fonte diferente entre os caracteres de um texto.
Unidade 4
113
Tambm possvel 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.
Visualizao:
114
Linguagens de Programao I
esteja instalada no sistema. Se nenhuma das fontes especificadas for localizada, ser utilizada a fonte padro. O modelo de sintaxe completa da tag FONT ficaria assim:
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>
Acompanhe a visualizao:
Cores diferentes
As cores so introduzidas atravs do elemento <FONT>, com o atributo COLOR, usando o sistema RGB (red, green, blue) para cores, como j comentado na seo 2 da unidade 2:
Unidade 4
115
<FONT COLOR=#rrggbb>Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>. Podemos utilizar o sistema RGB como escrever o nome da cor indicada (porm navegadores antigos no 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>
Confira a visualizao:
116
Linguagens de Programao I
Tambm podemos realizar uma alterao simultnea 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>
BLINK
As tags <BLINK> e </BLINK> atribuem um efeito piscante ao texto. O perigo de se usar o BLINK que, se sua pgina j apresenta cores, desenhos, cabealhos, todos os efeitos que chamam a ateno do leitor, o BLINK ser ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. possvel substituir esse recurso por outros efeitos de JavaScript. Felizmente, so poucos os navegadores que mostram o efeito dessa formatao. O Internet Explorer um dos navegadores que no consideram o BLINK.
Unidade 4
117
Um exemplo seria:
Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande nmero, muito menos em frases inteiras ou cabealhos.
MARQUEE
Um texto pode entrar na pgina e percorr-la da direita para a esquerda ou em sentido contrrio. possvel obter esse efeito de animao de texto, atravs da formatao <MARQUEE>. Este o modelo para o uso do MARQUEE:
Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Tambm se podem aplicar cores, negrito, itlico, alterar a fonte e o seu tamanho, normalmente. Por exemplo (o efeito de MARQUEE s executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes):
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?
118
Linguagens de Programao I
Vamos visualizar o texto acima no seu navegador? No exemplo abaixo, o texto movimenta-se da direita para a esquerda. No se esquea de visualizar o movimento no seu navegador:
Definio
cor de fundo comportamento do texto direo do texto quantidade de vezes de repetio do texto espao entre o texto e a marquee espao entre as linhas da marquee altura em pixels largura em pixels
Exemplo
BGCOLOR =#FFFFFF BEHAVIOR =scroll ou slide ou alternate DIRECTION =right ou left LOOP =nombre ou infinite HSPACE =10 VSAPCE =5 HEIGHT =200 WIDTH =300
Unidade 4
119
Observe o resultado no seu navegador. O texto percorre continuamente (ele no para) o caminho da direita para a esquerda, conforme o resultado nos dois navegadores abaixo:
120
Linguagens de Programao I
Seo 5 - Endereos
A tag <ADDRESS> utilizada para entidades de assinaturas em pginas da web. Ela usada para formatar endereos, e-mail e referncias a autores de documentos. As tags de endereo em geral so apresentadas na parte inferior de cada pgina da web e utilizadas para indicar quem criou tal pgina. Veja o exemplo:
Envie suas dvidas sobre a entrega de seu material para <address>monitorvirtual@unisul.br</address>
Sntese
Tags, tags e mais tags! Nesta unidade, voc aprendeu a usar a maioria das tags para apresentao de texto e outras tags que oferecem outras opes de formatao de texto e apresentao de pgina. Voc poderia parar agora e criar algumas pginas 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, descrio e um exemplo. Vamos tentar? E a cada nova tag, v acrescentando nesta sua tabela.
Unidade 4
121
Atividades de autoavaliao
Caro aluno, leia o enunciado com ateno e responda questo. 1. At agora, voc j aprendeu muita coisa sobre as tags e tambm criou 2 pginas 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. Aps a formatao do texto, na pgina index.html, crie um link (vnculo) com a pgina MinhaLista.html. Verifique depois o resultado no seu navegador, iniciando em index.html.
Saiba mais
Aprofunde-se sobre formatao em HTML, consultando as seguintes referncias: WATRALL Ethan, SIARTO Jeff. Use a cabea Web-Design. So Paulo: Alta Books, 2009 <http://www.juliobattisti.com.br/tutoriais/ericogoncalves/ htmlbasico004.asp> <http://www.vas-y.com/dicas/curso/html/2_3.htm>
122
UNIDADE 5
Identificar os tipos de imagens que voc pode utilizar na web. Compreender como e quando incluir imagens em uma pgina na web. Criar vnculos com as imagens. Aprender a usar imagens para painis de fundo lado a lado. Inserir um arquivo de msica na web.
Sees de estudo
Seo 1 A tag <img> e seus atributos Seo 2 Referncia de hipertexto com imagem Seo 3 Painis de fundo com imagens Seo 4 Sugestes para um melhor uso das imagens Seo 5 Arquivos de udio
Linguagens de Programao I
Alguns editores de imagens tentaro gravar os arquivos com extenses compostas por letras maisculas (.GIF, .JPEG). Embora essas extenses sejam corretas, h distino entre letras maisculas e minsculas nos nomes das imagens, bem como nos nomes de arquivo em HTML. Por isso GIF no a mesma extenso que gif. A grafia da extenso no 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 possvel, utilize letras minsculas.
Graas aos formatos .jpg, .gif e .png, possvel utilizar imagens em diferentes aplicaes, at mesmo na definio de layout das pginas. A escolha do tipo de imagem no pode ser arbitrria, devem ser levadas em considerao todas as vantagens e desvantagens, principalmente no que se refere qualidade e tamanho. Uma boa prtica utilizar .png ou .jpg para imagens fotogrficas e .gif para imagens criadas em computador ou desenhadas (cones, botes, etc...). Os formatos de imagem explicados aqui so os mais utilizados e compatveis com os diversos tipos de navegadores, porm existem vrios outros tipos de imagens, cada um com caractersticas e finalidades diferentes.
125
pasta que contm a imagem que voc deseja incluir - esse nome deve ser digitado entre aspas. Esse o atributo mais importante da tag <IMG>. A forma genrica 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 contm a imagem. Pode, tambm, ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, no conveniente). Por exemplo, se quisermos mostrar o cone que aparece na pgina da Unisul Virtual, devemos usar o URL:
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 referncia quele servidor.
126
Linguagens de Programao I
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 cdigo 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 cdigo HTML acima. Vamos visualizar:
Observe que o nome de caminho referente ao arquivo utiliza as mesmas regras de nomes de caminhos usadas pelo atributo HREF em vnculos. 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>
Unidade 5
127
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 pgina na parte HREF da tag <A>, como j foi estudado na unidade 3. Quando o caminho no est correto ou o nome da figura est errado, o que aparecer no seu visualizador ser algo assim:
Se sua imagem no for carregada (e o seu navegador apresentar um cone esquisito no lugar dela), verifique, antes, se voc especificou corretamente o nome do arquivo no cdigo HTML. Se no for isso, examine o arquivo de imagem para verificar se ela est realmente no formato GIF ou JPEG e se tem a extenso de arquivo apropriada.
128
Linguagens de Programao I
ALT
De nada adianta voc caprichar na produo de uma imagem, se a pessoa que v as pginas utiliza um navegador incapaz de mostrar as imagens (sim, estes navegadores existem e so bastante utilizados, principalmente o Lynx). Outros usurios tambm ajustam o navegador para no carregar imediatamente as imagens. Por causa de conexes 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 funo do texto alternativo. Pode-se colocar o ttulo ou a melhor descrio possvel de uma imagem utilizando o atributo ALT. Veja a sintaxe a seguir:
<IMG SRC=URL_imagem ALT=descrio_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 grficos, como j citado. recomendvel que esteja sempre presente, pois este texto ser mostrado, em vez da imagem, caso o navegador no consiga apresent-la. O texto acompanhado do ALT aparecer quando o usurio passar o cursor em cima da imagem. uma legenda alternativa para a imagem.
Unidade 5
129
O atributo ALT deve ter uma descrio daquilo que a imagem contm, para que seja possvel compreender o seu contedo, mesmo sem v-la. A utilizao do atributo ALT recomendada, porque melhora a acessibilidade das pginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado por pessoas que tm deficincias visuais. Nesses casos, sem o atributo ALT, o contedo das imagens seria sempre um mistrio.
130
Linguagens de Programao I
Desta forma,
<IMG SRC=/icones/newred.gif ALT=Novo!>
Se a imagem estiver em um diretrio (ou pasta) diferente do arquivo de texto, como no exemplo acima, preciso especific-lo na referncia. Recomenda-se que as imagens sejam colocadas em um diretrio separado, para facilitar a manuteno dos arquivos.
WIDTH e HEIGHT
WIDTH e HEIGHT so atributos de dimenso da imagem em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicam a insero de uma imagem. Veja a sintaxe abaixo:
<IMG SRC=imagem ALT=descrio WIDTH=largura HEIGHT=altura>
Unidade 5
131
Uma das vantagens de se usarem esses atributos que o navegador pode montar mais rapidamente as pginas, por saber, de antemo, o espao que dever ser reservado a elas. Por isso, se as dimenses da imagem forem colocadas na referncia, o usurio ter a impresso de que a pgina foi carregada mais rpido. Fornecendo as dimenses, o navegador reserva o espao para a imagem e vai carregando o texto, para que o usurio possa comear a ler. Depois de carregado o texto, as imagens comeam a ser mostradas.
BORDER
Com o atributo BORDER, possvel 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, no se esquecendo de criar uma imagem com o nome de sol.gif em um editor de imagens. O resultado deve ser este:
132
Linguagens de Programao I
ALIGN
A tag <IMG> contm tambm 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 :
A HTML 2.0 define trs valores bsicos para o atributo ALIGN, que so os seguintes:
ALIGN=
top middle bottom
Definio
alinha a parte superior da imagem com a parte superior da linha. alinha o centro da imagem com a parte central da linha. alinha a parte inferior da imagem com a parte inferior da linha de texto.
Unidade 5
133
<IMG ALIGN=top SRC=imagem.jpg ALT=imagem>Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom. Pois provavelmente a prxima linha do texto ir para a linha abaixo da imagem.
Observe o resultado no seu navegador. semelhante ao que est sendo visualizado a seguir?
Vamos testar agora os dois cdigos 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 no seja muito bom. Pois provavelmente a prxima linha do texto ir para a linha abaixo da imagem.
Visualizao:
134
Linguagens de Programao I
<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 aps a imagem.
Visualizao:
Quando no especificado o atributo ALIGN, o padro utilizado pelo navegador o bottom. A incluso de uma imagem em uma linha funciona bem, quando voc tem apenas uma linha de texto. Se voc tiver vrias 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 automtico de vrias linhas de texto ao redor de uma imagem? Com a HTML 2.0 isso no possvel. Voc est, ento, 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 limitao, novos valores para o atributo ALIGN da tag <IMG> foram incorporados na HTML 3.2: left e right.
ALIGN=
right left
Definio
alinha uma imagem na margem direita. alinha uma imagem na margem esquerda.
Unidade 5
135
Mas o uso desses atributos faz tambm com que todo o texto localizado aps a imagem seja apresentado no espao 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.
Visualizao:
Linguagens de Programao I
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...
Voc pode incluir qualquer texto HTML aps uma imagem alinhada, e ser promovido o retorno automtico do texto no espao existente entre a imagem e a margem, ou entre 2 imagens, como no exemplo anterior. O navegador preenche o espao com texto at a parte inferior da imagem e, em seguida, continua a preencher com texto o espao 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 necessrio 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.
Unidade 5
137
Visualizao:
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 prxima margem livre, em qualquer um dos lados da janela.
HSPACE e VSPACE
Com a capacidade de promover o retorno automtico do texto ao redor de uma imagem, possvel que voc queira tambm ajustar o espao existente ao redor dessa imagem. Voc pode controlar o espao em volta da imagem, colocando o valor em pixels da margem desejada. possvel definir as margens separadamente, ou em conjunto. Os atributos HSPACE e VSPACE (introduzidos na HTML 3.2) permitem isso. O atributo VSPACE controla o espao acima e abaixo da imagem. Ou seja: os textos que forem escritos ao redor da imagem no ficaro grudados nela. A sintaxe a seguinte:
O atributo HSPACE controla o espao esquerda e direita da imagem. Ou seja: os textos que forem escritos ao redor da imagem no ficaro grudados nela. A sintaxe a seguinte:
138
Linguagens de Programao I
Esses atributos surgiram para melhorar ainda mais a apresentao das imagens junto com os textos. Tambm so conhecidos como atributos de moldura. O efeito desses atributos pode ser percebido nos textos a seguir. No primeiro texto, as imagens no tm atributos de moldura ( fcil 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.
e
<IMG align=right SRC=imagem.jpg alt=imagem WIDTH=110 HEIGHT=71 HSPACE=40>
Unidade 5
139
Neste segundo texto, a primeira imagem surgir com espaamento vertical em relao ao texto; e a segunda imagem, com espaamento horizontal em relao ao texto. Veja o resultado mostrado no navegador abaixo:
Vamos testar? Que tal, agora, voc utilizar os alinhamentos em conjunto, como no exemplo abaixo? Faa um teste no seu navegador. Crie uma imagem chamada imagem.jpg e guarde na mesma pasta do seu arquivo que contm o cdigo 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 visvel o uso dos atributos HSPACE e VSPACE. Podemos observar que as imagens no aparecem to grudadas agora ao texto. Isso em funo dos valores <br clear=all> atribudos aos atributos HSPACE e VSPACE utilizados em conjunto na mesma tag IMG.Na imagem direita foi colocada uma borda com espessura 3.
140
Linguagens de Programao I
Cada um desses atributos (HSPACE e VSPACE) adiciona espao nas duas faces da imagem (em cima e em baixo e direita e esquerda). Portanto no h como definir uma margem maior apenas esquerda ou somente na parte inferior.
Se uma frase marcada como ncora de um link, ento ela se apresenta sublinhada; se uma imagem se faz de ncora, ento ela
Unidade 5
141
ganha uma borda que indica a sua condio. 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>
142
Linguagens de Programao I
E confira o resultado:
Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, voc pode controlar esse detalhe.
Portanto a borda pode ser apresentada tanto em imagens que no so ncora de links como em links. Se voc incluir uma imagem e um texto na ncora, a imagem e o
143
Unidade 5
texto se tornaro pontos ativos que conduziro mesma pgina. Veja o exemplo:
<A href=http://www.bol.com.br> <IMG src=sol.gif border=0 alt=BOL>Clique aqui para ir pgina do BOL </A>
As imagens que so pontos ativos referentes a vnculos 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 contedos das pginas. Por isso, use-as com cuidado!
144
Linguagens de Programao I
<BODY background=fundo.gif>
Unidade 5
145
Caso o desenvolvedor necessite colocar uma imagem de fundo sem que a mesma seja repetida, utilizar tcnicas de folhas de estilo (CSS), que permitem a configurao visual de toda a pgina. O CSS ser abordado, ainda neste material, nas prximas unidades.
146
Linguagens de Programao I
Voc precisa realmente dessa imagem? - Para cada imagem que voc inserir na pgina da web, reflita sobre o motivo pelo qual a est incluindo. Essa imagem acrescenta algo ao projeto da pgina? Ela fornece informaes que poderiam ser substitudas por texto? Ou voc simplesmente a incluiu porque gosta do resultado produzido? Uma pgina simples, com apenas algumas imagens de cones, costuma produzir um efeito melhor do que uma pgina que apresenta uma imagem enorme, sofisticados botes 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 pgina da web ser carregada mais rapidamente e causa menos frustrao aos usurios que tentam l-la em uma conexo lenta de rede. Para criar imagens pequenas, voc pode reduzir as dimenses fsicas reais dessas imagens na tela. Pode, tambm, criar tamanhos de arquivos menores para as suas imagens atravs da reduo do nmero 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 conexo de 14,4 Kbps. Multiplique esse tempo pelo nmero de imagens contidas na pgina da web, e voc ver que a carga dessa pgina pode levar um tempo considervel. Procure reutilizar imagens! - Procure reutilizar as mesmas imagens o mximo possvel, em pginas isoladas e em vrias pginas. Se, por exemplo, voc tiver imagens como marcadores, use a mesma para todos os marcadores, em vez de usar diversas imagens. A reutilizao de imagens proporciona o projeto padronizado das pginas, que faz parte da criao 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. Fornea alternativas s imagens! - Se voc ainda no estiver utilizando o atributo ALT nas suas imagens, passe a us-lo. Esse atributo muito til, pois permite que a sua pgina da web seja lida por navegadores de texto.
Unidade 5
147
Onde:
A segunda maneira de adicionar msica 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 tambm pode ser usada com alguns atributos. Veja o exemplo:
<embed src=nome da msica autostart=true loop=10>
148
Linguagens de Programao I
Onde:
Em "nome da msica", voc coloca o nome e caminho do arquivo a mid ou wav. Em "loop", voc coloca o nmero de vezes que o som ser repetido. Em "autostart", voc define se quer que a msica comece a tocar sozinha (atributo TRUE). Caso contrrio, voc deve colocar FALSE, opo na qual o usurio ter que clicar no boto de play para ouvir a msica.
Se voc quiser que a msica fique se repetindo infinitamente, basta colocar infinity no lugar de um nmero. No necessrio colocar </embed> neste caso.
O Netscape e o Internet Explorer tm algumas diferenas em seu sistema e, por isso, em algumas verses do Netscape o som pode no tocar. recomendado usar arquivos mid por serem bem menores que os wavs.
Unidade 5
149
Sntese
Um dos principais recursos que fazem a WWW se destacar em relao aos outros documentos de informaes da internet consiste na capacidade dos documentos da web conterem imagens em cores. Com certeza, foi graas a essas imagens que a web se tornou to conhecida e utilizada em um curto perodo de tempo. Para serem inseridas em pginas da web, as imagens precisam estar no formato GIF, PNG ou JPG e ter dimenses suficientemente reduzidas para poderem ser carregadas rapidamente por download em uma conexo lenta. Nesta unidade, voc tambm aprendeu que a tag <IMG> da HTML permite inserir uma imagem na pgina da web, utilizando atributos bsicos, que contam com o suporte da HTML padro:
Tipo
Localizao
Sintaxe
SRC=localizao WIDTH=tamanho (em pixels ou % da pgina) HEIGHT=tamanho (em pixels ou % da pgina) BORDER=tamanho (em pixels) ALT=texto (usa-se em caso de no aparecer a imagem) ALIGN=tipo (o modo como a imagem ser posicionada verticalmente em relao ao texto existente ao redor)
Exemplo
<IMG SRC=linkdaimagem.tipo>
Comprimento
Altura
Borda
Alternativa
Alinhamento
Alm das imagens, voc aprendeu a incluir painis de fundo compostos por padres ou imagens lado a lado, atravs do atributo BACKGROUND, da tag <BODY>, com a imagem que ser usada para compor o painel.
150
Linguagens de Programao I
Atividades de autoavaliao
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua autoavaliao. 1. Que tal acrescentar como sua atividade de autoavaliao um arquivo mid em sua pgina index.html?
Saiba mais
Voc pode saber mais sobre o assunto estudado nesta unidade, consultando as seguintes referncias: LEMAY, Laura. Aprenda a criar pginas web com HTML e XHTML em 21 dias. So Paulo: Makron Book Editora, 2002. E os seguintes sites: <http://www.silicio.com.br/html/dicas/abertura.html>(Silcio: o portal brasileiro na internet) <http://www.w3schools.com/html/html_images.asp> (HTML Images)
Unidade 5
151
UNIDADE 6
Tabelas
Objetivos de aprendizagem
Definir tabelas em HTML. Criar legendas, clulas de cabealho e de dados. Modificar o alinhamento da clula. Criar clulas que ocupam vrias linhas ou colunas. Trabalhar com cores nas tabelas. Elaborar tabelas nos seus documentos da web.
Sees de estudo
Seo 1 Elementos bsicos de tabelas Seo 2 Alinhamento da tabela e das clulas Seo 3 Dimenses da tabela Seo 4 Cor em tabelas
154
Linguagens de Programao I
Legenda - indica o assunto ao qual a tabela se refere, como por exemplo, Estatsticas das Eleies. As legendas so opcionais. Cabealhos da tabela - identificam as linhas ou as colunas, ou ambas. Em geral, os cabealhos da tabela so apresentados em uma fonte maior ou enfatizada, de alguma forma diferente em relao ao restante da tabela. Os cabealhos da tabela tambm so opcionais. Dados da tabela - consistem nos valores que compem a tabela. A combinao dos cabealhos com os dados resulta na parte essencial da tabela. Clulas da tabela - consistem em cada um dos quadrados que a compem. Uma clula pode conter dados normais de tabela ou um cabealho de tabela.
Feitas estas consideraes preliminares, vamos aprender algumas tags prprias para a formatao da tabela:
A tag <TABLE>
Para criar uma tabela em HTML, utilize as tags <TABLE>...</ TABLE> que contm o cdigo referente a uma legenda e o contedo da prpria tabela.
Unidade 6
155
O atributo mais comum da tag <TABLE> o atributo BORDER, que indica a apresentao da borda. Veja o exemplo:
<TABLE BORDER=borda> ... </TABLE>
Definir BORDER= 0 significa que a borda no tem largura e, portanto, no 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. Alm disso, se voc omitir o atributo BORDER, os navegadores no devero apresentar uma borda. As tabelas sem borda so teis quando voc deseja usar a estrutura da tabela para fins de layout, mas no quer, necessariamente, apresentar a estrutura de uma tabela na pgina.
Linhas e clulas
Entre as tags <TABLE>...</TABLE> voc define o contedo da tabela. As tabelas so especificadas linha por linha em HTML, e a definio de cada linha contm definies referentes a todas as clulas dessa linha. Por isso, para definir uma tabela, voc comea definindo a primeira linha e cada uma de suas clulas. Em seguida, define a segunda e suas respectivas clulas e assim por diante. As colunas so calculadas automaticamente, com base na quantidade de clulas 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 vrias clulas, que so indicadas pelas tags <TH>...</TH> (para clulas de cabealho) e <TD>...</TD> (para clulas de dados). Voc pode ter quantas linhas quiser e quantas clulas forem necessrias em cada linha, para compor as suas colunas. Mas deve verificar se cada linha tem o mesmo nmero de clulas, para que as colunas fiquem alinhadas.
156
Linguagens de Programao I
Legendas
As legendas de tabela informam ao leitor o assunto da tabela. Embora voc possa simplesmente usar um pargrafo normal ou um cabealho como um rtulo para a sua tabela, a tag <CAPTION> tem justamente essa finalidade de legenda. Mas o que fazer, se voc no quiser usar uma legenda? Voc no precisa inclu-la. As legendas so opcionais. A tag <CAPTION> includa na tag <TABLE>, antes das linhas da tabela, e contm o ttulo da tabela. Ela fechada pela tag </CAPTION>. O atributo ALIGN da legenda determina o seu alinhamento. Por padro, 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:
Unidade 6
157
A tag <TH> indica uma clula que tambm um cabealho da tabela, e a tag <TD> indica uma clula comum da tabela (TD significa Table Data = dados da tabela). Os cabealhos geralmente so apresentados de forma diferente das clulas da tabela, como por exemplo, em uma fonte em negrito. O exemplo anterior mostra um cabealho apresentado na borda superior da tabela, atravs da tag <TH> includa na primeira linha. Para apresentar os cabealhos na borda esquerda da tabela, inclua cada uma das tags <TH> na primeira clula de cada linha, como neste exemplo:
<TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR> <TH>Linha 1</TH> <TD>linha 1, coluna 1</TD> </TR> <TR> <TH>Linha 2</TH> <TD>linha 2, coluna 1</TD> </TR> </TABLE>
158
Linguagens de Programao I
Os cabealhos e os dados da tabela podem conter qualquer texto ou cdigo HTML, ou ambos, incluindo vnculos, listas, formulrios, imagens e outras tabelas.
Clulas vazias
E se voc quisesse ter uma clula sem qualquer contedo? Isto simples. Basta definir uma clula 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 clula vazia deste tipo apresentada, como se a clula no existisse:
Unidade 6
159
Se voc quiser forar a apresentao de uma clula vazia, pode incluir uma quebra de linha nessa clula, sem inserir texto algum:
<TABLE BORDER=3> <TR> <TD><BR></TD> <TD>20</TD> <TD>30</TD> </TR> </TABLE>
160
Linguagens de Programao I
Alinhamento da tabela
Os elementos dentro da tabela podem ser alinhados da mesma forma que um pargrafo comum. Por padro, as tabelas so apresentadas em uma linha no lado esquerdo da pgina, 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 automtico do texto ao redor delas, exatamente como faria com as imagens. As linhas e clulas podem ter alinhamentos definidos atravs dos atributos:
Esses atributos devem ser usados dentro das tags <TR> e <TD> (alm de <TH>, se for o caso). Por padro, as clulas de dados so alinhadas:
Unidade 6
161
Alinhamento da clula
Quando as suas linhas e clulas estiverem na posio adequada e a tabela estiver alinhada corretamente na pgina, voc poder, ainda, alinhar os dados contidos em cada clula para obter o melhor efeito possvel com base no contedo da sua tabela. As tabelas oferecem vrias opes para o alinhamento dos dados contidos nas clulas, tanto na horizontal como na vertical. Alinhamento horizontal:
ALIGN=LEFT: alinha o contedo esquerda. ALIGN=RIGHT: alinha o contedo direita. ALIGN=CENTER: alinha o contedo ao centro.
Alinhamento vertical:
VALIGN=BASELINE: mantm 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 contedo no topo. VALIGN=MIDDLE: alinha o contedo ao centro. VALIGN=BOTTOM: alinha o contedo na base da clula.
162
Linguagens de Programao I
A tabela acima foi feita especialmente para mostrar as diferenas entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas clulas ao contedo, desta seguinte forma:
Confira a visualizao:
Vamos utilizar um texto mais longo na segunda clula da segunda coluna, para demonstrar o alinhamento padro.
<TABLE BORDER=1> <TR> <TH>Ttulo 1</TH> <TH>Ttulo 2</TH> </TR> <TR> <TD>Clula 1</TD> <TD><B>Clula 2</B><P> Quando existe um texto longo, a clula expandida at margem da janela do navegador. Para controlar a apresentao de texto dentro da tabela, pode-se modificar as dimenses da clula. </TD> </TR> </TABLE>
Unidade 6
163
A visualizao esta:
Observe que a largura da coluna da direita foi ampliada para que o texto da clula 2 aproveitasse at o final da margem do navegador. Se a largura da janela do navegador for diminuda, tambm diminui a largura da segunda coluna. Vamos, agora, melhorar a aparncia da tabela ajustando a largura da clula 2 em 300 pixels. Assim, a largura de toda a segunda coluna ser ajustada. Aproveitamos este exemplo para alinhar o texto da clula 1 no topo e mudar a largura da borda da tabela. Se voc observar, tambm as clulas de cabealho por padro so centralizadas verticalmente e horizontalmente:
<TABLE BORDER=3> <TR> <TH>Ttulo 1</TH> <TH>Ttulo 2</TH> </TR> <TR> <TD valign=top>Clula 1</TD> <TD width=300><B>Clula 2</B><P> A largura de cada clula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD> </TR> </TABLE>
164
Linguagens de Programao I
Alinhamento combinado
Repare que uma mesma clula pode ter atributos ALIGN e VALIGN combinados:
ALIGN=RIGHT, VALIGN=MIDDLE
Alinhamento de linhas
Acima, voc viu o alinhamento na tag TD. O alinhamento pode ser aplicado a linhas inteiras na tag da linha TR, com a seguinte sintaxe:
Porm o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v no exemplo:
Unidade 6
165
Center
center TD VALIGN=top
center
TD ALIGN=right
bottom
bottom
bottom
166
Linguagens de Programao I
Agora vamos expandir as clulas, para que ocupem o espao de mais de uma linha.
<TABLE BORDER=3> <TR> <TD ROWSPAN=2>Clula expandida</TD> <TD>Clula 1</TD><TD>Clula 2</TD> </TR> <TR> <TD>Clula 3</TD><TD>Clula 4</TD> </TR> </TABLE>
Unidade 6
167
A soluo necessria para fazer uma clula expandida diferente em cada um dos exemplos anteriores. No caso da clula expandida na largura de duas colunas, ela ficou em uma linha diferente das clulas 1 e 2. No segundo exemplo, para deixar a clula expandida da altura de duas linhas, foi preciso coloc-la na mesma linha das clulas 1 e 2. Podemos expandir colunas e linhas em uma mesma tabela. Os dados contidos nessa clula preenchero a largura ou o comprimento das clulas combinadas, como no exemplo a seguir:
<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>trs linhas</TD></TR> </TABLE>
Vamos testar o cdigo acima no seu navegador? Ele ficou parecido com o que est sendo visualizado abaixo? timo! Se no ficou, no se desespere, verifique se no esqueceu de fechar alguma tag. Ou ser que no faltou algum cdigo HTML? Observe!
168
Linguagens de Programao I
Neste exemplo, perceba que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN= 2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN= 3). A identao no cdigo HTML facilita a visualizao de possveis erros e at o entendimento do cdigo. Uma outra maneira de identarmos o cdigo 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>trs linhas</TD> </TR> </TABLE>
Identao significa organizar o cdigo HTML para o mesmo tornar-se legvel, sabendo, por exemplo, onde inicia e termina uma tag ou, ainda, sabendo quais tags ou texto esto dentro de outras tags. Organizamos o cdigo, utilizando espao ou a tecla TAB.
Quais das visualizaes dos cdigos em HTML para o exemplo acima parecem ser mais legveis a voc? Observe que os dois cdigos representam a mesma coisa, ou seja, trazem como resultado a mesma tela do navegador mostrada anteriormente.
Unidade 6
169
WIDTH: para definir a largura da tabela. HEIGHT: para definir a altura da tabela.
CELLPADDING: para definir a margem dentro das clulas. CELLSPACING: para definir o espao entre as clulas.
Acompanhe o exemplo:
<TABLE BORDER=2 WIDTH=400 HEIGHT=200 CELLPADDING=20 CELLSPACING=20> <TR> <TD ROWSPAN=2>Clula expandida</TD> <TD>Clula 1</TD><TD>Clula 2</TD> </TR> <TR> <TD>Clula 3</TD><TD>Clula 4</TD> </TR> </TABLE>
170
Linguagens de Programao I
A visualizao a seguinte:
Os atributos WIDTH e HEIGHT tambm podem ser utilizados para definir o tamanho de clulas especficas. Neste caso, devem ser colocados dentro da tag <TD> (ou <TH>). Vamos estudar detalhadamente cada um deles a seguir.
Atributos de largura
J foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo. Por exemplo:
Para apresentar uma tabela ocupando determinado espao disponvel na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado, tambm, a linhas e clulas. Essa largura pode ser definida:
Unidade 6
171
A seguir, um exemplo de uma tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel na tabela:
<TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD> </TR> </TABLE>
172
Linguagens de Programao I
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 dimenso de seu contedo. Ou seja: a tabela ocupar 50% do espao disponvel com uma coluna de 1%. Os ajustes farse-o s outras colunas para a ocupao dos 50%:
<TABLE BORDER= 1 width= 50%> <TR> <TD>janeiro</TD><TD width= 1%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD> </TR> </TABLE>
Unidade 6
173
Atributos de espaamento
Como voc j verificou, existem dois atributos que permitem o controle de espaamento em tabelas:
CELLPADDING estabelece o espao entre o texto e as bordas da clula. CELLSPACING estabelece o espao entre clulas.
Agora, vamos alterar o espao entre o texto e as bordas do exemplo anterior, colocando na tag TABLE, o seguinte cdigo:
174
Linguagens de Programao I
Figura 6.18 Exemplo de preenchimento das bordas da tabela (afastamento entre as clulas).
Podemos, ainda, combinar os dois atributos, alterando o espao entre texto e bordas alm do espao entre clulas, conforme exemplo abaixo:
<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>
Unidade 6
175
Voc, agora, j viu grande parte dos recursos disponveis para manipular tabelas, que permitem produzir bons efeitos de apresentao. Vamos, ento, estudar as cores em tabelas?
Cor de fundo
Para alterar a cor de fundo de uma tabela, de uma linha ou de uma clula 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>
176
Linguagens de Programao I
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 pgina; o fundo de uma linha anula o fundo da tabela; e as cores das clulas anulam todas as outras cores. Podemos colocar cor de fundo em clulas especficas 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>maro</TD> </TR> <TR> <TD>abril</TD> <TD BGCOLOR=#E1FFD9>maio</TD> <TD>junho</TD> </TR> </TABLE>
A visualizao a seguinte:
Unidade 6
177
Cor de borda
Alguns navegadores permitem que voc altere as cores dos elementos da borda da tabela atravs da utilizao dos seguintes atributos:
BORDERCOLOR - define a corda da borda, anulando o aspecto tridimensional da borda padro. BORDERCOLORLIGHT - define o componente claro de bordas tridimensionais. BORDERCOLORDARK - define o componente escuro de bordas tridimensionais.
Acompanhe o exemplo:
178
Linguagens de Programao I
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=10 BORDERCOLOR=#00FF00> <TR> <TD bgcolor=#E1FFD9>janeiro</TD> <TD>fevereiro</TD> <TD bgcolor=#E1FFD9>maro</TD> </TR> <TR> <TD>abril</TD> <TD bgcolor=#E1FFD9>maio</TD> <TD>junho</TD> </TR> </TABLE>
A visualizao esta:
Combinando cores
O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada clula. Basta acrescentar o atributo BGCOLOR com a cor desejada s tags de clula. Em algumas combinaes de cores, ser necessrio tambm modificar a cor das letras. Isso feito com o atributo COLOR dentro da tag <FONT>. Veja o exemplo:
Unidade 6
179
<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>
Visualizao:
180
Linguagens de Programao I
Sntese
Para melhor auxiliar voc nos seus estudos, segue abaixo uma sntese das tabelas com os atributos de tabela, coluna e linha:
Sintaxe
<TABLE>...</TABLE> <CAPTION>...</CAPTION> <TR>...</TR> <TH>...</TH> <TD>...</TD>
Definio
define a tabela define o ttulo da tabela delimita uma linha define um cabealho para colunas ou linhas (dentro de <TR>) delimita um elemento ou clula (dentro de <TR>)
Sintaxe
ALIGN=LEFT|RIGHT|CENTER
Exemplo
<TABLE ALIGN=CENTER>texto</TABLE>
Borda
<TABLE BORDER=1>texto</TABLE>
Comprimento
<TABLE WIDTH=20%>texto</TABLE>
Altura
Cor de fundo
BORDERCOLOR=COR
<TABLE BORDERCOLOR=orange>texto</TABLE>
BORDERCOLORDARK=COR
<TABLE BORDERCOLORDARK=red>texto</TABLE>
<TABLE BORDERCOLORLIGHT=yellow>texto</TABLE>
Unidade 6
181
Sintaxe
ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM
Exemplo
<TR ALIGN=CENTER>texto</TR>
Sintaxe
ALIGN=LEFT|RIGHT|CENTER e VALIGN=TOP|MIDDLE|BOTTOM COLSPAN=NMERO ROWSPAN=NMERO BGCOLOR=COR
Exemplo
<TD ALIGN=CENTER>texto</TD> <COLSPAN=2>texto</TD> <ROWSPAN=2>texto</TD> <TD BGCOLOR=#123456>texto</TD>
Existe tambm o <TH>, que como o <TD>, mas ele j vem com o atributo negrito e centralizado como padro.
Atividades de autoavaliao
Leia com ateno o enunciado seguinte e resolva a atividade programada para a sua autoavaliao. 1. Caro(a) aluno(a), voc consegue reproduzir o cdigo HTML que est sendo mostrado no navegador abaixo? Vamos tentar?
182
Linguagens de Programao I
Pior que os acentos... A formatao de tabelas complicada, e o texto fonte chega a ser quase ininteligvel, quando montamos tabelas complexas e fazemos uso de seus diversos atributos. A melhor opo para voc montar sua tabela, sem dvida, usar os editores WYSIWYG. Alguns editores de modo texto tm uma interface grfica que ajuda na criao de tabelas, mas a edio de tabelas j existentes precisa ser feita mo.
Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: <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 Avanado)
Unidade 6
183
UNIDADE 7
Frames
Objetivos de aprendizagem
Construir Frames. Utilizar os atributos de FRAMESET. Utilizar os atributos para FRAME. Definir a janela alvo atravs do atributo TARGET.
Sees de estudo
Seo 1 Links com frames Seo 2 Composio com frames Seo 3 Atributos de FRAMESET Seo 4 Atributos de FRAME Seo 5 Tag NOFRAMES
Bookmark um atalho que marca o endereo de um site j acessado para ser acessado novamente. Os navegadores possibilitam armazenar bookmarks ou favoritos, que guardam a URL dos sites, tornando fcil visit-los novamente. uma lista de endereos j visitados na internet.
186
Linguagens de Programao I
A figura seguinte mostra que necessrio um mnimo de quatro documentos distintos para criar uma tela como a representada a seguir:
O documento que implementa frames, em que se define a estrutura das janelas, conhecido como Frame Document. nele que se estabelece o nmero de janelas desejado e a sua distribuio na tela. Dentro de um Frame Document, as marcaes <BODY> e </BODY> so substitudas por <FRAMESET> e </FRAMESET>.
Unidade 7
187
Observe que, dentro de um FRAMESET, no se pode utilizar nenhum outro dos elementos vlidos no corpo de um texto HTML comum.
<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 pgina 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 diviso da pgina em quadros. Neste caso, a pgina ser
188
Linguagens de Programao I
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, no foi configurado o nmero de linhas (ROWS) do FRAMESET. Como veremos a seguir, as composies de linhas e colunas seguem um padro diferenciado, de forma que no possvel a definio dos dois atributos (ROWS e COLS) simultaneamente. Observe que, dentro da formatao de FRAMESET, temos os FRAME SRC, os quais fazem referncias s pginas que sero mostradas nos frames definidos. O caminho das pginas a serem inseridas como frames (no exemplo: ndice1.html e texto.html) seguem a mesma padronizao para a insero de imagens; neste caso, os dois arquivos esto no mesmo diretrio do frame document (arquivo que contm a tag FRAMESET). Assim, no cdigo descrito acima, a pgina ndice1.html ser mostrada na primeira coluna (que ocupar 20% da tela), e a pgina texto.html ser mostrada na segunda (ocupando 80% da tela). O contedo do arquivo ndice1.html este:
<HTML> TESTANDO FRAME... 20% </HTML>
Unidade 7
A formatao de frames inclui tambm uma parte NOFRAME, a qual mostrada normalmente pelos navegadores que no suportam sua apresentao.
Linguagens de Programao I
<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 pgina do assunto X!</h2> <P> Bl bl bl bl bl bl bl bl bl bl </BODY> </NOFRAME> </FRAMESET> </HTML>
Veja que, no cdigo 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 contedo:
<HTML> TESTANDO FRAME... 20% <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 pgina de destino do link (apresenta.html) ser mostrada.
Unidade 7
191
Quando clicarmos em Exemplo n 2, no frame da esquerda, o resultado ser mostrado no frame da direita, conforme figura a seguir:
Se voc no 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 bsica de FRAMES em HTML fundamental!
192
Linguagens de Programao I
Limpando a tela
H basicamente dois efeitos possveis para limpar a apresentao 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 pgina de destino na tela inteira. TARGET="_blank abre uma nova janela do browser para apresentar a pgina de destino.
a nomeao dos frames; e a declarao dos targets dos links, que definem o frame no qual as pginas de destino sero mostradas.
Embora quase todos os editores WYSIWYG de HTML deem suporte criao de frames, necessrio que o autor se preocupe com os detalhes de nomeao de frames e de direcionamento de links.
Unidade 7
193
</FRAMESET>
</FRAMESET>
Para montar esta estrutura abaixo, voc deve criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:
<FRAMESET COLS=x, y> <FRAME SRC=col1.html> <FRAMESET ROWS=x, y>
Figura 7.7 - Exemplo de dois FRAMES em coluna e dois FRAMES em linha.
194
Linguagens de Programao I
Para montar a estrutura abaixo, crie primeiro dois frames em linha e componha a segunda linha com dois frames em coluna:
As composies com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.
ROWS
Este atributo define divises horizontais entre janelas. Vem sempre acompanhado de valores que definem que espao 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 vrgula. Veja a sintaxe:
195
Unidade 7
Percentual (ROWS=25%,25%,50%)
Relativo (ROWS=*,*,2*)
No ltimo caso, do valor relativo, o * funciona como uma varivel: ao serem somados os valores de cada um dos campos em que ser dividida a tela, deve-se obter 1 (um). No exemplo anterior, teramos 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*). Tambm possvel combinar os valores numricos, percentuais e relativos, como demonstram os exemplos a seguir. Veja como dividir a tela do navegador em trs janelas horizontais, com a do meio mais larga que as de cima e de baixo.
196
Linguagens de Programao I
<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>
Se os arquivos Exemplo1.html, Exemplo2.html e Exemplo3.html no existirem, o resultado na tela naquele frame que indica um dos arquivos inexistente aparecer com a mensagem A pgina no pode ser exibida.
Unidade 7
197
Voc tambm pode propor trs janelas horizontais: a primeira e a ltima com altura fixa, e o frame central ocupando o restante do espao ( o prprio navegador que define qual o tamanho do frame central, de acordo com o espao que sobra na tela aps a definio 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>
Figura 7.10 Exemplo do uso de FRAMES em linha com o FRAME central mais largo.
198
Linguagens de Programao I
Na definio do Frame Document anterior, cada janela (frame) corresponde a um elemento FRAME, que indica, no mnimo, a URL que ser associada a essa regio da tela, atravs do atributo SRC. O elemento FRAME e seus atributos sero descritos em breve.
COLS
O atributo COLS funciona exatamente como a marcao anterior (inclusive no que diz respeito ao modo de apresentao 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>
Unidade 7
199
200
Linguagens de Programao I
Da mesma maneira que nos exemplos das linhas (ROWS), o navegador ir definir sozinho qual o tamanho da segunda clula do atributo COLS. Para intercalar janelas verticais e horizontais, necessrio definir vrias reas FRAMESET. Para cada rea delimitada com FRAMESET, pode-se definir o nmero de linhas ou colunas. Contudo no possvel 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> <!-- O tag HTML abaixo divide a tela em duas linhas --> <FRAMESET ROWS=30%,70%> <FRAME SRC=exemplo1.html> <!-- A linha de cdigo abaixo divide a segunda linha em duas colunas --> <FRAMESET COLS=50%,50%> <FRAME SRC=exemplo2.html> <FRAME SRC=exemplo3.html> </FRAMESET> </FRAMESET> </HTML>
Unidade 7
201
FRAMEBORDER
Este atributo especifica se os frames do FRAMESET devem apresentar uma borda, ou no. Se ele for omitido, ser usado o valor (yes ou no) do FRAMESET mais externo. Se nenhum FRAMESET apresentar este atributo, ento, o valor padro (com bordas) ser usado. O modelo o seguinte:
(FRAMEBORDER=yes|no)
Eis um exemplo:
<FRAMEBORDER=no>
202
Linguagens de Programao I
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=200,* FRAMEBORDER=no> <FRAME SRC=exemplo1.html> <FRAME SRC=exemplo2.html> </FRAMESET> </HTML>
Unidade 7
203
BORDER
Este 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>
BORDERCOLOR
Este 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 padro RGB:
<BORDERCOLOR=blue>
204
Linguagens de Programao I
SRC
O atributo SRC define a URL que ser exibida em cada frame. Ele pode ser omitido caso se deseje criar uma regio em branco na tela. A sintaxe esta:
(SRC=url)
Veja o exemplo:
<FRAME SRC=ndice.html>
Unidade 7
205
NAME
Esse atributo utilizado para associar um nome a uma das divises do Frame Document. Deve ser usado quando se deseja especificar onde (em que janela) documentos devem ser carregados. um atributo opcional. Por padro, os frames no tm nome, mas, quando acontece de se estabelecerem nomes para janelas, estes devem comear com caractere alfanumrico. A sintaxe a seguinte:
(NAME=nome)
Acompanhe o exemplo:
<FRAME SRC=inicial.html NAME=navega>
MARGINWIDTH
Este atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser em valor absoluto em pixels. O menor valor aceito 1. um atributo opcional. Caso no esteja definido, o navegador usar o seu padro para definir as margens dos frames ou janelas. A sintaxe a seguinte:
(MARGINWIDTH=valor)
Observe o exemplo:
<FRAME SRC=ndice.html MARGINWIDTH=3>
206
Linguagens de Programao I
MARGINHEIGHT
Tambm 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>
SCROLLING
Novamente, temos um atributo opcional. Com SCROLLING definido se uma janela deve possuir barra de rolagem, ou no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o navegador aplicar a barra, quando necessrio. O valor padro AUTO. Portanto, se o atributo SCROLLING no for definido, o navegador aplicar a barra de rolagem janela em questo, automaticamente, toda vez que o contedo da pgina HTML no couber completamente no frame. A sintaxe esta:
(SCROLLING=yes/no/auto)
Observe o exemplo:
<FRAME SRC=ndice.html SCROLLING=yes>
Unidade 7
207
<FRAMESET COLS=20%, 80%> <FRAME SRC=ndice.html SCROLLING=no> <FRAME SRC=apresenta.html NAME=principal> </FRAMESET>
A barra de rolagem de um frame fica sempre direita. No possvel, atualmente, mudar esta caracterstica.
NORESIZE
NORESIZE tambm opcional. Este atributo no possui valor associado; quando ele no aparece, o usurio poder alterar o tamanho da janela, arrastando a sua borda com o mouse. Caso contrrio, a janela ter sempre um tamanho inaltervel. Normalmente, todas as janelas podem ter seu tamanho alterado, j que navegadores diferentes estaro sendo utilizados por diferentes pessoas, e as pginas podem no caber na tela, impedindo que os usurios possam l-las. Eis um exemplo:
208
Linguagens de Programao I
<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>
Unidade 7
209
210
Linguagens de Programao I
Esta parte do cdigo s ir aparecer no seu navegador caso o mesmo no 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:
Caso o seu navegador NO suporte o uso de frames, surgir na tela a seguinte mensagem:
Figura 7.17 Exemplo do uso da tag NOFRAMES quando o navegador no aceita FRAME.
Unidade 7
211
Sntese
E assim acaba nossa unidade. Neste momento, voc tem os conhecimentos suficientes para a construo de um web site bsico. Agora, com um bocado de imaginao, pode fazer um bom web site. Os Frames so interessantes para apresentar conjuntos de pginas com um ndice fixo para a navegao. Alm disso, com este recurso, torna-se possvel mostrar diversas pginas e/ou mdias em uma nica janela do browser. Tenha o cuidado de procurar controlar a navegao, evitando que o acionamento de links leve o leitor a ver seu navegador criar frames dentro de frames, gerando uma grande confuso. Evite isso, utilizando a tag TARGET, como vimos na seo 1 desta unidade.
Atividades de autoavaliao
Leia com ateno e resolva as atividades programadas para a sua autoavaliao. 1 Crie o frame a seguir para ser visualizado no seu navegador: Cabealho.html
Menu.html
Principal.html
Rodap.html
212
Linguagens de Programao I
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
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: <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/>
Unidade 7
213
UNIDADE 8
Utilizar as tags HTML 2.0, 3.2 ou 4. Criar pginas HTML de modo a serem facilmente consultadas. Elaborar um layout adequado de pginas da web. Compreender quando e por que criar vnculos. Identificar elementos/ atributos obsoletos (deprecated).
Sees de estudo
Seo 1 Uso das extenses HTML Seo 2 Seu texto na web Seo 3 Projeto e layout da pgina Seo 4 Uso de vnculos Seo 5 Outras sugestes de bons hbitos Seo 6 Elementos e atributos obsoletos
Tags da HTML 2.0. Recursos da HTML 3.2 e 4, como por exemplo, frames, tabelas, divises, painis de fundos, cores e folhas de estilos, que contam com o suporte da maioria, mas no de todos os navegadores. Tags especficas dos navegadores, que podem, ou no, se tornar parte da especificao 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.
Se voc considera tal situao confusa, saiba que no o(a) nico(a). Os autores e projetistas esto tentando esclarecer
216
Linguagens de Programao I
essa confuso e tomar decises com base no aspecto visual que desejam atribuir s suas pginas. As extenses HTML oferecem maior flexibilidade no layout, mas limitam o pblico que pode ver essas pginas da maneira que voc deseja que elas sejam exibidas. A escolha de uma estratgia para a utilizao de extenses HTML uma das mais importantes decises de projeto que voc far, ao criar pginas da web. Se o autor da web quer o maior pblico possvel para suas pginas da web, ento ele deve se manter fiel s tags da HTML 2.0, conforme definidas pelo padro. Voc pode criar um documento da web magnfico com as tags da HTML 2.0, e esse documento tem uma grande vantagem em relao a muitos documentos experimentais, pois ele reconhecido sem qualquer dificuldade pela grande maioria dos navegadores e atinge, portanto, o maior pblico possvel. Se o autor da web, por outro lado, deseja ter sobre o layout de pginas o tipo de controle que as mais avanadas tags proporcionam e est disposto a perder boa parte de seu pblico para conseguir isso, ento ele utilizar as mais novas inseres propostas pela HTML 4. As pginas para esse autor so elaboradas para poucos navegadores, so testadas somente nesses navegadores, e possvel, inclusive, que haja um aviso na pgina, informando em qual navegador a pgina deve ser lida. Na maioria das vezes, se voc usar outro navegador para ler essas pginas, o resultado poder ser bem confuso, quando no for inteiramente ilegvel. A melhor posio, ao se escolher entre um projeto refinado e um grande pblico, provavelmente o equilbrio entre os dois. Com algum conhecimento prvio dos efeitos que as extenses HTML tero sobre as suas pginas, tanto em navegadores que oferecem suporte para elas como em outros que no oferecem esse suporte, voc poder promover pequenas modificaes no seu projeto, que permitiro tirar proveito dos dois aspectos mencionados. Assim, as suas pginas continuaro legveis e teis em navegadores mais antigos e em uma grande variedade de plataformas, mas podero tambm tirar proveito dos recursos avanados nos novos navegadores. (LEMAY, 2001). A estratgia mais importante que podemos sugerir para utilizar extenses e, ao mesmo tempo, manter a compatibilidade com outros navegadores consiste em testar os seus arquivos
Unidade 8
217
nesses navegadores. A maioria dos navegadores composta de programa freeware ou shareware e se encontra disponvel para download. Por isso, basta localiz-los e instal-los. Ao testar as suas pginas, voc poder ter uma noo de como os diversos navegadores interpretam as diferentes tags e acabar percebendo quais extenses proporcionam maior flexibilidade, quais delas exigem codificao 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>.
Linguagens de Programao I
Voc sabe o que Webwriting? Webwriting o trabalho de criao, produo, edio e administrao de textos especficos para contedo de websites, a partir de um conjunto de caractersticas prprias da linguagem escrita da mdia internet. Estude mais sobre o assunto no seguinte site: <http:// www.webwritersbrasil.com.br/detalhe.asp?numero=146>.
219
A consulta, nesse contexto, a primeira olhada dos leitores em cada pgina, para ter uma noo geral de seu contedo. Dependendo das informaes que eles quiserem obter nas pginas, podero ler as partes que mais chamam a ateno (cabealhos, vnculos, palavras enfatizadas) e, talvez, alguns pargrafos contextuais, para, em seguida, continuar a leitura. Ao criar e organizar as suas pginas para facilitar a consulta, voc estar ajudando os leitores a obter o mais rapidamente possvel as informaes que necessitam. Para facilitar a consulta pgina:
Utilize cabealhos para resumir os tpicos - Se observar, este livro possui ttulos e subttulos, para que voc possa percorr-lo rapidamente, na busca da informao de maior interesse. O mesmo se aplica s pginas da web. Utilize listas - So excelentes para resumir itens relacionados. No se esquea dos menus de vnculos - O menu de vnculo consiste em uma espcie de lista que, alm de oferecer todas as vantagens das listas para a consulta, funciona como uma excelente ferramenta de navegao, atravs dos links. No esconda informaes importantes no meio do texto - Se tiver alguma ressalva ou ponto a destacar, faa-o na parte superior da pgina ou no incio do pargrafo. Pargrafos longos so de difcil leitura, e mais complicado obter informaes neles. Quanto mais para dentro do pargrafo voc colocar a questo que deseja destacar, menor ser a probabilidade desta ser lida. Destaque cada pgina - Tenha o cuidado de criar pginas da web de modo que cada uma delas seja autossuficiente. Por exemplo: se o leitor cair em uma das pginas de seu site, a qual depende de uma pgina que ele no visitou, deve ser dado um destaque nessa pgina visitada, de que ele precisa de informaes de outra pgina, ou criar um vnculo at a outra pgina. Utilize ttulos descritivos - O ttulo dever fornecer informaes sobre o assunto abordado nessa pgina e tambm sobre o seu relacionamento com as outras pginas da apresentao de que faz parte. Se uma pgina depender de outra anterior a ela, fornea um vnculo de retorno pgina anterior (de preferncia, crie tambm um vnculo com a pgina que ocupa o nvel mais alto da hierarquia). Evite frases do tipo voc poder evitar esses problemas fazendo..., ao terminar isso, faa aquilo..., as vantagens desse mtodo so..., que disponham informaes as quais estaro sendo apresentadas em outra pgina. Ao se deparar logo de incio com essas frases, o leitor poder ficar confuso.
220
Linguagens de Programao I
No exagere na nfase
Pargrafos com muitas informaes em negrito e itlico ou palavras EM LETRAS MAISCULAS so de difcil leitura, especialmente se voc as utiliza diversas vezes em um mesmo pargrafo 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 vnculo constituem tambm uma forma de nfase. Utilize uma nica palavra ou uma frase curta como texto de vnculo. No use trechos ou pargrafos inteiros como vnculos.
D um clique Aqui - E se o seu leitor estiver usando um navegador sem mouse? Para gravar esta pgina, abra o menu Arquivo e selecione Salvar - Cada navegador tem um conjunto diferente de menus e maneiras especficas de executar a mesma ao, alm de idiomas diferentes. Sempre que possvel, evite fazer referncia a operaes especficas do navegador nas suas pginas da web. Utilize o boto Voltar/Back para retornar pgina anterior - Como no item anterior, cada navegador possui um conjunto de botes e mtodos especficos de retorno. Para que seus leitores consigam realmente retornar a uma pgina anterior ou acessar outra pgina especfica, estabelea um vnculo direto com essas pginas.
221
produo de uma revista ou ao lanamento de um produto. Obviamente, muito mais fcil publicar pginas na web do que livros, revistas ou outros produtos. No entanto o fato de ser mais fcil no significa que o processo deve ser descuidado. Por isso, existem muitas pginas com muitos erros, pois qualquer pessoa pode redigir um texto, mesmo sem ser um expert em lngua portuguesa, por exemplo. Lembre-se de que qualquer pessoa poder ler e explorar suas pginas da web. Erros ortogrficos ou gramaticais produzem uma impresso negativa do seu trabalho, de voc e das informaes que estiver fornecendo. Uma redao 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 pginas da web. Se possvel, pea a algum para l-las. Quando outra pessoa l, esta poder detectar melhor determinados erros os quais voc, por ser o autor, muitas vezes no percebe. Uma simples reviso poder aprimorar as suas pginas, facilitando a leitura e navegao.
222
Linguagens de Programao I
Atividade de autoavaliao
Leia cada enunciado com ateno e responda as questes que seguem. 1. O texto na web apresentado a seguir mostra o tipo de tcnica de redao que deve ser evitado. Pelo fato de todas as informaes dessa pgina serem apresentadas em formato de pargrafo, os seus leitores tero de ler todos os pargrafos para localizar as informaes que desejam e, ainda, descobrir como prosseguir com a leitura. Como voc aprimoraria este exemplo? Procure elaborar novamente esta seo, de forma a destacar melhor os pontos principais do texto e o layout da pgina. No se esquea de revisar o portugus e fazer os links, como veremos abaixo:
O cdigo HTML, para ser utilizado no exerccio de autoavaliao, encontra-se na MIDIATECA. Publique o seu resultado em EXPOSIO.
Unidade 8
223
Resposta:
224
Linguagens de Programao I
Unidade 8
225
Elementos de pgina padronizados - Se voc utilizar cabealhos de segundo nvel (<H2>), em uma pgina, para indicar os tpicos principais, dever utiliz-los tambm para os tpicos principais de todas as outras pginas. Se tiver includo um cabealho e uma linha horizontal na parte superior da pgina, utilize esse mesmo layout em todas as outras pginas. Formas padronizadas de navegao - Inclua os seus menus de navegao na mesma posio, em todas as pginas (em geral, na parte superior ou inferior da pgina), e utilize a mesma quantidade de menus. Se preferir usar cones de navegao, lembre-se de utilizar os mesmos cones na mesma ordem, em todas as pginas.
226
Linguagens de Programao I
Unidade 8
227
dos vnculos, os quais conduziro a outras pginas. Ao incluir um vnculo, verifique se este no est interrompendo o fluxo da pgina. A ideia de incluso de vnculos no meio do texto torna-o autossuficiente. Dessa forma, os vnculos fornecem informaes 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 vnculos, considere a possibilidade de usar um menu de vnculos, em vez de um pargrafo. Os leitores encontraro mais facilmente as informaes que estiverem procurando. Em vez de lerem o pargrafo inteiro, podero simplesmente dar uma olhada nos vnculos, para identificar aqueles em que esto interessados. Uma maneira de saber se voc esta incluindo vnculos no texto de forma apropriada consiste em imprimir a pgina da web formatada no seu navegador. Na cpia impressa, sem hipertexto, o pargrafo faz algum sentido? Se a pgina ficar esquisita no papel, ficar esquisita tambm na web. De modo geral, alguns ajustes na construo das frases podem tornar o texto mais legvel e mais til tanto na web quanto na cpia impressa.
228
Linguagens de Programao I
Ou ainda:
O tutorial de HTML tem informaes sobre o uso de vnculos.
Por estarem destacados na pgina da web, os vnculos se sobressaem visualmente mais do que o texto apresentado ao redor. Assim, o seu leitor ver o vnculo antes de ler o texto. Experimente usar vnculos desse modo.
Vincular ou No Vincular
A exemplo do que ocorre com as imagens grficas, para todo vnculo criado, voc dever considerar o motivo pelo qual est vinculando duas pginas ou sees. Esse vnculo til para os leitores? Ele fornecer mais informaes e os deixar mais prximos de seus objetivos? Esse vnculo relevante em relao ao assunto corrente? Cada vnculo deve ter uma finalidade. Tenha motivos razoveis para estabelec-los. O simples fato de voc mencionar a palavra caf em uma pgina referente a algum outro tpico no significa que tenha de vincul-la com um site referente ao caf. Isso pode at parecer interessante, mas, se um vnculo no for til para o assunto corrente, servir apenas para confundir o leitor.
Unidade 8
229
Vnculos explcitos de navegao - So aqueles que indicam os caminhos especficos que o leitor poder tomar nas pginas da web: para frente, para trs, para cima e para o incio. Em geral, esses vnculos so indicados por cones de navegao. Vnculos implcitos de navegao - So aqueles que apenas sugerem, sem indicar de forma direta, a navegao entre as pginas. Os menus de vnculos so o melhor exemplo de vnculos implcitos. O destaque do texto de vnculo torna claro ao leitor que ele poder obter maiores informaes sobre esse tpico ao selecionar um vnculo correspondente. Mas isso no indicado de forma explcita no texto. Os vnculos implcitos de navegao podem tambm conter estruturas de sumrio ou outras estruturas de viso geral compostas inteiramente por vnculos. Vnculos de definio - Palavras ou definies de conceitos podem se tornar vnculos excelentes, especialmente se voc estiver criando grandes redes de pginas que contenham glossrios. Ao estabelecer um vnculo entre a primeira ocorrncia de uma palavra e sua definio, voc pode explicar o significado dessa palavra aos leitores que no o conhecem, sem desviar a ateno daqueles que j possuem esse conhecimento. Vnculos de tangentes - Vnculos com informaes tangentes e relacionadas so teis quando o contedo do texto pode desviar a ateno do leitor do objetivo principal da pgina. Considere os vnculos de tangente como as notas de rodap ou as notas de fim em um texto impresso. Eles podem se referir a citaes de outras obras ou a informaes adicionais que sejam interessantes, mas que no sejam diretamente relacionadas quelas que voc quer transmitir. Mas cuidado com os vnculos de tangente. possvel voc criar tantas tangentes a ponto de os leitores passarem um tempo enorme acessando vnculos para outras pginas e no conseguirem, por isso, retornar ao texto original. Resista tentao de criar todos os vnculos que puder e procure estabelecer vnculos apenas para tangentes relevantes ao seu prprio texto. Evite tambm duplicar a mesma tangente por exemplo, estabelecer vnculos com todas as ocorrncias da palavra web na sua pgina.
230
Linguagens de Programao I
Unidade 8
231
Vantagens
A manuteno de um nico arquivo mais fcil, e os vnculos contidos nele no sero rompidos, se voc mover as informaes 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 conexes de rede lentas e se a pgina contm muitas imagens grficas. Os leitores precisam rolar o texto vrias vezes para localizar o que desejam. O acesso a informaes especficas pode se tornar tedioso. A navegao at outros pontos que no estejam localizados nem no incio nem no final do documento, torna-se praticamente impossvel. A estrutura excessivamente rgida. Uma nica pgina , por natureza, linear. Embora voc possa passar diretamente de uma seo para outra, a estrutura linear ainda reflete a da pgina impressa e no tira proveito da flexibilidade das pginas menores vinculadas de forma no linear.
Ou, por outro lado, voc pode criar um conjunto de pginas pequenas e estabelecer vnculos entre elas.
Vantagens
As pginas menores so carregadas rapidamente. Frequentemente voc pode apresentar a pgina inteira na tela. Desta forma, as informaes contidas nessa pgina podem ser facilmente consultadas pelo leitor.
232
Linguagens de Programao I
Desvantagens
A manuteno de todos esses vnculos pode se tornar um pesadelo. A simples incluso de algum tipo de estrutura de navegao para essa grande quantidade de pginas criaria milhares de vnculos. Se houver muitos vnculos entre as pginas, eles ficaro em desarmonia. difcil manter a continuidade da leitura, quando o leitor passa mais tempo alternando entre documentos do que propriamente lendo o texto.
Afinal, qual a soluo? De modo geral, o assunto que voc est escrevendo determinar o tamanho e a quantidade de pginas de que voc precisar, especialmente se voc seguir a sugesto de usar um tpico por pgina. Se voc testar as suas pginas da web em uma grande variedade de plataformas e velocidades de rede, saber se uma nica pgina 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.
Sobre como entrar em contato com o autor da pgina da web ou com a pessoa responsvel pela pgina, a quem chamamos de webmaster. Estas informaes devem conter pelo menos o nome e o correio eletrnico dessa pessoa. O status da pgina. Ela est completa? um trabalho ainda em andamento? Foi deixada propositalmente em branco?
Webmaster a pessoa responsvel pela criao e manuteno de um site na web. Em geral, as responsabilidades de um webmaster incluem responder a mensagens de correio eletrnico, garantir a operao apropriada do site, criar e atualizar pginas da web e manter a estrutura e o projeto do site. Muitas vezes, o webmaster acumula a tarefa de administrao de servidores na qual se alberga o site.
Unidade 8
233
A data da ltima reviso realizada na pgina. Isto especialmente importante no caso de pginas alteradas com muita frequncia. Inclua uma data em cada pgina, para que as pessoas saibam h quanto tempo ela foi, criada e/ou atualizada. Sobre os direitos autorais e as marcas registradas, quando necessrio. O URL da pgina. A incluso de um URL impresso de uma pgina que pode ser localizada nesse mesmo URL pode parecer um pouco exagerada. Mas, e se algum imprimir a pgina e perder todas as outras referncias a ela no meio da pilha de papis da mesa de trabalho? De onde elas vieram?
Uma boa sugesto para a sua pgina da web estabelecer um vnculo entre um URL mailto e o texto que contm o endereo de correio eletrnico (e-mail) do webmaster, como neste exemplo:
<A HREF=mailto:sac@embrapa.br>sac@embrapa.br</A>
234
Linguagens de Programao I
Figura 8.3 Exemplo de assinatura para uma pgina web com mailto.
Tal procedimento permite aos leitores os quais tenham navegadores que ofeream suporte ao URL mailto, simplesmente selecionar o vnculo e enviar uma correspondncia para a pessoa responsvel pela pgina, sem precisar digitar novamente o endereo em seus programas de correio eletrnico.
Unidade 8
235
As pginas passaram a ter uma codificao mais complexa e de difcil manuteno e, por consequncia, trouxeram problemas de exibio a certos navegadores. Foi a que a W3C resolveu dar um basta nisso e resolveu tornar essas tags de formatao de texto como obsoletas (deprecated), ou seja, essas tags de formatao de texto e atributos estariam condenadas em futuras verses do HTML e do XHTML. A W3C ento incorporou essas tags de formatao de texto/ atributos ao CSS, separando o que contedo da estrutura.
No CSS as tags bsicas do HTML definem os pargrafos, as listas, os cabealhos, etc., e o CSS define como o navegador ir mostrar as informaes.
Exemplo : align = left|center|right|justify Exemplo Obsoleto: <H1 align=center> Cabealho Centralizado </H1> Exemplo utilizando CSS: <HEAD> <STYLE type=text/css>
236
Linguagens de Programao I
Sntese
As principais normas para o projeto e a elaborao de pginas da web, apresentadas nesta unidade, so destacadas a seguir.
Teste as suas pginas da web em vrios navegadores. Redija suas pginas de forma clara e concisa. Organize o texto da pgina, para que os leitores possam consultar as informaes importantes. Crie pginas independentes de contexto, ou seja, crie pginas que no dependam de pginas anteriores ou posteriores. No abuse da nfase e nem utilize as tags de cabealho para dar nfase. No use terminologias especficas de algum navegador. Revise e verifique a grafia das suas pginas, bem como a concordncia gramatical. Utilize um layout padronizado e simples em todas as pginas. Use menus de vnculos. No sobrecarregue a pgina com imagens bonitas, porm desnecessrias.
Unidade 8
237
Atividades de autoavaliao
Leia cada enunciado com ateno e responda s questes que seguem. 1. Visite os 3 sites seguintes, explore-os e na ferramenta FRUM, discuta o tipo de informao que apresentada, o projeto e layout da(s) pgina(s), o uso de vnculos e imagens. Aponte ainda os recursos adequados e inadequados:
Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: DAMASCENO, Anielle. Webdesign: teoria e prtica. So Paulo: Visual Books, 2006. LEMAY, Laura. Aprenda em 1 semana HTML 4. So Paulo: Campus, 2001. LEMAY, Laura. Aprenda a criar pginas web com HTML e XHTML em 21 dias. So Paulo: Makron Book, 2002. RODRIGUES, Bruno. Webwriting redao & informao para a web. Rio de Janeiro: Brasport, 2006. Tambm consulte o(s) seguinte(s) site(s) para aprofundar seus estudos: <http://www.unesp.br/prograd/PDFNE2003/Um%20 ambeinte%20de%20aprendizagem.pdf> (Construo de pginas web: depurao e especificao de um ambiente de aprendizagem) <http://www.abraweb.com.br/site/colunistas.php?c=27> (O valor de um projeto de pgina web)
238
UNIDADE 9
Folhas de Estilo
Objetivos de aprendizagem
Definir folhas de estilos. Compreender como e por que utilizar folhas de estilos em cascata. Aprender a sintaxe e os tipos de definio de estilos. Criar folhas de estilos.
Sees de estudo
Seo 1 O que so os estilos CSS Seo 2 A sintaxe CSS Seo 3 Tipos de definio de estilos Seo 4 A ordem da cascata
Conseguiu? timo! Observe que voc j sabe o que estilo, ou mesmo, j tem uma noo a respeito do assunto: do que se trata, etc. Sabendo o que isto significa, podemos comear o nosso estudo de folhas de estilo.
240
Linguagens de Programao I
241
os aspectos estilsticos. Este contexto conduziu o HTML, no final da dcada de 1990, a um estado em que era muito difcil criar e fazer a manuteno de websites compostos por mais do que um nmero reduzido de pginas. Os contedos das pginas no eram mais do que imensas sopas de tags mal organizadas, cujo significado no era muito claro. Este problema comeou a ser resolvido pelo World Wide Web Consortium (W3C) com a criao dos padres 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 contedos se exprimem em HTML e os estilos em CSS. As folhas de estilo permitem que voc defina a aparncia padro 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 espao em branco, etc. Este novo paradigma para a criao de pginas bem suportado por todos os navegadores dominantes: Netscape/Mozila, Microsoft Internet Explorer, Opera, Google Chrome, etc...
242
Linguagens de Programao I
Um navegador que no oferea suporte para folhas de estilo ainda pode representar o arquivo como um documento HTML padro e este documento deve ser autossuficiente, sem depender da folha de estilo.
Unidade 9
243
O mecanismo de cascata
O termo cascata se refere sequncia ordenada de estilos de formatao do documento. As regras das folhas posteriores tm precedncia sobre as anteriores. A ordem de estilos aplicados :
um arquivo de folha de estilos separado, que vinculado - uma folha de estilos externa; informaes de estilos incorporados dentro da pgina uma folha de estilo interna; estilos aplicados diretamente a texto selecionado - um estilo linear ou inline.
Ateno! As definies dos diferentes tipos de estilos, voc estudar na seo 3 desta Unidade. As folhas de estilos CSS do-nos muita liberdade na forma de definir os estilos. No mesmo documento, podemos utilizar uma ou mais pastas externas, definir os estilos na seco <HEAD> do documento ou utilizar o atributo STYLE nas tags do HTML. O navegador l todas as definies 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 vrias verses para o mesmo estilo, o navegador guarda a ltima que encontrou. Outra regra diz que alguns estilos so herdados pelas tags que se encontram dentro de outras tags.
Linguagens de Programao I
Os nomes de propriedade fazem parte da especificao CSS (color, background, etc.). Os valores representam todos os valores vlidos para a propriedade especfica. Veja um exemplo:
Tag H1 Declarao { color: green }
Neste exemplo, a tag H1 diz que o estilo se aplica a tags <h1>, e a definio diz que a cor do texto destas tags deve ser verde (green). A declarao fica entre chaves ({...}) e pode conter vrias definies. Cada definio formada por um par-propriedade: valor, que separado da propriedade pelo caractere : (dois pontos). A declarao pode ser composta de uma lista de parespropriedade: valores separados por ; (ponto e vrgula). Veja o exemplo abaixo:
Tag P Declarao { color: green; font-family: arial}
Unidade 9
245
Essas listas podem ser usadas de vrias 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 prxima seo). Veja:
folhas de estilo inline uma definio de estilo que pode ser aplicada a uma tag HTML especfica, atravs da utilizao do atributo STYLE; folhas de estilo interna uma definio de estilo que pode ser criada entre as tags <STYLE> e </STYLE> (isto deve estar no cabealho do documento HTML). Este tipo de definio estabelece um estilo para todas as ocorrncias de determinada tag HTML. Por exemplo, voc pode definir todas as ocorrncias de cabealho <H1>, para que sejam apresentadas em tipo vermelho; folhas de estilo externa uma folha de estilo que pode ser importada de um arquivo externo, atravs da utilizao de <LINK REL=stylesheet HREF=nome do arquivo de folha de estilo>.
O ideal remover toda a formatao das tags da linguagem e colocar em folhas de estilo em cascata.
246
Linguagens de Programao I
A definio de estilos utilizando o atributo STYLE faz-nos perder muitas das vantagens das folhas de estilos, porque acabamos por misturar estilos com contedos. 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 pargrafo:
<html> <body> <p style=color: blue; margin-left: 20px> Isto um pargrafo formatado com o atributo style</p> <p> este pargrafo no tem estilo </body> </html>
Unidade 9
247
Se desejarmos atribuir a uma propriedade um valor que contm espaos, devemos coloc-lo entre apstrofos (). No exemplo seguinte, usaremos o tipo de letra sans serif a um pargrafo e comic sans ms a outro:
<html> <body> <p style=font-family: sans-serif> Neste pargrafo o tipo de letra sans-serif</p> <p style=font-family: comic sans ms> Neste pargrafo o tipo de letra comic sans ms </p> </body> </html>
A visualizao esta:
248
Linguagens de Programao I
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 so usados uma nica vez. Nesse caso, as definies fazem-se dentro de uma tag <STYLE> que deve ser colocada dentro da tag <HEAD> da pgina HTML, assim:
<HEAD> <STYLE type=text/css> body { background-color: red } p </STYLE> </HEAD> { margin-left: 20px }
O navegador l as definies contidas na tag <STYLE> e faz a formatao dos elementos da pgina, aplicando essas definies. O exemplo seguinte, permite-lhe experimentar isto de imediato e ver seu resultado no navegador:
Unidade 9
249
<html> <head> <style type=text/css> H1 { color: green } </style> </head> <body> <H1>Este cabealho tem cor verde</H1> </body> </html>
Visualizao:
Se o valor que desejamos dar propriedade tiver mais do que uma palavra, ento devemos coloc-lo entre aspas, como mostrado a seguir:
<html> <head> <style type=text/css> p { font-family: comic sans ms } </style> </head> <body> <p> </p> </body> </html> 250 O texto deste pargrafo tem tipo de letra comic sans ms.
Linguagens de Programao I
Visualize agora:
Figura 9.4 Exemplo de folha de estilo com propriedade com mais de uma palavra.
Dentro das chaves { e }, podemos colocar vrias definies separadas pelo caractere ; (ponto e vrgula), conforme j comentado. O exemplo seguinte define trs propriedades para a tag <P>, que so o alinhamento, a cor do texto e o tipo de letra:
<html> <head> <style type=text/css> p { text-align: center; color: green; font-family: arial } </style> </head> <body> <p> O texto deste pargrafo tem tipo de letra arial, cor verde e est alinhado ao centro. </p> </body> </html>
Unidade 9
251
Para tornarmos mais legveis as definies dos estilos, devemos colocar cada definio em uma linha diferente, mas podemos tambm 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 no suporta estilos CSS, ignorar a tag <STYLE>, mas no ignorar o texto que est escrito l dentro. Se for necessrio evitar que esse navegador escreva o texto das definies, devemos ento ocult-lo, colocando-o dentro de um comentrio do HTML, como mostramos a seguir:
<head> <style type=text/css> <!-hr { color: blue } p { margin-left: 20px } body { background-image: url(backgrnd.jpg) } --> </style> </head>
Se o navegador suporta CSS, ele entender a aplicao da folha de estilo tag mencionada.
252
Linguagens de Programao I
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 espaamento entre as linhas? Calma, no se preocupe. Existem as propriedades da CSS que voc encontra em vrios livros e sites. No necessrio decorar todas as propriedades. Mas interessante conheclas para poder criar as folhas de estilo a serem utilizadas no seu documento HTML e utilizar as tags HTML apenas para o contedo, sem se preocupar com layout. Um bom site o da prpria W3C: http://www.w3.org/TR/REC-CSS1. Consulte tambm outros sites na seo Saiba Mais, nesta unidade.
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
Unidade 9
253
organizao. O atributo REL relaciona o link a uma folha de estilos externa. A utilizao de folha de estilos externa permite poupar tempo, ganhar flexibilidade e aumentar a consistncia das pginas que constituem um website. Quando guardamos os estilos em uma pasta externa e os aplicamos a todas as pginas de um website, a modificao de diversas qualidades do aspecto grfico passa a ser uma tarefa fcil. O navegador l as definies contidas na folha de estilos meu_estilo.css e faz a formatao dos elementos do documento aplicando essas definies. Mais uma vez, o caminho dos arquivos das folhas de estilo deve estar no mesmo diretrio da pgina, ou ser definido o caminho absoluto ou relativo. Para poder testar este tipo de insero de folhas de estilho, crie um arquivo texto (pode ser editado no prprio bloco de notas do Windows) chamado meu_estilo.css. Em seu contedo, escreva as formataes dos exemplos. Sempre que alterar o valor de um estilo, basta salvar o arquivo CSS e atualizar (F5) a pgina, sem a necessidade de nenhuma alterao no arquivo HTML. Dentro do mesmo arquivo, pode haver a definio de layout de vrias tags, classes de forma que, com a abertura e fechamento das chaves {}, delimitam uma declarao de outra. Se voc abrir o arquivo meu_estilo.css ir reparar que a folha de estilos externa apenas um arquivo de texto que contm definies CSS. No seu contedo, no podem aparecer tags do HTML, pois s so permitidas definies CSS vlidas.
254
Linguagens de Programao I
Os elementos de bloco, como por exemplo, <div> ou <table>, comeam numa nova linha e, ao terminarem, ocorre novamente uma mudana de linha. Os elementos de bloco recebem larguras que so calculadas em funo da largura do bloco em que esto contidos. Os elementos inline, como <b> ou <span>, no do incio a uma nova linha, e a sua largura determinada apenas pelo seu contedo. O seu comportamento semelhante ao comportamento do texto simples.
Agrupar tags
Se voc desejar aplicar os estilos a mais do que uma tag, agrupe as tags que partilham as mesmas definies. Para isso, escreva uns seguidos dos outros, separados por vrgulas. No exemplo seguinte, as tags de <h1> at <h6> partilham todas a mesma definio:
h1,h2,h3,h4,h5,h6 { color: green }
Tags de Classe
Uma 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, atravs da utilizao do atributo CLASS. Apenas as definies de estilo para esse elemento na classe especfica sero aplicadas a ele. As definies de classes permitem-nos definir estilos diferentes que podem ser aplicados mesma tag. Imagine que voc precisa ter dois tipos diferentes de pargrafo no documento, um alinhado direita e outro alinhado ao centro. Vejamos como as classes tornam isto fcil:
Unidade 9
255
<html> <head> <style type=text/css> p.direita { text-align: right } p.centro { text-align: center } </style> </head> <body>
<p class=direita> Este pargrafo est alinhado direita.</p> <p class=centro> Este pargrafo est alinhado ao centro.</p> </body> </html>
Visualize:
O atributo CLASS, como qualquer outro atributo, s pode ser especificado uma nica vez em uma tag. O exemplo seguinte est errado:
256
Linguagens de Programao I
<p class=direita class=verde> Este pargrafo tem um erro causado pela utilizao repetida do atributo class. </p>
As definies de classe tambm podem ser criadas sem colocarmos o nome de uma tag no incio da definio. Quando isso acontece, as definies 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> <style type=text/css> .centro { text-align: center } </style> </head> <body> <h2 class=centro> Cabealho alinhado ao centro </h2> <p class=centro> Este pargrafo tambm est alinhado ao centro. </p> </body> </html>
Acompanhe a visualizao:
Unidade 9
257
Perceba que a definio de classes genricas, 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 necessrio utilizar a referida formatao. O critrio de nomenclatura das classes o seguinte:
Nome_da_tag.nome_da_classe Utilizado apenas para todas as tags definidas p.direta .nome_da_classe Utilizado em qualquer tag a que se queira aplicar a classe .centro
Tags de ID
O atributo ID define algo que tenha um valor exclusivo para um documento inteiro, ou seja, aplica-se a um nico elemento da pgina. As regras do HTML ditam que os valores do atributo ID no podem repetir-se numa mesma pgina. Da resulta que o nmero de elementos no documento com um determinado ID um ou zero. A regra de seleo 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:
258
Linguagens de Programao I
<html> <head> <style type=text/css> p#para1 { text-align: center; color: red } </style> </head> <body> <p id=para1> Este pargrafo est alinhado ao centro e tem cor vermelha. </p> </body> </html>
Visualize:
Se tentarmos aplicar esta regra a uma tag <DIV> usando id=para1, vemos que o navegador no a aceita, pois ele foi definido somente para a tag <P>:
Unidade 9
259
<html> <head> <style type=text/css> p#para1 { text-align: center; color: red } </style> </head> <body> <div id=para1> Este elemento no est alinhado ao centro e no tem cor vermelha porque no um pargrafo. </div> </body> </html>
Se quisermos que a regra se aplique a qualquer tag que tenha o id=para1, basta escrev-la na forma seguinte:
260
Linguagens de Programao I
A regra acima aplicvel a qualquer tag que tenha o ID correto, porque no est sendo definido para uma tag especfica, e sim para o ID que se aplica a todas as tags. No exemplo seguinte, ela seria aplicada tag <H1>:
<H1 id=para1>As msicas do Bonga so bu de fixes</H1>
Unidade 9
estilos definidos por omisso (so aplicados sempre que no 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 atravs do atributo STYLE nas tags do documento HTML).
Assim, temos que os estilos que so definidos na prpria tag atravs do atributo STYLE tm a prioridade mais elevada. As definies que o atributo STYLE faz sobrepem-se a qualquer definio que tenha sido feita antes.
Um documento HTML pode definir ou utilizar mais do que uma folha de estilos. Quando isso acontece, possvel 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 definies 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 }
262
Linguagens de Programao I
Mas existe uma folha de estilos interna com as seguintes propriedades tambm para a tag h2:
H2 { text-align: right; font-size: 20pt }
Se a pgina que contm a folha de estilos interna usa a tag <link> para se ligar folha de estilos externa indicada antes, ento as duas definies sero combinadas para produzir a seguinte verso 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 substitudos pelas definies dadas na folha interna.
Unidade 9
263
<html> <head> <style type=text/css> div { color: blue } </style> </head> <body> <div>O texto dos elementos <div> tem cor azul. <p> Este pargrafo est dentro de um elemento <div>. Ele herda a cor azul. </p> </div> <p> Este pargrafo no est dentro de nenhum elemento que lhe deixe uma herana. </p> </body> </html>
No exemplo acima, a folha de estilos expressa que o texto das tags <DIV> deve ter cor azul. O pargrafo que est dentro de uma tag <DIV> herda a cor azul, porque a propriedade color herdada pelos descendentes de uma tag. J o segundo pargrafo no est dentro de nenhuma tag que lhe deixe uma herana (que neste caso a propriedade color), e, por isto, o seu texto tem a cor normal. Visualizao:
264
Linguagens de Programao I
H outras propriedades que s afetam o elemento ao qual so aplicadas e no se propagam aos seus descendentes. Diz-se que estas propriedades no so herdadas. O exemplo seguinte semelhante ao anterior com o acrscimo da propriedade border, que no 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 pargrafo est dentro de um elemento <div>. Ele herda a cor azul mas no herda a linha de contorno (border). </p> <div> Tal como o elemento <div> principal este elemento <div> recebe a sua prpria 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, no:
Unidade 9
265
Sntese
Nesta unidade, aprendemos a criar estilos para um documento HTML. Atravs da utilizao das folhas de estilo, voc pode definir desde tipos de fonte para as diferentes tags da HTML at cores de fontes, cores e imagens grficas de fundo, margens, espaamento, estilo de tipo e muito mais. Basicamente, qualquer parte da aparncia 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 ateno para o fato de ainda subsistirem alguns problemas, quando aplicamos tcnicas avanadas de formatao baseadas em CSS. Por isso, necessrio testar e aplicar os estilos, para que voc veja o resultado em vrios navegadores. Nesta unidade, tambm definimos algumas tags utilizadas para criar estilos em documentos HTML, que podem ser resumidas no quadro a seguir:
Tag
<STYLE> <LINK> <DIV>
Descrio
Define estilos CSS estilos internos Define uma referncia para um estilo externo Insere uma seo no documento
266
Linguagens de Programao I
Atividades de autoavaliao
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 referncias 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) 267
Unidade 9
<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)
Tambm existem outras propriedades de recursos mais avanados para a utilizao em folhas de estilos que podero ser encontradas em:
<http://www.linhadecodigo.com.br/artigo.aspx?ID=82>.
268
UNIDADE 10
Criao de Formulrios
Objetivos de aprendizagem
Sees de estudo
Seo 1 Criando um formulrio Seo 2 Campos de entrada de texto Seo 3 Selees e listas de opes Seo 4 Botes de rdio Seo 5 Caixas de validao Seo 6 O boto de envio Seo 7 Exemplo completo de formulrio Seo 8 Exemplo de um formulrio utilizando Javascript
270
Linguagens de Programao I
ACTION
Este atributo da tag <FORM> define o tipo de ao a ser realizado com o formulrio. Como j comentado anteriormente, existem duas possibilidades:
o formulrio enviado a um endereo de correio eletrnico; o formulrio enviado a um programa ou script que processa seu contedo, ou seja, uma URL.
Unidade 10
271
No primeiro caso, o contedo do formulrio enviado ao endereo de correio eletrnico especificado por meio da sintaxe abaixo:
<FORM action=mailto:endereo@correio.com>...</FORM>
Se o que o que voc deseja que o formulrio seja processado por um programa, voc deve especificar o endereo do arquivo que contm tal programa. Neste caso, a tag ficaria da seguinte forma:
<FORM action=endereo do arquivo>...</FORM>
A maneira de se expressar a localizao do arquivo que contm o script a mesma j estudada na unidade sobre vnculos.
METHOD
Este atributo da tag <FORM> encarrega-se de especificar a forma na qual o formulrio enviado, ou seja, seleciona um mtodo para acessar a URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do navegador para o servidor, com a seguinte diferena bsica:
pelos usurios;
POST - os dados inseridos fazem parte do corpo da mensagem enviada para o servidor. Transfere-se grande quantidade de dados e os mesmos no so visualizados 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 usurios na
URL.
Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da tag <FORM> as formataes para campos
272
Linguagens de Programao I
de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, utilizado, posteriormente, pelo sistema, para enviar os dados. Normalmente, so usados scripts. Os scripts organizam esses dados de entrada de todos os campos em um conjunto de informaes e realizam uma tarefa programada, como por exemplo, enviar os dados do formulrio para o seu e-mail. Como a HTML no tem condies de fazer isso, necessrio utilizar scripts CGI, PERL, ASP, JavaScript, etc., para executar estas tarefas. Porm estes tipos de scripts necessitam de aprendizado mais dedicado para criar o que voc deseja, e so muito mais complexos do que a linguagem HTML, pois eles processam informaes.
ENCTYPE
Este outro atributo da tag <FORM> indica a forma na qual a informao que for mandada pelo formulrio viajar. No caso mais corrente, ao se enviar o formulrio por correio eletrnico, o valor deste atributo deve ser TEXT/PLAIN. Assim, voc consegue que o contedo do formulrio seja enviado como texto plano dentro do e-mail. Se voc deseja que o formulrio se processe automaticamente por um programa, geralmente no se utiliza este atributo no seu valor padro, ou seja, no incluindo ENCTYPE dentro da tag <FORM>. Assim, para o caso mais habitual - o envio do formulrio por correio - a tag de criao do formulrio ter o seguinte aspecto:
<FORM action=mailto:endereo@correio.com (ou o nome do arquivo de script) method=post enctype=text/plain>...</FORM>
Unidade 10
273
Entre esta tag e seu fechamento, voc colocar o resto de tags que daro forma ao seu formulrio, as quais sero vistas nas prximas sees. O HTML prope uma grande diversidade de alternativas na hora de criar os formulrios. Elas vo desde a clssica caixa de texto at a lista de opes, passando pelas caixas de validao. Todos os elementos do formulrio do suporte s configuraes das folhas de estilo (CSS). Voc vai ver em que consiste cada uma destas modalidades e como pode implement-las em seu formulrio.
Atributo NAME
O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso programa de processamento ou no e-mail recebido. Sua sintaxe :
<INPUT name=nome_do_campo>
274
Linguagens de Programao I
Este atributo especialmente usado para que voc d um nome ao campo. Ele no aparece na pgina, 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 usurio preencheu em cada campo,. Por exemplo, se voc tem vrios campos de texto, cada um para um tipo de informao diferente, voc usa o atributo NAME para identificar o campo. Voc sempre ver em todas as tags INPUT que este atributo estar presente.
Atributo TYPE
Por outro lado, importantssimo indicar o atributo TYPE, j que existem outras modalidades de formulrio que usam esta mesma tag. Em campo de dados de texto, o atributo TYPE recebe o valor text. A tag da seguinte forma:
Deste modo, expressamos nosso desejo de criar uma caixa de texto, cujo contedo ser chamado nome (por exemplo). O aspecto deste tipo de caixas conhecido, como pode ser visto aqui:
Quando INPUT no apresenta o atributo TYPE, assume-se TYPE= TEXT como padro da formatao. O exemplo seguinte mostra um formulrio simples com dois elementos input:
Unidade 10
275
<FORM action=processar.php method=post> Primeiro nome: <INPUT type=text name=primeiro_nome><br> ltimo nome: <INPUT type=text name=ltimo_nome> </FORM>
Atributo VALUE
Em alguns casos, pode ser interessante atribuir um valor definido ao campo em questo. Isto pode ajudar ao usurio a preencher mais rapidamente o formulrio 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:
276
Linguagens de Programao I
Neste caso, pode ser comprovado que, ao escrever dentro do campo, no lugar de texto, sero vistos asteriscos. Estes campos so ideais para a introduo de dados confidenciais, principalmente cdigos de acesso. muito usado para entradas de senhas, como se pode ver no exemplo:
<FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME=senha> </FORM>
Unidade 10
277
Resultado:
Aqui o campo est escondido. O visitante no o v, mas ele vai ser processado pelo formulrio. Voc pode inclu-lo sem problemas junto com os outros elementos. Por exemplo:
<FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME=senha> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM>
Linguagens de Programao I
Em alguns casos, parte dos prprios dados enviados pelo usurio, pode ser prtico enviar dados definidos por ns mesmos, que ajudem o programa em seu processamento do formulrio. Vejamos um outro exemplo:
<input type=hidden name=site value=www.meusite.com>
Esta tag, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou ao programa encarregado da gesto do formulrio. Poderamos, a partir deste dado, tornar conhecida para o programa a origem do formulrio ou algum tipo de ao a ser realizada (um re-endereamento, por exemplo).
Atributo SIZE
O atributo SIZE define o tamanho da caixa em nmero de caracteres. Se, ao escrever, o usurio chega ao final da caixa, o texto ir desfilando, medida que se escreve, fazendo desaparecer a parte de texto que fica esquerda. Este atributo tambm especifica o tamanho do espao no vdeo para o campo do formulrio. S vlido para campos TEXT e PASSWORD. O valor padro 20. Veja um exemplo:
Unidade 10
279
A visualizao a seguinte:
Atributo MAXLENGTH
Este atributo indica o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no confundi-lo com o atributo SIZE. Enquanto o primeiro define o tamanho aparente da caixa de texto, o MEXLENGTH indica o tamanho mximo real do texto que pode ser escrito, em nmero de caracteres. Podemos ter uma caixa de texto com um tamanho aparente (SIZE), que menor do que o tamanho mximo (MAXLENGTH). O que ocorrer, neste caso, que, ao ser escrito, o texto ir desfilando dentro da caixa, at que cheguemos ao seu tamanho mximo, definido por MAXLENGTH. Neste momento, ser impossvel continuar escrevendo. Este atributo s vlido para campos de entrada TEXT e PASSWORD.
<FORM> Dia do ms: <INPUT TYPE=TEXT NAME=ex MAXLENGTH=2> </FORM>
280
Linguagens de Programao I
Resultado:
No exemplo acima, apenas 2 caracteres sero lidos pelo formulrio, e no ser possvel digitar mais do que 2 caracteres no campo.
Quando voc deseja utilizar elementos de formulrio, voc deve escrev-los sempre entre as tags <form>...</ form>. Caso contrrio, os elementos sero vistos perfeitamente no Internet Explorer, enquanto em outros navegadores podem no ser. por isso que, para mostrar um campo de texto, no adianta colocar a tag <input>, e sim, coloc-la dentro de um formulrio, assim:
Unidade 10
281
Estes tipos de campos so prticos, quando o contedo a ser enviado no um nome, telefone ou qualquer outro dado breve, e sim um comentrio, opinio, etc. Dentro desta tag, voc deve indicar o atributo NAME para associar o contedo a um nome, que ser semelhante a uma varivel em linguagens de programao. Alm disso, voc pode definir as dimenses do campo a partir dos seguintes atributos:
ROWS: Define o nmero de linhas do campo de texto. COLS: Define o nmero de colunas do campo de texto.
O resultado o seguinte:
Mesmo assim, ainda possvel definir o contedo do campo. Para isso, voc no usar o atributo VALUE, e sim o contedo entre as tags que lhe desejamos atribuir. Vejamos:
<textarea name=comentrio rows=10 cols=40>Escreva seu comentrio....</textarea>
282
Linguagens de Programao I
Repare que, no atributo COLS, ns definimos o nmero de colunas para a largura do campo de texto; e, em ROWS, o nmero de linhas para o campo de texto. Se o usurio 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.
Unidade 10
As listas de opes so tipos de menus desdobrveis que nos permitem escolher uma (ou vrias) das mltiplas opes que nos propem. 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 opo ser includa em uma linha precedida da tag <OPTION>. Veja, a partir destas diretrizes, a forma mais tpica e simples desta tag:
<SELECT name=estao> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </SELECT>
O resultado :
A tag SELECT pode ser vista modificada, principalmente a partir de outros dois atributos: SIZE e MULTIPLE.
Atributo SIZE indica o nmero de elementos da lista, visveis no formulrio. O resto pode ser visto por meio da barra lateral de deslocamento. Exemplo:
284
Linguagens de Programao I
Visualize agora:
Atributo MULTIPLE permite a seleo de vrios 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 possvel, no utilize MULTIPLE. No recomendamos a prtica desta opo, j que o manejo das teclas CTRL ou SHIFT, para escolher vrias opes, pode ser desconhecido para o usurio. Evidentemente, sempre cabe a possibilidade de explicar como funciona, apesar de ser uma complicao a mais para o visitante.
Unidade 10
285
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 no toma nenhum valor, a no ser o de, simplesmente, indicar que a opo apresentada est escolhida por padro. Esse atributo aplicado tag <OPTION>.
286
Linguagens de Programao I
O resultado ser:
Atributo VALUE - Define o valor da opo que ser enviada ao programa ou ao correio eletrnico, se o usurio escolhe esta opo. Este atributo pode ser muito til, se o formulrio for enviado a um programa, visto que, a cada opo, se pode associar um nmero ou letra, o qual se torna muito mais fcil de manipular do que uma palavra ou texto. Poderamos, assim, escrever linhas do tipo:
<option value=1>Primavera</option>
Deste modo, se o usurio escolhe primavera, o que chegar ao programa (ou ao correio) uma varivel chamada estao, que ter como valor 1. No correio eletrnico, por exemplo, receberamos:
Unidade 10
287
estao=1
<form> <input type=radio name=sexo value=masculino> Masculino<br> <input type=radio name=sexo value=feminino> Feminino </form>
288
Linguagens de Programao I
repare que s se pode selecionar uma das opes dadas. Elas excluem-se mutuamente. Se o usurio escolhe, supostamente, feminino, receberemos como resultado:
Sexo=feminino
Observe que a tag <input type=radio> somente coloca o campo para clicar na pgina. Os textos que aparecem ao lado, assim como as quebras de linha, devem ser dispostos com o correspondente texto no cdigo da pgina e com as tags HTML de que necessitarmos.
Por padro, todos os botes de rdio esto desativados (no selecionados). Voc pode determinar o boto de rdio padro de um grupo, atravs da utilizao do atributo CHECKED, da seguinte forma:
<form> <input type=rdio name=sexo value=masculino> Masculino<br> <input type=rdio name=sexo value=feminino checked> Feminino </form>
Vejamos o efeito:
Unidade 10
289
<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>
Repare que voc pode selecionar cada uma das opes de forma independente da outra. Estes tipos de elementos podem ser ativados ou desativados pelo usurio com um simples clique sobre a caixa em questo.
290
Linguagens de Programao I
Da mesma forma que para os botes de rdio, podemos ativar a caixa de validao 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:
O tipo de informao que chegar ao nosso correio (ou ao programa) ser do tipo:
patins=on (ou off dependendo se tiver sido ativada ou no)
Unidade 10
291
Voc pode modificar o texto de rtulo do boto, usando o atributo VALUE, como neste exemplo:
<input type=submit value=Enviar>
Quando o usurio clicar sobre o boto Enviar, as respostas e texto inseridos no formulrio so enviados para processamento. O atributo action do elemento <FORM> contm o endereo (URL) do recurso da web que est encarregado de realizar esse processamento. para l que o contedo do formulrio enviado. Veja este exemplo:
292
Linguagens de Programao I
<form name=entrada action=pgina2.html method=get> Nome: <input type=text name=nome> <input type=submit value=Enviar> </form>
Os formulrios, assim, no somente permitem captar uma informao do usurio como tambm apresentam uma outra srie de funes. Concretamente, os formulrios permitem-nos enviar informaes atravs do seu boto de envio. Tambm pode ser prtico propor um boto Apagar Campos ou, ainda, propor dados ocultos que possam ajudar-nos em seu processamento.
Unidade 10
293
A diferena entre o boto de envio, indispensvel em qualquer formulrio, para o boto de Apagar Campos meramente optativa, j que este ltimo no utilizado frequentemente. Tenha cuidado de no coloc-lo muito perto do boto de envio e de distinguir claramente um do outro.
Botes normais
Dentro dos formulrios, tambm podemos colocar botes normais, clicveis como qualquer outro boto. Da mesma forma que ocorre com os campos HIDDEN, estes botes por si ss no tm muita utilidade, mas poderemos necessit-los para realizar aes no futuro. Sua sintaxe a seguinte:
<input type=button value=Texto escrito no boto>
O uso mais frequente de um boto na programao do cliente. Utilizando linguagens como Javascript, podemos definir aes a tomar, quando um usurio clica o boto de uma pgina web.
294
Linguagens de Programao I
Unidade 10
295
A seguir, tambm mostraremos o cdigo fonte deste formulrio, importante para o seu olhar, mesmo que seja rapidamente.
<form action=mailto:paty@meusite.com 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> Frequncia das viagens <br> <select name=utilizao> <option value=1>Vrias vezes por dia <option value=2>Uma vez por dia <option value=3>Vrias vezes por semana <option value=4>Vrias vezes por ms </select> <br><br> Comentrios sobre sua satisfao pessoal<br> <textarea cols=30 rows=7 name=comentrios></textarea> <br><br> <input type=checkbox name=receber_info checked> Desejo receber notificao das novidades nas linhas de nibus. <br><br> <input type=submit value= Enviar formulrio> <br> <br> <input type=Reset value=Apagar tudo> </form>
Para finalizar, veja um modelo de correio eletrnico recebido na empresa de nibus, quando um usurio qualquer preenchesse este formulrio e clicasse sobre o boto de envio:
296
Linguagens de Programao I
nome=Frederico Silvestre e-mail=frede@terramix.com cidade=Rio de Janeiro sexo=Masculino utilizao=2 comentrios=Acho que no uma boa linha. Colocar mais nibus. receber_info=on
297
Vamos a uma rpida explicao. 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 funes Javascript, como o caso do exemplo anterior (foi utilizada a funo Enviar() com o parmetro FORM). As funes so convocadas por eventos iniciados pelo usurio. Elas so carregadas, antes que o usurio possa fazer alguma ao que chamar a funo. Quando executarmos o cdigo anterior, surgir no seu navegador a seguinte tela:
Digite seu nome na caixa de texto e, aps, clique no boto Teste a Informao. Aps o clique neste boto (pelo atributo ONCLICK), a funo Enviar(form) ser chamada. Dentro desta funo, temos o comando document.write(), que escreve na tela alguma informao. Poderamos substituir este comando pelo comando alert(), que mostra a informao 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. Ento, o comando fica assim: form.nome.value para pegar o valor da caixa de texto chamada nome. O resultado na tela, aps o clique no boto, ser:
298
Linguagens de Programao I
O estudo de Javascript no 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>
Sntese
Caro(a) aluno(a)! Nesta unidade, voc aprendeu a criar formulrios. Os formulrios so de extrema importncia no HTML, uma vez que so responsveis pela interao entre um usurio e o servidor, possibilitando a troca de dados ou informaes. O uso de formulrio importante, quando desejamos enviar os dados cadastrados em um formulrio para outra pgina ou pelo correio eletrnico. Quando precisamos enviar dados para outra pgina, faz-se necessria a utilizao de outra linguagem de programao para tornar o processo dinmico, entre eles: Javascript, Php, Asp, etc.
Unidade 10
299
Descrio
Define um formulrio Insere um campo para introduzir dados Define uma rea de texto (permite inserir texto com vrias linhas e um nmero ilimitado de caracteres) Define uma lista com vrias opes selecionveis Insere uma opo a mais numa lista com vrias opes selecionveis Define um boto que pode ser pressionado
Atividades de autoavaliao
1. Que tal, agora, voc criar um formulrio? Suponha que voc ir fazer uma pesquisa sobre o usurio do seu site. Pergunte nome, endereo, e-mail, profisso, sexo, e sugir uma lista de opes do que ele gostaria de visualizar no site. No se esquea de incluir um campo para comentrios. Publique na ferramenta EXPOSIO do ambiente on-line.
Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias:
<www.icmc.usp.br/ensino/material/html/forms.html> (Formulrios) <http://www.mhavila.com.br/topicos/web/valform.html> (Validao de formulrios HTML com JavaScript) <http://www.criarweb.com/artigos/93.php?manual=2> (Formulrios HTML)
300
Referncias
FLANAGAN, David. JavaScript: o guia definitivo. 4 ed. Porto Alegre: Bookman, 2004. GRAHAM, Ian S. HTML 4.0 sourcebook: a complete guide to HTML 4.0 and HTML extensions. New York: Wiley Computer Publishing, 1998. LEMAY, Laura. Aprenda em 1 semana HTML 4. Rio de Janeiro: Editora Campus, 1998. MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. So Paulo: Editora rica, 2005. NIEDERST, Jennifer. Web design in a nutshell: a desktop quick reference. Sebastopol: OReilly, 1998. PRATES, Rubens. HTML: guia de consulta rpida. So Paulo: Editora Novatec, 1997. RAMALHO, Jos Antnio Alves. HTML 4: prtico e rpido. So Paulo: Editora Berkeley, 1999. REHDER, Wellington da Silva & PEREIRA, Marcelo Gino. HTML: hypertext markup Language. So Paulo: Editora Viena, 2003. WEINMAN, Lynda; WEINMAN, Bill. Design criativo com Html 2: um guia prtico e completo para design na web. Rio de Janeiro: Cincia Moderna, 2002.
Sites de Referncia
<http://www.abcdohtml.hpg.ig.com.br/html_intro.htm>
<http://www.intergate.com.br/supor te/glossario/glossario_w_x_y_z/ glossario_w_x_y_z.html> <http://rouder.vilabol.uol.com.br/html.htm> <http://www.hexagora.com/en_home.asp> <http://www.icmc.usp.br/ensino/material/html/edicao.html> <http://www.mat.ua.pt/antoniop/html/intro.htm> <http://members.fortunecity.com/vshelter/html/> <http://eof.alunos.dcc.fc.up.pt/manuais/HTML/HTML.html> <http://www.webwritersbrasil.com.br/detalhe.asp?numero=145> <http://www.artifice.web.pt/tutoriais> <http://vitoria.upf.tche.br/~carolina/ccc002/oficina/> <http://www.maujor.com/blog/2006/04/06/el-html/> <http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki> <http://www.mxstudio.com.br/views.glossario.php?cid=6&char=&p=5> <http://www.imasters.com.br/artigo/4224/css/> <http://www.w3schools.com/> <http://www.webwriter.dk/english/index.htm> <http://www.htmlbeauty.com/> <http://www.pagebreeze.com>/ <http://forum.htmlstaff.org/>
304
Unidade 2
1) No. A maioria dos navegadores capaz de lidar com pginas em HTML simples, sem as tags de estrutura de pgina. Mas, ao inclu-las, voc permitir que a sua pgina seja lida por ferramentas SGML (Standard Generalized Markup Language define a estrutura geral do contedo dos documentos, e no a aparncia real desse contedo na pgina) mais genricas e tambm tirar proveito dos recursos dos futuros navegadores. 2) Resposta pessoal.
Unidade 3
1) Resposta pessoal. 2) Resposta pessoal.
Unidade 4
1) Resposta pessoal.
Unidade 5
1) Resposta pessoal.
Unidade 6
1) <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 7
1) Resposta Pessoal. 2) Resposta Pessoal. 3) Sim. A tag NOFRAME possibilita que se crie uma opo de navegao na pgina para quem no possui um navegador que entenda frames. Se voc est navegando na internet e entra em uma pgina que no suporte frames, o navegador ignora essas tags e procura pela tag NOFRAME, que seria uma pgina alternativa.
Unidade 8
1) Resposta Pessoal. 2) Resposta Pessoal.
Unidade 9
1) Resposta Pessoal.
Unidade 10
1) Resposta Pessoal.
308
Biblioteca Virtual
Veja, a seguir, os servios oferecidos pela Biblioteca Virtual aos alunos a distncia:
Pesquisa a publicaes 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 Emprstimo de livros www. unisul.br/emprestimos Escaneamento de parte de obra1
Acesse a pgina da Biblioteca Virtual da Unisul, disponvel no EVA e explore seus recursos digitais. Qualquer dvida, escreva para bv@unisul.br
1 Se voc optar por escaneamento de parte do livro, o sumrio da obra ser enviado primeiramente para que voc possa escolher os captulos que deseja solicitar a reproduo. Lembre-se que para no ferir a Lei dos direitos autorais (Lei 9610/98), at 10 % do total de pginas de um livro podem ser reproduzidos.